@cognite/reveal-components 1.0.2 → 1.48552.0

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

@@ -1,12 +1,12 @@
-import { ReactElement } from 'react';
-import { Menu as MenuPrimitive } from '@base-ui/react/menu';
-import { BaseCommand } from '../../../../foundation/commands/BaseCommand';
-import { BaseOptionCommand } from '../../../../foundation/commands/BaseOptionCommand';
-import { PlacementType } from '../utils/types';
+import { type ReactElement } from "react";
+import { type Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { type BaseCommand } from "../../../../foundation/commands/BaseCommand";
+import { BaseOptionCommand } from "../../../../foundation/commands/BaseOptionCommand";
+import { type PlacementType } from "../utils/types";
 export declare function isSpuriousTriggerClickClose(open: boolean, { reason, event }: MenuPrimitive.Root.ChangeEventDetails): boolean;
 export declare function createDropdownButton(command: BaseCommand, placement: PlacementType): ReactElement | undefined;
-export declare const DropdownButton: ({ inputCommand, placement, usedInSettings, }: {
-    inputCommand: BaseOptionCommand;
-    placement: PlacementType;
-    usedInSettings?: boolean;
+export declare const DropdownButton: ({ inputCommand, placement, usedInSettings }: {
+	inputCommand: BaseOptionCommand;
+	placement: PlacementType;
+	usedInSettings?: boolean;
 }) => ReactElement;

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

@@ -1,111 +1,163 @@
-import { useCommand as e } from "../hooks/useCommand.js";
-import { useCommandProps as t, useCommandVisible as n } from "../hooks/useCommandProps.js";
-import { LabelWithShortcut as r } from "../utils/LabelWithShortcut.js";
-import { mapButtonType as i } from "../utils/utilities.js";
-import { BaseOptionCommand as a, OptionType as o } from "../../../../foundation/commands/BaseOptionCommand.js";
-import { useState as s } from "react";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
-import { Tooltip as d, TooltipContent as f, TooltipProvider as p, TooltipTrigger as m } from "@cognite/aura/components/tooltip";
-import { Button as h } from "@cognite/aura/components/button";
-import { IconChevronDown as g, IconChevronUp as _ } from "@tabler/icons-react";
-import { DropdownMenu as v, DropdownMenuCheckboxItem as y, DropdownMenuContent as b, DropdownMenuTrigger as x } from "@cognite/aura/components/dropdown-menu";
-//#region libs/shared/reveal-components/src/ui/components/commandBased/buttons/DropdownButton.tsx
-function S(e, { reason: t, event: n }) {
-	return !e && t === "trigger-press" && n instanceof MouseEvent && n.type === "click" && n.detail > 0;
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
+import { Button } from "@cognite/aura/components/button";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger } from "@cognite/aura/components/dropdown-menu";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@cognite/aura/components/tooltip";
+import { BaseOptionCommand, OptionType } from "../../../../foundation/commands/BaseOptionCommand.js";
+import { useCommand } from "../hooks/useCommand.js";
+import { useCommandVisible, useCommandProps } from "../hooks/useCommandProps.js";
+import { TOOLTIP_DELAY } from "../utils/constants.js";
+import { LabelWithShortcut } from "../utils/LabelWithShortcut.js";
+import { mapButtonType } from "../utils/utilities.js";
+// base-ui opens the menu on mousedown, then wrongly treats the trailing click as a
+// second press and closes it again. A real second press to close it fires on
+// mousedown, never a trailing click, so only that spurious case is filtered out.
+export function isSpuriousTriggerClickClose(open, { reason, event }) {
+    return !open && reason === 'trigger-press' && event instanceof MouseEvent && event.type === 'click' && event.detail > 0;
 }
-function C(e, t) {
-	if (e instanceof a && e.optionType === o.Dropdown) return /* @__PURE__ */ l(w, {
-		inputCommand: e,
-		placement: t
-	}, e.uniqueId);
+export function createDropdownButton(command, placement) {
+    if (command instanceof BaseOptionCommand && command.optionType === OptionType.Dropdown) {
+        return /*#__PURE__*/ _jsx(DropdownButton, {
+            inputCommand: command,
+            placement: placement
+        }, command.uniqueId);
+    }
+    return undefined;
 }
-var w = ({ inputCommand: t, placement: r, usedInSettings: i = !1 }) => {
-	let a = e(t);
-	return n(a) ? i ? /* @__PURE__ */ l(E, { command: a }) : /* @__PURE__ */ l(T, {
-		command: a,
-		placement: r
-	}) : /* @__PURE__ */ l(c, {});
-}, T = ({ command: e, placement: n }) => {
-	let { uniqueId: a, isEnabled: o } = t(e), [y, C] = s(!1);
-	if (!e.children?.length) return /* @__PURE__ */ l(c, {});
-	let w = e.selectedChild?.label, T = i(e.buttonType), E = e.label;
-	return /* @__PURE__ */ l(p, {
-		delayDuration: 500,
-		children: /* @__PURE__ */ u(d, {
-			disabled: E === void 0 || y,
-			children: [/* @__PURE__ */ u(v, {
-				open: y,
-				onOpenChange: (e, t) => {
-					S(e, t) || C(e);
-				},
-				children: [/* @__PURE__ */ l(m, { render: /* @__PURE__ */ l(x, { render: /* @__PURE__ */ u(h, {
-					variant: T,
-					size: "sm",
-					disabled: !o,
-					"aria-label": E,
-					className: `pl-1 pr-2 py-1 ${y ? "bg-accent-background" : ""}`,
-					children: [l(y ? _ : g, {}), w]
-				}, a) }) }), /* @__PURE__ */ l(b, {
-					side: n,
-					align: "start",
-					children: e.children.map((e) => /* @__PURE__ */ l(D, {
-						command: e,
-						setOpen: C
-					}, e.uniqueId))
-				})]
-			}), /* @__PURE__ */ l(f, {
-				side: n,
-				children: /* @__PURE__ */ l(r, {
-					label: E,
-					command: e
-				})
-			})]
-		})
-	});
-}, E = ({ command: e }) => {
-	let [t, n] = s(!1);
-	if (!e.children?.length) return /* @__PURE__ */ l(c, {});
-	let r = e.label, i = e.selectedChild?.label;
-	return /* @__PURE__ */ u("div", {
-		className: "flex flex-row self-stretch items-center gap-3",
-		children: [/* @__PURE__ */ l("p", {
-			title: r,
-			className: "w-[80px] truncate text-sm",
-			children: r
-		}), /* @__PURE__ */ l("div", {
-			className: "flex-1",
-			children: /* @__PURE__ */ u(v, {
-				open: t,
-				onOpenChange: n,
-				children: [/* @__PURE__ */ l(x, { render: /* @__PURE__ */ u(h, {
-					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__ */ l("span", {
-						className: "font-normal",
-						children: i
-					}), l(t ? _ : g, {})]
-				}) }), /* @__PURE__ */ l(b, {
-					side: "bottom",
-					align: "start",
-					children: e.children.map((e) => /* @__PURE__ */ l(D, {
-						command: e,
-						setOpen: n
-					}, e.uniqueId))
-				})]
-			})
-		})]
-	});
-}, D = ({ command: e, setOpen: n }) => {
-	let { isEnabled: r, isChecked: i } = t(e);
-	return /* @__PURE__ */ l(y, {
-		disabled: !r,
-		checked: i,
-		onCheckedChange: () => {
-			e.invoke(), n(!1);
-		},
-		children: e.label
-	});
+export const DropdownButton = ({ inputCommand, placement, usedInSettings = false })=>{
+    const command = useCommand(inputCommand);
+    const isVisible = useCommandVisible(command);
+    if (!isVisible) {
+        return /*#__PURE__*/ _jsx(_Fragment, {});
+    }
+    return usedInSettings ? /*#__PURE__*/ _jsx(MenuItemWithDropdown, {
+        command: command
+    }) : /*#__PURE__*/ _jsx(DropdownElement, {
+        command: command,
+        placement: placement
+    });
 };
-//#endregion
-export { w as DropdownButton, C as createDropdownButton, S as isSpuriousTriggerClickClose };
+const DropdownElement = ({ command, placement })=>{
+    const { uniqueId, isEnabled } = useCommandProps(command);
+    const [isOpen, setOpen] = useState(false);
+    if (!command.children?.length) {
+        return /*#__PURE__*/ _jsx(_Fragment, {});
+    }
+    const selectedLabel = command.selectedChild?.label;
+    const variant = mapButtonType(command.buttonType);
+    const label = command.label;
+    const tooltipDisabled = label === undefined || isOpen;
+    return /*#__PURE__*/ _jsx(TooltipProvider, {
+        delayDuration: TOOLTIP_DELAY,
+        children: /*#__PURE__*/ _jsxs(Tooltip, {
+            disabled: tooltipDisabled,
+            children: [
+                /*#__PURE__*/ _jsxs(DropdownMenu, {
+                    open: isOpen,
+                    onOpenChange: (open, eventDetails)=>{
+                        if (isSpuriousTriggerClickClose(open, eventDetails)) {
+                            return;
+                        }
+                        setOpen(open);
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(TooltipTrigger, {
+                            render: /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
+                                render: /*#__PURE__*/ _jsxs(Button, {
+                                    variant: variant,
+                                    size: "sm",
+                                    disabled: !isEnabled,
+                                    "aria-label": label,
+                                    className: `pl-1 pr-2 py-1 ${isOpen ? 'bg-accent-background' : ''}`,
+                                    children: [
+                                        isOpen ? /*#__PURE__*/ _jsx(IconChevronUp, {}) : /*#__PURE__*/ _jsx(IconChevronDown, {}),
+                                        selectedLabel
+                                    ]
+                                }, uniqueId)
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(DropdownMenuContent, {
+                            side: placement,
+                            align: "start",
+                            children: command.children.map((child)=>/*#__PURE__*/ _jsx(MenuOptionItem, {
+                                    command: child,
+                                    setOpen: setOpen
+                                }, child.uniqueId))
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(TooltipContent, {
+                    side: placement,
+                    children: /*#__PURE__*/ _jsx(LabelWithShortcut, {
+                        label: label,
+                        command: command
+                    })
+                })
+            ]
+        })
+    });
+};
+const MenuItemWithDropdown = ({ command })=>{
+    const [isOpen, setOpen] = useState(false);
+    if (!command.children?.length) {
+        return /*#__PURE__*/ _jsx(_Fragment, {});
+    }
+    const label = command.label;
+    const selectedLabel = command.selectedChild?.label;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-row self-stretch items-center gap-3",
+        children: [
+            /*#__PURE__*/ _jsx("p", {
+                title: label,
+                className: "w-[80px] truncate text-sm",
+                children: label
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "flex-1",
+                children: /*#__PURE__*/ _jsxs(DropdownMenu, {
+                    open: isOpen,
+                    onOpenChange: setOpen,
+                    children: [
+                        /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
+                            render: /*#__PURE__*/ _jsxs(Button, {
+                                variant: "ghost",
+                                "aria-label": label,
+                                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${isOpen ? ' bg-accent-background' : ''}`,
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: "font-normal",
+                                        children: selectedLabel
+                                    }),
+                                    isOpen ? /*#__PURE__*/ _jsx(IconChevronUp, {}) : /*#__PURE__*/ _jsx(IconChevronDown, {})
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(DropdownMenuContent, {
+                            side: "bottom",
+                            align: "start",
+                            children: command.children.map((child)=>/*#__PURE__*/ _jsx(MenuOptionItem, {
+                                    command: child,
+                                    setOpen: setOpen
+                                }, child.uniqueId))
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+const MenuOptionItem = ({ command, setOpen })=>{
+    const { isEnabled, isChecked } = useCommandProps(command);
+    return /*#__PURE__*/ _jsx(DropdownMenuCheckboxItem, {
+        disabled: !isEnabled,
+        checked: isChecked,
+        onCheckedChange: ()=>{
+            command.invoke();
+            setOpen(false);
+        },
+        children: command.label
+    });
+};
+
+//# sourceMappingURL=DropdownButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/ui/components/commandBased/buttons/DropdownButton.tsx"],"sourcesContent":["import {\n  useState,\n  type ReactElement,\n  type SetStateAction,\n  type Dispatch,\n} from 'react';\n\nimport { type Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport { IconChevronDown, IconChevronUp } from '@tabler/icons-react';\n\nimport { Button } from '@cognite/aura/components/button';\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@cognite/aura/components/dropdown-menu';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@cognite/aura/components/tooltip';\n\nimport { type BaseCommand } from '../../../../foundation/commands/BaseCommand';\nimport {\n  BaseOptionCommand,\n  OptionType,\n} from '../../../../foundation/commands/BaseOptionCommand';\nimport { useCommand } from '../hooks/useCommand';\nimport { useCommandVisible, useCommandProps } from '../hooks/useCommandProps';\nimport { TOOLTIP_DELAY } from '../utils/constants';\nimport { LabelWithShortcut } from '../utils/LabelWithShortcut';\nimport { type PlacementType } from '../utils/types';\nimport { mapButtonType } from '../utils/utilities';\n\n// base-ui opens the menu on mousedown, then wrongly treats the trailing click as a\n// second press and closes it again. A real second press to close it fires on\n// mousedown, never a trailing click, so only that spurious case is filtered out.\nexport function isSpuriousTriggerClickClose(\n  open: boolean,\n  { reason, event }: MenuPrimitive.Root.ChangeEventDetails\n): boolean {\n  return (\n    !open &&\n    reason === 'trigger-press' &&\n    event instanceof MouseEvent &&\n    event.type === 'click' &&\n    event.detail > 0\n  );\n}\n\nexport function createDropdownButton(\n  command: BaseCommand,\n  placement: PlacementType\n): ReactElement | undefined {\n  if (\n    command instanceof BaseOptionCommand &&\n    command.optionType === OptionType.Dropdown\n  ) {\n    return (\n      <DropdownButton\n        key={command.uniqueId}\n        inputCommand={command}\n        placement={placement}\n      />\n    );\n  }\n  return undefined;\n}\n\nexport const DropdownButton = ({\n  inputCommand,\n  placement,\n  usedInSettings = false,\n}: {\n  inputCommand: BaseOptionCommand;\n  placement: PlacementType;\n  usedInSettings?: boolean;\n}): ReactElement => {\n  const command = useCommand(inputCommand);\n  const isVisible = useCommandVisible(command);\n\n  if (!isVisible) {\n    return <></>;\n  }\n\n  return usedInSettings ? (\n    <MenuItemWithDropdown command={command} />\n  ) : (\n    <DropdownElement command={command} placement={placement} />\n  );\n};\n\nconst DropdownElement = ({\n  command,\n  placement,\n}: {\n  command: BaseOptionCommand;\n  placement: PlacementType;\n}): ReactElement => {\n  const { uniqueId, isEnabled } = useCommandProps(command);\n  const [isOpen, setOpen] = useState(false);\n\n  if (!command.children?.length) {\n    return <></>;\n  }\n\n  const selectedLabel = command.selectedChild?.label;\n  const variant = mapButtonType(command.buttonType);\n  const label = command.label;\n  const tooltipDisabled = label === undefined || isOpen;\n\n  return (\n    <TooltipProvider delayDuration={TOOLTIP_DELAY}>\n      <Tooltip disabled={tooltipDisabled}>\n        <DropdownMenu\n          open={isOpen}\n          onOpenChange={(open, eventDetails) => {\n            if (isSpuriousTriggerClickClose(open, eventDetails)) {\n              return;\n            }\n            setOpen(open);\n          }}\n        >\n          <TooltipTrigger\n            render={\n              <DropdownMenuTrigger\n                render={\n                  <Button\n                    variant={variant}\n                    size=\"sm\"\n                    key={uniqueId}\n                    disabled={!isEnabled}\n                    aria-label={label}\n                    className={`pl-1 pr-2 py-1 ${isOpen ? 'bg-accent-background' : ''}`}\n                  >\n                    {isOpen ? <IconChevronUp /> : <IconChevronDown />}\n                    {selectedLabel}\n                  </Button>\n                }\n              />\n            }\n          />\n          <DropdownMenuContent side={placement} align=\"start\">\n            {command.children.map((child) => (\n              <MenuOptionItem\n                key={child.uniqueId}\n                command={child}\n                setOpen={setOpen}\n              />\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <TooltipContent side={placement}>\n          <LabelWithShortcut label={label} command={command} />\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n};\n\nconst MenuItemWithDropdown = ({\n  command,\n}: {\n  command: BaseOptionCommand;\n}): ReactElement => {\n  const [isOpen, setOpen] = useState(false);\n\n  if (!command.children?.length) {\n    return <></>;\n  }\n\n  const label = command.label;\n  const selectedLabel = command.selectedChild?.label;\n\n  return (\n    <div className=\"flex flex-row self-stretch items-center gap-3\">\n      <p title={label} className=\"w-[80px] truncate text-sm\">\n        {label}\n      </p>\n      <div className=\"flex-1\">\n        <DropdownMenu open={isOpen} onOpenChange={setOpen}>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                aria-label={label}\n                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${isOpen ? ' bg-accent-background' : ''}`}\n              >\n                <span className=\"font-normal\">{selectedLabel}</span>\n                {isOpen ? <IconChevronUp /> : <IconChevronDown />}\n              </Button>\n            }\n          />\n          <DropdownMenuContent side=\"bottom\" align=\"start\">\n            {command.children.map((child) => (\n              <MenuOptionItem\n                key={child.uniqueId}\n                command={child}\n                setOpen={setOpen}\n              />\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </div>\n  );\n};\n\nconst MenuOptionItem = ({\n  command,\n  setOpen,\n}: {\n  command: BaseCommand;\n  setOpen: Dispatch<SetStateAction<boolean>>;\n}): ReactElement => {\n  const { isEnabled, isChecked } = useCommandProps(command);\n  return (\n    <DropdownMenuCheckboxItem\n      disabled={!isEnabled}\n      checked={isChecked}\n      onCheckedChange={() => {\n        command.invoke();\n        setOpen(false);\n      }}\n    >\n      {command.label}\n    </DropdownMenuCheckboxItem>\n  );\n};\n"],"names":["useState","IconChevronDown","IconChevronUp","Button","DropdownMenu","DropdownMenuCheckboxItem","DropdownMenuContent","DropdownMenuTrigger","Tooltip","TooltipContent","TooltipProvider","TooltipTrigger","BaseOptionCommand","OptionType","useCommand","useCommandVisible","useCommandProps","TOOLTIP_DELAY","LabelWithShortcut","mapButtonType","isSpuriousTriggerClickClose","open","reason","event","MouseEvent","type","detail","createDropdownButton","command","placement","optionType","Dropdown","DropdownButton","inputCommand","uniqueId","undefined","usedInSettings","isVisible","MenuItemWithDropdown","DropdownElement","isEnabled","isOpen","setOpen","children","length","selectedLabel","selectedChild","label","variant","buttonType","tooltipDisabled","delayDuration","disabled","onOpenChange","eventDetails","render","size","aria-label","className","side","align","map","child","MenuOptionItem","div","p","title","span","isChecked","checked","onCheckedChange","invoke"],"mappings":"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"}

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

@@ -1,10 +1,10 @@
-import { ReactElement } from 'react';
-import { BaseCommand } from '../../../../domains';
-import { BaseFilterCommand } from '../../../../foundation/commands/BaseFilterCommand';
-import { PlacementType } from '../utils/types';
+import { type ReactElement } from "react";
+import { type BaseCommand } from "../../../../domains";
+import { BaseFilterCommand } from "../../../../foundation/commands/BaseFilterCommand";
+import { type 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;
+export declare const FilterButton: ({ inputCommand, usedInSettings }: {
+	inputCommand: BaseFilterCommand;
+	placement: PlacementType;
+	usedInSettings?: boolean;
 }) => ReactElement;

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

@@ -1,120 +1,166 @@
-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);
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
+import { Button } from "@cognite/aura/components/button";
+import { CheckboxItemControl as Checkbox } from "@cognite/aura/components/checkbox";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@cognite/aura/components/dropdown-menu";
+import { Label } from "@cognite/aura/components/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@cognite/aura/components/popover";
+import { BaseFilterCommand } from "../../../../foundation/commands/BaseFilterCommand.js";
+import { TOOLBAR_HORIZONTAL_PANEL_OFFSET } from "../../constants.js";
+import { IconComponent } from "../Factories/IconFactory.js";
+import { useCommand } from "../hooks/useCommand.js";
+import { useCommandProperty } from "../hooks/useCommandProperty.js";
+import { useCommandProps } from "../hooks/useCommandProps.js";
+import { mapButtonType } from "../utils/utilities.js";
+import { FilterItem } from "./FilterItem.js";
+export function createFilterButton(command, placement) {
+    if (command instanceof BaseFilterCommand) {
+        return /*#__PURE__*/ _jsx(FilterButton, {
+            inputCommand: command,
+            placement: placement
+        }, command.uniqueId);
+    }
+    return undefined;
 }
-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))]
-		})]
-	});
+export const FilterButton = ({ inputCommand, usedInSettings = false })=>{
+    const command = useCommand(inputCommand);
+    command.initializeChildrenIfNeeded();
+    const { icon, isVisible, isEnabled } = useCommandProps(command);
+    const isAllChecked = useCommandProperty(command, ()=>command.isAllChecked);
+    const isSomeChecked = useCommandProperty(command, ()=>command.isSomeChecked);
+    const selectedLabel = useCommandProperty(command, ()=>command.getSelectedLabel());
+    const [isOpen, setOpen] = useState(false);
+    const children = command.children;
+    if (!isVisible || children === undefined || children.length === 0) {
+        return /*#__PURE__*/ _jsx(_Fragment, {});
+    }
+    const PanelContent = /*#__PURE__*/ _jsx(FilterSelectPanelContent, {
+        command: command,
+        isAllChecked: isAllChecked,
+        isSomeChecked: isSomeChecked,
+        label: command.label
+    });
+    return usedInSettings ? /*#__PURE__*/ _jsx(FilterDropdown, {
+        label: command.label,
+        selectedLabel: selectedLabel,
+        isOpen: isOpen,
+        setOpen: setOpen,
+        PanelContent: PanelContent
+    }) : /*#__PURE__*/ _jsx(FilterMenu, {
+        command: command,
+        iconName: icon,
+        isOpen: isOpen,
+        setOpen: setOpen,
+        isEnabled: isEnabled,
+        PanelContent: PanelContent
+    });
 };
-//#endregion
-export { C as FilterButton, S as createFilterButton };
+const FilterMenu = ({ command, isOpen, setOpen, isEnabled, iconName, PanelContent })=>{
+    const variant = mapButtonType(command.buttonType);
+    return /*#__PURE__*/ _jsxs(DropdownMenu, {
+        open: isOpen,
+        onOpenChange: setOpen,
+        children: [
+            /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
+                render: /*#__PURE__*/ _jsx(Button, {
+                    variant: variant,
+                    size: "icon-sm",
+                    disabled: !isEnabled,
+                    "aria-label": command.label,
+                    className: isOpen ? 'bg-accent-background' : undefined,
+                    children: /*#__PURE__*/ _jsx(IconComponent, {
+                        iconName: iconName
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsx(DropdownMenuContent, {
+                side: "right",
+                align: "end",
+                sideOffset: TOOLBAR_HORIZONTAL_PANEL_OFFSET,
+                children: PanelContent
+            })
+        ]
+    });
+};
+const FilterDropdown = ({ label, selectedLabel, isOpen, setOpen, PanelContent })=>{
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-row self-stretch items-center gap-3",
+        children: [
+            /*#__PURE__*/ _jsx("p", {
+                title: label,
+                className: "w-[80px] truncate text-sm",
+                children: label
+            }),
+            /*#__PURE__*/ _jsxs(Popover, {
+                open: isOpen,
+                onOpenChange: setOpen,
+                children: [
+                    /*#__PURE__*/ _jsx(PopoverTrigger, {
+                        render: /*#__PURE__*/ _jsxs(Button, {
+                            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${isOpen ? ' bg-accent-background' : ''}`,
+                            onClick: ()=>{
+                                setOpen((prev)=>!prev);
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx("span", {
+                                    className: "font-normal",
+                                    children: selectedLabel
+                                }),
+                                isOpen ? /*#__PURE__*/ _jsx(IconChevronUp, {}) : /*#__PURE__*/ _jsx(IconChevronDown, {})
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(PopoverContent, {
+                        side: "right",
+                        align: "end",
+                        className: "overflow-hidden p-0",
+                        children: PanelContent
+                    })
+                ]
+            })
+        ]
+    });
+};
+const FilterSelectPanelContent = ({ command, isAllChecked, isSomeChecked, label })=>{
+    const children = command.children;
+    const allId = 'filter-all';
+    const isIndeterminate = !isAllChecked && isSomeChecked;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex w-full flex-col",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center gap-2 px-2 py-1.5 hover:bg-accent-background cursor-pointer",
+                onClick: ()=>command.toggleAllChecked(),
+                children: [
+                    /*#__PURE__*/ _jsx(Checkbox, {
+                        id: allId,
+                        checked: isIndeterminate ? false : isAllChecked,
+                        indeterminate: isIndeterminate,
+                        className: "pointer-events-none"
+                    }),
+                    /*#__PURE__*/ _jsx(Label, {
+                        htmlFor: allId,
+                        className: "flex-1 pointer-events-none",
+                        children: BaseFilterCommand.getAllString()
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "max-h-[300px] overflow-y-auto",
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "text-xs font-medium text-muted-foreground px-2 py-1",
+                        children: label
+                    }),
+                    children?.map((child)=>/*#__PURE__*/ _jsx(FilterItem, {
+                            command: child
+                        }, child.uniqueId))
+                ]
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=FilterButton.js.map