@flanksource/clicky-ui 0.3.55 → 0.3.57

package/dist/components/ErrorWrapper.js

@@ -22,10 +22,21 @@ var ErrorWrapper = class extends Component {
 		this.props.onError?.(error, errorInfo);
 	}
 	render() {
-		if (this.state.error) return /* @__PURE__ */ jsx(ErrorFallback, {
-			error: this.state.error,
-			componentStack: this.state.componentStack
-		});
+		if (this.state.error) {
+			if (this.props.renderFallback) return /* @__PURE__ */ jsx(Fragment$1, { children: this.props.renderFallback({
+				error: this.state.error,
+				componentStack: this.state.componentStack,
+				report: errorReport(this.state.error, this.state.componentStack),
+				reset: () => this.setState({
+					error: null,
+					componentStack: null
+				})
+			}) });
+			return /* @__PURE__ */ jsx(ErrorFallback, {
+				error: this.state.error,
+				componentStack: this.state.componentStack
+			});
+		}
 		return /* @__PURE__ */ jsx(Fragment$1, { children: this.props.children });
 	}
 };

package/dist/components/ErrorWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorWrapper.js","names":["_Fragment"],"sources":["../../src/components/ErrorWrapper.tsx"],"sourcesContent":["import {\n  Component,\n  useMemo,\n  useState,\n  type ErrorInfo,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { ErrorDetails } from \"../data/diagnostics/ErrorDetails\";\nimport {\n  normalizeErrorDiagnostics,\n  reportPageLine,\n  type ErrorDiagnostics,\n} from \"../data/diagnostics/error-diagnostics\";\nimport { Icon } from \"../data/Icon\";\nimport { UiCheck, UiCopy, UiWarningTriangle } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"./button\";\n\nexport type ErrorWrapperProps = {\n  children: ReactNode;\n  onError?: (error: Error, errorInfo: ErrorInfo) => void;\n};\n\ntype ErrorWrapperState = {\n  error: Error | null;\n  componentStack: string | null;\n};\n\nexport class ErrorWrapper extends Component<\n  ErrorWrapperProps,\n  ErrorWrapperState\n> {\n  override state: ErrorWrapperState = {\n    error: null,\n    componentStack: null,\n  };\n\n  static getDerivedStateFromError(error: Error) {\n    return { error };\n  }\n\n  override componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n    this.setState({ componentStack: errorInfo.componentStack ?? null });\n    this.props.onError?.(error, errorInfo);\n  }\n\n  override render(): ReactElement {\n    if (this.state.error) {\n      return (\n        <ErrorFallback\n          error={this.state.error}\n          componentStack={this.state.componentStack}\n        />\n      );\n    }\n    return <>{this.props.children}</>;\n  }\n}\n\ntype CopyState = \"idle\" | \"copied\" | \"failed\";\n\nfunction copyStatusMessage(copyState: CopyState): string {\n  if (copyState === \"copied\") return \"Error details copied to clipboard.\";\n  if (copyState === \"failed\") {\n    return \"Clipboard access failed. Expand the error details to copy individual values.\";\n  }\n  return \"\";\n}\n\nfunction ErrorFallback({\n  error,\n  componentStack,\n}: {\n  error: Error;\n  componentStack: string | null;\n}) {\n  const [copyState, setCopyState] = useState<CopyState>(\"idle\");\n  const diagnostics = useMemo(\n    () => errorDiagnostics(error, componentStack),\n    [componentStack, error],\n  );\n\n  const copyDetails = async () => {\n    if (!navigator.clipboard?.writeText) {\n      setCopyState(\"failed\");\n      return;\n    }\n    try {\n      await navigator.clipboard.writeText(errorReport(error, componentStack));\n      setCopyState(\"copied\");\n    } catch {\n      setCopyState(\"failed\");\n    }\n  };\n\n  return (\n    <main\n      data-slot=\"error-wrapper\"\n      role=\"alert\"\n      aria-labelledby=\"error-wrapper-title\"\n      className=\"flex min-h-dvh w-full items-center justify-center bg-background p-density-6 text-foreground\"\n    >\n      <div className=\"w-full max-w-3xl\">\n        <div className=\"mb-density-4 flex items-start gap-density-3\">\n          <span className=\"grid size-12 shrink-0 place-items-center rounded-full bg-destructive/10 text-destructive\">\n            <Icon icon={UiWarningTriangle} className=\"size-6\" />\n          </span>\n          <div className=\"min-w-0 flex-1\">\n            <p className=\"text-xs font-semibold uppercase tracking-wide text-destructive\">\n              Unexpected application error\n            </p>\n            <h1\n              id=\"error-wrapper-title\"\n              className=\"mt-density-1 text-2xl font-semibold tracking-tight\"\n            >\n              Something went wrong\n            </h1>\n            <p className=\"mt-density-2 break-words text-sm text-muted-foreground\">\n              {diagnostics.message}\n            </p>\n          </div>\n        </div>\n\n        <div className=\"mb-density-3 flex items-center gap-density-2\">\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            onClick={() => void copyDetails()}\n          >\n            <Icon icon={copyState === \"copied\" ? UiCheck : UiCopy} />\n            {/* Distinct from ErrorDetails' own \"Copy error details\" control\n                below: this copies the page-level report (URL, user agent,\n                React component stack), and two identically named buttons in\n                one view are ambiguous to assistive tech. */}\n            {copyState === \"copied\" ? \"Copied\" : \"Copy error report\"}\n          </Button>\n          <span\n            aria-live=\"polite\"\n            className={cn(\n              \"text-xs\",\n              copyState === \"failed\"\n                ? \"text-destructive\"\n                : \"text-muted-foreground\",\n            )}\n          >\n            {copyStatusMessage(copyState)}\n          </span>\n        </div>\n\n        <ErrorDetails diagnostics={diagnostics} />\n      </div>\n    </main>\n  );\n}\n\nfunction errorDiagnostics(\n  error: Error,\n  componentStack: string | null,\n): ErrorDiagnostics {\n  const diagnostics = normalizeErrorDiagnostics(\n    error,\n    \"An unexpected error was thrown without a message.\",\n  );\n  if (!diagnostics) {\n    throw new Error(\"ErrorWrapper could not normalize the captured error\");\n  }\n\n  const cause =\n    error.cause === undefined\n      ? []\n      : [[\"cause\", String(error.cause)] as [string, string]];\n  const reactStack = componentStack?.trim();\n  return {\n    ...diagnostics,\n    context: [...diagnostics.context, ...cause],\n    ...(reactStack\n      ? {\n          stacktrace: [\n            diagnostics.stacktrace,\n            \"React component stack:\",\n            reactStack,\n          ]\n            .filter(Boolean)\n            .join(\"\\n\\n\"),\n        }\n      : {}),\n  };\n}\n\nfunction errorReport(error: Error, componentStack: string | null) {\n  const lines = [\n    `Error: ${error.message || \"An unexpected error was thrown without a message.\"}`,\n  ];\n  if (error.name !== \"Error\") lines.push(`Type: ${error.name}`);\n  if (error.cause !== undefined) lines.push(`Cause: ${String(error.cause)}`);\n  const page = reportPageLine();\n  if (page) lines.push(page);\n  if (typeof navigator !== \"undefined\" && navigator.userAgent) {\n    lines.push(`User agent: ${navigator.userAgent}`);\n  }\n  lines.push(`Time: ${new Date().toISOString()}`);\n  if (error.stack) lines.push(\"\", \"Stack trace:\", error.stack);\n  if (componentStack?.trim()) {\n    lines.push(\"\", \"React component stack:\", componentStack.trim());\n  }\n  return lines.join(\"\\n\");\n}\n"],"mappings":"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"}
+{"version":3,"file":"ErrorWrapper.js","names":["_Fragment"],"sources":["../../src/components/ErrorWrapper.tsx"],"sourcesContent":["import {\n  Component,\n  useMemo,\n  useState,\n  type ErrorInfo,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { ErrorDetails } from \"../data/diagnostics/ErrorDetails\";\nimport {\n  normalizeErrorDiagnostics,\n  reportPageLine,\n  type ErrorDiagnostics,\n} from \"../data/diagnostics/error-diagnostics\";\nimport { Icon } from \"../data/Icon\";\nimport { UiCheck, UiCopy, UiWarningTriangle } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"./button\";\n\nexport type ErrorWrapperProps = {\n  children: ReactNode;\n  onError?: (error: Error, errorInfo: ErrorInfo) => void;\n  /** Render host-specific recovery actions without replacing ancestors of this boundary. */\n  renderFallback?: (failure: {\n    error: Error;\n    componentStack: string | null;\n    report: string;\n    reset: () => void;\n  }) => ReactNode;\n};\n\ntype ErrorWrapperState = {\n  error: Error | null;\n  componentStack: string | null;\n};\n\nexport class ErrorWrapper extends Component<\n  ErrorWrapperProps,\n  ErrorWrapperState\n> {\n  override state: ErrorWrapperState = {\n    error: null,\n    componentStack: null,\n  };\n\n  static getDerivedStateFromError(error: Error) {\n    return { error };\n  }\n\n  override componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n    this.setState({ componentStack: errorInfo.componentStack ?? null });\n    this.props.onError?.(error, errorInfo);\n  }\n\n  override render(): ReactElement {\n    if (this.state.error) {\n      if (this.props.renderFallback)\n        return (\n          <>\n            {this.props.renderFallback({\n              error: this.state.error,\n              componentStack: this.state.componentStack,\n              report: errorReport(this.state.error, this.state.componentStack),\n              reset: () => this.setState({ error: null, componentStack: null }),\n            })}\n          </>\n        );\n      return (\n        <ErrorFallback\n          error={this.state.error}\n          componentStack={this.state.componentStack}\n        />\n      );\n    }\n    return <>{this.props.children}</>;\n  }\n}\n\ntype CopyState = \"idle\" | \"copied\" | \"failed\";\n\nfunction copyStatusMessage(copyState: CopyState): string {\n  if (copyState === \"copied\") return \"Error details copied to clipboard.\";\n  if (copyState === \"failed\") {\n    return \"Clipboard access failed. Expand the error details to copy individual values.\";\n  }\n  return \"\";\n}\n\nfunction ErrorFallback({\n  error,\n  componentStack,\n}: {\n  error: Error;\n  componentStack: string | null;\n}) {\n  const [copyState, setCopyState] = useState<CopyState>(\"idle\");\n  const diagnostics = useMemo(\n    () => errorDiagnostics(error, componentStack),\n    [componentStack, error],\n  );\n\n  const copyDetails = async () => {\n    if (!navigator.clipboard?.writeText) {\n      setCopyState(\"failed\");\n      return;\n    }\n    try {\n      await navigator.clipboard.writeText(errorReport(error, componentStack));\n      setCopyState(\"copied\");\n    } catch {\n      setCopyState(\"failed\");\n    }\n  };\n\n  return (\n    <main\n      data-slot=\"error-wrapper\"\n      role=\"alert\"\n      aria-labelledby=\"error-wrapper-title\"\n      className=\"flex min-h-dvh w-full items-center justify-center bg-background p-density-6 text-foreground\"\n    >\n      <div className=\"w-full max-w-3xl\">\n        <div className=\"mb-density-4 flex items-start gap-density-3\">\n          <span className=\"grid size-12 shrink-0 place-items-center rounded-full bg-destructive/10 text-destructive\">\n            <Icon icon={UiWarningTriangle} className=\"size-6\" />\n          </span>\n          <div className=\"min-w-0 flex-1\">\n            <p className=\"text-xs font-semibold uppercase tracking-wide text-destructive\">\n              Unexpected application error\n            </p>\n            <h1\n              id=\"error-wrapper-title\"\n              className=\"mt-density-1 text-2xl font-semibold tracking-tight\"\n            >\n              Something went wrong\n            </h1>\n            <p className=\"mt-density-2 break-words text-sm text-muted-foreground\">\n              {diagnostics.message}\n            </p>\n          </div>\n        </div>\n\n        <div className=\"mb-density-3 flex items-center gap-density-2\">\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            onClick={() => void copyDetails()}\n          >\n            <Icon icon={copyState === \"copied\" ? UiCheck : UiCopy} />\n            {/* Distinct from ErrorDetails' own \"Copy error details\" control\n                below: this copies the page-level report (URL, user agent,\n                React component stack), and two identically named buttons in\n                one view are ambiguous to assistive tech. */}\n            {copyState === \"copied\" ? \"Copied\" : \"Copy error report\"}\n          </Button>\n          <span\n            aria-live=\"polite\"\n            className={cn(\n              \"text-xs\",\n              copyState === \"failed\"\n                ? \"text-destructive\"\n                : \"text-muted-foreground\",\n            )}\n          >\n            {copyStatusMessage(copyState)}\n          </span>\n        </div>\n\n        <ErrorDetails diagnostics={diagnostics} />\n      </div>\n    </main>\n  );\n}\n\nfunction errorDiagnostics(\n  error: Error,\n  componentStack: string | null,\n): ErrorDiagnostics {\n  const diagnostics = normalizeErrorDiagnostics(\n    error,\n    \"An unexpected error was thrown without a message.\",\n  );\n  if (!diagnostics) {\n    throw new Error(\"ErrorWrapper could not normalize the captured error\");\n  }\n\n  const cause =\n    error.cause === undefined\n      ? []\n      : [[\"cause\", String(error.cause)] as [string, string]];\n  const reactStack = componentStack?.trim();\n  return {\n    ...diagnostics,\n    context: [...diagnostics.context, ...cause],\n    ...(reactStack\n      ? {\n          stacktrace: [\n            diagnostics.stacktrace,\n            \"React component stack:\",\n            reactStack,\n          ]\n            .filter(Boolean)\n            .join(\"\\n\\n\"),\n        }\n      : {}),\n  };\n}\n\nfunction errorReport(error: Error, componentStack: string | null) {\n  const lines = [\n    `Error: ${error.message || \"An unexpected error was thrown without a message.\"}`,\n  ];\n  if (error.name !== \"Error\") lines.push(`Type: ${error.name}`);\n  if (error.cause !== undefined) lines.push(`Cause: ${String(error.cause)}`);\n  const page = reportPageLine();\n  if (page) lines.push(page);\n  if (typeof navigator !== \"undefined\" && navigator.userAgent) {\n    lines.push(`User agent: ${navigator.userAgent}`);\n  }\n  lines.push(`Time: ${new Date().toISOString()}`);\n  if (error.stack) lines.push(\"\", \"Stack trace:\", error.stack);\n  if (componentStack?.trim()) {\n    lines.push(\"\", \"React component stack:\", componentStack.trim());\n  }\n  return lines.join(\"\\n\");\n}\n"],"mappings":"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"}

package/dist/components/FilterBar.cjs

@@ -1,4 +1,5 @@
 const require_utils = require("../lib/utils.cjs");
+const require_breakpoints = require("../lib/breakpoints.cjs");
 const require_UiChevronDown = require("../icons/components/UiChevronDown.cjs");
 const require_UiChevronRight = require("../icons/components/UiChevronRight.cjs");
 const require_UiChevronUp = require("../icons/components/UiChevronUp.cjs");
@@ -6,6 +7,7 @@ const require_UiClose = require("../icons/components/UiClose.cjs");
 const require_UiSearch = require("../icons/components/UiSearch.cjs");
 const require_UiFilter = require("../icons/components/UiFilter.cjs");
 const require_use_media_query = require("../hooks/use-media-query.cjs");
+const require_use_container_width = require("../hooks/use-container-width.cjs");
 const require_Icon = require("../data/Icon.cjs");
 const require_button = require("./button.cjs");
 const require_modalStack = require("../overlay/modalStack.cjs");
@@ -19,6 +21,7 @@ const require_RangeSlider = require("./RangeSlider.cjs");
 const require_filter_bar_context = require("./filter-bar-context.cjs");
 const require_filter_bar_field_utils = require("./filter-bar-field-utils.cjs");
 const require_filter_bar_multi = require("./filter-bar-multi.cjs");
+const require_filter_bar_tree = require("./filter-bar-tree.cjs");
 const require_filter_bar_utils = require("./filter-bar-utils.cjs");
 const require_timestamp_format = require("../data/cells/timestamp-format.cjs");
 const require_MultiSelect = require("./MultiSelect.cjs");
@@ -41,12 +44,14 @@ function FilterBar({ search, filters, timeRange, dateRange, children, leading, t
 	const inlineFilterLimit = allFilters.findIndex((filter) => filter.placement === "overflow");
 	const maximumInlineFilters = inlineFilterLimit === -1 ? allFilters.length : inlineFilterLimit;
 	const hasForcedOverflow = maximumInlineFilters < allFilters.length;
-	const mobileFilterOverflow = require_use_media_query.useMediaQuery("(max-width: 767px)");
-	const mobilePageOverflow = require_use_media_query.useMediaQuery("(max-width: 639px)");
+	const mobileFilterOverflow = require_use_media_query.useMediaQuery(require_breakpoints.belowBreakpoint("md"));
+	const mobilePageOverflow = require_use_media_query.useMediaQuery(require_breakpoints.belowBreakpoint("sm"));
+	const { ref: rowWidthRef, wider: roomyRow } = require_use_container_width.useContainerWiderThan(require_breakpoints.BREAKPOINTS.sm);
+	const compact = mobileFilterOverflow || !roomyRow;
 	const contextValue = (0, react.useMemo)(() => ({
 		autoSubmit,
-		compact: mobileFilterOverflow
-	}), [autoSubmit, mobileFilterOverflow]);
+		compact
+	}), [autoSubmit, compact]);
 	const mobileCollapse = overflowMode === "responsive" ? mobileFilterOverflow : mobilePageOverflow;
 	const responsiveOverflow = allFilters.length > 0 && (overflowMode === "responsive" || mobileCollapse || hasForcedOverflow);
 	const filterListRef = (0, react.useRef)(null);
@@ -79,8 +84,8 @@ function FilterBar({ search, filters, timeRange, dateRange, children, leading, t
 		}
 		const filterList = filterListRef.current;
 		if (!filterList) return;
+		if ((filterList.parentElement?.getBoundingClientRect().width ?? 0) <= 0) return;
 		const availableWidth = Math.floor(filterList.getBoundingClientRect().width);
-		if (availableWidth <= 0) return;
 		const widths = current.slice(0, maximumInline).map((filter) => {
 			const measured = filterNodeRefs.current.get(filter.key)?.getBoundingClientRect().width ?? 0;
 			if (measured > 0) {
@@ -137,6 +142,7 @@ function FilterBar({ search, filters, timeRange, dateRange, children, leading, t
 	const row = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_filter_bar_context.FilterBarContext.Provider, {
 		value: contextValue,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: rowWidthRef,
 			"data-slot": "filter-bar",
 			className: require_utils.cn(FILTER_BAR_ROW_CLASS, overflowMode === "wrap" ? "flex-wrap max-sm:flex-nowrap" : "flex-wrap max-sm:flex-nowrap md:flex-nowrap", className, overlay && "invisible pointer-events-none"),
 			...overlay ? { "aria-hidden": true } : {},
@@ -233,6 +239,10 @@ function FilterBarFilterPanelContent({ filter, chrome = "full" }) {
 			filter,
 			chrome
 		}),
+		filter.kind === "tree" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_filter_bar_tree.TreeFilterField, {
+			filter,
+			grow: true
+		}),
 		filter.kind === "nested-multi" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NestedMultiFilterPanel, {
 			filter,
 			chrome
@@ -279,6 +289,10 @@ function renderFilterField(filter, grow) {
 		filter,
 		grow
 	});
+	if (filter.kind === "tree") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_filter_bar_tree.TreeFilterField, {
+		filter,
+		grow
+	});
 	if (filter.kind === "nested-multi") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NestedMultiFilterField, {
 		filter,
 		grow
@@ -527,6 +541,10 @@ function FilterBarKeyValueControl({ filter }) {
 		filter,
 		grow: true
 	});
+	if (filter.kind === "tree") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_filter_bar_tree.TreeFilterField, {
+		filter,
+		grow: true
+	});
 	if (filter.kind === "nested-multi") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NestedMultiFilterField, {
 		filter,
 		grow: true
@@ -1730,6 +1748,11 @@ function filterWithStagedValue(filter, value, onChange) {
 		value: isMultiFilterValue(value) ? value : {},
 		onChange: (next) => onChange(next)
 	};
+	if (filter.kind === "tree") return {
+		...filter,
+		value: isMultiFilterValue(value) ? value : {},
+		onChange: (next) => onChange(next)
+	};
 	if (filter.kind === "nested-multi") return {
 		...filter,
 		value: isMultiFilterValue(value) ? value : {},
@@ -1820,7 +1843,7 @@ function sumFilterWidths(widths) {
 }
 function estimateFilterWidth(filter) {
 	if (filter.kind === "boolean") return Math.max(88, filter.label.length * 8 + 40);
-	if (filter.kind === "multi") return 176;
+	if (filter.kind === "multi" || filter.kind === "tree") return 176;
 	if (filter.kind === "nested-multi") return 136;
 	if (filter.kind === "workload") return 224;
 	if (filter.kind === "number" || filter.kind === "duration") return 152;