myoperator-mcp 0.2.389 → 0.2.391

package/dist/index.js

@@ -3595,7 +3595,8 @@ const dateTimePickerTriggerVariants = cva(
       },
       state: {
         default: "",
-        error: "border-[var(--semantic-error-primary,#F04438)] hover:border-[var(--semantic-error-primary,#F04438)]",
+        error:
+          "border-[var(--semantic-error-primary,#F04438)] hover:border-[var(--semantic-error-primary,#F04438)]",
       },
     },
     defaultVariants: {
@@ -3650,6 +3651,20 @@ export interface DateTimePickerProps
   defaultOpen?: boolean;
   onOpenChange?: (open: boolean) => void;
   portalContainer?: HTMLElement | null;
+  /** Shows a footer with Clear, Cancel and OK actions */
+  showActions?: boolean;
+  /** Label for the OK action */
+  okLabel?: string;
+  /** Label for the Cancel action */
+  cancelLabel?: string;
+  /** Label for the extra (left-aligned) action. Defaults to "Clear" */
+  extraActionLabel?: string;
+  /** Overrides the extra action. Defaults to clearing the value */
+  onExtraAction?: () => void;
+  /** Called when OK is pressed, with the confirmed value */
+  onOk?: (value: DateTimePickerValue) => void;
+  /** Called when Cancel is pressed, after the value is restored */
+  onCancel?: () => void;
 }
 
 type DateTimePickerVariant = NonNullable<
@@ -4958,6 +4973,13 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
       defaultOpen = false,
       onOpenChange,
       portalContainer,
+      showActions = false,
+      okLabel = "OK",
+      cancelLabel = "Cancel",
+      extraActionLabel = "Clear",
+      onExtraAction,
+      onOk,
+      onCancel,
       id,
       ...props
     },
@@ -5081,8 +5103,8 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
     );
     const hasValue = Boolean(
       currentValue.date ||
-        currentValue.startTime ||
-        (resolvedShowEndTime && currentValue.endTime)
+      currentValue.startTime ||
+      (resolvedShowEndTime && currentValue.endTime)
     );
     const effectiveMinDate = React.useMemo(() => {
       if (!disablePastDates) return minDate;
@@ -5182,6 +5204,34 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
       [isValueControlled, onValueChange]
     );
 
+    // Value at the moment the popover opened, so Cancel can restore it.
+    const openSnapshotRef = React.useRef<DateTimePickerValue | null>(null);
+    React.useEffect(() => {
+      openSnapshotRef.current = open ? currentValue : null;
+      // Only re-snapshot when the popover opens, not on every value change.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+
+    const handleCancel = () => {
+      const snapshot = openSnapshotRef.current;
+      if (snapshot) updateValue(snapshot);
+      setOpen(false);
+      onCancel?.();
+    };
+
+    const handleOk = () => {
+      setOpen(false);
+      onOk?.(currentValue);
+    };
+
+    const handleExtraAction = (event: React.MouseEvent<HTMLElement>) => {
+      if (onExtraAction) {
+        onExtraAction();
+        return;
+      }
+      clearValue(event);
+    };
+
     const clearValue = (event: React.MouseEvent<HTMLElement>) => {
       event.stopPropagation();
       if (readOnly) return;
@@ -5661,6 +5711,33 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
             </div>
           )}
 
+          {showActions && (
+            <div className="flex items-center justify-between gap-2 border-t border-solid border-[var(--semantic-border-layout,#E9EAEB)] px-3 py-2">
+              <button
+                type="button"
+                className="rounded px-2 py-1.5 text-sm font-semibold text-[var(--semantic-text-muted,#717680)] transition-colors hover:bg-[var(--semantic-bg-ui,#F5F5F5)] hover:text-[var(--semantic-text-primary,#181D27)]"
+                onClick={handleExtraAction}
+              >
+                {extraActionLabel}
+              </button>
+              <div className="flex items-center gap-2">
+                <button
+                  type="button"
+                  className="rounded px-2 py-1.5 text-sm font-semibold text-[var(--semantic-text-link,#4275D6)] transition-colors hover:bg-[var(--semantic-bg-ui,#F5F5F5)]"
+                  onClick={handleCancel}
+                >
+                  {cancelLabel}
+                </button>
+                <button
+                  type="button"
+                  className="rounded px-2 py-1.5 text-sm font-semibold text-[var(--semantic-text-link,#4275D6)] transition-colors hover:bg-[var(--semantic-bg-ui,#F5F5F5)]"
+                  onClick={handleOk}
+                >
+                  {okLabel}
+                </button>
+              </div>
+            </div>
+          )}
         </div>,
         portalMount
       );
@@ -5701,7 +5778,9 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
           >
             {label}
             {required && (
-              <span className="text-[var(--semantic-error-primary,#F04438)] ml-0.5">*</span>
+              <span className="text-[var(--semantic-error-primary,#F04438)] ml-0.5">
+                *
+              </span>
             )}
           </label>
         )}
@@ -10392,6 +10471,14 @@ export interface SelectFieldProps {
    * presentation only.
    */
   truncateOptionText?: boolean;
+  /**
+   * Content shown inside the open dropdown when \`options\` is empty (and no
+   * search query is active \u2014 that case shows "No results found"). Use it to
+   * tell the user why the list is empty and what to do next, e.g.
+   * "No AI Agents yet. Build one in AI Agents first."
+   * Default: "No options available".
+   */
+  emptyMessage?: React.ReactNode;
 }
 
 /**
@@ -10470,6 +10557,7 @@ const SelectField = React.forwardRef(
       loadingMore,
       hasMore,
       truncateOptionText,
+      emptyMessage = "No options available",
     }: SelectFieldProps,
     ref: React.Ref<HTMLButtonElement>
   ) => {
@@ -10752,6 +10840,16 @@ const SelectField = React.forwardRef(
               </div>
             )}
 
+            {/* Empty state \u2014 no options at all and nothing being searched/loaded. */}
+            {options.length === 0 && !effectiveSearchQuery && !loadingMore && (
+              <div
+                role="status"
+                className="px-3 py-6 text-center text-sm text-semantic-text-muted"
+              >
+                {emptyMessage}
+              </div>
+            )}
+
             {/* Loading-more row (lazy-load) */}
             {loadingMore && (
               <div

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-mcp",
-  "version": "0.2.389",
+  "version": "0.2.391",
   "description": "MCP server for myOperator UI components - enables AI assistants to access component metadata, examples, and design tokens",
   "type": "module",
   "bin": "./dist/index.js",