myoperator-ui 0.0.113 → 0.0.115

package/dist/index.js

@@ -4905,12 +4905,12 @@ const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
     const heightClasses = {
       horizontal: "h-[76px]",
       vertical: "min-h-[76px] py-4",
-      responsive: "min-h-[76px] py-4 sm:py-0 sm:h-[76px]",
+      responsive: "min-h-[76px] py-4 lg:py-0 lg:h-[76px]",
     };
 
     // Render actions for desktop (all inline)
     const renderDesktopActions = () => (
-      <div className="hidden sm:flex items-center gap-2">{actionsArray}</div>
+      <div className="hidden sm:flex items-center gap-2 ml-6">{actionsArray}</div>
     );
 
     // Render expandable actions (for mobile and vertical layout)
@@ -5021,7 +5021,7 @@ const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
               )}
             </div>
             {description && (
-              <p className="m-0 text-sm text-[#181D27] font-normal mt-1 truncate">
+              <p className="m-0 text-sm text-[#181D27] font-normal mt-1 line-clamp-2">
                 {description}
               </p>
             )}
@@ -5276,6 +5276,7 @@ export const EventGroupComponent = React.forwardRef<
       onSelectionChange,
       emptyGroupMessage = "No events available",
       renderEmptyGroup,
+      defaultExpanded = false,
       className,
       ...props
     },
@@ -5359,39 +5360,41 @@ export const EventGroupComponent = React.forwardRef<
     // Multiple events: render as collapsible accordion
     return (
       <div ref={ref} className={cn("bg-white", className)} {...props}>
-        <Accordion type="multiple">
+        <Accordion type="multiple" defaultValue={defaultExpanded ? [group.id] : []}>
           <AccordionItem value={group.id}>
-            <AccordionTrigger
-              showChevron={true}
-              className="w-full p-4 hover:bg-[#F9FAFB]"
-            >
-              <div className="flex items-center gap-3 flex-1">
-                <Checkbox
-                  checked={checkboxState}
-                  onCheckedChange={handleGroupCheckbox}
-                  onClick={(e) => e.stopPropagation()}
-                  aria-label={\`Select all \${group.name}\`}
-                />
-                <div className="flex flex-col items-start text-left flex-1 min-w-0">
-                  <div className="flex items-center gap-2">
-                    {group.icon && (
-                      <span className="text-[#6B7280]">{group.icon}</span>
-                    )}
-                    <span className="font-medium text-[#333333]">
-                      {group.name}
+            {/* Header row with checkbox OUTSIDE the trigger button to avoid nested buttons */}
+            <div className="flex items-center gap-3 p-4 hover:bg-[#F9FAFB]">
+              <Checkbox
+                checked={checkboxState}
+                onCheckedChange={handleGroupCheckbox}
+                aria-label={\`Select all \${group.name}\`}
+              />
+              <AccordionTrigger
+                showChevron={true}
+                className="flex-1 p-0 hover:bg-transparent"
+              >
+                <div className="flex items-center gap-3 flex-1">
+                  <div className="flex flex-col items-start text-left flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      {group.icon && (
+                        <span className="text-[#6B7280]">{group.icon}</span>
+                      )}
+                      <span className="font-medium text-[#333333]">
+                        {group.name}
+                      </span>
+                    </div>
+                    <span className="text-sm text-[#6B7280] mt-0.5">
+                      {group.description}
                     </span>
                   </div>
-                  <span className="text-sm text-[#6B7280] mt-0.5">
-                    {group.description}
-                  </span>
+                  {selectedCount > 0 && (
+                    <span className="text-sm text-[#6B7280] whitespace-nowrap">
+                      {selectedCount} Selected
+                    </span>
+                  )}
                 </div>
-                {selectedCount > 0 && (
-                  <span className="text-sm text-[#6B7280] whitespace-nowrap">
-                    {selectedCount} Selected
-                  </span>
-                )}
-              </div>
-            </AccordionTrigger>
+              </AccordionTrigger>
+            </div>
             <AccordionContent>
               <div className="border-t border-[#E5E7EB]">
                 {events.length > 0 ? (
@@ -5559,6 +5562,8 @@ export interface EventGroupComponentProps {
   emptyGroupMessage?: string
   /** Custom render function for empty group state */
   renderEmptyGroup?: (group: EventGroup) => React.ReactNode
+  /** Whether the accordion should be expanded by default (default: false) */
+  defaultExpanded?: boolean
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-ui",
-  "version": "0.0.113",
+  "version": "0.0.115",
   "description": "CLI for adding myOperator UI components to your project",
   "type": "module",
   "exports": "./dist/index.js",