@poirazis/supercomponents-shared 1.1.8 → 1.2.0

package/src/lib/SuperTableCells/types.js

@@ -1,15 +1,24 @@
 /**
  * @fileoverview Shared type definitions for SuperTableCells components using JSDoc
  * These types provide IntelliSense and type checking for both JavaScript and TypeScript files.
+ *
+ * Uses a unified CellOptions type with common base properties and optional type-specific extensions.
  */
 
+// ============================================================================
+// ENUMS & PRIMITIVE TYPES
+// ============================================================================
+
 /**
  * Cell role determines the rendering context and styling
  * @typedef {"formInput" | "tableCell" | "inlineInput"} CellRole
  */
 
 /**
- * Cell state for FSM
+ * Cell state for FSM. Represents reachable states in the cell component finite state machines.
+ * - View: Default read-only display state
+ * - Editing: User is actively editing the cell value
+ * - Loading: Data is being fetched (used by cells with data dependencies)
  * @typedef {"View" | "Editing" | "Loading"} CellState
  */
 
@@ -19,211 +28,151 @@
  */
 
 /**
- * Common options available to all cell components
- * @typedef {Object} BaseCellOptions
- * @property {CellRole} [role] - Role determines the rendering context
- * @property {CellState} [initialState] - Initial FSM state
- * @property {number} [debounce] - Debounce delay in milliseconds for change events
- * @property {boolean} [readonly] - Whether the cell is read-only
- * @property {boolean} [disabled] - Whether the cell is disabled
- * @property {string} [placeholder] - Placeholder text when empty
- * @property {string} [template] - Template string for formatting display value
- * @property {string} [icon] - Icon to display (CSS class)
- * @property {boolean} [error] - Whether the cell has an error
- * @property {boolean} [showDirty] - Whether to show dirty indicator
- * @property {CellAlign} [align] - Text/content alignment
- * @property {string} [color] - Text color
- * @property {string} [background] - Background color
+ * Control type union covering all cell variants
+ * @typedef {"input" | "textarea" | "switch" | "checkbox" | "pills" | "text" | "links" | "list" | "buttons" | "radio" | "grid" | "carousel" | "expanded" | "inputSelect"} CellControlType
  */
 
-/**
- * Options specific to CellString component
- * @typedef {Object} CellStringOptions
- * @property {CellRole} [role] - Role determines the rendering context
- * @property {CellState} [initialState] - Initial FSM state
- * @property {number} [debounce] - Debounce delay in milliseconds
- * @property {boolean} [readonly] - Whether the cell is read-only
- * @property {boolean} [disabled] - Whether the cell is disabled
- * @property {string} [placeholder] - Placeholder text when empty
- * @property {string} [template] - Template string for formatting display value
- * @property {string} [icon] - Icon to display (CSS class)
- * @property {boolean} [error] - Whether the cell has an error
- * @property {boolean} [showDirty] - Whether to show dirty indicator
- * @property {CellAlign} [align] - Text/content alignment
- * @property {string} [color] - Text color
- * @property {string} [background] - Background color
- * @property {"input" | "textarea"} [controlType] - Control type for input
- * @property {boolean} [clearIcon] - Whether to show clear icon
- */
+// ============================================================================
+// UNIFIED CELL OPTIONS
+// ============================================================================
 
 /**
- * Options specific to CellNumber component
- * @typedef {Object} CellNumberOptions
- * @property {CellRole} [role] - Role determines the rendering context
- * @property {CellState} [initialState] - Initial FSM state
- * @property {number} [debounce] - Debounce delay in milliseconds
- * @property {boolean} [readonly] - Whether the cell is read-only
- * @property {boolean} [disabled] - Whether the cell is disabled
- * @property {string} [placeholder] - Placeholder text when empty
- * @property {string} [template] - Template string for formatting display value
- * @property {string} [icon] - Icon to display (CSS class)
- * @property {boolean} [error] - Whether the cell has an error
- * @property {boolean} [showDirty] - Whether to show dirty indicator
- * @property {CellAlign} [align] - Text/content alignment
- * @property {string} [color] - Text color
- * @property {string} [background] - Background color
- * @property {number} [defaultValue] - Default value for the cell
- * @property {boolean} [showStepper] - Whether to show stepper controls
- * @property {number} [stepSize] - Step increment value
- * @property {number} [min] - Minimum value
- * @property {number} [max] - Maximum value
- * @property {number} [decimals] - Decimal places to show
- * @property {string} [thousandsSeparator] - Thousands separator character
- * @property {string} [clearValueIcon] - Icon to clear value
- * @property {boolean} [enableWheel] - Whether to enable mouse wheel
- */
-
-/**
- * Options specific to CellBoolean component
- * @typedef {Object} CellBooleanOptions
- * @property {CellRole} [role] - Role determines the rendering context
- * @property {CellState} [initialState] - Initial FSM state
- * @property {number} [debounce] - Debounce delay in milliseconds
- * @property {boolean} [readonly] - Whether the cell is read-only
- * @property {boolean} [disabled] - Whether the cell is disabled
- * @property {string} [placeholder] - Placeholder text when empty
- * @property {string} [template] - Template string for formatting display value
- * @property {string} [icon] - Icon to display (CSS class)
- * @property {boolean} [error] - Whether the cell has an error
- * @property {boolean} [showDirty] - Whether to show dirty indicator
- * @property {CellAlign} [align] - Text/content alignment
- * @property {string} [color] - Text color
- * @property {string} [background] - Background color
- * @property {string | number} [fontWeight] - Font weight
- * @property {"switch" | "checkbox"} [controlType] - Control type: switch or checkbox
- * @property {string} [inlineLabel] - Label to display inline with control
- */
-
-/**
- * Options specific to CellOptions/CellOptionsAdvanced components
- * @typedef {Object} CellOptionsOptions
- * @property {CellRole} [role] - Role determines the rendering context
- * @property {CellState} [initialState] - Initial FSM state
- * @property {number} [debounce] - Debounce delay in milliseconds
+ * Unified options for all Cell components.
+ * Contains common base properties and optional type-specific extensions.
+ *
+ * @typedef {Object} CellOptions
+ *
+ * ---------------------------------------------------------------------------
+ * COMMON PROPERTIES (used by all/most cells)
+ * ---------------------------------------------------------------------------
+ * @property {CellRole} [role="formInput"] - Role determines the rendering context and styling
+ * @property {CellState} [initialState="View"] - Initial FSM state
+ * @property {number} [debounce] - Debounce delay in milliseconds for change events
  * @property {boolean} [readonly] - Whether the cell is read-only
  * @property {boolean} [disabled] - Whether the cell is disabled
  * @property {string} [placeholder] - Placeholder text when empty
- * @property {string} [template] - Template string for formatting display value
- * @property {string} [icon] - Icon to display (CSS class)
- * @property {boolean} [error] - Whether the cell has an error
- * @property {boolean} [showDirty] - Whether to show dirty indicator
+ * @property {string} [template] - Template string for formatting display value (uses processStringSync)
+ * @property {string} [icon] - Icon CSS class to display (e.g., "ph ph-warning")
+ * @property {boolean} [error] - Whether the cell has an error state
+ * @property {boolean} [showDirty] - Whether to show dirty/modified indicator
  * @property {CellAlign} [align] - Text/content alignment
- * @property {string} [color] - Text color
- * @property {string} [background] - Background color
+ * @property {string} [color] - Text color (CSS value)
+ * @property {string} [background] - Background color (CSS value)
  * @property {string | number} [fontWeight] - Font weight
+ * @property {CellControlType} [controlType] - Control type variant for the cell
+ * @property {boolean} [clearIcon] - Whether to show clear/reset icon
+ *
+ * ---------------------------------------------------------------------------
+ * NUMBER PROPERTIES
+ * ---------------------------------------------------------------------------
+ * @property {number} [defaultValue] - Default numeric value
+ * @property {boolean} [showStepper] - Whether to show increment/decrement stepper controls
+ * @property {number} [stepSize] - Step increment value for stepper
+ * @property {number} [min] - Minimum allowed value
+ * @property {number} [max] - Maximum allowed value
+ * @property {number} [decimals] - Number of decimal places to display
+ * @property {string} [thousandsSeparator] - Thousands separator character (e.g., ",")
+ * @property {string} [clearValueIcon] - Icon for clearing numeric value
+ * @property {boolean} [enableWheel] - Whether to enable mouse wheel for value changes
+ *
+ * ---------------------------------------------------------------------------
+ * BOOLEAN PROPERTIES
+ * ---------------------------------------------------------------------------
+ * @property {string} [inlineLabel] - Label to display inline with boolean control
+ * @property {boolean} [showFalse] - Whether to show icon/indicator for false value
+ *
+ * ---------------------------------------------------------------------------
+ * OPTIONS/SELECT PROPERTIES
+ * ---------------------------------------------------------------------------
  * @property {"pills" | "text" | "links" | "list" | "buttons" | "radio"} [optionsViewMode] - View mode for options display
- * @property {boolean} [reorderOnly] - Whether to allow reordering
- * @property {boolean} [showColors] - Whether to show colors
- * @property {"schema" | "custom" | "datasource"} [optionsSource] - Data source type
+ * @property {"schema" | "custom" | "data"} [optionsSource] - Data source type for options
  * @property {Array<{label: string, value: any, color?: string}>} [customOptions] - Custom options array
- */
-
-/**
- * Options specific to CellAttachment components
- * @typedef {Object} CellAttachmentOptions
- * @property {CellRole} [role] - Role determines the rendering context
- * @property {CellState} [initialState] - Initial FSM state
- * @property {number} [debounce] - Debounce delay in milliseconds
- * @property {boolean} [readonly] - Whether the cell is read-only
- * @property {boolean} [disabled] - Whether the cell is disabled
- * @property {string} [placeholder] - Placeholder text when empty
- * @property {string} [template] - Template string for formatting display value
- * @property {string} [icon] - Icon to display (CSS class)
- * @property {boolean} [error] - Whether the cell has an error
- * @property {boolean} [showDirty] - Whether to show dirty indicator
- * @property {CellAlign} [align] - Text/content alignment
- * @property {string} [color] - Text color
- * @property {string} [background] - Background color
- * @property {string | number} [fontWeight] - Font weight
- * @property {"list" | "grid" | "carousel"} [controlType] - Control type for display
+ * @property {boolean} [reorderOnly] - Whether to only allow reordering (no add/remove)
+ * @property {boolean} [showColors] - Whether to show option colors
+ * @property {boolean} [autocomplete] - Whether to enable autocomplete filtering
+ * @property {string} [valueColumn] - Column name for option values (datasource mode)
+ * @property {string} [labelColumn] - Column name for option labels (datasource mode)
+ * @property {string} [colorColumn] - Column name for option colors (datasource mode)
+ * @property {string} [sortColumn] - Column to sort options by
+ * @property {"ascending" | "descending"} [sortOrder] - Sort order for options
+ * @property {Object} [datasource] - Datasource configuration for options
+ * @property {Array} [filter] - Filter array for datasource options
+ *
+ * ---------------------------------------------------------------------------
+ * DATETIME PROPERTIES
+ * ---------------------------------------------------------------------------
+ * @property {"default" | "MM/DD/YYYY" | "DD/MM/YYYY" | "YYYY-MM-DD" | "MMM DD, YYYY" | "DD MMM YYYY"} [dateFormat] - Date format string
+ * @property {boolean} [showTime] - Whether to show time picker
+ *
+ * ---------------------------------------------------------------------------
+ * JSON PROPERTIES
+ * ---------------------------------------------------------------------------
+ * @property {boolean} [multiline] - Whether to enable multiline JSON editing
+ *
+ * ---------------------------------------------------------------------------
+ * LINK/RELATIONSHIP PROPERTIES
+ * ---------------------------------------------------------------------------
+ * @property {"pills" | "text"} [relViewMode] - View mode for relationship display
+ * @property {boolean} [simpleView] - Use simple text view for links
+ * @property {number} [limit] - Limit number of related records to fetch
+ * @property {string} [search] - Search term for filtering related records
+ * @property {string} [ownId] - Current row ID (for self-referencing relationships)
+ * @property {string} [joinColumn] - Join column for SQL relationships
+ *
+ * ---------------------------------------------------------------------------
+ * ATTACHMENT PROPERTIES
+ * ---------------------------------------------------------------------------
  * @property {"landscape" | "portrait" | "square"} [imageRatio] - Image aspect ratio
- * @property {number} [gridColumns] - Grid columns (for grid mode)
+ * @property {number} [gridColumns] - Number of grid columns (for grid mode)
  * @property {boolean} [isGallery] - Whether in gallery mode
- * @property {"view" | "download" | "none"} [onClickAction] - Action on click
+ * @property {"view" | "download" | "none"} [onClickAction] - Action on attachment click
  * @property {boolean} [slotted] - Whether using slot content
- * @property {boolean} [carouselDots] - Show carousel dots
- * @property {boolean} [carouselArrows] - Show carousel arrows
- * @property {boolean} [carouselInfinite] - Enable infinite carousel
- * @property {boolean} [carouselAutoplay] - Enable autoplay
- * @property {number} [carouselAutoplaySpeed] - Autoplay speed in ms
- * @property {number} [carouselItemsToShow] - Number of items to show
- * @property {number} [carouselItemsToScroll] - Number of items to scroll
- * @property {"standard" | "marquee"} [carouselMode] - Carousel mode
- */
-
-/**
- * Options specific to CellDatetime/CellDateRange components
- * @typedef {Object} CellDatetimeOptions
- * @property {CellRole} [role] - Role determines the rendering context
- * @property {CellState} [initialState] - Initial FSM state
- * @property {number} [debounce] - Debounce delay in milliseconds
- * @property {boolean} [readonly] - Whether the cell is read-only
- * @property {boolean} [disabled] - Whether the cell is disabled
- * @property {string} [placeholder] - Placeholder text when empty
- * @property {string} [template] - Template string for formatting display value
- * @property {string} [icon] - Icon to display (CSS class)
- * @property {boolean} [error] - Whether the cell has an error
- * @property {boolean} [showDirty] - Whether to show dirty indicator
- * @property {CellAlign} [align] - Text/content alignment
- * @property {string} [color] - Text color
- * @property {string} [background] - Background color
- * @property {string | number} [fontWeight] - Font weight
- * @property {"default" | "MM/DD/YYYY" | "DD/MM/YYYY" | "YYYY-MM-DD" | "MMM DD, YYYY" | "DD MMM YYYY"} [dateFormat] - Date format string
- * @property {boolean} [showTime] - Whether to show time picker
- */
-
-/**
- * Options specific to CellJSON component
- * @typedef {Object} CellJSONOptions
- * @property {CellRole} [role] - Role determines the rendering context
- * @property {CellState} [initialState] - Initial FSM state
- * @property {number} [debounce] - Debounce delay in milliseconds
- * @property {boolean} [readonly] - Whether the cell is read-only
- * @property {boolean} [disabled] - Whether the cell is disabled
- * @property {string} [placeholder] - Placeholder text when empty
- * @property {string} [template] - Template string for formatting display value
- * @property {string} [icon] - Icon to display (CSS class)
- * @property {boolean} [error] - Whether the cell has an error
- * @property {boolean} [showDirty] - Whether to show dirty indicator
- * @property {CellAlign} [align] - Text/content alignment
- * @property {string} [color] - Text color
- * @property {string} [background] - Background color
- * @property {string | number} [fontWeight] - Font weight
- * @property {boolean} [multiline] - Whether to enable multiline editing
- */
-
-/**
- * Options specific to CellLink/CellLinkAdvanced/CellSQLLink components
- * @typedef {Object} CellLinkOptions
- * @property {CellRole} [role] - Role determines the rendering context
- * @property {CellState} [initialState] - Initial FSM state
- * @property {number} [debounce] - Debounce delay in milliseconds
- * @property {boolean} [readonly] - Whether the cell is read-only
- * @property {boolean} [disabled] - Whether the cell is disabled
- * @property {string} [placeholder] - Placeholder text when empty
- * @property {string} [template] - Template string for formatting display value
- * @property {string} [icon] - Icon to display (CSS class)
- * @property {boolean} [error] - Whether the cell has an error
- * @property {boolean} [showDirty] - Whether to show dirty indicator
- * @property {CellAlign} [align] - Text/content alignment
- * @property {string} [color] - Text color
- * @property {string} [background] - Background color
- * @property {string | number} [fontWeight] - Font weight
- * @property {boolean} [simpleView] - View mode for links display
- * @property {*} [filter] - Filter for relationship options
- * @property {number} [limit] - Limit number of options
- * @property {string} [search] - Search term
- */
+ * @property {boolean} [carouselDots] - Show carousel navigation dots
+ * @property {boolean} [carouselArrows] - Show carousel navigation arrows
+ * @property {boolean} [carouselInfinite] - Enable infinite carousel loop
+ * @property {boolean} [carouselAutoplay] - Enable carousel autoplay
+ * @property {number} [carouselAutoplaySpeed] - Autoplay speed in milliseconds
+ * @property {number} [carouselItemsToShow] - Number of items to show in carousel
+ * @property {number} [carouselItemsToScroll] - Number of items to scroll per action
+ * @property {"standard" | "marquee"} [carouselMode] - Carousel animation mode
+ *
+ * ---------------------------------------------------------------------------
+ * ICON PROPERTIES
+ * ---------------------------------------------------------------------------
+ * @property {boolean} [showCategories] - Whether to show icon category tabs
+ *
+ * ---------------------------------------------------------------------------
+ * COLOR PROPERTIES
+ * ---------------------------------------------------------------------------
+ * @property {boolean} [allowCustom] - Whether to allow custom color input
+ * @property {"circle" | "square"} [swatch] - Color swatch shape
+ * @property {boolean} [themeColors] - Whether to show theme colors
+ * @property {boolean} [staticColors] - Whether to show static colors
+ * @property {Array<{label: string, value: string}>} [customColors] - Custom color palette
+ *
+ * ---------------------------------------------------------------------------
+ * TAGS PROPERTIES
+ * ---------------------------------------------------------------------------
+ * @property {boolean} [suggestions] - Whether to show tag suggestions from datasource
+ */
+
+// ============================================================================
+// BACKWARD-COMPATIBLE TYPE ALIASES
+// These allow existing imports to continue working during migration
+// ============================================================================
+
+/** @typedef {CellOptions} BaseCellOptions - @deprecated Use CellOptions instead */
+/** @typedef {CellOptions} CellStringOptions - @deprecated Use CellOptions instead */
+/** @typedef {CellOptions} CellNumberOptions - @deprecated Use CellOptions instead */
+/** @typedef {CellOptions} CellBooleanOptions - @deprecated Use CellOptions instead */
+/** @typedef {CellOptions} CellOptionsOptions - @deprecated Use CellOptions instead */
+/** @typedef {CellOptions} CellAttachmentOptions - @deprecated Use CellOptions instead */
+/** @typedef {CellOptions} CellDatetimeOptions - @deprecated Use CellOptions instead */
+/** @typedef {CellOptions} CellJSONOptions - @deprecated Use CellOptions instead */
+/** @typedef {CellOptions} CellLinkOptions - @deprecated Use CellOptions instead */
+/** @typedef {CellOptions} CellColorOptions - @deprecated Use CellOptions instead */
+/** @typedef {CellOptions} CellIconOptions - @deprecated Use CellOptions instead */
+/** @typedef {CellOptions} CellTagsOptions - @deprecated Use CellOptions instead */
 
 /**
  * Common API interface for all cell components

package/src/lib/SuperTableColumn/SuperTableColumn.svelte

@@ -387,7 +387,7 @@
       on:dblclick={columnState.resetSize}
       on:mouseenter={() => (considerResizing = true)}
       on:mouseleave={() => (considerResizing = false)}
-    />
+    ></div>
   {/if}
 
   {#if $columnOptionsStore.showHeader}

package/src/lib/SuperTableColumn/parts/SuperColumnHeader.svelte

@@ -112,7 +112,7 @@
         style="align-self: center; font-size: 14px;"
         on:click|preventDefault={() =>
           (showFilteringOptions = !showFilteringOptions)}
-      />
+      ></i>
     {/if}
     <svelte:component
       this={$columnOptions.headerComponent}
@@ -146,7 +146,7 @@
         <i
           class={sorted == "ascending" ? "ri-sort-asc" : "ri-sort-desc"}
           class:sorted
-        />
+        ></i>
       {/if}
     </span>
   {/if}

package/src/lib/SuperTableColumn/parts/SuperColumnRow.svelte

@@ -22,7 +22,7 @@
   export let disabled;
 
   // the default height
-  export let rowHeight;
+
   let viewport;
   let info;
 
@@ -97,8 +97,10 @@
   style:justify-content={$columnSettings.align}
   on:mouseenter={() => ($stbHovered = index)}
   on:mouseleave={() => ($stbHovered = undefined)}
-  on:click={() =>
-    stbState.handleRowClick(index, field, deepGet(row, field), id)}
+  on:click={() => {
+    if (!meta.disabled)
+      stbState.handleRowClick(index, field, deepGet(row, field), id);
+  }}
   on:contextmenu|preventDefault={() => {
     stbAPI.showContextMenu(index, viewport);
   }}

package/src/lib/SuperTabs/SuperTabs.svelte

@@ -49,7 +49,7 @@
       {#if theme === "list" && list_title}
         <div class="tab list-title">
           {#if list_icon}
-            <i class={list_icon} />
+            <i class={list_icon}></i>
           {/if}
           {list_title}
         </div>
@@ -76,7 +76,7 @@
               class={container.icon}
               style:font-size={tabsIconsOnly ? "20px" : null}
               style:color={container.color}
-            />
+            ></i>
           {/if}
 
           {#if !tabsIconsOnly || !container.icon}

package/src/lib/SuperTree/SuperTree.svelte

@@ -1,5 +1,6 @@
 <script>
-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher, onDestroy } from "svelte";
+  import Tooltip from "../UI/elements/Tooltip.svelte";
   const dispatch = createEventDispatcher();
 
   export let tree;
@@ -13,40 +14,70 @@
     ? $selectedGroups.includes(tree.id)
     : !!$selectedNodes.find((x) => x.id == tree.id);
 
+  $: if (hasSelectedDescendant(tree.children || [])) open = true;
+
   let labelElement;
-  $: isOverflowing = labelElement && labelElement.scrollWidth > labelElement.clientWidth;
+  let tooltipShow = false;
+  let tooltipTimer;
+
+  $: isOverflowing =
+    labelElement && labelElement.scrollWidth > labelElement.clientWidth;
+
   $: tooltip = isOverflowing ? tree.label || "Not Set" : null;
 
+  const showTooltip = () => {
+    if (!tooltip) return;
+    if (tooltipTimer) clearTimeout(tooltipTimer);
+    tooltipTimer = setTimeout(() => {
+      tooltipShow = true;
+    }, 750);
+  };
+
+  const hideTooltip = () => {
+    if (tooltipTimer) {
+      clearTimeout(tooltipTimer);
+      tooltipTimer = null;
+    }
+    tooltipShow = false;
+  };
+
   const toggleOpen = (e) => {
     if (tree.disabled) return;
+    if (open && hasSelectedDescendant(tree.children || [])) return;
     open = !open;
     dispatch("nodeClick", { id: tree.id, label: tree.label });
   };
 
   // Recursion
-  const hasChildSelected = (children) => {
-    let found = false;
-    if (!$selectedNodes.length) return found;
-
-    if (children.findIndex((x) => x.id == $selectedNodes[0].id) > -1) {
-      found = true;
-    } else {
-      children.forEach((element) => {
-        found = hasChildSelected(element.children);
-      });
+  const hasSelectedDescendant = (children) => {
+    if (!children || !children.length) return false;
+    for (let child of children) {
+      if (
+        child.isGroup
+          ? $selectedGroups.includes(child.id)
+          : $selectedNodes.some((node) => node.id === child.id)
+      ) {
+        return true;
+      }
+      if (hasSelectedDescendant(child.children)) {
+        return true;
+      }
     }
-    return found;
+    return false;
   };
 
   const toggleNode = (e) => {
-    if (tree.selectable && !tree.disabled)
-      dispatch("nodeSelect", {
-        id: tree.id,
-        label: tree.label,
-        row: tree.row,
-        group: tree.group,
-      });
+    dispatch("nodeSelect", {
+      id: tree.id,
+      label: tree.label,
+      row: tree.row,
+      group: tree.group,
+    });
   };
+
+  onDestroy(() => {
+    if (tooltipTimer) clearTimeout(tooltipTimer);
+  });
 </script>
 
 <!-- svelte-ignore a11y-missing-attribute -->
@@ -58,28 +89,33 @@
   class:is-disabled={tree.disabled}
   class:is-open={open}
 >
-  <div
-    class="spectrum-TreeView-itemLink"
-    style:padding-left={tree?.children?.length ? "0.25rem" : "1.5rem"}
-    style:padding-right={"0.5rem"}
-  >
-    {#if tree.children?.length}
-      <i
-        class={"ri-arrow-right-s-line"}
-        class:open
-        style:z-index={1}
-        style:font-size={"16px"}
-        on:mousedown|self|preventDefault|stopPropagation={toggleOpen}
-      />
-    {/if}
+  <div class="spectrum-TreeView-itemLink" style:padding-right={"0.5rem"}>
+    <i
+      class={"ri-arrow-right-s-line"}
+      class:open
+      class:is-disabled={tree.children.length == 0 || tree.disabled}
+      style:font-size={"16px"}
+      style:z-index={"1"}
+      on:mousedown|stopPropagation={toggleOpen}
+    ></i>
     <div
-      style:z-index={2}
       style:width={"100%"}
-      on:mousedown|preventDefault|stopPropagation={toggleNode}
+      style:z-index={"1"}
+      on:mousedown|stopPropagation|preventDefault={toggleNode}
     >
-      <span class="spectrum-TreeView-itemLabel" style:padding-left={"0.25rem"} bind:this={labelElement} title={tooltip}
-        >{tree.label || "Not Set"}</span
+      <div
+        class="spectrum-TreeView-itemLabel"
+        style:padding-left={"0.25rem"}
+        style:z-index={"10"}
+        style:text-overflow={"ellipsis"}
+        style:overflow={"hidden"}
+        style:white-space={"nowrap"}
+        bind:this={labelElement}
+        on:mouseenter={showTooltip}
+        on:mouseleave={hideTooltip}
       >
+        {tree.label || "Not Set"}
+      </div>
     </div>
 
     {#if selected}
@@ -91,6 +127,10 @@
     {/if}
   </div>
 
+  {#if tooltip}
+    <Tooltip anchor={labelElement} content={tooltip} show={tooltipShow} />
+  {/if}
+
   {#if tree.children?.length}
     <ul class="spectrum-TreeView">
       {#each tree.children as node, idx}
@@ -119,11 +159,17 @@
     align-items: center;
     gap: 0.25rem;
     max-height: 1.75rem;
+    padding: 0.25rem 0.5rem;
   }
 
   i {
     transition: all 130ms;
   }
+
+  i.is-disabled {
+    opacity: 0.3;
+    pointer-events: none;
+  }
   .open {
     transform: rotate(90deg);
   }