@rebasepro/ui 0.13.0 → 0.13.1-canary.g06dbe5b

package/dist/views/ListView.d.ts

@@ -25,6 +25,12 @@ export type ListViewProps<T> = {
     emptyComponent?: React.ReactNode;
     size?: CollectionSize;
     selectedEntityId?: string | number;
+    /**
+     * Rendered above the rows, inside the list's own frame, and only when there
+     * are rows to head. A column header over an empty state or a spinner labels
+     * nothing.
+     */
+    header?: React.ReactNode;
     renderRow: (params: {
         item: T;
         index: number;
@@ -37,4 +43,4 @@ export type ListViewProps<T> = {
         onSelectionChange: (selected: boolean) => void;
     }) => React.ReactNode;
 };
-export declare function ListView<T>({ data, dataLoading, noMoreToLoad, dataLoadingError, itemCount, setItemCount, pageSize, paginationEnabled, onItemClick, selectedIds, highlightedIds, selectionEnabled, onSelectionChange, emptyComponent, size, selectedEntityId, renderRow }: ListViewProps<T>): React.JSX.Element;
+export declare function ListView<T>({ data, dataLoading, noMoreToLoad, dataLoadingError, itemCount, setItemCount, pageSize, paginationEnabled, onItemClick, selectedIds, highlightedIds, selectionEnabled, onSelectionChange, emptyComponent, size, selectedEntityId, header, renderRow }: ListViewProps<T>): React.JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/ui",
   "type": "module",
-  "version": "0.13.0",
+  "version": "0.13.1-canary.g06dbe5b",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"

package/src/components/Checkbox.tsx

@@ -31,6 +31,15 @@ const sizeClasses = {
 // Outer box is the hit area and sets the control's rendered height, so it
 // tracks the shared 28/32/40/48 scale. `smallest` used to reuse `small`'s
 // 32px box, which made the two sizes identical.
+//
+// A checkbox with no `onCheckedChange` is not a hit area — it is a tick mark
+// standing in for a value, as in `BooleanPreview`. There the box was 10px of
+// dead space on each side of a `medium` tick: on top of a read-only field's
+// own padding, it started the tick 10px further in than the text of the field
+// beside it. `padding={false}` reads as the request to drop it, and until now
+// did nothing at all, because it only removed `p-2` from a box whose size was
+// fixed regardless. Kept for anything clickable — the same box is the click
+// target for table row selection and for editor task items.
 const outerSizeClasses = {
     medium: "w-10 h-10",
     small: "w-8 h-8",
@@ -85,7 +94,7 @@ export const Checkbox = React.memo(({
 
             <div className={cls(
                 padding ? paddingClasses[size] : "",
-                outerSizeClasses[size],
+                padding || onCheckedChange ? outerSizeClasses[size] : "",
                 "inline-flex items-center justify-center text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150",
                 onCheckedChange ? "rounded-full hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-700 dark:hover:bg-opacity-75 dark:hover:bg-surface-accent-700/75" : "",
                 onCheckedChange ? "cursor-pointer" : "cursor-default"

package/src/components/Dialog.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { paperMixin } from "../styles";
 import { cls } from "../util";
-import { usePortalContainer } from "../hooks/PortalContainerContext";
+import { PortalContainerProvider, usePortalContainer } from "../hooks/PortalContainerContext";
 
 export type DialogProps = {
     open?: boolean;
@@ -65,6 +65,12 @@ export const Dialog = ({
                            "aria-describedby": ariaDescribedby
                        }: DialogProps) => {
     const [displayed, setDisplayed] = useState(false);
+    // Where popups rendered *inside* this dialog get portaled to. A modal
+    // dialog locks scrolling everywhere but its own content, so a popup
+    // portaled to `document.body` renders fine and then refuses to scroll:
+    // `react-remove-scroll` cancels every wheel event outside the lock.
+    // Handing descendants this host keeps them inside it.
+    const [popupHost, setPopupHost] = useState<HTMLDivElement | null>(null);
 
     // Get the portal container from context
     const contextContainer = usePortalContainer();
@@ -134,9 +140,16 @@ export const Dialog = ({
                                 maxWidth && !fullScreen ? widthClasses[maxWidth] : undefined,
                                 className
                             )}>
-                            {children}
+                            <PortalContainerProvider container={popupHost}>
+                                {children}
+                            </PortalContainerProvider>
                         </div>
 
+                        {/* Sized to nothing so it changes no layout, but positioned and
+                            stacked above the paper so popups portaled here are not
+                            painted behind it. */}
+                        <div ref={setPopupHost} className={"relative z-70 w-0 h-0"}/>
+
                     </DialogPrimitive.Content>
                 </div>
 

package/src/components/FilterChip.tsx

@@ -61,11 +61,21 @@ export const FilterChip = React.forwardRef<HTMLButtonElement, FilterChipProps>(f
                 "transition-colors duration-150",
                 "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
                 sizeClasses[size],
+                !disabled && "cursor-pointer",
+                // Hover is one step along the same ramp the chip already sits
+                // on, the way every other hoverable surface here moves. It used
+                // to be `hover:bg-primary/5` for the inactive chip, which
+                // *replaces* the resting fill with a tint fainter than it — so
+                // pointing at a chip made its background vanish. The active chip
+                // had no hover state at all.
                 active
-                    ? "bg-primary/12 text-primary dark:bg-primary/20 dark:text-primary shadow-[inset_0_0_0_1.5px_var(--color-primary)]"
+                    ? cls(
+                        "bg-primary/12 text-primary dark:bg-primary/20 dark:text-primary shadow-[inset_0_0_0_1.5px_var(--color-primary)]",
+                        !disabled && "hover:bg-primary/20 dark:hover:bg-primary/30"
+                    )
                     : cls(
                         "bg-surface-accent-100 text-text-secondary dark:bg-surface-accent-800 dark:text-text-secondary-dark",
-                        !disabled && "cursor-pointer hover:bg-primary/5 dark:hover:bg-primary/5"
+                        !disabled && "hover:bg-surface-accent-200 dark:hover:bg-surface-accent-700"
                     ),
                 disabled && "opacity-50 cursor-not-allowed",
                 className

package/src/components/Menu.tsx

@@ -57,7 +57,15 @@ const Menu = React.forwardRef<
                     side={side}
                     sideOffset={sideOffset}
                     align={align}
-                    className={cls(paperMixin, focusedDisabled, "py-2 z-30", className)}>
+                    // `z-50` is the floating layer — the tier `Dialog`, `Sheet`,
+                    // `Select` and `Tooltip` all sit on. Radix copies this value
+                    // onto the popper wrapper it portals next to them, so at any
+                    // lower value the menu opens *behind* the dialog or sheet it
+                    // was opened from: visible in the DOM, painted under the
+                    // overlay, and unclickable. Peers on this tier stack by mount
+                    // order, which is what puts a menu above the dialog holding
+                    // its trigger, and a dialog that menu opens above them both.
+                    className={cls(paperMixin, focusedDisabled, "py-2 z-50", className)}>
                     {children}
                 </DropdownMenu.Content>
             </DropdownMenu.Portal>

package/src/components/Menubar.tsx

@@ -109,7 +109,11 @@ export function MenubarContent({
     return (
         <MenubarPrimitive.Content
             onSelect={onSelect}
-            className={cls("min-w-[220px] bg-white dark:bg-surface-900 rounded-md p-[6px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]", className)}
+            // `z-50`, the floating layer — see the note in `Menu`. This carried
+            // no z-index at all, so the wrapper Radix portals out to the body
+            // got `auto` and the menu opened underneath any dialog or panel it
+            // was hosted in.
+            className={cls("z-50 min-w-[220px] bg-white dark:bg-surface-900 rounded-md p-[6px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]", className)}
             align={align ?? "start"}
             sideOffset={sideOffset ?? 5}
             alignOffset={alignOffset ?? -3}

package/src/components/MultiSelect.tsx

@@ -194,11 +194,13 @@ export const MultiSelect = React.forwardRef<
             onPopoverOpenChange(false);
         };
 
+        // Scoped to this popover. Unscoped, it reached every other cmdk list on
+        // the page — the relation and user selectors set their own height on
+        // the list and got a second, competing scroll container inside it.
         useInjectStyles("MultiSelect", `
-[cmdk-group] {
+[data-multi-select-content] [cmdk-group] {
   max-height: 45vh;
   overflow-y: auto;
-  // width: 400px;
 } `)
 
         const contextValue = React.useMemo(() => ({
@@ -306,6 +308,7 @@ export const MultiSelect = React.forwardRef<
                     </PopoverPrimitive.Trigger>
                     <PopoverPrimitive.Portal container={finalContainer}>
                         <PopoverPrimitive.Content
+                            data-multi-select-content
                             className={cls("z-50 overflow-hidden border bg-white dark:bg-surface-800 rounded-lg w-[400px]", defaultBorderMixin)}
                             align="start"
                             sideOffset={8}

package/src/components/Popover.tsx

@@ -73,8 +73,11 @@ export function Popover({
 
         <PopoverPrimitive.Portal container={finalContainer}>
             <PopoverPrimitive.Content
+                // `z-50`, the floating layer — see the note in `Menu`. Below it
+                // a popover opened from inside a dialog or a side panel is
+                // painted under the thing that owns its trigger.
                 className={cls(paperMixin,
-                    "PopoverContent z-40", className)}
+                    "PopoverContent z-50", className)}
                 side={side}
                 sideOffset={sideOffset}
                 align={align}

package/src/components/Skeleton.tsx

@@ -29,14 +29,21 @@ export function Skeleton({
 
     return <span
         style={{
-            width: width ? `${width}px` : "100%",
-            height: height ? `${height}px` : "12px"
+            width: width === undefined ? undefined : `${width}px`,
+            height: height === undefined ? undefined : `${height}px`
         }}
         className={
         cls(
             "block relative overflow-hidden",
             "bg-surface-accent-50 dark:bg-surface-accent-800 rounded-md",
             "max-w-full max-h-full",
+            // The defaults are classes, not inline styles, so that a caller can
+            // override them: an inline style beats every utility, which is why
+            // `<Skeleton className="w-full h-full"/>` inside a 40px thumbnail
+            // box used to render a 12px bar. The `width`/`height` props still
+            // win over any class, since those do land inline.
+            width === undefined ? "w-full" : undefined,
+            height === undefined ? "h-3" : undefined,
             className)
     }>
         <span

package/src/components/VirtualTable/VirtualTableProps.tsx

@@ -275,6 +275,16 @@ export type OnVirtualTableColumnResizeParams = {
 };
 
 /**
+ * The filter operators this table can express.
+ *
+ * A deliberate copy of `WhereFilterOp` in `@rebasepro/types`, not an import:
+ * `@rebasepro/ui` has no dependency on the core types and is meant to stay
+ * usable on its own. The cost is that two published packages export the same
+ * name, so the two must be kept identical by hand —
+ * `packages/types/test/filter-operators-duplication.test.ts` fails if they
+ * diverge, because a table that cannot express an operator the query layer
+ * supports is a silent gap: the filter simply is not offered.
+ *
  * @see Table
  * @group Components
  */
@@ -312,8 +322,13 @@ export type VirtualTableSort = "asc" | "desc" | undefined;
 export type VirtualTableFilterValues<Key extends string> = FilterValues<Key>;
 
 /**
- * Filter conditions in a `Query.where()` clause are specified using the
- * strings `<`, `<=`, `==`, `>=`, `>`, `array-contains`, `in`, and `array-contains-any`.
+ * Filter conditions in a `Query.where()` clause, named by {@link WhereFilterOp}.
+ *
+ * The list is not repeated here: this comment used to name eight operators when
+ * the type had sixteen, having been written before the SQL pattern and null
+ * checks (`like`, `ilike`, `not-like`, `not-ilike`, `is-null`, `is-not-null`)
+ * were added. A prose copy of a union drifts from it silently.
+ *
  * @see Table
  * @group Models
  */

package/src/components/VirtualTable/fields/VirtualTableDateField.tsx

@@ -22,6 +22,13 @@ export function VirtualTableDateField(props: {
         <DateTimeField
             value={internalValue ?? undefined}
             onChange={(dateValue) => updateValue(dateValue ?? null)}
+            // Same omission as `VirtualTableInput`: destructured and forwarded
+            // nowhere, so a disabled date cell was still editable. `error` went
+            // the same way — it drives `DateTimeField`'s invalid styling, and a
+            // prop a caller passes should reach something rather than sit in a
+            // destructure.
+            disabled={disabled}
+            error={Boolean(error)}
             invisible={true}
             // Without this the field falls back to DateTimeField's own default of
             // `size="large"` (min-h-64px), which overflows a table cell and makes

package/src/components/VirtualTable/fields/VirtualTableInput.tsx

@@ -50,6 +50,13 @@ export function VirtualTableInput(props: {
         <TextareaAutosize
             className={focusedDisabled}
             ref={ref}
+            // Destructured above and passed to nothing, so a property carrying
+            // `admin: { disabled: true }` stayed typeable in the table and the
+            // debounced write fired on blur. `readOnly` as well as `disabled`:
+            // a disabled textarea is skipped by keyboard navigation, and a cell
+            // you cannot tab through is worse than one you cannot edit.
+            disabled={disabled}
+            readOnly={disabled}
             style={{
                 padding: 0,
                 margin: 0,

package/src/icons/index.ts

@@ -100,7 +100,9 @@ export {
     MoonIcon,
     MoreVerticalIcon,
     Music2Icon,
+    PanelLeftCloseIcon,
     PanelLeftIcon,
+    PanelLeftOpenIcon,
     PauseIcon,
     PenLineIcon,
     PencilIcon,

package/src/views/CollectionView/CollectionView.tsx

@@ -323,7 +323,13 @@ export function CollectionView<T extends Record<string, unknown> = Record<string
                     <CollectionKanbanView<T>
                         {...sharedProps}
                         kanbanProperty={resolvedKanbanProperty}
-                        onRowCreate={onRowCreate}
+                        // `canCreate` is documented as "whether creation is
+                        // allowed (shows the + button)" and was destructured
+                        // and read nowhere, so the button showed regardless.
+                        // The kanban view draws its add affordance exactly when
+                        // it has a callback, so withholding the callback is
+                        // what the prop means.
+                        onRowCreate={canCreate ? onRowCreate : undefined}
                     />
                 ) : (
                     <div className="flex items-center justify-center p-8">

package/src/views/ListView.tsx

@@ -36,6 +36,13 @@ export type ListViewProps<T> = {
     size?: CollectionSize;
     selectedEntityId?: string | number;
 
+    /**
+     * Rendered above the rows, inside the list's own frame, and only when there
+     * are rows to head. A column header over an empty state or a spinner labels
+     * nothing.
+     */
+    header?: React.ReactNode;
+
     renderRow: (params: {
         item: T;
         index: number;
@@ -97,9 +104,14 @@ export function ListView<T>({
 
     size = "m",
     selectedEntityId,
+    header,
     renderRow
 }: ListViewProps<T>) {
     const containerRef = useRef<HTMLDivElement>(null);
+    // The rows' own box, which a header shifts down from the container's top.
+    // Virtualization measures against it rather than against the container, so
+    // the window of rendered rows stays the one the viewport is actually over.
+    const rowsRef = useRef<HTMLDivElement>(null);
     const isLoadingMore = useRef(false);
 
     // Reset loading gate when loading stops
@@ -128,7 +140,7 @@ export function ListView<T>({
         const update = () => {
             rafId = null;
             const scrollRect = scrollEl.getBoundingClientRect();
-            const listRect = el.getBoundingClientRect();
+            const listRect = (rowsRef.current ?? el).getBoundingClientRect();
 
             const listTopRelative = listRect.top - scrollRect.top;
             setEffectiveScrollTop(Math.max(0, -listTopRelative));
@@ -213,68 +225,71 @@ export function ListView<T>({
                     )}
                 </div>
             ) : (
-                <div style={{ height: totalHeight + footerHeight, position: "relative" }}>
-                    <div style={{ position: "absolute", top: offsetY, left: 0, right: 0 }}>
-                        {visibleData.map((item, i) => {
-                            const actualIndex = startIndex + i;
-                            const isLast = actualIndex === data.length - 1;
-                            const id = getItemId(item);
-                            const selected = selectedIds?.has(id) ?? false;
-                            const highlighted = highlightedIds?.has(id) ?? false;
-
-                            const handleClick = (e: React.MouseEvent) => {
-                                if ((e.metaKey || e.ctrlKey) && selectionEnabled) {
-                                    e.preventDefault();
-                                    onSelectionChange?.(item, !selected);
-                                    return;
-                                }
-                                onItemClick?.(item);
-                            };
-
-                            const handleSelectionChange = (val: boolean) => {
-                                onSelectionChange?.(item, val);
-                            };
-
-                            return (
-                                <React.Fragment key={id || actualIndex}>
-                                    {renderRow({
-                                        item,
-                                        index: actualIndex,
-                                        style: { height: estimatedRowHeight, overflow: "hidden" },
-                                        className: cls(
-                                            !isLast && "border-b",
-                                            !isLast && borderMixinClass
-                                        ),
-                                        selected,
-                                        highlighted,
-                                        isLast,
-                                        onClick: handleClick,
-                                        onSelectionChange: handleSelectionChange
-                                    })}
-                                </React.Fragment>
-                            );
-                        })}
-                    </div>
-
-                    {dataLoading && (
-                        <div
-                            className="flex items-center justify-center py-3"
-                            style={{ position: "absolute", top: totalHeight, left: 0, right: 0 }}
-                        >
-                            <CircularProgress size="small" />
-                        </div>
-                    )}
-                    {!dataLoading && noMoreToLoad && data.length > 0 && (
-                        <div
-                            className="flex items-center justify-center py-2 dark:bg-surface-900"
-                            style={{ position: "absolute", top: totalHeight, left: 0, right: 0 }}
-                        >
-                            <Typography variant="caption" color="secondary">
-                                All {data.length} entries loaded
-                            </Typography>
+                <>
+                    {header}
+                    <div ref={rowsRef} style={{ height: totalHeight + footerHeight, position: "relative" }}>
+                        <div style={{ position: "absolute", top: offsetY, left: 0, right: 0 }}>
+                            {visibleData.map((item, i) => {
+                                const actualIndex = startIndex + i;
+                                const isLast = actualIndex === data.length - 1;
+                                const id = getItemId(item);
+                                const selected = selectedIds?.has(id) ?? false;
+                                const highlighted = highlightedIds?.has(id) ?? false;
+
+                                const handleClick = (e: React.MouseEvent) => {
+                                    if ((e.metaKey || e.ctrlKey) && selectionEnabled) {
+                                        e.preventDefault();
+                                        onSelectionChange?.(item, !selected);
+                                        return;
+                                    }
+                                    onItemClick?.(item);
+                                };
+
+                                const handleSelectionChange = (val: boolean) => {
+                                    onSelectionChange?.(item, val);
+                                };
+
+                                return (
+                                    <React.Fragment key={id || actualIndex}>
+                                        {renderRow({
+                                            item,
+                                            index: actualIndex,
+                                            style: { height: estimatedRowHeight, overflow: "hidden" },
+                                            className: cls(
+                                                !isLast && "border-b",
+                                                !isLast && borderMixinClass
+                                            ),
+                                            selected,
+                                            highlighted,
+                                            isLast,
+                                            onClick: handleClick,
+                                            onSelectionChange: handleSelectionChange
+                                        })}
+                                    </React.Fragment>
+                                );
+                            })}
                         </div>
-                    )}
-                </div>
+
+                        {dataLoading && (
+                            <div
+                                className="flex items-center justify-center py-3"
+                                style={{ position: "absolute", top: totalHeight, left: 0, right: 0 }}
+                            >
+                                <CircularProgress size="small" />
+                            </div>
+                        )}
+                        {!dataLoading && noMoreToLoad && data.length > 0 && (
+                            <div
+                                className="flex items-center justify-center py-2 dark:bg-surface-900"
+                                style={{ position: "absolute", top: totalHeight, left: 0, right: 0 }}
+                            >
+                                <Typography variant="caption" color="secondary">
+                                    All {data.length} entries loaded
+                                </Typography>
+                            </div>
+                        )}
+                    </div>
+                </>
             )}
         </div>
     );