@veltrixsecops/app-sdk 3.0.0 → 3.2.0

package/dist/ui/index.d.ts

@@ -127,6 +127,135 @@ interface SelectProps {
  * <Select label="Environment" value={env} onChange={setEnv} options={[{ value: 'prod', label: 'Production' }]} />
  */
 declare const Select: React.FC<SelectProps>;
+type SearchBoxSize = 'sm' | 'md' | 'lg';
+interface SearchBoxProps {
+    /** Controlled search text. */
+    value: string;
+    /** Called with the new text — debounced by `debounceMs` when set. */
+    onChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: SearchBoxSize;
+    /** Debounces `onChange` by this many ms; omit (or `0`) to call on every keystroke. */
+    debounceMs?: number;
+    className?: string;
+    'aria-label'?: string;
+}
+/**
+ * SearchBox — delegates to the platform's real SearchBox at render time (leading search icon,
+ * a clear button once there's text, optional debounce). The fallback is a bare
+ * `<input type="search">` wired straight to `value`/`onChange` — no icon, no debounce, no
+ * clear button — but functionally sufficient for typing and clearing.
+ *
+ * @example
+ * <SearchBox value={search} onChange={setSearch} placeholder="Search apps…" debounceMs={250} />
+ */
+declare const SearchBox: React.FC<SearchBoxProps>;
+interface PaginationProps {
+    /** 1-based current page. */
+    page: number;
+    pageSize: number;
+    totalItems: number;
+    onPageChange: (page: number) => void;
+    /** Renders a page-size selector when provided together with `pageSizeOptions`. */
+    onPageSizeChange?: (size: number) => void;
+    pageSizeOptions?: number[];
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Pagination — delegates to the platform's real Pagination at render time: a "Showing X–Y of
+ * N" summary, numbered pages with ellipsis for large ranges, an optional page-size Select, and
+ * `aria-current="page"` on the active page — visually consistent with DataTable's built-in
+ * pagination footer. The fallback is a plain Prev/Next pair with "page X of Y" text.
+ *
+ * @example
+ * <Pagination page={page} pageSize={20} totalItems={total} onPageChange={setPage} />
+ */
+declare const Pagination: React.FC<PaginationProps>;
+interface FilterOption {
+    value: string;
+    label: string;
+}
+interface FilterDefinition {
+    /** Stable identifier; also the React key for this filter's dropdown. */
+    key: string;
+    /** Shown as the dropdown's placeholder/aria-label, and as its entry in the "Add filter" menu. */
+    label: string;
+    options: FilterOption[];
+    /** `null` (not `''`) represents "no selection" — the value FilterBar clears back to. */
+    value: string | null;
+    onChange: (value: string | null) => void;
+    /** Always rendered when true. Omit/false to make this filter addable/removable via the "Add filter" menu. */
+    alwaysVisible?: boolean;
+}
+interface FilterBarSearchProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+}
+interface FilterBarProps {
+    filters: FilterDefinition[];
+    /** Renders a SearchBox ahead of the filter dropdowns when provided. */
+    search?: FilterBarSearchProps;
+    /**
+     * Called by "Clear all" instead of FilterBar's own clearing logic. Omit it to let FilterBar
+     * clear every filter with a value itself (`filter.onChange(null)` for each).
+     */
+    onClearAll?: () => void;
+    addFilterLabel?: string;
+    className?: string;
+}
+/**
+ * FilterBar — delegates to the platform's real FilterBar at render time: an optional
+ * SearchBox, always-visible filter dropdowns, and optional filters the user can add/remove via
+ * an "Add filter" menu (a filter with a non-null `value` is always treated as visible, even
+ * before the user explicitly adds it). The fallback renders every filter as a plain,
+ * always-visible native `<select>` — no add/remove menu, no styled search box — so an app page
+ * under test still exposes every filter's full behavior via `onChange`.
+ *
+ * @example
+ * <FilterBar
+ *   search={{ value: search, onChange: setSearch, placeholder: 'Search apps…' }}
+ *   filters={[
+ *     { key: 'vendor', label: 'Vendor', options: vendorOptions, value: vendor, onChange: setVendor, alwaysVisible: true },
+ *     { key: 'category', label: 'Category', options: categoryOptions, value: category, onChange: setCategory },
+ *   ]}
+ * />
+ */
+declare const FilterBar: React.FC<FilterBarProps>;
+type SortDirection = 'asc' | 'desc';
+interface SortOption {
+    value: string;
+    label: string;
+}
+interface SortSelectProps {
+    /** Sortable fields, e.g. `[{ value: 'name', label: 'Name' }, { value: 'updatedAt', label: 'Updated' }]`. */
+    options: SortOption[];
+    /** Selected field key. */
+    value: string;
+    direction: SortDirection;
+    /** Called with the field and direction together, whichever one the interaction changed. */
+    onChange: (value: string, direction: SortDirection) => void;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * SortSelect — delegates to the platform's real SortSelect at render time: a labeled field
+ * Select paired with an asc/desc direction toggle button, styled to sit in the same toolbar
+ * row as FilterBar. The standalone sort control for list/card surfaces that aren't a
+ * DataTable (which has its own column-header sort). The fallback is a native `<select>` for
+ * the field plus a button that flips direction.
+ *
+ * @example
+ * <SortSelect
+ *   options={[{ value: 'name', label: 'Name' }, { value: 'updatedAt', label: 'Last updated' }]}
+ *   value={sortField}
+ *   direction={sortDirection}
+ *   onChange={(field, direction) => { setSortField(field); setSortDirection(direction) }}
+ * />
+ */
+declare const SortSelect: React.FC<SortSelectProps>;
 interface FormFieldProps {
     label?: string;
     htmlFor?: string;
@@ -390,4 +519,4 @@ interface ConfirmationDialogContextValue {
  */
 declare function useConfirmDialog(): ConfirmationDialogContextValue;
 
-export { Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Checkbox, type CheckboxProps, type ConfirmationDialogContextValue, type ConfirmationOptions, type ConfirmationVariant, DataTable, type DataTableAlign, type DataTableColumn, type DataTableEmptyState, type DataTablePaginationState, type DataTableProps, type DataTableSort, type DataTableSortOrder, EmptyState, type EmptyStateProps, FormDialog, type FormDialogProps, type FormDialogSize, FormField, type FormFieldProps, Input, type InputProps, type InputSize, type InputVariant, Select, type SelectOption, type SelectProps, type SelectSize, Skeleton, SkeletonCard, type SkeletonCardProps, type SkeletonProps, SkeletonText, type SkeletonTextProps, type SkeletonVariant, Spinner, type SpinnerProps, type SpinnerSize, StatsCard, type StatsCardDelta, type StatsCardProps, type StatsCardVariant, type TabItem, Tabs, type TabsProps, Textarea, type TextareaProps, type Toast, type ToastContextValue, type ToastOptions, type ToastVariant, Tooltip, type TooltipPlacement, type TooltipProps, useConfirmDialog, useToast };
+export { Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Checkbox, type CheckboxProps, type ConfirmationDialogContextValue, type ConfirmationOptions, type ConfirmationVariant, DataTable, type DataTableAlign, type DataTableColumn, type DataTableEmptyState, type DataTablePaginationState, type DataTableProps, type DataTableSort, type DataTableSortOrder, EmptyState, type EmptyStateProps, FilterBar, type FilterBarProps, type FilterBarSearchProps, type FilterDefinition, type FilterOption, FormDialog, type FormDialogProps, type FormDialogSize, FormField, type FormFieldProps, Input, type InputProps, type InputSize, type InputVariant, Pagination, type PaginationProps, SearchBox, type SearchBoxProps, type SearchBoxSize, Select, type SelectOption, type SelectProps, type SelectSize, Skeleton, SkeletonCard, type SkeletonCardProps, type SkeletonProps, SkeletonText, type SkeletonTextProps, type SkeletonVariant, type SortDirection, type SortOption, SortSelect, type SortSelectProps, Spinner, type SpinnerProps, type SpinnerSize, StatsCard, type StatsCardDelta, type StatsCardProps, type StatsCardVariant, type TabItem, Tabs, type TabsProps, Textarea, type TextareaProps, type Toast, type ToastContextValue, type ToastOptions, type ToastVariant, Tooltip, type TooltipPlacement, type TooltipProps, useConfirmDialog, useToast };

package/dist/ui/index.js

@@ -1,6 +1,6 @@
 import {
   getHostRuntime
-} from "../chunk-NY6C4REE.js";
+} from "../chunk-EOOEHZGC.js";
 
 // src/ui/index.tsx
 import * as React from "react";
@@ -234,6 +234,110 @@ var Select = (props) => {
   ] });
 };
 Select.displayName = "Select";
+var SearchBox = (props) => {
+  const HostSearchBox = getHostUi("SearchBox");
+  if (HostSearchBox) return /* @__PURE__ */ jsx(HostSearchBox, { ...props });
+  const { value, onChange, placeholder, disabled, className, "aria-label": ariaLabel } = props;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "search",
+      value,
+      onChange: (event) => onChange(event.target.value),
+      placeholder,
+      disabled,
+      "aria-label": ariaLabel ?? placeholder ?? "Search",
+      className,
+      style: { ...fallbackNote, width: "100%", padding: "6px 10px", borderRadius: 6, border: "1px solid #9ca3af" }
+    }
+  );
+};
+SearchBox.displayName = "SearchBox";
+var Pagination = (props) => {
+  const HostPagination = getHostUi("Pagination");
+  if (HostPagination) return /* @__PURE__ */ jsx(HostPagination, { ...props });
+  const { page, pageSize, totalItems, onPageChange, disabled, className } = props;
+  const pageCount = Math.max(1, Math.ceil(totalItems / pageSize));
+  const canGoPrev = !disabled && page > 1;
+  const canGoNext = !disabled && page < pageCount;
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": "Pagination", className, style: { ...fallbackNote, display: "flex", alignItems: "center", gap: 12 }, children: [
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onPageChange(page - 1), disabled: !canGoPrev, style: { padding: "4px 10px" }, children: "Prev" }),
+    /* @__PURE__ */ jsxs("span", { children: [
+      "page ",
+      page,
+      " of ",
+      pageCount
+    ] }),
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onPageChange(page + 1), disabled: !canGoNext, style: { padding: "4px 10px" }, children: "Next" })
+  ] });
+};
+Pagination.displayName = "Pagination";
+var FilterBar = (props) => {
+  const HostFilterBar = getHostUi("FilterBar");
+  if (HostFilterBar) return /* @__PURE__ */ jsx(HostFilterBar, { ...props });
+  const { filters, search, className } = props;
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...fallbackNote, display: "flex", flexWrap: "wrap", gap: 8, alignItems: "center" }, children: [
+    search && /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "search",
+        "aria-label": search.placeholder ?? "Search",
+        placeholder: search.placeholder,
+        value: search.value,
+        onChange: (event) => search.onChange(event.target.value),
+        style: { padding: "6px 10px", borderRadius: 6, border: "1px solid #9ca3af" }
+      }
+    ),
+    filters.map((filter) => /* @__PURE__ */ jsxs("label", { style: { display: "flex", flexDirection: "column", fontSize: 12 }, children: [
+      filter.label,
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          "aria-label": filter.label,
+          value: filter.value ?? "",
+          onChange: (event) => filter.onChange(event.target.value === "" ? null : event.target.value),
+          style: { padding: "6px 10px", borderRadius: 6, border: "1px solid #9ca3af" },
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: filter.label }),
+            filter.options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+          ]
+        }
+      )
+    ] }, filter.key))
+  ] });
+};
+FilterBar.displayName = "FilterBar";
+var SortSelect = (props) => {
+  const HostSortSelect = getHostUi("SortSelect");
+  if (HostSortSelect) return /* @__PURE__ */ jsx(HostSortSelect, { ...props });
+  const { options, value, direction, onChange, disabled, className } = props;
+  const directionLabel = direction === "asc" ? "Sort ascending" : "Sort descending";
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...fallbackNote, display: "flex", alignItems: "center", gap: 6 }, children: [
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        "aria-label": "Sort by",
+        value,
+        disabled,
+        onChange: (event) => onChange(event.target.value, direction),
+        style: { padding: "6px 10px", borderRadius: 6, border: "1px solid #9ca3af" },
+        children: options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled,
+        onClick: () => onChange(value, direction === "asc" ? "desc" : "asc"),
+        "aria-label": directionLabel,
+        style: { padding: "4px 10px" },
+        children: direction === "asc" ? "\u2191" : "\u2193"
+      }
+    )
+  ] });
+};
+SortSelect.displayName = "SortSelect";
 var FormField = (props) => {
   const HostFormField = getHostUi("FormField");
   if (HostFormField) return /* @__PURE__ */ jsx(HostFormField, { ...props });
@@ -582,13 +686,17 @@ export {
   Checkbox,
   DataTable,
   EmptyState,
+  FilterBar,
   FormDialog,
   FormField,
   Input,
+  Pagination,
+  SearchBox,
   Select,
   Skeleton,
   SkeletonCard,
   SkeletonText,
+  SortSelect,
   Spinner,
   StatsCard,
   Tabs,