impact-ui 4.0.0-alpha.21 → 4.0.0-alpha.23

package/dist/components/DatePicker/datePickerDropdown.d.ts

@@ -27,6 +27,13 @@ export interface DatePickerDropdownProps {
     maxDate?: Moment | null;
     isOutsideRange?: (day: Moment) => boolean;
     readOnly?: boolean;
+    hideTertiaryButton?: boolean;
+    hideSecondaryButton?: boolean;
+    hidePrimaryButton?: boolean;
+    placement?: 'top' | 'bottom';
+    dropdownRef?: React.RefObject<HTMLDivElement | null>;
+    allButtonsHidden?: boolean;
+    [key: string]: unknown;
 }
-export declare function DatePickerDropdown({ onDatesChange, focused, setFocused, selectedDate, setSelectedDate, showWeekNumbers, primaryButtonProps, secondaryButtonProps, tertiaryButtonProps, onPrimaryButtonClick, onSecondaryButtonClick, onTertiaryButtonClick, setIsOpen, withPortal, portalContainer, containerRef, showMonthYearSelect, customYears, minDate, maxDate, isOutsideRange, }: DatePickerDropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function DatePickerDropdown({ onDatesChange, focused, setFocused, selectedDate, setSelectedDate, showWeekNumbers, primaryButtonProps, secondaryButtonProps, tertiaryButtonProps, onPrimaryButtonClick, onSecondaryButtonClick, onTertiaryButtonClick, setIsOpen, withPortal, portalContainer, containerRef, showMonthYearSelect, customYears, minDate, maxDate, isOutsideRange, hideTertiaryButton, hideSecondaryButton, hidePrimaryButton, placement, dropdownRef, allButtonsHidden, ...calendarProps }: DatePickerDropdownProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=datePickerDropdown.d.ts.map

package/dist/components/DatePicker/datePickerDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"datePickerDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/datePickerDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAe,EAAE,KAAK,MAAM,EAAE,MAAM,QAAQ,CAAC;AAE7C,OAAO,wBAAwB,CAAC;AAIhC,OAAO,qCAAqC,CAAC;AAE7C,MAAM,WAAW,uBAAuB;IACtC,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7C,oBAAoB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/C,mBAAmB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9C,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACrD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACjD,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,aAAa,EACb,OAAO,EACP,UAAU,EACV,YAAY,EACZ,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,oBAAoB,EACpB,sBAAsB,EACtB,qBAAqB,EACrB,SAAS,EACT,UAAU,EACV,eAA6E,EAC7E,YAAY,EACZ,mBAAmB,EACnB,WAAW,EACX,OAAO,EACP,OAAO,EACP,cAAc,GACf,EAAE,uBAAuB,2CAoIzB"}
+{"version":3,"file":"datePickerDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/datePickerDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAe,EAAE,KAAK,MAAM,EAAE,MAAM,QAAQ,CAAC;AAE7C,OAAO,wBAAwB,CAAC;AAIhC,OAAO,qCAAqC,CAAC;AAE7C,MAAM,WAAW,uBAAuB;IACtC,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7C,oBAAoB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/C,mBAAmB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9C,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACrD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACjD,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACrD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,aAAa,EACb,OAAO,EACP,UAAU,EACV,YAAY,EACZ,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,oBAAoB,EACpB,sBAAsB,EACtB,qBAAqB,EACrB,SAAS,EACT,UAAU,EACV,eAA6E,EAC7E,YAAY,EACZ,mBAAmB,EACnB,WAAW,EACX,OAAO,EACP,OAAO,EACP,cAAc,EACd,kBAAkB,EAClB,mBAAmB,EACnB,iBAAiB,EACjB,SAAoB,EACpB,WAAW,EACX,gBAAgB,EAChB,GAAG,aAAa,EACjB,EAAE,uBAAuB,2CAiRzB"}

package/dist/components/DatePicker/datePickerDropdown.js

@@ -29,11 +29,22 @@ function DatePickerDropdown({
   customYears,
   minDate,
   maxDate,
-  isOutsideRange
+  isOutsideRange,
+  hideTertiaryButton,
+  hideSecondaryButton,
+  hidePrimaryButton,
+  placement = "bottom",
+  dropdownRef,
+  allButtonsHidden,
+  ...calendarProps
 }) {
   const [position, setPosition] = useState({ x: 0, y: 0, offsetHeight: 0, offsetWidth: 0 });
+  const [dropdownWidth, setDropdownWidth] = useState(269);
+  const [dropdownHeight, setDropdownHeight] = useState(allButtonsHidden ? 250 : 300);
   useLayoutEffect(() => {
-    if (containerRef.current) {
+    let frame = null;
+    const update = () => {
+      if (!containerRef.current) return;
       const scrollY = typeof window !== "undefined" ? window.scrollY || document.documentElement.scrollTop : 0;
       const {
         x,
@@ -42,8 +53,67 @@ function DatePickerDropdown({
         width: offsetWidth
       } = containerRef.current.getBoundingClientRect();
       setPosition({ x, y: y + scrollY, offsetHeight, offsetWidth });
+      if (dropdownRef == null ? void 0 : dropdownRef.current) {
+        const rect = dropdownRef.current.getBoundingClientRect();
+        if (rect.width) setDropdownWidth(rect.width);
+        if (rect.height) setDropdownHeight(rect.height);
+      }
+    };
+    const scheduleUpdate = () => {
+      if (frame !== null) return;
+      frame = requestAnimationFrame(() => {
+        update();
+        frame = null;
+      });
+    };
+    update();
+    let rafOuter = requestAnimationFrame(() => {
+      rafOuter = requestAnimationFrame(() => {
+        rafOuter = null;
+        update();
+      });
+    });
+    window.addEventListener("resize", scheduleUpdate);
+    window.addEventListener("scroll", scheduleUpdate, true);
+    return () => {
+      window.removeEventListener("resize", scheduleUpdate);
+      window.removeEventListener("scroll", scheduleUpdate, true);
+      if (frame !== null) cancelAnimationFrame(frame);
+      if (rafOuter !== null) cancelAnimationFrame(rafOuter);
+    };
+  }, [containerRef, placement, withPortal, showMonthYearSelect, showWeekNumbers, allButtonsHidden, dropdownRef]);
+  const onPrevMonthClick = (params) => {
+    var _a, _b;
+    const isNavButtonFocused = (_a = document.activeElement) == null ? void 0 : _a.classList.contains(
+      "DayPickerNavigation_leftButton__horizontalDefault"
+    );
+    if (isNavButtonFocused) {
+      setTimeout(() => {
+        var _a2;
+        const btn = (_a2 = dropdownRef == null ? void 0 : dropdownRef.current) == null ? void 0 : _a2.querySelector(
+          ".DayPickerNavigation_leftButton__horizontalDefault"
+        );
+        btn == null ? void 0 : btn.focus();
+      }, 0);
+    }
+    (_b = calendarProps.onPrevMonthClick) == null ? void 0 : _b.call(calendarProps, params);
+  };
+  const onNextMonthClick = (params) => {
+    var _a, _b;
+    const isNavButtonFocused = (_a = document.activeElement) == null ? void 0 : _a.classList.contains(
+      "DayPickerNavigation_rightButton__horizontalDefault"
+    );
+    if (isNavButtonFocused) {
+      setTimeout(() => {
+        var _a2;
+        const btn = (_a2 = dropdownRef == null ? void 0 : dropdownRef.current) == null ? void 0 : _a2.querySelector(
+          ".DayPickerNavigation_rightButton__horizontalDefault"
+        );
+        btn == null ? void 0 : btn.focus();
+      }, 0);
     }
-  }, [containerRef]);
+    (_b = calendarProps.onNextMonthClick) == null ? void 0 : _b.call(calendarProps, params);
+  };
   const handleDateChange = useCallback(
     (date) => {
       if (date) {
@@ -98,19 +168,26 @@ function DatePickerDropdown({
       onDateChange: handleDateChange,
       onFocusChange: () => {
         setFocused(true);
-      }
+      },
+      onPrevMonthClick,
+      onNextMonthClick,
+      ...calendarProps
     },
     `calendar-${withPortal ? "portal" : "inline"}-${focused ? "focused" : "unfocused"}`
   );
   const dropdownContent = /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `impact-date-picker-dropdown-container ${showWeekNumbers ? "showWeekNumbers" : ""}`,
+      ref: dropdownRef,
+      className: `impact-date-picker-dropdown-container ${placement === "top" ? "impact-date-picker-dropdown-top" : ""} ${showWeekNumbers ? "showWeekNumbers" : ""}`,
       children: [
         renderCalendar(),
         /* @__PURE__ */ jsx(
           DatePickerFooter,
           {
+            hidePrimaryButton,
+            hideSecondaryButton,
+            hideTertiaryButton,
             primaryButtonProps,
             secondaryButtonProps,
             setFocused,
@@ -126,14 +203,31 @@ function DatePickerDropdown({
     }
   );
   if (withPortal && portalContainer) {
+    const spacing = 6;
+    const scrollX = typeof window !== "undefined" ? window.scrollX || document.documentElement.scrollLeft : 0;
+    const scrollY = typeof window !== "undefined" ? window.scrollY || document.documentElement.scrollTop : 0;
+    const viewportWidth2 = typeof window !== "undefined" ? window.innerWidth : 0;
+    const viewportTopOffset = 64;
+    const top = placement === "top" ? position.y - dropdownHeight - spacing : position.y + position.offsetHeight + spacing;
+    const clampedTop = Math.max(viewportTopOffset + scrollY, top);
+    const rightPadding2 = 10;
+    const leftPadding2 = 10;
+    const triggerRight2 = position.x + position.offsetWidth;
+    const wouldOverflowRight2 = position.x + dropdownWidth > viewportWidth2 - rightPadding2;
+    const viewportLeft2 = wouldOverflowRight2 ? triggerRight2 - dropdownWidth : position.x;
+    const clampedViewportLeft2 = Math.min(
+      Math.max(leftPadding2, viewportLeft2),
+      viewportWidth2 - dropdownWidth - rightPadding2
+    );
+    const documentLeft = clampedViewportLeft2 + scrollX;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
         "div",
         {
           className: "impact-portal-container",
           style: {
-            top: position.y,
-            left: position.x,
+            top: clampedTop,
+            left: documentLeft,
             width: position.offsetWidth ? `${position.offsetWidth}px` : void 0
           },
           children: dropdownContent
@@ -151,7 +245,45 @@ function DatePickerDropdown({
       )
     ] });
   }
-  return dropdownContent;
+  const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 0;
+  const rightPadding = 10;
+  const leftPadding = 10;
+  const triggerRight = position.x + position.offsetWidth;
+  const wouldOverflowRight = position.x + dropdownWidth > viewportWidth - rightPadding;
+  const viewportLeft = wouldOverflowRight ? triggerRight - dropdownWidth : position.x;
+  const clampedViewportLeft = Math.min(
+    Math.max(leftPadding, viewportLeft),
+    viewportWidth - dropdownWidth - rightPadding
+  );
+  const relativeLeft = clampedViewportLeft - position.x;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: dropdownRef,
+      className: `impact-date-picker-dropdown-container ${placement === "top" ? "impact-date-picker-dropdown-top" : ""} ${showWeekNumbers ? "showWeekNumbers" : ""}`,
+      style: { left: relativeLeft },
+      children: [
+        renderCalendar(),
+        /* @__PURE__ */ jsx(
+          DatePickerFooter,
+          {
+            hidePrimaryButton,
+            hideSecondaryButton,
+            hideTertiaryButton,
+            primaryButtonProps,
+            secondaryButtonProps,
+            setFocused,
+            setIsOpen,
+            setSelectedDate,
+            tertiaryButtonProps,
+            onPrimaryButtonClick,
+            onSecondaryButtonClick,
+            onTertiaryButtonClick
+          }
+        )
+      ]
+    }
+  );
 }
 export {
   DatePickerDropdown

package/dist/components/DatePicker/datePickerFooter.d.ts

@@ -10,6 +10,9 @@ export interface DatePickerFooterProps {
     onSecondaryButtonClick?: () => void;
     onPrimaryButtonClick?: () => void;
     setIsOpen: (open: boolean) => void;
+    hideTertiaryButton?: boolean;
+    hideSecondaryButton?: boolean;
+    hidePrimaryButton?: boolean;
 }
-export declare function DatePickerFooter({ tertiaryButtonProps, secondaryButtonProps, primaryButtonProps, setSelectedDate, setFocused, onTertiaryButtonClick, onSecondaryButtonClick, onPrimaryButtonClick, setIsOpen, }: DatePickerFooterProps): import("react/jsx-runtime").JSX.Element;
+export declare function DatePickerFooter({ tertiaryButtonProps, secondaryButtonProps, primaryButtonProps, setSelectedDate, setFocused, onTertiaryButtonClick, onSecondaryButtonClick, onPrimaryButtonClick, setIsOpen, hideTertiaryButton, hideSecondaryButton, hidePrimaryButton, }: DatePickerFooterProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=datePickerFooter.d.ts.map

package/dist/components/DatePicker/datePickerFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"datePickerFooter.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/datePickerFooter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAErC,MAAM,WAAW,qBAAqB;IACpC,mBAAmB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9C,oBAAoB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/C,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7C,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACpC;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,mBAAmB,EACnB,oBAAoB,EACpB,kBAAkB,EAClB,eAAe,EACf,UAAU,EACV,qBAAqB,EACrB,sBAAsB,EACtB,oBAAoB,EACpB,SAAS,GACV,EAAE,qBAAqB,2CA+BvB"}
+{"version":3,"file":"datePickerFooter.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/datePickerFooter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAErC,MAAM,WAAW,qBAAqB;IACpC,mBAAmB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9C,oBAAoB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/C,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7C,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,mBAAmB,EACnB,oBAAoB,EACpB,kBAAkB,EAClB,eAAe,EACf,UAAU,EACV,qBAAqB,EACrB,sBAAsB,EACtB,oBAAoB,EACpB,SAAS,EACT,kBAAkB,EAClB,mBAAmB,EACnB,iBAAiB,GAClB,EAAE,qBAAqB,2CA2CvB"}

package/dist/components/DatePicker/datePickerFooter.js

@@ -9,8 +9,12 @@ function DatePickerFooter({
   onTertiaryButtonClick,
   onSecondaryButtonClick,
   onPrimaryButtonClick,
-  setIsOpen
+  setIsOpen,
+  hideTertiaryButton,
+  hideSecondaryButton,
+  hidePrimaryButton
 }) {
+  const allButtonsHidden = hideTertiaryButton && hideSecondaryButton && hidePrimaryButton;
   const handleClear = () => {
     setSelectedDate == null ? void 0 : setSelectedDate(null);
     setFocused(false);
@@ -25,11 +29,17 @@ function DatePickerFooter({
     setIsOpen(false);
     onPrimaryButtonClick == null ? void 0 : onPrimaryButtonClick();
   };
-  return /* @__PURE__ */ jsxs("div", { className: "datePicker-buttons-container", children: [
-    /* @__PURE__ */ jsx(Button, { size: "small", variant: "url", onClick: handleClear, ...tertiaryButtonProps, children: "Clear" }),
-    /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", onClick: handleCancel, ...secondaryButtonProps, children: "Cancel" }),
-    /* @__PURE__ */ jsx(Button, { size: "small", variant: "primary", onClick: handleApply, ...primaryButtonProps, children: "Apply" })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `datePicker-buttons-container ${allButtonsHidden ? "datePicker-buttons-container--hidden" : ""}`,
+      children: [
+        !hideTertiaryButton && /* @__PURE__ */ jsx(Button, { size: "small", variant: "url", onClick: handleClear, ...tertiaryButtonProps, children: "Clear" }),
+        !hideSecondaryButton && /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", onClick: handleCancel, ...secondaryButtonProps, children: "Cancel" }),
+        !hidePrimaryButton && /* @__PURE__ */ jsx(Button, { size: "small", variant: "primary", onClick: handleApply, ...primaryButtonProps, children: "Apply" })
+      ]
+    }
+  );
 }
 export {
   DatePickerFooter

package/dist/components/DatePicker/datePickerInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"datePickerInput.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/datePickerInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+D,MAAM,OAAO,CAAC;AACpF,OAAe,EAAE,KAAK,MAAM,EAAE,MAAM,QAAQ,CAAC;AAW7C,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC3D,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAKD,eAAO,MAAM,eAAe,sGAuP3B,CAAC"}
+{"version":3,"file":"datePickerInput.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/datePickerInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+D,MAAM,OAAO,CAAC;AACpF,OAAe,EAAE,KAAK,MAAM,EAAE,MAAM,QAAQ,CAAC;AAW7C,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC3D,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAKD,eAAO,MAAM,eAAe,sGAgQ3B,CAAC"}

package/dist/components/DatePicker/datePickerInput.js

@@ -24,7 +24,7 @@ const DatePickerInput = forwardRef(
     customIcon,
     inputProps,
     setIsOpen,
-    isOpen: _isOpen,
+    isOpen,
     selectedDate: _selectedDate,
     id,
     "data-testid": dataTestId,
@@ -181,6 +181,14 @@ const DatePickerInput = forwardRef(
     const handleKeyDown = (e) => {
       var _a;
       if (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "Tab") return;
+      if (e.key === "Enter" && !isOpen) {
+        setIsOpen(true);
+        return;
+      }
+      if (e.key === "Escape") {
+        setIsOpen(false);
+        return;
+      }
       if (e.key === "Backspace") {
         e.preventDefault();
         const caret = ((_a = inputRef.current) == null ? void 0 : _a.selectionStart) ?? 0;
@@ -214,6 +222,7 @@ const DatePickerInput = forwardRef(
               ref: setInputRef,
               className: "impact-datepicker-date-input",
               "data-testid": dataTestId,
+              disabled: isDisabled,
               id,
               placeholder,
               readOnly,

package/dist/components/DatePicker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":"AAEA,OAAO,wBAAwB,CAAC;AAGhC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,qCAAqC,CAAC;AAC7C,OAAO,0BAA0B,CAAC;AAElC,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D;;;GAGG;AACH,eAAO,MAAM,UAAU,mHAuOtB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":"AAEA,OAAO,wBAAwB,CAAC;AAGhC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,qCAAqC,CAAC;AAC7C,OAAO,0BAA0B,CAAC;AAElC,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D;;;GAGG;AACH,eAAO,MAAM,UAAU,mHAqRtB,CAAC"}

package/dist/components/DatePicker/index.js

@@ -1,4 +1,4 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.PresetDateRangePicker_panel{padding:0 22px 11px}.PresetDateRangePicker_button{background:0 0;border:2px solid #00a699;-moz-box-sizing:border-box;box-sizing:border-box;color:#00a699;cursor:pointer;font:inherit;font-weight:700;height:100%;line-height:normal;margin-right:8px;overflow:visible;padding:4px 12px;position:relative;text-align:center}.PresetDateRangePicker_button:active{outline:0}.PresetDateRangePicker_button__selected{background:#00a699;color:#fff}.SingleDatePickerInput{background-color:#fff;display:inline-block}.SingleDatePickerInput__withBorder{border:1px solid #dbdbdb;border-radius:2px}.SingleDatePickerInput__rtl{direction:rtl}.SingleDatePickerInput__disabled{background-color:#f2f2f2}.SingleDatePickerInput__block{display:block}.SingleDatePickerInput__showClearDate{padding-right:30px}.SingleDatePickerInput_clearDate{background:0 0;border:0;color:inherit;cursor:pointer;font:inherit;line-height:normal;margin:0 10px 0 5px;overflow:visible;padding:10px;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.SingleDatePickerInput_clearDate__default:focus,.SingleDatePickerInput_clearDate__default:hover{background:#dbdbdb;border-radius:50%}.SingleDatePickerInput_clearDate__small{padding:6px}.SingleDatePickerInput_clearDate__hide{visibility:hidden}.SingleDatePickerInput_clearDate_svg{fill:#82888a;height:12px;vertical-align:middle;width:15px}.SingleDatePickerInput_clearDate_svg__small{height:9px}.SingleDatePickerInput_calendarIcon{background:0 0;border:0;color:inherit;cursor:pointer;display:inline-block;font:inherit;line-height:normal;margin:0 5px 0 10px;overflow:visible;padding:10px;vertical-align:middle}.SingleDatePickerInput_calendarIcon_svg{fill:#82888a;height:15px;vertical-align:middle;width:14px}.SingleDatePicker{display:inline-block;position:relative}.SingleDatePicker__block{display:block}.SingleDatePicker_picker{background-color:#fff;position:absolute;z-index:1}.SingleDatePicker_picker__rtl{direction:rtl}.SingleDatePicker_picker__directionLeft{left:0}.SingleDatePicker_picker__directionRight{right:0}.SingleDatePicker_picker__portal{background-color:#0000004d;height:100%;left:0;position:fixed;top:0;width:100%}.SingleDatePicker_picker__fullScreenPortal{background-color:#fff}.SingleDatePicker_closeButton{background:0 0;border:0;color:inherit;cursor:pointer;font:inherit;line-height:normal;overflow:visible;padding:15px;position:absolute;right:0;top:0;z-index:2}.SingleDatePicker_closeButton:focus,.SingleDatePicker_closeButton:hover{color:darken(#cacccd,10%);text-decoration:none}.SingleDatePicker_closeButton_svg{fill:#cacccd;height:15px;width:15px}.DayPickerKeyboardShortcuts_buttonReset{background:0 0;border:0;border-radius:0;color:inherit;cursor:pointer;font:inherit;font-size:14px;line-height:normal;overflow:visible;padding:0}.DayPickerKeyboardShortcuts_buttonReset:active{outline:0}.DayPickerKeyboardShortcuts_show{height:26px;position:absolute;width:33px;z-index:2}.DayPickerKeyboardShortcuts_show:before{content:"";display:block;position:absolute}.DayPickerKeyboardShortcuts_show__bottomRight{bottom:0;right:0}.DayPickerKeyboardShortcuts_show__bottomRight:before{border-right:33px solid #00a699;border-top:26px solid #0000;bottom:0;right:0}.DayPickerKeyboardShortcuts_show__bottomRight:hover:before{border-right:33px solid #008489}.DayPickerKeyboardShortcuts_show__topRight{right:0;top:0}.DayPickerKeyboardShortcuts_show__topRight:before{border-bottom:26px solid #0000;border-right:33px solid #00a699;right:0;top:0}.DayPickerKeyboardShortcuts_show__topRight:hover:before{border-right:33px solid #008489}.DayPickerKeyboardShortcuts_show__topLeft{left:0;top:0}.DayPickerKeyboardShortcuts_show__topLeft:before{border-bottom:26px solid #0000;border-left:33px solid #00a699;left:0;top:0}.DayPickerKeyboardShortcuts_show__topLeft:hover:before{border-left:33px solid #008489}.DayPickerKeyboardShortcuts_showSpan{color:#fff;position:absolute}.DayPickerKeyboardShortcuts_showSpan__bottomRight{bottom:0;right:5px}.DayPickerKeyboardShortcuts_showSpan__topRight{right:5px;top:1px}.DayPickerKeyboardShortcuts_showSpan__topLeft{left:5px;top:1px}.DayPickerKeyboardShortcuts_panel{background:#fff;border:1px solid #dbdbdb;border-radius:2px;bottom:0;left:0;margin:33px;overflow:auto;padding:22px;position:absolute;right:0;text-align:left;top:0;z-index:2}.DayPickerKeyboardShortcuts_title{font-size:16px;font-weight:700;margin:0}.DayPickerKeyboardShortcuts_list{font-size:14px;list-style:none;padding:0}.DayPickerKeyboardShortcuts_close{position:absolute;right:22px;top:22px;z-index:2}.DayPickerKeyboardShortcuts_close:active{outline:0}.DayPickerKeyboardShortcuts_closeSvg{fill:#cacccd;height:15px;width:15px}.DayPickerKeyboardShortcuts_closeSvg:focus,.DayPickerKeyboardShortcuts_closeSvg:hover{fill:#82888a}.CalendarDay{-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;font-size:14px;text-align:center}.CalendarDay:active{outline:0}.CalendarDay__defaultCursor{cursor:default}.CalendarDay__default{background:#fff;border:1px solid #e4e7e7;color:#484848}.CalendarDay__default:hover{background:#e4e7e7;border:1px solid #e4e7e7;color:inherit}.CalendarDay__hovered_offset{background:#f4f5f5;border:1px double #e4e7e7;color:inherit}.CalendarDay__outside{background:#fff;border:0;color:#484848}.CalendarDay__outside:hover{border:0}.CalendarDay__blocked_minimum_nights{background:#fff;border:1px solid #eceeee;color:#cacccd}.CalendarDay__blocked_minimum_nights:active,.CalendarDay__blocked_minimum_nights:hover{background:#fff;color:#cacccd}.CalendarDay__highlighted_calendar{background:#ffe8bc;color:#484848}.CalendarDay__highlighted_calendar:active,.CalendarDay__highlighted_calendar:hover{background:#ffce71;color:#484848}.CalendarDay__selected_span{background:#66e2da;border:1px double #33dacd;color:#fff}.CalendarDay__selected_span:active,.CalendarDay__selected_span:hover{background:#33dacd;border:1px double #33dacd;color:#fff}.CalendarDay__selected,.CalendarDay__selected:active,.CalendarDay__selected:hover{background:#00a699;border:1px double #00a699;color:#fff}.CalendarDay__hovered_span,.CalendarDay__hovered_span:hover{background:#b2f1ec;border:1px double #80e8e0;color:#007a87}.CalendarDay__hovered_span:active{background:#80e8e0;border:1px double #80e8e0;color:#007a87}.CalendarDay__blocked_calendar,.CalendarDay__blocked_calendar:active,.CalendarDay__blocked_calendar:hover{background:#cacccd;border:1px solid #cacccd;color:#82888a}.CalendarDay__blocked_out_of_range,.CalendarDay__blocked_out_of_range:active,.CalendarDay__blocked_out_of_range:hover{background:#fff;border:1px solid #e4e7e7;color:#cacccd}.CalendarDay__hovered_start_first_possible_end{background:#eceeee;border:1px double #eceeee}.CalendarDay__hovered_start_blocked_min_nights{background:#eceeee;border:1px double #e4e7e7}.CalendarMonth{background:#fff;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top}.CalendarMonth_table{border-collapse:collapse;border-spacing:0}.CalendarMonth_verticalSpacing{border-collapse:initial}.CalendarMonth_caption{caption-side:top;color:#484848;font-size:18px;padding-bottom:37px;padding-top:22px;text-align:center}.CalendarMonth_caption__verticalScrollable{padding-bottom:7px;padding-top:12px}.CalendarMonthGrid{background:#fff;text-align:left;z-index:0}.CalendarMonthGrid__animating{z-index:1}.CalendarMonthGrid__horizontal{left:9px;position:absolute}.CalendarMonthGrid__vertical,.CalendarMonthGrid__vertical_scrollable{margin:0 auto}.CalendarMonthGrid_month__horizontal{display:inline-block;min-height:100%;vertical-align:top}.CalendarMonthGrid_month__hideForAnimation{opacity:0;pointer-events:none;position:absolute;z-index:-1}.CalendarMonthGrid_month__hidden{visibility:hidden}.DayPickerNavigation{position:relative;z-index:2}.DayPickerNavigation__horizontal{height:0}.DayPickerNavigation__verticalScrollable_prevNav{z-index:1}.DayPickerNavigation__verticalDefault{bottom:0;height:52px;left:0;position:absolute;width:100%}.DayPickerNavigation__verticalScrollableDefault{position:relative}.DayPickerNavigation__bottom{height:auto}.DayPickerNavigation__bottomDefault{-webkit-box-pack:justify;-ms-flex-pack:justify;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between}.DayPickerNavigation_button{border:0;cursor:pointer;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.DayPickerNavigation_button__default{background-color:#fff;border:1px solid #e4e7e7;color:#757575}.DayPickerNavigation_button__default:focus,.DayPickerNavigation_button__default:hover{border:1px solid #c4c4c4}.DayPickerNavigation_button__default:active{background:#f2f2f2}.DayPickerNavigation_button__disabled{border:1px solid #f2f2f2;cursor:default}.DayPickerNavigation_button__disabled:focus,.DayPickerNavigation_button__disabled:hover{border:1px solid #f2f2f2}.DayPickerNavigation_button__disabled:active{background:0 0}.DayPickerNavigation_button__horizontalDefault{border-radius:3px;line-height:.78;padding:6px 9px;position:absolute;top:18px}.DayPickerNavigation_bottomButton__horizontalDefault{margin:-10px 22px 30px;position:static}.DayPickerNavigation_leftButton__horizontalDefault{left:22px}.DayPickerNavigation_rightButton__horizontalDefault{right:22px}.DayPickerNavigation_button__verticalDefault{background:#fff;box-shadow:0 0 5px 2px #0000001a;display:inline-block;height:100%;padding:5px;position:relative;text-align:center;width:50%}.DayPickerNavigation_nextButton__verticalDefault{border-left:0}.DayPickerNavigation_nextButton__verticalScrollableDefault,.DayPickerNavigation_prevButton__verticalScrollableDefault{width:100%}.DayPickerNavigation_svg__horizontal{display:block;fill:#82888a;height:19px;width:19px}.DayPickerNavigation_svg__vertical{fill:#484848;height:42px;width:42px}.DayPickerNavigation_svg__disabled{fill:#f2f2f2}.DayPicker{position:relative;text-align:left}.DayPicker,.DayPicker__horizontal{background:#fff}.DayPicker__verticalScrollable{height:100%}.DayPicker__hidden{visibility:hidden}.DayPicker__withBorder{border-radius:3px;box-shadow:0 2px 6px #0000000d,0 0 0 1px #00000012}.DayPicker_portal__horizontal{box-shadow:none;left:50%;position:absolute;top:50%}.DayPicker_portal__vertical{position:static}.DayPicker_focusRegion{outline:0}.DayPicker_calendarInfo__horizontal,.DayPicker_wrapper__horizontal{display:inline-block;vertical-align:top}.DayPicker_weekHeaders{position:relative}.DayPicker_weekHeaders__horizontal{margin-left:9px}.DayPicker_weekHeader{color:#757575;position:absolute;text-align:left;top:62px;z-index:2}.DayPicker_weekHeader__vertical{left:50%}.DayPicker_weekHeader__verticalScrollable{background:#fff;border-bottom:1px solid #dbdbdb;display:table-row;left:0;margin-left:0;text-align:center;top:0;width:100%}.DayPicker_weekHeader_ul{font-size:14px;list-style:none;margin:1px 0;padding-left:0;padding-right:0}.DayPicker_weekHeader_li{display:inline-block;text-align:center}.DayPicker_transitionContainer{border-radius:3px;overflow:hidden;position:relative}.DayPicker_transitionContainer__horizontal{-webkit-transition:height .2s ease-in-out;-moz-transition:height .2s ease-in-out;transition:height .2s ease-in-out}.DayPicker_transitionContainer__vertical{width:100%}.DayPicker_transitionContainer__verticalScrollable{bottom:0;height:100%;left:0;overflow-y:scroll;padding-top:20px;position:absolute;right:0;top:0}.DateInput{background:#fff;display:inline-block;margin:0;padding:0;position:relative;vertical-align:middle;width:130px}.DateInput__small{width:97px}.DateInput__block{width:100%}.DateInput__disabled{background:#f2f2f2;color:#dbdbdb}.DateInput_input{background-color:#fff;border:0;border-bottom:2px solid #0000;border-radius:0;color:#484848;font-size:19px;font-weight:200;line-height:24px;padding:11px 11px 9px;width:100%}.DateInput_input__small{font-size:15px;letter-spacing:.2px;line-height:18px;padding:7px 7px 5px}.DateInput_input__regular{font-weight:auto}.DateInput_input__readOnly{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.DateInput_input__focused{background:#fff;border:0;border-bottom:2px solid #008489;outline:0}.DateInput_input__disabled{background:#f2f2f2;font-style:italic}.DateInput_screenReaderMessage{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.DateInput_fang{height:10px;left:22px;position:absolute;width:20px;z-index:2}.DateInput_fangShape{fill:#fff}.DateInput_fangStroke{fill:#0000;stroke:#dbdbdb}.DateRangePickerInput{background-color:#fff;display:inline-block}.DateRangePickerInput__disabled{background:#f2f2f2}.DateRangePickerInput__withBorder{border:1px solid #dbdbdb;border-radius:2px}.DateRangePickerInput__rtl{direction:rtl}.DateRangePickerInput__block{display:block}.DateRangePickerInput__showClearDates{padding-right:30px}.DateRangePickerInput_arrow{color:#484848;display:inline-block;vertical-align:middle}.DateRangePickerInput_arrow_svg{fill:#484848;height:24px;vertical-align:middle;width:24px}.DateRangePickerInput_clearDates{background:0 0;border:0;color:inherit;cursor:pointer;font:inherit;line-height:normal;margin:0 10px 0 5px;overflow:visible;padding:10px;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.DateRangePickerInput_clearDates__small{padding:6px}.DateRangePickerInput_clearDates_default:focus,.DateRangePickerInput_clearDates_default:hover{background:#dbdbdb;border-radius:50%}.DateRangePickerInput_clearDates__hide{visibility:hidden}.DateRangePickerInput_clearDates_svg{fill:#82888a;height:12px;vertical-align:middle;width:15px}.DateRangePickerInput_clearDates_svg__small{height:9px}.DateRangePickerInput_calendarIcon{background:0 0;border:0;color:inherit;cursor:pointer;display:inline-block;font:inherit;line-height:normal;margin:0 5px 0 10px;overflow:visible;padding:10px;vertical-align:middle}.DateRangePickerInput_calendarIcon_svg{fill:#82888a;height:15px;vertical-align:middle;width:14px}.DateRangePicker{display:inline-block;position:relative}.DateRangePicker__block{display:block}.DateRangePicker_picker{background-color:#fff;position:absolute;z-index:1}.DateRangePicker_picker__rtl{direction:rtl}.DateRangePicker_picker__directionLeft{left:0}.DateRangePicker_picker__directionRight{right:0}.DateRangePicker_picker__portal{background-color:#0000004d;height:100%;left:0;position:fixed;top:0;width:100%}.DateRangePicker_picker__fullScreenPortal{background-color:#fff}.DateRangePicker_closeButton{background:0 0;border:0;color:inherit;cursor:pointer;font:inherit;line-height:normal;overflow:visible;padding:15px;position:absolute;right:0;top:0;z-index:2}.DateRangePicker_closeButton:focus,.DateRangePicker_closeButton:hover{color:darken(#cacccd,10%);text-decoration:none}.DateRangePicker_closeButton_svg{fill:#cacccd;height:15px;width:15px}\n.impact-datepicker-main-container{display:flex;font-family:Manrope,sans-serif}.impact-datepicker-main-container.label-flex-row{align-items:center;flex-direction:row;gap:16px}.impact-datepicker-main-container.label-flex-column{flex-direction:column}.impact-datepicker-main-container.label-flex-column .datePicker-label{margin-bottom:6px}.impact-datepicker-main-container .datePicker-label{color:#60697d;font-family:Manrope,sans-serif;font-size:12px;font-weight:500;line-height:18px}.impact-datepicker-main-container .datePicker-container{position:relative}.impact-datepicker-main-container .datePicker-input-container{height:32px;width:240px}.impact-datepicker-main-container .datePicker-input-container .impact-datepicker-date-input{background:url(https://impact-kit.devs.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/calendar.svg) no-repeat;background-color:#fff;background-position:center right 12px;background-size:14px;border:1px solid #c3c8d4;border-radius:8px;font-family:Manrope,sans-serif;font-size:14px;font-weight:500;height:32px;padding-left:12px;width:100%}.impact-datepicker-main-container .datePicker-input-container .impact-datepicker-date-input:hover{border:1px solid #4259ee;cursor:pointer}.impact-datepicker-main-container .datePicker-input-container .impact-datepicker-date-input:focus{border:1px solid #4259ee}.impact-datepicker-main-container .datePicker-input-container .impact-datepicker-date-input:focus::placeholder{color:#4259ee}.impact-datepicker-main-container .datePicker-input-container .impact-datepicker-date-input:focus-visible{border:1px solid #4259ee;outline:none}.impact-datepicker-main-container .datePicker-input-container-custom-icon{display:flex;position:relative}.impact-datepicker-main-container .datePicker-input-container-custom-icon .impact-datepicker-date-input{background:#fff!important}.impact-datepicker-main-container .datePicker-input-disabled .impact-datepicker-date-input{background-color:#f2f4fb;border:1px solid #d9dde7;pointer-events:none!important}.impact-datepicker-main-container .datePicker-input-disabled .impact-datepicker-date-input:hover{border:1px solid #d9dde7}.impact-datepicker-main-container .impact-datePicker-error .impact-datepicker-date-input{border:1px solid red!important}.impact-datepicker-main-container .impact-datePicker-error .impact-datepicker-date-input:hover{border:1px solid red!important;cursor:pointer}.impact-datepicker-main-container .impact-datePicker-error .impact-datepicker-date-input:focus{border:1px solid red!important}.impact-datepicker-main-container .impact-datePicker-error .impact-datepicker-date-input:focus-visible{border:1px solid red!important;outline:none}.impact-datepicker-main-container .impact-datePicker-error .impact-datepicker-date-input:focus::placeholder{color:red}.impact-date-picker-dropdown-container{background-color:#fff;border:none;border-radius:8px;box-shadow:0 1px 6px #00000029;left:0;position:absolute;top:35px;width:269px;z-index:99}.impact-date-picker-dropdown-container .DayPicker{height:250px;width:269px!important}.impact-date-picker-dropdown-container .DayPicker>div{width:269px}.impact-date-picker-dropdown-container .DayPicker>div>div{width:269px!important}.impact-date-picker-dropdown-container .DayPicker__withBorder{box-shadow:none}.impact-date-picker-dropdown-container .DayPicker_focusRegion{width:269px!important}.impact-date-picker-dropdown-container .DayPicker_transitionContainer{min-height:250px;width:269px!important}.impact-date-picker-dropdown-container .CalendarMonthGrid__horizontal{left:0}.impact-date-picker-dropdown-container .CalendarMonthGrid_month__hidden,.impact-date-picker-dropdown-container .CalendarMonthGrid_month__horizontal{width:269px}.impact-date-picker-dropdown-container .CalendarMonth{padding:20px!important}.impact-date-picker-dropdown-container .CalendarMonth_caption{color:#1f2b4d;font-family:Manrope,sans-serif;font-size:14px;font-weight:500;padding-bottom:28px;padding-top:0}.impact-date-picker-dropdown-container .DayPicker_weekHeader_li small{line-height:20px}.impact-date-picker-dropdown-container .DayPicker_weekHeader{left:0;padding:0 12px;top:50px;width:269px}.impact-date-picker-dropdown-container .DayPicker_weekHeader ul{font-family:Manrope,sans-serif;font-size:12px;font-weight:400;padding-left:1px}.impact-date-picker-dropdown-container .DayPicker_weekHeader:after{background-color:#d4d4d4;bottom:-2px;content:"";height:1px;left:15px;position:absolute;width:80%}.impact-date-picker-dropdown-container .DayPickerNavigation{position:relative;z-index:2}.impact-date-picker-dropdown-container .DayPickerNavigation__horizontal{height:0}.impact-date-picker-dropdown-container .DayPickerNavigation_button__default{background:url(https://impact-kit.devs.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/accordion-chevron.svg) no-repeat;background-size:12px;transform:rotate(90deg)}.impact-date-picker-dropdown-container .DayPickerNavigation_button__default svg{display:none}.impact-date-picker-dropdown-container .DayPickerNavigation_button__horizontalDefault{border-radius:3px;line-height:.78;padding:6px;position:absolute;top:25px}.impact-date-picker-dropdown-container .DayPickerNavigation_leftButton__horizontalDefault{border:none;left:24px;top:24px}.impact-date-picker-dropdown-container .DayPickerNavigation_rightButton__horizontalDefault{border:none;right:20px;top:24px;transform:rotate(-90deg)}.impact-date-picker-dropdown-container .CalendarMonth_table{border-collapse:initial;border-spacing:10px 8px;padding-top:8px}.impact-date-picker-dropdown-container .CalendarDay__default{border:none;color:#1f2b4d;font-family:Manrope,sans-serif;font-size:12px;font-weight:400;height:20px!important;line-height:16.39px;padding-top:2px;width:20px!important}.impact-date-picker-dropdown-container .CalendarDay__default:hover{background:#eceefd!important;border-radius:8px;color:#4259ee;outline:1px solid #b3bdf8}.impact-date-picker-dropdown-container .CalendarDay__selected,.impact-date-picker-dropdown-container .CalendarDay__selected:active,.impact-date-picker-dropdown-container .CalendarDay__selected:hover{background:#4259ee!important;border-radius:8px;color:#fff}.impact-date-picker-dropdown-container .CalendarDay__blocked_out_of_range{color:#c3c8d4!important}.impact-date-picker-dropdown-container .DayPicker_weekHeader_li{display:inline-block;margin-left:10px;text-align:center;width:20px!important}.datePicker-buttons-container{display:flex;gap:16px;justify-content:flex-end;padding:10px 19px;position:relative}.datePicker-buttons-container:before{background-color:#d4d4d4;content:"";height:1px;left:10px;position:absolute;top:0;width:90%}.showWeekNumbers .DayPicker_weekHeader:after{left:25px}.showWeekNumbers .CalendarMonth_table{left:10px;padding-top:4px;position:relative}.showWeekNumbers .CalendarMonth_table tbody{position:relative}.showWeekNumbers .CalendarMonth_table tbody:before{background-color:#d4d4d4;content:"";height:130px;left:-5px;position:absolute;top:6px;width:1px;z-index:1}.showWeekNumbers .CalendarDayWeekNumber{color:#757575;display:block;font-family:Manrope,sans-serif;font-size:11px;font-weight:500;left:-30px;position:absolute;width:18px}.impact-portal-container{position:absolute;z-index:9999}.impact-datepicker-full-width-main-container .datePicker-input-container{width:100%}.date-picker-show-month-year-select-container{align-items:center;display:flex;justify-content:space-between;left:23px;position:relative;top:-6px;width:188px;z-index:9999}.date-picker-show-month-year-select-container .date-picker-month-select-container{width:105px}.date-picker-show-month-year-select-container .date-picker-year-select-container{width:80px}.date-picker-month-select-dropdown,.date-picker-year-select-dropdown{min-width:115px!important;width:115px!important}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.PresetDateRangePicker_panel{padding:0 22px 11px}.PresetDateRangePicker_button{background:0 0;border:2px solid #00a699;-moz-box-sizing:border-box;box-sizing:border-box;color:#00a699;cursor:pointer;font:inherit;font-weight:700;height:100%;line-height:normal;margin-right:8px;overflow:visible;padding:4px 12px;position:relative;text-align:center}.PresetDateRangePicker_button:active{outline:0}.PresetDateRangePicker_button__selected{background:#00a699;color:#fff}.SingleDatePickerInput{background-color:#fff;display:inline-block}.SingleDatePickerInput__withBorder{border:1px solid #dbdbdb;border-radius:2px}.SingleDatePickerInput__rtl{direction:rtl}.SingleDatePickerInput__disabled{background-color:#f2f2f2}.SingleDatePickerInput__block{display:block}.SingleDatePickerInput__showClearDate{padding-right:30px}.SingleDatePickerInput_clearDate{background:0 0;border:0;color:inherit;cursor:pointer;font:inherit;line-height:normal;margin:0 10px 0 5px;overflow:visible;padding:10px;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.SingleDatePickerInput_clearDate__default:focus,.SingleDatePickerInput_clearDate__default:hover{background:#dbdbdb;border-radius:50%}.SingleDatePickerInput_clearDate__small{padding:6px}.SingleDatePickerInput_clearDate__hide{visibility:hidden}.SingleDatePickerInput_clearDate_svg{fill:#82888a;height:12px;vertical-align:middle;width:15px}.SingleDatePickerInput_clearDate_svg__small{height:9px}.SingleDatePickerInput_calendarIcon{background:0 0;border:0;color:inherit;cursor:pointer;display:inline-block;font:inherit;line-height:normal;margin:0 5px 0 10px;overflow:visible;padding:10px;vertical-align:middle}.SingleDatePickerInput_calendarIcon_svg{fill:#82888a;height:15px;vertical-align:middle;width:14px}.SingleDatePicker{display:inline-block;position:relative}.SingleDatePicker__block{display:block}.SingleDatePicker_picker{background-color:#fff;position:absolute;z-index:1}.SingleDatePicker_picker__rtl{direction:rtl}.SingleDatePicker_picker__directionLeft{left:0}.SingleDatePicker_picker__directionRight{right:0}.SingleDatePicker_picker__portal{background-color:#0000004d;height:100%;left:0;position:fixed;top:0;width:100%}.SingleDatePicker_picker__fullScreenPortal{background-color:#fff}.SingleDatePicker_closeButton{background:0 0;border:0;color:inherit;cursor:pointer;font:inherit;line-height:normal;overflow:visible;padding:15px;position:absolute;right:0;top:0;z-index:2}.SingleDatePicker_closeButton:focus,.SingleDatePicker_closeButton:hover{color:darken(#cacccd,10%);text-decoration:none}.SingleDatePicker_closeButton_svg{fill:#cacccd;height:15px;width:15px}.DayPickerKeyboardShortcuts_buttonReset{background:0 0;border:0;border-radius:0;color:inherit;cursor:pointer;font:inherit;font-size:14px;line-height:normal;overflow:visible;padding:0}.DayPickerKeyboardShortcuts_buttonReset:active{outline:0}.DayPickerKeyboardShortcuts_show{height:26px;position:absolute;width:33px;z-index:2}.DayPickerKeyboardShortcuts_show:before{content:"";display:block;position:absolute}.DayPickerKeyboardShortcuts_show__bottomRight{bottom:0;right:0}.DayPickerKeyboardShortcuts_show__bottomRight:before{border-right:33px solid #00a699;border-top:26px solid #0000;bottom:0;right:0}.DayPickerKeyboardShortcuts_show__bottomRight:hover:before{border-right:33px solid #008489}.DayPickerKeyboardShortcuts_show__topRight{right:0;top:0}.DayPickerKeyboardShortcuts_show__topRight:before{border-bottom:26px solid #0000;border-right:33px solid #00a699;right:0;top:0}.DayPickerKeyboardShortcuts_show__topRight:hover:before{border-right:33px solid #008489}.DayPickerKeyboardShortcuts_show__topLeft{left:0;top:0}.DayPickerKeyboardShortcuts_show__topLeft:before{border-bottom:26px solid #0000;border-left:33px solid #00a699;left:0;top:0}.DayPickerKeyboardShortcuts_show__topLeft:hover:before{border-left:33px solid #008489}.DayPickerKeyboardShortcuts_showSpan{color:#fff;position:absolute}.DayPickerKeyboardShortcuts_showSpan__bottomRight{bottom:0;right:5px}.DayPickerKeyboardShortcuts_showSpan__topRight{right:5px;top:1px}.DayPickerKeyboardShortcuts_showSpan__topLeft{left:5px;top:1px}.DayPickerKeyboardShortcuts_panel{background:#fff;border:1px solid #dbdbdb;border-radius:2px;bottom:0;left:0;margin:33px;overflow:auto;padding:22px;position:absolute;right:0;text-align:left;top:0;z-index:2}.DayPickerKeyboardShortcuts_title{font-size:16px;font-weight:700;margin:0}.DayPickerKeyboardShortcuts_list{font-size:14px;list-style:none;padding:0}.DayPickerKeyboardShortcuts_close{position:absolute;right:22px;top:22px;z-index:2}.DayPickerKeyboardShortcuts_close:active{outline:0}.DayPickerKeyboardShortcuts_closeSvg{fill:#cacccd;height:15px;width:15px}.DayPickerKeyboardShortcuts_closeSvg:focus,.DayPickerKeyboardShortcuts_closeSvg:hover{fill:#82888a}.CalendarDay{-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;font-size:14px;text-align:center}.CalendarDay:active{outline:0}.CalendarDay__defaultCursor{cursor:default}.CalendarDay__default{background:#fff;border:1px solid #e4e7e7;color:#484848}.CalendarDay__default:hover{background:#e4e7e7;border:1px solid #e4e7e7;color:inherit}.CalendarDay__hovered_offset{background:#f4f5f5;border:1px double #e4e7e7;color:inherit}.CalendarDay__outside{background:#fff;border:0;color:#484848}.CalendarDay__outside:hover{border:0}.CalendarDay__blocked_minimum_nights{background:#fff;border:1px solid #eceeee;color:#cacccd}.CalendarDay__blocked_minimum_nights:active,.CalendarDay__blocked_minimum_nights:hover{background:#fff;color:#cacccd}.CalendarDay__highlighted_calendar{background:#ffe8bc;color:#484848}.CalendarDay__highlighted_calendar:active,.CalendarDay__highlighted_calendar:hover{background:#ffce71;color:#484848}.CalendarDay__selected_span{background:#66e2da;border:1px double #33dacd;color:#fff}.CalendarDay__selected_span:active,.CalendarDay__selected_span:hover{background:#33dacd;border:1px double #33dacd;color:#fff}.CalendarDay__selected,.CalendarDay__selected:active,.CalendarDay__selected:hover{background:#00a699;border:1px double #00a699;color:#fff}.CalendarDay__hovered_span,.CalendarDay__hovered_span:hover{background:#b2f1ec;border:1px double #80e8e0;color:#007a87}.CalendarDay__hovered_span:active{background:#80e8e0;border:1px double #80e8e0;color:#007a87}.CalendarDay__blocked_calendar,.CalendarDay__blocked_calendar:active,.CalendarDay__blocked_calendar:hover{background:#cacccd;border:1px solid #cacccd;color:#82888a}.CalendarDay__blocked_out_of_range,.CalendarDay__blocked_out_of_range:active,.CalendarDay__blocked_out_of_range:hover{background:#fff;border:1px solid #e4e7e7;color:#cacccd}.CalendarDay__hovered_start_first_possible_end{background:#eceeee;border:1px double #eceeee}.CalendarDay__hovered_start_blocked_min_nights{background:#eceeee;border:1px double #e4e7e7}.CalendarMonth{background:#fff;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top}.CalendarMonth_table{border-collapse:collapse;border-spacing:0}.CalendarMonth_verticalSpacing{border-collapse:initial}.CalendarMonth_caption{caption-side:top;color:#484848;font-size:18px;padding-bottom:37px;padding-top:22px;text-align:center}.CalendarMonth_caption__verticalScrollable{padding-bottom:7px;padding-top:12px}.CalendarMonthGrid{background:#fff;text-align:left;z-index:0}.CalendarMonthGrid__animating{z-index:1}.CalendarMonthGrid__horizontal{left:9px;position:absolute}.CalendarMonthGrid__vertical,.CalendarMonthGrid__vertical_scrollable{margin:0 auto}.CalendarMonthGrid_month__horizontal{display:inline-block;min-height:100%;vertical-align:top}.CalendarMonthGrid_month__hideForAnimation{opacity:0;pointer-events:none;position:absolute;z-index:-1}.CalendarMonthGrid_month__hidden{visibility:hidden}.DayPickerNavigation{position:relative;z-index:2}.DayPickerNavigation__horizontal{height:0}.DayPickerNavigation__verticalScrollable_prevNav{z-index:1}.DayPickerNavigation__verticalDefault{bottom:0;height:52px;left:0;position:absolute;width:100%}.DayPickerNavigation__verticalScrollableDefault{position:relative}.DayPickerNavigation__bottom{height:auto}.DayPickerNavigation__bottomDefault{-webkit-box-pack:justify;-ms-flex-pack:justify;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between}.DayPickerNavigation_button{border:0;cursor:pointer;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.DayPickerNavigation_button__default{background-color:#fff;border:1px solid #e4e7e7;color:#757575}.DayPickerNavigation_button__default:focus,.DayPickerNavigation_button__default:hover{border:1px solid #c4c4c4}.DayPickerNavigation_button__default:active{background:#f2f2f2}.DayPickerNavigation_button__disabled{border:1px solid #f2f2f2;cursor:default}.DayPickerNavigation_button__disabled:focus,.DayPickerNavigation_button__disabled:hover{border:1px solid #f2f2f2}.DayPickerNavigation_button__disabled:active{background:0 0}.DayPickerNavigation_button__horizontalDefault{border-radius:3px;line-height:.78;padding:6px 9px;position:absolute;top:18px}.DayPickerNavigation_bottomButton__horizontalDefault{margin:-10px 22px 30px;position:static}.DayPickerNavigation_leftButton__horizontalDefault{left:22px}.DayPickerNavigation_rightButton__horizontalDefault{right:22px}.DayPickerNavigation_button__verticalDefault{background:#fff;box-shadow:0 0 5px 2px #0000001a;display:inline-block;height:100%;padding:5px;position:relative;text-align:center;width:50%}.DayPickerNavigation_nextButton__verticalDefault{border-left:0}.DayPickerNavigation_nextButton__verticalScrollableDefault,.DayPickerNavigation_prevButton__verticalScrollableDefault{width:100%}.DayPickerNavigation_svg__horizontal{display:block;fill:#82888a;height:19px;width:19px}.DayPickerNavigation_svg__vertical{fill:#484848;height:42px;width:42px}.DayPickerNavigation_svg__disabled{fill:#f2f2f2}.DayPicker{position:relative;text-align:left}.DayPicker,.DayPicker__horizontal{background:#fff}.DayPicker__verticalScrollable{height:100%}.DayPicker__hidden{visibility:hidden}.DayPicker__withBorder{border-radius:3px;box-shadow:0 2px 6px #0000000d,0 0 0 1px #00000012}.DayPicker_portal__horizontal{box-shadow:none;left:50%;position:absolute;top:50%}.DayPicker_portal__vertical{position:static}.DayPicker_focusRegion{outline:0}.DayPicker_calendarInfo__horizontal,.DayPicker_wrapper__horizontal{display:inline-block;vertical-align:top}.DayPicker_weekHeaders{position:relative}.DayPicker_weekHeaders__horizontal{margin-left:9px}.DayPicker_weekHeader{color:#757575;position:absolute;text-align:left;top:62px;z-index:2}.DayPicker_weekHeader__vertical{left:50%}.DayPicker_weekHeader__verticalScrollable{background:#fff;border-bottom:1px solid #dbdbdb;display:table-row;left:0;margin-left:0;text-align:center;top:0;width:100%}.DayPicker_weekHeader_ul{font-size:14px;list-style:none;margin:1px 0;padding-left:0;padding-right:0}.DayPicker_weekHeader_li{display:inline-block;text-align:center}.DayPicker_transitionContainer{border-radius:3px;overflow:hidden;position:relative}.DayPicker_transitionContainer__horizontal{-webkit-transition:height .2s ease-in-out;-moz-transition:height .2s ease-in-out;transition:height .2s ease-in-out}.DayPicker_transitionContainer__vertical{width:100%}.DayPicker_transitionContainer__verticalScrollable{bottom:0;height:100%;left:0;overflow-y:scroll;padding-top:20px;position:absolute;right:0;top:0}.DateInput{background:#fff;display:inline-block;margin:0;padding:0;position:relative;vertical-align:middle;width:130px}.DateInput__small{width:97px}.DateInput__block{width:100%}.DateInput__disabled{background:#f2f2f2;color:#dbdbdb}.DateInput_input{background-color:#fff;border:0;border-bottom:2px solid #0000;border-radius:0;color:#484848;font-size:19px;font-weight:200;line-height:24px;padding:11px 11px 9px;width:100%}.DateInput_input__small{font-size:15px;letter-spacing:.2px;line-height:18px;padding:7px 7px 5px}.DateInput_input__regular{font-weight:auto}.DateInput_input__readOnly{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.DateInput_input__focused{background:#fff;border:0;border-bottom:2px solid #008489;outline:0}.DateInput_input__disabled{background:#f2f2f2;font-style:italic}.DateInput_screenReaderMessage{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.DateInput_fang{height:10px;left:22px;position:absolute;width:20px;z-index:2}.DateInput_fangShape{fill:#fff}.DateInput_fangStroke{fill:#0000;stroke:#dbdbdb}.DateRangePickerInput{background-color:#fff;display:inline-block}.DateRangePickerInput__disabled{background:#f2f2f2}.DateRangePickerInput__withBorder{border:1px solid #dbdbdb;border-radius:2px}.DateRangePickerInput__rtl{direction:rtl}.DateRangePickerInput__block{display:block}.DateRangePickerInput__showClearDates{padding-right:30px}.DateRangePickerInput_arrow{color:#484848;display:inline-block;vertical-align:middle}.DateRangePickerInput_arrow_svg{fill:#484848;height:24px;vertical-align:middle;width:24px}.DateRangePickerInput_clearDates{background:0 0;border:0;color:inherit;cursor:pointer;font:inherit;line-height:normal;margin:0 10px 0 5px;overflow:visible;padding:10px;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.DateRangePickerInput_clearDates__small{padding:6px}.DateRangePickerInput_clearDates_default:focus,.DateRangePickerInput_clearDates_default:hover{background:#dbdbdb;border-radius:50%}.DateRangePickerInput_clearDates__hide{visibility:hidden}.DateRangePickerInput_clearDates_svg{fill:#82888a;height:12px;vertical-align:middle;width:15px}.DateRangePickerInput_clearDates_svg__small{height:9px}.DateRangePickerInput_calendarIcon{background:0 0;border:0;color:inherit;cursor:pointer;display:inline-block;font:inherit;line-height:normal;margin:0 5px 0 10px;overflow:visible;padding:10px;vertical-align:middle}.DateRangePickerInput_calendarIcon_svg{fill:#82888a;height:15px;vertical-align:middle;width:14px}.DateRangePicker{display:inline-block;position:relative}.DateRangePicker__block{display:block}.DateRangePicker_picker{background-color:#fff;position:absolute;z-index:1}.DateRangePicker_picker__rtl{direction:rtl}.DateRangePicker_picker__directionLeft{left:0}.DateRangePicker_picker__directionRight{right:0}.DateRangePicker_picker__portal{background-color:#0000004d;height:100%;left:0;position:fixed;top:0;width:100%}.DateRangePicker_picker__fullScreenPortal{background-color:#fff}.DateRangePicker_closeButton{background:0 0;border:0;color:inherit;cursor:pointer;font:inherit;line-height:normal;overflow:visible;padding:15px;position:absolute;right:0;top:0;z-index:2}.DateRangePicker_closeButton:focus,.DateRangePicker_closeButton:hover{color:darken(#cacccd,10%);text-decoration:none}.DateRangePicker_closeButton_svg{fill:#cacccd;height:15px;width:15px}\n.impact-datepicker-main-container{display:flex;font-family:Manrope,sans-serif}.impact-datepicker-main-container.label-flex-row{align-items:center;flex-direction:row;gap:16px}.impact-datepicker-main-container.label-flex-column{flex-direction:column}.impact-datepicker-main-container.label-flex-column .datePicker-label{margin-bottom:6px}.impact-datepicker-main-container .datePicker-label{color:#60697d;font-family:Manrope,sans-serif;font-size:12px;font-weight:500;line-height:18px}.impact-datepicker-main-container .datePicker-container{position:relative}.impact-datepicker-main-container .datePicker-input-container{height:32px;width:240px}.impact-datepicker-main-container .datePicker-input-container .impact-datepicker-date-input{background:url(https://impact-kit.devs.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/calendar.svg) no-repeat;background-color:#fff;background-position:center right 12px;background-size:14px;border:1px solid #c3c8d4;border-radius:8px;font-family:Manrope,sans-serif;font-size:14px;font-weight:500;height:32px;padding-left:12px;width:100%}.impact-datepicker-main-container .datePicker-input-container .impact-datepicker-date-input:hover{border:1px solid #4259ee;cursor:pointer}.impact-datepicker-main-container .datePicker-input-container .impact-datepicker-date-input:focus{border:1px solid #4259ee;outline:none}.impact-datepicker-main-container .datePicker-input-container .impact-datepicker-date-input:focus::placeholder{color:#4259ee}.impact-datepicker-main-container .datePicker-input-container-custom-icon{display:flex;position:relative}.impact-datepicker-main-container .datePicker-input-container-custom-icon .impact-datepicker-date-input{background:#fff!important}.impact-datepicker-main-container .datePicker-input-disabled .impact-datepicker-date-input{background-color:#f2f4fb;border:1px solid #d9dde7;pointer-events:none!important}.impact-datepicker-main-container .datePicker-input-disabled .impact-datepicker-date-input:hover{border:1px solid #d9dde7}.impact-datepicker-main-container .impact-datePicker-error .impact-datepicker-date-input{border:1px solid red!important}.impact-datepicker-main-container .impact-datePicker-error .impact-datepicker-date-input:hover{border:1px solid red!important;cursor:pointer}.impact-datepicker-main-container .impact-datePicker-error .impact-datepicker-date-input:focus{border:1px solid red!important;outline:none}.impact-datepicker-main-container .impact-datePicker-error .impact-datepicker-date-input:focus::placeholder{color:red}.impact-date-picker-dropdown-container{background-color:#fff;border:none;border-radius:8px;box-shadow:0 1px 6px #00000029;left:0;position:absolute;top:35px;width:269px;z-index:99}.impact-date-picker-dropdown-container.impact-date-picker-dropdown-top{bottom:calc(100% + 4px);top:auto}.impact-date-picker-dropdown-container.impact-date-picker-dropdown-portal{left:0;position:relative;top:0}.impact-date-picker-dropdown-container .DayPicker{width:269px!important}.impact-date-picker-dropdown-container .DayPicker>div{width:269px}.impact-date-picker-dropdown-container .DayPicker>div>div{width:269px!important}.impact-date-picker-dropdown-container .DayPicker__withBorder{box-shadow:none}.impact-date-picker-dropdown-container .DayPicker_focusRegion{width:269px!important}.impact-date-picker-dropdown-container .DayPicker_transitionContainer{min-height:266px;width:269px!important}.impact-date-picker-dropdown-container .CalendarMonthGrid__horizontal{left:0}.impact-date-picker-dropdown-container .CalendarMonthGrid_month__hidden,.impact-date-picker-dropdown-container .CalendarMonthGrid_month__horizontal{width:269px}.impact-date-picker-dropdown-container .CalendarMonth{padding:20px!important}.impact-date-picker-dropdown-container .CalendarMonth_caption{padding-bottom:28px;padding-top:0}.impact-date-picker-dropdown-container .DayPickerNavigation_leftButton__horizontalDefault{left:20px;top:17px}.impact-date-picker-dropdown-container .DayPickerNavigation_rightButton__horizontalDefault{right:20px;top:17px}.impact-date-picker-dropdown-container .CalendarMonth_caption{color:#1f2b4d;font-family:Manrope,sans-serif;font-size:14px;font-weight:500}.impact-date-picker-dropdown-container .DayPicker_weekHeader_li small{line-height:20px}.impact-date-picker-dropdown-container .DayPicker_weekHeader{left:0;padding:0 12px;top:50px;width:269px}.impact-date-picker-dropdown-container .DayPicker_weekHeader ul{font-family:Manrope,sans-serif;font-size:12px;font-weight:400;padding-left:1px}.impact-date-picker-dropdown-container .DayPicker_weekHeader:after{background-color:#d4d4d4;bottom:-2px;content:"";height:1px;left:15px;position:absolute;width:80%}.impact-date-picker-dropdown-container .DayPickerNavigation{position:relative;z-index:2}.impact-date-picker-dropdown-container .DayPickerNavigation__horizontal{height:0}.impact-date-picker-dropdown-container .DayPickerNavigation__verticalScrollable_prevNav{z-index:1}.impact-date-picker-dropdown-container .DayPickerNavigation__verticalDefault{bottom:0;height:52px;left:0;position:absolute;width:100%}.impact-date-picker-dropdown-container .DayPickerNavigation__verticalScrollableDefault{position:relative}.impact-date-picker-dropdown-container .DayPickerNavigation__bottom{height:auto}.impact-date-picker-dropdown-container .DayPickerNavigation__bottomDefault{-webkit-box-pack:justify;-ms-flex-pack:justify;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between}.impact-date-picker-dropdown-container .DayPickerNavigation_button{border:0;cursor:pointer;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.impact-date-picker-dropdown-container .DayPickerNavigation_button:focus-visible{box-shadow:0 0 0 var(--ia-focus-ring-offset,2px) var(--ia-focus-bg,#fff),0 0 0 calc(var(--ia-focus-ring-offset, 2px) + var(--ia-focus-ring-width, 2px)) var(--ia-focus-color,#4259ee);outline:none;transition:box-shadow .15s ease-in-out}.impact-date-picker-dropdown-container .DayPickerNavigation_button:focus:not(:focus-visible){box-shadow:none;outline:none}.impact-date-picker-dropdown-container .DayPickerNavigation_button__default{background:url(https://impact-kit.devs.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/accordion-chevron.svg) no-repeat;background-size:12px;transform:rotate(90deg)}.impact-date-picker-dropdown-container .DayPickerNavigation_button__default svg{display:none}.impact-date-picker-dropdown-container .DayPickerNavigation_button__disabled{opacity:.8}.impact-date-picker-dropdown-container .DayPickerNavigation_button__horizontalDefault{border-radius:3px;line-height:.78;padding:6px;position:absolute;top:25px}.impact-date-picker-dropdown-container .DayPickerNavigation_bottomButton__horizontalDefault{margin:-10px 22px 30px;position:static}.impact-date-picker-dropdown-container .DayPickerNavigation_leftButton__horizontalDefault{left:22px}.impact-date-picker-dropdown-container .DayPickerNavigation_rightButton__horizontalDefault{right:22px;transform:rotate(-90deg)}.impact-date-picker-dropdown-container .DayPickerNavigation_button__verticalDefault{background:#fff;box-shadow:0 0 5px 2px #0000001a;display:inline-block;height:100%;padding:5px;position:relative;text-align:center;width:50%}.impact-date-picker-dropdown-container .DayPickerNavigation_nextButton__verticalDefault{border-left:0}.impact-date-picker-dropdown-container .DayPickerNavigation_nextButton__verticalScrollableDefault,.impact-date-picker-dropdown-container .DayPickerNavigation_prevButton__verticalScrollableDefault{width:100%}.impact-date-picker-dropdown-container .DayPickerNavigation_svg__vertical{fill:#484848;height:42px;width:42px}.impact-date-picker-dropdown-container .DayPickerNavigation_svg__disabled{fill:#f2f2f2}.impact-date-picker-dropdown-container .CalendarMonth_table{border-collapse:initial;border-spacing:10px 8px;padding-top:8px}.impact-date-picker-dropdown-container .CalendarDay__default{border:none;color:#1f2b4d;font-family:Manrope,sans-serif;font-size:12px;font-weight:400;height:20px!important;line-height:16.39px;padding-top:2px;width:20px!important}.impact-date-picker-dropdown-container .CalendarDay__default:hover{background:#eceefd!important;border-radius:8px;color:#4259ee;outline:1px solid #b3bdf8}.impact-date-picker-dropdown-container .CalendarDay__selected,.impact-date-picker-dropdown-container .CalendarDay__selected:active,.impact-date-picker-dropdown-container .CalendarDay__selected:hover{background:#4259ee!important;border-radius:8px;color:#fff}.impact-date-picker-dropdown-container .CalendarDay__blocked_out_of_range{color:#c3c8d4!important}.impact-date-picker-dropdown-container .DayPicker_weekHeader_li{display:inline-block;margin-left:10px;text-align:center;width:20px!important}.datePicker-buttons-container{display:flex;gap:16px;justify-content:flex-end;padding:10px 19px;position:relative}.datePicker-buttons-container:before{background-color:#d4d4d4;content:"";height:1px;left:10px;position:absolute;top:0;width:90%}.datePicker-buttons-container.datePicker-buttons-container--hidden{display:none}.showWeekNumbers .DayPicker_weekHeader:after{left:25px}.showWeekNumbers .CalendarMonth_table{left:10px;padding-top:4px;position:relative}.showWeekNumbers .CalendarMonth_table tbody{position:relative}.showWeekNumbers .CalendarMonth_table tbody:before{background-color:#d4d4d4;content:"";height:calc(100% - 6px);left:-5px;position:absolute;top:6px;width:1px;z-index:1}.showWeekNumbers .CalendarDayWeekNumber{border-right:none!important;color:#757575;display:none;display:block;font-family:Manrope,sans-serif;font-size:11px;font-weight:500;left:-30px;position:absolute;width:18px}.impact-portal-container{position:absolute;z-index:9999}.impact-datepicker-full-width-main-container .datePicker-input-container{width:100%}.date-picker-show-month-year-select-container{align-items:center;display:flex;justify-content:space-between;left:23px;position:relative;top:-6px;width:188px;z-index:9999}.date-picker-show-month-year-select-container .date-picker-month-select-container{width:105px}.date-picker-show-month-year-select-container .date-picker-month-select-container .ia-select-styled-dropdown-main-button{min-width:105px;width:105px}.date-picker-show-month-year-select-container .date-picker-month-select-container .ia-select-button-clear-icon{display:none}.date-picker-show-month-year-select-container .date-picker-month-select-container .ia-select-chevron-icon{display:none;margin-left:-50px;width:10px}.date-picker-show-month-year-select-container .date-picker-year-select-container{width:80px}.date-picker-show-month-year-select-container .date-picker-year-select-container .ia-select-styled-dropdown-main-button{min-width:80px;width:80px}.date-picker-show-month-year-select-container .date-picker-year-select-container .ia-select-button-clear-icon{display:none}.date-picker-show-month-year-select-container .date-picker-year-select-container .ia-select-chevron-icon{display:none;margin-left:-110px;width:10px}.date-picker-month-select-dropdown,.date-picker-year-select-dropdown{min-width:115px!important;width:115px!important}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useState, useEffect, useCallback, useMemo } from "react";
 import moment from "moment";
@@ -40,6 +40,9 @@ const DatePicker = forwardRef(
     customIcon,
     readOnly,
     inputProps,
+    hideTertiaryButton,
+    hideSecondaryButton,
+    hidePrimaryButton,
     className,
     id,
     "data-testid": dataTestId,
@@ -48,13 +51,50 @@ const DatePicker = forwardRef(
     const dateString = selectedDate && moment.isMoment(selectedDate) && selectedDate.isValid() ? selectedDate.format(displayFormat) : "";
     const datePickerMainContainerRef = useRef(null);
     const inputContainerRef = useRef(null);
+    const dropdownRef = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
     const [focused, setFocused] = useState(false);
     const [inputValue, setInputValue] = useState(dateString || "");
     const [cancelTrigger, setCancelTrigger] = useState(0);
+    const [placement, setPlacement] = useState("bottom");
+    const allButtonsHidden = Boolean(hideTertiaryButton && hideSecondaryButton && hidePrimaryButton);
     useEffect(() => {
       setInputValue(dateString || "");
     }, [dateString]);
+    const updatePlacement = useCallback(() => {
+      var _a, _b;
+      const rect = (_a = datePickerMainContainerRef.current) == null ? void 0 : _a.getBoundingClientRect();
+      if (!rect) return;
+      const viewportHeight = window.innerHeight;
+      const spacing = 6;
+      const measuredHeight = (_b = dropdownRef.current) == null ? void 0 : _b.getBoundingClientRect().height;
+      const dropdownHeight = measuredHeight || (allButtonsHidden ? 250 : 300);
+      const spaceBelow = viewportHeight - rect.bottom;
+      if (spaceBelow >= dropdownHeight + spacing) {
+        setPlacement("bottom");
+      } else {
+        setPlacement("top");
+      }
+    }, [allButtonsHidden]);
+    useEffect(() => {
+      if (!isOpen) return;
+      let frame = null;
+      const handleUpdate = () => {
+        if (frame !== null) return;
+        frame = requestAnimationFrame(() => {
+          updatePlacement();
+          frame = null;
+        });
+      };
+      updatePlacement();
+      window.addEventListener("resize", handleUpdate);
+      window.addEventListener("scroll", handleUpdate, true);
+      return () => {
+        window.removeEventListener("resize", handleUpdate);
+        window.removeEventListener("scroll", handleUpdate, true);
+        if (frame !== null) cancelAnimationFrame(frame);
+      };
+    }, [isOpen, updatePlacement]);
     const handleDateStringChange = (value) => {
       if (value === null) {
         setSelectedDate == null ? void 0 : setSelectedDate(null);
@@ -103,8 +143,6 @@ const DatePicker = forwardRef(
       }, 0);
     };
     const handleCancel = () => {
-      setSelectedDate == null ? void 0 : setSelectedDate(null);
-      setInputValue("");
       setIsOpen(false);
       onSecondaryButtonClick == null ? void 0 : onSecondaryButtonClick();
     };
@@ -191,12 +229,18 @@ const DatePicker = forwardRef(
             isOpen && /* @__PURE__ */ jsx(
               DatePickerDropdown,
               {
+                allButtonsHidden,
                 containerRef: datePickerMainContainerRef,
                 customYears: normalizedCustomYears,
+                dropdownRef,
                 focused,
+                hidePrimaryButton,
+                hideSecondaryButton,
+                hideTertiaryButton,
                 isOutsideRange,
                 maxDate: maxDate ?? null,
                 minDate: minDate ?? null,
+                placement,
                 portalContainer,
                 primaryButtonProps,
                 secondaryButtonProps,
@@ -211,7 +255,8 @@ const DatePicker = forwardRef(
                 onDatesChange,
                 onPrimaryButtonClick,
                 onSecondaryButtonClick: handleCancel,
-                onTertiaryButtonClick: handleClear
+                onTertiaryButtonClick: handleClear,
+                ...args
               }
             )
           ] })

package/dist/components/DatePicker/showMonthYearSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"showMonthYearSelect.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/showMonthYearSelect.tsx"],"names":[],"mappings":"AAIA,OAAe,EAAE,KAAK,MAAM,EAAE,MAAM,QAAQ,CAAC;AAE7C,MAAM,WAAW,kCAAkC;IACjD,WAAW,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAkCD,wBAAgB,mBAAmB,CAAC,EAClC,WAAW,EACX,KAAK,EACL,aAAa,EACb,YAAY,EACZ,OAAO,EACP,OAAO,GACR,EAAE,kCAAkC,2CA8EpC"}
+{"version":3,"file":"showMonthYearSelect.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/showMonthYearSelect.tsx"],"names":[],"mappings":"AACA,OAAe,EAAE,KAAK,MAAM,EAAE,MAAM,QAAQ,CAAC;AAI7C,MAAM,WAAW,kCAAkC;IACjD,WAAW,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAID,wBAAgB,mBAAmB,CAAC,EAClC,WAAW,EACX,KAAK,EACL,aAAa,EACb,YAAY,EACZ,OAAO,EACP,OAAO,GACR,EAAE,kCAAkC,2CA6FpC"}