@embedreach/components 0.2.49 → 0.2.51

package/dist/chunks/index.js

@@ -10004,7 +10004,7 @@ const CalendarPlus2 = createLucideIcon("CalendarPlus2", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Calendar$1 = createLucideIcon("Calendar", [
+const Calendar = createLucideIcon("Calendar", [
   ["path", { d: "M8 2v4", key: "1cmpym" }],
   ["path", { d: "M16 2v4", key: "4m81vk" }],
   ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
@@ -46978,7 +46978,7 @@ const IconDefinitions = {
   UserIcon: User,
   UsersIcon: Users,
   UserEdit: UserPen,
-  ScheduleButton: Calendar$1,
+  ScheduleButton: Calendar,
   SendButton: Send,
   BackButton: ChevronLeft,
   NextButton: ChevronRight,
@@ -46996,7 +46996,7 @@ const IconDefinitions = {
    */
   OneTimeBroadcast: Radio,
   PatronEntersList: List$1,
-  DateMilestone: Calendar$1,
+  DateMilestone: Calendar,
   RealtimeActivity: CalendarPlus2,
   DuplicateIcon: Copy,
   /**
@@ -58307,10 +58307,9 @@ var Portal$2 = PopoverPortal;
 var Content2$1 = PopoverContent$1;
 const Popover = Root2$3;
 const PopoverTrigger = Trigger$2;
-const PopoverContent = React__default.forwardRef(({ className: className2, align = "center", sideOffset = 4, ...props2 }, ref) => /* @__PURE__ */ jsx(Portal$2, { "data-reach-root": true, children: /* @__PURE__ */ jsx(
+const PopoverContent = React__default.forwardRef(({ className: className2, align = "center", sideOffset = 4, ...props2 }, ref) => /* @__PURE__ */ jsx(Portal$2, { children: /* @__PURE__ */ jsx(
   Content2$1,
   {
-    "data-reach-root": true,
     ref,
     align,
     sideOffset,
@@ -77621,57 +77620,58 @@ function RootProvider(props2) {
 function DayPicker(props2) {
   return jsx(RootProvider, __assign({}, props2, { children: jsx(Root$3, { initialProps: props2 }) }));
 }
-function Calendar({
+function ReactCalendar({
   className: className2,
   classNames,
   showOutsideDays = true,
   ...props2
 }) {
-  return /* @__PURE__ */ jsx("div", { "data-reach-root": true, children: /* @__PURE__ */ jsx(
+  const finalClassNames = {
+    months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+    month: "space-y-4",
+    caption: "flex justify-center pt-1 relative items-center",
+    caption_label: "text-sm font-medium",
+    nav: "space-x-1 flex items-center",
+    nav_button: cn$1(
+      buttonVariants({ variant: "outline" }),
+      "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+    ),
+    nav_button_previous: "absolute left-1",
+    nav_button_next: "absolute right-1",
+    table: "w-full border-collapse space-y-1",
+    head_row: "flex",
+    head_cell: "text-[#6b7280] rounded-md w-8 font-normal text-[0.8rem]",
+    row: "flex w-full mt-2",
+    cell: "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-[#f1f5f9] [&:has([aria-selected].day-outside)]:bg-[#f1f5f9]/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+    day: cn$1(
+      buttonVariants({ variant: "ghost" }),
+      "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+    ),
+    day_range_start: "day-range-start",
+    day_range_end: "day-range-end",
+    day_selected: "!bg-black !text-gray-200 hover:!bg-black hover:!text-gray-200 focus:!bg-black focus:!text-black",
+    day_today: "bg-gray-200 text-black",
+    day_outside: "day-outside text-[#94a3b8] aria-selected:bg-[#f1f5f9]/50 aria-selected:text-[#94a3b8]",
+    day_disabled: "text-[#94a3b8] opacity-50",
+    day_range_middle: "aria-selected:bg-[#f1f5f9] aria-selected:text-black",
+    day_hidden: "invisible",
+    ...classNames
+  };
+  return /* @__PURE__ */ jsx(
     DayPicker,
     {
       showOutsideDays,
       className: cn$1("p-3", className2),
-      classNames: {
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
-        nav_button: cn$1(
-          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
-        ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell: "text-[#6b7280] rounded-md w-8 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-[#f1f5f9] [&:has([aria-selected].day-outside)]:bg-[#f1f5f9]/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
-        day: cn$1(
-          buttonVariants({ variant: "ghost" }),
-          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
-        ),
-        day_range_start: "day-range-start",
-        day_range_end: "day-range-end",
-        day_selected: "!bg-black !text-gray-200 hover:!bg-black hover:!text-gray-200 focus:!bg-black focus:!text-black",
-        day_today: "bg-gray-200 text-black",
-        day_outside: "day-outside text-[#94a3b8] aria-selected:bg-[#f1f5f9]/50 aria-selected:text-[#94a3b8]",
-        day_disabled: "text-[#94a3b8] opacity-50",
-        day_range_middle: "aria-selected:bg-[#f1f5f9] aria-selected:text-black",
-        day_hidden: "invisible",
-        ...classNames
-      },
+      classNames: finalClassNames,
       components: {
         IconLeft: () => /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
         IconRight: () => /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
       },
       ...props2
     }
-  ) });
+  );
 }
-Calendar.displayName = "Calendar";
+ReactCalendar.displayName = "Calendar";
 const ComboboxDemo = ({
   data,
   placeholder,
@@ -77797,13 +77797,13 @@ const SetScheduleTime = ({ setScheduleTime, setTimezone, timezone, scheduleTime,
               !scheduleTime && "text-muted-foreground"
             ),
             children: [
-              /* @__PURE__ */ jsx(Calendar$1, { className: "mr-2 h-4 w-4" }),
+              /* @__PURE__ */ jsx(Calendar, { className: "mr-2 h-4 w-4" }),
               scheduleTime ? scheduleTime === "now" ? "Send immediately" : format$1(new Date(scheduleTime), "PPP") : /* @__PURE__ */ jsx("span", { children: "Pick a date" })
             ]
           }
         ) }),
         /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0 z-[60] pointer-events-auto", children: /* @__PURE__ */ jsx(
-          Calendar,
+          ReactCalendar,
           {
             mode: "single",
             selected: scheduleTime ? new Date(scheduleTime) : void 0,
@@ -77815,6 +77815,7 @@ const SetScheduleTime = ({ setScheduleTime, setTimezone, timezone, scheduleTime,
             },
             initialFocus: true,
             classNames: {
+              head_cell: "text-[#6b7280] rounded-md w-8 font-normal text-[0.8rem]",
               cell: "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-[#f1f5f9] [&:has([aria-selected].day-outside)]:bg-[#f1f5f9]/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
               day_range_start: "day-range-start",
               day_range_end: "day-range-end",
@@ -79451,7 +79452,7 @@ function MultiSelectDialog({
   emptyMessage = "No items found",
   handleSearchInput,
   extraCommandItems = [],
-  disabled = false
+  canOpen = true
 }) {
   const [open, setOpen] = React.useState(false);
   const [searchQuery, setSearchQuery] = React.useState("");
@@ -79472,7 +79473,6 @@ function MultiSelectDialog({
     });
   }, [selectedValues, options]);
   const handleItemToggle = (optionValue) => {
-    if (disabled) return;
     setTempSelected((prev) => {
       const isSelected = prev.includes(optionValue);
       if (isSelected) {
@@ -79486,7 +79486,6 @@ function MultiSelectDialog({
     });
   };
   const handleSelectAll = () => {
-    if (disabled) return;
     const availableOptions = filteredOptions.filter(
       (option) => !tempSelected.includes(option.value)
     );
@@ -79494,24 +79493,20 @@ function MultiSelectDialog({
     setTempSelected((prev) => [...prev, ...toAdd.map((opt) => opt.value)]);
   };
   const handleDeselectAll = () => {
-    if (disabled) return;
     const filteredValues = new Set(filteredOptions.map((option) => option.value));
     setTempSelected((prev) => prev.filter((item) => !filteredValues.has(item)));
   };
   const handleApply = () => {
-    if (disabled) return;
     onValueChange(tempSelected);
     setSelectedValues(tempSelected);
     setOpen(false);
   };
   const handleCancel = () => {
-    if (disabled) return;
     setTempSelected(selectedValues);
     setSearchQuery("");
     setOpen(false);
   };
   const handleSearchKeyDown = (e4) => {
-    if (disabled) return;
     if (e4.key === "Enter" && searchQuery.trim() && handleSearchInput) {
       e4.preventDefault();
       handleSearchInput(searchQuery.trim());
@@ -79530,13 +79525,12 @@ function MultiSelectDialog({
   ).length;
   const selectedDisplay = getSelectedOptionsDisplay();
   const canSelectMore = !maxCount || tempSelected.length < maxCount;
-  return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange: setOpen, children: [
+  return /* @__PURE__ */ jsxs(Dialog, { open: open && canOpen, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       Button$1,
       {
         variant: "outline",
         className: "w-full justify-between text-left font-normal h-9 p-3",
-        disabled,
         children: [
           /* @__PURE__ */ jsx("div", { className: "flex flex-nowrap items-center gap-1 max-w-[70%]", children: selectedDisplay.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }) : selectedDisplay.length <= 2 ? selectedDisplay.map((item) => /* @__PURE__ */ jsx(
             Badge,
@@ -79587,8 +79581,7 @@ function MultiSelectDialog({
             value: searchQuery,
             onChange: (e4) => setSearchQuery(e4.target.value),
             onKeyDown: handleSearchKeyDown,
-            className: "pl-10 h-11",
-            disabled
+            className: "pl-10 h-11"
           }
         ),
         handleSearchInput && searchQuery.trim() && /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ jsx(
@@ -79598,11 +79591,9 @@ function MultiSelectDialog({
             variant: "ghost",
             className: "h-6 w-6 p-0",
             onClick: () => {
-              if (disabled) return;
               handleSearchInput(searchQuery.trim());
               setSearchQuery("");
             },
-            disabled,
             children: /* @__PURE__ */ jsx(IconDefinitions.PlusIcon, { className: "h-3 w-3" })
           }
         ) })
@@ -79622,7 +79613,7 @@ function MultiSelectDialog({
               variant: "ghost",
               size: "sm",
               onClick: handleSelectAll,
-              disabled: disabled || !canSelectMore || filteredSelectedCount === filteredOptions.length,
+              disabled: !canSelectMore || filteredSelectedCount === filteredOptions.length,
               className: "h-8 text-xs",
               children: "Select All"
             }
@@ -79633,7 +79624,7 @@ function MultiSelectDialog({
               variant: "ghost",
               size: "sm",
               onClick: handleDeselectAll,
-              disabled: disabled || filteredSelectedCount === 0,
+              disabled: filteredSelectedCount === 0,
               className: "h-8 text-xs",
               children: "Clear All"
             }
@@ -79656,11 +79647,9 @@ function MultiSelectDialog({
               size: "sm",
               className: "mt-3",
               onClick: () => {
-                if (disabled) return;
                 handleSearchInput(searchQuery.trim());
                 setSearchQuery("");
               },
-              disabled,
               children: [
                 /* @__PURE__ */ jsx(IconDefinitions.PlusIcon, { className: "h-3 w-3 mr-1" }),
                 'Add "',
@@ -79671,7 +79660,7 @@ function MultiSelectDialog({
           )
         ] }) : filteredOptions.map((option) => {
           const isSelected = tempSelected.includes(option.value);
-          const isDisabled = disabled || !isSelected && !canSelectMore;
+          const isDisabled = !isSelected && !canSelectMore;
           return /* @__PURE__ */ jsxs(
             CommandItem,
             {
@@ -79697,22 +79686,12 @@ function MultiSelectDialog({
       ] }) }) }),
       /* @__PURE__ */ jsx(Separator, {}),
       /* @__PURE__ */ jsx("div", { className: "p-6 pt-4", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
-        /* @__PURE__ */ jsx(
-          Button$1,
-          {
-            variant: "outline",
-            onClick: handleCancel,
-            className: "flex-1",
-            disabled,
-            children: "Cancel"
-          }
-        ),
+        /* @__PURE__ */ jsx(Button$1, { variant: "outline", onClick: handleCancel, className: "flex-1", children: "Cancel" }),
         /* @__PURE__ */ jsxs(
           Button$1,
           {
             onClick: handleApply,
             className: "flex-1 bg-primary hover:bg-primary/90",
-            disabled,
             children: [
               "Apply (",
               selectedCount,
@@ -79886,13 +79865,13 @@ const DateSegmentSelector = ({
           !date2 && "text-muted-foreground"
         ),
         children: [
-          /* @__PURE__ */ jsx(Calendar$1, { className: "mr-2 h-4 w-4" }),
+          /* @__PURE__ */ jsx(Calendar, { className: "mr-2 h-4 w-4" }),
           date2 ? format$1(date2, monthDayOnly ? "MMMM d" : "PPP") : /* @__PURE__ */ jsx("span", { children: placeholder })
         ]
       }
     ) }),
     /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(
-      Calendar,
+      ReactCalendar,
       {
         mode: "single",
         selected: date2,
@@ -81405,9 +81384,10 @@ const RecipientsTable = ({ recipients }) => {
     ] }, index2)) })
   ] }) }) });
 };
-const AllOrSelectSegmentPicker = ({ onSelectionChange, defaultValue = "all" }) => {
+const AllOrSelectSegmentPicker = ({ onSelectionChange, defaultValue = "all", canEditAudience = true }) => {
   const [selected, setSelected] = useState(defaultValue);
   const handleSelect = (value) => {
+    if (!canEditAudience) return;
     setSelected(value);
     onSelectionChange?.(value);
   };
@@ -81442,7 +81422,8 @@ const SegmentSection = ({
   allSegments,
   onAddSegment,
   onRemoveSegment,
-  setOpenCreateSegmentDialog
+  setOpenCreateSegmentDialog,
+  canEditAudience = true
 }) => {
   const handleValueChange = (newValues) => {
     const segmentsToAdd = newValues.filter((id2) => !segments.includes(id2));
@@ -81461,6 +81442,7 @@ const SegmentSection = ({
   return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
     MultiSelectDialog,
     {
+      canAddValues: canEditAudience,
       selectedValues: segmentSelectedIds,
       setSelectedValues: setSegmentSelectedIds,
       options,
@@ -81494,7 +81476,8 @@ const SelectSegmentsContent = ({
   handleRemoveSegment,
   setOpenCreateSegmentDialog,
   segments,
-  defaultIsExcludeOpen = false
+  defaultIsExcludeOpen = false,
+  canEditAudience = true
 }) => {
   const [isExcludeOpen, setIsExcludeOpen] = useState(defaultIsExcludeOpen);
   return /* @__PURE__ */ jsxs("div", { children: [
@@ -81513,7 +81496,10 @@ const SelectSegmentsContent = ({
       /* @__PURE__ */ jsxs(
         Button$1,
         {
-          onClick: () => setIsExcludeOpen(!isExcludeOpen),
+          onClick: () => {
+            if (!canEditAudience) return;
+            setIsExcludeOpen(!isExcludeOpen);
+          },
           className: "flex items-center gap-1 transition-colors",
           size: "sm",
           children: [
@@ -81539,6 +81525,7 @@ const SelectSegmentsContent = ({
           children: /* @__PURE__ */ jsx(
             SegmentSection,
             {
+              canEditAudience,
               segments: excludedSegments,
               allSegments: segments || [],
               onAddSegment: (id2) => handleAddSegment(id2, "exclude"),
@@ -81647,6 +81634,7 @@ const AutomationAudienceSelectorMain = ({ title: title2 = "Preview Audience" })
       setIncludedSegments((prev) => [...prev, id2]);
     }
   };
+  const canEditAudience = automation2?.status !== AutomationStatus.DRAFT;
   return /* @__PURE__ */ jsxs(MainPageWrapper, { title: title2, children: [
     isLoading || !segments || !initialStateSet ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(BasicLoader, { text: ["Fetching segments", "Finishing up"] }) }) : /* @__PURE__ */ jsxs("div", { className: "flex gap-8 w-full pb-4 px-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 relative overflow-y-auto pb-4 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: [
@@ -81655,7 +81643,8 @@ const AutomationAudienceSelectorMain = ({ title: title2 = "Preview Audience" })
           AllOrSelectSegmentPicker,
           {
             onSelectionChange: handleAudienceSelectionChange,
-            defaultValue: selectedAudience
+            defaultValue: selectedAudience,
+            canEditAudience
           }
         ),
         /* @__PURE__ */ jsx(AnimatePresence, { children: selectedAudience === "segments" && /* @__PURE__ */ jsx(
@@ -81669,6 +81658,7 @@ const AutomationAudienceSelectorMain = ({ title: title2 = "Preview Audience" })
             children: /* @__PURE__ */ jsx(
               SelectSegmentsContent,
               {
+                canEditAudience,
                 includedSegments,
                 excludedSegments,
                 handleAddSegment,