@multiplatform.one/frappe-ui 7.37.0 → 7.38.0

package/src/record/RecordPager.tsx

@@ -1,6 +1,5 @@
-import { Avatar, Text, XStack, YStack } from "@multiplatform.one/components";
-import { Button } from "@multiplatform.one/forms";
-import { sizeRecipeEscape, useResolvedKnobs } from "@multiplatform.one/theme";
+import { Avatar, Text, XStack, YStack, isWeb, useTheme } from "@multiplatform.one/components";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { ArrowLeftIcon, ArrowRightIcon } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
 
@@ -21,8 +20,11 @@ function PagerButton({
   testID?: string;
 }) {
   const { t } = useTranslation();
-  const { knobProps: nested } = useResolvedKnobs();
+  const theme = useTheme();
+  const { knobProps, control } = useResolvedKnobs();
   const isPrev = direction === "prev";
+  const label = isPrev ? t("Previous") : t("Next");
+  const Arrow = isPrev ? ArrowLeftIcon : ArrowRightIcon;
   const avatar = (
     <Avatar
       src={entry.image}
@@ -32,39 +34,49 @@ function PagerButton({
     />
   );
   return (
-    <Button
-      outlined
-      minHeight={sizeRecipeEscape(
-        56,
-        "pager button: room for the neighbor's two-line label beside its avatar",
-      )}
-      flexShrink={1}
+    <YStack
+      {...(isWeb ? { render: <button type="button" /> } : {})}
+      role="button"
+      tabIndex={0}
+      aria-label={[label, entry.code, entry.title].filter(Boolean).join(" ")}
+      {...knobProps.inputSurface}
+      {...knobProps.containerRadius}
+      {...knobProps.panelPadding}
+      {...knobProps.gapSm}
+      backgroundColor="$background"
+      borderColor="$borderColor"
+      hoverStyle={control.hoverKnobProps}
+      pressStyle={control.pressKnobProps}
+      focusVisibleStyle={control.focusVisibleKnobProps}
+      flexGrow={1}
+      flexBasis={0}
       minWidth={0}
+      cursor="pointer"
       onPress={entry.onPress}
-      icon={isPrev ? <ArrowLeftIcon size={18} /> : undefined}
-      iconAfter={isPrev ? undefined : <ArrowRightIcon size={18} />}
       testID={testID}
     >
-      <XStack gap="$2" alignItems="center" flexShrink={1} minWidth={0}>
-        {isPrev ? avatar : null}
-        <YStack alignItems={isPrev ? "flex-start" : "flex-end"} flexShrink={1} minWidth={0}>
-          <Text {...nested.label} color="$color10" textTransform="uppercase" letterSpacing={1}>
-            {isPrev ? t("Previous") : t("Next")}
+      <XStack
+        {...knobProps.gapSm}
+        alignItems="center"
+        flexDirection={isPrev ? "row" : "row-reverse"}
+      >
+        <Arrow size={knobProps.controlIcon.width} color={theme.color11?.val} />
+        <Text {...knobProps.label} color="$color11" numberOfLines={1} flexShrink={1}>
+          {label}
+        </Text>
+      </XStack>
+      <XStack {...knobProps.gapSm} alignItems="center" flexWrap="wrap">
+        {avatar}
+        {entry.code ? (
+          <Text {...knobProps.label} color="$color11">
+            {entry.code}
           </Text>
-          <XStack gap="$1.5" alignItems="baseline" minWidth={0}>
-            {entry.code ? (
-              <Text {...nested.label} color="$color10">
-                {entry.code}
-              </Text>
-            ) : null}
-            <Text fontWeight="700" numberOfLines={1} flexShrink={1}>
-              {entry.title}
-            </Text>
-          </XStack>
-        </YStack>
-        {isPrev ? null : avatar}
+        ) : null}
       </XStack>
-    </Button>
+      <Text {...knobProps.body} fontWeight="700" textAlign="left">
+        {entry.title}
+      </Text>
+    </YStack>
   );
 }
 
@@ -81,16 +93,16 @@ export function RecordPager({
   const { knobProps } = useResolvedKnobs();
   if (!prev && !next) return null;
   return (
-    <XStack justifyContent="space-between" {...knobProps.gap} marginTop="$2">
+    <XStack {...knobProps.gap} marginTop="$2" alignItems="stretch">
       {prev ? (
         <PagerButton direction="prev" entry={prev} testID={testID && `${testID}-prev`} />
       ) : (
-        <YStack />
+        <YStack flexGrow={1} flexBasis={0} minWidth={0} />
       )}
       {next ? (
         <PagerButton direction="next" entry={next} testID={testID && `${testID}-next`} />
       ) : (
-        <YStack />
+        <YStack flexGrow={1} flexBasis={0} minWidth={0} />
       )}
     </XStack>
   );

package/types/record/RecordBars.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RecordBars.d.ts","sourceRoot":"","sources":["../../src/record/RecordBars.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAKhE;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,MAAM,GACP,EAAE;IACD,IAAI,EAAE,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IACzC,OAAO,EAAE,uBAAuB,CAAC;IACjC,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,2CAkGA"}
+{"version":3,"file":"RecordBars.d.ts","sourceRoot":"","sources":["../../src/record/RecordBars.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAKhE;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,MAAM,GACP,EAAE;IACD,IAAI,EAAE,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IACzC,OAAO,EAAE,uBAAuB,CAAC;IACjC,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,2CAqGA"}

package/types/record/RecordPager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RecordPager.d.ts","sourceRoot":"","sources":["../../src/record/RecordPager.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AA2DD,iFAAiF;AACjF,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,IAAI,EACJ,MAAM,GACP,EAAE;IACD,IAAI,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC9B,IAAI,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,kDAiBA"}
+{"version":3,"file":"RecordPager.d.ts","sourceRoot":"","sources":["../../src/record/RecordPager.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAwED,iFAAiF;AACjF,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,IAAI,EACJ,MAAM,GACP,EAAE;IACD,IAAI,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC9B,IAAI,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,kDAiBA"}