@multiplatform.one/frappe-ui 7.34.4 → 7.35.0

package/dist/cjs/record/RecordPage.cjs

@@ -22,7 +22,8 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var RecordPage_exports = {};
 __export(RecordPage_exports, {
-  RecordPage: () => RecordPage
+  RecordPage: () => RecordPage,
+  RecordTopBar: () => RecordTopBar
 });
 module.exports = __toCommonJS(RecordPage_exports);
 var import_components = require("@multiplatform.one/components");
@@ -42,6 +43,47 @@ var import_RecordHero = require("./RecordHero.cjs");
 var import_RecordPager = require("./RecordPager.cjs");
 var import_RecordRows = require("./RecordRows.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
+function RecordTopBar({
+  listName,
+  onBack,
+  slug,
+  trailing
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+    alignItems: "center",
+    ...knobProps.gapSm,
+    paddingHorizontal: knobProps.gapSm.gap,
+    paddingVertical: "$1",
+    ...import_theme.hairline.bottom,
+    borderColor: "$borderColor",
+    testID: `${slug}-detail-header`,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      chromeless: true,
+      minHeight: knobProps.sizeToken,
+      onPress: onBack,
+      icon: import_react.CaretLeftIcon,
+      flexShrink: 1,
+      "aria-label": t("Back to {{title}}", {
+        title: listName
+      }),
+      testID: `${slug}-detail-back`,
+      children: listName
+    }), trailing ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+      alignItems: "center",
+      justifyContent: "flex-end",
+      gap: "$1",
+      flexGrow: 1,
+      flexShrink: 0,
+      children: trailing
+    }) : null]
+  });
+}
 function RecordPage({
   doc,
   linked,
@@ -71,9 +113,7 @@ function RecordPage({
   } = (0, import_theme.useResolvedKnobs)();
   const {
     knobProps: nested
-  } = (0, import_theme.useResolvedKnobs)({
-    compact: true
-  });
+  } = (0, import_theme.useResolvedKnobs)();
   const row = doc;
   const name = String(row.name ?? "");
   const {
@@ -105,26 +145,14 @@ function RecordPage({
       name: neighbor.name
     }))
   } : null;
-  const entries = history ? (0, import_recordData.recordHistory)(row).map(entry => entry.kind === "modified" ? {
-    id: `${name}-modified`,
-    type: "version",
-    author: entry.author,
-    timestamp: entry.timestamp
-  } : {
-    id: `${name}-created`,
-    type: "info",
-    author: entry.author,
-    content: t("Created this {{doctype}}", {
-      doctype
-    }),
-    timestamp: entry.timestamp
-  }) : [];
+  const entries = history ? (0, import_recordData.recordHistory)(row) : [];
   const drawSection = (section, index) => {
     if (section.kind === "bars") {
       const tableRows = Array.isArray(row[section.table]) ? row[section.table] : [];
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RecordBars.RecordBars, {
         rows: tableRows,
         section,
+        tint: tints[0],
         testID: `${slug}-${section.id}-chart`
       }, `bars-${section.id}`);
     }
@@ -137,7 +165,7 @@ function RecordPage({
         ...knobProps.gap,
         children: [section.description ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
           ...nested.label,
-          color: "$color10",
+          color: "$color11",
           children: section.description
         }) : null, rows]
       }, `rows-${index}`);
@@ -159,171 +187,178 @@ function RecordPage({
       icon: Icon ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(Icon, {
         size: 16
       }) : void 0,
-      badge: count > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Chip, {
-        size: "$2",
+      badge: count > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        ...nested.label,
+        color: "$color11",
         children: count
       }) : void 0,
       content: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
         ...knobProps.gapLg,
+        ...knobProps.panelPadding,
+        paddingBottom: 0,
         children: [index === 0 && quote ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Quote, {
           marginVertical: 0,
           cite: quote.cite,
           children: quote.text
         }) : null, tab.sections.map(drawSection), index === 0 && entries.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.PageSection, {
-          title: t("Record history"),
-          surface: true,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Timeline, {
-            entries,
-            labels: {
-              madeChanges: t("last updated this record")
-            }
+          title: t("History"),
+          divider: false,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RecordRows.RecordGroup, {
+            testID: `${slug}-history`,
+            children: entries.map(entry => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+              alignItems: "center",
+              ...knobProps.gap,
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Avatar, {
+                name: entry.author,
+                size: "$3"
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+                flex: 1,
+                minWidth: 0,
+                children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+                  ...nested.body,
+                  color: "$color",
+                  numberOfLines: 1,
+                  children: entry.kind === "created" ? t("Created by {{author}}", {
+                    author: entry.author
+                  }) : t("Updated by {{author}}", {
+                    author: entry.author
+                  })
+                }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+                  ...nested.label,
+                  color: "$color11",
+                  children: (0, import_theme.formatAbsoluteDateTime)(entry.timestamp)
+                })]
+              })]
+            }, entry.kind))
           })
         }) : null]
       })
     };
   });
-  const toolbar = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ScreenToolbar, {
-    leading: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-      outlined: true,
+  const menu = [...(canEdit ? [{
+    key: "edit",
+    label: t("Edit"),
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PencilSimpleIcon, {
+      size: 18
+    }),
+    onSelect: () => navigate((0, import_frappeNavigation.frappeRouteHref)(route, {
+      mode: "edit",
+      name
+    }))
+  }] : []), ...actions.map(action => {
+    const Icon = action.icon;
+    return {
+      key: action.testID ?? action.label,
+      label: action.label,
+      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Icon, {
+        size: 18
+      }),
+      onSelect: () => navigate(action.href(doc))
+    };
+  })];
+  const trailing = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [favorites ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      circular: true,
+      chromeless: true,
+      minWidth: knobProps.sizeToken,
       minHeight: knobProps.sizeToken,
-      onPress: () => navigate(route),
-      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ArrowLeftIcon, {
-        size: 16
+      onPress: () => toggle(name),
+      col: favorite ? "$red9" : "$color11",
+      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.HeartIcon, {
+        size: 24,
+        weight: favorite ? "fill" : "regular"
       }),
-      testID: `${slug}-detail-back`,
-      children: t("Back")
-    }),
-    trailing: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
-      ...knobProps.gap,
-      alignItems: "center",
-      children: [favorites || actions.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
-        ...knobProps.borderRadius,
-        backgroundColor: "$color2",
-        alignItems: "center",
-        children: [favorites ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Tooltip, {
-          content: favoriteLabel,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-            circular: true,
-            chromeless: true,
-            minWidth: knobProps.sizeToken,
-            minHeight: knobProps.sizeToken,
-            onPress: () => toggle(name),
-            col: favorite ? "$red9" : "$color10",
-            icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.HeartIcon, {
-              size: 22,
-              weight: favorite ? "fill" : "regular"
-            }),
-            "aria-label": favoriteLabel,
-            "aria-pressed": favorite,
-            render: "button",
-            type: "button",
-            testID: `${slug}-detail-favorite`
-          })
-        }) : null, actions.map(action => {
-          const Icon = action.icon;
-          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Tooltip, {
-            content: action.label,
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-              circular: true,
-              chromeless: true,
-              minWidth: knobProps.sizeToken,
-              minHeight: knobProps.sizeToken,
-              onPress: () => navigate(action.href(doc)),
-              col: "$color10",
-              icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Icon, {
-                size: 20
-              }),
-              "aria-label": action.label,
-              testID: action.testID
-            })
-          }, action.label);
-        })]
-      }) : null, canEdit ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-        theme: "accent",
+      "aria-label": favoriteLabel,
+      "aria-pressed": favorite,
+      render: "button",
+      type: "button",
+      testID: `${slug}-detail-favorite`
+    }) : null, menu.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu, {
+      items: menu,
+      placement: "bottom-end",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        circular: true,
+        chromeless: true,
+        minWidth: knobProps.sizeToken,
         minHeight: knobProps.sizeToken,
-        onPress: () => navigate((0, import_frappeNavigation.frappeRouteHref)(route, {
-          mode: "edit",
-          name
-        })),
-        testID: `${slug}-detail-edit`,
-        children: t("Edit")
-      }) : null]
-    })
+        col: "$color",
+        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.DotsThreeOutlineIcon, {
+          size: 22,
+          weight: "fill"
+        }),
+        "aria-label": t("More actions"),
+        testID: `${slug}-detail-more`
+      })
+    }) : null]
   });
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.Screen, {
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
-      gap: "$2",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Breadcrumbs, {
-        items: [{
-          label: listName,
-          href: route
-        }, {
-          label: code ? `${code} ${title}` : title
-        }],
-        onNavigate: href => navigate(href)
-      }), toolbar]
+    noPadding: true,
+    gap: 0,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(RecordTopBar, {
+      listName,
+      onBack: () => navigate(route),
+      slug,
+      trailing
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RecordHero.RecordHeroFrame, {
-      tint: tints[0],
+      tints,
       testID: `${slug}-detail-stage`,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_RecordHero.RecordHeroRow, {
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RecordHero.RecordHeroArtColumn, {
-          testID: `${slug}-hero-art`,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RecordGallery.RecordGallery, {
-            images,
-            slides,
-            alt: title,
-            tints
-          })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_RecordHero.RecordHeroIdentityColumn, {
-          testID: `${slug}-hero-identity`,
-          children: [code ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-            ...nested.label,
-            fontWeight: "700",
-            color: tints[0] ? `$${tints[0]}11` : "$color11",
-            letterSpacing: 1,
-            children: code
-          }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.PageHeader, {
-            heading: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.H1, {
-              margin: 0,
-              size: "$10",
-              "$max-sm": {
-                size: "$9"
-              },
-              children: title
-            }),
-            subtitle: look?.subtitle?.(doc) || void 0,
-            divider: false
-          }), values.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
-            gap: "$2",
-            flexWrap: "wrap",
-            children: values.map(value => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FacetBadge.FacetBadge, {
-              label: facet?.optionLabel?.(value) ?? value,
-              tint: facet?.tint?.(value)
-            }, value))
-          }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RecordHero.RecordVitals, {
-            tiles: metrics.map(metric => {
-              const value = (0, import_insightsRecord.metricValue)(doc, metric.field);
-              return {
-                id: metric.field,
-                label: metric.label,
-                value: metric.format ? metric.format(value) : String(value),
-                percent: metric.max ? Math.min(value / metric.max * 100, 100) : void 0
-              };
-            })
-          })]
-        })]
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        testID: `${slug}-hero-art`,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RecordGallery.RecordGallery, {
+          images,
+          slides,
+          alt: title
+        })
       })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_RecordHero.RecordHeroIdentityColumn, {
+      testID: `${slug}-hero-identity`,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+        gap: "$2",
+        alignItems: "center",
+        flexWrap: "wrap",
+        children: [code ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+          ...nested.label,
+          fontWeight: "700",
+          color: tints[0] ? `$${tints[0]}11` : "$color11",
+          children: code
+        }) : null, values.map(value => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FacetBadge.FacetBadge, {
+          label: facet?.optionLabel?.(value) ?? value,
+          tint: facet?.tint?.(value)
+        }, value))]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.H1, {
+        margin: 0,
+        size: "$10",
+        children: title
+      }), look?.subtitle?.(doc) ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        ...nested.body,
+        color: "$color11",
+        children: look.subtitle(doc)
+      }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RecordHero.RecordVitals, {
+        tiles: metrics.map(metric => {
+          const value = (0, import_insightsRecord.metricValue)(doc, metric.field);
+          return {
+            id: metric.field,
+            label: metric.label,
+            value: metric.format ? metric.format(value) : String(value)
+          };
+        })
+      })]
     }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
       ...knobProps.gapLg,
+      paddingTop: knobProps.panelPadding.padding,
       paddingBottom: "$6",
       children: [tabItems.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Tabs, {
         defaultValue: tabItems[0]?.value,
         lazyMount: true,
         items: tabItems
-      }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RecordPager.RecordPager, {
-        prev: pagerEntry(prev),
-        next: pagerEntry(next),
-        testID: slug
+      }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        ...knobProps.panelPadding,
+        paddingVertical: 0,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RecordPager.RecordPager, {
+          prev: pagerEntry(prev),
+          next: pagerEntry(next),
+          testID: slug
+        })
       })]
     })]
   });