aplance-ui 1.4.0 → 1.5.1

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

@@ -0,0 +1,21 @@
+import { useMediaQuery } from "../../../hooks/useMediaQuery";
+import { FilterBar } from "./filter-bar";
+import { FilterModal } from "./filter-modal";
+import type { FilterBarProps } from "./types";
+
+// Below this width an inline filter row can't fit its fields (matches the
+// `--md` custom-media token in styles/media.css): the filters collapse into a
+// single "Filters" button and a modal instead of stacking full-height.
+const FILTER_COMPACT_QUERY = "(max-width: 900px)";
+
+/**
+ * A list's filters: the inline <FilterBar> while it fits, the <FilterModal>
+ * on a narrower screen. DataTable shows its filters through it; a list built
+ * on its own uses it the same way.
+ */
+export const Filters = (props: FilterBarProps) =>
+  useMediaQuery(FILTER_COMPACT_QUERY) ? (
+    <FilterModal {...props} />
+  ) : (
+    <FilterBar {...props} />
+  );

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

@@ -8,6 +8,7 @@ import clsx from "clsx";
 import { Button } from "../button/button";
 import { CustomSelect } from "../input-fields/custom-select/custom-select";
 import { Loader } from "../loader/loader";
+import { ScrollRail } from "../../primitives/scroll-rail/scroll-rail";
 import type { PaginationBarProps } from "./types";
 import s from "./data-table.module.css";
 
@@ -28,6 +29,7 @@ export const PaginationBar = <TData,>({
   rowLabel,
   rowsSelectable,
   selectedCount,
+  label,
   extra,
 }: PaginationBarProps<TData>) => {
   const pageCount = table.getPageCount();
@@ -42,6 +44,7 @@ export const PaginationBar = <TData,>({
   const pageNavItems = [
     {
       key: "first",
+      edge: true,
       label: "First page",
       icon: <IconChevronsLeft size={14} stroke={2} />,
       onClick: () => goTo(0),
@@ -63,6 +66,7 @@ export const PaginationBar = <TData,>({
     },
     {
       key: "last",
+      edge: true,
       label: "Last page",
       icon: <IconChevronsRight size={14} stroke={2} />,
       onClick: () => goTo(pageCount - 1),
@@ -111,11 +115,9 @@ export const PaginationBar = <TData,>({
   );
 
   return (
-    <div
-      className={clsx(s.pagination_bar, isLoading && s.pagination_bar_loading)}
-      aria-busy={isLoading || undefined}
-    >
-      {/* left - count + optional bulk-action extra slot */}
+    <div className={s.pagination_bar} aria-busy={isLoading || undefined}>
+      {/* left - the count (or the caller's label), then the extra slot,
+          which scrolls on its own while the count stays put */}
       <div
         className={clsx(
           s.pagination_left,
@@ -131,18 +133,26 @@ export const PaginationBar = <TData,>({
         ) : (
           <>
             <p className={s.pagination_count}>
-              {rowsSelectable && selectedCount > 0 ? (
-                <>
-                  <span>{selectedCount}</span> of <span>{total}</span>{" "}
-                  {rowLabel}(s) selected
-                </>
-              ) : (
-                <>
-                  <span>{total}</span> {rowLabel}(s)
-                </>
-              )}
+              {label ??
+                (rowsSelectable && selectedCount > 0 ? (
+                  <>
+                    <span>{selectedCount}</span> of <span>{total}</span>{" "}
+                    {rowLabel}(s) selected
+                  </>
+                ) : (
+                  <>
+                    <span>{total}</span> {rowLabel}(s)
+                  </>
+                ))}
             </p>
-            {extra}
+            {extra ? (
+              <ScrollRail
+                className={s.pagination_extra}
+                contentClassName={s.pagination_extra_items}
+              >
+                {extra}
+              </ScrollRail>
+            ) : null}
           </>
         )}
       </div>
@@ -205,7 +215,10 @@ export const PaginationBar = <TData,>({
                   <Loader
                     key={`${item.key}-skeleton`}
                     variant="skeleton"
-                    className={s.pagination_button_skeleton}
+                    className={clsx(
+                      s.pagination_button_skeleton,
+                      item.edge && s.page_nav_edge,
+                    )}
                   />
                 ))
               : pageNavItems.map((item) => (
@@ -213,6 +226,7 @@ export const PaginationBar = <TData,>({
                     key={item.key}
                     variant="bordered"
                     layout="box"
+                    className={item.edge ? s.page_nav_edge : undefined}
                     onClick={item.onClick}
                     disabled={item.disabled}
                     aria-label={item.label}

package/registry/components/ui/data-table/types.ts

@@ -159,6 +159,7 @@ export interface PaginationBarProps<TData> {
   rowLabel: string;
   rowsSelectable: boolean;
   selectedCount: number;
+  label: ReactNode;
   extra: ReactNode;
 }
 
@@ -298,10 +299,19 @@ export interface DataTableProps<TData extends { id: string }> {
 
   /**
    * Slot rendered inside the pagination bar next to the count text.
-   * Perfect for bulk-action buttons. Does not shift table layout.
+   * Perfect for bulk-action buttons. Does not shift table layout: when it
+   * does not fit, it scrolls across on its own (a ScrollRail) while the count
+   * stays put.
    */
   paginationExtra?: ReactNode;
 
+  /**
+   * Replaces the pagination bar's count text, e.g. for a selection that
+   * reaches past the loaded rows ("All 120 files selected"). Numbers wrapped
+   * in a `<span>` are emphasised like the default count's.
+   */
+  paginationLabel?: ReactNode;
+
   className?: string;
 }
 

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

@@ -260,8 +260,7 @@ export function useDataTable<TData extends { id: string }>({
         return;
       }
       const next = [...prev];
-      const [moved] = next.splice(draggedIdx, 1);
-      next.splice(targetIdx, 0, moved);
+      next.splice(targetIdx, 0, ...next.splice(draggedIdx, 1));
       localDataRef.current = next;
       setLocalData(next);
       onDataChange?.(next);

package/registry/components/ui/data-table/utils.ts

@@ -358,9 +358,10 @@ export function writeSearchParams(
     params.delete(p(PARAM_KEYS.pageSize));
   }
 
-  if (state.sorting && state.sorting.length > 0) {
-    params.set(p(PARAM_KEYS.sortBy), state.sorting[0].id);
-    params.set(p(PARAM_KEYS.sortDir), state.sorting[0].desc ? "desc" : "asc");
+  const sort = state.sorting?.[0];
+  if (sort) {
+    params.set(p(PARAM_KEYS.sortBy), sort.id);
+    params.set(p(PARAM_KEYS.sortDir), sort.desc ? "desc" : "asc");
   } else {
     params.delete(p(PARAM_KEYS.sortBy));
     params.delete(p(PARAM_KEYS.sortDir));

package/registry/components/ui/input-fields/common/input-field-common.module.css

@@ -1,6 +1,9 @@
-.container {
+.container {
   width: 100%;
-  min-width: fit-content;
+  /* A field takes the width its layout gives it, never its content's: a long
+     value truncates instead of pushing the field over its neighbour in a grid
+     column or a flex row. */
+  min-width: 0;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-2);
@@ -248,6 +251,9 @@
    Keep these after .field_default so they reliably override base paddings. */
 .field_full_width {
   width: 100% !important;
+  /* Fills the field and no more: a button is otherwise never narrower than
+     its label (`--button-min-width`), which would defeat `.truncate_text`. */
+  --button-min-width: 0;
 }
 
 .field_wrapper_fit {

package/registry/components/ui/input-fields/common/picker-popover-common.module.css

@@ -10,6 +10,10 @@
 
 .picker_popover_trigger {
   width: 100%;
+  /* A field's trigger takes the field's width, never its value's: Popover
+     keeps a trigger at least as wide as its content (right for a plain
+     button), which would push a long value over the next field. */
+  --popover-trigger-min-width: 0;
 }
 
 .picker_popover_menu_base {

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

@@ -1,87 +1,118 @@
-/* uses input-field-common (.container and all) 
-+ popover related stuff
-*/
-
-/* actual menu selector */
-.popover_menu {
-  --picker-popover-menu-width: 100%;
-  width: 100%;
-  border-radius: calc(var(--radius-md) + var(--spacing-2));
-
-  /* Search container */
-  .search_container {
-    padding: var(--spacing-4);
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  /* Options container */
-  .options_container {
-    width: 100%;
-    max-height: 16rem;
-    overflow-y: auto;
-    padding: var(--spacing-2);
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-2);
-
-    .no_options {
-      padding: var(--spacing-4);
-      text-align: center;
-      color: var(--color-muted-foreground);
-      font-size: var(--font-size-sm);
-    }
-
-    /* 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 */
-      padding: var(--spacing-3) var(--spacing-4);
-      border-radius: var(--radius-md);
-
-      /* > 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 {
-        flex: 1 1 auto;
-        min-width: 0;
-        text-align: start;
-      }
-    }
-  }
-}
-
-.option_label {
-  max-width: 100% !important;
-}
-
+/* uses input-field-common (.container and all) 
++ popover related stuff
+*/
+
+/* actual menu selector */
+.popover_menu {
+  --picker-popover-menu-width: 100%;
+  width: 100%;
+  border-radius: calc(var(--radius-md) + var(--spacing-2));
+
+  /* Search container */
+  .search_container {
+    padding: var(--spacing-4);
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  /* Options container */
+  .options_container {
+    width: 100%;
+    max-height: 16rem;
+    overflow-y: auto;
+    padding: var(--spacing-2);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
+
+    .no_options {
+      padding: var(--spacing-4);
+      text-align: center;
+      color: var(--color-muted-foreground);
+      font-size: var(--font-size-sm);
+    }
+
+    /* Option button */
+    .option {
+      width: 100%;
+      /* The list scrolls; an option keeps its height. The button base sets a
+         min-height, which would otherwise let a long list squeeze each option
+         down to it, its text spilling over the next. */
+      flex-shrink: 0;
+      /* 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 */
+      padding: var(--spacing-3) var(--spacing-4);
+      border-radius: var(--radius-md);
+
+      /* > 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 {
+        flex: 1 1 auto;
+        min-width: 0;
+        text-align: start;
+      }
+
+      /* With a description: two lines, so more room around them, and what
+         leads the row (a checkbox, an icon) sits at the label's line. */
+      &.option_rich {
+        padding-block: var(--spacing-5);
+        align-items: flex-start;
+      }
+    }
+  }
+}
+
+.option_label {
+  max-width: 100% !important;
+}
+
+/* An option with a description: its label over a line saying what it does.
+   The pair takes the row's slack, as a label alone does, and the line wraps:
+   the button base keeps its text on one line. */
+.option_text {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  text-align: start;
+}
+
+.option_description {
+  color: var(--color-muted-foreground);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-md);
+  white-space: normal;
+}
+
 /* Trailing per-option meta (option.meta). The growing .option_label pushes it
    to the row's end; consumers own the slot's visual styling. */
 .option_meta {
-  flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  margin-inline-start: var(--spacing-3);
-  white-space: nowrap;
-}
-
-/* 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);
-  }
-}
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  margin-inline-start: var(--spacing-3);
+  white-space: nowrap;
+}
+
+/* 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

@@ -29,6 +29,10 @@ import type { BaseInputFieldProps } from "../common/types";
 export type CustomSelectOption = {
   value: string;
   label: string;
+  /** A line under the label in the menu, for an option its label alone does
+   *  not explain. It wraps, never truncates, and search matches it too; once
+   *  chosen, the select shows the label only. */
+  description?: string;
   icon?: ReactNode;
   /** Trailing slot after the label and before any delete affordance. The
    *  component positions it; consumers own its visual styling. */
@@ -67,6 +71,10 @@ export type CustomSelectProps = Omit<
   allowCreate?: boolean;
   showDisplayText?: boolean;
   showDisplayIcon?: boolean;
+  /** What the select shows once something is chosen, in place of the chosen
+   *  label or the count: "All images" for a choice that stands for every
+   *  option. */
+  valueText?: string;
   onClear?: () => void;
 
   // Popover behavior defaults
@@ -111,6 +119,7 @@ export const CustomSelect = ({
   allowCreate = false,
   showDisplayIcon = true,
   showDisplayText = true,
+  valueText,
   disabled = false,
   readOnly = false,
   required = false,
@@ -188,7 +197,9 @@ export const CustomSelect = ({
     () =>
       searchable && searchTerm
         ? optionsWithSelected.filter((option) =>
-            option.label.toLowerCase().includes(searchTerm.toLowerCase()),
+            [option.label, option.description ?? ""].some((text) =>
+              text.toLowerCase().includes(searchTerm.toLowerCase()),
+            ),
           )
         : optionsWithSelected,
     [optionsWithSelected, searchable, searchTerm],
@@ -225,9 +236,10 @@ export const CustomSelect = ({
       icon: selectedOption?.icon,
       displayText: !hasValue
         ? placeholder
-        : isMultipleSelection
-          ? `${selectedValues.length} selected`
-          : singleLabel,
+        : (valueText ??
+          (isMultipleSelection
+            ? `${selectedValues.length} selected`
+            : singleLabel)),
       shouldShowIcon:
         showDisplayIcon && selectedOption?.icon && selectedValues.length === 1,
       appliedClassName: selectedOption?.applyToSelector
@@ -237,7 +249,7 @@ export const CustomSelect = ({
         ? selectedOption.optionStyle
         : undefined,
     };
-  }, [multiple, optionsWithSelected, placeholder, selectedValues, showDisplayIcon]);
+  }, [multiple, optionsWithSelected, placeholder, selectedValues, showDisplayIcon, valueText]);
 
   const popoverOnClose = popover?.onClose;
   const handlePopoverClose = useCallback(() => {
@@ -304,6 +316,25 @@ export const CustomSelect = ({
     onChange?.(newValues);
   };
 
+  // Enter in the search box picks the first row: the Create row while one
+  // shows, else the first option found. A choice already made stays made.
+  const handleSearchKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key !== "Enter") return;
+    e.preventDefault();
+    if (!trimmedTerm) return;
+    if (showCreateOption) {
+      handleSelect({ value: trimmedTerm, label: trimmedTerm });
+    } else {
+      const first = filteredOptions.find(
+        (option) =>
+          !option.disabled &&
+          !(multiple && selectedValues.includes(option.value)),
+      );
+      if (first) handleSelect(first);
+    }
+    setSearchTerm("");
+  };
+
   const handleClear = (e: React.MouseEvent) => {
     e.stopPropagation();
     if (!interactive) return;
@@ -406,6 +437,7 @@ export const CustomSelect = ({
                   placeholder={searchPlaceholder}
                   value={searchTerm}
                   onChange={(e) => setSearchTerm(e.target.value)}
+                  onKeyDown={handleSearchKey}
                   onClick={(e) => e.stopPropagation()}
                   showClear={true}
                   autoFocus
@@ -445,7 +477,11 @@ export const CustomSelect = ({
                     key={option.value}
                     as="div"
                     variant={option.optionButtonVariant || "ghost"}
-                    className={clsx(s.option, option.optionClassName)}
+                    className={clsx(
+                      s.option,
+                      option.description && s.option_rich,
+                      option.optionClassName,
+                    )}
                     style={option.optionStyle}
                     isActive={selectedValues.includes(option.value)}
                     disabled={disabled || readOnly || option.disabled}
@@ -460,11 +496,27 @@ export const CustomSelect = ({
                       />
                     )}
                     {option.icon && option.icon}
-                    <span
-                      className={clsx(s.option_label, sCommon.truncate_text)}
-                    >
-                      {option.label}
-                    </span>
+                    {option.description ? (
+                      <span className={s.option_text}>
+                        <span
+                          className={clsx(
+                            s.option_label,
+                            sCommon.truncate_text,
+                          )}
+                        >
+                          {option.label}
+                        </span>
+                        <span className={s.option_description}>
+                          {option.description}
+                        </span>
+                      </span>
+                    ) : (
+                      <span
+                        className={clsx(s.option_label, sCommon.truncate_text)}
+                      >
+                        {option.label}
+                      </span>
+                    )}
                     {option.meta != null ? (
                       <span className={s.option_meta}>{option.meta}</span>
                     ) : null}