@openremote/or-tree-menu 1.24.0 → 1.24.2

package/custom-elements-jsx.d.ts

@@ -1,5 +1,4 @@
-
-import type { *, OrTreeMenu } from "./lib/index.d.ts";
+import type { OrTreeMenu } from "./lib/index.d.ts";
 import type { OrTreeGroup } from "./lib/or-tree-group.d.ts";
 import type { OrTreeNode } from "./lib/or-tree-node.d.ts";
 
@@ -29,7 +28,6 @@ export type ScopedElements<
 };
 
 type BaseProps<T extends HTMLElement> = {
-
   /** Content added between the opening and closing tags of the element */
   children?: any;
   /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
@@ -52,6 +50,8 @@ type BaseProps<T extends HTMLElement> = {
   key?: string | number;
   /** Specifies the language of the element. */
   lang?: string;
+  /** Defines the element's semantic role for accessibility APIs. */
+  role?: string;
   /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
   part?: string;
   /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
@@ -72,195 +72,376 @@ type BaseProps<T extends HTMLElement> = {
   popovertarget?: "top" | "bottom" | "left" | "right" | "auto";
   /** Specifies the action to be performed on a popover element being controlled by a control element. */
   popovertargetaction?: "show" | "hide" | "toggle";
-
-} ;
-
-type BaseEvents = {
-
-
 };
 
-
+type BaseEvents = {};
 
 export type OrTreeMenuProps = {
   /** List of node items in the menu.
 Uses the TreeNode format for rendering the OrTreeNode elements. */
-  "nodes"?: OrTreeMenu['nodes'];
+  nodes?: OrTreeMenu["nodes"];
   /** Changes the allowed selection method within the tree.
 Common options are `LEAF`, `SINGLE` and `MULTI`. */
-  "selection"?: OrTreeMenu['selection'];
+  selection?: OrTreeMenu["selection"];
   /** Disables and enables dragging of nodes into groups. */
-  "draggable"?: OrTreeMenu['draggable'];
+  draggable?: OrTreeMenu["draggable"];
   /** Removes the header from the tree menu. */
-  "no-header"?: OrTreeMenu['noHeader'];
+  "no-header"?: OrTreeMenu["noHeader"];
   /** Removes the header from the tree menu. */
-  "noHeader"?: OrTreeMenu['noHeader'];
+  noHeader?: OrTreeMenu["noHeader"];
   /** Adjusts the title in the menu header. */
-  "menu-title"?: OrTreeMenu['menuTitle'];
+  "menu-title"?: OrTreeMenu["menuTitle"];
   /** Adjusts the title in the menu header. */
-  "menuTitle"?: OrTreeMenu['menuTitle'];
+  menuTitle?: OrTreeMenu["menuTitle"];
   /** List of options available to sort the object with */
-  "sort-options"?: OrTreeMenu['sortOptions'];
+  "sort-options"?: OrTreeMenu["sortOptions"];
   /** List of options available to sort the object with */
-  "sortOptions"?: OrTreeMenu['sortOptions'];
+  sortOptions?: OrTreeMenu["sortOptions"];
   /** Represents the selected sorting option */
-  "sort-by"?: OrTreeMenu['sortBy'];
+  "sort-by"?: OrTreeMenu["sortBy"];
   /** Represents the selected sorting option */
-  "sortBy"?: OrTreeMenu['sortBy'];
+  sortBy?: OrTreeMenu["sortBy"];
   /** Automatically prioritizes the groups, and positions these on top. */
-  "group-first"?: OrTreeMenu['groupFirst'];
+  "group-first"?: OrTreeMenu["groupFirst"];
   /** Automatically prioritizes the groups, and positions these on top. */
-  "groupFirst"?: OrTreeMenu['groupFirst'];
+  groupFirst?: OrTreeMenu["groupFirst"];
 
   /**  */
-  "onnodes"?: (e: CustomEvent<OrTreeDragEvent>) => void;
+  onnodes?: (e: OrTreeDragEvent) => void;
+  /** Triggers upon selecting a node, and dispatches a list of the nodes selected. */
+  "onor-tree-select"?: (e: OrTreeSelectEvent) => void;
+  /** Triggers upon dragging a node to a new group, and dispatches a list of dragged nodes, the group node, and the updated list of all nodes. */
+  "onor-tree-drag"?: (e: OrTreeDragEvent) => void;
+};
+
+export type OrTreeMenuSolidJsProps = {
+  /** List of node items in the menu.
+Uses the TreeNode format for rendering the OrTreeNode elements. */
+  "prop:nodes"?: OrTreeMenu["nodes"];
+  /** Changes the allowed selection method within the tree.
+Common options are `LEAF`, `SINGLE` and `MULTI`. */
+  "prop:selection"?: OrTreeMenu["selection"];
+  /** Disables and enables dragging of nodes into groups. */
+  "prop:draggable"?: OrTreeMenu["draggable"];
+  /** Removes the header from the tree menu. */
+  "bool:no-header"?: OrTreeMenu["noHeader"];
+  /** Removes the header from the tree menu. */
+  "prop:noHeader"?: OrTreeMenu["noHeader"];
+  /** Adjusts the title in the menu header. */
+  "attr:menu-title"?: OrTreeMenu["menuTitle"];
+  /** Adjusts the title in the menu header. */
+  "prop:menuTitle"?: OrTreeMenu["menuTitle"];
+  /** List of options available to sort the object with */
+  "attr:sort-options"?: OrTreeMenu["sortOptions"];
+  /** List of options available to sort the object with */
+  "prop:sortOptions"?: OrTreeMenu["sortOptions"];
+  /** Represents the selected sorting option */
+  "attr:sort-by"?: OrTreeMenu["sortBy"];
+  /** Represents the selected sorting option */
+  "prop:sortBy"?: OrTreeMenu["sortBy"];
+  /** Automatically prioritizes the groups, and positions these on top. */
+  "bool:group-first"?: OrTreeMenu["groupFirst"];
+  /** Automatically prioritizes the groups, and positions these on top. */
+  "prop:groupFirst"?: OrTreeMenu["groupFirst"];
   /**  */
-  "onundefined"?: (e: CustomEvent<OrTreeSelectEvent>) => void;
+  "on:nodes"?: (e: OrTreeDragEvent) => void;
   /** Triggers upon selecting a node, and dispatches a list of the nodes selected. */
-  "onor-tree-select"?: (e: CustomEvent<OrTreeSelectEvent>) => void;
+  "on:or-tree-select"?: (e: OrTreeSelectEvent) => void;
   /** Triggers upon dragging a node to a new group, and dispatches a list of dragged nodes, the group node, and the updated list of all nodes. */
-  "onor-tree-drag"?: (e: CustomEvent<OrTreeDragEvent>) => void;
-}
+  "on:or-tree-drag"?: (e: OrTreeDragEvent) => void;
 
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
 export type OrTreeGroupProps = {
   /** Determines the visibility of child nodes.
 Setting this to `false` hides them, and acts as a 'collapsed' state. */
-  "expanded"?: OrTreeGroup['expanded'];
+  expanded?: OrTreeGroup["expanded"];
   /** Only allows child nodes to be selected, making the expander (parent node) readonly.
 If this is set to false, only the chevron icon can be used to collapse/expand the list. */
-  "leaf"?: OrTreeGroup['leaf'];
+  leaf?: OrTreeGroup["leaf"];
   /** Makes the group readonly */
-  "readonly"?: OrTreeGroup['readonly'];
-
+  readonly?: OrTreeGroup["readonly"];
+};
 
-}
+export type OrTreeGroupSolidJsProps = {
+  /** Determines the visibility of child nodes.
+Setting this to `false` hides them, and acts as a 'collapsed' state. */
+  "prop:expanded"?: OrTreeGroup["expanded"];
+  /** Only allows child nodes to be selected, making the expander (parent node) readonly.
+If this is set to false, only the chevron icon can be used to collapse/expand the list. */
+  "prop:leaf"?: OrTreeGroup["leaf"];
+  /** Makes the group readonly */
+  "prop:readonly"?: OrTreeGroup["readonly"];
 
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
 export type OrTreeNodeProps = {
   /** HTML attribute that only applies CSS, showing this node cannot be interacted with. */
-  "readonly"?: OrTreeNode['readonly'];
+  readonly?: OrTreeNode["readonly"];
   /** HTML attribute that only applies CSS, marking the node as 'selected'. */
-  "selected"?: OrTreeNode['selected'];
-
+  selected?: OrTreeNode["selected"];
+};
 
-}
+export type OrTreeNodeSolidJsProps = {
+  /** HTML attribute that only applies CSS, showing this node cannot be interacted with. */
+  "prop:readonly"?: OrTreeNode["readonly"];
+  /** HTML attribute that only applies CSS, marking the node as 'selected'. */
+  "prop:selected"?: OrTreeNode["selected"];
 
-  export type CustomElements = {
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
+export type CustomElements = {
+  /**
+   * A component for displaying a hierarchical, tree-like structure of elements.
+   * Common use cases are visualizing parent-child relationships, or for grouping elements together.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `nodes`: List of node items in the menu.
+   * Uses the TreeNode format for rendering the OrTreeNode elements.
+   * - `selection`: Changes the allowed selection method within the tree.
+   * Common options are `LEAF`, `SINGLE` and `MULTI`.
+   * - `draggable`: Disables and enables dragging of nodes into groups.
+   * - `no-header`/`noHeader`: Removes the header from the tree menu.
+   * - `menu-title`/`menuTitle`: Adjusts the title in the menu header.
+   * - `sort-options`/`sortOptions`: List of options available to sort the object with
+   * - `sort-by`/`sortBy`: Represents the selected sorting option
+   * - `group-first`/`groupFirst`: Automatically prioritizes the groups, and positions these on top.
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `nodes`: undefined
+   * - `undefined`: undefined
+   * - `or-tree-select`: Triggers upon selecting a node, and dispatches a list of the nodes selected.
+   * - `or-tree-drag`: Triggers upon dragging a node to a new group, and dispatches a list of dragged nodes, the group node, and the updated list of all nodes.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `moveNodesToGroup(nodesToMove: TreeNode[], groupNode?: TreeNode) => void`: Function that moves an array of TreeNode into another TreeNode, by adding them to their children.
+   * The function takes care of removing the nodes from the former group, and makes sure no duplicates end up in the list.
+   * - `deselectAllNodes() => void`: Public function that deselects all tree nodes.
+   * - `expandGroup(groupId: string) => void`: Programmatically finds a group by its ID and sets it to be expanded.
+   * This is called by the parent component after a new node is added to a tree group.
+   */
+  "or-tree-menu": Partial<OrTreeMenuProps & BaseProps<OrTreeMenu> & BaseEvents>;
 
   /**
-     * A component for displaying a hierarchical, tree-like structure of elements.
- * Common use cases are visualizing parent-child relationships, or for grouping elements together.
- * 
- * ## Attributes & Properties
- * 
- * Component attributes and properties that can be applied to the element or by using JavaScript.
- * 
- * - `nodes`: List of node items in the menu.
- * Uses the TreeNode format for rendering the OrTreeNode elements. 
- * - `selection`: Changes the allowed selection method within the tree.
- * Common options are `LEAF`, `SINGLE` and `MULTI`. 
- * - `draggable`: Disables and enables dragging of nodes into groups. 
- * - `no-header`/`noHeader`: Removes the header from the tree menu. 
- * - `menu-title`/`menuTitle`: Adjusts the title in the menu header. 
- * - `sort-options`/`sortOptions`: List of options available to sort the object with 
- * - `sort-by`/`sortBy`: Represents the selected sorting option 
- * - `group-first`/`groupFirst`: Automatically prioritizes the groups, and positions these on top. 
- * 
- * ## Events
- * 
- * Events that will be emitted by the component.
- * 
- * - `nodes`: undefined
- * - `undefined`: undefined
- * - `or-tree-select`: Triggers upon selecting a node, and dispatches a list of the nodes selected.
- * - `or-tree-drag`: Triggers upon dragging a node to a new group, and dispatches a list of dragged nodes, the group node, and the updated list of all nodes.
- * 
- * ## Methods
- * 
- * Methods that can be called to access component functionality.
- * 
- * - `moveNodesToGroup(nodesToMove: TreeNode[], groupNode?: TreeNode) => void`: Function that moves an array of TreeNode into another TreeNode, by adding them to their children.
- * The function takes care of removing the nodes from the former group, and makes sure no duplicates end up in the list.
- * - `deselectAllNodes() => void`: Public function that deselects all tree nodes.
- * - `expandGroup(groupId: string) => void`: Programmatically finds a group by its ID and sets it to be expanded.
- * This is called by the parent component after a new node is added to a tree group.
-  */
-    "or-tree-menu": Partial<OrTreeMenuProps & BaseProps<OrTreeMenu> & BaseEvents>;
+   *
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `expanded`: Determines the visibility of child nodes.
+   * Setting this to `false` hides them, and acts as a 'collapsed' state.
+   * - `leaf`: Only allows child nodes to be selected, making the expander (parent node) readonly.
+   * If this is set to false, only the chevron icon can be used to collapse/expand the list.
+   * - `readonly`: Makes the group readonly
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: Default slot for child nodes within the group
+   * - `parent`: Slot for inserting a parent node
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `select() => void`: Selects the group (parent) node.
+   * - `selectAll() => void`: Selects the group node itself, and all children nodes within that group.
+   * - `deselect() => void`: Deselects the group (parent) node.
+   * - `deselectAll() => void`: Deselects the group node itself, and all children nodes within that group.
+   * - `getGroupNode() => OrTreeNode | undefined`: Returns the group (parent) node (OrTreeNode) using a query selector.
+   * - `getChildNodes() => OrTreeNode[]`: Returns a list of all children nodes (OrTreeNode) within the group, using a query selector.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `chevron`: The chevron icon element for expanding/collapsing the group.
+   */
+  "or-tree-group": Partial<
+    OrTreeGroupProps & BaseProps<OrTreeGroup> & BaseEvents
+  >;
 
+  /**
+   *
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `readonly`: HTML attribute that only applies CSS, showing this node cannot be interacted with.
+   * - `selected`: HTML attribute that only applies CSS, marking the node as 'selected'.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `prefix`: Appends elements to the left hand side of the node, commonly used for icons.
+   * - `(default)`: Default slot for the main content, commonly used for text.
+   * - `suffix`: Appends elements to the right hand side of the node.
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--or-tree-node-height`: Controls the height of the node (default: `undefined`)
+   * - `--or-tree-node-indent`: Controls the left padding of the node (default: `undefined`)
+   * - `--or-tree-node-background`: Sets the default background (default: `undefined`)
+   * - `--or-tree-node-background--hovered`: Sets the background while hovering (default: `undefined`)
+   * - `--or-tree-node-background--selected`: Sets the background when selected (default: `undefined`)
+   * - `--or-tree-node-color--selected`: Sets the primary color of the node when selected (default: `undefined`)
+   */
+  "or-tree-node": Partial<OrTreeNodeProps & BaseProps<OrTreeNode> & BaseEvents>;
+};
 
+export type CustomElementsSolidJs = {
   /**
-     * 
- * 
- * ## Attributes & Properties
- * 
- * Component attributes and properties that can be applied to the element or by using JavaScript.
- * 
- * - `expanded`: Determines the visibility of child nodes.
- * Setting this to `false` hides them, and acts as a 'collapsed' state. 
- * - `leaf`: Only allows child nodes to be selected, making the expander (parent node) readonly.
- * If this is set to false, only the chevron icon can be used to collapse/expand the list. 
- * - `readonly`: Makes the group readonly 
- * 
- * ## Slots
- * 
- * Areas where markup can be added to the component.
- * 
- * - `(default)`: Default slot for child nodes within the group
- * - `parent`: Slot for inserting a parent node
- * 
- * ## Methods
- * 
- * Methods that can be called to access component functionality.
- * 
- * - `select() => void`: Selects the group (parent) node.
- * - `selectAll() => void`: Selects the group node itself, and all children nodes within that group.
- * - `deselect() => void`: Deselects the group (parent) node.
- * - `deselectAll() => void`: Deselects the group node itself, and all children nodes within that group.
- * - `getGroupNode() => OrTreeNode | undefined`: Returns the group (parent) node (OrTreeNode) using a query selector.
- * - `getChildNodes() => OrTreeNode[]`: Returns a list of all children nodes (OrTreeNode) within the group, using a query selector.
- * 
- * ## CSS Parts
- * 
- * Custom selectors for styling elements within the component.
- * 
- * - `chevron`: The chevron icon element for expanding/collapsing the group.
-  */
-    "or-tree-group": Partial<OrTreeGroupProps & BaseProps<OrTreeGroup> & BaseEvents>;
+   * A component for displaying a hierarchical, tree-like structure of elements.
+   * Common use cases are visualizing parent-child relationships, or for grouping elements together.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `nodes`: List of node items in the menu.
+   * Uses the TreeNode format for rendering the OrTreeNode elements.
+   * - `selection`: Changes the allowed selection method within the tree.
+   * Common options are `LEAF`, `SINGLE` and `MULTI`.
+   * - `draggable`: Disables and enables dragging of nodes into groups.
+   * - `no-header`/`noHeader`: Removes the header from the tree menu.
+   * - `menu-title`/`menuTitle`: Adjusts the title in the menu header.
+   * - `sort-options`/`sortOptions`: List of options available to sort the object with
+   * - `sort-by`/`sortBy`: Represents the selected sorting option
+   * - `group-first`/`groupFirst`: Automatically prioritizes the groups, and positions these on top.
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `nodes`: undefined
+   * - `undefined`: undefined
+   * - `or-tree-select`: Triggers upon selecting a node, and dispatches a list of the nodes selected.
+   * - `or-tree-drag`: Triggers upon dragging a node to a new group, and dispatches a list of dragged nodes, the group node, and the updated list of all nodes.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `moveNodesToGroup(nodesToMove: TreeNode[], groupNode?: TreeNode) => void`: Function that moves an array of TreeNode into another TreeNode, by adding them to their children.
+   * The function takes care of removing the nodes from the former group, and makes sure no duplicates end up in the list.
+   * - `deselectAllNodes() => void`: Public function that deselects all tree nodes.
+   * - `expandGroup(groupId: string) => void`: Programmatically finds a group by its ID and sets it to be expanded.
+   * This is called by the parent component after a new node is added to a tree group.
+   */
+  "or-tree-menu": Partial<
+    OrTreeMenuProps &
+      OrTreeMenuSolidJsProps &
+      BaseProps<OrTreeMenu> &
+      BaseEvents
+  >;
 
+  /**
+   *
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `expanded`: Determines the visibility of child nodes.
+   * Setting this to `false` hides them, and acts as a 'collapsed' state.
+   * - `leaf`: Only allows child nodes to be selected, making the expander (parent node) readonly.
+   * If this is set to false, only the chevron icon can be used to collapse/expand the list.
+   * - `readonly`: Makes the group readonly
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: Default slot for child nodes within the group
+   * - `parent`: Slot for inserting a parent node
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `select() => void`: Selects the group (parent) node.
+   * - `selectAll() => void`: Selects the group node itself, and all children nodes within that group.
+   * - `deselect() => void`: Deselects the group (parent) node.
+   * - `deselectAll() => void`: Deselects the group node itself, and all children nodes within that group.
+   * - `getGroupNode() => OrTreeNode | undefined`: Returns the group (parent) node (OrTreeNode) using a query selector.
+   * - `getChildNodes() => OrTreeNode[]`: Returns a list of all children nodes (OrTreeNode) within the group, using a query selector.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `chevron`: The chevron icon element for expanding/collapsing the group.
+   */
+  "or-tree-group": Partial<
+    OrTreeGroupProps &
+      OrTreeGroupSolidJsProps &
+      BaseProps<OrTreeGroup> &
+      BaseEvents
+  >;
 
   /**
-     * 
- * 
- * ## Attributes & Properties
- * 
- * Component attributes and properties that can be applied to the element or by using JavaScript.
- * 
- * - `readonly`: HTML attribute that only applies CSS, showing this node cannot be interacted with. 
- * - `selected`: HTML attribute that only applies CSS, marking the node as 'selected'. 
- * 
- * ## Slots
- * 
- * Areas where markup can be added to the component.
- * 
- * - `prefix`: Appends elements to the left hand side of the node, commonly used for icons.
- * - `(default)`: Default slot for the main content, commonly used for text.
- * - `suffix`: Appends elements to the right hand side of the node.
- * 
- * ## CSS Custom Properties
- * 
- * CSS variables available for styling the component.
- * 
- * - `--or-tree-node-height`: Controls the height of the node (default: `undefined`)
- * - `--or-tree-node-indent`: Controls the left padding of the node (default: `undefined`)
- * - `--or-tree-node-background`: Sets the default background (default: `undefined`)
- * - `--or-tree-node-background--hovered`: Sets the background while hovering (default: `undefined`)
- * - `--or-tree-node-background--selected`: Sets the background when selected (default: `undefined`)
- * - `--or-tree-node-color--selected`: Sets the primary color of the node when selected (default: `undefined`)
-  */
-    "or-tree-node": Partial<OrTreeNodeProps & BaseProps<OrTreeNode> & BaseEvents>;
-  }
+   *
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `readonly`: HTML attribute that only applies CSS, showing this node cannot be interacted with.
+   * - `selected`: HTML attribute that only applies CSS, marking the node as 'selected'.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `prefix`: Appends elements to the left hand side of the node, commonly used for icons.
+   * - `(default)`: Default slot for the main content, commonly used for text.
+   * - `suffix`: Appends elements to the right hand side of the node.
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--or-tree-node-height`: Controls the height of the node (default: `undefined`)
+   * - `--or-tree-node-indent`: Controls the left padding of the node (default: `undefined`)
+   * - `--or-tree-node-background`: Sets the default background (default: `undefined`)
+   * - `--or-tree-node-background--hovered`: Sets the background while hovering (default: `undefined`)
+   * - `--or-tree-node-background--selected`: Sets the background when selected (default: `undefined`)
+   * - `--or-tree-node-color--selected`: Sets the primary color of the node when selected (default: `undefined`)
+   */
+  "or-tree-node": Partial<
+    OrTreeNodeProps &
+      OrTreeNodeSolidJsProps &
+      BaseProps<OrTreeNode> &
+      BaseEvents
+  >;
+};
 
 export type CustomCssProperties = {
   /** Controls the height of the node */
@@ -275,51 +456,57 @@ export type CustomCssProperties = {
   "--or-tree-node-background--selected"?: string;
   /** Sets the primary color of the node when selected */
   "--or-tree-node-color--selected"?: string;
-}
-
+};
 
-declare module 'react' {
+declare module "react" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }
 
-declare module 'preact' {
+declare module "preact" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }
 
-declare module '@builder.io/qwik' {
+declare module "@builder.io/qwik" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }
 
-declare module '@stencil/core' {
+declare module "@stencil/core" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }
 
-declare module 'hono/jsx' {
+declare module "hono/jsx" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }
 
-declare module 'react-native' {
+declare module "react-native" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }
 
+declare module "solid-js" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElementsSolidJs {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
 declare global {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}

package/dist/umd/index.bundle.js

@@ -726,10 +726,10 @@
                     ${this._getSortActionTemplate(this.sortBy,this.sortOptions)}
                 </div>
             </div>
-        `}_getSortActionTemplate(t,e){return function(t,e,n,i,r,a=!1,o=!0,l=!1,d=!1,c="menu",s=!1){let m=null;return j`
+        `}_getSortActionTemplate(t,e){return function(t,e,n,i,r=!1,a=!0,o=!1,l=!1,d="menu",c=!1){let s=null;return j`
         <span>
-            <span @click="${t=>{if(e){if(s&&m){var n,i;let e,r=t.currentTarget;n=m,(i=r)||(i=document.body),e=i.getBoundingClientRect(),Object.assign(n.style,{position:"fixed",top:`${e.bottom}px`,left:`${e.left}px`,zIndex:"1000",display:"block"})}t.currentTarget.parentElement.lastElementChild.open()}}}">${t}</span>
-            ${e?j`<or-mwc-menu ?multiselect="${a}" @or-mwc-menu-closed="${()=>{}}" @or-mwc-menu-changed="${t=>{i&&i(t.detail)}}" .translateValues="${o}" .values="${n}" .menuItems="${e}" .midHeight="${l}" .fullWidth="${d}" id="${c}" ${tN(t=>m=t)}></or-mwc-menu>`:""}
+            <span @click="${t=>{if(e){if(c&&s){var n,i;let e,r=t.currentTarget;n=s,(i=r)||(i=document.body),e=i.getBoundingClientRect(),Object.assign(n.style,{position:"fixed",top:`${e.bottom}px`,left:`${e.left}px`,zIndex:"1000",display:"block"})}t.currentTarget.parentElement.lastElementChild.open()}}}">${t}</span>
+            ${e?j`<or-mwc-menu ?multiselect="${r}" @or-mwc-menu-closed="${()=>{}}" @or-mwc-menu-changed="${t=>{i&&i(t.detail)}}" .translateValues="${a}" .values="${n}" .menuItems="${e}" .midHeight="${o}" .fullWidth="${l}" id="${d}" ${tN(t=>s=t)}></or-mwc-menu>`:""}
         </span>
     `}(j`<or-mwc-input type=${t2.BUTTON} icon="sort-variant" title="${is.i18next.t("sort")}"></or-mwc-input>`,(e||[]).map(t=>({value:t,text:t})),t,t=>this._onSortClick(String(t)))}_getErrorTemplate(){return j``}_onSortClick(t){this.sortBy=t}_onTreeGroupClick(t){let e=t.currentTarget,n=e.parentElement,i=(t,e)=>{t.select(),this._lastSelectedNode=e,this._notifyNodesSelect()};switch(this.selection){case t5.LEAF:return;case t5.MULTI:if(t.shiftKey&&this._lastSelectedNode){let t=Array.from(this._uiNodes||[]),e=n.getGroupNode();if(e){let n=t.indexOf(e),i=t.indexOf(this._lastSelectedNode);this._selectNodesBetween(t,n,i);return}}else if(t.ctrlKey)return void i(n,e);this.deselectAllNodes(),i(n,e);return;case t5.SINGLE:this.deselectAllNodes(),i(n,e);return}}_onTreeNodeClick(t){let e=t.currentTarget;if(e)if(this.selection===t5.MULTI){if(t.shiftKey&&this._lastSelectedNode){let t=Array.from(this._uiNodes||[]),n=t.indexOf(this._lastSelectedNode),i=t.indexOf(e);if(n>-1&&i>-1)return void this._selectNodesBetween(t,n,i)}else if(t.ctrlKey)return void this._selectNode(e);this.deselectAllNodes(),this._selectNode(e);return}else{this.deselectAllNodes(),this._selectNode(e);return}}_onDragStart(t,e){var n;t.target?null==(n=t.dataTransfer)||n.setData("treeNode",JSON.stringify(e)):t.preventDefault()}_onDragOverList(t){this.draggable&&t.preventDefault()}_onDragOverSingleNode(t,e,n){if(this.draggable&&(t.preventDefault(),n)){let t=this._getUiNodeFromTree(n);null==t||t.setAttribute("drophover","true")}}_onDragOverGroup(t,e){this.draggable&&(t.preventDefault(),t.currentTarget.setAttribute("drophover","true"))}_onDragLeaveSingleNode(t,e,n){if(n&&this.draggable){t.preventDefault();let e=this._getUiNodeFromTree(n);null==e||e.removeAttribute("drophover")}}_onDragLeaveGroup(t,e){this.draggable&&t.currentTarget.removeAttribute("drophover")}_onDragDropList(t){this._onDragDropGroup(t)}_onDragDropSingleNode(t,e,n){this._onDragDropGroup(t,n)}_onDragDropGroup(t,e){var n,i;if(this.draggable){t.preventDefault(),t.stopPropagation(),e&&(null==(n=this._getUiNodeFromTree(e))||n.removeAttribute("drophover"));let r=[],a=null==(i=t.dataTransfer)?void 0:i.getData("treeNode");if(a){let t=JSON.parse(a);t&&r.push(t)}if(this.selection===t5.MULTI){let t=this._findSelectedTreeNodes();(t=t.filter(t=>!t.children)).length>0&&(this.deselectAllNodes(),r.push(...t.filter(t=>!r.find(e=>JSON.stringify(e)===JSON.stringify(t)))))}(null==e?void 0:e.children)&&(r=r.filter(t=>{var n;return!(null==(n=e.children)?void 0:n.find(e=>e.id===t.id))})),r.length>0&&this._dispatchCancellableDragEvent(r,e,this.nodes).then(()=>{this.nodes=iK(r,e,this.nodes)}).catch(t=>{})}}_dispatchCancellableDragEvent(t,e,n=[]){return new Promise((i,r)=>{this.dispatchEvent(new iJ(t,e,n))?i():r()})}_selectNode(t,e=!0){if(t){if(e){let e=[...this._findSelectedTreeNodes()],n=this._getTreeNodeFromTree(t);if(n&&e.push(n),!this._dispatchSelectEvent(e))return}t.selected=!0,this._lastSelectedNode=t}}_selectNodesBetween(t,e,n,i=!0){let r=[];if(e<n)for(let i=e;i<=n;i++)r.push(t[i]);else if(e>n)for(let i=n;i<=e;i++)r.push(t[i]);if(i){let t=r.map(t=>this._getTreeNodeFromTree(t)).filter(t=>t);if(!this._notifyNodesSelect(t))return}r.forEach(t=>this._selectNode(t))}_notifyNodesSelect(t){var e,n,i,r;return e=this,n=void 0,i=void 0,r=function*(){return yield this.getUpdateComplete(),t||(t=this._findSelectedTreeNodes()),this._dispatchSelectEvent(t)},new(i||(i=Promise))(function(t,a){function o(t){try{d(r.next(t))}catch(t){a(t)}}function l(t){try{d(r.throw(t))}catch(t){a(t)}}function d(e){var n;e.done?t(e.value):((n=e.value)instanceof i?n:new i(function(t){t(n)})).then(o,l)}d((r=r.apply(e,n||[])).next())})}_findSelectedTreeNodes(t=Array.from(this._uiNodes||[]),e=this._treeNodeCache){let n=t.filter(t=>t.selected),i=Array.from(e.entries());return n.map(t=>i.find(e=>e[1]===t.id)).map(t=>null==t?void 0:t[0]).filter(t=>void 0!==t)}_getTreeNodeFromTree(t,e=this._treeNodeCache){var n;return null==(n=Array.from(e.entries()).find(e=>e[1]===t.id))?void 0:n[0]}_getUiNodeFromTree(t,e=this._treeNodeCache){var n;let i=Array.from(e.entries()),r=JSON.stringify(t),a=null==(n=i.find(t=>JSON.stringify(t[0])===r))?void 0:n[1];return a?this.shadowRoot.getElementById(a):void 0}_dispatchSelectEvent(t){return this.dispatchEvent(new iW(t||[]))}deselectAllNodes(){(this._uiGroups||[]).forEach(t=>t.deselect()),(this._uiNodes||[]).forEach(t=>t.selected=!1)}_sortNodes(t,e,n=!1){console.debug(`Sorting nodes in the tree menu using '${e}'`);let i=t.filter(t=>void 0!==t.children);if(i.forEach(t=>{var n;return null==(n=t.children)?void 0:n.sort(this._getSortFunction(e))}),n){let n=t.filter(t=>void 0===t.children);return i.sort(this._getSortFunction(e)),n.sort(this._getSortFunction(e)),[...i,...n]}return t.sort(this._getSortFunction(e))}_setTreeNodeId(t,e=io.Util.generateUniqueUUID()){return this._treeNodeCache.get(t)?this._treeNodeCache.get(t):(this._treeNodeCache.set(t,e),e)}_getSortFunction(t){return t===t4.Z_TO_A?(t,e)=>e.label.localeCompare(t.label):io.Util.sortByString(t=>t.label)}expandGroup(t){this.updateComplete.then(()=>{let e=this.nodes.find(e=>e.id===t&&e.children);e&&(e.expanded=!0,this.requestUpdate())})}};i5([tf({type:Array})],i3.prototype,"nodes",void 0),i5([tf({type:String})],i3.prototype,"selection",void 0),i5([tf({type:Boolean})],i3.prototype,"draggable",void 0),i5([tf({type:Boolean,attribute:"no-header"})],i3.prototype,"noHeader",void 0),i5([tf({type:String,attribute:"menu-title"})],i3.prototype,"menuTitle",void 0),i5([tf({type:Array,attribute:"sort-options"})],i3.prototype,"sortOptions",void 0),i5([tf({type:String,attribute:"sort-by",reflect:!0})],i3.prototype,"sortBy",void 0),i5([tf({type:Boolean,attribute:"group-first"})],i3.prototype,"groupFirst",void 0),i5([tv("or-tree-node")],i3.prototype,"_uiNodes",void 0),i5([tv("or-tree-group")],i3.prototype,"_uiGroups",void 0),i3=i5([tp("or-tree-menu")],i3)})(),o})());
 //# sourceMappingURL=index.bundle.js.map