aplance-ui 1.2.2 → 1.3.0

package/registry/components/ui/data-table/data-table.module.css

@@ -29,6 +29,18 @@
   }
 }
 
+/* On tablet/phone the configured multi-column row can't fit. Stack every field
+   full width instead of overflowing the page or scrolling (a scroll container
+   would clip the inputs' focus rings). `!important` beats the inline
+   grid-template-columns the FilterBar sets per consumer; `stretch` makes each
+   field fill the row. */
+@media (--md) {
+  .filter_bar {
+    grid-template-columns: 1fr !important;
+    justify-items: stretch;
+  }
+}
+
 /* ─────────────────────────────────────────────
    Content wrap
    Grows to fill all space below the filter bar.
@@ -113,12 +125,25 @@
   min-height: 0;
   overflow-x: auto;
   overflow-y: auto;
+  /* Reserve the scrollbar gutter by DEFAULT so clientWidth is stable: the
+     vertical scrollbar (when rows overflow) sits in the reserved gutter instead
+     of stealing ~15px and triggering an unexpected horizontal scrollbar. This
+     default also covers the first paint before JS measures. */
+  scrollbar-gutter: stable;
   border: var(--border-1) solid var(--color-border);
   border-radius: var(--radius-md);
   background: var(--color-background);
   position: relative;
 }
 
+/* Once JS confirms the body does NOT overflow vertically (no scrollbar to make
+   room for), release the gutter so the content fills to the border - otherwise
+   a few-row table shows a blank ~15px strip on the right. `data-has-scroll` is
+   set from `scrollHeight > clientHeight` in syncHeaderMetrics. */
+.table_body_wrap[data-has-scroll="false"] {
+  scrollbar-gutter: auto;
+}
+
 /* ─────────────────────────────────────────────
    Shared <table> - header wrap + body wrap.
    table-layout:fixed + identical widths = perfect column alignment.
@@ -536,6 +561,26 @@
   justify-content: space-between;
   gap: var(--spacing-8);
   min-width: 0;
+  /* When the count + controls can't fit, the WHOLE bar scrolls horizontally as
+     one strip rather than wrapping or clipping. The outlet hides X overflow, so
+     letting a cluster shrink would just clip the nav buttons - scroll the bar
+     instead. `space-between` still spreads them when there IS room. The vertical
+     padding gives the buttons' focus rings room so `overflow-x: auto` (which also
+     clips the Y axis) doesn't crop them. */
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border) transparent;
+  padding-block: var(--spacing-2);
+
+  > * {
+    flex-shrink: 0;
+  }
+}
+
+@media (--sm) {
+  .pagination_bar {
+    gap: var(--spacing-5);
+  }
 }
 
 .pagination_bar_loading {
@@ -548,18 +593,17 @@
   flex-shrink: 0;
 }
 
-.pagination_left {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-8);
-  min-width: 0;
-  flex-shrink: 1;
-}
-
-.pagination_left_loading {
-  overflow: hidden;
-}
-
+.pagination_left {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  min-width: 0;
+}
+
+.pagination_left_loading {
+  overflow: hidden;
+}
+
 .pagination_count {
   font-size: var(--font-size-sm);
   color: var(--color-muted-foreground);
@@ -576,23 +620,28 @@
   align-items: center;
   gap: var(--spacing-8);
   min-width: 0;
-  flex-shrink: 1;
 }
 
-.pagination_controls_loading {
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-end;
-  max-width: 100%;
-  row-gap: var(--spacing-4);
-}
-
-.pagination_controls_loading > * {
-  flex: 0 1 auto;
-  min-width: 0;
-  max-width: 100%;
-}
+@media (--sm) {
+  .pagination_controls {
+    gap: var(--spacing-5);
+  }
+}
+
+.pagination_controls_loading {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  max-width: 100%;
+  row-gap: var(--spacing-4);
+}
+
+.pagination_controls_loading > * {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 100%;
+}
 
 .pagination_text_skeleton {
   height: 1em;
@@ -616,14 +665,14 @@
   flex: 0 0 auto;
 }
 
-.page_size_wrap {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-5);
-  min-width: 0;
-  flex-shrink: 1;
-  max-width: 100%;
-}
+.page_size_wrap {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-5);
+  min-width: 0;
+  flex-shrink: 1;
+  max-width: 100%;
+}
 
 .page_size_label {
   font-size: var(--font-size-sm);
@@ -644,18 +693,18 @@
   }
 }
 
-.page_nav {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  flex-shrink: 0;
-}
-
-.page_nav_loading {
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  row-gap: var(--spacing-2);
-  min-width: 0;
-  max-width: 100%;
-  flex-shrink: 1;
-}
+.page_nav {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  flex-shrink: 0;
+}
+
+.page_nav_loading {
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  row-gap: var(--spacing-2);
+  min-width: 0;
+  max-width: 100%;
+  flex-shrink: 1;
+}

package/registry/components/ui/data-table/data-table.tsx

@@ -345,11 +345,11 @@ export const DataTable = <TData extends { id: string }>({
   // ── Sync header/body scrolling ──────────────────────────────────────────────
   // The header lives in its own `overflow:hidden` container; we drive its
   // scrollLeft from the body's scrollLeft on every scroll event so pinned
-  // columns stay perfectly aligned with their body counterparts.
-  const headerRef = useRef<HTMLDivElement>(null);
-  const bodyRef = useRef<HTMLDivElement>(null);
-  const bodyTableRef = useRef<HTMLTableElement>(null);
-  const skeletonRowRef = useRef<HTMLTableRowElement>(null);
+  // columns stay perfectly aligned with their body counterparts.
+  const headerRef = useRef<HTMLDivElement>(null);
+  const bodyRef = useRef<HTMLDivElement>(null);
+  const bodyTableRef = useRef<HTMLTableElement>(null);
+  const skeletonRowRef = useRef<HTMLTableRowElement>(null);
   const rows = table.getRowModel().rows;
   const headerCount = table.getFlatHeaders().length;
   const totalWidth = table.getTotalSize();
@@ -402,6 +402,9 @@ export const DataTable = <TData extends { id: string }>({
       paddingRight,
     );
     header.parentElement?.setAttribute("data-has-scroll", hasScroll.toString());
+    // Mirror onto the body wrap so CSS can release the reserved scrollbar gutter
+    // when there's no vertical overflow (no blank strip on a few-row table).
+    body.setAttribute("data-has-scroll", hasScroll.toString());
 
     // Re-sync horizontal scroll position after width changes so pinned
     // columns stay perfectly aligned with their body counterparts.
@@ -465,7 +468,7 @@ export const DataTable = <TData extends { id: string }>({
   }, []);
 
   // ── Derived UI state ────────────────────────────────────────────────────────
-  // Defer the empty state by a tick after a loading-to-idle transition so the
+  // Defer the empty state by a tick after a loading-to-idle transition so the
   // loader doesn't flicker into "no results" for one paint before rows land.
   // Genuinely empty results (no in-flight load) commit immediately on mount.
   const isRowsEmpty = rows.length === 0;
@@ -474,6 +477,9 @@ export const DataTable = <TData extends { id: string }>({
   );
   const wasLoadingRef = useRef(isLoading);
 
+  // wasLoadingRef is intentionally omitted from the dep array: it's a ref used
+  // to track the previous value of isLoading across renders without triggering
+  // re-runs. React guarantees ref objects are stable across the component lifetime.
   useEffect(() => {
     const wasLoading = wasLoadingRef.current;
     wasLoadingRef.current = isLoading;
@@ -482,18 +488,19 @@ export const DataTable = <TData extends { id: string }>({
       setShowEmptyState(false);
       return;
     }
-    if (wasLoading) {
-      const id = window.setTimeout(
-        () => setShowEmptyState(true),
-        EMPTY_STATE_GRACE_MS,
-      );
-      return () => window.clearTimeout(id);
+    if (!wasLoading) {
+      setShowEmptyState(true);
+      return;
     }
-    setShowEmptyState(true);
+    const id = window.setTimeout(
+      () => setShowEmptyState(true),
+      EMPTY_STATE_GRACE_MS,
+    );
+    return () => window.clearTimeout(id);
   }, [isLoading, isRowsEmpty]);
 
   // Single tab-like discriminator drives the body - loader, empty, or content.
-  // While loading OR while bridging the loading-to-empty grace window, the
+  // While loading OR while bridging the loading-to-empty grace window, the
   // loader stays visible to avoid the brief "no results" flash.
   const view: "loader" | "empty" | "content" =
     isLoading || (isRowsEmpty && !showEmptyState)
@@ -525,20 +532,20 @@ export const DataTable = <TData extends { id: string }>({
   const selectedCount = rowsSelectable
     ? table.getSelectedRowModel().flatRows.length
     : 0;
-  const headerGroups = table.getHeaderGroups();
-  const visibleLeafColumns = table.getVisibleLeafColumns();
-
-  const skeletonRowCount =
-    bodyViewportHeight > 0 && skeletonRowHeight > 0
-      ? Math.max(
+  const headerGroups = table.getHeaderGroups();
+  const visibleLeafColumns = table.getVisibleLeafColumns();
+
+  const skeletonRowCount =
+    bodyViewportHeight > 0 && skeletonRowHeight > 0
+      ? Math.max(
           MIN_SKELETON_ROWS,
           Math.floor(bodyViewportHeight / skeletonRowHeight),
         )
       : MIN_SKELETON_ROWS;
 
-  const columnExtraWidths = useMemo<Record<string, number>>(() => {
-    const extraSpace = Math.max(0, bodyViewportWidth - totalWidth);
-    if (extraSpace <= 0) return EMPTY_COLUMN_EXTRA_WIDTHS;
+  const columnExtraWidths = useMemo<Record<string, number>>(() => {
+    const extraSpace = Math.max(0, bodyViewportWidth - totalWidth);
+    if (extraSpace <= 0) return EMPTY_COLUMN_EXTRA_WIDTHS;
 
     // Never add responsive width onto pinned columns because tanstack computes
     // sticky offsets from base sizes; changing pinned visual width would desync
@@ -561,27 +568,27 @@ export const DataTable = <TData extends { id: string }>({
         remainder -= 1;
       }
     }
-
-    return next;
-  }, [bodyViewportWidth, totalWidth, visibleLeafColumns]);
-
-  const tableWidth = Math.max(totalWidth, bodyViewportWidth);
-
-  // Match the table element width to the measured column widths. This keeps
-  // header, body, and skeleton rows on the same sizing contract during resize.
-  const tableSizingStyle: CSSProperties = useMemo(
-    () => ({ width: `${tableWidth}px`, minWidth: `${totalWidth}px` }),
-    [tableWidth, totalWidth],
-  );
-
-  const bodySkeletonStyle: CSSProperties = {
-    height: "var(--spacing-9)",
-  };
-
-  const selectSkeletonStyle: CSSProperties = {
-    width: "var(--data-table-selection-control-size, var(--spacing-9))",
-    height: "var(--data-table-selection-control-size, var(--spacing-9))",
-  };
+
+    return next;
+  }, [bodyViewportWidth, totalWidth, visibleLeafColumns]);
+
+  const tableWidth = Math.max(totalWidth, bodyViewportWidth);
+
+  // Match the table element width to the measured column widths. This keeps
+  // header, body, and skeleton rows on the same sizing contract during resize.
+  const tableSizingStyle: CSSProperties = useMemo(
+    () => ({ width: `${tableWidth}px`, minWidth: `${totalWidth}px` }),
+    [tableWidth, totalWidth],
+  );
+
+  const bodySkeletonStyle: CSSProperties = {
+    height: "var(--spacing-9)",
+  };
+
+  const selectSkeletonStyle: CSSProperties = {
+    width: "var(--data-table-selection-control-size, var(--spacing-9))",
+    height: "var(--data-table-selection-control-size, var(--spacing-9))",
+  };
 
   const tableClass = clsx(
     s.table,
@@ -644,66 +651,65 @@ export const DataTable = <TData extends { id: string }>({
           {/* Scrollable body - only this element scrolls. The body is a
               single switch over `view`: at most one branch ever renders, the
               other two are unmounted entirely. */}
-          <div
-            className={s.table_body_wrap}
-            style={{ pointerEvents: isLoading ? "none" : undefined }}
-            ref={bodyRef}
-          >
-            {view === "loader" && (
-              <table className={tableClass} style={tableSizingStyle}>
-                <tbody>
-                  {Array.from({ length: skeletonRowCount }).map(
-                    (_, rowIndex) => (
-                      <tr
-                        key={`skeleton-${rowIndex}`}
-                        ref={rowIndex === 0 ? skeletonRowRef : undefined}
-                      >
-                        {visibleLeafColumns.map((column) => {
-                          const isPinned = column.getIsPinned();
-                          const isLastPinnedCol =
-                            isPinned && isLastPinned(column);
-                          const isSelectColumn =
-                            column.id === SELECT_COLUMN_ID;
-
-                          return (
-                            <td
-                              key={column.id}
-                              className={clsx(
-                                isSelectColumn && s.col_select,
-                                isPinned === "left" && s.col_pinned_left,
-                                isPinned === "right" && s.col_pinned_right,
-                                isLastPinnedCol && s.col_pinned_last,
-                              )}
-                              style={getColumnStyle(
-                                column,
-                                column.getSize(),
-                                columnExtraWidths[column.id] ?? 0,
-                              )}
-                            >
-                              <div className={s.td_inner}>
-                                <Loader
-                                  variant="skeleton"
-                                  className={
-                                    isSelectColumn
-                                      ? s.loading_select_skeleton
-                                      : undefined
-                                  }
-                                  style={
-                                    isSelectColumn
-                                      ? selectSkeletonStyle
-                                      : bodySkeletonStyle
-                                  }
-                                />
-                              </div>
-                            </td>
-                          );
-                        })}
-                      </tr>
-                    ),
-                  )}
-                </tbody>
-              </table>
-            )}
+          <div
+            className={s.table_body_wrap}
+            style={{ pointerEvents: isLoading ? "none" : undefined }}
+            ref={bodyRef}
+          >
+            {view === "loader" && (
+              <table className={tableClass} style={tableSizingStyle}>
+                <tbody>
+                  {Array.from({ length: skeletonRowCount }).map(
+                    (_, rowIndex) => (
+                      <tr
+                        key={`skeleton-${rowIndex}`}
+                        ref={rowIndex === 0 ? skeletonRowRef : undefined}
+                      >
+                        {visibleLeafColumns.map((column) => {
+                          const isPinned = column.getIsPinned();
+                          const isLastPinnedCol =
+                            isPinned && isLastPinned(column);
+                          const isSelectColumn = column.id === SELECT_COLUMN_ID;
+
+                          return (
+                            <td
+                              key={column.id}
+                              className={clsx(
+                                isSelectColumn && s.col_select,
+                                isPinned === "left" && s.col_pinned_left,
+                                isPinned === "right" && s.col_pinned_right,
+                                isLastPinnedCol && s.col_pinned_last,
+                              )}
+                              style={getColumnStyle(
+                                column,
+                                column.getSize(),
+                                columnExtraWidths[column.id] ?? 0,
+                              )}
+                            >
+                              <div className={s.td_inner}>
+                                <Loader
+                                  variant="skeleton"
+                                  className={
+                                    isSelectColumn
+                                      ? s.loading_select_skeleton
+                                      : undefined
+                                  }
+                                  style={
+                                    isSelectColumn
+                                      ? selectSkeletonStyle
+                                      : bodySkeletonStyle
+                                  }
+                                />
+                              </div>
+                            </td>
+                          );
+                        })}
+                      </tr>
+                    ),
+                  )}
+                </tbody>
+              </table>
+            )}
             {view === "empty" && (
               <div className={s.state_overlay}>
                 <p className={s.empty_msg}>{emptyMessage}</p>

package/registry/components/ui/input-fields/custom-select/custom-select.module.css

@@ -34,6 +34,9 @@
     /* Option button */
     .option {
       width: 100%;
+      /* button base is min-width: fit-content - a long label must truncate
+         inside the row, never widen it past the menu */
+      min-width: 0;
       /* button has justify-content: space-between */
       justify-content: flex-start;
       /* modifying padding of actual button variant for consistency */
@@ -42,8 +45,14 @@
 
       /* > icon */
 
+      /* The label owns the row's slack space so trailing affordances
+         (.option_delete) always sit at the row's end - layout-driven, no
+         auto-margins (those tie with the Icon primitive's own margin reset
+         and the winner would depend on CSS bundle order). */
       .option_label {
-        max-width: 100% !important;
+        flex: 1 1 auto;
+        min-width: 0;
+        text-align: start;
       }
     }
   }
@@ -53,4 +62,15 @@
   max-width: 100% !important;
 }
 
+/* Trailing per-option delete affordance (option.onDelete). The growing
+   .option_label pushes it to the row's end; muted until hovered, then
+   error-toned. Click is stopPropagation'd in the component so it never
+   selects the option. */
+.option_delete {
+  flex-shrink: 0;
+  --icon-color: var(--color-muted-foreground);
 
+  &:hover {
+    --icon-color: var(--color-error-foreground);
+  }
+}

package/registry/components/ui/input-fields/custom-select/custom-select.tsx

@@ -9,7 +9,7 @@ import {
   useState,
 } from "react";
 import clsx from "clsx";
-import { IconPlus } from "@tabler/icons-react";
+import { IconPlus, IconTrash } from "@tabler/icons-react";
 import { Input } from "../input/input";
 import {
   Popover,
@@ -22,10 +22,7 @@ import sPickerCommon from "../common/picker-popover-common.module.css";
 import { Button, type ButtonVariant } from "../../button/button";
 import s from "./custom-select.module.css";
 import { FieldMessage } from "../common/field-message/field-message";
-import {
-  SelectButton,
-  type SelectButtonProps,
-} from "../common/select-button/select-button";
+import { SelectButton, type SelectButtonProps } from "../common/select-button/select-button";
 import { Icon } from "../../../primitives/icon/icon";
 import type { BaseInputFieldProps } from "../common/types";
 
@@ -38,6 +35,10 @@ export type CustomSelectOption = {
   optionButtonVariant?: ButtonVariant;
   applyToSelector?: boolean;
   disabled?: boolean;
+  /** Renders a trailing delete affordance on the option row. Clicking it does
+   *  NOT select the option - the consumer typically opens a confirm dialog and
+   *  performs the deletion (e.g. removing a folder/tag from its pool). */
+  onDelete?: () => void;
 };
 
 export type CustomSelectProps = Omit<
@@ -161,7 +162,7 @@ export const CustomSelect = ({
     [actualValue],
   );
 
-  // A selected value may not exist in `options`, for example when `allowCreate` is
+  // A selected value may not exist in `options` - e.g. when `allowCreate` is
   // on and the consumer just stores the value without pushing it back into
   // the options list. Synthesize a "ghost" entry so the trigger displays it,
   // the menu shows it (multi-select can uncheck), and the "Create" check
@@ -229,13 +230,7 @@ export const CustomSelect = ({
         ? selectedOption.optionStyle
         : undefined,
     };
-  }, [
-    multiple,
-    optionsWithSelected,
-    placeholder,
-    selectedValues,
-    showDisplayIcon,
-  ]);
+  }, [multiple, optionsWithSelected, placeholder, selectedValues, showDisplayIcon]);
 
   const popoverOnClose = popover?.onClose;
   const handlePopoverClose = useCallback(() => {
@@ -422,7 +417,9 @@ export const CustomSelect = ({
                   <Icon size="sm" aria-hidden="true">
                     <IconPlus />
                   </Icon>
-                  <span className={clsx(s.option_label, sCommon.truncate_text)}>
+                  <span
+                    className={clsx(s.option_label, sCommon.truncate_text)}
+                  >
                     Create &ldquo;{trimmedTerm}&rdquo;
                   </span>
                 </Button>
@@ -455,6 +452,24 @@ export const CustomSelect = ({
                     >
                       {option.label}
                     </span>
+                    {option.onDelete && interactive ? (
+                      <Icon
+                        size="sm"
+                        clickable
+                        className={s.option_delete}
+                        aria-label={`Delete ${option.label}`}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          // Close the popover BEFORE handing off - the consumer
+                          // opens a confirm dialog, which must not sit under
+                          // the still-open popover in the stacking order.
+                          setIsOpen(false);
+                          option.onDelete?.();
+                        }}
+                      >
+                        <IconTrash />
+                      </Icon>
+                    ) : null}
                   </Button>
                 ))
               )}