@cognite/reveal-components 1.0.2 → 1.48552.0

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

@@ -1,191 +1,317 @@
-import { useTranslation as e } from "../../i18n/I18n.js";
-import { useCommand as t } from "../hooks/useCommand.js";
-import { useCommandProps as n, useCommandVisible as r, useSliderCommandValue as i } from "../hooks/useCommandProps.js";
-import { LabelWithShortcut as a } from "../utils/LabelWithShortcut.js";
-import { IconComponent as o } from "../Factories/IconFactory.js";
-import { CommandButtonInner as s } from "./CommandButtonInner.js";
-import { SectionCommand as c } from "../../../../foundation/commands/SectionCommand.js";
-import { BaseOptionCommand as l } from "../../../../foundation/commands/BaseOptionCommand.js";
-import { DropdownButton as u } from "./DropdownButton.js";
-import { BaseFilterCommand as d } from "../../../../foundation/commands/BaseFilterCommand.js";
-import { FilterButton as f } from "./FilterButton.js";
-import { BaseTooltipTrigger as p, CommandTooltipPopup as m, useCommandTooltipHandle as h } from "./PopupTriggerButton.js";
-import { SegmentedButtons as g } from "./SegmentedButtons.js";
-import { BaseSliderCommand as _ } from "../../../../foundation/commands/BaseSliderCommand.js";
-import { GroupCommand as v } from "../../../../foundation/commands/GroupCommand.js";
-import { BaseBannerCommand as y } from "../../../../foundation/commands/BaseBannerCommand.js";
-import { QualityWarningBannerCommand as b } from "../../../../foundation/concreteCommands/quality/QualityWarningBannerCommand.js";
-import { SetLengthUnitCommand as x } from "../../../../foundation/concreteCommands/units/SetLengthUnitCommand.js";
-import { SettingsCommand as S } from "../../../../foundation/concreteCommands/general/SettingsCommand.js";
-import "../../../../domains/index.js";
-import { BannerComponent as C } from "./BannerComponent.js";
-import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
-import { IconAlertTriangle as D, IconChevronDown as O } from "@tabler/icons-react";
-import { Popover as k, PopoverContent as A, PopoverTrigger as j } from "@cognite/aura/components/popover";
-import { useSignalValue as M } from "@cognite/signal-utils/react";
-import { Collapsible as N, CollapsibleContent as P, CollapsibleTrigger as F } from "@cognite/aura/components/collapsible";
-import { Slider as I } from "@cognite/aura/components/slider";
-import { Switch as L } from "@cognite/aura/components/switch";
-//#region libs/shared/reveal-components/src/ui/components/commandBased/buttons/SettingsButton.tsx
-function R(e, t) {
-	if (e instanceof S) return /* @__PURE__ */ T(z, {
-		inputCommand: e,
-		placement: t
-	}, e.uniqueId);
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { IconAlertTriangle, IconChevronDown } from "@tabler/icons-react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@cognite/aura/components/collapsible";
+import { Popover, PopoverContent, PopoverTrigger } from "@cognite/aura/components/popover";
+import { Slider } from "@cognite/aura/components/slider";
+import { Switch } from "@cognite/aura/components/switch";
+import { useSignalValue } from "@cognite/signal-utils/react";
+import { BaseBannerCommand, GroupCommand, SettingsCommand } from "../../../../domains/index.js";
+import { BaseFilterCommand } from "../../../../foundation/commands/BaseFilterCommand.js";
+import { BaseOptionCommand } from "../../../../foundation/commands/BaseOptionCommand.js";
+import { BaseSliderCommand } from "../../../../foundation/commands/BaseSliderCommand.js";
+import { SectionCommand } from "../../../../foundation/commands/SectionCommand.js";
+import { QualityWarningBannerCommand } from "../../../../foundation/concreteCommands/quality/QualityWarningBannerCommand.js";
+import { SetLengthUnitCommand } from "../../../../foundation/concreteCommands/units/SetLengthUnitCommand.js";
+import { TOOLBAR_HORIZONTAL_PANEL_OFFSET } from "../../constants.js";
+import { useTranslation } from "../../i18n/I18n.js";
+import { IconComponent } from "../Factories/IconFactory.js";
+import { useCommand } from "../hooks/useCommand.js";
+import { useCommandVisible, useCommandProps, useSliderCommandValue } from "../hooks/useCommandProps.js";
+import { LabelWithShortcut } from "../utils/LabelWithShortcut.js";
+import { BannerComponent } from "./BannerComponent.js";
+import { CommandButtonInner } from "./CommandButtonInner.js";
+import { DropdownButton } from "./DropdownButton.js";
+import { FilterButton } from "./FilterButton.js";
+import { BaseTooltipTrigger, CommandTooltipPopup, useCommandTooltipHandle } from "./PopupTriggerButton.js";
+import { SegmentedButtons } from "./SegmentedButtons.js";
+export function createSettingsButton(command, placement) {
+    if (command instanceof SettingsCommand) {
+        return /*#__PURE__*/ _jsx(SettingsButton, {
+            inputCommand: command,
+            placement: placement
+        }, command.uniqueId);
+    }
+    return undefined;
 }
-var z = ({ inputCommand: e, placement: r }) => {
-	let i = t(e), o = M(i.isOpen), { isVisible: c, isEnabled: l } = n(i), u = h();
-	if (!c || !i.hasChildren) return /* @__PURE__ */ T(w, {});
-	let d = i.label;
-	return /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ E(k, {
-		open: o,
-		onOpenChange: (e) => {
-			i.isOpen(e);
-		},
-		children: [/* @__PURE__ */ T(j, {
-			disabled: !l,
-			render: /* @__PURE__ */ T(p, {
-				handle: u,
-				render: /* @__PURE__ */ T(s, { inputCommand: e })
-			})
-		}), /* @__PURE__ */ T(A, {
-			side: r,
-			align: "end",
-			sideOffset: 12,
-			className: "p-0 w-[350px]",
-			children: /* @__PURE__ */ T("div", {
-				className: "max-h-[600px] w-full overflow-x-hidden overflow-y-auto flex p-1.5 flex-col gap-1.5 rounded-lg bg-white shadow-[0px_1px_16px_4px_rgba(79,82,104,0.1),0px_1px_8px_0px_rgba(79,82,104,0.08),0px_1px_2px_0px_rgba(79,82,104,0.24)]",
-				children: i.children.map(B)
-			})
-		})]
-	}), /* @__PURE__ */ T(m, {
-		handle: u,
-		side: r,
-		disabled: o,
-		children: /* @__PURE__ */ T(a, {
-			label: d,
-			command: i
-		})
-	})] });
+export const SettingsButton = ({ inputCommand, placement })=>{
+    const command = useCommand(inputCommand);
+    const isOpen = useSignalValue(command.isOpen);
+    const { isVisible, isEnabled } = useCommandProps(command);
+    const tooltipHandle = useCommandTooltipHandle();
+    if (!isVisible || !command.hasChildren) {
+        return /*#__PURE__*/ _jsx(_Fragment, {});
+    }
+    const label = command.label;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs(Popover, {
+                open: isOpen,
+                onOpenChange: (open)=>{
+                    command.isOpen(open);
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(PopoverTrigger, {
+                        disabled: !isEnabled,
+                        render: /*#__PURE__*/ _jsx(BaseTooltipTrigger, {
+                            handle: tooltipHandle,
+                            render: /*#__PURE__*/ _jsx(CommandButtonInner, {
+                                inputCommand: inputCommand
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(PopoverContent, {
+                        side: placement,
+                        align: "end",
+                        sideOffset: TOOLBAR_HORIZONTAL_PANEL_OFFSET,
+                        className: "p-0 w-[350px]",
+                        children: /*#__PURE__*/ _jsx("div", {
+                            className: "max-h-[600px] w-full overflow-x-hidden overflow-y-auto flex p-1.5 flex-col gap-1.5 rounded-lg bg-white shadow-[0px_1px_16px_4px_rgba(79,82,104,0.1),0px_1px_8px_0px_rgba(79,82,104,0.08),0px_1px_2px_0px_rgba(79,82,104,0.24)]",
+                            children: command.children.map(createMenuItem)
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(CommandTooltipPopup, {
+                handle: tooltipHandle,
+                side: placement,
+                disabled: isOpen,
+                children: /*#__PURE__*/ _jsx(LabelWithShortcut, {
+                    label: label,
+                    command: command
+                })
+            })
+        ]
+    });
 };
-function B(e) {
-	return e instanceof y ? /* @__PURE__ */ T(C, { command: e }, e.uniqueId) : e instanceof v ? /* @__PURE__ */ T(U, { command: e }, e.uniqueId) : V(e);
+function createMenuItem(command) {
+    if (command instanceof BaseBannerCommand) {
+        return /*#__PURE__*/ _jsx(BannerComponent, {
+            command: command
+        }, command.uniqueId);
+    }
+    if (command instanceof GroupCommand) {
+        return /*#__PURE__*/ _jsx(GroupComponent, {
+            command: command
+        }, command.uniqueId);
+    }
+    return createGroupItem(command);
 }
-function V(e) {
-	return e instanceof b ? /* @__PURE__ */ T(H, { command: e }, e.uniqueId) : e instanceof _ ? /* @__PURE__ */ T(q, { command: e }, e.uniqueId) : e instanceof x ? /* @__PURE__ */ T(g, {
-		inputCommand: e,
-		placement: "bottom",
-		fullWidth: !0
-	}, e.uniqueId) : e instanceof l ? /* @__PURE__ */ T(J, { command: e }, e.uniqueId) : e instanceof v ? /* @__PURE__ */ T(U, { command: e }, e.uniqueId) : e instanceof c ? /* @__PURE__ */ T(G, { command: e }, e.uniqueId) : e instanceof d ? /* @__PURE__ */ T(Y, { command: e }, e.uniqueId) : e.isToggle ? /* @__PURE__ */ T(W, { command: e }, e.uniqueId) : /* @__PURE__ */ T(K, { command: e }, e.uniqueId);
+function createGroupItem(command) {
+    if (command instanceof QualityWarningBannerCommand) {
+        return /*#__PURE__*/ _jsx(QualityWarningBannerComponent, {
+            command: command
+        }, command.uniqueId);
+    }
+    if (command instanceof BaseSliderCommand) {
+        return /*#__PURE__*/ _jsx(SliderComponent, {
+            command: command
+        }, command.uniqueId);
+    }
+    if (command instanceof SetLengthUnitCommand) {
+        return /*#__PURE__*/ _jsx(SegmentedButtons, {
+            inputCommand: command,
+            placement: "bottom",
+            fullWidth: true
+        }, command.uniqueId);
+    }
+    if (command instanceof BaseOptionCommand) {
+        return /*#__PURE__*/ _jsx(DropdownButtonComponent, {
+            command: command
+        }, command.uniqueId);
+    }
+    if (command instanceof GroupCommand) {
+        return /*#__PURE__*/ _jsx(GroupComponent, {
+            command: command
+        }, command.uniqueId);
+    }
+    if (command instanceof SectionCommand) {
+        return /*#__PURE__*/ _jsx(SectionComponent, {
+            command: command
+        }, command.uniqueId);
+    }
+    if (command instanceof BaseFilterCommand) {
+        return /*#__PURE__*/ _jsx(FilterButtonComponent, {
+            command: command
+        }, command.uniqueId);
+    }
+    if (command.isToggle) {
+        return /*#__PURE__*/ _jsx(ToggleComponent, {
+            command: command
+        }, command.uniqueId);
+    }
+    return /*#__PURE__*/ _jsx(ButtonComponent, {
+        command: command
+    }, command.uniqueId);
 }
-function H({ command: t }) {
-	let { t: n } = e();
-	return r(t) ? /* @__PURE__ */ E("div", {
-		className: "flex items-center gap-1.5 text-[#fb6c1d]",
-		title: t.tooltip === void 0 ? void 0 : n(t.tooltip),
-		children: [/* @__PURE__ */ T(D, {}), /* @__PURE__ */ T("p", {
-			className: "font-semibold text-xs",
-			children: n(t.content)
-		})]
-	}) : null;
+function QualityWarningBannerComponent({ command }) {
+    const { t } = useTranslation();
+    const isVisible = useCommandVisible(command);
+    if (!isVisible) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex items-center gap-1.5 text-[#fb6c1d]",
+        title: command.tooltip !== undefined ? t(command.tooltip) : undefined,
+        children: [
+            /*#__PURE__*/ _jsx(IconAlertTriangle, {}),
+            /*#__PURE__*/ _jsx("p", {
+                className: "font-semibold text-xs",
+                children: t(command.content)
+            })
+        ]
+    });
 }
-function U({ command: t }) {
-	let { t: n } = e(), i = r(t), a = M(t.isOpen);
-	return i ? t.isAccordion ? /* @__PURE__ */ E(N, {
-		open: a,
-		onOpenChange: (e) => {
-			t.isOpen(e);
-		},
-		className: "w-full",
-		children: [/* @__PURE__ */ E(F, {
-			className: "group/collapsible-trigger w-full flex items-center justify-between px-2 py-1.5 hover:bg-accent-background rounded-md",
-			children: [/* @__PURE__ */ T("span", {
-				className: "text-sm font-medium text-foreground",
-				children: t.tooltip === void 0 ? null : n(t.tooltip)
-			}), /* @__PURE__ */ T(O, { className: "size-4 shrink-0 transition-transform duration-200 group-aria-expanded/collapsible-trigger:rotate-180" })]
-		}), /* @__PURE__ */ T(P, {
-			className: "px-1 pb-1 pt-0.5 w-full",
-			children: /* @__PURE__ */ T("div", {
-				className: "w-full flex flex-col gap-2 rounded-md bg-muted-background p-2",
-				children: t.commands.map(V)
-			})
-		})]
-	}) : /* @__PURE__ */ T("div", {
-		className: "flex gap-3",
-		children: t.commands.map(V)
-	}) : null;
+function GroupComponent({ command }) {
+    const { t } = useTranslation();
+    const isGroupVisible = useCommandVisible(command);
+    const expanded = useSignalValue(command.isOpen);
+    if (!isGroupVisible) {
+        return null;
+    }
+    if (command.isAccordion) {
+        return /*#__PURE__*/ _jsxs(Collapsible, {
+            open: expanded,
+            onOpenChange: (open)=>{
+                command.isOpen(open);
+            },
+            className: "w-full",
+            children: [
+                /*#__PURE__*/ _jsxs(CollapsibleTrigger, {
+                    className: "group/collapsible-trigger w-full flex items-center justify-between px-2 py-1.5 hover:bg-accent-background rounded-md",
+                    children: [
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "text-sm font-medium text-foreground",
+                            children: command.tooltip !== undefined ? t(command.tooltip) : null
+                        }),
+                        /*#__PURE__*/ _jsx(IconChevronDown, {
+                            className: "size-4 shrink-0 transition-transform duration-200 group-aria-expanded/collapsible-trigger:rotate-180"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(CollapsibleContent, {
+                    className: "px-1 pb-1 pt-0.5 w-full",
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: "w-full flex flex-col gap-2 rounded-md bg-muted-background p-2",
+                        children: command.commands.map(createGroupItem)
+                    })
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ _jsx("div", {
+        className: "flex gap-3",
+        children: command.commands.map(createGroupItem)
+    });
 }
-function W({ command: e }) {
-	let { isVisible: t, isChecked: r, isEnabled: i } = n(e);
-	if (!t) return null;
-	let a = () => {
-		i && e.invoke();
-	};
-	return /* @__PURE__ */ E("div", {
-		className: "flex flex-row w-fit justify-start gap-2",
-		children: [/* @__PURE__ */ T(L, {
-			checked: r,
-			disabled: !i,
-			onCheckedChange: a
-		}), /* @__PURE__ */ T("p", {
-			className: "text-sm font-medium cursor-pointer",
-			onClick: a,
-			children: e.label
-		})]
-	});
+function ToggleComponent({ command }) {
+    const { isVisible, isChecked, isEnabled } = useCommandProps(command);
+    if (!isVisible) {
+        return null;
+    }
+    const toggle = ()=>{
+        if (isEnabled) {
+            command.invoke();
+        }
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-row w-fit justify-start gap-2",
+        children: [
+            /*#__PURE__*/ _jsx(Switch, {
+                checked: isChecked,
+                disabled: !isEnabled,
+                onCheckedChange: toggle
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                className: "text-sm font-medium cursor-pointer",
+                onClick: toggle,
+                children: command.label
+            })
+        ]
+    });
 }
-function G({ command: e }) {
-	return r(e) ? /* @__PURE__ */ T("p", {
-		className: "text-sm font-medium",
-		children: e.label
-	}) : null;
+function SectionComponent({ command }) {
+    const isVisible = useCommandVisible(command);
+    if (!isVisible) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx("p", {
+        className: "text-sm font-medium",
+        children: command.label
+    });
 }
-function K({ command: e }) {
-	let { isVisible: t, isEnabled: r, icon: i } = n(e);
-	return t ? /* @__PURE__ */ E("div", {
-		role: "menuitem",
-		"aria-disabled": !r,
-		className: `flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-sm cursor-pointer ${r ? "hover:bg-accent-background" : "opacity-50 pointer-events-none"}`,
-		onClick: () => {
-			r && e.invoke();
-		},
-		children: [/* @__PURE__ */ T(o, { iconName: i }), e.label]
-	}) : null;
+function ButtonComponent({ command }) {
+    const { isVisible, isEnabled, icon } = useCommandProps(command);
+    if (!isVisible) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        role: "menuitem",
+        "aria-disabled": !isEnabled,
+        className: `flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-sm cursor-pointer ${isEnabled ? 'hover:bg-accent-background' : 'opacity-50 pointer-events-none'}`,
+        onClick: ()=>{
+            if (isEnabled) command.invoke();
+        },
+        children: [
+            /*#__PURE__*/ _jsx(IconComponent, {
+                iconName: icon
+            }),
+            command.label
+        ]
+    });
 }
-function q({ command: e }) {
-	let { isVisible: t, isEnabled: r } = n(e), a = i(e);
-	if (!t) return null;
-	let o = e.label + ": " + e.getValueLabel();
-	return /* @__PURE__ */ E("div", {
-		className: "w-full flex flex-col items-start justify-between gap-1",
-		children: [/* @__PURE__ */ T("label", {
-			className: "text-sm font-medium",
-			children: o
-		}), /* @__PURE__ */ T(I, {
-			disabled: !r,
-			min: e.min,
-			max: e.max,
-			step: e.step,
-			onValueChange: ([t]) => {
-				e.value = t, e.update();
-			},
-			value: [a]
-		})]
-	});
+function SliderComponent({ command }) {
+    const { isVisible, isEnabled } = useCommandProps(command);
+    const value = useSliderCommandValue(command);
+    if (!isVisible) {
+        return null;
+    }
+    const label = command.label + ': ' + command.getValueLabel();
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "w-full flex flex-col items-start justify-between gap-1",
+        children: [
+            /*#__PURE__*/ _jsx("label", {
+                className: "text-sm font-medium",
+                children: label
+            }),
+            /*#__PURE__*/ _jsx(Slider, {
+                disabled: !isEnabled,
+                min: command.min,
+                max: command.max,
+                step: command.step,
+                onValueChange: ([newValue])=>{
+                    // eslint-disable-next-line react-hooks/immutability
+                    command.value = newValue;
+                    command.update();
+                },
+                value: [
+                    value
+                ]
+            })
+        ]
+    });
 }
-function J({ command: e }) {
-	return r(e) ? /* @__PURE__ */ T(u, {
-		inputCommand: e,
-		placement: "bottom",
-		usedInSettings: !0
-	}) : null;
+function DropdownButtonComponent({ command }) {
+    const isVisible = useCommandVisible(command);
+    if (!isVisible) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx(DropdownButton, {
+        inputCommand: command,
+        placement: "bottom",
+        usedInSettings: true
+    });
 }
-function Y({ command: e }) {
-	return e.initializeChildrenIfNeeded(), r(e) ? /* @__PURE__ */ T(f, {
-		inputCommand: e,
-		placement: "bottom",
-		usedInSettings: !0
-	}) : null;
+function FilterButtonComponent({ command }) {
+    command.initializeChildrenIfNeeded();
+    const isVisible = useCommandVisible(command);
+    if (!isVisible) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx(FilterButton, {
+        inputCommand: command,
+        placement: "bottom",
+        usedInSettings: true
+    });
 }
-//#endregion
-export { z as SettingsButton, R as createSettingsButton };
+
+//# sourceMappingURL=SettingsButton.js.map

package/dist/ui/components/commandBased/buttons/SettingsButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/ui/components/commandBased/buttons/SettingsButton.tsx"],"sourcesContent":["import { type ReactNode, type ReactElement } from 'react';\n\nimport { IconAlertTriangle, IconChevronDown } from '@tabler/icons-react';\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@cognite/aura/components/collapsible';\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@cognite/aura/components/popover';\nimport { Slider } from '@cognite/aura/components/slider';\nimport { Switch } from '@cognite/aura/components/switch';\nimport { useSignalValue } from '@cognite/signal-utils/react';\n\nimport {\n  BaseBannerCommand,\n  GroupCommand,\n  SettingsCommand,\n} from '../../../../domains';\nimport { type BaseCommand } from '../../../../foundation/commands/BaseCommand';\nimport { BaseFilterCommand } from '../../../../foundation/commands/BaseFilterCommand';\nimport { BaseOptionCommand } from '../../../../foundation/commands/BaseOptionCommand';\nimport { BaseSliderCommand } from '../../../../foundation/commands/BaseSliderCommand';\nimport { SectionCommand } from '../../../../foundation/commands/SectionCommand';\nimport { QualityWarningBannerCommand } from '../../../../foundation/concreteCommands/quality/QualityWarningBannerCommand';\nimport { SetLengthUnitCommand } from '../../../../foundation/concreteCommands/units/SetLengthUnitCommand';\nimport { TOOLBAR_HORIZONTAL_PANEL_OFFSET } from '../../constants';\nimport { useTranslation } from '../../i18n/I18n';\nimport { IconComponent } from '../Factories/IconFactory';\nimport { useCommand } from '../hooks/useCommand';\nimport {\n  useCommandVisible,\n  useCommandProps,\n  useSliderCommandValue,\n} from '../hooks/useCommandProps';\nimport { LabelWithShortcut } from '../utils/LabelWithShortcut';\nimport { type PlacementType } from '../utils/types';\n\nimport { BannerComponent } from './BannerComponent';\nimport { CommandButtonInner } from './CommandButtonInner';\nimport { DropdownButton } from './DropdownButton';\nimport { FilterButton } from './FilterButton';\nimport {\n  BaseTooltipTrigger,\n  CommandTooltipPopup,\n  useCommandTooltipHandle,\n} from './PopupTriggerButton';\nimport { SegmentedButtons } from './SegmentedButtons';\n\nexport function createSettingsButton(\n  command: BaseCommand,\n  placement: PlacementType\n): ReactElement | undefined {\n  if (command instanceof SettingsCommand) {\n    return (\n      <SettingsButton\n        key={command.uniqueId}\n        inputCommand={command}\n        placement={placement}\n      />\n    );\n  }\n  return undefined;\n}\n\nexport const SettingsButton = ({\n  inputCommand,\n  placement,\n}: {\n  inputCommand: SettingsCommand;\n  placement: PlacementType;\n}): ReactElement => {\n  const command = useCommand(inputCommand);\n  const isOpen = useSignalValue(command.isOpen);\n  const { isVisible, isEnabled } = useCommandProps(command);\n  const tooltipHandle = useCommandTooltipHandle();\n\n  if (!isVisible || !command.hasChildren) {\n    return <></>;\n  }\n\n  const label = command.label;\n\n  return (\n    <>\n      <Popover\n        open={isOpen}\n        onOpenChange={(open) => {\n          command.isOpen(open);\n        }}\n      >\n        <PopoverTrigger\n          disabled={!isEnabled}\n          render={\n            <BaseTooltipTrigger\n              handle={tooltipHandle}\n              render={<CommandButtonInner inputCommand={inputCommand} />}\n            />\n          }\n        />\n        <PopoverContent\n          side={placement}\n          align=\"end\"\n          sideOffset={TOOLBAR_HORIZONTAL_PANEL_OFFSET}\n          className=\"p-0 w-[350px]\"\n        >\n          <div className=\"max-h-[600px] w-full overflow-x-hidden overflow-y-auto flex p-1.5 flex-col gap-1.5 rounded-lg bg-white shadow-[0px_1px_16px_4px_rgba(79,82,104,0.1),0px_1px_8px_0px_rgba(79,82,104,0.08),0px_1px_2px_0px_rgba(79,82,104,0.24)]\">\n            {command.children.map(createMenuItem)}\n          </div>\n        </PopoverContent>\n      </Popover>\n      <CommandTooltipPopup\n        handle={tooltipHandle}\n        side={placement}\n        disabled={isOpen}\n      >\n        <LabelWithShortcut label={label} command={command} />\n      </CommandTooltipPopup>\n    </>\n  );\n};\n\nfunction createMenuItem(command: BaseCommand): ReactNode {\n  if (command instanceof BaseBannerCommand) {\n    return <BannerComponent key={command.uniqueId} command={command} />;\n  }\n  if (command instanceof GroupCommand) {\n    return <GroupComponent key={command.uniqueId} command={command} />;\n  }\n  return createGroupItem(command);\n}\n\nfunction createGroupItem(command: BaseCommand): ReactNode {\n  if (command instanceof QualityWarningBannerCommand) {\n    return (\n      <QualityWarningBannerComponent key={command.uniqueId} command={command} />\n    );\n  }\n  if (command instanceof BaseSliderCommand) {\n    return <SliderComponent key={command.uniqueId} command={command} />;\n  }\n  if (command instanceof SetLengthUnitCommand) {\n    return (\n      <SegmentedButtons\n        key={command.uniqueId}\n        inputCommand={command}\n        placement=\"bottom\"\n        fullWidth\n      />\n    );\n  }\n  if (command instanceof BaseOptionCommand) {\n    return <DropdownButtonComponent key={command.uniqueId} command={command} />;\n  }\n  if (command instanceof GroupCommand) {\n    return <GroupComponent key={command.uniqueId} command={command} />;\n  }\n  if (command instanceof SectionCommand) {\n    return <SectionComponent key={command.uniqueId} command={command} />;\n  }\n  if (command instanceof BaseFilterCommand) {\n    return <FilterButtonComponent key={command.uniqueId} command={command} />;\n  }\n  if (command.isToggle) {\n    return <ToggleComponent key={command.uniqueId} command={command} />;\n  }\n  return <ButtonComponent key={command.uniqueId} command={command} />;\n}\n\nfunction QualityWarningBannerComponent({\n  command,\n}: {\n  command: QualityWarningBannerCommand;\n}): ReactNode {\n  const { t } = useTranslation();\n  const isVisible = useCommandVisible(command);\n  if (!isVisible) {\n    return null;\n  }\n\n  return (\n    <div\n      className=\"flex items-center gap-1.5 text-[#fb6c1d]\"\n      title={command.tooltip !== undefined ? t(command.tooltip) : undefined}\n    >\n      <IconAlertTriangle />\n      <p className=\"font-semibold text-xs\">{t(command.content)}</p>\n    </div>\n  );\n}\n\nfunction GroupComponent({ command }: { command: GroupCommand }): ReactNode {\n  const { t } = useTranslation();\n  const isGroupVisible = useCommandVisible(command);\n\n  const expanded = useSignalValue(command.isOpen);\n\n  if (!isGroupVisible) {\n    return null;\n  }\n\n  if (command.isAccordion) {\n    return (\n      <Collapsible\n        open={expanded}\n        onOpenChange={(open) => {\n          command.isOpen(open);\n        }}\n        className=\"w-full\"\n      >\n        <CollapsibleTrigger className=\"group/collapsible-trigger w-full flex items-center justify-between px-2 py-1.5 hover:bg-accent-background rounded-md\">\n          <span className=\"text-sm font-medium text-foreground\">\n            {command.tooltip !== undefined ? t(command.tooltip) : null}\n          </span>\n          <IconChevronDown className=\"size-4 shrink-0 transition-transform duration-200 group-aria-expanded/collapsible-trigger:rotate-180\" />\n        </CollapsibleTrigger>\n        <CollapsibleContent className=\"px-1 pb-1 pt-0.5 w-full\">\n          <div className=\"w-full flex flex-col gap-2 rounded-md bg-muted-background p-2\">\n            {command.commands.map(createGroupItem)}\n          </div>\n        </CollapsibleContent>\n      </Collapsible>\n    );\n  }\n  return (\n    <div className=\"flex gap-3\">{command.commands.map(createGroupItem)}</div>\n  );\n}\n\nfunction ToggleComponent({ command }: { command: BaseCommand }): ReactNode {\n  const { isVisible, isChecked, isEnabled } = useCommandProps(command);\n  if (!isVisible) {\n    return null;\n  }\n\n  const toggle = (): void => {\n    if (isEnabled) {\n      command.invoke();\n    }\n  };\n\n  return (\n    <div className=\"flex flex-row w-fit justify-start gap-2\">\n      <Switch\n        checked={isChecked}\n        disabled={!isEnabled}\n        onCheckedChange={toggle}\n      />\n      <p className=\"text-sm font-medium cursor-pointer\" onClick={toggle}>\n        {command.label}\n      </p>\n    </div>\n  );\n}\n\nfunction SectionComponent({ command }: { command: BaseCommand }): ReactNode {\n  const isVisible = useCommandVisible(command);\n  if (!isVisible) {\n    return null;\n  }\n\n  return <p className=\"text-sm font-medium\">{command.label}</p>;\n}\n\nfunction ButtonComponent({ command }: { command: BaseCommand }): ReactNode {\n  const { isVisible, isEnabled, icon } = useCommandProps(command);\n  if (!isVisible) {\n    return null;\n  }\n  return (\n    <div\n      role=\"menuitem\"\n      aria-disabled={!isEnabled}\n      className={`flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-sm cursor-pointer ${\n        isEnabled\n          ? 'hover:bg-accent-background'\n          : 'opacity-50 pointer-events-none'\n      }`}\n      onClick={() => {\n        if (isEnabled) command.invoke();\n      }}\n    >\n      <IconComponent iconName={icon} />\n      {command.label}\n    </div>\n  );\n}\n\nfunction SliderComponent({\n  command,\n}: {\n  command: BaseSliderCommand;\n}): ReactNode {\n  const { isVisible, isEnabled } = useCommandProps(command);\n  const value = useSliderCommandValue(command);\n\n  if (!isVisible) {\n    return null;\n  }\n\n  const label = command.label + ': ' + command.getValueLabel();\n  return (\n    <div className=\"w-full flex flex-col items-start justify-between gap-1\">\n      <label className=\"text-sm font-medium\">{label}</label>\n      <Slider\n        disabled={!isEnabled}\n        min={command.min}\n        max={command.max}\n        step={command.step}\n        onValueChange={([newValue]) => {\n          // eslint-disable-next-line react-hooks/immutability\n          command.value = newValue;\n          command.update();\n        }}\n        value={[value]}\n      />\n    </div>\n  );\n}\n\nfunction DropdownButtonComponent({\n  command,\n}: {\n  command: BaseOptionCommand;\n}): ReactNode {\n  const isVisible = useCommandVisible(command);\n  if (!isVisible) {\n    return null;\n  }\n\n  return (\n    <DropdownButton\n      inputCommand={command}\n      placement=\"bottom\"\n      usedInSettings={true}\n    />\n  );\n}\n\nfunction FilterButtonComponent({\n  command,\n}: {\n  command: BaseFilterCommand;\n}): ReactNode {\n  command.initializeChildrenIfNeeded();\n  const isVisible = useCommandVisible(command);\n  if (!isVisible) {\n    return null;\n  }\n  return (\n    <FilterButton\n      inputCommand={command}\n      placement=\"bottom\"\n      usedInSettings={true}\n    />\n  );\n}\n"],"names":["IconAlertTriangle","IconChevronDown","Collapsible","CollapsibleContent","CollapsibleTrigger","Popover","PopoverContent","PopoverTrigger","Slider","Switch","useSignalValue","BaseBannerCommand","GroupCommand","SettingsCommand","BaseFilterCommand","BaseOptionCommand","BaseSliderCommand","SectionCommand","QualityWarningBannerCommand","SetLengthUnitCommand","TOOLBAR_HORIZONTAL_PANEL_OFFSET","useTranslation","IconComponent","useCommand","useCommandVisible","useCommandProps","useSliderCommandValue","LabelWithShortcut","BannerComponent","CommandButtonInner","DropdownButton","FilterButton","BaseTooltipTrigger","CommandTooltipPopup","useCommandTooltipHandle","SegmentedButtons","createSettingsButton","command","placement","SettingsButton","inputCommand","uniqueId","undefined","isOpen","isVisible","isEnabled","tooltipHandle","hasChildren","label","open","onOpenChange","disabled","render","handle","side","align","sideOffset","className","div","children","map","createMenuItem","GroupComponent","createGroupItem","QualityWarningBannerComponent","SliderComponent","fullWidth","DropdownButtonComponent","SectionComponent","FilterButtonComponent","isToggle","ToggleComponent","ButtonComponent","t","title","tooltip","p","content","isGroupVisible","expanded","isAccordion","span","commands","isChecked","toggle","invoke","checked","onCheckedChange","onClick","icon","role","aria-disabled","iconName","value","getValueLabel","min","max","step","onValueChange","newValue","update","usedInSettings","initializeChildrenIfNeeded"],"mappings":"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"}

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

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