@exxatdesignux/ui 0.5.1 → 0.5.3

package/dist/components/data-views/index.d.ts

@@ -20,7 +20,7 @@ import '../../lib/table-properties-types.js';
 import '../data-table/use-table-state.js';
 import '../../lib/row-height.js';
 import '../../lib/data-list-view.js';
-import '../../data-list-view-registry-CyBoBML4.js';
+import '../../data-list-view-registry-BstmlfQ3.js';
 import '../../lib/data-list-display-options.js';
 import '../../lib/list-page-table-properties.js';
 import '../ui/collapsible.js';

package/dist/components/data-views/index.js

@@ -178,7 +178,7 @@ function TooltipContent({
       "data-slot": "tooltip-content",
       sideOffset,
       className: cn(
-        "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         className
       ),
       ...props,
@@ -374,7 +374,7 @@ function DropdownMenuContent({
       sideOffset,
       align,
       className: cn(
-        "z-50 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        "z-50 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         DROPDOWN_MENU_CONTENT_SURFACE_CLASS,
         className
       ),
@@ -484,7 +484,7 @@ function PopoverContent({
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
         "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
-        "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+        "data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2",
         className
       ),
       ...props
@@ -2283,13 +2283,15 @@ function useBulkBarFixedToTableScrollEl(scrollRef, active, fullWidth) {
     const scheduled = rafThrottle(apply);
     const ro = new ResizeObserver(scheduled);
     ro.observe(el);
+    el.addEventListener("scroll", scheduled, { passive: true });
     window.addEventListener("resize", scheduled, { passive: true });
-    window.addEventListener("scroll", scheduled, { passive: true, capture: true });
+    window.addEventListener("scroll", scheduled, { passive: true });
     return () => {
       scheduled.cancel();
       ro.disconnect();
+      el.removeEventListener("scroll", scheduled);
       window.removeEventListener("resize", scheduled);
-      window.removeEventListener("scroll", scheduled, { capture: true });
+      window.removeEventListener("scroll", scheduled);
     };
   }, [active, fullWidth, scrollRef]);
   return style;
@@ -2456,11 +2458,13 @@ function DataTableInner({
     };
     update();
     const scheduled = rafThrottle(update);
-    window.addEventListener("scroll", scheduled, { passive: true, capture: true });
+    wrapEl.addEventListener("scroll", scheduled, { passive: true });
+    window.addEventListener("scroll", scheduled, { passive: true });
     window.addEventListener("resize", scheduled, { passive: true });
     return () => {
       scheduled.cancel();
-      window.removeEventListener("scroll", scheduled, { capture: true });
+      wrapEl.removeEventListener("scroll", scheduled);
+      window.removeEventListener("scroll", scheduled);
       window.removeEventListener("resize", scheduled);
     };
   }, [showColumnHeaders, rows.length, displayCols.length]);
@@ -2897,11 +2901,11 @@ function DataTableInner({
                           const rowPy = rowHeight === "compact" ? "py-1" : rowHeight === "comfortable" ? "py-4" : "py-2.5";
                           const cs = cellStyle(col.key);
                           const tdBase = cn(
-                            `px-3 ${rowPy} align-middle`,
+                            `px-3 ${rowPy} align-middle max-w-0`,
                             showGridlines && !isEdgePin && "border-e border-border last:border-e-0",
                             "border-b border-border group-last/row:border-b-0",
                             isPinned && [
-                              "z-20 pinned-cell",
+                              "z-20 pinned-cell relative",
                               "bg-dt-row-bg",
                               "group-data-[state=selected]/row:bg-dt-row-selected",
                               "group-hover/row:bg-dt-row-hover",
@@ -2951,17 +2955,17 @@ function DataTableInner({
                                   wrap && "[&_.truncate]:!whitespace-normal [&_.truncate]:!overflow-visible [&_.truncate]:!text-clip"
                                 ),
                                 style: tdStyle,
-                                children: col.cell(row, {
+                                children: /* @__PURE__ */ jsx("div", { className: "min-w-0 overflow-hidden", children: col.cell(row, {
                                   rowIndex,
                                   selected: isSelected,
                                   onSelect: (checked) => checked ? setSelected((prev) => /* @__PURE__ */ new Set([...prev, rowId])) : toggleRow(rowId)
-                                })
+                                }) })
                               },
                               col.key
                             );
                           }
                           const rawVal = String(row[col.key] ?? "");
-                          return /* @__PURE__ */ jsx("td", { className: cn(tdBase, "text-sm text-foreground/80"), style: tdStyle, children: /* @__PURE__ */ jsx("span", { className: wrap ? "whitespace-normal" : "block truncate", title: !wrap ? rawVal : void 0, children: rawVal }) }, col.key);
+                          return /* @__PURE__ */ jsx("td", { className: cn(tdBase, "text-sm text-foreground/80"), style: tdStyle, children: /* @__PURE__ */ jsx("div", { className: "min-w-0 overflow-hidden", children: /* @__PURE__ */ jsx("span", { className: wrap ? "whitespace-normal" : "block truncate", title: !wrap ? rawVal : void 0, children: rawVal }) }) }, col.key);
                         })
                       },
                       String(rowId)
@@ -3289,6 +3293,16 @@ var BY_VALUE = new Map(
   DEFINITIONS.map((d) => [d.value, d])
 );
 var DATA_LIST_VIEW_REGISTRY = DEFINITIONS;
+var FULL_HUB_SUPPORTED_VIEWS = [
+  "table",
+  "list",
+  "board",
+  "dashboard",
+  "folder",
+  "panel",
+  "tree-panel"
+];
+DATA_LIST_VIEW_REGISTRY.map((d) => d.value);
 function dataListViewDefinition(view) {
   const def = BY_VALUE.get(view);
   if (!def) {
@@ -3683,7 +3697,7 @@ function SheetContent({
         "data-slot": "sheet-content",
         "data-side": side,
         className: cn(
-          "fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg outline-none duration-300 ease-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-e data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-s data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-6 data-[side=left]:data-open:slide-in-from-left-6 data-[side=right]:data-open:slide-in-from-right-6 data-[side=top]:data-open:slide-in-from-top-6 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-6 data-[side=left]:data-closed:slide-out-to-left-6 data-[side=right]:data-closed:slide-out-to-right-6 data-[side=top]:data-closed:slide-out-to-top-6",
+          "fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg outline-none duration-300 ease-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:start-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-e data-[side=right]:inset-y-0 data-[side=right]:end-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-s data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-6 data-[side=left]:data-open:slide-in-from-start-6 data-[side=right]:data-open:slide-in-from-end-6 data-[side=top]:data-open:slide-in-from-top-6 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-6 data-[side=left]:data-closed:slide-out-to-start-6 data-[side=right]:data-closed:slide-out-to-end-6 data-[side=top]:data-closed:slide-out-to-top-6",
           className
         ),
         ...props,
@@ -3767,7 +3781,7 @@ function SelectContent({
     {
       "data-slot": "select-content",
       "data-align-trigger": position === "item-aligned",
-      className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 rtl:data-[side=left]:translate-x-1 data-[side=right]:translate-x-1 rtl:data-[side=right]:-translate-x-1 data-[side=top]:-translate-y-1", className),
+      className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 rtl:data-[side=left]:translate-x-1 data-[side=right]:translate-x-1 rtl:data-[side=right]:-translate-x-1 data-[side=top]:-translate-y-1", className),
       position,
       align,
       ...props,
@@ -5309,7 +5323,7 @@ function DataRowListVirtualized({
           {
             "data-index": vr.index,
             ref: virtualizer.measureElement,
-            className: cn("absolute left-0 top-0 w-full pb-2", rowClassName),
+            className: cn("absolute start-0 top-0 w-full pb-2", rowClassName),
             style: { transform: `translateY(${vr.start}px)` },
             children: renderRow(row, vr.index)
           },
@@ -5525,7 +5539,7 @@ function HubTable({
   columns,
   view,
   onViewChange,
-  supportedViewTypes,
+  supportedViewTypes: supportedViewTypesProp,
   hubLabel,
   lifecycleTabLabel,
   searchAriaLabel,
@@ -5561,6 +5575,7 @@ function HubTable({
   boardColumnCountBadgeClassName,
   boardEmptyColumnLabel
 }) {
+  const supportedViewTypes = supportedViewTypesProp ?? FULL_HUB_SUPPORTED_VIEWS;
   const filterFields = React10.useMemo(() => columnsToFilterFields(columns), [columns]);
   const fieldDefinitions = React10.useMemo(() => columnsToFieldDefinitions(columns), [columns]);
   const resolveColumnLabel = React10.useCallback(