@junyiacademy/ui-test 0.0.14 → 1.4.0

package/declarations/libs/ui/src/interfaces/index.d.ts

@@ -17,8 +17,9 @@ export interface SelectProps extends MuiSelectProp {
     SelectProps?: object | Partial<MuiSelectProp>;
     color?: 'primary' | 'secondary';
     size?: 'medium' | 'small';
-    width?: number | 'auto';
-    paperMaxHeight?: number | 'auto';
+    width?: number | string;
+    selectMargin?: number | string;
+    paperMaxHeight?: number | string;
     error?: boolean;
     hasLabel?: boolean;
     hasShrink?: boolean;

package/declarations/libs/ui/src/lib/menu-item/SelectMenuItem.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { MenuItemProps } from '@material-ui/core';
 export interface SelectMenuItemProps extends MenuItemProps {
-    width: number | 'auto';
+    width: number | string;
     value?: any;
     disabled?: boolean;
 }

package/declarations/libs/ui/src/lib/select/OutlinedSelect.d.ts

@@ -1,3 +1,3 @@
 import { SelectProps } from '../../interfaces';
-export declare const OutlinedSelect: ({ placeholder, helperText, InputProps, SelectProps, children, color, size, width, paperMaxHeight, error, hasLabel, hasShrink, value, disabled, }: SelectProps) => JSX.Element;
+export declare const OutlinedSelect: ({ placeholder, helperText, InputProps, SelectProps, children, color, size, width, selectMargin, paperMaxHeight, error, hasLabel, hasShrink, value, disabled, }: SelectProps) => JSX.Element;
 export default OutlinedSelect;

package/declarations/libs/ui/src/lib/select/StandardSelect.d.ts

@@ -1,3 +1,3 @@
 import { SelectProps } from '../../interfaces';
-export declare function StandardSelect({ placeholder, helperText, InputProps, SelectProps, children, color, size, width, paperMaxHeight, error, hasShrink, value, disabled, }: SelectProps): JSX.Element;
+export declare function StandardSelect({ placeholder, helperText, InputProps, SelectProps, children, color, size, width, selectMargin, paperMaxHeight, error, hasShrink, value, disabled, }: SelectProps): JSX.Element;
 export default StandardSelect;

package/dist/libs/ui/src/lib/menu-item/SelectMenuItem.js

@@ -16,8 +16,11 @@ const StyledMenuItem = styles_1.styled((_a) => {
     width: width,
     whiteSpace: 'unset',
     color: theme.palette.text.primary,
-    [`& .${classes.menuItemSelected}`]: {
+    [`&.${classes.menuItemSelected}`]: {
         backgroundColor: theme.palette.grey[300],
+        ['&:hover']: {
+            backgroundColor: theme.palette.grey[200],
+        },
     },
 }));
 const SelectMenuItem = react_1.default.forwardRef((_a, ref) => {

package/dist/libs/ui/src/lib/select/OutlinedSelect.js

@@ -24,11 +24,11 @@ const classes = {
     selectPaper: `${PREFIX}-menuPaper`,
 };
 const StyledFormControl = styles_1.styled((_a) => {
-    var { color: _color, width: _width } = _a, props = tslib_1.__rest(_a, ["color", "width"]);
-    return react_1.default.createElement(core_1.FormControl, Object.assign({}, props));
-})(({ color, width, theme }) => ({
-    margin: theme.spacing(1),
-    width: width,
+    var { color: _color, width: _width, selectMargin: _selectMargin } = _a, props = tslib_1.__rest(_a, ["color", "width", "selectMargin"]);
+    return (react_1.default.createElement(core_1.FormControl, Object.assign({}, props)));
+})(({ color, width, selectMargin, theme }) => ({
+    width,
+    margin: selectMargin,
     backgroundColor: 'white',
     '&:hover': {
         [`& :not(.${classes.outlineInputDisabled}):not(.${classes.outlineInputError}) .${classes.outlineInputNotchedOutline}`]: {
@@ -111,10 +111,10 @@ const StyledSelect = styles_1.styled((_a) => {
         left: hasAdornment ? '24px !important' : '70px',
     },
 }));
-const OutlinedSelect = ({ placeholder, helperText, InputProps, SelectProps, children, color = 'primary', size = 'small', width = 'auto', paperMaxHeight = 'auto', error = false, hasLabel = true, hasShrink = false, value = '', disabled = false, }) => {
+const OutlinedSelect = ({ placeholder, helperText, InputProps, SelectProps, children, color = 'primary', size = 'small', width = 'auto', selectMargin = 0, paperMaxHeight = 'auto', error = false, hasLabel = true, hasShrink = false, value = '', disabled = false, }) => {
     const hasAdornment = !!(InputProps === null || InputProps === void 0 ? void 0 : InputProps.startAdornment);
     const hasHelperText = !!helperText;
-    return (react_1.default.createElement(StyledFormControl, { size: size, width: width, disabled: disabled, error: error, color: color },
+    return (react_1.default.createElement(StyledFormControl, { size: size, width: width, selectMargin: selectMargin, disabled: disabled, error: error, color: color },
         hasLabel && (react_1.default.createElement(StyledInputLabel, { color: color, variant: 'outlined', shrink: hasShrink ? true : undefined }, placeholder)),
         react_1.default.createElement(StyledSelect, Object.assign({ value: value, paperMaxHeight: paperMaxHeight, hasAdornment: hasAdornment, input: react_1.default.createElement(StyledOutlinedInput, Object.assign({ color: color, label: hasLabel ? placeholder : undefined, disabled: disabled }, InputProps)) }, SelectProps), children),
         hasHelperText && react_1.default.createElement(core_1.FormHelperText, null, helperText)));

package/dist/libs/ui/src/lib/select/StandardSelect.js

@@ -21,11 +21,11 @@ const classes = {
     selectDisabled: `${PREFIX}-selectDisabled`,
 };
 const StyledFormControl = styles_1.styled((_a) => {
-    var { width: _width } = _a, props = tslib_1.__rest(_a, ["width"]);
+    var { width: _width, selectMargin: _selectMargin } = _a, props = tslib_1.__rest(_a, ["width", "selectMargin"]);
     return (react_1.default.createElement(core_1.FormControl, Object.assign({}, props)));
-})(({ width, theme }) => ({
+})(({ width, selectMargin, theme }) => ({
     width,
-    margin: theme.spacing(0, 4, 4, 4),
+    margin: selectMargin,
 }));
 const StyledInputLabel = styles_1.styled((_a) => {
     var { color: _color } = _a, props = tslib_1.__rest(_a, ["color"]);
@@ -85,10 +85,10 @@ const StyledInput = styles_1.styled((_a) => {
         },
     },
 }));
-function StandardSelect({ placeholder, helperText, InputProps, SelectProps, children, color = 'primary', size = 'small', width = 'auto', paperMaxHeight = 'auto', error = false, hasShrink = false, value = '', disabled = false, }) {
+function StandardSelect({ placeholder, helperText, InputProps, SelectProps, children, color = 'primary', size = 'small', width = 'auto', selectMargin = '0', paperMaxHeight = 'auto', error = false, hasShrink = false, value = '', disabled = false, }) {
     const hasAdornment = !!(InputProps === null || InputProps === void 0 ? void 0 : InputProps.startAdornment);
     const hasHelperText = !!helperText;
-    return (react_1.default.createElement(StyledFormControl, { color: color, size: size, width: width, disabled: disabled, error: error },
+    return (react_1.default.createElement(StyledFormControl, { color: color, size: size, width: width, selectMargin: selectMargin, disabled: disabled, error: error },
         react_1.default.createElement(StyledInputLabel, { color: color, shrink: hasShrink ? true : undefined }, placeholder),
         react_1.default.createElement(StyledSelect, Object.assign({ value: value, paperMaxHeight: paperMaxHeight, hasAdornment: hasAdornment, input: react_1.default.createElement(StyledInput, Object.assign({ color: color }, InputProps)) }, SelectProps), children),
         hasHelperText && react_1.default.createElement(core_1.FormHelperText, null, helperText)));

package/dist/libs/ui/src/lib/topic-filter/TopicFilter.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const styles_1 = require("@material-ui/core/styles");
 const ArrowRightRounded_1 = tslib_1.__importDefault(require("@material-ui/icons/ArrowRightRounded"));
-const OutlinedSelect_1 = tslib_1.__importDefault(require("../select/OutlinedSelect"));
+const Select_1 = tslib_1.__importDefault(require("../select/Select"));
 const SelectMenuItem_1 = tslib_1.__importDefault(require("../menu-item/SelectMenuItem"));
 // self-defined-configs
 const PLACEHOLDER = '請選擇';
@@ -26,6 +26,7 @@ const StyledArrowRightRoundedIcon = styles_1.styled(ArrowRightRounded_1.default)
     color: '#444',
 }));
 const TopicFilter = ({ topicTree, onTopicSelected, isLastLayer, hasArrow, initSelectedTopicIds, }) => {
+    const theme = styles_1.useTheme();
     const [selectedTopicIds, setSelectedTopicIds] = react_1.useState([]);
     const [layeredTopicList, setLayeredTopicList] = react_1.useState([]);
     const [isFocusedList, setIsFocusedList] = react_1.useState([]);
@@ -82,12 +83,12 @@ const TopicFilter = ({ topicTree, onTopicSelected, isLastLayer, hasArrow, initSe
         setLayeredTopicList([topicTree]);
     }, [topicTree]);
     if (layeredTopicList.length === 0) {
-        return (react_1.default.createElement(OutlinedSelect_1.default, { size: 'small', width: 220, placeholder: '\u8F09\u5165\u8CC7\u6599\u4E2D...', disabled: true }));
+        return (react_1.default.createElement(Select_1.default, { variant: 'outlined', size: 'small', width: 220, selectMargin: theme.spacing(1), placeholder: '\u8F09\u5165\u8CC7\u6599\u4E2D...', disabled: true }));
     }
     return (react_1.default.createElement(FiltersWrapper, null, layeredTopicList.map((layeredTopic, layerNumber) => {
         const hasLabel = isFocusedList[layerNumber] || !selectedTopicIds[layerNumber];
         return (react_1.default.createElement(SelectWrapper, { key: layeredTopic.id },
-            react_1.default.createElement(OutlinedSelect_1.default, { size: 'small', width: 220, paperMaxHeight: 412, hasLabel: hasLabel, placeholder: PLACEHOLDER, value: (selectedTopicIds === null || selectedTopicIds === void 0 ? void 0 : selectedTopicIds[layerNumber]) || '', SelectProps: {
+            react_1.default.createElement(Select_1.default, { variant: 'outlined', size: 'small', width: 220, selectMargin: theme.spacing(1), paperMaxHeight: 412, hasLabel: hasLabel, placeholder: PLACEHOLDER, value: (selectedTopicIds === null || selectedTopicIds === void 0 ? void 0 : selectedTopicIds[layerNumber]) || '', SelectProps: {
                     'data-testid': `layered-topic-${layerNumber}`,
                 }, InputProps: {
                     inputProps: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@junyiacademy/ui-test",
-  "version": "0.0.14",
+  "version": "1.4.0",
   "description": "junyiacademy ui library",
   "main": "./dist/libs/ui/src/index.js",
   "typings": "./declarations/libs/ui/src/index.d.ts",
@@ -19,7 +19,7 @@
   "dependencies": {
     "@material-ui/core": "4.9.10",
     "@material-ui/icons": "4.9.1",
-    "react": "16.13.1"
+    "react": "17.0.2"
   },
   "devDependencies": {
     "typescript": "~4.1.4"

package/src/interfaces/index.tsx

@@ -24,8 +24,9 @@ export interface SelectProps extends MuiSelectProp {
   SelectProps?: object | Partial<MuiSelectProp>
   color?: 'primary' | 'secondary'
   size?: 'medium' | 'small'
-  width?: number | 'auto'
-  paperMaxHeight?: number | 'auto'
+  width?: number | string
+  selectMargin?: number | string
+  paperMaxHeight?: number | string
   error?: boolean
   hasLabel?: boolean
   hasShrink?: boolean

package/src/lib/menu-item/SelectMenuItem.tsx

@@ -10,7 +10,7 @@ const classes = {
 }
 
 interface StyledMenuItemProps {
-  width: number | 'auto'
+  width: number | string
   theme?: Theme
 }
 
@@ -20,13 +20,16 @@ const StyledMenuItem = styled(({ width: _width, ...props }) => (
   width: width,
   whiteSpace: 'unset',
   color: theme.palette.text.primary,
-  [`& .${classes.menuItemSelected}`]: {
+  [`&.${classes.menuItemSelected}`]: {
     backgroundColor: theme.palette.grey[300],
+    ['&:hover']: {
+      backgroundColor: theme.palette.grey[200],
+    },
   },
 }))
 
 export interface SelectMenuItemProps extends MenuItemProps {
-  width: number | 'auto'
+  width: number | string
   value?: any
   disabled?: boolean
 }

package/src/lib/select/OutlinedSelect.tsx

@@ -31,15 +31,18 @@ const classes = {
 
 interface StyledFormControlProps {
   color: 'primary' | 'secondary'
-  width: number | 'auto'
+  width: number | string
+  selectMargin: number | string
   theme?: Theme
 }
 
 const StyledFormControl = styled(
-  ({ color: _color, width: _width, ...props }) => <FormControl {...props} />
-)(({ color, width, theme }: StyledFormControlProps) => ({
-  margin: theme.spacing(1),
-  width: width,
+  ({ color: _color, width: _width, selectMargin: _selectMargin, ...props }) => (
+    <FormControl {...props} />
+  )
+)(({ color, width, selectMargin, theme }: StyledFormControlProps) => ({
+  width,
+  margin: selectMargin,
   backgroundColor: 'white',
   '&:hover': {
     [`& :not(.${classes.outlineInputDisabled}):not(.${classes.outlineInputError}) .${classes.outlineInputNotchedOutline}`]: {
@@ -119,7 +122,7 @@ const StyledOutlinedInput = styled((props) => (
 }))
 
 interface StyledSelectProps {
-  paperMaxHeight: number | 'auto'
+  paperMaxHeight: number | string
   hasAdornment: boolean
 }
 
@@ -165,6 +168,7 @@ export const OutlinedSelect = ({
   color = 'primary',
   size = 'small',
   width = 'auto',
+  selectMargin = 0,
   paperMaxHeight = 'auto',
   error = false,
   hasLabel = true,
@@ -178,6 +182,7 @@ export const OutlinedSelect = ({
     <StyledFormControl
       size={size}
       width={width}
+      selectMargin={selectMargin}
       disabled={disabled}
       error={error}
       color={color}

package/src/lib/select/Select.stories.tsx

@@ -43,19 +43,28 @@ export default {
       control: { type: 'radio' },
     },
     width: {
-      type: { name: 'number', required: false },
+      type: { name: 'number | string', required: false },
       description: `Adjust width`,
       table: {
-        type: { summary: 'number' },
+        type: { summary: 'number | string' },
         defaultValue: { summary: 'auto' },
       },
       control: { type: 'number' },
     },
+    selectMargin: {
+      type: { name: 'number | string', required: false },
+      description: `Adjust margin`,
+      table: {
+        type: { summary: 'number | string' },
+        defaultValue: { summary: '0' },
+      },
+      control: { type: 'number' },
+    },
     paperMaxHeight: {
-      type: { name: 'number', required: false },
+      type: { name: 'number | string', required: false },
       description: `Adjust select menu paper max height.`,
       table: {
-        type: { summary: 'number' },
+        type: { summary: 'number | string' },
         defaultValue: { summary: 'auto' },
       },
       control: { type: 'number' },

package/src/lib/select/StandardSelect.tsx

@@ -28,15 +28,18 @@ const classes = {
 
 interface StyledFormControlProps {
   color: 'primary' | 'secondary'
-  width: number | 'auto'
+  width: number | string
+  selectMargin: number | string
   theme?: Theme
 }
 
-const StyledFormControl = styled(({ width: _width, ...props }) => (
-  <FormControl {...props} />
-))(({ width, theme }: StyledFormControlProps) => ({
+const StyledFormControl = styled(
+  ({ width: _width, selectMargin: _selectMargin, ...props }) => (
+    <FormControl {...props} />
+  )
+)(({ width, selectMargin, theme }: StyledFormControlProps) => ({
   width,
-  margin: theme.spacing(0, 4, 4, 4),
+  margin: selectMargin,
 }))
 
 interface StyledInputLabelProps {
@@ -64,7 +67,7 @@ const StyledInputLabel = styled(({ color: _color, ...props }) => (
 }))
 
 interface StyledSelectProps {
-  paperMaxHeight: number | 'auto'
+  paperMaxHeight: number | string
   hasAdornment: boolean
 }
 
@@ -137,6 +140,7 @@ export function StandardSelect({
   color = 'primary',
   size = 'small',
   width = 'auto',
+  selectMargin = '0',
   paperMaxHeight = 'auto',
   error = false,
   hasShrink = false,
@@ -150,6 +154,7 @@ export function StandardSelect({
       color={color}
       size={size}
       width={width}
+      selectMargin={selectMargin}
       disabled={disabled}
       error={error}
     >

package/src/lib/topic-filter/TopicFilter.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react'
-import { Theme, styled } from '@material-ui/core/styles'
+import { Theme, styled, useTheme } from '@material-ui/core/styles'
 import ArrowRightRoundedIcon from '@material-ui/icons/ArrowRightRounded'
 import type { ITopicTreeNode } from '../../interfaces'
-import OutlinedSelect from '../select/OutlinedSelect'
+import Select from '../select/Select'
 import SelectMenuItem from '../menu-item/SelectMenuItem'
 
 // self-defined-configs
@@ -52,6 +52,7 @@ export const TopicFilter = ({
   hasArrow,
   initSelectedTopicIds,
 }: TopicFilterProps) => {
+  const theme = useTheme()
   const [selectedTopicIds, setSelectedTopicIds] = useState([])
   const [layeredTopicList, setLayeredTopicList] = useState([])
   const [isFocusedList, setIsFocusedList] = useState([])
@@ -125,12 +126,14 @@ export const TopicFilter = ({
 
   if (layeredTopicList.length === 0) {
     return (
-      <OutlinedSelect
+      <Select
+        variant='outlined'
         size='small'
         width={220}
+        selectMargin={theme.spacing(1)}
         placeholder='載入資料中...'
         disabled
-      ></OutlinedSelect>
+      ></Select>
     )
   }
   return (
@@ -140,9 +143,11 @@ export const TopicFilter = ({
           isFocusedList[layerNumber] || !selectedTopicIds[layerNumber]
         return (
           <SelectWrapper key={layeredTopic.id}>
-            <OutlinedSelect
+            <Select
+              variant='outlined'
               size='small'
               width={220}
+              selectMargin={theme.spacing(1)}
               paperMaxHeight={412}
               hasLabel={hasLabel}
               placeholder={PLACEHOLDER}
@@ -187,7 +192,7 @@ export const TopicFilter = ({
                   {childTopic.title}
                 </SelectMenuItem>
               ))}
-            </OutlinedSelect>
+            </Select>
             {hasArrow && layerNumber !== layeredTopicList.length - 1 && (
               <StyledArrowRightRoundedIcon
                 fontSize='large'

package/declarations/libs/ui/src/lib/alert/Alert.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import { AlertProps as MuiAlertProps } from '@material-ui/lab';
-export interface AlertProps extends MuiAlertProps {
-    severity?: 'success' | 'info' | 'warning' | 'error';
-    action?: boolean;
-    buttonLink?: string;
-    isNewTab?: boolean;
-    cross?: boolean;
-    handleCrossClick?: () => void;
-    children?: React.ReactNode;
-}
-export declare const JuiAlert: ({ severity, action, buttonLink, isNewTab, cross, handleCrossClick, children, ...otherProps }: AlertProps) => JSX.Element;
-export default JuiAlert;

package/declarations/libs/ui/src/lib/selection-item/SelectionItem.d.ts

@@ -1,10 +0,0 @@
-export interface SelectionItemProps {
-    handleInput: () => {};
-    label1: string;
-    value1: string;
-    label2: string;
-    value2: string;
-    isError: boolean;
-}
-export declare function SelectionItem({ handleInput, label1, value1, label2, value2, isError, }: SelectionItemProps): JSX.Element;
-export default SelectionItem;

package/dist/libs/ui/src/lib/alert/Alert.js

@@ -1,72 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.JuiAlert = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const styles_1 = require("@material-ui/core/styles");
-const Alert_1 = tslib_1.__importDefault(require("@material-ui/lab/Alert"));
-const Button_1 = require("../button/Button");
-const CheckCircleOutline_1 = tslib_1.__importDefault(require("@material-ui/icons/CheckCircleOutline"));
-// self-defined-components
-const PREFIX = 'JuiAlert';
-const alertClasses = {
-    alertRoot: `${PREFIX}-alertRoot`,
-    alertMessage: `${PREFIX}-alertMessage`,
-};
-const buttonClasses = {
-    buttonRoot: `${PREFIX}-buttonRoot`,
-};
-const StyledAlert = styles_1.styled((_a) => {
-    var props = tslib_1.__rest(_a, []);
-    return (react_1.default.createElement(Alert_1.default, Object.assign({ classes: {
-            root: alertClasses.alertRoot,
-            message: alertClasses.alertMessage,
-        } }, props)));
-})({
-    [`&.${alertClasses.alertRoot}`]: {
-        height: '48px',
-        padding: '0 16px',
-        alignItems: 'center',
-    },
-    [`& .${alertClasses.alertMessage}`]: {
-        display: 'flex',
-        width: '100%',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-    },
-});
-const StyledButton = styles_1.styled((_a) => {
-    var { severity: _severity } = _a, props = tslib_1.__rest(_a, ["severity"]);
-    return (react_1.default.createElement(Button_1.Button, Object.assign({ classes: { root: buttonClasses.buttonRoot } }, props)));
-})(({ severity }) => ({
-    [`&.${buttonClasses.buttonRoot}`]: {
-        padding: '4px 10px',
-        margin: '0 0 0 20px',
-        minWidth: '74px',
-        color: severity === 'info'
-            ? 'rgb(13, 60, 97)'
-            : severity === 'error'
-                ? 'rgb(97, 26, 21)'
-                : severity === 'success'
-                    ? 'rgb(30, 70, 32)'
-                    : 'rgb(102, 60, 0)',
-        fontWeight: '700',
-    },
-}));
-const JuiAlert = (_a) => {
-    var { severity = 'info', action = false, buttonLink = '', isNewTab = true, cross = false, handleCrossClick, children } = _a, otherProps = tslib_1.__rest(_a, ["severity", "action", "buttonLink", "isNewTab", "cross", "handleCrossClick", "children"]);
-    const handleButtonClick = () => {
-        window.open(buttonLink, `${isNewTab ? '_blank' : '_self'}`);
-    };
-    const AlertChildren = () => {
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            children,
-            action && (react_1.default.createElement(StyledButton, { severity: severity, size: 'small', onClick: handleButtonClick }, "ACTION"))));
-    };
-    if (cross) {
-        return (react_1.default.createElement(StyledAlert, Object.assign({ severity: severity, iconMapping: { success: react_1.default.createElement(CheckCircleOutline_1.default, { fontSize: 'inherit' }) }, onClose: handleCrossClick }, otherProps), AlertChildren()));
-    }
-    return (react_1.default.createElement(StyledAlert, Object.assign({ severity: severity, iconMapping: { success: react_1.default.createElement(CheckCircleOutline_1.default, { fontSize: 'inherit' }) } }, otherProps), AlertChildren()));
-};
-exports.JuiAlert = JuiAlert;
-exports.default = exports.JuiAlert;

package/dist/libs/ui/src/lib/selection-item/SelectionItem.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectionItem = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const core_1 = require("@material-ui/core");
-const Radio_1 = require("../radio/Radio");
-function SelectionItem({ handleInput, label1, value1, label2, value2, isError, }) {
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(core_1.RadioGroup, { onChange: handleInput },
-            react_1.default.createElement(Radio_1.Radio, { label: label1, value: value1 }),
-            react_1.default.createElement(Radio_1.Radio, { label: label2, value: value2 })),
-        isError && react_1.default.createElement(core_1.FormHelperText, null, "\u8ACB\u9078\u64C7")));
-}
-exports.SelectionItem = SelectionItem;
-exports.default = SelectionItem;