infinity-ui-elements 1.9.4 → 1.9.5

package/dist/components/DateRangePicker/DateRangePicker.d.ts

@@ -38,6 +38,20 @@ export interface DateRangePickerProps extends Omit<React.HTMLAttributes<HTMLDivE
      * Size of the date range picker
      */
     size?: "small" | "medium" | "large";
+    /**
+     * Custom trigger element (e.g., Button component)
+     * If provided, renders this instead of the default input-style trigger
+     */
+    trigger?: React.ReactNode;
+    /**
+     * Render prop for custom trigger with display text
+     * Receives the formatted display text and isOpen state
+     */
+    renderTrigger?: (props: {
+        displayText: string;
+        isOpen: boolean;
+        onClick: () => void;
+    }) => React.ReactNode;
     /**
      * Custom class for the trigger button
      */

package/dist/components/DateRangePicker/DateRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,kCAAkC,CAAC;AAM1C,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,OAAO,EAAE,IAAI,GAAG,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,SAAS,CAAC;CAC/B,CAAC;AAEF,QAAA,MAAM,uBAAuB;;;mFA4B5B,CAAC;AAoEF,MAAM,WAAW,oBACf,SAAQ,IAAI,CACV,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,GAAG,cAAc,CAC5B;IACD;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IACpC;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAqCD,eAAO,MAAM,eAAe,6FA6kB3B,CAAC;AAIF,OAAO,EAAE,uBAAuB,EAAE,CAAC"}
+{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,kCAAkC,CAAC;AAM1C,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,OAAO,EAAE,IAAI,GAAG,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,SAAS,CAAC;CAC/B,CAAC;AAEF,QAAA,MAAM,uBAAuB;;;mFA4B5B,CAAC;AAoEF,MAAM,WAAW,oBACf,SAAQ,IAAI,CACV,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,GAAG,cAAc,CAC5B;IACD;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE;QACtB,WAAW,EAAE,MAAM,CAAC;QACpB,MAAM,EAAE,OAAO,CAAC;QAChB,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IACpC;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAqCD,eAAO,MAAM,eAAe,6FA2lB3B,CAAC;AAIF,OAAO,EAAE,uBAAuB,EAAE,CAAC"}

package/dist/index.esm.js

@@ -2645,7 +2645,7 @@ const formatMonthYear = (date) => {
         year: "numeric",
     });
 };
-const DateRangePicker = React.forwardRef(({ className, value: controlledValue, defaultValue, onChange, placeholder = "Select date range", isDisabled = false, size = "medium", triggerClassName, calendarClassName, minDate, maxDate, formatDate = formatDateDefault, presets = defaultPresets, showPresets = true, selectedPresetLabel, ...props }, ref) => {
+const DateRangePicker = React.forwardRef(({ className, value: controlledValue, defaultValue, onChange, placeholder = "Select date range", isDisabled = false, size = "medium", trigger, renderTrigger, triggerClassName, calendarClassName, minDate, maxDate, formatDate = formatDateDefault, presets = defaultPresets, showPresets = true, selectedPresetLabel, ...props }, ref) => {
     const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue || { startDate: null, endDate: null });
     const [tempValue, setTempValue] = React.useState(defaultValue || { startDate: null, endDate: null });
     const [isOpen, setIsOpen] = React.useState(false);
@@ -2868,14 +2868,19 @@ const DateRangePicker = React.forwardRef(({ className, value: controlledValue, d
         }
         return placeholder;
     };
-    return (jsxs("div", { ref: datePickerRef, className: cn("relative w-fit", className), children: [jsxs("div", { className: cn(dateRangePickerVariants({
-                    size,
-                    isDisabled,
-                }), "cursor-pointer", triggerClassName), onClick: !isDisabled ? toggleOpen : undefined, role: "button", "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-disabled": isDisabled, ...props, children: [jsx(Calendar, { className: cn("shrink-0 w-4 h-4", isDisabled
-                            ? "text-surface-ink-neutral-disabled"
-                            : "text-surface-ink-neutral-muted") }), jsx("span", { className: cn("flex-1 text-left truncate", !hasValue && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: getDisplayText() }), jsx(Icon, { name: "chevronDown", size: 16, className: cn("shrink-0 transition-transform", isDisabled
-                            ? "text-surface-ink-neutral-disabled"
-                            : "text-surface-ink-neutral-muted", isOpen && "rotate-180") })] }), typeof document !== "undefined" &&
+    const displayText = getDisplayText();
+    // Render custom trigger if provided
+    const triggerElement = renderTrigger ? (renderTrigger({ displayText, isOpen, onClick: toggleOpen })) : trigger ? (jsx("div", { onClick: !isDisabled ? toggleOpen : undefined, children: trigger })) : (
+    // Default trigger
+    jsxs("div", { className: cn(dateRangePickerVariants({
+            size,
+            isDisabled,
+        }), "cursor-pointer", triggerClassName), onClick: !isDisabled ? toggleOpen : undefined, role: "button", "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-disabled": isDisabled, ...props, children: [jsx(Calendar, { className: cn("shrink-0 w-4 h-4", isDisabled
+                    ? "text-surface-ink-neutral-disabled"
+                    : "text-surface-ink-neutral-muted") }), jsx("span", { className: cn("flex-1 text-left truncate", !hasValue && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: displayText }), jsx(Icon, { name: "chevronDown", size: 16, className: cn("shrink-0 transition-transform", isDisabled
+                    ? "text-surface-ink-neutral-disabled"
+                    : "text-surface-ink-neutral-muted", isOpen && "rotate-180") })] }));
+    return (jsxs("div", { ref: datePickerRef, className: cn("relative w-fit", className), children: [triggerElement, typeof document !== "undefined" &&
                 isOpen &&
                 !isDisabled &&
                 (() => {