From 0df8eac67560611a5c18d5c8229d25e12f8e39c5 Mon Sep 17 00:00:00 2001
From: Rian Mandala <rian.putra01@gojek.com>
Date: Mon, 18 Nov 2024 18:06:33 +0700
Subject: [PATCH 1/3] feat: expose wrapper radio item level

---
 lerna.json                                    |  2 +-
 packages/apsara-icons/package.json            |  2 +-
 packages/apsara-ui/package.json               |  2 +-
 packages/apsara-ui/src/Radio/Radio.styles.tsx |  1 -
 packages/apsara-ui/src/Radio/Radio.tsx        | 55 +++++++++++++------
 packages/apsara-ui/src/Tooltip/Tooltip.tsx    |  3 +-
 6 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/lerna.json b/lerna.json
index 20ff2b261..c3c06def7 100644
--- a/lerna.json
+++ b/lerna.json
@@ -2,7 +2,7 @@
     "packages": ["packages/*"],
     "npmClient": "yarn",
     "useWorkspaces": true,
-    "version": "0.11.1",
+    "version": "0.11.2",
     "command": {
         "version": {
             "message": "chore(release): publish %s"
diff --git a/packages/apsara-icons/package.json b/packages/apsara-icons/package.json
index 177891cd9..7d5910b36 100644
--- a/packages/apsara-icons/package.json
+++ b/packages/apsara-icons/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@goto-company/icons",
-    "version": "0.11.1",
+    "version": "0.11.2",
     "description": "Apsara icons",
     "scripts": {
         "build": "node scripts/build.js",
diff --git a/packages/apsara-ui/package.json b/packages/apsara-ui/package.json
index ae465ed4e..2afbb2304 100644
--- a/packages/apsara-ui/package.json
+++ b/packages/apsara-ui/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@goto-company/apsara",
-    "version": "0.11.1",
+    "version": "0.11.2",
     "description": "A list of base components for apsara",
     "author": "Praveen Yadav <praveen.yadav@go-jek.com>",
     "license": "Apache-2.0",
diff --git a/packages/apsara-ui/src/Radio/Radio.styles.tsx b/packages/apsara-ui/src/Radio/Radio.styles.tsx
index 566e7fa87..b873e72e5 100644
--- a/packages/apsara-ui/src/Radio/Radio.styles.tsx
+++ b/packages/apsara-ui/src/Radio/Radio.styles.tsx
@@ -53,7 +53,6 @@ export const Label = styled("label")`
     color: ${({ theme }) => theme?.radio?.label};
     margin: ${({ dir }) => dir === "rtl" && "8px"};
     font-size: 15px;
-    line-height: 1px;
     user-select: none;
     padding-left: 15px;
 `;
diff --git a/packages/apsara-ui/src/Radio/Radio.tsx b/packages/apsara-ui/src/Radio/Radio.tsx
index 2c2961f63..a59b296e2 100644
--- a/packages/apsara-ui/src/Radio/Radio.tsx
+++ b/packages/apsara-ui/src/Radio/Radio.tsx
@@ -1,14 +1,19 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, ReactNode } from "react";
 import { RadioGroup, StyledRadioItem, StyledIndicator, Label, Flex, StyledRadioButton } from "./Radio.styles";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { generateRandomId } from "../helper";
 import { PREFIX_CLS } from "./constants";
 
+interface WrapperProps {
+    children: ReactNode;
+}
+
 export type RadioItem = {
     label?: string;
     value: string;
     disabled?: boolean;
     required?: boolean;
+    wrapper?: ({ children }: WrapperProps) => ReactNode;
 };
 
 type RadioButtonType = {
@@ -40,6 +45,10 @@ export type RadioProps = {
     id?: string;
 };
 
+const defaultWrapper = ({ children }: WrapperProps) => {
+    return <>{children}</>;
+};
+
 const Radio = forwardRef<HTMLInputElement, RadioProps>(
     ({ defaultValue, value, items, onChange, required, orientation, dir, id = generateRandomId(), ...props }, ref) => {
         return (
@@ -56,23 +65,33 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(
                 ref={ref}
             >
                 {items &&
-                    items.map((item, i) => (
-                        <Flex dir={dir} key={item.value}>
-                            <StyledRadioItem
-                                value={item.value}
-                                disabled={item.disabled}
-                                required={item.required}
-                                {...props.itemStyle}
-                                id={`${id}${item.value}${i}`}
-                                className={`${PREFIX_CLS} ${props.className ? props.className : ""}`}
-                            >
-                                <StyledIndicator />
-                            </StyledRadioItem>
-                            <Label dir={dir} htmlFor={`${id}${item.value}${i}`}>
-                                {item.label}
-                            </Label>
-                        </Flex>
-                    ))}
+                    items.map((item, i) => {
+                        const { wrapper = defaultWrapper } = item;
+
+                        return (
+                            <>
+                                {wrapper({
+                                    children: (
+                                        <Flex dir={dir} key={item.value}>
+                                            <StyledRadioItem
+                                                value={item.value}
+                                                disabled={item.disabled}
+                                                required={item.required}
+                                                {...props.itemStyle}
+                                                id={`${id}${item.value}${i}`}
+                                                className={`${PREFIX_CLS} ${props.className ? props.className : ""}`}
+                                            >
+                                                <StyledIndicator />
+                                            </StyledRadioItem>
+                                            <Label dir={dir} htmlFor={`${id}${item.value}${i}`}>
+                                                {item.label}
+                                            </Label>
+                                        </Flex>
+                                    ),
+                                })}
+                            </>
+                        );
+                    })}
                 {!items && props.children}
             </RadioGroup>
         );
diff --git a/packages/apsara-ui/src/Tooltip/Tooltip.tsx b/packages/apsara-ui/src/Tooltip/Tooltip.tsx
index 0f62fd256..4876216e3 100644
--- a/packages/apsara-ui/src/Tooltip/Tooltip.tsx
+++ b/packages/apsara-ui/src/Tooltip/Tooltip.tsx
@@ -14,7 +14,8 @@ export type TooltipProps = {
     onOpenChange?: ((open: boolean) => void) | undefined;
     delayDuration?: number;
     avoidCollisions?: boolean;
-} & HTMLAttributes<HTMLDivElement>;
+} & HTMLAttributes<HTMLDivElement> &
+    RadixTooltip.TooltipContentProps;
 
 export const PREFIX_CLS = "apsara-tooltip";
 const Tooltip = ({

From 74e379e723076fe26901201cfa4193ab73b8939b Mon Sep 17 00:00:00 2001
From: Rian Mandala <rian.putra01@gojek.com>
Date: Mon, 18 Nov 2024 18:47:30 +0700
Subject: [PATCH 2/3] feat: add example tooptip on wrapper radio item

---
 .../apsara-ui/src/Radio/Radio.stories.mdx     | 37 +++++++++++--------
 packages/apsara-ui/src/Radio/Radio.tsx        |  2 +-
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/packages/apsara-ui/src/Radio/Radio.stories.mdx b/packages/apsara-ui/src/Radio/Radio.stories.mdx
index 8c92594e3..baf991dcf 100644
--- a/packages/apsara-ui/src/Radio/Radio.stories.mdx
+++ b/packages/apsara-ui/src/Radio/Radio.stories.mdx
@@ -1,16 +1,21 @@
 import { Meta, Preview, Canvas, Story, ArgsTable, IconGallery, IconItem } from "@storybook/addon-docs/blocks";
 import Radio from "./Radio";
+import Tooltip from "../Tooltip";
 
 export const items = [
-    {label: 'Apple',value: 'Apple'},
-    {label: 'Pear',value: 'Pear'},
-    {disabled: true,label: 'Orange',value: 'Orange'}
-]
+    { label: "Apple", value: "Apple" },
+    { label: "Pear", value: "Pear" },
+    {
+        disabled: true,
+        label: "Orange",
+        value: "Orange",
+        wrapper: ({ children }) => <Tooltip title="Will coming soon!">{children}</Tooltip>,
+    },
+];
 
-export const orientationTypes = ['horizontal','vertical',undefined]
-
-export const dirTypes = ['ltr', 'rtl', undefined]
+export const orientationTypes = ["horizontal", "vertical", undefined];
 
+export const dirTypes = ["ltr", "rtl", undefined];
 
 <Meta
     title="General/Radio"
@@ -22,7 +27,7 @@ export const dirTypes = ['ltr', 'rtl', undefined]
                 type: { summary: "{label?: string, value: string, disabled?: boolean, required?: boolean}[]" },
             },
         },
-        defaultValue:{
+        defaultValue: {
             control: { type: "text" },
             description: "Used when value is not controlled",
             table: {
@@ -41,25 +46,25 @@ export const dirTypes = ['ltr', 'rtl', undefined]
             control: { type: "select", options: orientationTypes },
             description: "Set Radio Orientation",
             table: {
-                type: { summary: 'horizontal | vertical | undefined' },
+                type: { summary: "horizontal | vertical | undefined" },
                 defaultValue: { summary: undefined },
             },
         },
-        dir:{
+        dir: {
             control: { type: "select", options: dirTypes },
             description: "Set Radio Items Direction",
             table: {
-                type: { summary: 'ltr | rtl | undefined' },
+                type: { summary: "ltr | rtl | undefined" },
                 defaultValue: { summary: undefined },
             },
         },
         onChange: {
-            action: 'clicked',
+            action: "clicked",
             description: "whenever a radio is clicked the corresponding value is passed into this function.",
-            table:{
-                type: {summary: '(value: string) => void'}
-            }
-        }
+            table: {
+                type: { summary: "(value: string) => void" },
+            },
+        },
     }}
 />
 
diff --git a/packages/apsara-ui/src/Radio/Radio.tsx b/packages/apsara-ui/src/Radio/Radio.tsx
index a59b296e2..c5f3f4a1a 100644
--- a/packages/apsara-ui/src/Radio/Radio.tsx
+++ b/packages/apsara-ui/src/Radio/Radio.tsx
@@ -9,7 +9,7 @@ interface WrapperProps {
 }
 
 export type RadioItem = {
-    label?: string;
+    label?: ReactNode;
     value: string;
     disabled?: boolean;
     required?: boolean;

From 04be3e30f2f245f9c9a1d7b4ba9ff57150e9af4c Mon Sep 17 00:00:00 2001
From: Rian Mandala <rian.putra01@gojek.com>
Date: Tue, 19 Nov 2024 11:22:48 +0700
Subject: [PATCH 3/3] adding fragment

---
 packages/apsara-ui/src/Radio/Radio.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/apsara-ui/src/Radio/Radio.tsx b/packages/apsara-ui/src/Radio/Radio.tsx
index c5f3f4a1a..eaabd7ba4 100644
--- a/packages/apsara-ui/src/Radio/Radio.tsx
+++ b/packages/apsara-ui/src/Radio/Radio.tsx
@@ -69,10 +69,10 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(
                         const { wrapper = defaultWrapper } = item;
 
                         return (
-                            <>
+                            <React.Fragment key={item.value}>
                                 {wrapper({
                                     children: (
-                                        <Flex dir={dir} key={item.value}>
+                                        <Flex dir={dir}>
                                             <StyledRadioItem
                                                 value={item.value}
                                                 disabled={item.disabled}
@@ -89,7 +89,7 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(
                                         </Flex>
                                     ),
                                 })}
-                            </>
+                            </React.Fragment>
                         );
                     })}
                 {!items && props.children}