@caratlogic/design-system 0.0.7 → 0.0.8

package/dist/index.esm.js

@@ -12556,7 +12556,7 @@ var Popover$1 = (props) => {
 };
 Popover$1.displayName = POPOVER_NAME;
 var ANCHOR_NAME$2 = "PopoverAnchor";
-var PopoverAnchor = React.forwardRef(
+var PopoverAnchor$1 = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopePopover, ...anchorProps } = props;
     const context = usePopoverContext(ANCHOR_NAME$2, __scopePopover);
@@ -12569,7 +12569,7 @@ var PopoverAnchor = React.forwardRef(
     return /* @__PURE__ */ jsx(Anchor$1, { ...popperScope, ...anchorProps, ref: forwardedRef });
   }
 );
-PopoverAnchor.displayName = ANCHOR_NAME$2;
+PopoverAnchor$1.displayName = ANCHOR_NAME$2;
 var TRIGGER_NAME$5 = "PopoverTrigger";
 var PopoverTrigger$1 = React.forwardRef(
   (props, forwardedRef) => {
@@ -12789,6 +12789,7 @@ function getState$2(open) {
   return open ? "open" : "closed";
 }
 var Root2$3 = Popover$1;
+var Anchor2$1 = PopoverAnchor$1;
 var Trigger$4 = PopoverTrigger$1;
 var Portal$4 = PopoverPortal;
 var Content2$4 = PopoverContent$1;
@@ -12802,6 +12803,9 @@ function PopoverTrigger({ ...props }) {
 function PopoverContent({ className, align = 'center', sideOffset = 8, ...props }) {
     return (jsx(Portal$4, { children: jsx(Content2$4, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden', className), ...props }) }));
 }
+function PopoverAnchor({ ...props }) {
+    return jsx(Anchor2$1, { "data-slot": "popover-anchor", ...props });
+}
 
 const SCROLL_THRESHOLD = 50;
 function useSearchableSelect({ selectedItem, onChange, getOptionKey, getOptionLabel, getOptionSubLabel, fetchPage, staticOptions, filterFn, preSelectedId, resolveById, pageSize, debounceMs, }) {
@@ -20930,14 +20934,14 @@ function useRefundToWallet(open) {
     return { refundToWallet, setRefundToWallet };
 }
 
-const ConfirmDialog = ({ open, onOpenChange, title, description, info, confirmLabel = 'Yes', cancelLabel = 'Cancel', confirmVariant = 'default', disabled = false, onConfirm, onCancel, }) => {
+const ConfirmDialog = ({ open, onOpenChange, title, description, info, confirmLabel = 'Yes', cancelLabel = 'Cancel', confirmVariant = 'default', icon: Icon = Trash2, disabled = false, onConfirm, onCancel, }) => {
     const { refundToWallet, setRefundToWallet } = useRefundToWallet(open);
-    return (jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: jsxs(DialogContent, { children: [jsxs(DialogHeader, { children: [jsxs(DialogTitle, { className: "flex items-center gap-2", children: [confirmVariant === 'destructive' && (jsx("span", { className: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-destructive/10", children: jsx(Trash2, { className: "h-4 w-4 text-destructive" }) })), jsx("span", { children: title })] }), description && (jsx(DialogDescription, { className: "mt-2", children: description })), info && (jsx(InfoCard, { info: info, title: title, refundToWallet: refundToWallet, onRefundChange: setRefundToWallet }))] }), jsxs(DialogFooter, { className: "mt-4", children: [jsx(Button$1, { variant: "outline", onClick: () => {
+    return (jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: jsxs(DialogContent, { className: "gap-3 p-5", children: [jsxs(DialogHeader, { className: "gap-1.5", children: [jsxs(DialogTitle, { className: "flex items-center gap-2", children: [confirmVariant === 'destructive' && (jsx("span", { className: "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-destructive/10", children: jsx(Icon, { className: "h-3.5 w-3.5 text-destructive" }) })), jsx("span", { children: title })] }), description && jsx(DialogDescription, { children: description }), info && (jsx(InfoCard, { info: info, title: title, refundToWallet: refundToWallet, onRefundChange: setRefundToWallet }))] }), jsxs(DialogFooter, { className: "mt-1", children: [jsx(Button$1, { variant: "outline", onClick: () => {
                                 onCancel?.();
                                 onOpenChange(false);
                             }, disabled: disabled, children: cancelLabel }), jsxs(Button$1, { variant: confirmVariant, onClick: async () => {
                                 await onConfirm(title === 'Cancel Invoice' ? refundToWallet : undefined);
-                            }, disabled: disabled, className: "ml-3", children: [confirmVariant === 'destructive' && (jsx(Trash2, { className: "mr-1.5 h-4 w-4", "aria-hidden": true })), disabled ? 'Please wait...' : confirmLabel] })] })] }) }));
+                            }, disabled: disabled, children: [confirmVariant === 'destructive' && (jsx(Icon, { className: "h-4 w-4", "aria-hidden": true })), disabled ? 'Please wait...' : confirmLabel] })] })] }) }));
 };
 
 /** Class builder for a segment button in the `segmented` variant. */
@@ -34727,11 +34731,18 @@ function DatePickerHeader({ monthDate, changeYear, changeMonth, decreaseMonth, i
 function DateInput({ value, onChange, onBlur, name, className, min, max, disabled, placeholder = 'Select date', }) {
     const [open, setOpen] = useState(false);
     const { minDate, maxDate, minYear, maxYear } = computeDateBounds(min, max);
-    const openPicker = () => {
-        if (!disabled)
-            setOpen(true);
-    };
-    return (jsxs(Popover, { open: open, onOpenChange: setOpen, children: [jsx(PopoverTrigger, { asChild: true, children: jsxs("button", { type: "button", name: name, onBlur: onBlur, onClick: openPicker, disabled: disabled, "data-slot": "input", "data-empty": !value || undefined, className: cn('border-input-border flex h-9 w-full min-w-0 cursor-pointer items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-1 text-left shadow-[0_1px_2px_0_#0000000d] transition-[color,box-shadow] outline-none', 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]', 'aria-invalid:ring-destructive/20 aria-invalid:border-destructive', disabled && 'cursor-not-allowed bg-muted text-label', className), children: [jsx("span", { className: cn('truncate text-sm md:text-sm', value ? 'text-foreground' : 'text-placeholder'), children: value ? moment(value).format('DD/MM/YYYY') : placeholder }), jsx("span", { className: "inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground", children: jsx(CalendarDays, { className: "h-4 w-4 stroke-[1.75]" }) })] }) }), jsx(PopoverContent, { align: "start", className: "date-range-picker-popover w-auto p-4", children: jsx(DatePicker, { inline: true, selected: value ?? null, minDate: minDate ? moment(minDate, 'YYYY-MM-DD').toDate() : undefined, maxDate: maxDate ? moment(maxDate, 'YYYY-MM-DD').toDate() : undefined, onChange: (date) => {
+    // NOTE: We drive `open` ourselves from the button's onClick instead of using
+    // Radix's <PopoverTrigger> toggle. When this Popover is nested inside the
+    // modal <SlideOut> (Radix Dialog), the trigger's built-in toggle does not
+    // fire in Safari, so the calendar never opened. Using <PopoverAnchor> (pure
+    // positioning, no event handlers) + a single controlled toggle is the one
+    // source of truth — no double-fire, and it works across browsers. `modal`
+    // lets the open popover own pointer events above the dialog so the calendar
+    // (portalled to <body>) stays clickable.
+    return (jsxs(Popover, { open: open, onOpenChange: setOpen, modal: true, children: [jsx(PopoverAnchor, { asChild: true, children: jsxs("button", { type: "button", name: name, onBlur: onBlur, disabled: disabled, "aria-haspopup": "dialog", "aria-expanded": open, onClick: () => {
+                        if (!disabled)
+                            setOpen((prev) => !prev);
+                    }, "data-slot": "input", "data-empty": !value || undefined, className: cn('border-input-border flex h-9 w-full min-w-0 cursor-pointer items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-1 text-left shadow-[0_1px_2px_0_#0000000d] transition-[color,box-shadow] outline-none', 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]', 'aria-invalid:ring-destructive/20 aria-invalid:border-destructive', disabled && 'cursor-not-allowed bg-muted text-label', className), children: [jsx("span", { className: cn('truncate text-sm md:text-sm', value ? 'text-foreground' : 'text-placeholder'), children: value ? moment(value).format('DD/MM/YYYY') : placeholder }), jsx("span", { className: "inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground", children: jsx(CalendarDays, { className: "h-4 w-4 stroke-[1.75]" }) })] }) }), jsx(PopoverContent, { align: "start", className: "date-range-picker-popover w-auto p-4", children: jsx(DatePicker, { inline: true, selected: value ?? null, minDate: minDate ? moment(minDate, 'YYYY-MM-DD').toDate() : undefined, maxDate: maxDate ? moment(maxDate, 'YYYY-MM-DD').toDate() : undefined, onChange: (date) => {
                         onChange(date ?? undefined);
                         if (date)
                             setOpen(false);