@flanksource/clicky-ui 0.3.26 → 0.3.28

package/dist/overlay/DropdownMenu.js

@@ -62,15 +62,13 @@ function DropdownMenuRoot({
     onNavigate: setActiveIndex,
     loop: true
   });
-  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
-    click,
-    dismiss,
-    role,
-    listNav
-  ]);
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
+    [click, dismiss, role, listNav]
+  );
   const closeMenu = () => {
     setOpen(false);
-    if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();
+    if (refs.domReference.current instanceof HTMLElement)
+      refs.domReference.current.focus();
   };
   useEscapeLayer(open, closeMenu);
   const closeMenuRef = useRef(closeMenu);
@@ -103,41 +101,54 @@ function DropdownMenuRoot({
         "aria-expanded": open,
         ...getReferenceProps(),
         children: [
-          icon && /* @__PURE__ */ jsx(Icon, { ...typeof icon === "string" ? { name: icon } : { icon } }),
+          icon && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              ...typeof icon === "string" ? { name: icon } : { icon }
+            }
+          ),
           label,
           !hideChevron && /* @__PURE__ */ jsx(Icon, { icon: UiChevronDown })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingFocusManager, { context, modal: false, closeOnFocusOut: false, children: /* @__PURE__ */ jsxs(
-      "div",
+    open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+      FloatingFocusManager,
       {
-        ref: refs.setFloating,
-        role: "menu",
-        "aria-label": menuLabel,
-        style: { ...floatingStyles, zIndex: floatingZ },
-        className: cn(MENU_POPOVER_CLASS, menuClassName),
-        ...getFloatingProps(),
-        children: [
-          header != null && /* @__PURE__ */ jsx("div", { className: "border-b border-border px-3 py-1.5", children: header }),
-          children ? children(closeMenu) : /* @__PURE__ */ jsx(
-            MenuContext.Provider,
-            {
-              value: {
-                getItemProps,
-                activeIndex,
-                setActiveIndex,
-                setHasFocusInside: () => {
-                },
-                isOpen: open
-              },
-              children: /* @__PURE__ */ jsx(FloatingList, { elementsRef, children: /* @__PURE__ */ jsx(MenuItemList, { items: items ?? [] }) })
-            }
-          ),
-          footer != null && /* @__PURE__ */ jsx("div", { className: "border-t border-border px-3 py-1.5", children: footer })
-        ]
+        context,
+        modal: false,
+        closeOnFocusOut: false,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: refs.setFloating,
+            ...getFloatingProps(),
+            role: "menu",
+            "aria-label": menuLabel,
+            style: { ...floatingStyles, zIndex: floatingZ },
+            className: cn(MENU_POPOVER_CLASS, menuClassName),
+            children: [
+              header != null && /* @__PURE__ */ jsx("div", { className: "border-b border-border px-3 py-1.5", children: header }),
+              children ? children(closeMenu) : /* @__PURE__ */ jsx(
+                MenuContext.Provider,
+                {
+                  value: {
+                    getItemProps,
+                    activeIndex,
+                    setActiveIndex,
+                    setHasFocusInside: () => {
+                    },
+                    isOpen: open
+                  },
+                  children: /* @__PURE__ */ jsx(FloatingList, { elementsRef, children: /* @__PURE__ */ jsx(MenuItemList, { items: items ?? [] }) })
+                }
+              ),
+              footer != null && /* @__PURE__ */ jsx("div", { className: "border-t border-border px-3 py-1.5", children: footer })
+            ]
+          }
+        )
       }
-    ) }) })
+    ) })
   ] }) });
 }
 export {

package/dist/overlay/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.js","sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingList,\n  FloatingNode,\n  FloatingPortal,\n  FloatingTree,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useFloatingNodeId,\n  useFloatingTree,\n  useInteractions,\n  useListNavigation,\n  useRole,\n} from \"@floating-ui/react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"../components/button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\nimport { MENU_POPOVER_CLASS, MenuContext } from \"./dropdownMenuContext\";\nimport { MenuItemList } from \"./DropdownMenuSubmenu\";\nimport { useEscapeLayer, useFloatingZIndex } from \"./modalStack\";\n\nexport type DropdownMenuItem = {\n  /** Visible label. */\n  label: ReactNode;\n  /** Called when the item is chosen. Ignored when the item has `children`. */\n  onSelect: () => void;\n  /** Iconify name or imported icon component rendered before the label. */\n  icon?: string | StaticIconComponent;\n  /** CSS colour applied to this item's icon (the glyph fills `currentColor`). */\n  iconColor?: string;\n  /**\n   * Section header. A non-interactive header renders above the first item of\n   * each contiguous group — provide items pre-sorted by `group`. Items without\n   * a `group` render no header.\n   */\n  group?: string;\n  /** Browser tooltip for the item. */\n  title?: string;\n  /** Disable selection. */\n  disabled?: boolean;\n  /**\n   * Nested submenu items. When present the item becomes a submenu trigger: it\n   * opens a flyout of `children` (recursively) on hover / click / ArrowRight\n   * instead of firing `onSelect`.\n   */\n  children?: DropdownMenuItem[];\n};\n\nexport type DropdownMenuProps = {\n  /** Trigger label. Ignored when `trigger` is provided. */\n  label?: ReactNode;\n  /** Icon shown before the trigger label. Ignored when `trigger` is provided. */\n  icon?: string | StaticIconComponent;\n  /** Hide the trailing chevron on the default trigger. */\n  hideChevron?: boolean;\n  /** Variant forwarded to the default Button trigger. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the default Button trigger. */\n  size?: ButtonProps[\"size\"];\n  /** Fully custom trigger. Receives no props; the menu wraps it with open state. */\n  trigger?: ReactNode;\n  /** Declarative menu items. Provide this or `children`, not both. */\n  items?: DropdownMenuItem[];\n  /** Custom menu content. Use `closeMenu` to dismiss after a selection. */\n  children?: (closeMenu: () => void) => ReactNode;\n  /** Rendered at the top of the menu, above the items/children. */\n  header?: ReactNode;\n  /** Rendered at the bottom of the menu, below the items/children (e.g. a \"Show more…\" link). */\n  footer?: ReactNode;\n  /** Horizontal alignment of the menu relative to the trigger. */\n  align?: \"left\" | \"right\";\n  /** Notified whenever the menu opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Browser tooltip / accessible label for the default trigger. */\n  title?: string;\n  /** Accessible label (`aria-label`) for the floating menu element itself. */\n  menuLabel?: string;\n  /** Classes applied to the wrapper. */\n  className?: string;\n  /** Classes applied to the floating menu. */\n  menuClassName?: string;\n};\n\n/**\n * A trigger + floating menu. Flat `items` render as a single list; an item with\n * `children` opens a flyout submenu. The FloatingTree lets every level cooperate\n * on focus and dismissal, so selecting any leaf closes the whole menu.\n */\nexport function DropdownMenu(props: DropdownMenuProps) {\n  return (\n    <FloatingTree>\n      <DropdownMenuRoot {...props} />\n    </FloatingTree>\n  );\n}\n\nfunction DropdownMenuRoot({\n  label,\n  icon,\n  hideChevron = false,\n  variant = \"outline\",\n  size = \"sm\",\n  trigger,\n  items,\n  children,\n  header,\n  footer,\n  align = \"right\",\n  onOpenChange,\n  title,\n  menuLabel,\n  className,\n  menuClassName,\n}: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const floatingZ = useFloatingZIndex();\n  const tree = useFloatingTree();\n  const nodeId = useFloatingNodeId();\n  const elementsRef = useRef<Array<HTMLElement | null>>([]);\n\n  const onOpenChangeRef = useRef(onOpenChange);\n  onOpenChangeRef.current = onOpenChange;\n  useEffect(() => {\n    onOpenChangeRef.current?.(open);\n  }, [open]);\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    // nodeId is always defined inside the FloatingTree; guard for the type only.\n    ...(nodeId ? { nodeId } : {}),\n    open,\n    onOpenChange: setOpen,\n    // bottom-end / bottom-start reproduce the previous right/left alignment.\n    placement: align === \"right\" ? \"bottom-end\" : \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    // offset(4) ≈ the previous mt-1; flip opens upward at the bottom edge and\n    // shift slides the menu back on-screen at the horizontal edges.\n    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n\n  const click = useClick(context);\n  // useDismiss is React-tree aware: a press inside anything rendered through the\n  // menu's `children` render-prop — including a Modal that portals to\n  // document.body — propagates via React's synthetic events to the floating\n  // element and counts as \"inside\", so it won't dismiss the menu (which would\n  // unmount that child Modal). A Modal owned by a sibling/parent instead of this\n  // menu correctly does dismiss the menu, which is harmless since closing the\n  // menu does not unmount a Modal it doesn't own.\n  const dismiss = useDismiss(context, { escapeKey: false });\n  const role = useRole(context, { role: \"menu\" });\n  const listNav = useListNavigation(context, {\n    listRef: elementsRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    click,\n    dismiss,\n    role,\n    listNav,\n  ]);\n\n  const closeMenu = () => {\n    setOpen(false);\n    if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();\n  };\n  useEscapeLayer(open, closeMenu);\n\n  // Selecting any leaf (at any depth) emits a tree-wide \"click\"; the root closes\n  // and restores focus to the trigger.\n  const closeMenuRef = useRef(closeMenu);\n  closeMenuRef.current = closeMenu;\n  useEffect(() => {\n    if (!tree) return;\n    const onTreeClick = () => closeMenuRef.current();\n    tree.events.on(\"click\", onTreeClick);\n    return () => tree.events.off(\"click\", onTreeClick);\n  }, [tree]);\n\n  return (\n    <FloatingNode id={nodeId}>\n      <div className={cn(\"relative inline-flex\", className)}>\n        {trigger ? (\n          <span\n            ref={refs.setReference}\n            className=\"inline-flex\"\n            aria-haspopup=\"menu\"\n            aria-expanded={open}\n            {...getReferenceProps()}\n          >\n            {trigger}\n          </span>\n        ) : (\n          <Button\n            ref={refs.setReference as React.Ref<HTMLButtonElement>}\n            variant={variant}\n            size={size}\n            title={title}\n            aria-haspopup=\"menu\"\n            aria-expanded={open}\n            {...getReferenceProps()}\n          >\n            {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n            {label}\n            {!hideChevron && <Icon icon={UiChevronDown} />}\n          </Button>\n        )}\n        {open && (\n          <FloatingPortal>\n            <FloatingFocusManager context={context} modal={false} closeOnFocusOut={false}>\n              <div\n                ref={refs.setFloating}\n                role=\"menu\"\n                aria-label={menuLabel}\n                style={{ ...floatingStyles, zIndex: floatingZ }}\n                className={cn(MENU_POPOVER_CLASS, menuClassName)}\n                {...getFloatingProps()}\n              >\n                {header != null && (\n                  <div className=\"border-b border-border px-3 py-1.5\">{header}</div>\n                )}\n                {children ? (\n                  children(closeMenu)\n                ) : (\n                  <MenuContext.Provider\n                    value={{\n                      getItemProps,\n                      activeIndex,\n                      setActiveIndex,\n                      setHasFocusInside: () => {},\n                      isOpen: open,\n                    }}\n                  >\n                    <FloatingList elementsRef={elementsRef}>\n                      <MenuItemList items={items ?? []} />\n                    </FloatingList>\n                  </MenuContext.Provider>\n                )}\n                {footer != null && (\n                  <div className=\"border-t border-border px-3 py-1.5\">{footer}</div>\n                )}\n              </div>\n            </FloatingFocusManager>\n          </FloatingPortal>\n        )}\n      </div>\n    </FloatingNode>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.js","sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingList,\n  FloatingNode,\n  FloatingPortal,\n  FloatingTree,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useFloatingNodeId,\n  useFloatingTree,\n  useInteractions,\n  useListNavigation,\n  useRole,\n} from \"@floating-ui/react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"../components/button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\nimport { MENU_POPOVER_CLASS, MenuContext } from \"./dropdownMenuContext\";\nimport { MenuItemList } from \"./DropdownMenuSubmenu\";\nimport { useEscapeLayer, useFloatingZIndex } from \"./modalStack\";\n\nexport type DropdownMenuItem = {\n  /** Visible label. */\n  label: ReactNode;\n  /** Called when the item is chosen. Ignored when the item has `children`. */\n  onSelect: () => void;\n  /** Iconify name or imported icon component rendered before the label. */\n  icon?: string | StaticIconComponent;\n  /** CSS colour applied to this item's icon (the glyph fills `currentColor`). */\n  iconColor?: string;\n  /**\n   * Section header. A non-interactive header renders above the first item of\n   * each contiguous group — provide items pre-sorted by `group`. Items without\n   * a `group` render no header.\n   */\n  group?: string;\n  /** Browser tooltip for the item. */\n  title?: string;\n  /** Disable selection. */\n  disabled?: boolean;\n  /**\n   * Nested submenu items. When present the item becomes a submenu trigger: it\n   * opens a flyout of `children` (recursively) on hover / click / ArrowRight\n   * instead of firing `onSelect`.\n   */\n  children?: DropdownMenuItem[];\n};\n\nexport type DropdownMenuProps = {\n  /** Trigger label. Ignored when `trigger` is provided. */\n  label?: ReactNode;\n  /** Icon shown before the trigger label. Ignored when `trigger` is provided. */\n  icon?: string | StaticIconComponent;\n  /** Hide the trailing chevron on the default trigger. */\n  hideChevron?: boolean;\n  /** Variant forwarded to the default Button trigger. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the default Button trigger. */\n  size?: ButtonProps[\"size\"];\n  /** Fully custom trigger. Receives no props; the menu wraps it with open state. */\n  trigger?: ReactNode;\n  /** Declarative menu items. Provide this or `children`, not both. */\n  items?: DropdownMenuItem[];\n  /** Custom menu content. Use `closeMenu` to dismiss after a selection. */\n  children?: (closeMenu: () => void) => ReactNode;\n  /** Rendered at the top of the menu, above the items/children. */\n  header?: ReactNode;\n  /** Rendered at the bottom of the menu, below the items/children (e.g. a \"Show more…\" link). */\n  footer?: ReactNode;\n  /** Horizontal alignment of the menu relative to the trigger. */\n  align?: \"left\" | \"right\";\n  /** Notified whenever the menu opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Browser tooltip / accessible label for the default trigger. */\n  title?: string;\n  /** Accessible label (`aria-label`) for the floating menu element itself. */\n  menuLabel?: string;\n  /** Classes applied to the wrapper. */\n  className?: string;\n  /** Classes applied to the floating menu. */\n  menuClassName?: string;\n};\n\n/**\n * A trigger + floating menu. Flat `items` render as a single list; an item with\n * `children` opens a flyout submenu. The FloatingTree lets every level cooperate\n * on focus and dismissal, so selecting any leaf closes the whole menu.\n */\nexport function DropdownMenu(props: DropdownMenuProps) {\n  return (\n    <FloatingTree>\n      <DropdownMenuRoot {...props} />\n    </FloatingTree>\n  );\n}\n\nfunction DropdownMenuRoot({\n  label,\n  icon,\n  hideChevron = false,\n  variant = \"outline\",\n  size = \"sm\",\n  trigger,\n  items,\n  children,\n  header,\n  footer,\n  align = \"right\",\n  onOpenChange,\n  title,\n  menuLabel,\n  className,\n  menuClassName,\n}: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const floatingZ = useFloatingZIndex();\n  const tree = useFloatingTree();\n  const nodeId = useFloatingNodeId();\n  const elementsRef = useRef<Array<HTMLElement | null>>([]);\n\n  const onOpenChangeRef = useRef(onOpenChange);\n  onOpenChangeRef.current = onOpenChange;\n  useEffect(() => {\n    onOpenChangeRef.current?.(open);\n  }, [open]);\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    // nodeId is always defined inside the FloatingTree; guard for the type only.\n    ...(nodeId ? { nodeId } : {}),\n    open,\n    onOpenChange: setOpen,\n    // bottom-end / bottom-start reproduce the previous right/left alignment.\n    placement: align === \"right\" ? \"bottom-end\" : \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    // offset(4) ≈ the previous mt-1; flip opens upward at the bottom edge and\n    // shift slides the menu back on-screen at the horizontal edges.\n    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n\n  const click = useClick(context);\n  // useDismiss is React-tree aware: a press inside anything rendered through the\n  // menu's `children` render-prop — including a Modal that portals to\n  // document.body — propagates via React's synthetic events to the floating\n  // element and counts as \"inside\", so it won't dismiss the menu (which would\n  // unmount that child Modal). A Modal owned by a sibling/parent instead of this\n  // menu correctly does dismiss the menu, which is harmless since closing the\n  // menu does not unmount a Modal it doesn't own.\n  const dismiss = useDismiss(context, { escapeKey: false });\n  const role = useRole(context, { role: \"menu\" });\n  const listNav = useListNavigation(context, {\n    listRef: elementsRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(\n    [click, dismiss, role, listNav],\n  );\n\n  const closeMenu = () => {\n    setOpen(false);\n    if (refs.domReference.current instanceof HTMLElement)\n      refs.domReference.current.focus();\n  };\n  useEscapeLayer(open, closeMenu);\n\n  // Selecting any leaf (at any depth) emits a tree-wide \"click\"; the root closes\n  // and restores focus to the trigger.\n  const closeMenuRef = useRef(closeMenu);\n  closeMenuRef.current = closeMenu;\n  useEffect(() => {\n    if (!tree) return;\n    const onTreeClick = () => closeMenuRef.current();\n    tree.events.on(\"click\", onTreeClick);\n    return () => tree.events.off(\"click\", onTreeClick);\n  }, [tree]);\n\n  return (\n    <FloatingNode id={nodeId}>\n      <div className={cn(\"relative inline-flex\", className)}>\n        {trigger ? (\n          <span\n            ref={refs.setReference}\n            className=\"inline-flex\"\n            aria-haspopup=\"menu\"\n            aria-expanded={open}\n            {...getReferenceProps()}\n          >\n            {trigger}\n          </span>\n        ) : (\n          <Button\n            ref={refs.setReference as React.Ref<HTMLButtonElement>}\n            variant={variant}\n            size={size}\n            title={title}\n            aria-haspopup=\"menu\"\n            aria-expanded={open}\n            {...getReferenceProps()}\n          >\n            {icon && (\n              <Icon\n                {...(typeof icon === \"string\" ? { name: icon } : { icon })}\n              />\n            )}\n            {label}\n            {!hideChevron && <Icon icon={UiChevronDown} />}\n          </Button>\n        )}\n        {open && (\n          <FloatingPortal>\n            <FloatingFocusManager\n              context={context}\n              modal={false}\n              closeOnFocusOut={false}\n            >\n              <div\n                ref={refs.setFloating}\n                {...getFloatingProps()}\n                role=\"menu\"\n                aria-label={menuLabel}\n                style={{ ...floatingStyles, zIndex: floatingZ }}\n                className={cn(MENU_POPOVER_CLASS, menuClassName)}\n              >\n                {header != null && (\n                  <div className=\"border-b border-border px-3 py-1.5\">\n                    {header}\n                  </div>\n                )}\n                {children ? (\n                  children(closeMenu)\n                ) : (\n                  <MenuContext.Provider\n                    value={{\n                      getItemProps,\n                      activeIndex,\n                      setActiveIndex,\n                      setHasFocusInside: () => {},\n                      isOpen: open,\n                    }}\n                  >\n                    <FloatingList elementsRef={elementsRef}>\n                      <MenuItemList items={items ?? []} />\n                    </FloatingList>\n                  </MenuContext.Provider>\n                )}\n                {footer != null && (\n                  <div className=\"border-t border-border px-3 py-1.5\">\n                    {footer}\n                  </div>\n                )}\n              </div>\n            </FloatingFocusManager>\n          </FloatingPortal>\n        )}\n      </div>\n    </FloatingNode>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/rpc/FilterForm.cjs

@@ -23,21 +23,27 @@ function FilterForm({
   emptyMessage = "This operation does not require input.",
   isSubmitting = false,
   className,
+  formId,
+  showSubmit = true,
+  excludedParameterNames = [],
   presentation = "form",
   onSubmit
 }) {
   var _a;
   const resetKey = react.useMemo(
-    () => `${method}:${path}:${JSON.stringify(initialValues)}:${JSON.stringify(lockedValues)}`,
+    () => `${method}:${path}:${JSON.stringify(initialValues)}:${JSON.stringify(
+      lockedValues
+    )}`,
     [initialValues, lockedValues, method, path]
   );
+  const visibleParameters = react.useMemo(
+    () => parameters.filter(
+      (parameter) => !excludedParameterNames.includes(parameter.name)
+    ),
+    [excludedParameterNames, parameters]
+  );
   const [values, setValues] = react.useState(
-    () => formMetadata.buildInitialParameterValues(
-      parameters,
-      method,
-      lockedValues,
-      initialValues
-    )
+    () => formMetadata.buildInitialParameterValues(parameters, method, lockedValues, initialValues)
   );
   const [error, setError] = react.useState("");
   const debouncedValues = formMetadata.useDebouncedRecord(values, 250);
@@ -62,7 +68,7 @@ function FilterForm({
   const { data: spec } = useOperations.useOpenAPI(client);
   const filterShapes = (_a = spec == null ? void 0 : spec.components) == null ? void 0 : _a["x-clicky-filters"];
   const formConfig = react.useMemo(
-    () => formMetadata.parametersToFormConfig(parameters, values, setValues, {
+    () => formMetadata.parametersToFormConfig(visibleParameters, values, setValues, {
       lookup: lookupQuery.data,
       components: filterShapes,
       lockedValues,
@@ -73,7 +79,7 @@ function FilterForm({
       hideLocked,
       lockedValues,
       lookupQuery.data,
-      parameters,
+      visibleParameters,
       values
     ]
   );
@@ -127,7 +133,7 @@ function FilterForm({
     setError("");
     void onSubmit(submittedValues);
   }, [autoSubmit, debouncedValues, lockedValues, onSubmit, parameters]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "space-y-3", onSubmit: handleSubmit, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("form", { id: formId, className: "space-y-3", onSubmit: handleSubmit, children: [
     hasFields ? presentation === "filter-bar" ? /* @__PURE__ */ jsxRuntime.jsx(
       FilterBar.FilterBar,
       {
@@ -151,12 +157,21 @@ function FilterForm({
         isSubmitting,
         submitLabel,
         submittingLabel,
+        showSubmit,
         ...formConfig.timeRange ? { timeRange: formConfig.timeRange } : {},
         ...className ? { className } : {}
       }
     ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: emptyMessage }),
-      /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "button", onClick: handleSubmit, disabled: isSubmitting, children: isSubmitting ? submittingLabel : submitLabel })
+      showSubmit ? /* @__PURE__ */ jsxRuntime.jsx(
+        button.Button,
+        {
+          type: "button",
+          onClick: handleSubmit,
+          disabled: isSubmitting,
+          children: isSubmitting ? submittingLabel : submitLabel
+        }
+      ) : null
     ] }),
     error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive", children: error })
   ] });

package/dist/rpc/FilterForm.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterForm.cjs","sources":["../../src/rpc/FilterForm.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState, type FormEvent } from \"react\";\nimport { keepPreviousData, useQuery } from \"@tanstack/react-query\";\nimport { Button } from \"../components/button\";\nimport { FilterBar } from \"../components/FilterBar\";\nimport {\n  packLookupParameterValues,\n  parametersToFormConfig,\n  pruneParameterValues,\n  buildInitialParameterValues,\n  titleCase,\n  useDebouncedRecord,\n  type ParameterValues,\n} from \"./formMetadata\";\nimport type { OpenAPIParameter } from \"./types\";\nimport { useOpenAPI, type OperationsApiClient } from \"./useOperations\";\nimport { ParameterGrid } from \"./FilterFormFields\";\n\nexport type FilterFormProps = {\n  client: OperationsApiClient;\n  path: string;\n  method: string;\n  parameters?: OpenAPIParameter[];\n  initialValues?: ParameterValues | undefined;\n  lockedValues?: ParameterValues | undefined;\n  hideLocked?: boolean | undefined;\n  enableLookup?: boolean | undefined;\n  autoSubmit?: boolean | undefined;\n  submitLabel?: string | undefined;\n  submittingLabel?: string | undefined;\n  emptyMessage?: string | undefined;\n  isSubmitting?: boolean | undefined;\n  className?: string | undefined;\n  /** Renders operation controls as form rows or the shared table FilterBar. */\n  presentation?: \"form\" | \"filter-bar\" | undefined;\n  onSubmit: (values: ParameterValues) => void | Promise<void>;\n};\n\nexport function FilterForm({\n  client,\n  path,\n  method,\n  parameters = [],\n  initialValues = {},\n  lockedValues = {},\n  hideLocked = false,\n  enableLookup = method.toUpperCase() === \"GET\",\n  autoSubmit = false,\n  submitLabel = \"Execute request\",\n  submittingLabel = \"Executing…\",\n  emptyMessage = \"This operation does not require input.\",\n  isSubmitting = false,\n  className,\n  presentation = \"form\",\n  onSubmit,\n}: FilterFormProps) {\n  const resetKey = useMemo(\n    () =>\n      `${method}:${path}:${JSON.stringify(initialValues)}:${JSON.stringify(lockedValues)}`,\n    [initialValues, lockedValues, method, path],\n  );\n  const [values, setValues] = useState<ParameterValues>(() =>\n    buildInitialParameterValues(\n      parameters,\n      method,\n      lockedValues,\n      initialValues,\n    ),\n  );\n  const [error, setError] = useState(\"\");\n  const debouncedValues = useDebouncedRecord(values, 250);\n  const lastAutoSubmitted = useRef<string | null>(null);\n  const lookupParameters = useMemo(\n    () => packLookupParameterValues(debouncedValues, parameters),\n    [debouncedValues, parameters],\n  );\n\n  const lookupQuery = useQuery({\n    queryKey: [\"filter-form-lookup\", method, path, lookupParameters],\n    queryFn: async () =>\n      (await client.lookupFilters?.(path, method, lookupParameters, {\n        Accept: \"application/json+clicky\",\n      })) ?? { filters: {} },\n    enabled:\n      enableLookup &&\n      !!client.lookupFilters &&\n      parameters.some((param) => param.in === \"query\"),\n    placeholderData: keepPreviousData,\n    staleTime: 30_000,\n    retry: 0,\n  });\n\n  // Shapes come from the spec so a control keeps its identity while the lookup\n  // that fills it is in flight; see parametersToFormConfig.\n  const { data: spec } = useOpenAPI(client);\n  const filterShapes = spec?.components?.[\"x-clicky-filters\"];\n\n  const formConfig = useMemo(\n    () =>\n      parametersToFormConfig(parameters, values, setValues, {\n        lookup: lookupQuery.data,\n        components: filterShapes,\n        lockedValues,\n        hideLocked,\n      }),\n    [\n      filterShapes,\n      hideLocked,\n      lockedValues,\n      lookupQuery.data,\n      parameters,\n      values,\n    ],\n  );\n\n  const hasFields =\n    formConfig.filters.length > 0 ||\n    formConfig.search != null ||\n    formConfig.timeRange != null;\n\n  async function handleSubmit(event?: FormEvent) {\n    event?.preventDefault();\n\n    const missingRequired = parameters.filter((param) => {\n      if (!param.required) return false;\n      const value = lockedValues[param.name] ?? values[param.name] ?? \"\";\n      return value.trim() === \"\";\n    });\n\n    if (missingRequired.length > 0) {\n      setError(\n        `Missing required fields: ${missingRequired.map((param) => titleCase(param.name)).join(\", \")}`,\n      );\n      return;\n    }\n\n    setError(\"\");\n    await onSubmit(pruneParameterValues(values));\n  }\n\n  useEffect(() => {\n    setValues(\n      buildInitialParameterValues(\n        parameters,\n        method,\n        lockedValues,\n        initialValues,\n      ),\n    );\n    setError(\"\");\n    lastAutoSubmitted.current = null;\n  }, [resetKey]);\n\n  useEffect(() => {\n    if (!autoSubmit) {\n      return;\n    }\n\n    const missingRequired = parameters.filter((param) => {\n      if (!param.required) return false;\n      const value =\n        lockedValues[param.name] ?? debouncedValues[param.name] ?? \"\";\n      return value.trim() === \"\";\n    });\n    if (missingRequired.length > 0) {\n      return;\n    }\n\n    const submittedValues = pruneParameterValues(debouncedValues);\n    const signature = JSON.stringify(submittedValues);\n    if (lastAutoSubmitted.current === signature) {\n      return;\n    }\n\n    lastAutoSubmitted.current = signature;\n    setError(\"\");\n    void onSubmit(submittedValues);\n  }, [autoSubmit, debouncedValues, lockedValues, onSubmit, parameters]);\n\n  return (\n    <form className=\"space-y-3\" onSubmit={handleSubmit}>\n      {hasFields ? (\n        presentation === \"filter-bar\" ? (\n          <FilterBar\n            autoSubmit={autoSubmit}\n            filters={formConfig.filters}\n            overflowMode=\"wrap\"\n            {...(formConfig.search ? { search: formConfig.search } : {})}\n            {...(formConfig.timeRange\n              ? { timeRange: formConfig.timeRange }\n              : {})}\n            {...(!autoSubmit\n              ? {\n                  onApply: () => void handleSubmit(),\n                  applyLabel: submitLabel,\n                  isPending: isSubmitting,\n                }\n              : {})}\n            {...(className ? { className } : {})}\n          />\n        ) : (\n          <ParameterGrid\n            autoSubmit={autoSubmit}\n            filters={formConfig.filters}\n            isSubmitting={isSubmitting}\n            submitLabel={submitLabel}\n            submittingLabel={submittingLabel}\n            {...(formConfig.timeRange\n              ? { timeRange: formConfig.timeRange }\n              : {})}\n            {...(className ? { className } : {})}\n          />\n        )\n      ) : (\n        <div className=\"flex items-center justify-between gap-4\">\n          <p className=\"text-sm text-muted-foreground\">{emptyMessage}</p>\n          <Button type=\"button\" onClick={handleSubmit} disabled={isSubmitting}>\n            {isSubmitting ? submittingLabel : submitLabel}\n          </Button>\n        </div>\n      )}\n\n      {error && (\n        <div className=\"rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive\">\n          {error}\n        </div>\n      )}\n    </form>\n  );\n}\n"],"names":["useMemo","useState","buildInitialParameterValues","useDebouncedRecord","useRef","packLookupParameterValues","useQuery","_a","keepPreviousData","useOpenAPI","parametersToFormConfig","titleCase","pruneParameterValues","useEffect","jsxs","jsx","FilterBar","ParameterGrid","Button"],"mappings":"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"}
+{"version":3,"file":"FilterForm.cjs","sources":["../../src/rpc/FilterForm.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState, type FormEvent } from \"react\";\nimport { keepPreviousData, useQuery } from \"@tanstack/react-query\";\nimport { Button } from \"../components/button\";\nimport { FilterBar } from \"../components/FilterBar\";\nimport {\n  packLookupParameterValues,\n  parametersToFormConfig,\n  pruneParameterValues,\n  buildInitialParameterValues,\n  titleCase,\n  useDebouncedRecord,\n  type ParameterValues,\n} from \"./formMetadata\";\nimport type { OpenAPIParameter } from \"./types\";\nimport { useOpenAPI, type OperationsApiClient } from \"./useOperations\";\nimport { ParameterGrid } from \"./FilterFormFields\";\n\nexport type FilterFormProps = {\n  client: OperationsApiClient;\n  path: string;\n  method: string;\n  parameters?: OpenAPIParameter[];\n  initialValues?: ParameterValues | undefined;\n  lockedValues?: ParameterValues | undefined;\n  hideLocked?: boolean | undefined;\n  enableLookup?: boolean | undefined;\n  autoSubmit?: boolean | undefined;\n  submitLabel?: string | undefined;\n  submittingLabel?: string | undefined;\n  emptyMessage?: string | undefined;\n  isSubmitting?: boolean | undefined;\n  className?: string | undefined;\n  formId?: string | undefined;\n  showSubmit?: boolean | undefined;\n  excludedParameterNames?: string[] | undefined;\n  /** Renders operation controls as form rows or the shared table FilterBar. */\n  presentation?: \"form\" | \"filter-bar\" | undefined;\n  onSubmit: (values: ParameterValues) => void | Promise<void>;\n};\n\nexport function FilterForm({\n  client,\n  path,\n  method,\n  parameters = [],\n  initialValues = {},\n  lockedValues = {},\n  hideLocked = false,\n  enableLookup = method.toUpperCase() === \"GET\",\n  autoSubmit = false,\n  submitLabel = \"Execute request\",\n  submittingLabel = \"Executing…\",\n  emptyMessage = \"This operation does not require input.\",\n  isSubmitting = false,\n  className,\n  formId,\n  showSubmit = true,\n  excludedParameterNames = [],\n  presentation = \"form\",\n  onSubmit,\n}: FilterFormProps) {\n  const resetKey = useMemo(\n    () =>\n      `${method}:${path}:${JSON.stringify(initialValues)}:${JSON.stringify(\n        lockedValues\n      )}`,\n    [initialValues, lockedValues, method, path]\n  );\n  const visibleParameters = useMemo(\n    () =>\n      parameters.filter(\n        (parameter) => !excludedParameterNames.includes(parameter.name)\n      ),\n    [excludedParameterNames, parameters]\n  );\n  const [values, setValues] = useState<ParameterValues>(() =>\n    buildInitialParameterValues(parameters, method, lockedValues, initialValues)\n  );\n  const [error, setError] = useState(\"\");\n  const debouncedValues = useDebouncedRecord(values, 250);\n  const lastAutoSubmitted = useRef<string | null>(null);\n  const lookupParameters = useMemo(\n    () => packLookupParameterValues(debouncedValues, parameters),\n    [debouncedValues, parameters]\n  );\n\n  const lookupQuery = useQuery({\n    queryKey: [\"filter-form-lookup\", method, path, lookupParameters],\n    queryFn: async () =>\n      (await client.lookupFilters?.(path, method, lookupParameters, {\n        Accept: \"application/json+clicky\",\n      })) ?? { filters: {} },\n    enabled:\n      enableLookup &&\n      !!client.lookupFilters &&\n      parameters.some((param) => param.in === \"query\"),\n    placeholderData: keepPreviousData,\n    staleTime: 30_000,\n    retry: 0,\n  });\n\n  // Shapes come from the spec so a control keeps its identity while the lookup\n  // that fills it is in flight; see parametersToFormConfig.\n  const { data: spec } = useOpenAPI(client);\n  const filterShapes = spec?.components?.[\"x-clicky-filters\"];\n\n  const formConfig = useMemo(\n    () =>\n      parametersToFormConfig(visibleParameters, values, setValues, {\n        lookup: lookupQuery.data,\n        components: filterShapes,\n        lockedValues,\n        hideLocked,\n      }),\n    [\n      filterShapes,\n      hideLocked,\n      lockedValues,\n      lookupQuery.data,\n      visibleParameters,\n      values,\n    ]\n  );\n\n  const hasFields =\n    formConfig.filters.length > 0 ||\n    formConfig.search != null ||\n    formConfig.timeRange != null;\n\n  async function handleSubmit(event?: FormEvent) {\n    event?.preventDefault();\n\n    const missingRequired = parameters.filter((param) => {\n      if (!param.required) return false;\n      const value = lockedValues[param.name] ?? values[param.name] ?? \"\";\n      return value.trim() === \"\";\n    });\n\n    if (missingRequired.length > 0) {\n      setError(\n        `Missing required fields: ${missingRequired\n          .map((param) => titleCase(param.name))\n          .join(\", \")}`\n      );\n      return;\n    }\n\n    setError(\"\");\n    await onSubmit(pruneParameterValues(values));\n  }\n\n  useEffect(() => {\n    setValues(\n      buildInitialParameterValues(\n        parameters,\n        method,\n        lockedValues,\n        initialValues\n      )\n    );\n    setError(\"\");\n    lastAutoSubmitted.current = null;\n  }, [resetKey]);\n\n  useEffect(() => {\n    if (!autoSubmit) {\n      return;\n    }\n\n    const missingRequired = parameters.filter((param) => {\n      if (!param.required) return false;\n      const value =\n        lockedValues[param.name] ?? debouncedValues[param.name] ?? \"\";\n      return value.trim() === \"\";\n    });\n    if (missingRequired.length > 0) {\n      return;\n    }\n\n    const submittedValues = pruneParameterValues(debouncedValues);\n    const signature = JSON.stringify(submittedValues);\n    if (lastAutoSubmitted.current === signature) {\n      return;\n    }\n\n    lastAutoSubmitted.current = signature;\n    setError(\"\");\n    void onSubmit(submittedValues);\n  }, [autoSubmit, debouncedValues, lockedValues, onSubmit, parameters]);\n\n  return (\n    <form id={formId} className=\"space-y-3\" onSubmit={handleSubmit}>\n      {hasFields ? (\n        presentation === \"filter-bar\" ? (\n          <FilterBar\n            autoSubmit={autoSubmit}\n            filters={formConfig.filters}\n            overflowMode=\"wrap\"\n            {...(formConfig.search ? { search: formConfig.search } : {})}\n            {...(formConfig.timeRange\n              ? { timeRange: formConfig.timeRange }\n              : {})}\n            {...(!autoSubmit\n              ? {\n                  onApply: () => void handleSubmit(),\n                  applyLabel: submitLabel,\n                  isPending: isSubmitting,\n                }\n              : {})}\n            {...(className ? { className } : {})}\n          />\n        ) : (\n          <ParameterGrid\n            autoSubmit={autoSubmit}\n            filters={formConfig.filters}\n            isSubmitting={isSubmitting}\n            submitLabel={submitLabel}\n            submittingLabel={submittingLabel}\n            showSubmit={showSubmit}\n            {...(formConfig.timeRange\n              ? { timeRange: formConfig.timeRange }\n              : {})}\n            {...(className ? { className } : {})}\n          />\n        )\n      ) : (\n        <div className=\"flex items-center justify-between gap-4\">\n          <p className=\"text-sm text-muted-foreground\">{emptyMessage}</p>\n          {showSubmit ? (\n            <Button\n              type=\"button\"\n              onClick={handleSubmit}\n              disabled={isSubmitting}\n            >\n              {isSubmitting ? submittingLabel : submitLabel}\n            </Button>\n          ) : null}\n        </div>\n      )}\n\n      {error && (\n        <div className=\"rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive\">\n          {error}\n        </div>\n      )}\n    </form>\n  );\n}\n"],"names":["useMemo","useState","buildInitialParameterValues","useDebouncedRecord","useRef","packLookupParameterValues","useQuery","_a","keepPreviousData","useOpenAPI","parametersToFormConfig","titleCase","pruneParameterValues","useEffect","jsx","FilterBar","ParameterGrid","jsxs","Button"],"mappings":"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"}

package/dist/rpc/FilterForm.d.ts

@@ -16,9 +16,12 @@ export type FilterFormProps = {
     emptyMessage?: string | undefined;
     isSubmitting?: boolean | undefined;
     className?: string | undefined;
+    formId?: string | undefined;
+    showSubmit?: boolean | undefined;
+    excludedParameterNames?: string[] | undefined;
     /** Renders operation controls as form rows or the shared table FilterBar. */
     presentation?: "form" | "filter-bar" | undefined;
     onSubmit: (values: ParameterValues) => void | Promise<void>;
 };
-export declare function FilterForm({ client, path, method, parameters, initialValues, lockedValues, hideLocked, enableLookup, autoSubmit, submitLabel, submittingLabel, emptyMessage, isSubmitting, className, presentation, onSubmit, }: FilterFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilterForm({ client, path, method, parameters, initialValues, lockedValues, hideLocked, enableLookup, autoSubmit, submitLabel, submittingLabel, emptyMessage, isSubmitting, className, formId, showSubmit, excludedParameterNames, presentation, onSubmit, }: FilterFormProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=FilterForm.d.ts.map

package/dist/rpc/FilterForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterForm.d.ts","sourceRoot":"","sources":["../../src/rpc/FilterForm.tsx"],"names":[],"mappings":"AAIA,OAAO,EAOL,KAAK,eAAe,EACrB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAc,KAAK,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGvE,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,mBAAmB,CAAC;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAChC,aAAa,CAAC,EAAE,eAAe,GAAG,SAAS,CAAC;IAC5C,YAAY,CAAC,EAAE,eAAe,GAAG,SAAS,CAAC;IAC3C,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS,CAAC;IACjD,QAAQ,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7D,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,IAAI,EACJ,MAAM,EACN,UAAe,EACf,aAAkB,EAClB,YAAiB,EACjB,UAAkB,EAClB,YAA6C,EAC7C,UAAkB,EAClB,WAA+B,EAC/B,eAA8B,EAC9B,YAAuD,EACvD,YAAoB,EACpB,SAAS,EACT,YAAqB,EACrB,QAAQ,GACT,EAAE,eAAe,2CA8KjB"}
+{"version":3,"file":"FilterForm.d.ts","sourceRoot":"","sources":["../../src/rpc/FilterForm.tsx"],"names":[],"mappings":"AAIA,OAAO,EAOL,KAAK,eAAe,EACrB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAc,KAAK,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGvE,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,mBAAmB,CAAC;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAChC,aAAa,CAAC,EAAE,eAAe,GAAG,SAAS,CAAC;IAC5C,YAAY,CAAC,EAAE,eAAe,GAAG,SAAS,CAAC;IAC3C,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACjC,sBAAsB,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAC9C,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS,CAAC;IACjD,QAAQ,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7D,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,IAAI,EACJ,MAAM,EACN,UAAe,EACf,aAAkB,EAClB,YAAiB,EACjB,UAAkB,EAClB,YAA6C,EAC7C,UAAkB,EAClB,WAA+B,EAC/B,eAA8B,EAC9B,YAAuD,EACvD,YAAoB,EACpB,SAAS,EACT,MAAM,EACN,UAAiB,EACjB,sBAA2B,EAC3B,YAAqB,EACrB,QAAQ,GACT,EAAE,eAAe,2CA2LjB"}

package/dist/rpc/FilterForm.js

@@ -21,21 +21,27 @@ function FilterForm({
   emptyMessage = "This operation does not require input.",
   isSubmitting = false,
   className,
+  formId,
+  showSubmit = true,
+  excludedParameterNames = [],
   presentation = "form",
   onSubmit
 }) {
   var _a;
   const resetKey = useMemo(
-    () => `${method}:${path}:${JSON.stringify(initialValues)}:${JSON.stringify(lockedValues)}`,
+    () => `${method}:${path}:${JSON.stringify(initialValues)}:${JSON.stringify(
+      lockedValues
+    )}`,
     [initialValues, lockedValues, method, path]
   );
+  const visibleParameters = useMemo(
+    () => parameters.filter(
+      (parameter) => !excludedParameterNames.includes(parameter.name)
+    ),
+    [excludedParameterNames, parameters]
+  );
   const [values, setValues] = useState(
-    () => buildInitialParameterValues(
-      parameters,
-      method,
-      lockedValues,
-      initialValues
-    )
+    () => buildInitialParameterValues(parameters, method, lockedValues, initialValues)
   );
   const [error, setError] = useState("");
   const debouncedValues = useDebouncedRecord(values, 250);
@@ -60,7 +66,7 @@ function FilterForm({
   const { data: spec } = useOpenAPI(client);
   const filterShapes = (_a = spec == null ? void 0 : spec.components) == null ? void 0 : _a["x-clicky-filters"];
   const formConfig = useMemo(
-    () => parametersToFormConfig(parameters, values, setValues, {
+    () => parametersToFormConfig(visibleParameters, values, setValues, {
       lookup: lookupQuery.data,
       components: filterShapes,
       lockedValues,
@@ -71,7 +77,7 @@ function FilterForm({
       hideLocked,
       lockedValues,
       lookupQuery.data,
-      parameters,
+      visibleParameters,
       values
     ]
   );
@@ -125,7 +131,7 @@ function FilterForm({
     setError("");
     void onSubmit(submittedValues);
   }, [autoSubmit, debouncedValues, lockedValues, onSubmit, parameters]);
-  return /* @__PURE__ */ jsxs("form", { className: "space-y-3", onSubmit: handleSubmit, children: [
+  return /* @__PURE__ */ jsxs("form", { id: formId, className: "space-y-3", onSubmit: handleSubmit, children: [
     hasFields ? presentation === "filter-bar" ? /* @__PURE__ */ jsx(
       FilterBar,
       {
@@ -149,12 +155,21 @@ function FilterForm({
         isSubmitting,
         submitLabel,
         submittingLabel,
+        showSubmit,
         ...formConfig.timeRange ? { timeRange: formConfig.timeRange } : {},
         ...className ? { className } : {}
       }
     ) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
       /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: emptyMessage }),
-      /* @__PURE__ */ jsx(Button, { type: "button", onClick: handleSubmit, disabled: isSubmitting, children: isSubmitting ? submittingLabel : submitLabel })
+      showSubmit ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          onClick: handleSubmit,
+          disabled: isSubmitting,
+          children: isSubmitting ? submittingLabel : submitLabel
+        }
+      ) : null
     ] }),
     error && /* @__PURE__ */ jsx("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive", children: error })
   ] });

package/dist/rpc/FilterForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterForm.js","sources":["../../src/rpc/FilterForm.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState, type FormEvent } from \"react\";\nimport { keepPreviousData, useQuery } from \"@tanstack/react-query\";\nimport { Button } from \"../components/button\";\nimport { FilterBar } from \"../components/FilterBar\";\nimport {\n  packLookupParameterValues,\n  parametersToFormConfig,\n  pruneParameterValues,\n  buildInitialParameterValues,\n  titleCase,\n  useDebouncedRecord,\n  type ParameterValues,\n} from \"./formMetadata\";\nimport type { OpenAPIParameter } from \"./types\";\nimport { useOpenAPI, type OperationsApiClient } from \"./useOperations\";\nimport { ParameterGrid } from \"./FilterFormFields\";\n\nexport type FilterFormProps = {\n  client: OperationsApiClient;\n  path: string;\n  method: string;\n  parameters?: OpenAPIParameter[];\n  initialValues?: ParameterValues | undefined;\n  lockedValues?: ParameterValues | undefined;\n  hideLocked?: boolean | undefined;\n  enableLookup?: boolean | undefined;\n  autoSubmit?: boolean | undefined;\n  submitLabel?: string | undefined;\n  submittingLabel?: string | undefined;\n  emptyMessage?: string | undefined;\n  isSubmitting?: boolean | undefined;\n  className?: string | undefined;\n  /** Renders operation controls as form rows or the shared table FilterBar. */\n  presentation?: \"form\" | \"filter-bar\" | undefined;\n  onSubmit: (values: ParameterValues) => void | Promise<void>;\n};\n\nexport function FilterForm({\n  client,\n  path,\n  method,\n  parameters = [],\n  initialValues = {},\n  lockedValues = {},\n  hideLocked = false,\n  enableLookup = method.toUpperCase() === \"GET\",\n  autoSubmit = false,\n  submitLabel = \"Execute request\",\n  submittingLabel = \"Executing…\",\n  emptyMessage = \"This operation does not require input.\",\n  isSubmitting = false,\n  className,\n  presentation = \"form\",\n  onSubmit,\n}: FilterFormProps) {\n  const resetKey = useMemo(\n    () =>\n      `${method}:${path}:${JSON.stringify(initialValues)}:${JSON.stringify(lockedValues)}`,\n    [initialValues, lockedValues, method, path],\n  );\n  const [values, setValues] = useState<ParameterValues>(() =>\n    buildInitialParameterValues(\n      parameters,\n      method,\n      lockedValues,\n      initialValues,\n    ),\n  );\n  const [error, setError] = useState(\"\");\n  const debouncedValues = useDebouncedRecord(values, 250);\n  const lastAutoSubmitted = useRef<string | null>(null);\n  const lookupParameters = useMemo(\n    () => packLookupParameterValues(debouncedValues, parameters),\n    [debouncedValues, parameters],\n  );\n\n  const lookupQuery = useQuery({\n    queryKey: [\"filter-form-lookup\", method, path, lookupParameters],\n    queryFn: async () =>\n      (await client.lookupFilters?.(path, method, lookupParameters, {\n        Accept: \"application/json+clicky\",\n      })) ?? { filters: {} },\n    enabled:\n      enableLookup &&\n      !!client.lookupFilters &&\n      parameters.some((param) => param.in === \"query\"),\n    placeholderData: keepPreviousData,\n    staleTime: 30_000,\n    retry: 0,\n  });\n\n  // Shapes come from the spec so a control keeps its identity while the lookup\n  // that fills it is in flight; see parametersToFormConfig.\n  const { data: spec } = useOpenAPI(client);\n  const filterShapes = spec?.components?.[\"x-clicky-filters\"];\n\n  const formConfig = useMemo(\n    () =>\n      parametersToFormConfig(parameters, values, setValues, {\n        lookup: lookupQuery.data,\n        components: filterShapes,\n        lockedValues,\n        hideLocked,\n      }),\n    [\n      filterShapes,\n      hideLocked,\n      lockedValues,\n      lookupQuery.data,\n      parameters,\n      values,\n    ],\n  );\n\n  const hasFields =\n    formConfig.filters.length > 0 ||\n    formConfig.search != null ||\n    formConfig.timeRange != null;\n\n  async function handleSubmit(event?: FormEvent) {\n    event?.preventDefault();\n\n    const missingRequired = parameters.filter((param) => {\n      if (!param.required) return false;\n      const value = lockedValues[param.name] ?? values[param.name] ?? \"\";\n      return value.trim() === \"\";\n    });\n\n    if (missingRequired.length > 0) {\n      setError(\n        `Missing required fields: ${missingRequired.map((param) => titleCase(param.name)).join(\", \")}`,\n      );\n      return;\n    }\n\n    setError(\"\");\n    await onSubmit(pruneParameterValues(values));\n  }\n\n  useEffect(() => {\n    setValues(\n      buildInitialParameterValues(\n        parameters,\n        method,\n        lockedValues,\n        initialValues,\n      ),\n    );\n    setError(\"\");\n    lastAutoSubmitted.current = null;\n  }, [resetKey]);\n\n  useEffect(() => {\n    if (!autoSubmit) {\n      return;\n    }\n\n    const missingRequired = parameters.filter((param) => {\n      if (!param.required) return false;\n      const value =\n        lockedValues[param.name] ?? debouncedValues[param.name] ?? \"\";\n      return value.trim() === \"\";\n    });\n    if (missingRequired.length > 0) {\n      return;\n    }\n\n    const submittedValues = pruneParameterValues(debouncedValues);\n    const signature = JSON.stringify(submittedValues);\n    if (lastAutoSubmitted.current === signature) {\n      return;\n    }\n\n    lastAutoSubmitted.current = signature;\n    setError(\"\");\n    void onSubmit(submittedValues);\n  }, [autoSubmit, debouncedValues, lockedValues, onSubmit, parameters]);\n\n  return (\n    <form className=\"space-y-3\" onSubmit={handleSubmit}>\n      {hasFields ? (\n        presentation === \"filter-bar\" ? (\n          <FilterBar\n            autoSubmit={autoSubmit}\n            filters={formConfig.filters}\n            overflowMode=\"wrap\"\n            {...(formConfig.search ? { search: formConfig.search } : {})}\n            {...(formConfig.timeRange\n              ? { timeRange: formConfig.timeRange }\n              : {})}\n            {...(!autoSubmit\n              ? {\n                  onApply: () => void handleSubmit(),\n                  applyLabel: submitLabel,\n                  isPending: isSubmitting,\n                }\n              : {})}\n            {...(className ? { className } : {})}\n          />\n        ) : (\n          <ParameterGrid\n            autoSubmit={autoSubmit}\n            filters={formConfig.filters}\n            isSubmitting={isSubmitting}\n            submitLabel={submitLabel}\n            submittingLabel={submittingLabel}\n            {...(formConfig.timeRange\n              ? { timeRange: formConfig.timeRange }\n              : {})}\n            {...(className ? { className } : {})}\n          />\n        )\n      ) : (\n        <div className=\"flex items-center justify-between gap-4\">\n          <p className=\"text-sm text-muted-foreground\">{emptyMessage}</p>\n          <Button type=\"button\" onClick={handleSubmit} disabled={isSubmitting}>\n            {isSubmitting ? submittingLabel : submitLabel}\n          </Button>\n        </div>\n      )}\n\n      {error && (\n        <div className=\"rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive\">\n          {error}\n        </div>\n      )}\n    </form>\n  );\n}\n"],"names":["_a"],"mappings":"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"}
+{"version":3,"file":"FilterForm.js","sources":["../../src/rpc/FilterForm.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState, type FormEvent } from \"react\";\nimport { keepPreviousData, useQuery } from \"@tanstack/react-query\";\nimport { Button } from \"../components/button\";\nimport { FilterBar } from \"../components/FilterBar\";\nimport {\n  packLookupParameterValues,\n  parametersToFormConfig,\n  pruneParameterValues,\n  buildInitialParameterValues,\n  titleCase,\n  useDebouncedRecord,\n  type ParameterValues,\n} from \"./formMetadata\";\nimport type { OpenAPIParameter } from \"./types\";\nimport { useOpenAPI, type OperationsApiClient } from \"./useOperations\";\nimport { ParameterGrid } from \"./FilterFormFields\";\n\nexport type FilterFormProps = {\n  client: OperationsApiClient;\n  path: string;\n  method: string;\n  parameters?: OpenAPIParameter[];\n  initialValues?: ParameterValues | undefined;\n  lockedValues?: ParameterValues | undefined;\n  hideLocked?: boolean | undefined;\n  enableLookup?: boolean | undefined;\n  autoSubmit?: boolean | undefined;\n  submitLabel?: string | undefined;\n  submittingLabel?: string | undefined;\n  emptyMessage?: string | undefined;\n  isSubmitting?: boolean | undefined;\n  className?: string | undefined;\n  formId?: string | undefined;\n  showSubmit?: boolean | undefined;\n  excludedParameterNames?: string[] | undefined;\n  /** Renders operation controls as form rows or the shared table FilterBar. */\n  presentation?: \"form\" | \"filter-bar\" | undefined;\n  onSubmit: (values: ParameterValues) => void | Promise<void>;\n};\n\nexport function FilterForm({\n  client,\n  path,\n  method,\n  parameters = [],\n  initialValues = {},\n  lockedValues = {},\n  hideLocked = false,\n  enableLookup = method.toUpperCase() === \"GET\",\n  autoSubmit = false,\n  submitLabel = \"Execute request\",\n  submittingLabel = \"Executing…\",\n  emptyMessage = \"This operation does not require input.\",\n  isSubmitting = false,\n  className,\n  formId,\n  showSubmit = true,\n  excludedParameterNames = [],\n  presentation = \"form\",\n  onSubmit,\n}: FilterFormProps) {\n  const resetKey = useMemo(\n    () =>\n      `${method}:${path}:${JSON.stringify(initialValues)}:${JSON.stringify(\n        lockedValues\n      )}`,\n    [initialValues, lockedValues, method, path]\n  );\n  const visibleParameters = useMemo(\n    () =>\n      parameters.filter(\n        (parameter) => !excludedParameterNames.includes(parameter.name)\n      ),\n    [excludedParameterNames, parameters]\n  );\n  const [values, setValues] = useState<ParameterValues>(() =>\n    buildInitialParameterValues(parameters, method, lockedValues, initialValues)\n  );\n  const [error, setError] = useState(\"\");\n  const debouncedValues = useDebouncedRecord(values, 250);\n  const lastAutoSubmitted = useRef<string | null>(null);\n  const lookupParameters = useMemo(\n    () => packLookupParameterValues(debouncedValues, parameters),\n    [debouncedValues, parameters]\n  );\n\n  const lookupQuery = useQuery({\n    queryKey: [\"filter-form-lookup\", method, path, lookupParameters],\n    queryFn: async () =>\n      (await client.lookupFilters?.(path, method, lookupParameters, {\n        Accept: \"application/json+clicky\",\n      })) ?? { filters: {} },\n    enabled:\n      enableLookup &&\n      !!client.lookupFilters &&\n      parameters.some((param) => param.in === \"query\"),\n    placeholderData: keepPreviousData,\n    staleTime: 30_000,\n    retry: 0,\n  });\n\n  // Shapes come from the spec so a control keeps its identity while the lookup\n  // that fills it is in flight; see parametersToFormConfig.\n  const { data: spec } = useOpenAPI(client);\n  const filterShapes = spec?.components?.[\"x-clicky-filters\"];\n\n  const formConfig = useMemo(\n    () =>\n      parametersToFormConfig(visibleParameters, values, setValues, {\n        lookup: lookupQuery.data,\n        components: filterShapes,\n        lockedValues,\n        hideLocked,\n      }),\n    [\n      filterShapes,\n      hideLocked,\n      lockedValues,\n      lookupQuery.data,\n      visibleParameters,\n      values,\n    ]\n  );\n\n  const hasFields =\n    formConfig.filters.length > 0 ||\n    formConfig.search != null ||\n    formConfig.timeRange != null;\n\n  async function handleSubmit(event?: FormEvent) {\n    event?.preventDefault();\n\n    const missingRequired = parameters.filter((param) => {\n      if (!param.required) return false;\n      const value = lockedValues[param.name] ?? values[param.name] ?? \"\";\n      return value.trim() === \"\";\n    });\n\n    if (missingRequired.length > 0) {\n      setError(\n        `Missing required fields: ${missingRequired\n          .map((param) => titleCase(param.name))\n          .join(\", \")}`\n      );\n      return;\n    }\n\n    setError(\"\");\n    await onSubmit(pruneParameterValues(values));\n  }\n\n  useEffect(() => {\n    setValues(\n      buildInitialParameterValues(\n        parameters,\n        method,\n        lockedValues,\n        initialValues\n      )\n    );\n    setError(\"\");\n    lastAutoSubmitted.current = null;\n  }, [resetKey]);\n\n  useEffect(() => {\n    if (!autoSubmit) {\n      return;\n    }\n\n    const missingRequired = parameters.filter((param) => {\n      if (!param.required) return false;\n      const value =\n        lockedValues[param.name] ?? debouncedValues[param.name] ?? \"\";\n      return value.trim() === \"\";\n    });\n    if (missingRequired.length > 0) {\n      return;\n    }\n\n    const submittedValues = pruneParameterValues(debouncedValues);\n    const signature = JSON.stringify(submittedValues);\n    if (lastAutoSubmitted.current === signature) {\n      return;\n    }\n\n    lastAutoSubmitted.current = signature;\n    setError(\"\");\n    void onSubmit(submittedValues);\n  }, [autoSubmit, debouncedValues, lockedValues, onSubmit, parameters]);\n\n  return (\n    <form id={formId} className=\"space-y-3\" onSubmit={handleSubmit}>\n      {hasFields ? (\n        presentation === \"filter-bar\" ? (\n          <FilterBar\n            autoSubmit={autoSubmit}\n            filters={formConfig.filters}\n            overflowMode=\"wrap\"\n            {...(formConfig.search ? { search: formConfig.search } : {})}\n            {...(formConfig.timeRange\n              ? { timeRange: formConfig.timeRange }\n              : {})}\n            {...(!autoSubmit\n              ? {\n                  onApply: () => void handleSubmit(),\n                  applyLabel: submitLabel,\n                  isPending: isSubmitting,\n                }\n              : {})}\n            {...(className ? { className } : {})}\n          />\n        ) : (\n          <ParameterGrid\n            autoSubmit={autoSubmit}\n            filters={formConfig.filters}\n            isSubmitting={isSubmitting}\n            submitLabel={submitLabel}\n            submittingLabel={submittingLabel}\n            showSubmit={showSubmit}\n            {...(formConfig.timeRange\n              ? { timeRange: formConfig.timeRange }\n              : {})}\n            {...(className ? { className } : {})}\n          />\n        )\n      ) : (\n        <div className=\"flex items-center justify-between gap-4\">\n          <p className=\"text-sm text-muted-foreground\">{emptyMessage}</p>\n          {showSubmit ? (\n            <Button\n              type=\"button\"\n              onClick={handleSubmit}\n              disabled={isSubmitting}\n            >\n              {isSubmitting ? submittingLabel : submitLabel}\n            </Button>\n          ) : null}\n        </div>\n      )}\n\n      {error && (\n        <div className=\"rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive\">\n          {error}\n        </div>\n      )}\n    </form>\n  );\n}\n"],"names":["_a"],"mappings":"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"}

package/dist/rpc/FilterFormFields.cjs

@@ -12,14 +12,15 @@ function ParameterGrid({
   isSubmitting,
   submitLabel,
   submittingLabel,
-  className
+  className,
+  showSubmit = true
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("space-y-3", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "divide-y divide-border border-y border-border", children: [
       filters.map((filter) => /* @__PURE__ */ jsxRuntime.jsx(ParameterRow, { filter }, filter.key)),
       timeRange && /* @__PURE__ */ jsxRuntime.jsx(TimeRangeRow, { timeRange })
     ] }),
-    !autoSubmit && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "submit", disabled: isSubmitting, children: isSubmitting ? submittingLabel : submitLabel }) })
+    !autoSubmit && showSubmit && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "submit", disabled: isSubmitting, children: isSubmitting ? submittingLabel : submitLabel }) })
   ] });
 }
 function ParameterRow({ filter }) {

package/dist/rpc/FilterFormFields.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterFormFields.cjs","sources":["../../src/rpc/FilterFormFields.tsx"],"sourcesContent":["import { Button } from \"../components/button\";\nimport { Combobox } from \"../components/Combobox\";\nimport {\n  type FilterBarFilter,\n  type FilterBarMultiFilter,\n  type FilterBarRangeProps,\n} from \"../components/FilterBar\";\nimport { TimeRange } from \"../components/TimeRange\";\nimport { cn } from \"../lib/utils\";\n\nexport type ParameterGridProps = {\n  filters: FilterBarFilter[];\n  timeRange?: FilterBarRangeProps | undefined;\n  autoSubmit: boolean;\n  isSubmitting: boolean;\n  submitLabel: string;\n  submittingLabel: string;\n  className?: string | undefined;\n};\n\nexport function ParameterGrid({\n  filters,\n  timeRange,\n  autoSubmit,\n  isSubmitting,\n  submitLabel,\n  submittingLabel,\n  className,\n}: ParameterGridProps) {\n  return (\n    <div className={cn(\"space-y-3\", className)}>\n      <div className=\"divide-y divide-border border-y border-border\">\n        {filters.map((filter) => (\n          <ParameterRow key={filter.key} filter={filter} />\n        ))}\n        {timeRange && <TimeRangeRow timeRange={timeRange} />}\n      </div>\n\n      {!autoSubmit && (\n        <div className=\"flex justify-end\">\n          <Button type=\"submit\" disabled={isSubmitting}>\n            {isSubmitting ? submittingLabel : submitLabel}\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction ParameterRow({ filter }: { filter: FilterBarFilter }) {\n  const id = `clicky-param-${filter.key.replace(/[^a-zA-Z0-9_-]/g, \"-\")}`;\n\n  return (\n    <div\n      title={filter.description}\n      className={cn(\n        \"grid grid-cols-1 gap-2 py-2 sm:grid-cols-[minmax(8rem,14rem)_minmax(0,1fr)] sm:items-center\",\n        filter.disabled && \"opacity-60\",\n      )}\n    >\n      <label htmlFor={id} className=\"text-sm font-medium text-muted-foreground\">\n        {filter.label}\n      </label>\n      <div className=\"min-w-0\">{renderParameterInput(filter, id)}</div>\n    </div>\n  );\n}\n\nfunction renderParameterInput(filter: FilterBarFilter, id: string) {\n  if (filter.kind === \"date-range\") {\n    return (\n      <TimeRange\n        kind={filter.timeEnabled === false ? \"date\" : \"time\"}\n        label={filter.label}\n        align=\"left\"\n        from={filter.from ?? \"\"}\n        to={filter.to ?? \"\"}\n        onApply={filter.onApply}\n        {...(filter.disabled !== undefined\n          ? { disabled: filter.disabled }\n          : {})}\n        {...(filter.presets ? { presets: filter.presets } : {})}\n        {...(filter.timeEnabled !== undefined\n          ? { timeEnabled: filter.timeEnabled }\n          : {})}\n        {...(filter.timeZone ? { timeZone: filter.timeZone } : {})}\n        {...(filter.timeZones ? { timeZones: filter.timeZones } : {})}\n        {...(filter.fromPlaceholder\n          ? { fromPlaceholder: filter.fromPlaceholder }\n          : {})}\n        {...(filter.toPlaceholder\n          ? { toPlaceholder: filter.toPlaceholder }\n          : {})}\n      />\n    );\n  }\n\n  if (filter.kind === \"enum\") {\n    return (\n      <select\n        id={id}\n        aria-label={filter.label}\n        className={inputClassName}\n        value={filter.value}\n        disabled={filter.disabled}\n        onChange={(event) => filter.onChange(event.target.value)}\n      >\n        <option value=\"\">{filter.placeholder ?? \"\"}</option>\n        {filter.options.map((option) => (\n          <option key={option.value} value={option.value}>\n            {option.label ?? option.value}\n          </option>\n        ))}\n      </select>\n    );\n  }\n\n  if (filter.kind === \"boolean\") {\n    return (\n      <div className=\"flex h-8 items-center\">\n        <input\n          id={id}\n          type=\"checkbox\"\n          aria-label={filter.label}\n          className=\"h-4 w-4 accent-primary disabled:cursor-not-allowed\"\n          checked={filter.value}\n          disabled={filter.disabled}\n          onChange={(event) => filter.onChange(event.target.checked)}\n        />\n      </div>\n    );\n  }\n\n  if (filter.kind === \"lookup\") {\n    const listId = `${id}-options`;\n    return (\n      <>\n        <input\n          id={id}\n          type={filter.inputType === \"number\" ? \"number\" : \"text\"}\n          aria-label={filter.label}\n          className={inputClassName}\n          {...(filter.placeholder !== undefined\n            ? { placeholder: filter.placeholder }\n            : {})}\n          value={filter.value}\n          list={listId}\n          disabled={filter.disabled}\n          onChange={(event) => filter.onChange(event.target.value)}\n        />\n        <datalist id={listId}>\n          {filter.options.map((option) => (\n            <option\n              key={option.value}\n              value={option.value}\n              label={option.label ?? option.value}\n              disabled={option.disabled}\n            />\n          ))}\n        </datalist>\n      </>\n    );\n  }\n\n  if (filter.kind === \"lookup-multi\") {\n    const listId = `${id}-options`;\n    return (\n      <>\n        <input\n          id={id}\n          type=\"text\"\n          aria-label={filter.label}\n          className={inputClassName}\n          {...(filter.placeholder !== undefined\n            ? { placeholder: filter.placeholder }\n            : {})}\n          value={filter.value.join(\", \")}\n          list={listId}\n          disabled={filter.disabled}\n          onChange={(event) =>\n            filter.onChange(splitCommaValues(event.target.value))\n          }\n        />\n        <datalist id={listId}>\n          {filter.options.map((option) => (\n            <option\n              key={option.value}\n              value={option.value}\n              label={option.label ?? option.value}\n              disabled={option.disabled}\n            />\n          ))}\n        </datalist>\n      </>\n    );\n  }\n\n  if (filter.kind === \"multi\") {\n    return <MultiParameterInput filter={filter} id={id} />;\n  }\n\n  if (filter.kind === \"text\") {\n    return (\n      <input\n        id={id}\n        type=\"text\"\n        aria-label={filter.label}\n        className={inputClassName}\n        {...(filter.placeholder !== undefined\n          ? { placeholder: filter.placeholder }\n          : {})}\n        value={filter.value}\n        disabled={filter.disabled}\n        onChange={(event) => filter.onChange(event.target.value)}\n      />\n    );\n  }\n\n  return (\n    <input\n      id={id}\n      type=\"text\"\n      aria-label={filter.label}\n      className={inputClassName}\n      value={JSON.stringify(filter.value)}\n      disabled\n      readOnly\n    />\n  );\n}\n\nfunction MultiParameterInput({\n  filter,\n  id,\n}: {\n  filter: FilterBarMultiFilter;\n  id: string;\n}) {\n  const moreCount =\n    filter.truncated && filter.total\n      ? Math.max(filter.total - filter.options.length, 0)\n      : 0;\n  return (\n    <Combobox\n      multiple\n      id={id}\n      ariaLabel={filter.label}\n      value={Object.keys(filter.value)}\n      options={filter.options.map((option) => ({\n        value: option.value,\n        label:\n          typeof option.label === \"string\"\n            ? option.label\n            : (option.title ?? option.value),\n        ...(option.disabled !== undefined ? { disabled: option.disabled } : {}),\n        ...(option.title !== undefined ? { title: option.title } : {}),\n      }))}\n      onChange={(values) => {\n        const next: FilterBarMultiFilter[\"value\"] = {};\n        for (const value of values)\n          next[value] = filter.value[value] ?? \"include\";\n        filter.onChange(next);\n      }}\n      allowCustomValue={filter.allowCustomValue ?? false}\n      {...(filter.placeholder !== undefined\n        ? { placeholder: filter.placeholder }\n        : {})}\n      {...(filter.disabled !== undefined ? { disabled: filter.disabled } : {})}\n      {...(filter.className !== undefined\n        ? { className: filter.className }\n        : {})}\n      {...(moreCount > 0\n        ? { footer: `… and ${moreCount.toLocaleString()} more` }\n        : {})}\n    />\n  );\n}\n\nfunction TimeRangeRow({ timeRange }: { timeRange: FilterBarRangeProps }) {\n  return (\n    <div className=\"grid grid-cols-1 gap-2 py-2 sm:grid-cols-[minmax(8rem,14rem)_minmax(0,1fr)] sm:items-center\">\n      <div className=\"text-sm font-medium text-muted-foreground\">\n        Time range\n      </div>\n      <div className=\"min-w-0\">\n        <TimeRange\n          kind={timeRange.timeEnabled ? \"time\" : \"date\"}\n          label=\"Time range\"\n          align=\"left\"\n          from={timeRange.from ?? \"\"}\n          to={timeRange.to ?? \"\"}\n          onApply={timeRange.onApply}\n          {...(timeRange.presets ? { presets: timeRange.presets } : {})}\n          {...(timeRange.timeEnabled !== undefined\n            ? { timeEnabled: timeRange.timeEnabled }\n            : {})}\n          {...(timeRange.timeZone ? { timeZone: timeRange.timeZone } : {})}\n          {...(timeRange.timeZones ? { timeZones: timeRange.timeZones } : {})}\n          {...(timeRange.fromPlaceholder\n            ? { fromPlaceholder: timeRange.fromPlaceholder }\n            : {})}\n          {...(timeRange.toPlaceholder\n            ? { toPlaceholder: timeRange.toPlaceholder }\n            : {})}\n        />\n      </div>\n    </div>\n  );\n}\n\nfunction splitCommaValues(value: string) {\n  return value\n    .split(\",\")\n    .map((item) => item.trim())\n    .filter(Boolean);\n}\n\nconst inputClassName =\n  \"h-8 w-full min-w-0 rounded-md border border-input bg-background px-2 text-sm text-foreground outline-none placeholder:text-placeholder disabled:cursor-not-allowed disabled:bg-muted/40 focus-visible:ring-2 focus-visible:ring-ring\";\n"],"names":["cn","jsxs","jsx","Button","TimeRange","Fragment","Combobox"],"mappings":"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"}
+{"version":3,"file":"FilterFormFields.cjs","sources":["../../src/rpc/FilterFormFields.tsx"],"sourcesContent":["import { Button } from \"../components/button\";\nimport { Combobox } from \"../components/Combobox\";\nimport {\n  type FilterBarFilter,\n  type FilterBarMultiFilter,\n  type FilterBarRangeProps,\n} from \"../components/FilterBar\";\nimport { TimeRange } from \"../components/TimeRange\";\nimport { cn } from \"../lib/utils\";\n\nexport type ParameterGridProps = {\n  filters: FilterBarFilter[];\n  timeRange?: FilterBarRangeProps | undefined;\n  autoSubmit: boolean;\n  isSubmitting: boolean;\n  submitLabel: string;\n  submittingLabel: string;\n  className?: string | undefined;\n  showSubmit?: boolean | undefined;\n};\n\nexport function ParameterGrid({\n  filters,\n  timeRange,\n  autoSubmit,\n  isSubmitting,\n  submitLabel,\n  submittingLabel,\n  className,\n  showSubmit = true,\n}: ParameterGridProps) {\n  return (\n    <div className={cn(\"space-y-3\", className)}>\n      <div className=\"divide-y divide-border border-y border-border\">\n        {filters.map((filter) => (\n          <ParameterRow key={filter.key} filter={filter} />\n        ))}\n        {timeRange && <TimeRangeRow timeRange={timeRange} />}\n      </div>\n\n      {!autoSubmit && showSubmit && (\n        <div className=\"flex justify-end\">\n          <Button type=\"submit\" disabled={isSubmitting}>\n            {isSubmitting ? submittingLabel : submitLabel}\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction ParameterRow({ filter }: { filter: FilterBarFilter }) {\n  const id = `clicky-param-${filter.key.replace(/[^a-zA-Z0-9_-]/g, \"-\")}`;\n\n  return (\n    <div\n      title={filter.description}\n      className={cn(\n        \"grid grid-cols-1 gap-2 py-2 sm:grid-cols-[minmax(8rem,14rem)_minmax(0,1fr)] sm:items-center\",\n        filter.disabled && \"opacity-60\"\n      )}\n    >\n      <label htmlFor={id} className=\"text-sm font-medium text-muted-foreground\">\n        {filter.label}\n      </label>\n      <div className=\"min-w-0\">{renderParameterInput(filter, id)}</div>\n    </div>\n  );\n}\n\nfunction renderParameterInput(filter: FilterBarFilter, id: string) {\n  if (filter.kind === \"date-range\") {\n    return (\n      <TimeRange\n        kind={filter.timeEnabled === false ? \"date\" : \"time\"}\n        label={filter.label}\n        align=\"left\"\n        from={filter.from ?? \"\"}\n        to={filter.to ?? \"\"}\n        onApply={filter.onApply}\n        {...(filter.disabled !== undefined\n          ? { disabled: filter.disabled }\n          : {})}\n        {...(filter.presets ? { presets: filter.presets } : {})}\n        {...(filter.timeEnabled !== undefined\n          ? { timeEnabled: filter.timeEnabled }\n          : {})}\n        {...(filter.timeZone ? { timeZone: filter.timeZone } : {})}\n        {...(filter.timeZones ? { timeZones: filter.timeZones } : {})}\n        {...(filter.fromPlaceholder\n          ? { fromPlaceholder: filter.fromPlaceholder }\n          : {})}\n        {...(filter.toPlaceholder\n          ? { toPlaceholder: filter.toPlaceholder }\n          : {})}\n      />\n    );\n  }\n\n  if (filter.kind === \"enum\") {\n    return (\n      <select\n        id={id}\n        aria-label={filter.label}\n        className={inputClassName}\n        value={filter.value}\n        disabled={filter.disabled}\n        onChange={(event) => filter.onChange(event.target.value)}\n      >\n        <option value=\"\">{filter.placeholder ?? \"\"}</option>\n        {filter.options.map((option) => (\n          <option key={option.value} value={option.value}>\n            {option.label ?? option.value}\n          </option>\n        ))}\n      </select>\n    );\n  }\n\n  if (filter.kind === \"boolean\") {\n    return (\n      <div className=\"flex h-8 items-center\">\n        <input\n          id={id}\n          type=\"checkbox\"\n          aria-label={filter.label}\n          className=\"h-4 w-4 accent-primary disabled:cursor-not-allowed\"\n          checked={filter.value}\n          disabled={filter.disabled}\n          onChange={(event) => filter.onChange(event.target.checked)}\n        />\n      </div>\n    );\n  }\n\n  if (filter.kind === \"lookup\") {\n    const listId = `${id}-options`;\n    return (\n      <>\n        <input\n          id={id}\n          type={filter.inputType === \"number\" ? \"number\" : \"text\"}\n          aria-label={filter.label}\n          className={inputClassName}\n          {...(filter.placeholder !== undefined\n            ? { placeholder: filter.placeholder }\n            : {})}\n          value={filter.value}\n          list={listId}\n          disabled={filter.disabled}\n          onChange={(event) => filter.onChange(event.target.value)}\n        />\n        <datalist id={listId}>\n          {filter.options.map((option) => (\n            <option\n              key={option.value}\n              value={option.value}\n              label={option.label ?? option.value}\n              disabled={option.disabled}\n            />\n          ))}\n        </datalist>\n      </>\n    );\n  }\n\n  if (filter.kind === \"lookup-multi\") {\n    const listId = `${id}-options`;\n    return (\n      <>\n        <input\n          id={id}\n          type=\"text\"\n          aria-label={filter.label}\n          className={inputClassName}\n          {...(filter.placeholder !== undefined\n            ? { placeholder: filter.placeholder }\n            : {})}\n          value={filter.value.join(\", \")}\n          list={listId}\n          disabled={filter.disabled}\n          onChange={(event) =>\n            filter.onChange(splitCommaValues(event.target.value))\n          }\n        />\n        <datalist id={listId}>\n          {filter.options.map((option) => (\n            <option\n              key={option.value}\n              value={option.value}\n              label={option.label ?? option.value}\n              disabled={option.disabled}\n            />\n          ))}\n        </datalist>\n      </>\n    );\n  }\n\n  if (filter.kind === \"multi\") {\n    return <MultiParameterInput filter={filter} id={id} />;\n  }\n\n  if (filter.kind === \"text\") {\n    return (\n      <input\n        id={id}\n        type=\"text\"\n        aria-label={filter.label}\n        className={inputClassName}\n        {...(filter.placeholder !== undefined\n          ? { placeholder: filter.placeholder }\n          : {})}\n        value={filter.value}\n        disabled={filter.disabled}\n        onChange={(event) => filter.onChange(event.target.value)}\n      />\n    );\n  }\n\n  return (\n    <input\n      id={id}\n      type=\"text\"\n      aria-label={filter.label}\n      className={inputClassName}\n      value={JSON.stringify(filter.value)}\n      disabled\n      readOnly\n    />\n  );\n}\n\nfunction MultiParameterInput({\n  filter,\n  id,\n}: {\n  filter: FilterBarMultiFilter;\n  id: string;\n}) {\n  const moreCount =\n    filter.truncated && filter.total\n      ? Math.max(filter.total - filter.options.length, 0)\n      : 0;\n  return (\n    <Combobox\n      multiple\n      id={id}\n      ariaLabel={filter.label}\n      value={Object.keys(filter.value)}\n      options={filter.options.map((option) => ({\n        value: option.value,\n        label:\n          typeof option.label === \"string\"\n            ? option.label\n            : option.title ?? option.value,\n        ...(option.disabled !== undefined ? { disabled: option.disabled } : {}),\n        ...(option.title !== undefined ? { title: option.title } : {}),\n      }))}\n      onChange={(values) => {\n        const next: FilterBarMultiFilter[\"value\"] = {};\n        for (const value of values)\n          next[value] = filter.value[value] ?? \"include\";\n        filter.onChange(next);\n      }}\n      allowCustomValue={filter.allowCustomValue ?? false}\n      {...(filter.placeholder !== undefined\n        ? { placeholder: filter.placeholder }\n        : {})}\n      {...(filter.disabled !== undefined ? { disabled: filter.disabled } : {})}\n      {...(filter.className !== undefined\n        ? { className: filter.className }\n        : {})}\n      {...(moreCount > 0\n        ? { footer: `… and ${moreCount.toLocaleString()} more` }\n        : {})}\n    />\n  );\n}\n\nfunction TimeRangeRow({ timeRange }: { timeRange: FilterBarRangeProps }) {\n  return (\n    <div className=\"grid grid-cols-1 gap-2 py-2 sm:grid-cols-[minmax(8rem,14rem)_minmax(0,1fr)] sm:items-center\">\n      <div className=\"text-sm font-medium text-muted-foreground\">\n        Time range\n      </div>\n      <div className=\"min-w-0\">\n        <TimeRange\n          kind={timeRange.timeEnabled ? \"time\" : \"date\"}\n          label=\"Time range\"\n          align=\"left\"\n          from={timeRange.from ?? \"\"}\n          to={timeRange.to ?? \"\"}\n          onApply={timeRange.onApply}\n          {...(timeRange.presets ? { presets: timeRange.presets } : {})}\n          {...(timeRange.timeEnabled !== undefined\n            ? { timeEnabled: timeRange.timeEnabled }\n            : {})}\n          {...(timeRange.timeZone ? { timeZone: timeRange.timeZone } : {})}\n          {...(timeRange.timeZones ? { timeZones: timeRange.timeZones } : {})}\n          {...(timeRange.fromPlaceholder\n            ? { fromPlaceholder: timeRange.fromPlaceholder }\n            : {})}\n          {...(timeRange.toPlaceholder\n            ? { toPlaceholder: timeRange.toPlaceholder }\n            : {})}\n        />\n      </div>\n    </div>\n  );\n}\n\nfunction splitCommaValues(value: string) {\n  return value\n    .split(\",\")\n    .map((item) => item.trim())\n    .filter(Boolean);\n}\n\nconst inputClassName =\n  \"h-8 w-full min-w-0 rounded-md border border-input bg-background px-2 text-sm text-foreground outline-none placeholder:text-placeholder disabled:cursor-not-allowed disabled:bg-muted/40 focus-visible:ring-2 focus-visible:ring-ring\";\n"],"names":["cn","jsxs","jsx","Button","TimeRange","Fragment","Combobox"],"mappings":"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"}

package/dist/rpc/FilterFormFields.d.ts

@@ -7,6 +7,7 @@ export type ParameterGridProps = {
     submitLabel: string;
     submittingLabel: string;
     className?: string | undefined;
+    showSubmit?: boolean | undefined;
 };
-export declare function ParameterGrid({ filters, timeRange, autoSubmit, isSubmitting, submitLabel, submittingLabel, className, }: ParameterGridProps): import("react/jsx-runtime").JSX.Element;
+export declare function ParameterGrid({ filters, timeRange, autoSubmit, isSubmitting, submitLabel, submittingLabel, className, showSubmit, }: ParameterGridProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=FilterFormFields.d.ts.map

package/dist/rpc/FilterFormFields.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterFormFields.d.ts","sourceRoot":"","sources":["../../src/rpc/FilterFormFields.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,mBAAmB,EACzB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC5C,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,SAAS,EACT,UAAU,EACV,YAAY,EACZ,WAAW,EACX,eAAe,EACf,SAAS,GACV,EAAE,kBAAkB,2CAmBpB"}
+{"version":3,"file":"FilterFormFields.d.ts","sourceRoot":"","sources":["../../src/rpc/FilterFormFields.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,mBAAmB,EACzB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC5C,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAClC,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,SAAS,EACT,UAAU,EACV,YAAY,EACZ,WAAW,EACX,eAAe,EACf,SAAS,EACT,UAAiB,GAClB,EAAE,kBAAkB,2CAmBpB"}

package/dist/rpc/FilterFormFields.js

@@ -10,14 +10,15 @@ function ParameterGrid({
   isSubmitting,
   submitLabel,
   submittingLabel,
-  className
+  className,
+  showSubmit = true
 }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "divide-y divide-border border-y border-border", children: [
       filters.map((filter) => /* @__PURE__ */ jsx(ParameterRow, { filter }, filter.key)),
       timeRange && /* @__PURE__ */ jsx(TimeRangeRow, { timeRange })
     ] }),
-    !autoSubmit && /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Button, { type: "submit", disabled: isSubmitting, children: isSubmitting ? submittingLabel : submitLabel }) })
+    !autoSubmit && showSubmit && /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Button, { type: "submit", disabled: isSubmitting, children: isSubmitting ? submittingLabel : submitLabel }) })
   ] });
 }
 function ParameterRow({ filter }) {