feat: expose wrapper radio item level

Author: rianmandala

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"

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",

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 <[email protected]>",
     "license": "Apache-2.0",

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;
 `;

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>
         );

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 = ({