torch-glare 2.5.6 → 2.6.0

package/apps/lib/components/DataViews/panel/section.tsx

@@ -1,81 +0,0 @@
-"use client";
-
-import { useId, useState } from "react";
-import { cn } from "../../../utils/cn";
-import { ConclusionHeader } from "../../ConclusionHeader";
-import type { PanelSectionProps } from "../types";
-
-/**
- * A titled block in the rail — and, when it has a title, a **collapsible** one.
- *
- * The header is `ConclusionHeader`, the same clickable section header `FormSummary` uses for its
- * groups and the one Figma draws in this rail (`Conclusion-Header-1.0`). `Columns`, `Sort` and
- * `SavedViews` all render through here, so they all fold from one implementation.
- *
- * It colours itself from `content-presentation-global-*` tokens rather than a `text-white`
- * literal, which is what lets the same section sit in this dark rail and in the light content
- * area without a second variant.
- */
-export function Section({
-  title,
-  description,
-  collapsible = true,
-  defaultOpen = true,
-  children,
-  className,
-}: PanelSectionProps) {
-  const [open, setOpen] = useState(defaultOpen);
-  const bodyId = useId();
-  const isCollapsible = collapsible && title != null;
-  const shown = !isCollapsible || open;
-
-  return (
-    <section className={cn("flex flex-col", className)}>
-      {title != null &&
-        (isCollapsible ? (
-          <ConclusionHeader
-            label={title}
-            open={open}
-            onOpenChange={setOpen}
-            aria-controls={bodyId}
-          />
-        ) : (
-          // No `min-w-0` needed here, unlike the other headings: the parent is `flex flex-col`,
-          // so this already stretches to the column's width rather than sizing to its text.
-          <h3 className="text-content-presentation-global-primary truncate text-[18px] font-[510] leading-[1.32] tracking-[-0.01em]">
-            {title}
-          </h3>
-        ))}
-
-      {/* Figma groups the description with the header (a 47px block: 28px header + 18px line),
-          not with the rows — so it sits outside the fold and still reads when the group is shut. */}
-      {description != null && (
-        <p className="typography-body-small-regular text-content-presentation-global-primary">
-          {description}
-        </p>
-      )}
-
-      {/* Fold/unfold: `grid-rows-[0fr → 1fr]` animates to the body's natural height without
-          measuring it, so this stays a pure-CSS transition. The inner `overflow-hidden` is what
-          the 0fr track actually clips — it has to stay a bare wrapper. There is no flex `gap`
-          here either: a gap survives a collapsed body as dead space, so the spacing below the
-          title lives on the body instead, inside what collapses. */}
-      <div
-        id={bodyId}
-        // A collapsed body keeps its controls in the DOM, so `inert` is what takes them out of
-        // the tab order and the a11y tree — `overflow-hidden` alone would still let focus in.
-        inert={!shown}
-        aria-hidden={!shown}
-        className={cn(
-          "grid transition-[grid-template-rows,opacity] duration-200 ease-in-out",
-          "motion-reduce:transition-none",
-          shown ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0",
-        )}
-      >
-        <div className="overflow-hidden">
-          <div className={cn("space-y-3", title != null && "pt-3")}>{children}</div>
-        </div>
-      </div>
-    </section>
-  );
-}

package/apps/lib/components/DataViews/panel/sort.tsx

@@ -1,42 +0,0 @@
-"use client";
-
-import { formatPathLabel } from "../../../utils/dataViews/path";
-import { useDataViewsData, useDataViewsView } from "../context";
-import { RadioGroup } from "./controls";
-import { Section } from "./section";
-import type { PanelSortProps } from "../types";
-
-/**
- * `DataViews.Panel.Sort` — the same intent the table headers emit, reachable from views that have
- * no headers. Picking an option writes the sort into the root's query, which leaves through
- * `onQueryChange`; nothing is reordered here, and this part takes no callback of its own.
- */
-export function Sort({ title = "Default Sort", className }: PanelSortProps) {
-  const { fields } = useDataViewsData();
-  const { sort, setSort } = useDataViewsView();
-  const sortable = fields.filter((f) => f.type !== "hidden");
-
-  return (
-    <Section title={title} className={className}>
-      {sortable.length === 0 ? (
-        <p className="text-content-presentation-global-tertiary text-xs">No sortable columns.</p>
-      ) : (
-        <RadioGroup
-          value={sort?.path ?? ""}
-          onValueChange={(path) =>
-            // Re-picking the active field flips the direction, as clicking a header twice does.
-            setSort(
-              sort?.path === path && sort.direction === "asc"
-                ? { path, direction: "desc" }
-                : { path, direction: "asc" },
-            )
-          }
-          items={sortable.map((field) => ({
-            value: field.path,
-            label: field.label ?? formatPathLabel(field.path),
-          }))}
-        />
-      )}
-    </Section>
-  );
-}

package/apps/lib/components/DataViews/panel/tab.tsx

@@ -1,31 +0,0 @@
-"use client";
-
-import React from "react";
-import { useDataViewsPanelTabs } from "../context";
-import type { PanelTabProps } from "../types";
-
-const TAB_MARKER = "__dvPanelTab";
-
-/**
- * One tab in the panel. It renders its own children when it is the open tab and nothing when it
- * is not, so a tab is declared and filled in one place:
- *
- * ```tsx
- * <DataViews.Panel.Tab value="columns" label="Columns">
- *   <DataViews.Panel.Columns />
- * </DataViews.Panel.Tab>
- * ```
- */
-export function Tab({ value, children }: PanelTabProps) {
-  const { tab } = useDataViewsPanelTabs();
-  if (tab !== value) return null;
-  return <>{children}</>;
-}
-(Tab as unknown as Record<string, boolean>)[TAB_MARKER] = true;
-
-export function isTabElement(node: React.ReactNode): node is React.ReactElement<PanelTabProps> {
-  return (
-    React.isValidElement(node) &&
-    (node.type as unknown as Record<string, unknown>)?.[TAB_MARKER] === true
-  );
-}

package/apps/lib/components/DataViews/slots.ts

@@ -1,72 +0,0 @@
-import React from "react";
-
-/**
- * How the root recognises its children.
- *
- * Children are the API: rendering `<DataViews.Table/>` is what makes a table view exist, and
- * rendering `<DataViews.Panel/>` is what puts a sidebar beside it. To lay those out the root has
- * to tell them apart, so each part is stamped with a marker here and found with the matching
- * guard — never `child.type === Panel`, which breaks across duplicated module instances and
- * silently stops matching after a hot reload.
- *
- * Markers and guards live in this one file rather than beside their components so that the root
- * can import all of them without importing the components themselves — otherwise `header.tsx`
- * would have to import from `data-views.tsx`, which already imports `header.tsx`.
- */
-
-function mark<P extends object>(component: React.ComponentType<P>, key: string) {
-  (component as unknown as Record<string, boolean>)[key] = true;
-  return component;
-}
-
-function isMarked(node: React.ReactNode, key: string) {
-  return React.isValidElement(node) && (node.type as unknown as Record<string, unknown>)?.[key] === true;
-}
-
-// ─── Views ────────────────────────────────────────────────────────────────────
-
-/** What a view is called in the switcher when the caller does not say. */
-export interface ViewMeta {
-  defaultId: string;
-  defaultLabel: string;
-}
-
-export function markView<P extends object>(component: React.ComponentType<P>, meta: ViewMeta) {
-  (component as unknown as { __dataView: ViewMeta }).__dataView = meta;
-  return component;
-}
-
-export function viewMetaOf(node: React.ReactNode): ViewMeta | undefined {
-  if (!React.isValidElement(node)) return undefined;
-  return (node.type as { __dataView?: ViewMeta })?.__dataView;
-}
-
-export type ViewElement = React.ReactElement<{
-  id?: string;
-  label?: string;
-  icon?: React.ReactNode;
-}>;
-
-export function isViewElement(node: React.ReactNode): node is ViewElement {
-  return viewMetaOf(node) !== undefined;
-}
-
-// ─── Everything else the root positions ───────────────────────────────────────
-
-export const markHeader = <P extends object>(c: React.ComponentType<P>) => mark(c, "__dvHeader");
-export const isHeaderElement = (n: React.ReactNode) => isMarked(n, "__dvHeader");
-
-export const markPanel = <P extends object>(c: React.ComponentType<P>) => mark(c, "__dvPanel");
-export const isPanelElement = (n: React.ReactNode) => isMarked(n, "__dvPanel");
-
-/**
- * LOCAL PATCH (Contact Center): the empty slot — what renders *in place of* the view when a
- * settled query returns no rows. Without a marker the caller's empty state is just an "extra"
- * and stacks ABOVE the view, so an empty list shows the message on top of an empty table.
- * See `states.tsx` for why this does not reintroduce the bug upstream avoided.
- */
-export const markEmpty = <P extends object>(c: React.ComponentType<P>) => mark(c, "__dvEmpty");
-export const isEmptyElement = (n: React.ReactNode) => isMarked(n, "__dvEmpty");
-
-
-

package/apps/lib/components/DataViews/states.tsx

@@ -1,73 +0,0 @@
-"use client";
-
-import type { ReactNode } from "react";
-
-import { cn } from "../../utils/cn";
-import { Skeleton } from "../Skeleton";
-import { markEmpty } from "./slots";
-
-/**
- * The shared parts of a loading state, and the empty slot.
- *
- * Upstream ships no `Empty`, for reasons that are mostly still right: a centred sentence in place
- * of the view throws the chrome away and makes the layout jump twice on every query, and — the
- * real bug — it could not tell "no results" apart from "not fetched yet", so the first load of
- * every page announced that nothing matched before anything had been asked for.
- *
- * `Empty` below (LOCAL PATCH, Contact Center) keeps that objection answered rather than ignoring
- * it. It is a SLOT, not a design: the caller supplies the whole UI, and the root fills it only
- * when the query has settled (`!loading`) and still returned nothing. "Not fetched yet" is still
- * the view's own skeleton, so the two states stay distinguishable. What it fixes is the shape the
- * app was forced into without it — an unrecognised child renders as an "extra" ABOVE the view, so
- * an empty list showed the message stacked on top of an empty table, headers and all.
- *
- * Loading is still answered per view, because a skeleton is only useful if it is the shape of
- * the thing that is coming. These are the pieces the four views share so they cannot drift; the
- * shapes themselves live with the view that owns them.
- */
-
-/**
- * One shimmer bar.
- *
- * Vary the width at the call site — a column of identical bars reads as a grid rather than as
- * text that has not arrived.
- */
-export function SkeletonBar({ className }: { className?: string }) {
-  return <Skeleton className={cn("h-[14px] w-full rounded-[4px]", className)} />;
-}
-
-/**
- * `n` keys to map over.
- *
- * Counts are the view's own constant, not `pageSize`: they exist to fill the fold, and a skeleton
- * that promises exactly as many rows as are coming is a promise it cannot keep — the server
- * decides that, and it has not answered yet.
- */
-export const skeletonKeys = (n: number) => Array.from({ length: n }, (_, i) => i);
-
-/**
- * `DataViews.Empty` — what renders **in place of** the view when a settled query returns no rows.
- *
- * LOCAL PATCH (Contact Center). A passthrough with a marker: it holds no opinion about what an
- * empty state looks like, it only tells the root "put this where the view goes". The root fills
- * it on `!loading && rows.length === 0`; write it anywhere among the children.
- *
- * Note the caller's content is what gets the body slot's height, so give it `flex-1` if it should
- * centre rather than sit at the top of a tall surface — the app's shared `EmptyState` sizes
- * itself intrinsically.
- *
- * ```tsx
- * <DataViews rows={rows} fields={fields}>
- *   <DataViews.Header title="Fields">…</DataViews.Header>
- *   <DataViews.Empty>
- *     <EmptyState className="flex-1" title={search ? "No matches" : "No fields yet"} />
- *   </DataViews.Empty>
- *   <DataViews.Table />
- * </DataViews>
- * ```
- */
-export function Empty({ children, className }: { children?: ReactNode; className?: string }) {
-  return <div className={cn("flex min-h-0 flex-1 flex-col", className)}>{children}</div>;
-}
-
-markEmpty(Empty);