@itwin/presentation-hierarchies-react 2.0.0-alpha.5 → 2.0.0-alpha.51

package/lib/esm/presentation-hierarchies-react/stratakit/TreeErrorRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeErrorRenderer.d.ts","sourceRoot":"","sources":["../../../../src/presentation-hierarchies-react/stratakit/TreeErrorRenderer.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAgB,YAAY,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAqB,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AACnF,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD;;;;GAIG;AACH,UAAU,yBAAyB;IACjC;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,UAAU,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;IAC7C,uIAAuI;IACvI,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,YAAY,CAAC;CAC/D;AAED,aAAa;AACb,MAAM,MAAM,sBAAsB,GAAG,yBAAyB,GAAG,IAAI,CAAC,sBAAsB,EAAE,WAAW,CAAC,CAAC;AAE3G;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,sBAAsB,EAAE,EAAE,sBAAsB,2CAyB1H"}

package/lib/esm/presentation-hierarchies-react/stratakit/TreeErrorRenderer.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { cloneElement } from "react";
+import { unstable_ErrorRegion as ErrorRegion } from "@stratakit/structures";
+import { ErrorItemRenderer } from "./ErrorItemRenderer.js";
+import { useLocalizationContext } from "./LocalizationContext.js";
+/**
+ * A component that renders error display dropdown using the `unstable_ErrorRegion` component from `@itwin/itwinui-react`.
+ * As input, the component uses a list of `ErrorNode` objects, which are generally created using the `useErrorList` hook.
+ *
+ * @alpha
+ */
+export function TreeErrorRenderer({ treeLabel, errorNodes, renderError, ...errorItemRendererProps }) {
+    const { localizedStrings } = useLocalizationContext();
+    const errorItems = errorNodes.map((errorNode) => {
+        const errorRendererProps = {
+            errorNode,
+            ...errorItemRendererProps,
+        };
+        if (renderError) {
+            return cloneElement(renderError(errorRendererProps), { key: errorNode.id });
+        }
+        return _jsx(ErrorItemRenderer, { ...errorRendererProps }, errorNode.id);
+    });
+    return (_jsx(ErrorRegion.Root, { style: { width: "100%" }, "aria-label": localizedStrings.issuesForTree.replace("{{tree_label}}", treeLabel), label: errorNodes.length === 0 ? localizedStrings.noIssuesFound : localizedStrings.issuesFound.replace("{{number_of_issues}}", errorNodes.length.toString()), items: errorItems }));
+}
+//# sourceMappingURL=TreeErrorRenderer.js.map

package/lib/esm/presentation-hierarchies-react/stratakit/TreeErrorRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeErrorRenderer.js","sourceRoot":"","sources":["../../../../src/presentation-hierarchies-react/stratakit/TreeErrorRenderer.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,YAAY,EAAgB,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,oBAAoB,IAAI,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAA0B,MAAM,wBAAwB,CAAC;AAEnF,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAsBlE;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,sBAAsB,EAA0B;IACzH,MAAM,EAAE,gBAAgB,EAAE,GAAG,sBAAsB,EAAE,CAAC;IACtD,MAAM,UAAU,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE;QAC9C,MAAM,kBAAkB,GAA2B;YACjD,SAAS;YACT,GAAG,sBAAsB;SAC1B,CAAC;QAEF,IAAI,WAAW,EAAE,CAAC;YAChB,OAAO,YAAY,CAAC,WAAW,CAAC,kBAAkB,CAAC,EAAE,EAAE,GAAG,EAAE,SAAS,CAAC,EAAE,EAAE,CAAC,CAAC;QAC9E,CAAC;QAED,OAAO,KAAC,iBAAiB,OAAwB,kBAAkB,IAApC,SAAS,CAAC,EAAE,CAA4B,CAAC;IAC1E,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,WAAW,CAAC,IAAI,IACf,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,gBACZ,gBAAgB,CAAC,aAAa,CAAC,OAAO,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAC/E,KAAK,EACH,UAAU,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,WAAW,CAAC,OAAO,CAAC,sBAAsB,EAAE,UAAU,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,EAEvJ,KAAK,EAAE,UAAU,GACjB,CACH,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport { cloneElement, ReactElement } from \"react\";\nimport { unstable_ErrorRegion as ErrorRegion } from \"@stratakit/structures\";\nimport { ErrorItemRenderer, ErrorItemRendererProps } from \"./ErrorItemRenderer.js\";\nimport { useErrorNodes } from \"./FlatTreeNode.js\";\nimport { useLocalizationContext } from \"./LocalizationContext.js\";\n\n/**\n * Interface containing building blocks for `TreeErrorRenderer`.\n *\n * @alpha\n */\ninterface TreeErrorRendererOwnProps {\n  /**\n   * A user friendly display label of the tree. Should be unique within the consuming application,\n   * as it's used for creating a unique accessible label for the error region.\n   */\n  treeLabel: string;\n  /** List of error nodes to render errors for. */\n  errorNodes: ReturnType<typeof useErrorNodes>;\n  /** Callback to render custom error messages. Component should be wrapped in `ErrorRegion.Item` from `@itwin/itwinui-react` package. */\n  renderError?: (props: ErrorItemRendererProps) => ReactElement;\n}\n\n/** @alpha */\nexport type TreeErrorRendererProps = TreeErrorRendererOwnProps & Omit<ErrorItemRendererProps, \"errorNode\">;\n\n/**\n * A component that renders error display dropdown using the `unstable_ErrorRegion` component from `@itwin/itwinui-react`.\n * As input, the component uses a list of `ErrorNode` objects, which are generally created using the `useErrorList` hook.\n *\n * @alpha\n */\nexport function TreeErrorRenderer({ treeLabel, errorNodes, renderError, ...errorItemRendererProps }: TreeErrorRendererProps) {\n  const { localizedStrings } = useLocalizationContext();\n  const errorItems = errorNodes.map((errorNode) => {\n    const errorRendererProps: ErrorItemRendererProps = {\n      errorNode,\n      ...errorItemRendererProps,\n    };\n\n    if (renderError) {\n      return cloneElement(renderError(errorRendererProps), { key: errorNode.id });\n    }\n\n    return <ErrorItemRenderer key={errorNode.id} {...errorRendererProps} />;\n  });\n\n  return (\n    <ErrorRegion.Root\n      style={{ width: \"100%\" }}\n      aria-label={localizedStrings.issuesForTree.replace(\"{{tree_label}}\", treeLabel)}\n      label={\n        errorNodes.length === 0 ? localizedStrings.noIssuesFound : localizedStrings.issuesFound.replace(\"{{number_of_issues}}\", errorNodes.length.toString())\n      }\n      items={errorItems}\n    />\n  );\n}\n"]}

package/lib/esm/presentation-hierarchies-react/stratakit/TreeNodeFilterAction.d.ts

@@ -0,0 +1,20 @@
+import { HierarchyLevelDetails, TreeRendererProps } from "../Renderers.js";
+import { TreeNode } from "../TreeNode.js";
+import { TreeActionBaseAttributes } from "./TreeAction.js";
+/**
+ * React component that renders a filter action for a tree item.
+ *
+ * The action calls the `onFilter` callback prop when clicked.
+ *
+ * @see `getMenuActions`, `getInlineActions`, `getContextMenuActions` props of `TreeRenderer` to add this action
+ * to tree items.
+ *
+ * @alpha
+ */
+export declare const TreeNodeFilterAction: import("react").NamedExoticComponent<{
+    /** Action to perform when the filter button is clicked for this node. */
+    onFilter?: (hierarchyLevelDetails: HierarchyLevelDetails) => void;
+} & TreeActionBaseAttributes & Pick<TreeRendererProps, "getHierarchyLevelDetails"> & {
+    node: TreeNode;
+}>;
+//# sourceMappingURL=TreeNodeFilterAction.d.ts.map

package/lib/esm/presentation-hierarchies-react/stratakit/TreeNodeFilterAction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeNodeFilterAction.d.ts","sourceRoot":"","sources":["../../../../src/presentation-hierarchies-react/stratakit/TreeNodeFilterAction.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAC3E,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAkB,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AAS3E;;;;;;;;;GASG;AACH,eAAO,MAAM,oBAAoB;IAf/B,yEAAyE;eAC9D,CAAC,qBAAqB,EAAE,qBAAqB,KAAK,IAAI;;UAmB5B,QAAQ;EAoB7C,CAAC"}

package/lib/esm/presentation-hierarchies-react/stratakit/TreeNodeFilterAction.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { memo, useCallback } from "react";
+import filterSvg from "@stratakit/icons/filter.svg";
+import { useLocalizationContext } from "./LocalizationContext.js";
+import { TreeActionBase } from "./TreeAction.js";
+/**
+ * React component that renders a filter action for a tree item.
+ *
+ * The action calls the `onFilter` callback prop when clicked.
+ *
+ * @see `getMenuActions`, `getInlineActions`, `getContextMenuActions` props of `TreeRenderer` to add this action
+ * to tree items.
+ *
+ * @alpha
+ */
+export const TreeNodeFilterAction = memo(function TreeNodeFilterAction({ node, onFilter, getHierarchyLevelDetails, ...actionAttributes }) {
+    const { localizedStrings } = useLocalizationContext();
+    const { filterHierarchyLevel, filterHierarchyLevelActiveDescription } = localizedStrings;
+    const handleClick = useCallback(() => {
+        const hierarchyLevelDetails = getHierarchyLevelDetails?.(node.id);
+        hierarchyLevelDetails && onFilter?.(hierarchyLevelDetails);
+    }, [node, getHierarchyLevelDetails, onFilter]);
+    return (_jsx(TreeActionBase, { ...actionAttributes, label: filterHierarchyLevel, onClick: handleClick, icon: filterSvg, visible: node.isFiltered ? true : undefined, dot: node.isFiltered ? filterHierarchyLevelActiveDescription : undefined, hide: !onFilter || !node.isFilterable }));
+});
+//# sourceMappingURL=TreeNodeFilterAction.js.map

package/lib/esm/presentation-hierarchies-react/stratakit/TreeNodeFilterAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeNodeFilterAction.js","sourceRoot":"","sources":["../../../../src/presentation-hierarchies-react/stratakit/TreeNodeFilterAction.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,SAAS,MAAM,6BAA6B,CAAC;AAGpD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,cAAc,EAA4B,MAAM,iBAAiB,CAAC;AAS3E;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,IAAI,CAAC,SAAS,oBAAoB,CAAC,EACrE,IAAI,EACJ,QAAQ,EACR,wBAAwB,EACxB,GAAG,gBAAgB,EAC4B;IAC/C,MAAM,EAAE,gBAAgB,EAAE,GAAG,sBAAsB,EAAE,CAAC;IACtD,MAAM,EAAE,oBAAoB,EAAE,qCAAqC,EAAE,GAAG,gBAAgB,CAAC;IAEzF,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,MAAM,qBAAqB,GAAG,wBAAwB,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAClE,qBAAqB,IAAI,QAAQ,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAC7D,CAAC,EAAE,CAAC,IAAI,EAAE,wBAAwB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE/C,OAAO,CACL,KAAC,cAAc,OACT,gBAAgB,EACpB,KAAK,EAAE,oBAAoB,EAC3B,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,SAAS,EACf,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC3C,GAAG,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,qCAAqC,CAAC,CAAC,CAAC,SAAS,EACxE,IAAI,EAAE,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY,GACrC,CACH,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport { memo, useCallback } from \"react\";\nimport filterSvg from \"@stratakit/icons/filter.svg\";\nimport { HierarchyLevelDetails, TreeRendererProps } from \"../Renderers.js\";\nimport { TreeNode } from \"../TreeNode.js\";\nimport { useLocalizationContext } from \"./LocalizationContext.js\";\nimport { TreeActionBase, TreeActionBaseAttributes } from \"./TreeAction.js\";\n\n/** @alpha */\ntype TreeNodeFilterActionProps = {\n  /** Action to perform when the filter button is clicked for this node. */\n  onFilter?: (hierarchyLevelDetails: HierarchyLevelDetails) => void;\n} & TreeActionBaseAttributes &\n  Pick<TreeRendererProps, \"getHierarchyLevelDetails\">;\n\n/**\n * React component that renders a filter action for a tree item.\n *\n * The action calls the `onFilter` callback prop when clicked.\n *\n * @see `getMenuActions`, `getInlineActions`, `getContextMenuActions` props of `TreeRenderer` to add this action\n * to tree items.\n *\n * @alpha\n */\nexport const TreeNodeFilterAction = memo(function TreeNodeFilterAction({\n  node,\n  onFilter,\n  getHierarchyLevelDetails,\n  ...actionAttributes\n}: TreeNodeFilterActionProps & { node: TreeNode }) {\n  const { localizedStrings } = useLocalizationContext();\n  const { filterHierarchyLevel, filterHierarchyLevelActiveDescription } = localizedStrings;\n\n  const handleClick = useCallback(() => {\n    const hierarchyLevelDetails = getHierarchyLevelDetails?.(node.id);\n    hierarchyLevelDetails && onFilter?.(hierarchyLevelDetails);\n  }, [node, getHierarchyLevelDetails, onFilter]);\n\n  return (\n    <TreeActionBase\n      {...actionAttributes}\n      label={filterHierarchyLevel}\n      onClick={handleClick}\n      icon={filterSvg}\n      visible={node.isFiltered ? true : undefined}\n      dot={node.isFiltered ? filterHierarchyLevelActiveDescription : undefined}\n      hide={!onFilter || !node.isFilterable}\n    />\n  );\n});\n"]}

package/lib/esm/presentation-hierarchies-react/stratakit/TreeNodeRenameAction.d.ts

@@ -0,0 +1,57 @@
+import { PropsWithChildren } from "react";
+import { TreeNode } from "../TreeNode.js";
+import { TreeActionBaseAttributes } from "./TreeAction.js";
+/**
+ * React component that renders a rename action for a tree item.
+ *
+ * The tree component must have `getEditingProps.onLabelChanged` prop set to enable renaming functionality. When
+ * rename is completed, the `onLabelChanged` function is called to make the actual data update.
+ *
+ * @see `getMenuActions`, `getInlineActions`, `getContextMenuActions` props of `TreeRenderer` to add this action
+ * to tree items.
+ *
+ * @alpha
+ */
+export declare const TreeNodeRenameAction: import("react").NamedExoticComponent<TreeActionBaseAttributes & {
+    node: TreeNode;
+}>;
+/** @alpha */
+export interface TreeNodeEditingProps {
+    /**
+     * A callback that is invoked when node label is changed. Should be used together
+     * with `<TreeNodeRenameAction />` to enter label editing mode.
+     */
+    onLabelChanged: (newLabel: string) => void;
+    labelValidationHint?: string;
+    validate?: (newLabel: string) => boolean;
+}
+/** @internal */
+export interface RenameParameters {
+    nodeId: string;
+    commit: (newLabel: string) => void;
+    labelValidationHint?: string;
+    validate?: (newLabel: string) => boolean;
+}
+interface TreeNodeRenameContext {
+    renameParameters?: RenameParameters;
+    startRename: (node: TreeNode) => void;
+    canRename: (node: TreeNode) => boolean;
+    cancelRename: () => void;
+}
+/** @internal */
+export declare const useTreeNodeRenameContext: () => TreeNodeRenameContext | undefined;
+/** @internal */
+export declare function TreeNodeRenameContextProvider({ value, children }: PropsWithChildren<{
+    value: TreeNodeRenameContext;
+}>): import("react/jsx-runtime").JSX.Element;
+/** @internal */
+export declare function useTreeNodeRenameContextValue({ getEditingProps }: {
+    getEditingProps?: (node: TreeNode) => TreeNodeEditingProps | undefined;
+}): {
+    renameParameters: RenameParameters | undefined;
+    cancelRename: () => void;
+    startRename: (node: TreeNode) => void;
+    canRename: (node: TreeNode) => boolean;
+};
+export {};
+//# sourceMappingURL=TreeNodeRenameAction.d.ts.map

package/lib/esm/presentation-hierarchies-react/stratakit/TreeNodeRenameAction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeNodeRenameAction.d.ts","sourceRoot":"","sources":["../../../../src/presentation-hierarchies-react/stratakit/TreeNodeRenameAction.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAuB,iBAAiB,EAA8C,MAAM,OAAO,CAAC;AAE3G,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAkB,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AAE3E;;;;;;;;;;GAUG;AACH,eAAO,MAAM,oBAAoB;UAAwG,QAAQ;EAY/I,CAAC;AAEH,aAAa;AACb,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;CAC1C;AAED,gBAAgB;AAChB,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;CAC1C;AAED,UAAU,qBAAqB;IAC7B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,WAAW,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACtC,SAAS,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAC;IACvC,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAID,gBAAgB;AAChB,eAAO,MAAM,wBAAwB,yCAEpC,CAAC;AAEF,gBAAgB;AAChB,wBAAgB,6BAA6B,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,iBAAiB,CAAC;IAAE,KAAK,EAAE,qBAAqB,CAAA;CAAE,CAAC,2CAErH;AAED,gBAAgB;AAChB,wBAAgB,6BAA6B,CAAC,EAAE,eAAe,EAAE,EAAE;IAAE,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,oBAAoB,GAAG,SAAS,CAAA;CAAE;;;wBAIlI,QAAQ;sBAsBR,QAAQ;EAelB"}

package/lib/esm/presentation-hierarchies-react/stratakit/TreeNodeRenameAction.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { createContext, memo, useCallback, useContext, useMemo, useState } from "react";
+import renameSvg from "@stratakit/icons/rename.svg";
+import { useLocalizationContext } from "./LocalizationContext.js";
+import { TreeActionBase } from "./TreeAction.js";
+/**
+ * React component that renders a rename action for a tree item.
+ *
+ * The tree component must have `getEditingProps.onLabelChanged` prop set to enable renaming functionality. When
+ * rename is completed, the `onLabelChanged` function is called to make the actual data update.
+ *
+ * @see `getMenuActions`, `getInlineActions`, `getContextMenuActions` props of `TreeRenderer` to add this action
+ * to tree items.
+ *
+ * @alpha
+ */
+export const TreeNodeRenameAction = memo(function TreeNodeRenameAction({ node, ...actionAttributes }) {
+    const { localizedStrings } = useLocalizationContext();
+    const context = useTreeNodeRenameContext();
+    const { rename } = localizedStrings;
+    const canRename = context?.canRename(node) ?? false;
+    const startRename = context?.startRename;
+    const handleClick = useCallback(() => {
+        startRename?.(node);
+    }, [startRename, node]);
+    return _jsx(TreeActionBase, { ...actionAttributes, label: rename, onClick: handleClick, icon: renameSvg, hide: !canRename });
+});
+const treeNodeRenameContext = createContext(undefined);
+/** @internal */
+export const useTreeNodeRenameContext = () => {
+    return useContext(treeNodeRenameContext);
+};
+/** @internal */
+export function TreeNodeRenameContextProvider({ value, children }) {
+    return _jsx(treeNodeRenameContext.Provider, { value: value, children: children });
+}
+/** @internal */
+export function useTreeNodeRenameContextValue({ getEditingProps }) {
+    const [renameParameters, setRenameParameters] = useState(undefined);
+    const startRename = useCallback((node) => {
+        const { onLabelChanged, labelValidationHint, validate } = getEditingProps?.(node) ?? {};
+        if (onLabelChanged) {
+            setRenameParameters({
+                nodeId: node.id,
+                commit: (newLabel) => {
+                    onLabelChanged(newLabel);
+                    setRenameParameters(undefined);
+                },
+                labelValidationHint,
+                validate,
+            });
+        }
+    }, [getEditingProps]);
+    const cancelRename = useCallback(() => {
+        setRenameParameters(undefined);
+    }, []);
+    const canRename = useCallback((node) => {
+        return getEditingProps?.(node)?.onLabelChanged !== undefined;
+    }, [getEditingProps]);
+    return useMemo(() => ({
+        renameParameters,
+        cancelRename,
+        startRename,
+        canRename,
+    }), [renameParameters, canRename, startRename, cancelRename]);
+}
+//# sourceMappingURL=TreeNodeRenameAction.js.map

package/lib/esm/presentation-hierarchies-react/stratakit/TreeNodeRenameAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeNodeRenameAction.js","sourceRoot":"","sources":["../../../../src/presentation-hierarchies-react/stratakit/TreeNodeRenameAction.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport { createContext, memo, PropsWithChildren, useCallback, useContext, useMemo, useState } from \"react\";\nimport renameSvg from \"@stratakit/icons/rename.svg\";\nimport { TreeNode } from \"../TreeNode.js\";\nimport { useLocalizationContext } from \"./LocalizationContext.js\";\nimport { TreeActionBase, TreeActionBaseAttributes } from \"./TreeAction.js\";\n\n/**\n * React component that renders a rename action for a tree item.\n *\n * The tree component must have `getEditingProps.onLabelChanged` prop set to enable renaming functionality. When\n * rename is completed, the `onLabelChanged` function is called to make the actual data update.\n *\n * @see `getMenuActions`, `getInlineActions`, `getContextMenuActions` props of `TreeRenderer` to add this action\n * to tree items.\n *\n * @alpha\n */\nexport const TreeNodeRenameAction = memo(function TreeNodeRenameAction({ node, ...actionAttributes }: TreeActionBaseAttributes & { node: TreeNode }) {\n  const { localizedStrings } = useLocalizationContext();\n  const context = useTreeNodeRenameContext();\n  const { rename } = localizedStrings;\n\n  const canRename = context?.canRename(node) ?? false;\n  const startRename = context?.startRename;\n  const handleClick = useCallback(() => {\n    startRename?.(node);\n  }, [startRename, node]);\n\n  return <TreeActionBase {...actionAttributes} label={rename} onClick={handleClick} icon={renameSvg} hide={!canRename} />;\n});\n\n/** @alpha */\nexport interface TreeNodeEditingProps {\n  /**\n   * A callback that is invoked when node label is changed. Should be used together\n   * with `<TreeNodeRenameAction />` to enter label editing mode.\n   */\n  onLabelChanged: (newLabel: string) => void;\n  labelValidationHint?: string;\n  validate?: (newLabel: string) => boolean;\n}\n\n/** @internal */\nexport interface RenameParameters {\n  nodeId: string;\n  commit: (newLabel: string) => void;\n  labelValidationHint?: string;\n  validate?: (newLabel: string) => boolean;\n}\n\ninterface TreeNodeRenameContext {\n  renameParameters?: RenameParameters;\n  startRename: (node: TreeNode) => void;\n  canRename: (node: TreeNode) => boolean;\n  cancelRename: () => void;\n}\n\nconst treeNodeRenameContext = createContext<TreeNodeRenameContext | undefined>(undefined);\n\n/** @internal */\nexport const useTreeNodeRenameContext = () => {\n  return useContext(treeNodeRenameContext);\n};\n\n/** @internal */\nexport function TreeNodeRenameContextProvider({ value, children }: PropsWithChildren<{ value: TreeNodeRenameContext }>) {\n  return <treeNodeRenameContext.Provider value={value}>{children}</treeNodeRenameContext.Provider>;\n}\n\n/** @internal */\nexport function useTreeNodeRenameContextValue({ getEditingProps }: { getEditingProps?: (node: TreeNode) => TreeNodeEditingProps | undefined }) {\n  const [renameParameters, setRenameParameters] = useState<RenameParameters | undefined>(undefined);\n\n  const startRename = useCallback(\n    (node: TreeNode) => {\n      const { onLabelChanged, labelValidationHint, validate } = getEditingProps?.(node) ?? {};\n      if (onLabelChanged) {\n        setRenameParameters({\n          nodeId: node.id,\n          commit: (newLabel) => {\n            onLabelChanged(newLabel);\n            setRenameParameters(undefined);\n          },\n          labelValidationHint,\n          validate,\n        });\n      }\n    },\n    [getEditingProps],\n  );\n\n  const cancelRename = useCallback(() => {\n    setRenameParameters(undefined);\n  }, []);\n\n  const canRename = useCallback(\n    (node: TreeNode) => {\n      return getEditingProps?.(node)?.onLabelChanged !== undefined;\n    },\n    [getEditingProps],\n  );\n\n  return useMemo(\n    () => ({\n      renameParameters,\n      cancelRename,\n      startRename,\n      canRename,\n    }),\n    [renameParameters, canRename, startRename, cancelRename],\n  );\n}\n"]}

package/lib/esm/presentation-hierarchies-react/stratakit/TreeNodeRenderer.css

@@ -0,0 +1,25 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+.phr-node-label-editor {
+  padding: var(--stratakit-space-x1);
+  width: 300px;
+  display: grid;
+  gap: var(--stratakit-space-x1);
+  grid-template-rows: auto auto;
+
+  .phr-node-label-editor-input-row {
+    display: grid;
+    gap: var(--stratakit-space-x1);
+    grid-template-columns: 1fr auto auto;
+
+    .with-error {
+      outline-color: var(--stratakit-color-border-critical-base);
+      &::before {
+        border-color: var(--stratakit-color-border-critical-base);
+      }
+    }
+  }
+}

package/lib/esm/presentation-hierarchies-react/stratakit/TreeNodeRenderer.d.ts

@@ -0,0 +1,46 @@
+import "./TreeNodeRenderer.css";
+import { ComponentPropsWithoutRef, FC, PropsWithRef, ReactNode, RefAttributes } from "react";
+import { Tree } from "@stratakit/structures";
+import { TreeRendererProps } from "../Renderers.js";
+import { TreeNode } from "../TreeNode.js";
+/** @internal */
+interface TreeNodeRendererOwnProps extends Pick<TreeRendererProps, "expandNode" | "reloadTree"> {
+    /** Node that is rendered. */
+    node: TreeNode;
+    /**
+     * Menu actions for tree item.
+     * Must be an array of `<TreeActionBase />` or `<Divider />` elements.
+     */
+    menuActions?: ReactNode[];
+    /**
+     * Inline actions for tree item.
+     * Must be an array of `<TreeActionBase />` elements.
+     * Max 2 items.
+     */
+    inlineActions?: ReactNode[];
+    /**
+     * Context menu actions for tree item.
+     * Must be an array of `<TreeActionBase />` or `<Divider />` elements.
+     */
+    contextMenuActions?: ReactNode[];
+}
+/** @alpha */
+export type StrataKitTreeItemProps = Omit<ComponentPropsWithoutRef<typeof Tree.Item>, "actions" | "inlineActions" | "expanded" | "onExpandedChange" | "icon" | "unstable_decorations" | "error"> & {
+    /**
+     * Used to render elements between expander and label.
+     * E.g. icons, color picker, etc.
+     */
+    decorations?: ReactNode;
+};
+/** @internal */
+export type TreeNodeRendererProps = StrataKitTreeItemProps & TreeNodeRendererOwnProps;
+/**
+ * A component that renders given `FlatTreeNode` using the `Tree.Item` component from `@itwin/itwinui-react`. The
+ * `FlatTreeNode` objects for this renderer are generally created using the `useFlatTreeNodeList` hook.
+ *
+ * @internal
+ */
+export declare const StrataKitTreeNodeRenderer: FC<PropsWithRef<TreeNodeRendererProps & RefAttributes<HTMLElement>>>;
+export declare const PlaceholderNode: FC<PropsWithRef<Pick<StrataKitTreeItemProps, "style" | "aria-level" | "aria-posinset" | "aria-setsize"> & RefAttributes<HTMLElement>>>;
+export {};
+//# sourceMappingURL=TreeNodeRenderer.d.ts.map

package/lib/esm/presentation-hierarchies-react/stratakit/TreeNodeRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeNodeRenderer.d.ts","sourceRoot":"","sources":["../../../../src/presentation-hierarchies-react/stratakit/TreeNodeRenderer.tsx"],"names":[],"mappings":"AAKA,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAEL,wBAAwB,EACxB,EAAE,EAIF,YAAY,EACZ,SAAS,EACT,aAAa,EAOd,MAAM,OAAO,CAAC;AAKf,OAAO,EAA6C,IAAI,EAAE,MAAM,uBAAuB,CAAC;AACxF,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAK1C,gBAAgB;AAChB,UAAU,wBAAyB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,YAAY,CAAC;IAC7F,6BAA6B;IAC7B,IAAI,EAAE,QAAQ,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,EAAE,CAAC;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;IAC5B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;CAClC;AAED,aAAa;AACb,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,wBAAwB,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,EAC1C,SAAS,GAAG,eAAe,GAAG,UAAU,GAAG,kBAAkB,GAAG,MAAM,GAAG,sBAAsB,GAAG,OAAO,CAC1G,GAAG;IACF;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB,CAAC;AAEF,gBAAgB;AAChB,MAAM,MAAM,qBAAqB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;AAEtF;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,EAAE,EAAE,CAAC,YAAY,CAAC,qBAAqB,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC,CA2H1G,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,EAAE,CAC9B,YAAY,CAAC,IAAI,CAAC,sBAAsB,EAAE,OAAO,GAAG,YAAY,GAAG,eAAe,GAAG,cAAc,CAAC,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC,CAgBnI,CAAC"}

package/lib/esm/presentation-hierarchies-react/stratakit/TreeNodeRenderer.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import "./TreeNodeRenderer.css";
+import { cloneElement, forwardRef, isValidElement, memo, useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
+import { Description, IconButton, Spinner, Text, TextBox } from "@stratakit/bricks";
+import checkmarkSvg from "@stratakit/icons/checkmark.svg";
+import dismissSvg from "@stratakit/icons/dismiss.svg";
+import refreshSvg from "@stratakit/icons/refresh.svg";
+import { DropdownMenu, unstable_Popover as Popover, Tree } from "@stratakit/structures";
+import { useLocalizationContext } from "./LocalizationContext.js";
+import { TreeActionBase } from "./TreeAction.js";
+import { useTreeNodeRenameContext } from "./TreeNodeRenameAction.js";
+/**
+ * A component that renders given `FlatTreeNode` using the `Tree.Item` component from `@itwin/itwinui-react`. The
+ * `FlatTreeNode` objects for this renderer are generally created using the `useFlatTreeNodeList` hook.
+ *
+ * @internal
+ */
+export const StrataKitTreeNodeRenderer = memo(forwardRef(function HierarchyNode(props, forwardedRef) {
+    const { node, decorations, inlineActions, menuActions, contextMenuActions, expandNode, reloadTree, ...treeItemProps } = props;
+    const { localizedStrings } = useLocalizationContext();
+    const renameContext = useTreeNodeRenameContext();
+    const [contextMenuProps, setContextMenuProps] = useState(undefined);
+    const label = treeItemProps.label ?? node.label;
+    const inlineActionItems = useMemo(() => {
+        if (node.error !== undefined && node.error.type === "ChildrenLoad") {
+            return [
+                _jsx(TreeActionBase, { label: localizedStrings.retry, onClick: () => reloadTree({ parentNodeId: node.id, state: "reset" }), visible: true, icon: refreshSvg, variant: "inline" }, "retry"),
+            ];
+        }
+        if (!inlineActions) {
+            return undefined;
+        }
+        return injectActionVariant(inlineActions, "inline");
+    }, [node, inlineActions, localizedStrings.retry, reloadTree]);
+    const menuActionItems = useMemo(() => {
+        if (!menuActions) {
+            return undefined;
+        }
+        return injectActionVariant(menuActions, "default");
+    }, [menuActions]);
+    const expanded = useMemo(() => {
+        if (node.error) {
+            return undefined;
+        }
+        if (node.isExpanded || node.children === true || node.children.length > 0) {
+            return node.isExpanded;
+        }
+        return undefined;
+    }, [node.children, node.error, node.isExpanded]);
+    const { renameParameters, cancelRename } = renameContext ?? {};
+    const labelEditor = (_jsx(LabelEditor, { initialLabel: node.label, onChange: renameParameters?.commit, onCancel: cancelRename, labelValidationHint: renameParameters?.labelValidationHint, validate: renameParameters?.validate }));
+    return (_jsxs(_Fragment, { children: [_jsx(Popover, { content: labelEditor, placement: "bottom", open: renameParameters?.nodeId === node.id, setOpen: cancelRename, unmountOnHide: true, children: _jsx(Tree.Item, { ...treeItemProps, ref: forwardedRef, label: label, expanded: expanded, onExpandedChange: useCallback((isExpanded) => {
+                        expandNode(node.id, isExpanded);
+                    }, [node, expandNode]), inlineActions: inlineActionItems, actions: menuActionItems, unstable_decorations: decorations, error: node.error ? node.error.id : undefined, onContextMenu: (e) => {
+                        if (treeItemProps.onContextMenu) {
+                            treeItemProps.onContextMenu(e);
+                        }
+                        if (!contextMenuActions) {
+                            return;
+                        }
+                        e.preventDefault();
+                        const actions = injectActionVariant(contextMenuActions, "context-menu");
+                        if (actions.length === 0) {
+                            return;
+                        }
+                        setContextMenuProps({
+                            position: {
+                                x: e.clientX,
+                                y: e.clientY,
+                            },
+                            actions,
+                        });
+                    } }) }), _jsxs(DropdownMenu.Provider, { open: contextMenuProps !== undefined, setOpen: (open) => {
+                    if (!open) {
+                        setContextMenuProps(undefined);
+                    }
+                }, children: [contextMenuProps ? (_jsx(DropdownMenu.Button, { style: { position: "fixed", top: contextMenuProps.position.y, left: contextMenuProps.position.x }, render: _jsx("div", {}) })) : null, _jsx(DropdownMenu.Content, { focusable: true, autoFocus: true, children: contextMenuProps?.actions })] }, `${node.id}-${contextMenuProps?.position.x ?? ""}-${contextMenuProps?.position.y ?? ""}`)] }));
+}));
+export const PlaceholderNode = memo(forwardRef(function PlaceholderNode({ ...props }, forwardedRef) {
+    const { localizedStrings } = useLocalizationContext();
+    return (_jsx(Tree.Item, { ...props, ref: forwardedRef, label: localizedStrings.loading, unstable_decorations: _jsx(Spinner, { size: "small", title: localizedStrings.loading }) }));
+}));
+function LabelEditor({ initialLabel, labelValidationHint, onChange, onCancel, validate, }) {
+    const { localizedStrings } = useLocalizationContext();
+    const inputRef = useRef(null);
+    const [newLabelValue, setNewLabelValue] = useState(initialLabel);
+    const [hasError, setHasError] = useState(false);
+    const handleLabelChange = () => {
+        if (validate && !validate(newLabelValue)) {
+            setHasError(true);
+            return;
+        }
+        if (initialLabel !== newLabelValue) {
+            onChange?.(newLabelValue);
+            return;
+        }
+        onCancel?.();
+    };
+    const cancelLabelChange = () => {
+        setNewLabelValue(initialLabel);
+        onCancel?.();
+    };
+    useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.focus();
+            inputRef.current.select();
+        }
+    }, []);
+    const canRename = newLabelValue && newLabelValue !== initialLabel && !hasError;
+    const inputId = useId();
+    return (_jsxs("div", { className: "phr-node-label-editor", children: [_jsxs("div", { className: "phr-node-label-editor-input-row", children: [_jsx(TextBox.Root, { style: { width: "100%" }, className: hasError ? "with-error" : undefined, children: _jsx(TextBox.Input, { id: inputId, ref: inputRef, value: newLabelValue, onChange: (event) => {
+                                setNewLabelValue(event.target.value);
+                                setHasError(false);
+                            }, onKeyDown: (event) => {
+                                if (event.key === "Enter") {
+                                    handleLabelChange();
+                                }
+                                else if (event.key === "Escape") {
+                                    cancelLabelChange();
+                                }
+                            } }) }), _jsx(IconButton, { icon: dismissSvg, label: localizedStrings.cancel, onClick: cancelLabelChange }), _jsx(IconButton, { icon: checkmarkSvg, label: localizedStrings.confirm, onClick: handleLabelChange, disabled: !canRename })] }), labelValidationHint !== undefined ? (_jsx(Description, { id: inputId, tone: hasError ? "critical" : "neutral", style: { display: "flex" }, children: _jsx(Text, { variant: "caption-lg", children: labelValidationHint }) })) : undefined] }, initialLabel));
+}
+function injectActionVariant(actions, variant) {
+    return actions
+        .filter((action) => isValidElement(action))
+        .map((action) => cloneElement(action, { variant }));
+}
+//# sourceMappingURL=TreeNodeRenderer.js.map

package/lib/esm/presentation-hierarchies-react/stratakit/TreeNodeRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeNodeRenderer.js","sourceRoot":"","sources":["../../../../src/presentation-hierarchies-react/stratakit/TreeNodeRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport \"./TreeNodeRenderer.css\";\n\nimport {\n  cloneElement,\n  ComponentPropsWithoutRef,\n  FC,\n  forwardRef,\n  isValidElement,\n  memo,\n  PropsWithRef,\n  ReactNode,\n  RefAttributes,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Description, IconButton, Spinner, Text, TextBox } from \"@stratakit/bricks\";\nimport checkmarkSvg from \"@stratakit/icons/checkmark.svg\";\nimport dismissSvg from \"@stratakit/icons/dismiss.svg\";\nimport refreshSvg from \"@stratakit/icons/refresh.svg\";\nimport { DropdownMenu, unstable_Popover as Popover, Tree } from \"@stratakit/structures\";\nimport { TreeRendererProps } from \"../Renderers.js\";\nimport { TreeNode } from \"../TreeNode.js\";\nimport { useLocalizationContext } from \"./LocalizationContext.js\";\nimport { TreeActionBase, TreeActionBaseAttributes } from \"./TreeAction.js\";\nimport { useTreeNodeRenameContext } from \"./TreeNodeRenameAction.js\";\n\n/** @internal */\ninterface TreeNodeRendererOwnProps extends Pick<TreeRendererProps, \"expandNode\" | \"reloadTree\"> {\n  /** Node that is rendered. */\n  node: TreeNode;\n  /**\n   * Menu actions for tree item.\n   * Must be an array of `<TreeActionBase />` or `<Divider />` elements.\n   */\n  menuActions?: ReactNode[];\n  /**\n   * Inline actions for tree item.\n   * Must be an array of `<TreeActionBase />` elements.\n   * Max 2 items.\n   */\n  inlineActions?: ReactNode[];\n  /**\n   * Context menu actions for tree item.\n   * Must be an array of `<TreeActionBase />` or `<Divider />` elements.\n   */\n  contextMenuActions?: ReactNode[];\n}\n\n/** @alpha */\nexport type StrataKitTreeItemProps = Omit<\n  ComponentPropsWithoutRef<typeof Tree.Item>,\n  \"actions\" | \"inlineActions\" | \"expanded\" | \"onExpandedChange\" | \"icon\" | \"unstable_decorations\" | \"error\"\n> & {\n  /**\n   * Used to render elements between expander and label.\n   * E.g. icons, color picker, etc.\n   */\n  decorations?: ReactNode;\n};\n\n/** @internal */\nexport type TreeNodeRendererProps = StrataKitTreeItemProps & TreeNodeRendererOwnProps;\n\n/**\n * A component that renders given `FlatTreeNode` using the `Tree.Item` component from `@itwin/itwinui-react`. The\n * `FlatTreeNode` objects for this renderer are generally created using the `useFlatTreeNodeList` hook.\n *\n * @internal\n */\nexport const StrataKitTreeNodeRenderer: FC<PropsWithRef<TreeNodeRendererProps & RefAttributes<HTMLElement>>> = memo(\n  forwardRef<HTMLElement, TreeNodeRendererProps>(function HierarchyNode(props, forwardedRef) {\n    const { node, decorations, inlineActions, menuActions, contextMenuActions, expandNode, reloadTree, ...treeItemProps } = props;\n    const { localizedStrings } = useLocalizationContext();\n    const renameContext = useTreeNodeRenameContext();\n    const [contextMenuProps, setContextMenuProps] = useState<{ position: { x: number; y: number }; actions: ReactNode[] } | undefined>(undefined);\n\n    const label = treeItemProps.label ?? node.label;\n    const inlineActionItems = useMemo(() => {\n      if (node.error !== undefined && node.error.type === \"ChildrenLoad\") {\n        return [\n          <TreeActionBase\n            key=\"retry\"\n            label={localizedStrings.retry}\n            onClick={() => reloadTree({ parentNodeId: node.id, state: \"reset\" })}\n            visible={true}\n            icon={refreshSvg}\n            variant=\"inline\"\n          />,\n        ];\n      }\n      if (!inlineActions) {\n        return undefined;\n      }\n      return injectActionVariant(inlineActions, \"inline\");\n    }, [node, inlineActions, localizedStrings.retry, reloadTree]);\n\n    const menuActionItems = useMemo(() => {\n      if (!menuActions) {\n        return undefined;\n      }\n      return injectActionVariant(menuActions, \"default\");\n    }, [menuActions]);\n\n    const expanded = useMemo(() => {\n      if (node.error) {\n        return undefined;\n      }\n\n      if (node.isExpanded || node.children === true || node.children.length > 0) {\n        return node.isExpanded;\n      }\n\n      return undefined;\n    }, [node.children, node.error, node.isExpanded]);\n\n    const { renameParameters, cancelRename } = renameContext ?? {};\n    const labelEditor = (\n      <LabelEditor\n        initialLabel={node.label}\n        onChange={renameParameters?.commit}\n        onCancel={cancelRename}\n        labelValidationHint={renameParameters?.labelValidationHint}\n        validate={renameParameters?.validate}\n      />\n    );\n\n    return (\n      <>\n        <Popover content={labelEditor} placement=\"bottom\" open={renameParameters?.nodeId === node.id} setOpen={cancelRename} unmountOnHide>\n          <Tree.Item\n            {...treeItemProps}\n            ref={forwardedRef}\n            label={label}\n            expanded={expanded}\n            onExpandedChange={useCallback(\n              (isExpanded: boolean) => {\n                expandNode(node.id, isExpanded);\n              },\n              [node, expandNode],\n            )}\n            inlineActions={inlineActionItems}\n            actions={menuActionItems}\n            unstable_decorations={decorations}\n            error={node.error ? node.error.id : undefined}\n            onContextMenu={(e) => {\n              if (treeItemProps.onContextMenu) {\n                treeItemProps.onContextMenu(e);\n              }\n\n              if (!contextMenuActions) {\n                return;\n              }\n\n              e.preventDefault();\n              const actions = injectActionVariant(contextMenuActions, \"context-menu\");\n              if (actions.length === 0) {\n                return;\n              }\n\n              setContextMenuProps({\n                position: {\n                  x: e.clientX,\n                  y: e.clientY,\n                },\n                actions,\n              });\n            }}\n          />\n        </Popover>\n        <DropdownMenu.Provider\n          open={contextMenuProps !== undefined}\n          setOpen={(open) => {\n            if (!open) {\n              setContextMenuProps(undefined);\n            }\n          }}\n          key={`${node.id}-${contextMenuProps?.position.x ?? \"\"}-${contextMenuProps?.position.y ?? \"\"}`}\n        >\n          {contextMenuProps ? (\n            <DropdownMenu.Button style={{ position: \"fixed\", top: contextMenuProps.position.y, left: contextMenuProps.position.x }} render={<div />} />\n          ) : null}\n          {/* `autoFocus` prop is coming from ariakit and is not native HTML `autoFocus` prop. */}\n          {/* `focusable` is needed for `autoFocus` to work. StrataKit exposes only `autoFocus` and does not set `focusable` internally. */}\n          {/* eslint-disable jsx-a11y/no-autofocus */}\n          {/* @ts-expect-error focusable is passed through */}\n          <DropdownMenu.Content focusable autoFocus={true}>\n            {contextMenuProps?.actions}\n          </DropdownMenu.Content>\n        </DropdownMenu.Provider>\n      </>\n    );\n  }),\n);\n\nexport const PlaceholderNode: FC<\n  PropsWithRef<Pick<StrataKitTreeItemProps, \"style\" | \"aria-level\" | \"aria-posinset\" | \"aria-setsize\"> & RefAttributes<HTMLElement>>\n> = memo(\n  forwardRef<HTMLElement, Pick<StrataKitTreeItemProps, \"style\" | \"aria-level\" | \"aria-posinset\" | \"aria-setsize\">>(function PlaceholderNode(\n    { ...props },\n    forwardedRef,\n  ) {\n    const { localizedStrings } = useLocalizationContext();\n    return (\n      <Tree.Item\n        {...props}\n        ref={forwardedRef}\n        label={localizedStrings.loading}\n        unstable_decorations={<Spinner size={\"small\"} title={localizedStrings.loading} />}\n      />\n    );\n  }),\n);\n\nfunction LabelEditor({\n  initialLabel,\n  labelValidationHint,\n  onChange,\n  onCancel,\n  validate,\n}: {\n  initialLabel: string;\n  labelValidationHint?: string;\n  onChange?: (newLabel: string) => void;\n  onCancel?: () => void;\n  validate?: (newLabel: string) => boolean;\n}) {\n  const { localizedStrings } = useLocalizationContext();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [newLabelValue, setNewLabelValue] = useState(initialLabel);\n  const [hasError, setHasError] = useState<boolean>(false);\n  const handleLabelChange = () => {\n    if (validate && !validate(newLabelValue)) {\n      setHasError(true);\n      return;\n    }\n\n    if (initialLabel !== newLabelValue) {\n      onChange?.(newLabelValue);\n      return;\n    }\n    onCancel?.();\n  };\n\n  const cancelLabelChange = () => {\n    setNewLabelValue(initialLabel);\n    onCancel?.();\n  };\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.focus();\n      inputRef.current.select();\n    }\n  }, []);\n\n  const canRename = newLabelValue && newLabelValue !== initialLabel && !hasError;\n  const inputId = useId();\n\n  return (\n    <div key={initialLabel} className=\"phr-node-label-editor\">\n      <div className=\"phr-node-label-editor-input-row\">\n        <TextBox.Root style={{ width: \"100%\" }} className={hasError ? \"with-error\" : undefined}>\n          <TextBox.Input\n            id={inputId}\n            ref={inputRef}\n            value={newLabelValue}\n            onChange={(event) => {\n              setNewLabelValue(event.target.value);\n              setHasError(false);\n            }}\n            onKeyDown={(event) => {\n              if (event.key === \"Enter\") {\n                handleLabelChange();\n              } else if (event.key === \"Escape\") {\n                cancelLabelChange();\n              }\n            }}\n          />\n        </TextBox.Root>\n        <IconButton icon={dismissSvg} label={localizedStrings.cancel} onClick={cancelLabelChange} />\n        <IconButton icon={checkmarkSvg} label={localizedStrings.confirm} onClick={handleLabelChange} disabled={!canRename} />\n      </div>\n      {labelValidationHint !== undefined ? (\n        <Description id={inputId} tone={hasError ? \"critical\" : \"neutral\"} style={{ display: \"flex\" }}>\n          <Text variant=\"caption-lg\">{labelValidationHint}</Text>\n        </Description>\n      ) : undefined}\n    </div>\n  );\n}\n\nfunction injectActionVariant(actions: ReactNode[], variant: TreeActionBaseAttributes[\"variant\"]) {\n  return actions\n    .filter((action) => isValidElement<TreeActionBaseAttributes>(action))\n    .map((action) => cloneElement<TreeActionBaseAttributes>(action, { variant }));\n}\n"]}

package/lib/esm/presentation-hierarchies-react/stratakit/TreeRenderer.d.ts

@@ -0,0 +1,75 @@
+import { ComponentProps, ComponentPropsWithoutRef, FC, PropsWithoutRef, ReactElement, ReactNode, RefAttributes } from "react";
+import { Tree } from "@stratakit/structures";
+import { TreeRendererProps } from "../Renderers.js";
+import { TreeNode } from "../TreeNode.js";
+import { SelectionMode } from "../UseSelectionHandler.js";
+import { LocalizationContextProvider } from "./LocalizationContext.js";
+import { TreeErrorRendererProps } from "./TreeErrorRenderer.js";
+import { TreeNodeEditingProps } from "./TreeNodeRenameAction.js";
+import { StrataKitTreeItemProps } from "./TreeNodeRenderer.js";
+/** @alpha */
+interface TreeRendererOwnProps {
+    id?: string;
+    /**
+     * A user friendly display label of the tree. Should be unique within the consuming application,
+     * as it's used for accessibility purposes.
+     */
+    treeLabel: string;
+    /** Active selection mode used by the tree. Defaults to `"single"`. */
+    selectionMode?: SelectionMode;
+    /** A render function for errors' display component. Defaults to `<TreeErrorRenderer />`. */
+    errorRenderer?: (props: TreeErrorRendererProps) => ReactElement;
+    /** Props that defines if current node supports editing. */
+    getEditingProps?: (node: TreeNode) => TreeNodeEditingProps | undefined;
+    /** Custom props for the root Tree component. */
+    treeRootProps?: Partial<Omit<ComponentProps<typeof Tree.Root>, "style">>;
+    /** A callback that returns tree item props for specific node. */
+    getTreeItemProps?: (node: TreeNode) => Partial<Omit<StrataKitTreeItemProps, "selected" | "aria-level" | "aria-posinset" | "aria-setsize">>;
+    /**
+     * Callback that returns menu actions for tree item.
+     * Must return an array of `<TreeActionBase />` or `<Divider />` elements.
+     */
+    getMenuActions?: (props: {
+        targetNode: TreeNode;
+        selectedNodes: TreeNode[];
+    }) => ReactNode[];
+    /**
+     * Callback that returns inline actions for tree item.
+     * Must return an array of `<TreeActionBase />` elements.
+     * Max 2 items.
+     */
+    getInlineActions?: (props: {
+        targetNode: TreeNode;
+        selectedNodes: TreeNode[];
+    }) => ReactNode[];
+    /**
+     * Callback that returns actions for tree item context menu.
+     * Must return an array of `<TreeActionBase />` or `<Divider />` elements.
+     */
+    getContextMenuActions?: (props: {
+        targetNode: TreeNode;
+        selectedNodes: TreeNode[];
+    }) => ReactNode[];
+}
+/** @alpha */
+export interface StrataKitTreeRendererAttributes {
+    /**
+     * Opens rename mode for the first node that matches the given predicate. Node must be already loaded in the tree.
+     * If the node is not visible (because its parent is collapsed), all parents will be expanded to make it visible and node will be scrolled into view.
+     *
+     * Returns "node-not-found" if no node matches the predicate, "success" if rename was initiated.
+     */
+    renameNode: (nodePredicate: (node: TreeNode) => boolean) => "node-not-found" | "success";
+}
+/** @alpha */
+type StrataKitTreeRendererProps = TreeRendererProps & Pick<TreeErrorRendererProps, "filterHierarchyLevel"> & TreeRendererOwnProps & ComponentPropsWithoutRef<typeof LocalizationContextProvider>;
+/**
+ * A component that renders a tree using the `Tree` component from `@itwin/itwinui-react`. The tree nodes
+ * are rendered using `TreeNodeRenderer` component from this package.
+ *
+ * @see https://itwinui.bentley.com/docs/tree
+ * @alpha
+ */
+export declare const StrataKitTreeRenderer: FC<PropsWithoutRef<StrataKitTreeRendererProps> & RefAttributes<StrataKitTreeRendererAttributes>>;
+export {};
+//# sourceMappingURL=TreeRenderer.d.ts.map

package/lib/esm/presentation-hierarchies-react/stratakit/TreeRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeRenderer.d.ts","sourceRoot":"","sources":["../../../../src/presentation-hierarchies-react/stratakit/TreeRenderer.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,cAAc,EACd,wBAAwB,EAExB,EAAE,EAGF,eAAe,EACf,YAAY,EACZ,SAAS,EACT,aAAa,EAMd,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAE7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAuB,MAAM,2BAA2B,CAAC;AAG/E,OAAO,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAqB,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AACnF,OAAO,EAAE,oBAAoB,EAAgE,MAAM,2BAA2B,CAAC;AAC/H,OAAO,EAAmB,sBAAsB,EAAoD,MAAM,uBAAuB,CAAC;AAElI,aAAa;AACb,UAAU,oBAAoB;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB,sEAAsE;IACtE,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,4FAA4F;IAC5F,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,YAAY,CAAC;IAChE,2DAA2D;IAC3D,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,oBAAoB,GAAG,SAAS,CAAC;IAEvE,gDAAgD;IAChD,aAAa,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC;IAEzE,iEAAiE;IACjE,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAC,IAAI,CAAC,sBAAsB,EAAE,UAAU,GAAG,YAAY,GAAG,eAAe,GAAG,cAAc,CAAC,CAAC,CAAC;IAE3I;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,UAAU,EAAE,QAAQ,CAAC;QAAC,aAAa,EAAE,QAAQ,EAAE,CAAA;KAAE,KAAK,SAAS,EAAE,CAAC;IAC7F;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,UAAU,EAAE,QAAQ,CAAC;QAAC,aAAa,EAAE,QAAQ,EAAE,CAAA;KAAE,KAAK,SAAS,EAAE,CAAC;IAC/F;;;OAGG;IACH,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,UAAU,EAAE,QAAQ,CAAC;QAAC,aAAa,EAAE,QAAQ,EAAE,CAAA;KAAE,KAAK,SAAS,EAAE,CAAC;CACrG;AAED,aAAa;AACb,MAAM,WAAW,+BAA+B;IAC9C;;;;;OAKG;IACH,UAAU,EAAE,CAAC,aAAa,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,KAAK,gBAAgB,GAAG,SAAS,CAAC;CAC1F;AAED,aAAa;AACb,KAAK,0BAA0B,GAAG,iBAAiB,GACjD,IAAI,CAAC,sBAAsB,EAAE,sBAAsB,CAAC,GACpD,oBAAoB,GACpB,wBAAwB,CAAC,OAAO,2BAA2B,CAAC,CAAC;AAE/D;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,eAAe,CAAC,0BAA0B,CAAC,GAAG,aAAa,CAAC,+BAA+B,CAAC,CA4HjI,CAAC"}