@cognite/reveal-components 1.0.0

package/dist/ui/components/commandBased/RevealButtons.js

@@ -0,0 +1,85 @@
+import { HelpCommand as e } from "../../../foundation/concreteCommands/general/HelpCommand.js";
+import { NavigationTool as t } from "../../../foundation/concreteCommands/navigation/NavigationTool.js";
+import { UndoCommand as n } from "../../../foundation/concreteCommands/general/UndoCommand.js";
+import { AnnotationsSelectTool as r } from "../../../domains/annotations/commands/AnnotationsSelectTool.js";
+import { AnnotationsCreateTool as i } from "../../../domains/annotations/commands/AnnotationsCreateTool.js";
+import { ClipTool as a } from "../../../domains/clipping/ClipTool.js";
+import { MeasurementTool as o } from "../../../domains/measurements/MeasurementTool.js";
+import { FitViewCommand as s } from "../../../foundation/concreteCommands/navigation/FitViewCommand.js";
+import { KeyboardSpeedCommand as c } from "../../../foundation/concreteCommands/navigation/KeyboardSpeedCommand.js";
+import { PointCloudFilterCommand as l } from "../../../domains/reveal/pointCloud/commands/PointCloudFilterCommand.js";
+import { PointsOfInterestTool as u } from "../../../domains/pointsOfInterest/PointsOfInterestTool.js";
+import { SettingsCommand as d } from "../../../foundation/concreteCommands/general/SettingsCommand.js";
+import { SetAxisVisibleCommand as f } from "../../../domains/axis/SetAxisVisibleCommand.js";
+import { Image360AnnotationSelectTool as p } from "../../../domains/annotation360/Image360AnnotationSelectTool.js";
+import { Image360AnnotationCreateTool as m } from "../../../domains/annotation360/Image360AnnotationCreateTool.js";
+import { ShowTreeViewCommand as h } from "../../../foundation/concreteCommands/general/ShowTreeViewCommand.js";
+import { AnnotationsShowCommand as g } from "../../../domains/annotations/commands/AnnotationsShowCommand.js";
+import { AnnotationsShowOnTopCommand as _ } from "../../../domains/annotations/commands/AnnotationsShowOnTopCommand.js";
+import { DeleteSelectedPointsOfInterestCommand as v } from "../../../domains/pointsOfInterest/DeletePointsOfInterestCommand.js";
+import { InitiatePointsOfInterestCommand as y } from "../../../domains/pointsOfInterest/InitiatePointsOfInterestCommand.js";
+import { Image360ActionCommand as b } from "../../../domains/reveal/Image360Collection/commands/Image360ActionCommand.js";
+import { Show360AnnotationsCommand as x } from "../../../domains/reveal/Image360Collection/commands/Show360AnnotationsCommand.js";
+import { ShareCommand as S } from "../../../foundation/concreteCommands/general/ShareCommand.js";
+import { ShowLayersCommand as C } from "../../../foundation/concreteCommands/general/ShowLayersCommand.js";
+import { SetFlexibleControlsTypeCommand as w } from "../../../foundation/concreteCommands/navigation/SetFlexibleControlsTypeCommand.js";
+import { SetOrbitOrFirstPersonModeCommand as T } from "../../../foundation/concreteCommands/navigation/SetOrbitOrFirstPersonModeCommand.js";
+import { createButtonFromCommandConstructor as E } from "./main/CommandButtons.js";
+import { useEffect as D, useMemo as O } from "react";
+import { Fragment as k, jsx as A, jsxs as j } from "react/jsx-runtime";
+import { FlexibleControlsType as M, Image360Action as N } from "@cognite/reveal";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/RevealButtons.tsx
+var P = class P {
+	static ShowLayers = (e) => E(() => new C(), e);
+	static ShowTreeView = (e) => E(() => new h(), e);
+	static Help = (t) => E(() => new e(), t);
+	static Share = (e) => E(() => new S(), e);
+	static Settings = (e) => E(() => new d(e.include360Images, e.includePois, e.topBanner), e);
+	static PointCloudFilter = (e) => E(() => new l(), e);
+	static FitView = (e) => E(() => new s(), e);
+	static NavigationTool = (e) => E(() => new t(), e);
+	static SetAxisVisible = (e) => E(() => new f(), e);
+	static Measurement = (e) => E(() => new o(), e);
+	static Clip = (e) => E(() => new a(), e);
+	static Undo = (e) => E(() => new n(), e);
+	static SetOrbitOrFirstPersonMode = (e) => E(() => new T(), e);
+	static SetOrbitMode = (e) => E(() => new w(M.Orbit), e);
+	static SetFirstPersonMode = (e) => E(() => new w(M.FirstPerson), e);
+	static PointsOfInterest = ({ scene: e, ...t }) => {
+		let n = O(() => new u(), []);
+		return D(() => {
+			n.setScene(e);
+		}, [n, e]), E(() => n, t);
+	};
+	static PointsOfInterestInitiateCreation = (e) => E(() => new y(e.point, e.clickEvent), e);
+	static DeleteSelectedPointOfInterest = (e) => E(() => new v(), e);
+	static KeyboardSpeed = (e) => E(() => new c(), e);
+	static Image360Button = (e) => E(() => new b(e.action), e);
+	static Image360Buttons = (e) => /* @__PURE__ */ j(k, { children: [
+		/* @__PURE__ */ A(P.Image360Button, {
+			...e,
+			action: N.Enter
+		}),
+		/* @__PURE__ */ A(P.Image360Button, {
+			...e,
+			action: N.Backward
+		}),
+		/* @__PURE__ */ A(P.Image360Button, {
+			...e,
+			action: N.Forward
+		}),
+		/* @__PURE__ */ A(P.Image360Button, {
+			...e,
+			action: N.Exit
+		})
+	] });
+	static Image360AnnotationCreateTool = (e) => E(() => new m(), e);
+	static Image360AnnotationSelectTool = (e) => E(() => new p(), e);
+	static Show360Annotations = (e) => E(() => new x(), e);
+	static AnnotationsSelect = (e) => E(() => new r(), e);
+	static AnnotationsCreate = (e) => E(() => new i(), e);
+	static AnnotationsShow = (e) => E(() => new g(), e);
+	static AnnotationsShowOnTop = (e) => E(() => new _(), e);
+};
+//#endregion
+export { P as RevealButtons };

package/dist/ui/components/commandBased/buttons/BannerComponent.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+import { BaseBannerCommand } from '../../../../foundation/commands/BaseBannerCommand';
+export declare const BannerComponent: ({ command: inputCommand, }: {
+    command: BaseBannerCommand;
+}) => ReactNode;

package/dist/ui/components/commandBased/buttons/BannerComponent.js

@@ -0,0 +1,28 @@
+import { translate as e } from "../../../../foundation/utilities/translation/translateUtils.js";
+import { useCommand as t } from "../hooks/useCommand.js";
+import { useCommandProperty as n } from "../hooks/useCommandProperty.js";
+import { useCommandVisible as r } from "../hooks/useCommandProps.js";
+import { jsx as i } from "react/jsx-runtime";
+import { Alert as a, AlertDescription as o } from "@cognite/aura/components/alert";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/buttons/BannerComponent.tsx
+var s = ({ command: s }) => {
+	let l = t(s), u = r(l), d = n(l, () => l.content), f = n(l, () => l.status);
+	if (!u) return null;
+	let p = c(f);
+	return /* @__PURE__ */ i(a, {
+		variant: p,
+		className: "flex p-2 items-start gap-2 self-stretch",
+		children: /* @__PURE__ */ i(o, { children: e(d) })
+	});
+};
+function c(e) {
+	switch (e) {
+		case "warning": return "warning";
+		case "critical":
+		case "error":
+		case "negative": return "error";
+		default: return "default";
+	}
+}
+//#endregion
+export { s as BannerComponent };

package/dist/ui/components/commandBased/buttons/CommandButton.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { BaseCommand } from '../../../../foundation/commands/BaseCommand';
+import { PlacementType } from '../utils/types';
+export declare function createButton(command: BaseCommand, placement: PlacementType): ReactElement | undefined;
+export declare const CommandButton: ({ inputCommand, placement, isTooltipDisabled, }: {
+    inputCommand: BaseCommand;
+    placement: PlacementType;
+    isTooltipDisabled?: boolean;
+}) => ReactElement;

package/dist/ui/components/commandBased/buttons/CommandButton.js

@@ -0,0 +1,33 @@
+import { useCommand as e } from "../hooks/useCommand.js";
+import { useCommandProps as t } from "../hooks/useCommandProps.js";
+import { LabelWithShortcut as n } from "../utils/LabelWithShortcut.js";
+import { CommandButtonInner as r } from "./CommandButtonInner.js";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Tooltip as s, TooltipContent as c, TooltipProvider as l, TooltipTrigger as u } from "@cognite/aura/components/tooltip";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/buttons/CommandButton.tsx
+function d(e, t) {
+	return /* @__PURE__ */ a(f, {
+		inputCommand: e,
+		placement: t
+	}, e.uniqueId);
+}
+var f = ({ inputCommand: d, placement: f, isTooltipDisabled: p }) => {
+	let m = e(d), { isVisible: h } = t(m);
+	if (!h) return /* @__PURE__ */ a(i, {});
+	let g = m.label;
+	return /* @__PURE__ */ a(l, {
+		delayDuration: 500,
+		children: /* @__PURE__ */ o(s, {
+			open: p === !0 || g === void 0 ? !1 : void 0,
+			children: [/* @__PURE__ */ a(u, { render: /* @__PURE__ */ a(r, { inputCommand: d }) }), /* @__PURE__ */ a(c, {
+				side: f,
+				children: /* @__PURE__ */ a(n, {
+					label: g,
+					command: m
+				})
+			})]
+		})
+	});
+};
+//#endregion
+export { f as CommandButton, d as createButton };

package/dist/ui/components/commandBased/buttons/CommandButtonInner.d.ts

@@ -0,0 +1,7 @@
+import { ComponentProps, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { Button } from '@cognite/aura/components/button';
+import { BaseCommand } from '../../../../foundation/commands/BaseCommand';
+export type CommandButtonInnerProps = {
+    inputCommand: BaseCommand;
+} & ComponentProps<typeof Button>;
+export declare const CommandButtonInner: ForwardRefExoticComponent<Omit<CommandButtonInnerProps, 'ref'> & RefAttributes<HTMLButtonElement>>;

package/dist/ui/components/commandBased/buttons/CommandButtonInner.js

@@ -0,0 +1,31 @@
+import { useRenderTarget as e } from "../../RevealCanvas/ViewerContext.js";
+import { useCommand as t } from "../hooks/useCommand.js";
+import { useCommandProps as n } from "../hooks/useCommandProps.js";
+import { IconComponent as r } from "../Factories/IconFactory.js";
+import { mapButtonType as i } from "../utils/utilities.js";
+import { forwardRef as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+import { Button as s } from "@cognite/aura/components/button";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/buttons/CommandButtonInner.tsx
+var c = a(({ inputCommand: a, onClick: c, ...l }, u) => {
+	let d = e(), f = t(a), { icon: p, uniqueId: m, isVisible: h, isEnabled: g, isChecked: _, buttonType: v } = n(f), y = _ ? "default" : i(v), b = _ ? "white" : y === "destructive" ? "darkred" : "black";
+	if (!h) return null;
+	let x = (e) => {
+		f.invoke?.(), d?.domElement?.focus?.(), c?.(e);
+	};
+	return /* @__PURE__ */ o(s, {
+		ref: u,
+		variant: y,
+		disabled: !g,
+		"aria-label": f.label,
+		size: "icon-sm",
+		...l,
+		onClick: x,
+		children: /* @__PURE__ */ o(r, {
+			iconName: p,
+			color: b
+		})
+	}, m);
+});
+//#endregion
+export { c as CommandButtonInner };

package/dist/ui/components/commandBased/buttons/CustomInputField.context.d.ts

@@ -0,0 +1,17 @@
+import { Context, FC, ComponentProps } from 'react';
+import { Button } from '@cognite/aura/components/button';
+import { Input } from '@cognite/aura/components/input';
+import { Textarea } from '@cognite/aura/components/textarea';
+import { CommentProps } from '../main/Comment';
+type ButtonProps = ComponentProps<typeof Button>;
+type InputProps = ComponentProps<typeof Input>;
+type TextareaProps = ComponentProps<typeof Textarea>;
+export type CustomInputFieldDependencies = {
+    Input: FC<InputProps>;
+    Button: FC<ButtonProps>;
+    Textarea: FC<TextareaProps>;
+    Comment: FC<CommentProps>;
+};
+export declare const defaultCustomInputFieldDependencies: CustomInputFieldDependencies;
+export declare const CustomInputFieldContext: Context<CustomInputFieldDependencies>;
+export {};

package/dist/ui/components/commandBased/buttons/CustomInputField.context.js

@@ -0,0 +1,14 @@
+import { Comment as e } from "../main/Comment.js";
+import { createContext as t } from "react";
+import { Button as n } from "@cognite/aura/components/button";
+import { Input as r } from "@cognite/aura/components/input";
+import { Textarea as i } from "@cognite/aura/components/textarea";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/buttons/CustomInputField.context.tsx
+var a = {
+	Input: r,
+	Button: n,
+	Textarea: i,
+	Comment: e
+}, o = t(a);
+//#endregion
+export { o as CustomInputFieldContext, a as defaultCustomInputFieldDependencies };

package/dist/ui/components/commandBased/buttons/CustomInputField.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement, ReactNode } from 'react';
+import { BaseCommand } from '../../../../domains';
+import { CustomBaseInputCommand } from '../../../../foundation/commands/CustomBaseInputCommand';
+import { PlacementType } from '../utils/types';
+export declare function createCustomInputField(command: BaseCommand, placement: PlacementType): ReactElement | undefined;
+export declare const CustomInputField: ({ inputCommand, }: {
+    inputCommand: CustomBaseInputCommand;
+    placement: string;
+}) => ReactNode;

package/dist/ui/components/commandBased/buttons/CustomInputField.js

@@ -0,0 +1,82 @@
+import { translateIfExists as e } from "../../../../foundation/utilities/translation/translateUtils.js";
+import { useCommand as t } from "../hooks/useCommand.js";
+import { useCommandProperty as n } from "../hooks/useCommandProperty.js";
+import { useCommandEnable as r } from "../hooks/useCommandProps.js";
+import { CustomBaseInputCommand as i } from "../../../../foundation/commands/CustomBaseInputCommand.js";
+import { CustomInputFieldContext as a } from "./CustomInputField.context.js";
+import { useCallback as o, useContext as s, useMemo as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/buttons/CustomInputField.tsx
+function f(e, t) {
+	if (e instanceof i) return /* @__PURE__ */ u(p, {
+		inputCommand: e,
+		placement: t
+	}, e.uniqueId);
+}
+var p = ({ inputCommand: i }) => {
+	let { Button: f, Input: p, Textarea: m, Comment: h } = s(a), g = t(i), _ = r(g), v = n(g, () => e(g.getPostButtonLabel())), y = n(g, () => e(g.getCancelButtonLabel())), b = n(g, () => g.getAllPlaceholders()?.map((t) => e(t))), [x, S] = l(!0), C = c(() => g.contents.map((e) => e.type === "submitButtons" ? {
+		type: e.type,
+		content: void 0,
+		key: crypto.randomUUID()
+	} : (e.type, {
+		type: e.type,
+		content: e.content,
+		key: crypto.randomUUID()
+	})), [g]), [w, T] = l(C), E = o((e, t) => {
+		let n = w === void 0 ? [] : [...w];
+		n[e].content = n[e] === void 0 ? "" : t, T(n);
+		let r = n.some((e) => e.type === "text" && (e?.content ?? "").trim() === "");
+		S(r);
+	}, [w, T]), D = w.map(({ content: e, key: t, type: n }, r) => n === "text" ? /* @__PURE__ */ u(p, {
+		value: e,
+		disabled: !_,
+		onChange: (e) => {
+			E(r, e.target.value);
+		},
+		placeholder: b?.[r]
+	}, t) : n === "comment" ? /* @__PURE__ */ u(m, {
+		placeholder: b?.[r],
+		value: e,
+		onChange: (e) => {
+			E(r, e.target.value);
+		}
+	}, t) : n === "customInput" ? e : n === "submitButtons" ? /* @__PURE__ */ d("div", {
+		className: "flex gap-2",
+		children: [/* @__PURE__ */ u(f, {
+			variant: "secondary",
+			disabled: !_,
+			onClick: () => {
+				g.onCancel?.(), T([]);
+			},
+			children: y
+		}), /* @__PURE__ */ u(f, {
+			style: { color: "white" },
+			disabled: x || !_,
+			onClick: () => {
+				g.invokeWithContent(w ?? []), T([]);
+			},
+			children: v
+		})]
+	}, t) : n === "commentWithButtons" ? /* @__PURE__ */ u(h, {
+		placeholder: b?.[r],
+		message: e,
+		setMessage: (e) => {
+			E(r, e);
+		},
+		onPostMessage: () => {
+			g.invokeWithContent(w ?? []), T([]);
+		},
+		postButtonText: v,
+		postButtonDisabled: x || !_,
+		cancelButtonText: y,
+		cancelButtonDisabled: !_,
+		onCancel: g.onCancel,
+		showButtons: !0
+	}, t) : null);
+	return /* @__PURE__ */ u("div", {
+		className: "flex flex-col gap-2 p-1.5",
+		children: D
+	});
+};
+//#endregion
+export { p as CustomInputField, f as createCustomInputField };

package/dist/ui/components/commandBased/buttons/DividerCreator.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement } from 'react';
+import { BaseCommand } from '../../../../foundation/commands/BaseCommand';
+import { PlacementType } from '../utils/types';
+export declare function createDivider(command: BaseCommand, placement: PlacementType): ReactElement | undefined;
+export declare function createDividerByKey(key: string, placement: PlacementType): ReactElement;

package/dist/ui/components/commandBased/buttons/DividerCreator.js

@@ -0,0 +1,18 @@
+import { getDividerDirection as e } from "../utils/utilities.js";
+import { DividerCommand as t } from "../../../../foundation/commands/DividerCommand.js";
+import { SectionCommand as n } from "../../../../foundation/commands/SectionCommand.js";
+import { jsx as r } from "react/jsx-runtime";
+import { Separator as i } from "@cognite/aura/components/separator";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/buttons/DividerCreator.tsx
+function a(e, r) {
+	if (e instanceof t || e instanceof n) return o(e.uniqueId, r);
+}
+function o(t, n) {
+	let a = e(n) === "vertical" ? "vertical" : "horizontal";
+	return /* @__PURE__ */ r(i, {
+		orientation: a,
+		className: a === "vertical" ? "h-6" : "w-6"
+	}, t);
+}
+//#endregion
+export { a as createDivider, o as createDividerByKey };

package/dist/ui/components/commandBased/buttons/DropdownButton.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { BaseCommand } from '../../../../foundation/commands/BaseCommand';
+import { BaseOptionCommand } from '../../../../foundation/commands/BaseOptionCommand';
+import { PlacementType } from '../utils/types';
+export declare function createDropdownButton(command: BaseCommand, placement: PlacementType): ReactElement | undefined;
+export declare const DropdownButton: ({ inputCommand, placement, usedInSettings, }: {
+    inputCommand: BaseOptionCommand;
+    placement: PlacementType;
+    usedInSettings?: boolean;
+}) => ReactElement;

package/dist/ui/components/commandBased/buttons/DropdownButton.js

@@ -0,0 +1,92 @@
+import { useCommand as e } from "../hooks/useCommand.js";
+import { useCommandProps as t, useCommandVisible as n } from "../hooks/useCommandProps.js";
+import { mapButtonType as r } from "../utils/utilities.js";
+import { BaseOptionCommand as i, OptionType as a } from "../../../../foundation/commands/BaseOptionCommand.js";
+import { useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Button as u } from "@cognite/aura/components/button";
+import { IconChevronDown as d, IconChevronUp as f } from "@tabler/icons-react";
+import { DropdownMenu as p, DropdownMenuCheckboxItem as m, DropdownMenuContent as h, DropdownMenuTrigger as g } from "@cognite/aura/components/dropdown-menu";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/buttons/DropdownButton.tsx
+function _(e, t) {
+	if (e instanceof i && e.optionType === a.Dropdown) return /* @__PURE__ */ c(v, {
+		inputCommand: e,
+		placement: t
+	}, e.uniqueId);
+}
+var v = ({ inputCommand: t, placement: r, usedInSettings: i = !1 }) => {
+	let a = e(t);
+	return n(a) ? i ? /* @__PURE__ */ c(b, { command: a }) : /* @__PURE__ */ c(y, {
+		command: a,
+		placement: r
+	}) : /* @__PURE__ */ c(s, {});
+}, y = ({ command: e, placement: n }) => {
+	let { uniqueId: i, isEnabled: a } = t(e), [m, _] = o(!1);
+	if (!e.children?.length) return /* @__PURE__ */ c(s, {});
+	let v = e.selectedChild?.label, y = r(e.buttonType);
+	return /* @__PURE__ */ l(p, {
+		open: m,
+		onOpenChange: _,
+		children: [/* @__PURE__ */ c(g, { render: /* @__PURE__ */ l(u, {
+			variant: y,
+			size: "sm",
+			disabled: !a,
+			"aria-label": e.label,
+			className: `pl-1 pr-2 py-1 ${m ? "bg-accent-background" : ""}`,
+			children: [c(m ? f : d, {}), v]
+		}, i) }), /* @__PURE__ */ c(h, {
+			side: n,
+			align: "start",
+			children: e.children.map((e) => /* @__PURE__ */ c(x, {
+				command: e,
+				setOpen: _
+			}, e.uniqueId))
+		})]
+	});
+}, b = ({ command: e }) => {
+	let [t, n] = o(!1);
+	if (!e.children?.length) return /* @__PURE__ */ c(s, {});
+	let r = e.label, i = e.selectedChild?.label;
+	return /* @__PURE__ */ l("div", {
+		className: "flex flex-row self-stretch items-center gap-3",
+		children: [/* @__PURE__ */ c("p", {
+			title: r,
+			className: "w-[80px] truncate text-sm",
+			children: r
+		}), /* @__PURE__ */ c("div", {
+			className: "flex-1",
+			children: /* @__PURE__ */ l(p, {
+				open: t,
+				onOpenChange: n,
+				children: [/* @__PURE__ */ c(g, { render: /* @__PURE__ */ l(u, {
+					variant: "ghost",
+					"aria-label": r,
+					className: `w-full justify-between border border-transparent rounded-lg bg-background py-2 pl-2 pr-1 text-sm hover:bg-accent-background hover:border-border-emphasized${t ? " bg-accent-background" : ""}`,
+					children: [/* @__PURE__ */ c("span", {
+						className: "font-normal",
+						children: i
+					}), c(t ? f : d, {})]
+				}) }), /* @__PURE__ */ c(h, {
+					side: "bottom",
+					align: "start",
+					children: e.children.map((e) => /* @__PURE__ */ c(x, {
+						command: e,
+						setOpen: n
+					}, e.uniqueId))
+				})]
+			})
+		})]
+	});
+}, x = ({ command: e, setOpen: n }) => {
+	let { isEnabled: r, isChecked: i } = t(e);
+	return /* @__PURE__ */ c(m, {
+		disabled: !r,
+		checked: i,
+		onCheckedChange: () => {
+			e.invoke(), n(!1);
+		},
+		children: e.label
+	});
+};
+//#endregion
+export { v as DropdownButton, _ as createDropdownButton };

package/dist/ui/components/commandBased/buttons/FilterButton.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { BaseCommand } from '../../../../domains';
+import { BaseFilterCommand } from '../../../../foundation/commands/BaseFilterCommand';
+import { PlacementType } from '../utils/types';
+export declare function createFilterButton(command: BaseCommand, placement: PlacementType): ReactElement | undefined;
+export declare const FilterButton: ({ inputCommand, usedInSettings, }: {
+    inputCommand: BaseFilterCommand;
+    placement: PlacementType;
+    usedInSettings?: boolean;
+}) => ReactElement;

package/dist/ui/components/commandBased/buttons/FilterButton.js

@@ -0,0 +1,120 @@
+import { useCommand as e } from "../hooks/useCommand.js";
+import { useCommandProperty as t } from "../hooks/useCommandProperty.js";
+import { useCommandProps as n } from "../hooks/useCommandProps.js";
+import { IconComponent as r } from "../Factories/IconFactory.js";
+import { mapButtonType as i } from "../utils/utilities.js";
+import { BaseFilterCommand as a } from "../../../../foundation/commands/BaseFilterCommand.js";
+import { FilterItem as o } from "./FilterItem.js";
+import { useState as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Button as d } from "@cognite/aura/components/button";
+import { IconChevronDown as f, IconChevronUp as p } from "@tabler/icons-react";
+import { DropdownMenu as m, DropdownMenuContent as h, DropdownMenuTrigger as g } from "@cognite/aura/components/dropdown-menu";
+import { CheckboxItemControl as _ } from "@cognite/aura/components/checkbox";
+import { Label as v } from "@cognite/aura/components/label";
+import { Popover as y, PopoverContent as b, PopoverTrigger as x } from "@cognite/aura/components/popover";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/buttons/FilterButton.tsx
+function S(e, t) {
+	if (e instanceof a) return /* @__PURE__ */ l(C, {
+		inputCommand: e,
+		placement: t
+	}, e.uniqueId);
+}
+var C = ({ inputCommand: r, usedInSettings: i = !1 }) => {
+	let a = e(r);
+	a.initializeChildrenIfNeeded();
+	let { icon: o, isVisible: u, isEnabled: d } = n(a), f = t(a, () => a.isAllChecked), p = t(a, () => a.isSomeChecked), m = t(a, () => a.getSelectedLabel()), [h, g] = s(!1), _ = a.children;
+	if (!u || _ === void 0 || _.length === 0) return /* @__PURE__ */ l(c, {});
+	let v = /* @__PURE__ */ l(E, {
+		command: a,
+		isAllChecked: f,
+		isSomeChecked: p,
+		label: a.label
+	});
+	return i ? /* @__PURE__ */ l(T, {
+		label: a.label,
+		selectedLabel: m,
+		isOpen: h,
+		setOpen: g,
+		PanelContent: v
+	}) : /* @__PURE__ */ l(w, {
+		command: a,
+		iconName: o,
+		isOpen: h,
+		setOpen: g,
+		isEnabled: d,
+		PanelContent: v
+	});
+}, w = ({ command: e, isOpen: t, setOpen: n, isEnabled: a, iconName: o, PanelContent: s }) => {
+	let c = i(e.buttonType);
+	return /* @__PURE__ */ u(m, {
+		open: t,
+		onOpenChange: n,
+		children: [/* @__PURE__ */ l(g, { render: /* @__PURE__ */ l(d, {
+			variant: c,
+			size: "icon-sm",
+			disabled: !a,
+			"aria-label": e.label,
+			className: t ? "bg-accent-background" : void 0,
+			children: /* @__PURE__ */ l(r, { iconName: o })
+		}) }), /* @__PURE__ */ l(h, {
+			side: "right",
+			align: "end",
+			sideOffset: 12,
+			children: s
+		})]
+	});
+}, T = ({ label: e, selectedLabel: t, isOpen: n, setOpen: r, PanelContent: i }) => /* @__PURE__ */ u("div", {
+	className: "flex flex-row self-stretch items-center gap-3",
+	children: [/* @__PURE__ */ l("p", {
+		title: e,
+		className: "w-[80px] truncate text-sm",
+		children: e
+	}), /* @__PURE__ */ u(y, {
+		open: n,
+		onOpenChange: r,
+		children: [/* @__PURE__ */ l(x, { render: /* @__PURE__ */ u(d, {
+			variant: "ghost",
+			className: `justify-between border border-transparent rounded-lg bg-background py-2 pl-2 pr-1 text-sm hover:bg-accent-background hover:border-border-emphasized${n ? " bg-accent-background" : ""}`,
+			onClick: () => {
+				r((e) => !e);
+			},
+			children: [/* @__PURE__ */ l("span", {
+				className: "font-normal",
+				children: t
+			}), l(n ? p : f, {})]
+		}) }), /* @__PURE__ */ l(b, {
+			side: "right",
+			align: "end",
+			className: "overflow-hidden p-0",
+			children: i
+		})]
+	})]
+}), E = ({ command: e, isAllChecked: t, isSomeChecked: n, label: r }) => {
+	let i = e.children, s = "filter-all", c = !t && n;
+	return /* @__PURE__ */ u("div", {
+		className: "flex w-full flex-col",
+		children: [/* @__PURE__ */ u("div", {
+			className: "flex items-center gap-2 px-2 py-1.5 hover:bg-accent-background cursor-pointer",
+			onClick: () => e.toggleAllChecked(),
+			children: [/* @__PURE__ */ l(_, {
+				id: s,
+				checked: !c && t,
+				indeterminate: c,
+				className: "pointer-events-none"
+			}), /* @__PURE__ */ l(v, {
+				htmlFor: s,
+				className: "flex-1 pointer-events-none",
+				children: a.getAllString()
+			})]
+		}), /* @__PURE__ */ u("div", {
+			className: "max-h-[300px] overflow-y-auto",
+			children: [/* @__PURE__ */ l("div", {
+				className: "text-xs font-medium text-muted-foreground px-2 py-1",
+				children: r
+			}), i?.map((e) => /* @__PURE__ */ l(o, { command: e }, e.uniqueId))]
+		})]
+	});
+};
+//#endregion
+export { C as FilterButton, S as createFilterButton };

package/dist/ui/components/commandBased/buttons/FilterItem.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement } from 'react';
+import { BaseFilterItemCommand } from '../../../../foundation/commands/BaseFilterCommand';
+export declare const FilterItem: ({ command, }: {
+    command: BaseFilterItemCommand;
+}) => ReactElement;

package/dist/ui/components/commandBased/buttons/FilterItem.js

@@ -0,0 +1,35 @@
+import { useCommandProps as e } from "../hooks/useCommandProps.js";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import { CheckboxItemControl as i } from "@cognite/aura/components/checkbox";
+import { Label as a } from "@cognite/aura/components/label";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/buttons/FilterItem.tsx
+var o = ({ command: o }) => {
+	let { uniqueId: s, isVisible: c, isEnabled: l, isChecked: u } = e(o);
+	if (!c) return /* @__PURE__ */ n(t, {});
+	let d = `filter-item-${s}`;
+	return /* @__PURE__ */ r("div", {
+		className: `flex items-center gap-2 px-3 py-1 ${l ? "hover:bg-accent-background cursor-pointer" : "opacity-50 pointer-events-none"}`,
+		onClick: () => {
+			l && o.invoke();
+		},
+		children: [
+			/* @__PURE__ */ n(i, {
+				id: d,
+				checked: u,
+				disabled: !l,
+				className: "pointer-events-none"
+			}),
+			/* @__PURE__ */ n(a, {
+				htmlFor: d,
+				className: "flex-1 truncate cursor-pointer text-sm pointer-events-none",
+				children: o.label
+			}),
+			o.color !== void 0 && /* @__PURE__ */ n("div", {
+				className: "size-4 shrink-0 rounded-sm",
+				style: { backgroundColor: o.color.getStyle() }
+			})
+		]
+	});
+};
+//#endregion
+export { o as FilterItem };

package/dist/ui/components/commandBased/buttons/HelpButton.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { BaseCommand } from '../../../../domains';
+import { PlacementType } from '../utils/types';
+export declare function createHelpButton(command: BaseCommand, placement: PlacementType): ReactElement | undefined;