@underverse-ui/underverse 1.0.118 → 1.0.119

package/dist/index.d.cts

@@ -1890,6 +1890,46 @@ interface CategoryTreeSelectBaseProps {
     minSearchLength?: number;
     /** Show a prompt instead of options while the query is shorter than `minSearchLength`. Default: `false`. */
     showSearchPromptWhenEmptyQuery?: boolean;
+    /**
+     * Render custom actions at the trailing edge of each tree row.
+     *
+     * @remarks
+     * The returned node is placed inside the row flex container, after the label/content area.
+     * Click events on the returned node are stopped from propagating to the row, so action buttons
+     * do not accidentally trigger selection or expansion.
+     *
+     * @example
+     * <CategoryTreeSelect
+     *   renderItemActions={(category) => (
+     *     <button onClick={() => handleEdit(category)}>Edit</button>
+     *   )}
+     * />
+     */
+    renderItemActions?: (category: Category) => React__default.ReactNode;
+    /**
+     * Base left padding in rem applied to every node regardless of depth. Default: `0.75`.
+     *
+     * @remarks
+     * Combined with `indentSize`, the final padding of a node at a given depth is:
+     * `paddingLeft = level * indentSize + baseIndent` rem.
+     *
+     * @example
+     * // Compact sidebar tree
+     * <CategoryTreeSelect baseIndent={0.25} indentSize={0.75} />
+     */
+    baseIndent?: number;
+    /**
+     * Additional left padding in rem added per depth level. Default: `1`.
+     *
+     * @remarks
+     * Set to a smaller value (e.g. `0.75`) to reduce the visual gap between
+     * parent and child nodes without touching DOM styles.
+     *
+     * @example
+     * // Compact sidebar tree
+     * <CategoryTreeSelect baseIndent={0.25} indentSize={0.75} />
+     */
+    indentSize?: number;
 }
 /** Multi-select mode. This is the default when `singleSelect` is omitted. */
 interface CategoryTreeSelectMultiProps extends CategoryTreeSelectBaseProps {

package/dist/index.d.ts

@@ -1890,6 +1890,46 @@ interface CategoryTreeSelectBaseProps {
     minSearchLength?: number;
     /** Show a prompt instead of options while the query is shorter than `minSearchLength`. Default: `false`. */
     showSearchPromptWhenEmptyQuery?: boolean;
+    /**
+     * Render custom actions at the trailing edge of each tree row.
+     *
+     * @remarks
+     * The returned node is placed inside the row flex container, after the label/content area.
+     * Click events on the returned node are stopped from propagating to the row, so action buttons
+     * do not accidentally trigger selection or expansion.
+     *
+     * @example
+     * <CategoryTreeSelect
+     *   renderItemActions={(category) => (
+     *     <button onClick={() => handleEdit(category)}>Edit</button>
+     *   )}
+     * />
+     */
+    renderItemActions?: (category: Category) => React__default.ReactNode;
+    /**
+     * Base left padding in rem applied to every node regardless of depth. Default: `0.75`.
+     *
+     * @remarks
+     * Combined with `indentSize`, the final padding of a node at a given depth is:
+     * `paddingLeft = level * indentSize + baseIndent` rem.
+     *
+     * @example
+     * // Compact sidebar tree
+     * <CategoryTreeSelect baseIndent={0.25} indentSize={0.75} />
+     */
+    baseIndent?: number;
+    /**
+     * Additional left padding in rem added per depth level. Default: `1`.
+     *
+     * @remarks
+     * Set to a smaller value (e.g. `0.75`) to reduce the visual gap between
+     * parent and child nodes without touching DOM styles.
+     *
+     * @example
+     * // Compact sidebar tree
+     * <CategoryTreeSelect baseIndent={0.25} indentSize={0.75} />
+     */
+    indentSize?: number;
 }
 /** Multi-select mode. This is the default when `singleSelect` is omitted. */
 interface CategoryTreeSelectMultiProps extends CategoryTreeSelectBaseProps {

package/dist/index.js

@@ -17466,6 +17466,9 @@ function CategoryTreeSelect(props) {
     searchDebounceMs = 0,
     minSearchLength = 0,
     showSearchPromptWhenEmptyQuery = false,
+    baseIndent = TREE_NODE_BASE_PADDING_REM,
+    indentSize = TREE_NODE_INDENT_REM,
+    renderItemActions,
     singleSelect = false
   } = props;
   const [isOpen, setIsOpen] = useState31(false);
@@ -17769,7 +17772,7 @@ function CategoryTreeSelect(props) {
                 // Selected state - đồng bộ cho tất cả
                 !viewOnly && isSelected && "bg-accent/40"
               ),
-              style: { paddingLeft: `${level * TREE_NODE_INDENT_REM + TREE_NODE_BASE_PADDING_REM}rem` },
+              style: { paddingLeft: `${level * indentSize + baseIndent}rem` },
               children: [
                 hasChildren ? /* @__PURE__ */ jsx50(
                   "button",
@@ -17814,7 +17817,8 @@ function CategoryTreeSelect(props) {
                     ),
                     hasChildren && !isSelected && /* @__PURE__ */ jsx50("span", { className: "ml-auto shrink-0 text-[10px] font-medium text-muted-foreground/50 bg-muted/50 px-1.5 py-0.5 rounded-md", children: children.length })
                   ] })
-                )
+                ),
+                renderItemActions && /* @__PURE__ */ jsx50("div", { className: "shrink-0 ml-auto", onClick: (e) => e.stopPropagation(), children: renderItemActions(category) })
               ]
             }
           ),