@tap-payments/os-micro-frontend-shared 0.1.392 → 0.1.393

package/build/components/RadioGroup/RadioGroup.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { CustomRadioGroupProps } from './type';
-declare function RadioGroup({ options, onOptionChange, size, customLabelRenderer, layout, spacing, labelPosition, showHoverEffects, customRadioProps, labelSx, onChange, sx, ...props }: CustomRadioGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function RadioGroup({ options, onOptionChange, size, customLabelRenderer, layout, spacing, labelPosition, showHoverEffects, customRadioProps, labelSx, onChange, title, sx, ...props }: CustomRadioGroupProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof RadioGroup>;
 export default _default;

package/build/components/RadioGroup/RadioGroup.js

@@ -9,23 +9,30 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
 import MuiRadioGroup from '@mui/material/RadioGroup';
 import { StyledFormControlLabel } from './style';
 import { RadioButton } from '../RadioButton';
+import { FormControl, FormLabel, Stack } from '@mui/material';
 function RadioItem(_a) {
-    var { option, size = 'small', customLabelRenderer, labelPosition = 'end', showHoverEffects = true, customRadioProps, labelSx } = _a, props = __rest(_a, ["option", "size", "customLabelRenderer", "labelPosition", "showHoverEffects", "customRadioProps", "labelSx"]);
+    var { option, size = 'small', customLabelRenderer, labelPosition = 'end', showHoverEffects = true, customRadioProps, labelSx, icon } = _a, props = __rest(_a, ["option", "size", "customLabelRenderer", "labelPosition", "showHoverEffects", "customRadioProps", "labelSx", "icon"]);
     const label = customLabelRenderer ? customLabelRenderer(option) : option.label;
-    return (_jsx(StyledFormControlLabel, Object.assign({ value: option.value, control: _jsx(RadioButton, Object.assign({ size: size }, customRadioProps, option.customProps)), label: label, disabled: option.disabled, size: size, labelPlacement: labelPosition, showHoverEffects: showHoverEffects, labelSx: labelSx }, props)));
+    const labelContent = useMemo(() => {
+        if (icon) {
+            return (_jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", justifyContent: "space-between" }, { children: [label, _jsx("img", Object.assign({ alt: "icon" }, icon))] })));
+        }
+        return label;
+    }, [icon, label]);
+    return (_jsx(StyledFormControlLabel, Object.assign({ value: option.value, control: _jsx(RadioButton, Object.assign({ size: size }, customRadioProps, option.customProps)), label: labelContent, disabled: option.disabled, size: size, labelPlacement: labelPosition, showHoverEffects: showHoverEffects, labelSx: labelSx }, props)));
 }
 function RadioGroup(_a) {
-    var { options, onOptionChange, size = 'small', customLabelRenderer, layout = 'vertical', spacing = 0, labelPosition = 'end', showHoverEffects = true, customRadioProps, labelSx, onChange, sx } = _a, props = __rest(_a, ["options", "onOptionChange", "size", "customLabelRenderer", "layout", "spacing", "labelPosition", "showHoverEffects", "customRadioProps", "labelSx", "onChange", "sx"]);
+    var { options, onOptionChange, size = 'small', customLabelRenderer, layout = 'vertical', spacing = 0, labelPosition = 'end', showHoverEffects = true, customRadioProps, labelSx, onChange, title, sx } = _a, props = __rest(_a, ["options", "onOptionChange", "size", "customLabelRenderer", "layout", "spacing", "labelPosition", "showHoverEffects", "customRadioProps", "labelSx", "onChange", "title", "sx"]);
     const handleChange = (event) => {
         const value = event.target.value;
         onOptionChange === null || onOptionChange === void 0 ? void 0 : onOptionChange(value);
         onChange === null || onChange === void 0 ? void 0 : onChange(event, value);
     };
-    return (_jsx(MuiRadioGroup, Object.assign({ onChange: handleChange, sx: Object.assign({ display: 'flex', flexDirection: layout === 'horizontal' ? 'row' : 'column', gap: spacing }, sx) }, props, { children: options.map((option) => (_jsx(RadioItem, { option: option, size: size, customLabelRenderer: customLabelRenderer, labelPosition: labelPosition, showHoverEffects: showHoverEffects, customRadioProps: customRadioProps, labelSx: labelSx }, option.value))) })));
+    return (_jsxs(FormControl, { children: [typeof title === 'string' ? _jsx(FormLabel, { children: title }) : title, _jsx(MuiRadioGroup, Object.assign({ onChange: handleChange, sx: Object.assign({ display: 'flex', flexDirection: layout === 'horizontal' ? 'row' : 'column', gap: spacing }, sx) }, props, { children: options.map((option) => (_jsx(RadioItem, { icon: option.icon, option: option, size: size, customLabelRenderer: customLabelRenderer, labelPosition: labelPosition, showHoverEffects: showHoverEffects, customRadioProps: customRadioProps, labelSx: labelSx }, option.value))) }))] }));
 }
 export default memo(RadioGroup);

package/build/components/RadioGroup/type.d.ts

@@ -7,10 +7,10 @@ export interface RadioOption {
     label: string;
     disabled?: boolean;
     description?: string;
-    icon?: ReactNode;
+    icon?: React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
     customProps?: Partial<RadioButtonProps>;
 }
-export interface CustomRadioGroupProps extends Omit<RadioGroupProps, 'children'> {
+export interface CustomRadioGroupProps extends Omit<RadioGroupProps, 'children' | 'title'> {
     options: RadioOption[];
     onOptionChange?: (value: string) => void;
     size?: 'small' | 'medium' | 'large';
@@ -21,6 +21,7 @@ export interface CustomRadioGroupProps extends Omit<RadioGroupProps, 'children'>
     showHoverEffects?: boolean;
     customRadioProps?: Partial<RadioButtonProps>;
     labelSx?: React.CSSProperties;
+    title?: React.ReactNode;
 }
 export interface RadioItemProps extends Omit<FormControlLabelProps, 'control' | 'label'> {
     option: RadioOption;
@@ -30,4 +31,5 @@ export interface RadioItemProps extends Omit<FormControlLabelProps, 'control' |
     showHoverEffects?: boolean;
     customRadioProps?: Partial<RadioButtonProps>;
     labelSx?: React.CSSProperties;
+    icon?: React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.392",
+  "version": "0.1.393",
   "testVersion": 0,
   "type": "module",
   "main": "build/index.js",