@vireocodedev/ui 0.2.0 → 0.2.1

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/VireoHistoryEntry.styled.js

@@ -0,0 +1,391 @@
+import { VIREO_MOTION_TOKENS } from "../../../../../core/public.js";
+import { Box } from "@mui/material";
+import { alpha, styled } from "@mui/material/styles";
+import { VIREO_HISTORY_ENTRY_NAME } from "./VireoHistoryEntry.identity.js";
+export const VireoHistoryEntryRoot = styled(Box, {
+    name: VIREO_HISTORY_ENTRY_NAME,
+    slot: "Root",
+    overridesResolver: (_props, styles) => styles.root,
+})(({ theme }) => ({
+    containerType: "inline-size",
+    minWidth: 0,
+    color: theme.palette.text.primary,
+    fontFamily: theme.typography.fontFamily,
+    "&.VireoHistoryEntry-loading": {
+        pointerEvents: "none",
+        userSelect: "none",
+    },
+    "& .VireoHistoryEntry-rootGroup": {
+        minWidth: 0,
+        overflow: "hidden",
+        border: `1px solid ${theme.palette.divider}`,
+        borderRadius: typeof theme.shape.borderRadius === "number"
+            ? theme.shape.borderRadius * 2
+            : `calc(${theme.shape.borderRadius} * 2)`,
+        backgroundColor: theme.palette.background.paper,
+    },
+    "& .VireoHistoryEntry-rootHeader": {
+        display: "flex",
+        alignItems: "stretch",
+        minHeight: 64,
+        backgroundColor: theme.palette.action.hover,
+        borderBottom: `1px solid transparent`,
+    },
+    "& .VireoHistoryEntry-rootGroup[data-expanded] > .VireoHistoryEntry-rootHeader": {
+        borderBottomColor: theme.palette.divider,
+    },
+    "& .VireoHistoryEntry-rootSummaryButton, & .VireoHistoryEntry-groupSummary": {
+        minWidth: 0,
+        justifyContent: "flex-start",
+        gap: theme.spacing(1),
+        textAlign: "left",
+        borderRadius: theme.shape.borderRadius,
+        transition: theme.transitions.create("background-color", { duration: VIREO_MOTION_TOKENS.duration.micro }),
+        "&:focus-visible": {
+            outline: `2px solid ${theme.palette.primary.main}`,
+            outlineOffset: -2,
+        },
+    },
+    "& .VireoHistoryEntry-rootSummaryButton": {
+        flex: "1 1 auto",
+        padding: theme.spacing(1, 1.5),
+    },
+    "& .VireoHistoryEntry-summaryChevron": {
+        flex: "0 0 auto",
+        color: theme.palette.text.secondary,
+        transform: "rotate(-90deg)",
+        transition: theme.transitions.create("transform", { duration: VIREO_MOTION_TOKENS.duration.standard }),
+    },
+    "& [data-expanded] > * > * > .VireoHistoryEntry-summaryChevron, & [data-expanded] > * > .VireoHistoryEntry-summaryChevron": {
+        transform: "rotate(0deg)",
+    },
+    "& .VireoHistoryEntry-summaryText": {
+        display: "grid",
+        minWidth: 0,
+        gap: theme.spacing(0.25),
+    },
+    "& .VireoHistoryEntry-summaryPrimary": {
+        minWidth: 0,
+        overflow: "hidden",
+        color: theme.palette.text.primary,
+        fontSize: theme.typography.pxToRem(14),
+        fontWeight: theme.typography.fontWeightMedium,
+        lineHeight: 1.35,
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    },
+    "& .VireoHistoryEntry-groupIdentity": {
+        color: theme.palette.text.secondary,
+        fontWeight: theme.typography.fontWeightRegular,
+    },
+    "& .VireoHistoryEntry-summaryMeta": {
+        overflow: "hidden",
+        color: theme.palette.text.secondary,
+        fontSize: theme.typography.pxToRem(13),
+        lineHeight: 1.35,
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    },
+    "& .VireoHistoryEntry-unchangedAction": {
+        flex: "0 0 auto",
+        alignSelf: "center",
+        marginRight: theme.spacing(1),
+        fontSize: theme.typography.pxToRem(12.5),
+        fontWeight: theme.typography.fontWeightMedium,
+        textTransform: "none",
+        whiteSpace: "nowrap",
+    },
+    "& .VireoHistoryEntry-columnHeadings": {
+        display: "grid",
+        gridTemplateColumns: "40px minmax(140px, 24%) minmax(0, 1fr) 32px minmax(0, 1fr)",
+        alignItems: "center",
+        minHeight: 36,
+        padding: theme.spacing(0, 1),
+        color: theme.palette.text.secondary,
+        fontSize: theme.typography.pxToRem(12),
+        fontWeight: theme.typography.fontWeightMedium,
+        backgroundColor: alpha(theme.palette.text.primary, 0.04),
+        "& > :first-of-type": { gridColumn: 2 },
+        "& > :nth-of-type(2)": { gridColumn: 3 },
+        "& > :nth-of-type(3)": { gridColumn: 5 },
+    },
+    "& .VireoHistoryEntry-fieldRow": {
+        display: "grid",
+        gridTemplateColumns: "40px minmax(140px, 24%) minmax(0, 1fr) 32px minmax(0, 1fr)",
+        alignItems: "start",
+        minWidth: 0,
+        padding: theme.spacing(0.75, 1),
+        borderTop: `1px solid ${alpha(theme.palette.divider, 0.7)}`,
+        backgroundColor: theme.palette.background.paper,
+    },
+    "& .VireoHistoryEntry-statusCell": {
+        display: "flex",
+        alignItems: "center",
+        minHeight: 22,
+    },
+    "& .VireoHistoryEntry-statusBadge": {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 22,
+        height: 22,
+        flex: "0 0 22px",
+        borderRadius: "50%",
+        fontSize: 15,
+        color: theme.palette.text.secondary,
+        backgroundColor: alpha(theme.palette.text.secondary, 0.12),
+        "&:focus-visible": { outline: `2px solid ${theme.palette.primary.main}`, outlineOffset: 2 },
+        '&[data-change-type="added"]': {
+            color: theme.palette.success.main,
+            backgroundColor: alpha(theme.palette.success.main, 0.14),
+        },
+        '&[data-change-type="removed"]': {
+            color: theme.palette.error.main,
+            backgroundColor: alpha(theme.palette.error.main, 0.14),
+        },
+        '&[data-change-type="updated"]': {
+            color: theme.palette.warning.main,
+            backgroundColor: alpha(theme.palette.warning.main, 0.14),
+        },
+        '&[data-change-type="moved"]': {
+            color: theme.palette.info.main,
+            backgroundColor: alpha(theme.palette.info.main, 0.14),
+        },
+        '&[data-change-type="unchanged"]': {
+            color: theme.palette.text.disabled,
+            backgroundColor: alpha(theme.palette.text.disabled, 0.08),
+        },
+    },
+    "& .VireoHistoryEntry-fieldLabel": {
+        minWidth: 0,
+        minHeight: 22,
+        paddingInlineStart: `calc(min(var(--VireoHistoryEntry-depth, 0), 4) * ${theme.spacing(2)})`,
+        color: theme.palette.text.secondary,
+        overflowWrap: "anywhere",
+    },
+    "& .VireoHistoryEntry-valueBlock": { minWidth: 0 },
+    '& .VireoHistoryEntry-valueBlock[data-placement="previous"]': { gridColumn: 3 },
+    '& .VireoHistoryEntry-valueBlock[data-placement="current"]': { gridColumn: 5 },
+    '& .VireoHistoryEntry-fieldRow[data-status="unchanged"] .VireoHistoryEntry-valueBlock[data-placement="current"]': {
+        gridColumn: "3 / 6",
+    },
+    "& .VireoHistoryEntry-mobileValueLabel": { display: "none" },
+    "& .VireoHistoryEntry-visuallyHidden": {
+        position: "absolute",
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clip: "rect(0 0 0 0)",
+        whiteSpace: "nowrap",
+        border: 0,
+    },
+    "& .VireoHistoryEntry-valueContent": {
+        display: "-webkit-box",
+        minWidth: 0,
+        overflow: "hidden",
+        WebkitBoxOrient: "vertical",
+        WebkitLineClamp: 3,
+        overflowWrap: "anywhere",
+        whiteSpace: "normal",
+    },
+    "& .VireoHistoryEntry-valueContent[data-expanded]": {
+        display: "block",
+        overflow: "visible",
+        WebkitLineClamp: "unset",
+    },
+    "& .VireoHistoryEntry-valueContent[data-removed]": {
+        color: theme.palette.text.secondary,
+        textDecoration: "line-through",
+    },
+    "& .VireoHistoryEntry-arrow": { color: theme.palette.text.disabled, textAlign: "center" },
+    "& .VireoHistoryEntry-valueToggle": {
+        gridColumn: "3 / 6",
+        justifySelf: "start",
+        minHeight: 28,
+        paddingInline: 0,
+    },
+    "& .VireoHistoryEntry-fieldRow[data-expanded] .VireoHistoryEntry-valueBlock": {
+        gridColumn: "3 / 6",
+        display: "grid",
+        gridTemplateColumns: "88px minmax(0, 1fr)",
+        gap: theme.spacing(1),
+        paddingBlock: theme.spacing(0.5),
+    },
+    "& .VireoHistoryEntry-fieldRow[data-expanded] .VireoHistoryEntry-valueBlock[data-empty]": { display: "none" },
+    "& .VireoHistoryEntry-fieldRow[data-expanded] .VireoHistoryEntry-mobileValueLabel": {
+        display: "block",
+        color: theme.palette.text.secondary,
+        fontSize: theme.typography.pxToRem(12),
+    },
+    "& .VireoHistoryEntry-fieldRow[data-expanded] .VireoHistoryEntry-arrow": { display: "none" },
+    "& .VireoHistoryEntry-nestedGroup": {
+        position: "relative",
+        minWidth: 0,
+        borderTop: `1px solid ${alpha(theme.palette.divider, 0.7)}`,
+        backgroundColor: theme.palette.background.paper,
+    },
+    "& .VireoHistoryEntry-nestedHeader": {
+        minWidth: 0,
+        backgroundColor: alpha(theme.palette.text.primary, 0.055),
+    },
+    "& .VireoHistoryEntry-groupSummary": {
+        width: "100%",
+        minHeight: 42,
+        gap: theme.spacing(0.5),
+        padding: theme.spacing(0.75, 1),
+        paddingInlineStart: `calc(-13px + min(var(--VireoHistoryEntry-depth, 0), 4) * 25px)`,
+        "&:hover": {
+            backgroundColor: alpha(theme.palette.text.primary, 0.04),
+        },
+    },
+    "& .VireoHistoryEntry-groupCount": {
+        flex: "0 0 auto",
+        marginInlineStart: "auto",
+        color: theme.palette.text.secondary,
+        fontSize: theme.typography.pxToRem(12.5),
+    },
+    "& .VireoHistoryEntry-groupChildren": {
+        position: "relative",
+        minWidth: 0,
+    },
+    "& .VireoHistoryEntry-groupChildren > .VireoHistoryEntry-fieldRow, & .VireoHistoryEntry-groupChildren > .VireoHistoryEntry-nestedGroup": {
+        position: "relative",
+        "&::before": {
+            content: '""',
+            position: "absolute",
+            zIndex: 1,
+            insetBlock: 0,
+            insetInlineStart: `calc(22px + var(--VireoHistoryEntry-connectorDepth, 0) * 25px)`,
+            borderInlineStart: `1px solid ${alpha(theme.palette.text.secondary, 0.38)}`,
+            pointerEvents: "none",
+        },
+        "&:last-child::before": {
+            insetBlockEnd: "auto",
+        },
+        "&::after": {
+            content: '""',
+            position: "absolute",
+            zIndex: 1,
+            insetInlineStart: `calc(22px + var(--VireoHistoryEntry-connectorDepth, 0) * 25px)`,
+            borderBlockStart: `1px solid ${alpha(theme.palette.text.secondary, 0.38)}`,
+            pointerEvents: "none",
+        },
+    },
+    "& .VireoHistoryEntry-groupChildren > .VireoHistoryEntry-fieldRow": {
+        "&:first-of-type::before": { insetBlockStart: -12 },
+        "&:last-child::before": { blockSize: 18 },
+        "&:first-of-type:last-child::before": { blockSize: 30 },
+        "&::after": { insetBlockStart: 18, inlineSize: 10 },
+        "& .VireoHistoryEntry-statusCell": {
+            paddingInlineStart: `calc(3px + var(--VireoHistoryEntry-depth, 0) * 25px)`,
+        },
+        "& .VireoHistoryEntry-fieldLabel": {
+            paddingInlineStart: `calc(1px + var(--VireoHistoryEntry-depth, 0) * 25px)`,
+        },
+    },
+    "& .VireoHistoryEntry-groupChildren > .VireoHistoryEntry-nestedGroup": {
+        "&:first-of-type::before": { insetBlockStart: -12 },
+        "&:last-child::before": { blockSize: 21 },
+        "&:first-of-type:last-child::before": { blockSize: 33 },
+        "&::after": { insetBlockStart: 21, inlineSize: 10 },
+    },
+    "& .VireoHistoryEntry-groupChildren .VireoHistoryEntry-statusBadge, & .VireoHistoryEntry-groupChildren .VireoHistoryEntry-summaryChevron": {
+        position: "relative",
+        zIndex: 2,
+    },
+    "@container (max-width: 679px)": {
+        "& .VireoHistoryEntry-rootHeader": { display: "grid", minHeight: 56 },
+        "& .VireoHistoryEntry-rootSummaryButton": { minHeight: 56, padding: theme.spacing(1) },
+        "& .VireoHistoryEntry-unchangedAction": {
+            justifySelf: "start",
+            margin: theme.spacing(0, 1, 1),
+            minHeight: 44,
+        },
+        "& .VireoHistoryEntry-columnHeadings": { display: "none" },
+        "& .VireoHistoryEntry-fieldRow": {
+            gridTemplateColumns: "32px minmax(0, 1fr)",
+            gap: theme.spacing(0.5, 1),
+            padding: theme.spacing(1.25, 1.5),
+        },
+        "& .VireoHistoryEntry-statusCell": {
+            gridColumn: 1,
+            paddingInlineStart: 0,
+        },
+        "& .VireoHistoryEntry-fieldLabel": {
+            gridColumn: 2,
+            alignSelf: "center",
+            paddingInlineStart: 0,
+            color: theme.palette.text.primary,
+            fontWeight: theme.typography.fontWeightMedium,
+        },
+        "& .VireoHistoryEntry-valueBlock": {
+            gridColumn: "1 / -1",
+            display: "grid",
+            gap: theme.spacing(0.25),
+            paddingInlineStart: theme.spacing(5),
+        },
+        "& .VireoHistoryEntry-fieldRow[data-status] .VireoHistoryEntry-valueBlock[data-placement]": {
+            gridColumn: "1 / -1",
+        },
+        "& .VireoHistoryEntry-valueBlock[data-empty]": { display: "none" },
+        "& .VireoHistoryEntry-mobileValueLabel": {
+            display: "block",
+            color: theme.palette.text.secondary,
+            fontSize: theme.typography.pxToRem(12.5),
+        },
+        "& .VireoHistoryEntry-valueContent": { WebkitLineClamp: 4 },
+        "& .VireoHistoryEntry-arrow": { display: "none" },
+        "& .VireoHistoryEntry-valueToggle": {
+            gridColumn: "1 / -1",
+            justifySelf: "start",
+            minHeight: 44,
+            marginInlineStart: theme.spacing(4),
+        },
+        "& .VireoHistoryEntry-fieldRow[data-expanded] .VireoHistoryEntry-valueBlock": {
+            gridColumn: "1 / -1",
+            display: "grid",
+            gridTemplateColumns: "1fr",
+            paddingInlineStart: theme.spacing(5),
+        },
+        "& .VireoHistoryEntry-groupSummary": {
+            minHeight: 48,
+            paddingInlineStart: `calc(-13px + min(var(--VireoHistoryEntry-depth, 0), 4) * 25px)`,
+        },
+        "& .VireoHistoryEntry-groupChildren > .VireoHistoryEntry-fieldRow, & .VireoHistoryEntry-groupChildren > .VireoHistoryEntry-nestedGroup": {
+            "&::before, &::after": {
+                insetInlineStart: `calc(22px + var(--VireoHistoryEntry-connectorDepth, 0) * 25px)`,
+            },
+        },
+        "& .VireoHistoryEntry-groupChildren > .VireoHistoryEntry-fieldRow": {
+            "&:first-of-type::before": { insetBlockStart: -14 },
+            "&:last-child::before": { blockSize: 24 },
+            "&:first-of-type:last-child::before": { blockSize: 38 },
+            "&::after": { insetBlockStart: 24, inlineSize: 10 },
+            "& .VireoHistoryEntry-statusCell": {
+                paddingInlineStart: `calc(-1px + var(--VireoHistoryEntry-depth, 0) * 25px)`,
+            },
+            "& .VireoHistoryEntry-fieldLabel": {
+                paddingInlineStart: `calc(-11px + var(--VireoHistoryEntry-depth, 0) * 25px)`,
+            },
+            "& .VireoHistoryEntry-valueBlock": {
+                paddingInlineStart: `calc(29px + var(--VireoHistoryEntry-depth, 0) * 25px)`,
+            },
+            "& .VireoHistoryEntry-valueToggle": {
+                marginInlineStart: `calc(29px + var(--VireoHistoryEntry-depth, 0) * 25px)`,
+            },
+        },
+        "& .VireoHistoryEntry-groupChildren > .VireoHistoryEntry-nestedGroup": {
+            "&:first-of-type::before": { insetBlockStart: -14 },
+            "&:last-child::before": { blockSize: 24 },
+            "&:first-of-type:last-child::before": { blockSize: 38 },
+            "&::after": { insetBlockStart: 24, inlineSize: 10 },
+        },
+    },
+    "@media (prefers-reduced-motion: reduce)": {
+        "& .VireoHistoryEntry-summaryChevron, & .VireoHistoryEntry-rootSummaryButton, & .VireoHistoryEntry-groupSummary": {
+            transition: "none",
+        },
+    },
+}));

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/VireoHistoryEntry.types.d.ts

@@ -0,0 +1,92 @@
+import type { VireoDataAttributeValue, VireoThemeComponent } from "../../../../../core/public.js";
+import type { BoxProps } from "@mui/material";
+import type { CreateSlotsAndSlotProps, SlotProps } from "@mui/material/utils";
+import type { HistoryDefinition } from "@vireocodedev/history";
+import type React from "react";
+import { type VireoHistoryEntryClasses, type VireoHistoryEntryClassKey } from "./VireoHistoryEntry.classes.js";
+import type { VIREO_HISTORY_ENTRY_NAME, VireoHistoryEntrySlotName } from "./VireoHistoryEntry.identity.js";
+export type VireoHistoryEntryLabels = {
+    expandSection: string;
+    collapseSection: string;
+    showUnchanged: string;
+    hideUnchanged: string;
+    showMore: string;
+    showLess: string;
+    added: string;
+    removed: string;
+    updated: string;
+    moved: string;
+    unchanged: string;
+    field: string;
+    previous: string;
+    current: string;
+    value: string;
+    notPresent: string;
+    changes: (count: number) => React.ReactNode;
+};
+export type VireoHistoryEntryOwnerState = {
+    defaultExpandedDepth: number;
+    defaultShowUnchanged: boolean;
+    expanded: boolean;
+    hasUnchanged: boolean;
+    hasRootMeta: boolean;
+    loading: boolean;
+    showRootEntityLabel: boolean;
+};
+export interface VireoHistoryEntryRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+/** Replaceable semantic regions exposed by {@link VireoHistoryEntry}. */
+export type VireoHistoryEntrySlots = {
+    [TSlotName in VireoHistoryEntrySlotName]: React.ElementType;
+};
+/** Slot props exposed by {@link VireoHistoryEntry}. */
+export type VireoHistoryEntrySlotsAndSlotProps = CreateSlotsAndSlotProps<VireoHistoryEntrySlots, {
+    /** @default 'div' */
+    root: SlotProps<"div", VireoHistoryEntryRootSlotPropsOverrides, VireoHistoryEntryOwnerState>;
+}>;
+/** Props owned by {@link VireoHistoryEntry}. */
+export type VireoHistoryEntrySnapshot<TDefinition> = TDefinition extends HistoryDefinition<infer TEntity> ? TEntity : unknown;
+export type VireoHistoryEntryOwnProps<TEntity extends object = Record<string, unknown>> = VireoHistoryEntrySlotsAndSlotProps & {
+    /** Typed history definition used to validate, render, and diff both snapshots. */
+    definition: HistoryDefinition<TEntity>;
+    /** Content rendered for nullish or otherwise empty field values. */
+    emptyValue?: React.ReactNode;
+    /** Metadata displayed beside the root expansion control. */
+    rootMeta?: React.ReactNode;
+    /** Displays the root definition label and rendered entity identity. @default true */
+    showRootEntityLabel?: boolean;
+    /** Initially includes unchanged fields in the rendered entry. @default false */
+    defaultShowUnchanged?: boolean;
+    /** Deepest group level expanded initially. The root group is depth 1. @default 3 */
+    defaultExpandedDepth?: number;
+    /** Override the default English interaction and accessibility labels. */
+    labels?: Partial<VireoHistoryEntryLabels>;
+    /** Override or extend the utility classes applied to each slot. */
+    classes?: Partial<VireoHistoryEntryClasses>;
+};
+/** Loaded snapshot or boundary-coordinated loading state rendered by VireoHistoryEntry. */
+export type VireoHistoryEntryContentProps<TEntity extends object> = {
+    /** Renders the real entry anatomy with silent skeleton leaves. */
+    loading: true;
+    /** Visibility supplied by the owning VireoLoadingRegion after its reveal delay. */
+    loadingVisible: boolean;
+    current?: never;
+    previous?: never;
+} | {
+    loading?: false;
+    loadingVisible?: never;
+    /** Snapshot before the recorded change. Use `null` for a newly added entity. */
+    previous: NoInfer<TEntity> | null;
+    /** Snapshot after the recorded change. Use `null` for a removed entity. */
+    current: NoInfer<TEntity> | null;
+};
+/** Props VireoHistoryEntry inherits from its default root after excluding component-owned props. */
+export type VireoHistoryEntryInheritedProps = Omit<BoxProps<"div">, "children" | "component">;
+/** Props accepted by {@link VireoHistoryEntry}. */
+export type VireoHistoryEntryProps<TEntity extends object = Record<string, unknown>> = VireoHistoryEntryOwnProps<TEntity> & VireoHistoryEntryContentProps<TEntity> & VireoHistoryEntryInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_HISTORY_ENTRY_NAME]?: VireoThemeComponent<VireoHistoryEntryProps, VireoHistoryEntryClassKey, VireoHistoryEntryOwnerState, Theme>;
+    }
+}

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/VireoHistoryEntry.types.js

@@ -0,0 +1 @@
+export {};

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./VireoHistoryEntry.js";
+export * from "./VireoHistoryEntry.classes.js";
+export * from "./VireoHistoryEntry.types.js";

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/index.js

@@ -0,0 +1,3 @@
+export * from "./VireoHistoryEntry.js";
+export * from "./VireoHistoryEntry.classes.js";
+export * from "./VireoHistoryEntry.types.js";

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryEntryLoadingView/HistoryEntryLoadingView.d.ts

@@ -0,0 +1,5 @@
+import type { VireoHistoryEntryLabels } from "../../../../../../../../capabilities/history/components/data-display/VireoHistoryEntry/VireoHistoryEntry.types.js";
+export declare function HistoryEntryLoadingView({ labels, visible }: {
+    labels: VireoHistoryEntryLabels;
+    visible: boolean;
+}): import("react").JSX.Element;

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryEntryLoadingView/HistoryEntryLoadingView.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { VireoSkeleton } from "../../../../../../../../core/public.js";
+function LoadingLine({ visible, width }) {
+    return (_jsx(VireoSkeleton, { height: 16, variant: "rounded", width: width, sx: { visibility: visible ? "visible" : "hidden" } }));
+}
+function LoadingRow({ index, visible }) {
+    return (_jsxs("div", { "aria-hidden": "true", className: "VireoHistoryEntry-fieldRow", "data-history-entry-loading-row": index, "data-status": "updated", children: [_jsx("div", { className: "VireoHistoryEntry-statusCell", children: _jsx(VireoSkeleton, { height: 22, variant: "circular", width: 22, sx: { visibility: visible ? "visible" : "hidden" } }) }), _jsx("div", { className: "VireoHistoryEntry-fieldLabel", children: _jsx(LoadingLine, { visible: visible, width: index === 0 ? "58%" : "72%" }) }), _jsx("div", { className: "VireoHistoryEntry-valueBlock", "data-placement": "previous", children: _jsx(LoadingLine, { visible: visible, width: index === 0 ? "76%" : "62%" }) }), _jsx("span", { className: "VireoHistoryEntry-arrow", children: "\u2192" }), _jsx("div", { className: "VireoHistoryEntry-valueBlock", "data-placement": "current", children: _jsx(LoadingLine, { visible: visible, width: index === 0 ? "64%" : "84%" }) })] }));
+}
+export function HistoryEntryLoadingView({ labels, visible }) {
+    return (_jsxs("div", { className: "VireoHistoryEntry-rootGroup", "data-expanded": true, "data-history-entry-loading": true, children: [_jsx("div", { className: "VireoHistoryEntry-rootHeader", children: _jsxs("div", { className: "VireoHistoryEntry-rootSummaryButton", "aria-hidden": "true", children: [_jsx(VireoSkeleton, { height: 22, variant: "circular", width: 22, sx: { flex: "0 0 auto", visibility: visible ? "visible" : "hidden" } }), _jsxs("span", { className: "VireoHistoryEntry-summaryText", children: [_jsx(LoadingLine, { visible: visible, width: 180 }), _jsx(LoadingLine, { visible: visible, width: 240 })] })] }) }), _jsxs("div", { className: "VireoHistoryEntry-expandedBody", children: [_jsxs("div", { className: "VireoHistoryEntry-columnHeadings", "aria-hidden": "true", children: [_jsx("span", { children: labels.field }), _jsx("span", { children: labels.previous }), _jsx("span", { children: labels.current })] }), _jsx(LoadingRow, { index: 0, visible: visible }), _jsx(LoadingRow, { index: 1, visible: visible })] })] }));
+}

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryEntryLoadingView/index.d.ts

@@ -0,0 +1 @@
+export * from "./HistoryEntryLoadingView.js";

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryEntryLoadingView/index.js

@@ -0,0 +1 @@
+export * from "./HistoryEntryLoadingView.js";

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryFieldRowView/HistoryFieldRowView.d.ts

@@ -0,0 +1,9 @@
+import type { VireoHistoryEntryLabels } from "../../../../../../../../capabilities/history/components/data-display/VireoHistoryEntry/VireoHistoryEntry.types.js";
+import type { HistoryFieldRow } from "@vireocodedev/history";
+import React from "react";
+export declare function HistoryFieldRowView({ depth, emptyValue, labels, row, }: {
+    depth: number;
+    emptyValue?: React.ReactNode;
+    labels: VireoHistoryEntryLabels;
+    row: HistoryFieldRow;
+}): React.ReactElement;

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryFieldRowView/HistoryFieldRowView.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HistoryStatusBadge, } from "../../../../../../../../capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryStatusBadge/index.js";
+import { HistoryValueContent } from "../../../../../../../../capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryValueContent/HistoryValueContent.js";
+import { Button } from "@mui/material";
+import { getHistoryPathKey } from "../../../../../../../../capabilities/history/components/data-display/VireoHistoryEntry/internal/utils/getHistoryPathKey.js";
+import React from "react";
+function getHistoryStatus(row) {
+    return row.type;
+}
+function HistoryValueBlock({ children, empty = false, emptyValue, expanded, label, notPresentLabel, onOverflowChange, placement, removed = false, }) {
+    return (_jsxs("div", { className: "VireoHistoryEntry-valueBlock", "data-empty": (empty && emptyValue == null) || undefined, "data-placement": placement, "data-removed": removed || undefined, children: [_jsx("span", { className: "VireoHistoryEntry-mobileValueLabel", children: label }), empty && emptyValue == null ? (_jsxs("span", { className: "VireoHistoryEntry-visuallyHidden", children: [label, ": ", notPresentLabel] })) : empty ? (_jsx("span", { className: "VireoHistoryEntry-emptyValue", children: emptyValue })) : (_jsx(HistoryValueContent, { expanded: expanded, onOverflowChange: onOverflowChange, removed: removed, children: children }))] }));
+}
+export function HistoryFieldRowView({ depth, emptyValue, labels, row, }) {
+    const [expanded, setExpanded] = React.useState(false);
+    const [previousOverflowing, setPreviousOverflowing] = React.useState(false);
+    const [currentOverflowing, setCurrentOverflowing] = React.useState(false);
+    const rowKey = `${getHistoryPathKey(row.path)}:${row.type}`;
+    React.useEffect(() => {
+        setExpanded(false);
+        setPreviousOverflowing(false);
+        setCurrentOverflowing(false);
+    }, [rowKey]);
+    const status = getHistoryStatus(row);
+    const hasPrevious = row.type === "removed" || row.type === "updated" || row.type === "moved";
+    const hasCurrent = row.type !== "removed";
+    const showsComparison = row.type === "updated" || row.type === "moved";
+    const currentLabel = row.type === "unchanged" ? labels.value : labels.current;
+    const expandable = previousOverflowing || currentOverflowing;
+    const depthStyle = { "--VireoHistoryEntry-depth": Math.min(depth, 4) };
+    return (_jsxs("div", { className: "VireoHistoryEntry-fieldRow", "data-expanded": expanded || undefined, "data-status": status, role: "group", "aria-label": `${row.label}: ${labels[status]}`, style: depthStyle, children: [_jsx("div", { className: "VireoHistoryEntry-statusCell", children: _jsx(HistoryStatusBadge, { status: status, labels: labels }) }), _jsx("div", { className: "VireoHistoryEntry-fieldLabel", children: row.label }), row.type === "unchanged" ? null : (_jsx(HistoryValueBlock, { empty: !hasPrevious, emptyValue: emptyValue, expanded: expanded, label: labels.previous, notPresentLabel: labels.notPresent, onOverflowChange: setPreviousOverflowing, placement: "previous", removed: row.type === "removed", children: hasPrevious ? row.previous.formatted : null })), showsComparison ? (_jsx("span", { className: "VireoHistoryEntry-arrow", "aria-hidden": "true", children: "\u2192" })) : null, _jsx(HistoryValueBlock, { empty: !hasCurrent, emptyValue: emptyValue, expanded: expanded, label: currentLabel, notPresentLabel: labels.notPresent, onOverflowChange: setCurrentOverflowing, placement: "current", children: hasCurrent ? row.current.formatted : null }), expandable || expanded ? (_jsx(Button, { className: "VireoHistoryEntry-valueToggle", type: "button", size: "small", "aria-expanded": expanded, onClick: () => setExpanded(current => !current), children: expanded ? labels.showLess : labels.showMore })) : null] }));
+}

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryFieldRowView/index.d.ts

@@ -0,0 +1 @@
+export { HistoryFieldRowView } from "./HistoryFieldRowView.js";

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryFieldRowView/index.js

@@ -0,0 +1 @@
+export { HistoryFieldRowView } from "./HistoryFieldRowView.js";

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryGroupView/HistoryGroupView.d.ts

@@ -0,0 +1,11 @@
+import type { HistoryEntryDisclosure } from "../../../../../../../../capabilities/history/components/data-display/VireoHistoryEntry/internal/types/historyEntry.types.js";
+import type { HistoryGroupNode } from "@vireocodedev/history";
+export declare function HistoryGroupView({ depth, disclosure, emptyValue, group, hasUnchanged, rootMeta, showRootEntityLabel, }: {
+    depth: number;
+    disclosure: HistoryEntryDisclosure;
+    emptyValue?: React.ReactNode;
+    group: HistoryGroupNode;
+    hasUnchanged: boolean;
+    rootMeta?: React.ReactNode;
+    showRootEntityLabel: boolean;
+}): React.ReactElement | null;

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryGroupView/HistoryGroupView.js

@@ -0,0 +1,52 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HistoryFieldRowView } from "../../../../../../../../capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryFieldRowView/HistoryFieldRowView.js";
+import { HistoryStatusBadge, } from "../../../../../../../../capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryStatusBadge/index.js";
+import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
+import { Button, ButtonBase, Collapse } from "@mui/material";
+import { getHistoryPathKey } from "../../../../../../../../capabilities/history/components/data-display/VireoHistoryEntry/internal/utils/getHistoryPathKey.js";
+function isVisible(node, showUnchanged) {
+    if (node.type === "group") {
+        if (node.children.length === 0)
+            return node.changeType !== "unchanged";
+        return node.children.some(child => isVisible(child, showUnchanged));
+    }
+    return showUnchanged || node.type !== "unchanged";
+}
+function countChangedFields(nodes) {
+    return nodes.reduce((count, node) => count + (node.type === "group" ? countChangedFields(node.children) : node.type === "unchanged" ? 0 : 1), 0);
+}
+function getGroupStatus(group) {
+    const statuses = new Set();
+    const collectStatuses = (nodes) => {
+        nodes.forEach(node => {
+            if (node.type === "group") {
+                collectStatuses(node.children);
+            }
+            else {
+                statuses.add(node.type);
+            }
+        });
+    };
+    collectStatuses(group.children);
+    if (statuses.size === 0)
+        return group.changeType;
+    if (statuses.size === 1)
+        return statuses.values().next().value ?? "updated";
+    return "updated";
+}
+export function HistoryGroupView({ depth, disclosure, emptyValue, group, hasUnchanged, rootMeta, showRootEntityLabel, }) {
+    const isRoot = depth === 1;
+    const expanded = disclosure.isExpanded(group.path, depth);
+    const visibleChildren = group.children.filter(child => isVisible(child, disclosure.showUnchanged));
+    const hasVisibleChildren = visibleChildren.length > 0;
+    const status = getGroupStatus(group);
+    const count = hasVisibleChildren ? countChangedFields(group.children) : group.changeType === "unchanged" ? 0 : 1;
+    if (!isRoot && !hasVisibleChildren && group.changeType === "unchanged")
+        return null;
+    const summary = (_jsxs(_Fragment, { children: [hasVisibleChildren ? (_jsx(KeyboardArrowDownRoundedIcon, { className: "VireoHistoryEntry-summaryChevron", fontSize: "small" })) : null, _jsx(HistoryStatusBadge, { focusable: false, status: status, labels: disclosure.labels }), _jsxs("span", { className: "VireoHistoryEntry-summaryText", children: [_jsxs("span", { className: "VireoHistoryEntry-summaryPrimary", children: [isRoot && !showRootEntityLabel ? (rootMeta ?? group.label) : group.label, (!isRoot || showRootEntityLabel) && group.value != null && group.value.formatted !== group.label ? (_jsxs("span", { className: "VireoHistoryEntry-groupIdentity", children: [" \u00B7 ", group.value.formatted] })) : null] }), isRoot && showRootEntityLabel && rootMeta != null ? (_jsx("span", { className: "VireoHistoryEntry-summaryMeta", children: rootMeta })) : null] }), !isRoot ? _jsx("span", { className: "VireoHistoryEntry-groupCount", children: disclosure.labels.changes(count) }) : null] }));
+    return (_jsxs("div", { className: isRoot ? "VireoHistoryEntry-rootGroup" : "VireoHistoryEntry-nestedGroup", "data-depth": depth, "data-expanded": expanded || undefined, style: { "--VireoHistoryEntry-depth": Math.min(depth - 1, 4) }, role: isRoot ? undefined : "group", "aria-level": isRoot ? undefined : depth, children: [_jsxs("div", { className: isRoot ? "VireoHistoryEntry-rootHeader" : "VireoHistoryEntry-nestedHeader", children: [hasVisibleChildren ? (_jsx(ButtonBase, { className: isRoot ? "VireoHistoryEntry-rootSummaryButton" : "VireoHistoryEntry-groupSummary", "aria-expanded": expanded, "aria-label": `${expanded ? disclosure.labels.collapseSection : disclosure.labels.expandSection} ${group.label}`, onClick: () => disclosure.onToggleExpanded(group.path, depth), children: summary })) : (_jsx("div", { className: isRoot ? "VireoHistoryEntry-rootSummaryButton" : "VireoHistoryEntry-groupSummary", children: summary })), isRoot && expanded && hasUnchanged ? (_jsx(Button, { className: "VireoHistoryEntry-unchangedAction", size: "small", type: "button", onClick: disclosure.onToggleShowUnchanged, children: disclosure.showUnchanged ? disclosure.labels.hideUnchanged : disclosure.labels.showUnchanged })) : null] }), hasVisibleChildren ? (_jsx(Collapse, { in: expanded, timeout: 150, unmountOnExit: true, children: _jsxs("div", { className: isRoot ? "VireoHistoryEntry-expandedBody" : "VireoHistoryEntry-groupChildren", style: isRoot
+                        ? undefined
+                        : {
+                            "--VireoHistoryEntry-connectorDepth": Math.min(Math.max(depth - 2, 0), 3),
+                        }, children: [isRoot ? (_jsxs("div", { className: "VireoHistoryEntry-columnHeadings", "aria-hidden": "true", children: [_jsx("span", { children: disclosure.labels.field }), _jsx("span", { children: disclosure.labels.previous }), _jsx("span", { children: disclosure.labels.current })] })) : null, visibleChildren.map(child => child.type === "group" ? (_jsx(HistoryGroupView, { depth: depth + 1, disclosure: disclosure, emptyValue: emptyValue, group: child, hasUnchanged: hasUnchanged, showRootEntityLabel: showRootEntityLabel }, getHistoryPathKey(child.path))) : (_jsx(HistoryFieldRowView, { depth: depth - 1, emptyValue: emptyValue, labels: disclosure.labels, row: child }, `${getHistoryPathKey(child.path)}:${child.type}`)))] }) })) : null] }));
+}

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryGroupView/index.d.ts

@@ -0,0 +1 @@
+export { HistoryGroupView } from "./HistoryGroupView.js";