myoperator-ui 0.0.218 → 0.0.220

package/dist/index.js

@@ -4011,6 +4011,7 @@ const MultiSelect = React.forwardRef(
     // Generate unique IDs for accessibility
     const generatedId = React.useId();
     const selectId = id || generatedId;
+    const listboxId = \`\${selectId}-listbox\`;
     const helperId = \`\${selectId}-helper\`;
     const errorId = \`\${selectId}-error\`;
 
@@ -4124,6 +4125,7 @@ const MultiSelect = React.forwardRef(
           role="combobox"
           aria-expanded={isOpen}
           aria-haspopup="listbox"
+          aria-controls={listboxId}
           aria-invalid={!!error}
           aria-describedby={ariaDescribedBy}
           disabled={disabled || loading}
@@ -4203,6 +4205,7 @@ const MultiSelect = React.forwardRef(
         {/* Dropdown */}
         {isOpen && (
           <div
+            id={listboxId}
             className={cn(
               "absolute z-50 mt-1 w-full rounded bg-semantic-bg-primary border border-semantic-border-layout shadow-md",
               "top-full"
@@ -4394,6 +4397,7 @@ const CreatableSelect = React.forwardRef(
     const containerRef = React.useRef<HTMLDivElement>(null)
     const inputRef = React.useRef<HTMLInputElement>(null)
     const listRef = React.useRef<HTMLDivElement>(null)
+    const listboxId = React.useId()
 
     // Merge forwarded ref with internal ref
     React.useImperativeHandle(ref, () => containerRef.current!)
@@ -4536,6 +4540,7 @@ const CreatableSelect = React.forwardRef(
               placeholder={selectedLabel || placeholder}
               aria-expanded="true"
               aria-haspopup="listbox"
+              aria-controls={listboxId}
               role="combobox"
               aria-autocomplete="list"
             />
@@ -4552,6 +4557,7 @@ const CreatableSelect = React.forwardRef(
             )}
             aria-haspopup="listbox"
             aria-expanded="false"
+            aria-controls={listboxId}
           >
             <span
               className={cn(
@@ -4581,6 +4587,7 @@ const CreatableSelect = React.forwardRef(
             {/* Options list */}
             <div
               ref={listRef}
+              id={listboxId}
               role="listbox"
               className="max-h-60 overflow-y-auto p-1"
             >
@@ -4739,6 +4746,7 @@ const CreatableMultiSelect = React.forwardRef(
     const [inputValue, setInputValue] = React.useState("")
     const containerRef = React.useRef<HTMLDivElement>(null)
     const inputRef = React.useRef<HTMLInputElement>(null)
+    const listboxId = React.useId()
 
     React.useImperativeHandle(ref, () => containerRef.current!)
 
@@ -4876,6 +4884,7 @@ const CreatableMultiSelect = React.forwardRef(
             className="flex-1 min-w-[100px] text-base bg-transparent outline-none text-semantic-text-primary placeholder:text-semantic-text-muted"
             role="combobox"
             aria-expanded={isOpen}
+            aria-controls={listboxId}
             aria-haspopup="listbox"
           />
 
@@ -4889,7 +4898,7 @@ const CreatableMultiSelect = React.forwardRef(
 
         {/* Dropdown panel */}
         {isOpen && (
-          <div className="absolute z-[9999] top-full mt-1 w-full bg-semantic-bg-primary border border-semantic-border-layout rounded shadow-md animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200">
+          <div id={listboxId} role="listbox" className="absolute z-[9999] top-full mt-1 w-full bg-semantic-bg-primary border border-semantic-border-layout rounded shadow-md animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200">
             {/* Creatable hint \u2014 Enter key */}
             <div className="flex items-center justify-between px-4 py-2 border-b border-semantic-border-layout">
               <span className="text-sm text-semantic-text-muted">
@@ -6708,12 +6717,14 @@ Alert.displayName = "Alert";
 /**
  * Alert title component for the heading text.
  */
-const AlertTitle = React.forwardRef(({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>, ref: React.Ref<HTMLHeadingElement>) => (
+const AlertTitle = React.forwardRef(({ className, children, ...props }: React.HTMLAttributes<HTMLHeadingElement>, ref: React.Ref<HTMLHeadingElement>) => (
   <h5
     ref={ref}
     className={cn("font-semibold leading-tight tracking-tight", className)}
     {...props}
-  />
+  >
+    {children}
+  </h5>
 ));
 AlertTitle.displayName = "AlertTitle";
 
@@ -14406,6 +14417,7 @@ export const BotCard = React.forwardRef(
         className={cn(
           "relative bg-semantic-bg-primary border border-semantic-border-layout rounded-[5px] min-w-0 max-w-full overflow-hidden flex flex-col",
           "shadow-[0px_4px_15.1px_0px_rgba(0,0,0,0.06)] p-3 sm:p-4 md:p-5",
+          "min-h-[180px] sm:min-h-[207px] h-full shrink-0",
           onEdit && "cursor-pointer",
           className
         )}
@@ -15109,8 +15121,9 @@ export const BotListGrid = React.forwardRef(
     <div
       ref={ref}
       className={cn(
-        "grid w-full min-w-0 max-w-full overflow-hidden gap-3 sm:gap-5 md:gap-6",
+        "grid w-full min-w-0 max-w-full content-start gap-3 sm:gap-5 md:gap-6",
         "grid-cols-[repeat(auto-fill,minmax(min(100%,280px),1fr))]",
+        "auto-rows-auto items-stretch",
         className
       )}
       {...props}
@@ -17966,6 +17979,7 @@ function VarPopup({
               key={v}
               type="button"
               role="option"
+              aria-selected={false}
               onMouseDown={(e) => { e.preventDefault(); onSelect(v); }}
               className="relative flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-semantic-bg-ui"
             >
@@ -18024,6 +18038,7 @@ function VarPopup({
                   <button
                     type="button"
                     role="option"
+                    aria-selected={false}
                     onMouseDown={(e) => { e.preventDefault(); onSelect(insertValue); }}
                     className="relative flex flex-1 min-w-0 cursor-pointer select-none items-center px-2 py-1.5 text-sm outline-none"
                   >
@@ -19803,6 +19818,7 @@ function VarPopup({
           key={v}
           type="button"
           role="option"
+          aria-selected={false}
           onMouseDown={(e) => {
             e.preventDefault(); // keep textarea focused so blur doesn't close popup first
             onSelect(v);
@@ -20041,7 +20057,7 @@ import {
   TooltipTrigger,
 } from "../tooltip";
 import { BOT_KNOWLEDGE_STATUS } from "./types";
-import type { KnowledgeBaseFile } from "./types";
+import type { KnowledgeBaseFile, KnowledgeFileStatus } from "./types";
 
 // \u2500\u2500\u2500 Types \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
@@ -20075,7 +20091,7 @@ export interface KnowledgeBaseCardProps {
 // \u2500\u2500\u2500 Status config \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
 type BadgeVariant = "default" | "active" | "destructive";
-const STATUS_CONFIG: Record<BOT_KNOWLEDGE_STATUS, { label: string; variant: BadgeVariant }> = {
+const STATUS_CONFIG: Record<KnowledgeFileStatus, { label: string; variant: BadgeVariant }> = {
   [BOT_KNOWLEDGE_STATUS.PENDING]:    { label: "Pending",    variant: "default"      },
   [BOT_KNOWLEDGE_STATUS.READY]:      { label: "Ready",      variant: "active"       },
   [BOT_KNOWLEDGE_STATUS.PROCESSING]: { label: "Processing", variant: "active"       },
@@ -20871,9 +20887,7 @@ export const BOT_KNOWLEDGE_STATUS = {
   FAILED: "failed",
 } as const;
 
-export type BOT_KNOWLEDGE_STATUS = typeof BOT_KNOWLEDGE_STATUS[keyof typeof BOT_KNOWLEDGE_STATUS];
-
-export type KnowledgeFileStatus = BOT_KNOWLEDGE_STATUS;
+export type KnowledgeFileStatus = typeof BOT_KNOWLEDGE_STATUS[keyof typeof BOT_KNOWLEDGE_STATUS];
 
 export interface KeyValuePair {
   id: string;

package/package.json

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