@underverse-ui/underverse 1.0.118 → 1.0.120

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

@@ -2915,6 +2915,10 @@ var Tooltip = React10.forwardRef(({
       setIsOpen(false);
     }, delayClose);
   };
+  const closeNow = React10.useCallback(() => {
+    clearTimeout(timeoutRef.current);
+    setIsOpen(false);
+  }, []);
   const handleFocus = () => {
     if (disabled) return;
     setIsOpen(true);
@@ -2925,6 +2929,10 @@ var Tooltip = React10.forwardRef(({
   React10.useEffect(() => {
     return () => clearTimeout(timeoutRef.current);
   }, []);
+  React10.useEffect(() => {
+    if (isOpen) return;
+    clearTimeout(timeoutRef.current);
+  }, [isOpen]);
   React10.useLayoutEffect(() => {
     if (!isOpen) {
       lastAppliedRef.current = null;
@@ -2968,6 +2976,18 @@ var Tooltip = React10.forwardRef(({
     if (panelRef.current) ro.observe(panelRef.current);
     return () => ro.disconnect();
   }, [isOpen, updatePosition]);
+  React10.useEffect(() => {
+    if (!isOpen) return;
+    const handleDocumentKeyDown = (event) => {
+      if (event.key === "Escape") closeNow();
+    };
+    document.addEventListener("pointerdown", closeNow, true);
+    document.addEventListener("keydown", handleDocumentKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", closeNow, true);
+      document.removeEventListener("keydown", handleDocumentKeyDown);
+    };
+  }, [closeNow, isOpen]);
   const childProps = children.props;
   const childRef = childProps.ref;
   const passthroughRef = mergeRefs(forwardedRef, childRef, (node) => {
@@ -3000,6 +3020,22 @@ var Tooltip = React10.forwardRef(({
         handleMouseLeave();
       }
     ),
+    onPointerDown: chainEventHandlers(
+      triggerPassthroughProps.onPointerDown,
+      childProps.onPointerDown,
+      (e) => {
+        triggerRef.current = e.currentTarget;
+        closeNow();
+      }
+    ),
+    onClick: chainEventHandlers(
+      triggerPassthroughProps.onClick,
+      childProps.onClick,
+      (e) => {
+        triggerRef.current = e.currentTarget;
+        closeNow();
+      }
+    ),
     onFocus: chainEventHandlers(
       triggerPassthroughProps.onFocus,
       childProps.onFocus,
@@ -17466,6 +17502,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 +17808,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 +17853,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) })
               ]
             }
           ),