cr-ui-lib 1.1.33 → 1.1.35

package/dist/index.d.mts

@@ -115,10 +115,11 @@ interface MultiBarGraphProps {
     datasets: DataSet[];
     xAxisLabels: string[];
     className?: string;
-    /** Determines the default position of the tooltip. Defaults to 'top'. */
     tooltipPosition?: "top" | "bottom";
+    /** The maximum value for the Y-axis. Defaults to undefined, allowing Chart.js to auto-calculate. */
+    yAxisMax?: number;
 }
-declare const MultiBarGraph: ({ datasets, xAxisLabels, className, tooltipPosition, }: MultiBarGraphProps) => JSX.Element;
+declare const MultiBarGraph: ({ datasets, xAxisLabels, className, tooltipPosition, yAxisMax, }: MultiBarGraphProps) => JSX.Element;
 
 interface CommonInputProps extends React$1.HTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {
     label?: string;
@@ -157,6 +158,7 @@ interface DateRangePickerProps {
     setIsExporting?: (value: boolean) => void;
     isExporting?: boolean;
     className?: string;
+    hasLimit?: boolean;
 }
 declare const DateRangePicker: React$1.FC<DateRangePickerProps>;
 
@@ -228,8 +230,9 @@ declare type SingleSelectDropdownProps = {
     hasSearchIcon?: boolean;
     searchInputClass?: string;
     placeholderSearchClass?: string;
+    usePortal?: boolean;
 };
-declare function SingleSelectDropdown({ label, value, onChange, options, placeholder, onScrollToEnd, onSearch, hasMore, isLoading, searchable, searchDebounceMs, requiresSearch, minSearchLength, emptyMessage, loadingMessage, searchPlaceholder, disabled, hasIcon, buttonClass, labelClass, displayItemClass, displayMainClass, hasSearchIcon, searchInputClass, placeholderSearchClass, }: SingleSelectDropdownProps): JSX.Element;
+declare function SingleSelectDropdown({ label, value, onChange, options, placeholder, onScrollToEnd, onSearch, hasMore, isLoading, searchable, searchDebounceMs, requiresSearch, minSearchLength, emptyMessage, loadingMessage, searchPlaceholder, disabled, hasIcon, buttonClass, labelClass, displayItemClass, displayMainClass, hasSearchIcon, searchInputClass, placeholderSearchClass, usePortal, }: SingleSelectDropdownProps): JSX.Element;
 
 interface SelectionButton {
     data: string[];
@@ -496,12 +499,7 @@ interface BoxBodyProps extends React$1.HTMLAttributes<HTMLDivElement> {
 }
 declare const BoxBody: React$1.FC<BoxBodyProps>;
 
-interface DateValidationOptions {
-    enableYearRange?: boolean;
-    yearsBack?: number;
-    allowFutureDates?: boolean;
-}
-declare const validateAndFormatInput: (rawInput: string, options?: DateValidationOptions) => string;
+declare const validateAndFormatInput: (rawInput: string, options?: any) => string;
 declare const validateDate: (dateString: string, allowFutureDates?: boolean) => boolean;
 declare const validateDateRange: (dateString: string, options?: {
     allowFutureDates?: boolean;

package/dist/index.d.ts

@@ -115,10 +115,11 @@ interface MultiBarGraphProps {
     datasets: DataSet[];
     xAxisLabels: string[];
     className?: string;
-    /** Determines the default position of the tooltip. Defaults to 'top'. */
     tooltipPosition?: "top" | "bottom";
+    /** The maximum value for the Y-axis. Defaults to undefined, allowing Chart.js to auto-calculate. */
+    yAxisMax?: number;
 }
-declare const MultiBarGraph: ({ datasets, xAxisLabels, className, tooltipPosition, }: MultiBarGraphProps) => JSX.Element;
+declare const MultiBarGraph: ({ datasets, xAxisLabels, className, tooltipPosition, yAxisMax, }: MultiBarGraphProps) => JSX.Element;
 
 interface CommonInputProps extends React$1.HTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {
     label?: string;
@@ -157,6 +158,7 @@ interface DateRangePickerProps {
     setIsExporting?: (value: boolean) => void;
     isExporting?: boolean;
     className?: string;
+    hasLimit?: boolean;
 }
 declare const DateRangePicker: React$1.FC<DateRangePickerProps>;
 
@@ -228,8 +230,9 @@ declare type SingleSelectDropdownProps = {
     hasSearchIcon?: boolean;
     searchInputClass?: string;
     placeholderSearchClass?: string;
+    usePortal?: boolean;
 };
-declare function SingleSelectDropdown({ label, value, onChange, options, placeholder, onScrollToEnd, onSearch, hasMore, isLoading, searchable, searchDebounceMs, requiresSearch, minSearchLength, emptyMessage, loadingMessage, searchPlaceholder, disabled, hasIcon, buttonClass, labelClass, displayItemClass, displayMainClass, hasSearchIcon, searchInputClass, placeholderSearchClass, }: SingleSelectDropdownProps): JSX.Element;
+declare function SingleSelectDropdown({ label, value, onChange, options, placeholder, onScrollToEnd, onSearch, hasMore, isLoading, searchable, searchDebounceMs, requiresSearch, minSearchLength, emptyMessage, loadingMessage, searchPlaceholder, disabled, hasIcon, buttonClass, labelClass, displayItemClass, displayMainClass, hasSearchIcon, searchInputClass, placeholderSearchClass, usePortal, }: SingleSelectDropdownProps): JSX.Element;
 
 interface SelectionButton {
     data: string[];
@@ -496,12 +499,7 @@ interface BoxBodyProps extends React$1.HTMLAttributes<HTMLDivElement> {
 }
 declare const BoxBody: React$1.FC<BoxBodyProps>;
 
-interface DateValidationOptions {
-    enableYearRange?: boolean;
-    yearsBack?: number;
-    allowFutureDates?: boolean;
-}
-declare const validateAndFormatInput: (rawInput: string, options?: DateValidationOptions) => string;
+declare const validateAndFormatInput: (rawInput: string, options?: any) => string;
 declare const validateDate: (dateString: string, allowFutureDates?: boolean) => boolean;
 declare const validateDateRange: (dateString: string, options?: {
     allowFutureDates?: boolean;

package/dist/index.js

@@ -986,6 +986,11 @@ var MultiLineGraph = ({
               return;
             }
             const label = (_a = dataPoints[0]) == null ? void 0 : _a.label;
+            const date = new Date(label);
+            const formattedLabel = date.toLocaleString("en-US", {
+              month: "long",
+              year: "numeric"
+            });
             const dataPointsHtml = dataPoints.map(
               (point, index) => `
               <div style="display: flex; align-items: center; gap: 8px; margin: ${index > 0 ? "4px" : "0"} 0;">
@@ -1000,7 +1005,7 @@ var MultiLineGraph = ({
                 <div id="tooltip-arrow-border"></div>
                 <div id="tooltip-arrow"></div>
                 <div>
-                  <p style="color:#757575; margin: 0 0 8px 0;"><strong>${label}</strong></p>
+                  <p style="color:#757575; margin: 0 0 8px 0;"><strong>${formattedLabel}</strong></p>
                   ${dataPointsHtml}
                 </div>
               </div>`;
@@ -1090,7 +1095,7 @@ var MultiLineGraph = ({
         }
       }
     }),
-    [tooltipPosition]
+    [tooltipPosition, svg]
     // Add dependency here
   );
   const verticalHoverLine = React.useMemo(
@@ -1270,6 +1275,11 @@ var SingleLineGraph = ({
             if (!dataPoint) return;
             const value = dataPoint.parsed.y;
             const label2 = dataPoint.label;
+            const date = new Date(label2);
+            const formattedLabel = date.toLocaleString("en-US", {
+              month: "long",
+              year: "numeric"
+            });
             const arrowSize = 6;
             const innerArrowSize = 5;
             const isAbove = tooltipPosition === "top";
@@ -1280,7 +1290,7 @@ var SingleLineGraph = ({
                 <div id="tooltip-arrow-border" style="position: absolute; transform: translateX(-50%); width: 0; height: 0; border-left: ${arrowSize}px solid transparent; border-right: ${arrowSize}px solid transparent; ${arrowBorderStyles}"></div>
                 <div id="tooltip-arrow-inner" style="position: absolute; width: 0; height: 0; border-left: ${innerArrowSize}px solid transparent; border-right: ${innerArrowSize}px solid transparent; ${arrowInnerStyles}"></div>
                 <div>
-                  <p style="color:#757575; margin: 0 0 4px 0;"><strong>${label2}</strong></p>
+                  <p style="color:#757575; margin: 0 0 4px 0;"><strong>${formattedLabel}</strong></p>
                   <span style="display: inline-flex; align-items: center; font-weight: bold; color: #757575;">
                   ${svg}
                     ${labelPopupTitle}: <span style="color:#131414;">&nbsp;${value}</span>
@@ -1495,11 +1505,11 @@ var MultiBarGraph = ({
   datasets,
   xAxisLabels,
   className = "",
-  tooltipPosition = "top"
-  // Default position is 'top'
+  tooltipPosition = "top",
+  yAxisMax
+  // CHANGED: Added yAxisMax prop
 }) => {
   const chartRef = React.useRef(null);
-  const [chartKey, setChartKey] = React.useState(`chart-${Date.now()}`);
   const defaultColors = [
     "#58508d",
     "#bc5090",
@@ -1510,36 +1520,30 @@ var MultiBarGraph = ({
   ];
   const getDefaultSvgIcon = () => `
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g clip-path="url(#clip0_5485_36311)">
-        <path d="M7.00033 1.16602C3.78033 1.16602 1.16699 3.77935 1.16699 6.99935C1.16699 10.2193 3.78033 12.8327 7.00033 12.8327C10.2203 12.8327 12.8337 10.2193 12.8337 6.99935C12.8337 3.77935 10.2203 1.16602 7.00033 1.16602ZM7.00033 11.666C4.42783 11.666 2.33366 9.57185 2.33366 6.99935C2.33366 4.42685 4.42783 2.33268 7.00033 2.33268C9.57283 2.33268 11.667 4.42685 11.667 6.99935C11.667 9.57185 9.57283 11.666 7.00033 11.666ZM9.67782 4.42102L5.83366 8.26518L4.32283 6.76018L3.50033 7.58268L5.83366 9.91602L10.5003 5.24935L9.67782 4.42102Z" fill="#003f5c"/>
-      </g>
-      <defs>
-        <clipPath id="clip0_5485_36311"><rect width="14" height="14" fill="white"/></clipPath>
-      </defs>
+      <g clip-path="url(#clip0_5485_36311)"><path d="M7.00033 1.16602C3.78033 1.16602 1.16699 3.77935 1.16699 6.99935C1.16699 10.2193 3.78033 12.8327 7.00033 12.8327C10.2203 12.8327 12.8337 10.2193 12.8337 6.99935C12.8337 3.77935 10.2203 1.16602 7.00033 1.16602ZM7.00033 11.666C4.42783 11.666 2.33366 9.57185 2.33366 6.99935C2.33366 4.42685 4.42783 2.33268 7.00033 2.33268C9.57283 2.33268 11.667 4.42685 11.667 6.99935C11.667 9.57185 9.57283 11.666 7.00033 11.666ZM9.67782 4.42102L5.83366 8.26518L4.32283 6.76018L3.50033 7.58268L5.83366 9.91602L10.5003 5.24935L9.67782 4.42102Z" fill="#003f5c"/></g>
+      <defs><clipPath id="clip0_5485_36311"><rect width="14" height="14" fill="white"/></clipPath></defs>
     </svg>
   `;
   React.useEffect(() => {
-    const handleResize = () => setChartKey(`chart-${Date.now()}`);
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
+    return () => {
+      const tooltipEl = document.getElementById("chartjs-tooltip");
+      if (tooltipEl) {
+        tooltipEl.remove();
+      }
+    };
   }, []);
   const options = React.useMemo(
     () => ({
       responsive: true,
       maintainAspectRatio: false,
-      animation: {
-        duration: 100,
-        easing: "easeOutQuad"
-      },
+      animation: { duration: 100, easing: "easeOutQuad" },
       scales: {
-        x: {
-          stacked: true,
-          grid: { drawOnChartArea: false }
-        },
+        x: { stacked: true, grid: { drawOnChartArea: false } },
         y: {
           stacked: true,
           min: 0,
-          max: 100,
+          max: yAxisMax,
+          // CHANGED: Use the dynamic yAxisMax prop
           border: { display: false },
           grid: { drawOnChartArea: false }
         }
@@ -1570,69 +1574,62 @@ var MultiBarGraph = ({
               (sum, dataset) => sum + (dataset.data[hoveredPoint.dataIndex] || 0),
               0
             );
+            const date = new Date(label);
+            const formattedLabel = date.toLocaleString("en-US", {
+              month: "long",
+              year: "numeric"
+            });
             const percentage = totalBarValue > 0 ? (segmentValue / totalBarValue * 100).toFixed(2) : 0;
             const iconHtml = customSvgIcon || getDefaultSvgIcon();
-            const dataPointHtml = `
-              <div style="display: flex; align-items: center; gap: 8px;">
-                ${iconHtml}
-                <span style="font-weight: bold; color: #757575;">
-                  ${segmentLabel}: <span style="color:#131414;">${segmentValue} (${percentage}%)</span>
-                </span>
-              </div>`;
             tooltipEl.innerHTML = `
               <div style="position: relative; background: white; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); padding: 10px; font-size: 12px; z-index: 999;">
                 <div id="tooltip-arrow" style="position: absolute; width: 0; height: 0;"></div>
-                <p style="color:#757575; margin: 0 0 8px 0;"><strong>${label}</strong></p>
-                ${dataPointHtml}
+                <p style="color:#757575; margin: 0 0 8px 0;"><strong>${formattedLabel}</strong></p>
+                <div style="display: flex; align-items: center; gap: 8px;">
+                  ${iconHtml}
+                  <span style="font-weight: bold; color: #757575;">
+                    ${segmentLabel}: <span style="color:#131414;">${segmentValue} (${percentage}%)</span>
+                  </span>
+                </div>
               </div>`;
             const position = context.chart.canvas.getBoundingClientRect();
             const tooltipWidth = tooltipEl.offsetWidth;
             const tooltipHeight = tooltipEl.offsetHeight;
             const arrowSize = 6;
             let isAbove = tooltipPosition === "top";
-            let yPosition;
             const yTop = position.top + window.scrollY + hoveredPoint.element.y - tooltipHeight - arrowSize - 5;
             const yBottom = position.top + window.scrollY + hoveredPoint.element.y + arrowSize + 5;
+            let yPosition;
             if (isAbove) {
-              yPosition = yTop;
-              if (yPosition < window.scrollY + 10) {
-                yPosition = yBottom;
-                isAbove = false;
-              }
+              yPosition = yTop < window.scrollY + 10 ? yBottom : yTop;
             } else {
-              yPosition = yBottom;
-              if (yPosition + tooltipHeight > window.innerHeight + window.scrollY - 10) {
-                yPosition = yTop;
-                isAbove = true;
-              }
+              yPosition = yBottom + tooltipHeight > window.innerHeight + window.scrollY - 10 ? yTop : yBottom;
             }
+            isAbove = yPosition === yTop;
             let xPosition = position.left + window.scrollX + hoveredPoint.element.x - tooltipWidth / 2;
-            if (xPosition < 10) xPosition = 10;
-            if (xPosition + tooltipWidth > window.innerWidth - 10)
-              xPosition = window.innerWidth - 10 - tooltipWidth;
+            xPosition = Math.max(
+              10,
+              Math.min(xPosition, window.innerWidth - 10 - tooltipWidth)
+            );
             const arrowEl = tooltipEl.querySelector("#tooltip-arrow");
             if (arrowEl) {
-              if (isAbove) {
-                arrowEl.style.top = "100%";
-                arrowEl.style.bottom = "auto";
-                arrowEl.style.borderTop = `${arrowSize}px solid white`;
-                arrowEl.style.borderBottom = "none";
-              } else {
-                arrowEl.style.bottom = "100%";
-                arrowEl.style.top = "auto";
-                arrowEl.style.borderBottom = `${arrowSize}px solid white`;
-                arrowEl.style.borderTop = "none";
-              }
-              arrowEl.style.borderLeft = `${arrowSize}px solid transparent`;
-              arrowEl.style.borderRight = `${arrowSize}px solid transparent`;
-              const arrowX = position.left + window.scrollX + hoveredPoint.element.x - xPosition - arrowSize;
-              arrowEl.style.left = `${arrowX}px`;
+              Object.assign(arrowEl.style, {
+                top: isAbove ? "100%" : "auto",
+                bottom: isAbove ? "auto" : "100%",
+                borderTop: isAbove ? `${arrowSize}px solid white` : "none",
+                borderBottom: isAbove ? "none" : `${arrowSize}px solid white`,
+                borderLeft: `${arrowSize}px solid transparent`,
+                borderRight: `${arrowSize}px solid transparent`,
+                left: `${position.left + window.scrollX + hoveredPoint.element.x - xPosition - arrowSize}px`
+              });
             }
-            tooltipEl.style.opacity = "1";
-            tooltipEl.style.position = "absolute";
-            tooltipEl.style.left = `${xPosition}px`;
-            tooltipEl.style.top = `${yPosition}px`;
-            tooltipEl.style.pointerEvents = "none";
+            Object.assign(tooltipEl.style, {
+              opacity: "1",
+              position: "absolute",
+              left: `${xPosition}px`,
+              top: `${yPosition}px`,
+              pointerEvents: "none"
+            });
           }
         }
       },
@@ -1641,17 +1638,19 @@ var MultiBarGraph = ({
         mode: "nearest"
       }
     }),
-    [tooltipPosition]
-    // Add dependency here
+    [tooltipPosition, yAxisMax, datasets]
+    // CHANGED: Added datasets and yAxisMax for safety
   );
   const dashedGridPlugin = React.useMemo(
     () => ({
       id: "customDashedGrid",
       beforeDatasetsDraw(chart) {
-        const ctx = chart.ctx;
-        const yAxis = chart.scales.y;
+        const {
+          ctx,
+          chartArea: { left, right },
+          scales: { y: yAxis }
+        } = chart;
         if (!yAxis) return;
-        const { left, right } = chart.chartArea;
         ctx.save();
         ctx.setLineDash([4, 4]);
         ctx.strokeStyle = "rgba(0, 0, 0, 0.1)";
@@ -1673,14 +1672,8 @@ var MultiBarGraph = ({
     () => ({
       labels: xAxisLabels,
       datasets: datasets.map((dataset, index) => ({
-        label: dataset.label,
-        data: dataset.data,
-        backgroundColor: `${dataset.backgroundColor || defaultColors[index % defaultColors.length]}`,
-        pointBackgroundColor: dataset.backgroundColor || defaultColors[index % defaultColors.length],
-        svgIcon: dataset.svgIcon,
-        fill: true,
-        tension: 0.4,
-        pointRadius: 1
+        ...dataset,
+        backgroundColor: dataset.backgroundColor || defaultColors[index % defaultColors.length]
       }))
     }),
     [datasets, xAxisLabels]
@@ -1692,8 +1685,7 @@ var MultiBarGraph = ({
       options,
       data: barData,
       plugins: [dashedGridPlugin]
-    },
-    chartKey
+    }
   ) });
 };
 var MultiBarGraph_default = MultiBarGraph;
@@ -1774,18 +1766,22 @@ var validateAndFormatInput = (rawInput, options = {}) => {
   const {
     enableYearRange = true,
     yearsBack = 1,
-    allowFutureDates = false
+    allowFutureDates = false,
+    hasLimit = false,
+    // New: To check if date range limit should be applied
+    startDate = null
+    // New: The selected start date for range comparison
   } = options;
   let digits = rawInput.replace(/\D/g, "");
   if (digits.length >= 2) {
-    const month = parseInt(digits.slice(0, 2));
+    const month = parseInt(digits.slice(0, 2), 10);
     if (month < 1 || month > 12) {
       digits = digits.slice(0, 1);
     }
   }
   if (digits.length >= 4) {
-    const month = parseInt(digits.slice(0, 2));
-    const day = parseInt(digits.slice(2, 4));
+    const month = parseInt(digits.slice(0, 2), 10);
+    const day = parseInt(digits.slice(2, 4), 10);
     const daysInMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
     const maxDays = daysInMonth[month - 1] || 31;
     if (day < 1 || day > maxDays) {
@@ -1795,15 +1791,15 @@ var validateAndFormatInput = (rawInput, options = {}) => {
   if (enableYearRange && digits.length >= 8) {
     const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
     const minYear = currentYear - yearsBack;
-    const inputYear = parseInt(digits.slice(4, 8));
+    const inputYear = parseInt(digits.slice(4, 8), 10);
     if (inputYear < minYear || inputYear > currentYear) {
       digits = digits.slice(0, 4);
     }
   }
   if (!allowFutureDates && digits.length === 8) {
-    const month = parseInt(digits.slice(0, 2));
-    const day = parseInt(digits.slice(2, 4));
-    const year = parseInt(digits.slice(4, 8));
+    const month = parseInt(digits.slice(0, 2), 10);
+    const day = parseInt(digits.slice(2, 4), 10);
+    const year = parseInt(digits.slice(4, 8), 10);
     const inputDate = new Date(year, month - 1, day);
     const today = /* @__PURE__ */ new Date();
     today.setHours(23, 59, 59, 999);
@@ -1811,6 +1807,17 @@ var validateAndFormatInput = (rawInput, options = {}) => {
       digits = digits.slice(0, 4);
     }
   }
+  if (!hasLimit && startDate && digits.length === 8) {
+    const month = parseInt(digits.slice(0, 2), 10);
+    const day = parseInt(digits.slice(2, 4), 10);
+    const year = parseInt(digits.slice(4, 8), 10);
+    const inputDate = new Date(year, month - 1, day);
+    const maxRangeDate = new Date(startDate);
+    maxRangeDate.setFullYear(maxRangeDate.getFullYear() + yearsBack);
+    if (inputDate > maxRangeDate) {
+      digits = digits.slice(0, 7);
+    }
+  }
   digits = digits.slice(0, 8);
   let formatted = "";
   if (digits.length > 0) formatted += digits.slice(0, 2);
@@ -1888,7 +1895,9 @@ var DateRangePicker = ({
   handleExport,
   setIsExporting,
   isExporting = false,
-  className = ""
+  className = "",
+  hasLimit = false
+  // Default to false to maintain the 1-year limit
 }) => {
   const [isOpen, setIsOpen] = React.useState(autoOpen);
   const [isApply, setIsApply] = React.useState(false);
@@ -1960,9 +1969,13 @@ var DateRangePicker = ({
     {
       label: "Last Week",
       getValue: () => {
-        const end = /* @__PURE__ */ new Date();
-        const start = new Date(end.getTime() - 7 * 24 * 60 * 60 * 1e3);
-        return { start, end };
+        const now = /* @__PURE__ */ new Date();
+        now.setHours(0, 0, 0, 0);
+        const endOfLastWeek = new Date(now);
+        endOfLastWeek.setDate(now.getDate() - (now.getDay() + 1));
+        const startOfLastWeek = new Date(endOfLastWeek);
+        startOfLastWeek.setDate(endOfLastWeek.getDate() - 6);
+        return { start: startOfLastWeek, end: endOfLastWeek };
       }
     },
     {
@@ -2094,10 +2107,12 @@ var DateRangePicker = ({
       const baseDate = new Date(startDate);
       baseDate.setHours(23, 59, 59, 999);
       if (date < baseDate) return true;
-      const earliestDate2 = new Date(startDate);
-      earliestDate2.setFullYear(earliestDate2.getFullYear() + yearsBack);
-      earliestDate2.setHours(0, 0, 0, 0);
-      if (date > earliestDate2) return true;
+      if (!hasLimit) {
+        const maxDate = new Date(startDate);
+        maxDate.setFullYear(maxDate.getFullYear() + yearsBack);
+        maxDate.setHours(0, 0, 0, 0);
+        if (date > maxDate) return true;
+      }
       return false;
     }
     if (startDate === null) return false;
@@ -2105,10 +2120,12 @@ var DateRangePicker = ({
       const baseDate = new Date(startDate);
       baseDate.setHours(23, 59, 59, 999);
       if (date < baseDate) return true;
-      const earliestDate2 = new Date(startDate);
-      earliestDate2.setFullYear(earliestDate2.getFullYear() + yearsBack);
-      earliestDate2.setHours(0, 0, 0, 0);
-      if (date > earliestDate2) return true;
+      if (!hasLimit) {
+        const maxDate = new Date(startDate);
+        maxDate.setFullYear(maxDate.getFullYear() + yearsBack);
+        maxDate.setHours(0, 0, 0, 0);
+        if (date > maxDate) return true;
+      }
       return false;
     }
     const today = /* @__PURE__ */ new Date();
@@ -2676,7 +2693,7 @@ var DateRangePicker = ({
                       setLeftCalendarView("day");
                       setRightCalendarView("day");
                     },
-                    children: "Custom Range (max 1 year)"
+                    children: hasLimit ? "Custom Range" : "Custom Range (max 1 year)"
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[8px]", children: [
@@ -2693,7 +2710,8 @@ var DateRangePicker = ({
                           rawValue,
                           {
                             enableYearRange: false,
-                            yearsBack
+                            yearsBack,
+                            hasLimit
                           }
                         );
                         setStartInput(formattedValue);
@@ -2743,7 +2761,8 @@ var DateRangePicker = ({
                           rawValue,
                           {
                             enableYearRange: false,
-                            yearsBack
+                            yearsBack,
+                            hasLimit
                           }
                         );
                         setEndInput(formattedValue);
@@ -3259,7 +3278,9 @@ function SingleSelectDropdown({
   displayMainClass = "",
   hasSearchIcon = true,
   searchInputClass = "",
-  placeholderSearchClass = ""
+  placeholderSearchClass = "",
+  usePortal = true
+  // ✅ default true
 }) {
   const [isOpen, setIsOpen] = React.useState(false);
   const [searchTerm, setSearchTerm] = React.useState("");
@@ -3358,7 +3379,7 @@ function SingleSelectDropdown({
     }
   }, [isOpen]);
   React.useLayoutEffect(() => {
-    if (isOpen && dropdownRef.current) {
+    if (isOpen && dropdownRef.current && usePortal) {
       const rect = dropdownRef.current.getBoundingClientRect();
       setDropdownPosition({
         top: rect.bottom + window.scrollY,
@@ -3366,7 +3387,7 @@ function SingleSelectDropdown({
         width: rect.width
       });
     }
-  }, [isOpen]);
+  }, [isOpen, usePortal]);
   const handleToggle = () => {
     if (!disabled) {
       setIsOpen(!isOpen);
@@ -3376,12 +3397,12 @@ function SingleSelectDropdown({
     "div",
     {
       ref: portalRef,
-      style: {
+      style: usePortal ? {
         position: "absolute",
         top: `${dropdownPosition.top + 4}px`,
         left: `${dropdownPosition.left}px`,
         width: `${dropdownPosition.width}px`
-      },
+      } : { position: "absolute", top: "100%", left: 0, marginTop: "4px", width: "100%" },
       className: "rounded-md bg-white shadow-lg z-50",
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 shadow-md border rounded-md max-h-[410px] flex flex-col", children: [
         searchable && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
@@ -3538,7 +3559,7 @@ function SingleSelectDropdown({
           ]
         }
       ),
-      isOpen && !disabled && reactDom.createPortal(DropdownMenu, document.body)
+      isOpen && !disabled && (usePortal ? reactDom.createPortal(DropdownMenu, document.body) : DropdownMenu)
     ] })
   ] });
 }