aplance-ui 1.2.1 → 1.3.0

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

@@ -4,17 +4,26 @@ import {
   IconChevronsLeft,
   IconChevronsRight,
 } from "@tabler/icons-react";
+import clsx from "clsx";
 import { Button } from "../button/button";
 import { CustomSelect } from "../input-fields/custom-select/custom-select";
+import { Loader } from "../loader/loader";
 import type { PaginationBarProps } from "./types";
 import s from "./data-table.module.css";
 
+const getSkeletonWidth = (
+  characters: number,
+  minCharacters: number,
+  maxCharacters: number,
+) => `${Math.min(maxCharacters, Math.max(minCharacters, characters))}ch`;
+
 export const PaginationBar = <TData,>({
   table,
   pagination,
   onPaginationChange,
   pageSizeOptions,
   showPageSizeSelect,
+  isLoading,
   totalCount,
   rowLabel,
   rowsSelectable,
@@ -30,6 +39,36 @@ export const PaginationBar = <TData,>({
     onPaginationChange({ ...pagination, pageIndex: i });
   const setSize = (size: number) =>
     onPaginationChange({ pageIndex: 0, pageSize: size });
+  const pageNavItems = [
+    {
+      key: "first",
+      label: "First page",
+      icon: <IconChevronsLeft size={14} stroke={2} />,
+      onClick: () => goTo(0),
+      disabled: !canPrev,
+    },
+    {
+      key: "previous",
+      label: "Previous page",
+      icon: <IconChevronLeft size={14} stroke={2} />,
+      onClick: () => goTo(pagination.pageIndex - 1),
+      disabled: !canPrev,
+    },
+    {
+      key: "next",
+      label: "Next page",
+      icon: <IconChevronRight size={14} stroke={2} />,
+      onClick: () => goTo(pagination.pageIndex + 1),
+      disabled: !canNext,
+    },
+    {
+      key: "last",
+      label: "Last page",
+      icon: <IconChevronsRight size={14} stroke={2} />,
+      onClick: () => goTo(pageCount - 1),
+      disabled: !canNext,
+    },
+  ];
 
   // Always show all page size options - current pageSize is guaranteed in the list.
   const sizeOptions = Array.from(
@@ -38,85 +77,149 @@ export const PaginationBar = <TData,>({
     .sort((a, b) => a - b)
     .map((n) => ({ value: String(n), label: String(n) }));
 
+  const resolvedPageCount =
+    pageCount > 0
+      ? pageCount
+      : totalCount === undefined
+        ? Math.max(1, pagination.pageIndex + 1)
+        : Math.max(1, Math.ceil(totalCount / pagination.pageSize));
+  const countSkeletonWidth = getSkeletonWidth(
+    String(total).length +
+      rowLabel.length +
+      (rowsSelectable && selectedCount > 0
+        ? String(selectedCount).length + 14
+        : 4),
+    7,
+    14,
+  );
+  const pageSizeLabelSkeletonWidth = getSkeletonWidth(
+    rowLabel.length + "s per page".length,
+    8,
+    12,
+  );
+  const pageSizeSelectSkeletonWidth = `calc(${getSkeletonWidth(
+    String(pagination.pageSize).length,
+    2,
+    3,
+  )} + var(--spacing-11))`;
+  const pageIndicatorSkeletonWidth = getSkeletonWidth(
+    String(pagination.pageIndex + 1).length +
+      String(resolvedPageCount).length +
+      "Page  of ".length,
+    8,
+    11,
+  );
+
   return (
-    <div className={s.pagination_bar}>
+    <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_left}>
-        <p className={s.pagination_count}>
-          {rowsSelectable && selectedCount > 0 ? (
-            <>
-              <span>{selectedCount}</span> of <span>{total}</span> {rowLabel}(s)
-              selected
-            </>
-          ) : (
-            <>
-              <span>{total}</span> {rowLabel}(s)
-            </>
-          )}
-        </p>
-        {extra}
+      <div
+        className={clsx(
+          s.pagination_left,
+          isLoading && s.pagination_left_loading,
+        )}
+      >
+        {isLoading ? (
+          <Loader
+            variant="skeleton"
+            className={s.pagination_text_skeleton}
+            style={{ width: countSkeletonWidth }}
+          />
+        ) : (
+          <>
+            <p className={s.pagination_count}>
+              {rowsSelectable && selectedCount > 0 ? (
+                <>
+                  <span>{selectedCount}</span> of <span>{total}</span>{" "}
+                  {rowLabel}(s) selected
+                </>
+              ) : (
+                <>
+                  <span>{total}</span> {rowLabel}(s)
+                </>
+              )}
+            </p>
+            {extra}
+          </>
+        )}
       </div>
 
       {/* right - rows-per-page + page x of y + nav buttons */}
-      {pageCount > 0 && (
-        <div className={s.pagination_controls}>
-          {showPageSizeSelect && (
-            <div className={s.page_size_wrap}>
-              <span className={s.page_size_label}>{rowLabel}s per page</span>
-              <CustomSelect
-                options={sizeOptions}
-                value={String(pagination.pageSize)}
-                popover={{ position: "top" }}
-                onChange={(val) =>
-                  setSize(Number(Array.isArray(val) ? val[0] : val))
-                }
-                selectButton={{ showChevron: true, showClear: false }}
-              />
-            </div>
+      {(isLoading || pageCount > 0) && (
+        <div
+          className={clsx(
+            s.pagination_controls,
+            isLoading && s.pagination_controls_loading,
           )}
+        >
+          {showPageSizeSelect &&
+            (isLoading ? (
+              <div className={s.page_size_wrap}>
+                <Loader
+                  variant="skeleton"
+                  className={s.pagination_text_skeleton}
+                  style={{ width: pageSizeLabelSkeletonWidth }}
+                />
+                <Loader
+                  variant="skeleton"
+                  className={s.pagination_select_skeleton}
+                  style={{ width: pageSizeSelectSkeletonWidth }}
+                />
+              </div>
+            ) : (
+              <div className={s.page_size_wrap}>
+                <span className={s.page_size_label}>{rowLabel}s per page</span>
+                <CustomSelect
+                  options={sizeOptions}
+                  value={String(pagination.pageSize)}
+                  popover={{ position: "top" }}
+                  onChange={(val) =>
+                    setSize(Number(Array.isArray(val) ? val[0] : val))
+                  }
+                  selectButton={{ showChevron: true, showClear: false }}
+                />
+              </div>
+            ))}
 
-          <p className={s.page_indicator}>
-            Page <span>{pagination.pageIndex + 1}</span> of{" "}
-            <span>{pageCount}</span>
-          </p>
+          {isLoading ? (
+            <Loader
+              variant="skeleton"
+              className={s.pagination_text_skeleton}
+              style={{ width: pageIndicatorSkeletonWidth }}
+            />
+          ) : (
+            <p className={s.page_indicator}>
+              Page <span>{pagination.pageIndex + 1}</span> of{" "}
+              <span>{pageCount}</span>
+            </p>
+          )}
 
-          <div className={s.page_nav}>
-            <Button
-              variant="bordered"
-              layout="box"
-              onClick={() => goTo(0)}
-              disabled={!canPrev}
-              aria-label="First page"
-            >
-              <IconChevronsLeft size={14} stroke={2} />
-            </Button>
-            <Button
-              variant="bordered"
-              layout="box"
-              onClick={() => goTo(pagination.pageIndex - 1)}
-              disabled={!canPrev}
-              aria-label="Previous page"
-            >
-              <IconChevronLeft size={14} stroke={2} />
-            </Button>
-            <Button
-              variant="bordered"
-              layout="box"
-              onClick={() => goTo(pagination.pageIndex + 1)}
-              disabled={!canNext}
-              aria-label="Next page"
-            >
-              <IconChevronRight size={14} stroke={2} />
-            </Button>
-            <Button
-              variant="bordered"
-              layout="box"
-              onClick={() => goTo(pageCount - 1)}
-              disabled={!canNext}
-              aria-label="Last page"
-            >
-              <IconChevronsRight size={14} stroke={2} />
-            </Button>
+          <div
+            className={clsx(s.page_nav, isLoading && s.page_nav_loading)}
+          >
+            {isLoading
+              ? pageNavItems.map((item) => (
+                  <Loader
+                    key={`${item.key}-skeleton`}
+                    variant="skeleton"
+                    className={s.pagination_button_skeleton}
+                  />
+                ))
+              : pageNavItems.map((item) => (
+                  <Button
+                    key={item.key}
+                    variant="bordered"
+                    layout="box"
+                    onClick={item.onClick}
+                    disabled={item.disabled}
+                    aria-label={item.label}
+                  >
+                    {item.icon}
+                  </Button>
+                ))}
           </div>
         </div>
       )}

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

@@ -43,7 +43,7 @@ declare module "@tanstack/react-table" {
 
 // ─── Filter fields ────────────────────────────────────────────────────────────
 // Two headless primitives - nothing else. Every concrete filter (search,
-// select, date picker, custom slider, …) plugs in through the same
+// select, date picker, custom slider, etc.) plugs in through the same
 // `value`/`onChange` render-prop contract, so the data-table has zero
 // compile-time dependency on any specific input component.
 
@@ -59,7 +59,7 @@ export interface FilterInputField {
   }) => ReactNode;
 }
 
-/** Any non-value slot - button, menu, custom control, … */
+/** Any non-value slot - button, menu, custom control, etc. */
 export interface FilterAction {
   type: "action";
   /** Grid column width template. Default: `'auto'` (hugs content). */
@@ -154,6 +154,7 @@ export interface PaginationBarProps<TData> {
   onPaginationChange: (next: PaginationState) => void;
   pageSizeOptions: number[];
   showPageSizeSelect: boolean;
+  isLoading: boolean;
   totalCount: number | undefined;
   rowLabel: string;
   rowsSelectable: boolean;
@@ -220,6 +221,14 @@ export interface DataTableProps<TData extends { id: string }> {
   rowLabel?: string;
 
   rowsSelectable?: boolean;
+  /**
+   * Optional per-row gate for selection. When provided, takes precedence
+   * over `rowsSelectable` for the TanStack `enableRowSelection` setting
+   * (the boolean still controls whether the checkbox column is mounted at
+   * all). Returning false disables the per-row checkbox via the standard
+   * `row.getCanSelect()` flow.
+   */
+  getRowCanSelect?: (row: Row<TData>) => boolean;
   rowSelection?: RowSelectionState;
   onRowSelectionChange?: OnChangeFn<RowSelectionState>;
 
@@ -585,7 +594,7 @@ export interface ApplyPersistedTarget {
  * Source for resolving the runtime column id from a raw `ColumnDef`. Mirrors
  * how tanstack derives ids: explicit `id` first, then `accessorKey`. Typed
  * structurally on the two fields actually read so callers can pass any
- * concrete `ColumnDef<…>` without tripping tanstack's invariance on the
+ * concrete `ColumnDef<...>` without tripping tanstack's invariance on the
  * value-type parameter.
  */
 export interface ColumnIdSource {

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

@@ -1,12 +1,21 @@
-/* uses input-field-common (.container and all)
-+ extends .wrapper (from input-field-common) with 
-.native_field_wrapper (styling defalut input types)
-*/
-
-.native_field_wrapper {
-  /* input-specific overrides & browser fixes */
-  input[type="search"]::-webkit-search-cancel-button {
-    appearance: none;
+/* uses input-field-common (.container and all)
++ extends .wrapper (from input-field-common) with 
+.native_field_wrapper (styling default input types)
+*/
+
+.native_field_wrapper {
+  /* Compact-control sizing contract (checkbox/radio). Consumers can override
+     these vars from a parent scope when needed (e.g. DataTable select column). */
+  --native-control-size: var(--spacing-9, 1.25rem);
+  --native-control-mark-stroke: var(--border-2, 2px);
+  --native-control-check-width: calc(var(--native-control-size) / 3.5);
+  --native-control-check-height: calc(var(--native-control-size) / 1.75);
+  --native-radio-dot-fill-stop: 48%;
+  --native-radio-dot-clear-stop: 50%;
+
+  /* input-specific overrides & browser fixes */
+  input[type="search"]::-webkit-search-cancel-button {
+    appearance: none;
     display: none;
   }
 
@@ -47,29 +56,29 @@
     }
   }
 
-  /* radio */
-  input[type="radio"] {
-    width: 1.2rem;
-    height: 1.2rem;
-    border-radius: var(--radius-full);
-    position: relative;
-
-    &:checked::after {
-      content: "";
-      position: absolute;
-      inset: 4px;
-      border-radius: var(--radius-full);
-      background-color: var(--color-primary);
-    }
-  }
-
-  /* checkbox */
-  input[type="checkbox"] {
-    width: 1.2rem;
-    height: 1.2rem;
-    border-radius: var(--radius-sm);
-    position: relative;
-    appearance: none;
+  /* radio */
+  input[type="radio"] {
+    width: var(--native-control-size);
+    height: var(--native-control-size);
+    border-radius: var(--radius-full);
+    position: relative;
+
+    &:checked {
+      background-image: radial-gradient(
+        circle at center,
+        var(--color-primary) 0 var(--native-radio-dot-fill-stop),
+        transparent var(--native-radio-dot-clear-stop)
+      );
+    }
+  }
+
+  /* checkbox */
+  input[type="checkbox"] {
+    width: var(--native-control-size);
+    height: var(--native-control-size);
+    border-radius: var(--radius-sm);
+    position: relative;
+    appearance: none;
 
     &:checked {
       background-color: var(--color-primary);
@@ -77,16 +86,17 @@
 
     &:checked::after {
       content: "";
-      position: absolute;
-      left: 50%;
-      top: 45%;
-      width: 0.35rem;
-      height: 0.7rem;
-      border: solid var(--color-primary-foreground);
-      border-width: 0 2.5px 2.5px 0;
-      transform: translate(-50%, -50%) rotate(45deg);
-    }
-  }
+      position: absolute;
+      left: 50%;
+      top: 45%;
+      width: var(--native-control-check-width);
+      height: var(--native-control-check-height);
+      border: solid var(--color-primary-foreground);
+      border-width: 0 var(--native-control-mark-stroke)
+        var(--native-control-mark-stroke) 0;
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+  }
 
   /* number */
   input[type="number"] {

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,6 +9,7 @@ import {
   useState,
 } from "react";
 import clsx from "clsx";
+import { IconPlus, IconTrash } from "@tabler/icons-react";
 import { Input } from "../input/input";
 import {
   Popover,
@@ -34,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<
@@ -50,6 +55,13 @@ export type CustomSelectProps = Omit<
   onChange?: (value: string | string[]) => void;
   multiple?: boolean;
   searchable?: boolean;
+  /**
+   * Lets the user create a new option from the search term when nothing in
+   * `options` matches it. Requires `searchable`. The created value is emitted
+   * through `onChange` (and added to `selectedValues`); the consumer is
+   * responsible for persisting it / pushing it into the next `options` list.
+   */
+  allowCreate?: boolean;
   showDisplayText?: boolean;
   showDisplayIcon?: boolean;
   onClear?: () => void;
@@ -91,6 +103,7 @@ export const CustomSelect = ({
   onChange,
   multiple = false,
   searchable = false,
+  allowCreate = false,
   showDisplayIcon = true,
   showDisplayText = true,
   disabled = false,
@@ -149,35 +162,65 @@ export const CustomSelect = ({
     [actualValue],
   );
 
+  // 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
+  // doesn't redundantly offer something already selected.
+  const optionsWithSelected = useMemo(() => {
+    if (selectedValues.length === 0) return options;
+    const known = new Set(options.map((option) => option.value));
+    const ghosts = selectedValues
+      .filter((value) => !known.has(value))
+      .map<CustomSelectOption>((value) => ({ value, label: value }));
+    return ghosts.length > 0 ? [...ghosts, ...options] : options;
+  }, [options, selectedValues]);
+
   // Filter options based on search
   const filteredOptions = useMemo(
     () =>
       searchable && searchTerm
-        ? options.filter((option) =>
+        ? optionsWithSelected.filter((option) =>
             option.label.toLowerCase().includes(searchTerm.toLowerCase()),
           )
-        : options,
-    [options, searchable, searchTerm],
+        : optionsWithSelected,
+    [optionsWithSelected, searchable, searchTerm],
   );
 
-  // Get all selected option data in one place
+  // "Create '<term>'" appears when allowCreate is on and the typed term
+  // doesn't match any existing option (by label or value, case-insensitive).
+  const trimmedTerm = searchTerm.trim();
+  const showCreateOption =
+    allowCreate &&
+    searchable &&
+    trimmedTerm.length > 0 &&
+    !optionsWithSelected.some(
+      (option) =>
+        option.label.toLowerCase() === trimmedTerm.toLowerCase() ||
+        option.value.toLowerCase() === trimmedTerm.toLowerCase(),
+    );
+
+  // Get all selected option data in one place. `optionsWithSelected` is used
+  // for the lookup so ghost entries (selected-but-not-in-options) resolve
+  // back to a displayable label.
   const selectedOptionData = useMemo(() => {
     const hasValue = selectedValues.length > 0;
-    const selectedOption = options.find(
+    const selectedOption = optionsWithSelected.find(
       (opt) => opt.value === selectedValues[0],
     );
     const isMultipleSelection = multiple && selectedValues.length > 1;
+    const singleLabel = selectedOption?.label ?? selectedValues[0];
 
     return {
       hasValue,
       option: selectedOption,
-      label: selectedOption?.label,
+      label: singleLabel,
       icon: selectedOption?.icon,
       displayText: !hasValue
         ? placeholder
         : isMultipleSelection
           ? `${selectedValues.length} selected`
-          : selectedOption?.label,
+          : singleLabel,
       shouldShowIcon:
         showDisplayIcon && selectedOption?.icon && selectedValues.length === 1,
       appliedClassName: selectedOption?.applyToSelector
@@ -187,7 +230,7 @@ export const CustomSelect = ({
         ? selectedOption.optionStyle
         : undefined,
     };
-  }, [multiple, options, placeholder, selectedValues, showDisplayIcon]);
+  }, [multiple, optionsWithSelected, placeholder, selectedValues, showDisplayIcon]);
 
   const popoverOnClose = popover?.onClose;
   const handlePopoverClose = useCallback(() => {
@@ -361,7 +404,27 @@ export const CustomSelect = ({
               className={clsx(s.options_container, optionsContainerClassName)}
               style={optionsContainerStyle}
             >
-              {filteredOptions.length === 0 ? (
+              {showCreateOption && (
+                <Button
+                  as="div"
+                  variant="ghost"
+                  className={s.option}
+                  onClick={() => {
+                    handleSelect({ value: trimmedTerm, label: trimmedTerm });
+                    setSearchTerm("");
+                  }}
+                >
+                  <Icon size="sm" aria-hidden="true">
+                    <IconPlus />
+                  </Icon>
+                  <span
+                    className={clsx(s.option_label, sCommon.truncate_text)}
+                  >
+                    Create &ldquo;{trimmedTerm}&rdquo;
+                  </span>
+                </Button>
+              )}
+              {filteredOptions.length === 0 && !showCreateOption ? (
                 <p className={s.no_options}>No options found</p>
               ) : (
                 filteredOptions.map((option) => (
@@ -389,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>
                 ))
               )}