@shopify/shop-minis-react 0.2.5 → 0.2.7

package/src/components/commerce/product-link.tsx

@@ -194,13 +194,21 @@ function ProductLinkRating({className, ...props}: React.ComponentProps<'div'>) {
 
 function ProductLinkActions({
   className,
+  hideFavoriteAction = false,
   onPress,
   filled = false,
+  customAction,
   ...props
 }: React.ComponentProps<typeof CardAction> & {
+  hideFavoriteAction?: boolean
   onPress?: () => void
   filled?: boolean
+  customAction?: React.ReactNode
 }) {
+  const favoriteAction = hideFavoriteAction ? null : (
+    <FavoriteButton filled={filled} onClick={onPress} />
+  )
+
   return (
     <CardAction
       className={cn('flex-shrink-0 self-center px-0 py-0', className)}
@@ -215,23 +223,34 @@ function ProductLinkActions({
           scale: {type: 'tween', duration: 0.08, ease: 'easeInOut'},
         }}
       >
-        <FavoriteButton filled={filled} onClick={onPress} />
+        {customAction ? <>{customAction}</> : favoriteAction}
       </Touchable>
     </CardAction>
   )
 }
 
-export interface ProductLinkProps {
+export type ProductLinkProps = {
   product: Product
   hideFavoriteAction?: boolean
   onClick?: (product: Product) => void
-}
+} & (
+  | {
+      customAction?: never
+      onCustomActionClick?: never
+    }
+  | {
+      customAction: React.ReactNode
+      onCustomActionClick: () => void
+    }
+)
 
 // Composed ProductLink component
 function ProductLink({
   product,
   hideFavoriteAction = false,
   onClick,
+  customAction,
+  onCustomActionClick,
 }: ProductLinkProps) {
   const {navigateToProduct} = useShopNavigation()
   const {saveProduct, unsaveProduct} = useSavedProductsActions()
@@ -272,6 +291,11 @@ function ProductLink({
   }, [navigateToProduct, id, onClick, product])
 
   const handleActionPress = React.useCallback(async () => {
+    if (customAction || onCustomActionClick) {
+      onCustomActionClick?.()
+      return
+    }
+
     const previousState = isFavoritedLocal
 
     // Optimistic update
@@ -296,13 +320,15 @@ function ProductLink({
       setIsFavoritedLocal(previousState)
     }
   }, [
+    customAction,
+    onCustomActionClick,
     isFavoritedLocal,
+    unsaveProduct,
     id,
     shop.id,
     selectedVariant?.id,
     defaultVariantId,
     saveProduct,
-    unsaveProduct,
   ])
 
   return (
@@ -366,12 +392,12 @@ function ProductLink({
         </ProductLinkPrice>
       </ProductLinkInfo>
 
-      {hideFavoriteAction ? null : (
-        <ProductLinkActions
-          filled={isFavoritedLocal}
-          onPress={handleActionPress}
-        />
-      )}
+      <ProductLinkActions
+        filled={isFavoritedLocal}
+        onPress={handleActionPress}
+        customAction={customAction}
+        hideFavoriteAction={hideFavoriteAction}
+      />
     </ProductLinkRoot>
   )
 }

package/src/components/commerce/search.tsx

@@ -111,7 +111,7 @@ function SearchInput({
           data-testid="search-input"
           {...inputProps}
           className={cn(
-            `w-full flex overflow-hidden rounded-radius-28 border-none py-4 px-0 text-text placeholder:text-text placeholder:opacity-60`,
+            `w-full flex overflow-hidden rounded-radius-28 border-none shadow-none py-4 px-0 text-text placeholder:text-text placeholder:opacity-60`,
             className
           )}
         />

package/src/components/ui/drawer.tsx

@@ -44,9 +44,12 @@ function DrawerOverlay({
 
 function DrawerContent({
   className,
+  fullHeight = false,
   children,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+}: React.ComponentProps<typeof DrawerPrimitive.Content> & {
+  fullHeight?: boolean
+}) {
   return (
     // vaul's Portal type incorrectly excludes children
     <DrawerPortal {...({} as any)}>
@@ -55,10 +58,11 @@ function DrawerContent({
         data-slot="drawer-content"
         className={cn(
           'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
-          'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b',
-          'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t',
+          'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[100vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b',
+          'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[100vh] data-[vaul-drawer-direction=bottom]:rounded-t-[28px] data-[vaul-drawer-direction=bottom]:border-t',
           'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm',
           'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm',
+          fullHeight ? 'h-[100vh]' : '',
           className
         )}
         {...props}