@junyiacademy/ui-test 1.5.15 → 1.6.1

package/dist/index.js

@@ -0,0 +1,7 @@
+export { default as TopicFilter } from './lib/topic-filter/TopicFilter';
+export { default as SelectMenuItem } from './lib/menu-item/SelectMenuItem';
+export { default as Button } from './lib/button/Button';
+export { default as ButtonGroup } from './lib/button-group/ButtonGroup';
+export { default as Radio } from './lib/radio/Radio';
+export { default as TextField } from './lib/text-field/TextField';
+export { default as Select } from './lib/select/Select';

package/{declarations/libs/ui/src → dist}/interfaces/index.d.ts

@@ -1,5 +1,5 @@
 import { ChangeEvent } from 'react';
-import { SelectProps as MuiSelectProp, InputProps as MuiInputProps, OutlinedInputProps } from '@mui/material';
+import { SelectProps as MuiSelectProp, InputProps as MuiInputProps, FormControlProps as MuiFormControlProps, InputLabelProps as MuiInputLabelProps, OutlinedInputProps, FormHelperTextProps as MuiFormHelperTextProps } from '@mui/material';
 export interface ITopicTreeNode {
     childTopics: ITopicTreeNode[];
     id: string;
@@ -10,10 +10,13 @@ export interface ITopicTreeNode {
 }
 export interface SelectProps extends MuiSelectProp {
     helperText?: string;
+    FormControlProps?: Partial<MuiFormControlProps>;
+    InputLabelProps?: Partial<MuiInputLabelProps>;
     InputProps?: (Partial<OutlinedInputProps> & {
         onChange: (e: ChangeEvent<HTMLInputElement>) => void;
     }) | (object & Partial<MuiInputProps>);
     SelectProps?: object | Partial<MuiSelectProp>;
+    FormHelperTextProps?: Partial<MuiFormHelperTextProps>;
     color?: 'primary' | 'secondary';
     size?: 'medium' | 'small';
     paperMaxHeight?: number | string;

package/dist/interfaces/index.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/button/Button.js

@@ -0,0 +1,50 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { styled, alpha } from '@mui/material/styles';
+import { Button as MuiButton, } from '@mui/material';
+import { buttonClasses } from '@mui/material/Button';
+// utils
+import capitalize from '../../utils/Capitalize';
+const StyledButton = styled(MuiButton, {
+    shouldForwardProp: (prop) => prop !== 'active',
+})(({ active, color = 'primary', theme }) => ({
+    // For variant: outlined
+    [`&.${buttonClasses.outlined}${capitalize(color)}`]: {
+        backgroundColor: active
+            ? theme.palette[color].main
+            : theme.palette.common.white,
+        color: active ? theme.palette.common.white : theme.palette[color].main,
+        borderColor: theme.palette[color].main,
+        '&:hover': {
+            backgroundColor: active
+                ? theme.palette[color].main
+                : alpha(theme.palette[color].main, 0.1),
+        },
+        [`&.${buttonClasses.disabled}`]: {
+            backgroundColor: theme.palette.common.white,
+            borderColor: theme.palette.action.disabledBackground,
+            color: theme.palette.action.disabled,
+        },
+    },
+    // For variant: text
+    [`&.${buttonClasses.text}${capitalize(color)}`]: {
+        '&:hover': {
+            backgroundColor: alpha(theme.palette[color].main, 0.1),
+        },
+    },
+}));
+export const Button = (_a) => {
+    var { active, children } = _a, otherProps = __rest(_a, ["active", "children"]);
+    return (React.createElement(StyledButton, Object.assign({ active: active }, otherProps), children));
+};
+export default Button;

package/dist/lib/button-group/ButtonGroup.js

@@ -0,0 +1,29 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { styled, alpha } from '@mui/material/styles';
+import { ButtonGroup as MuiButtonGroup, } from '@mui/material';
+import { buttonGroupClasses } from '@mui/material/ButtonGroup';
+// utils
+import capitalize from '../../utils/Capitalize';
+// self-defined-components
+const StyledButtonGroup = styled(MuiButtonGroup)(({ color = 'primary', theme }) => ({
+    [`& .${buttonGroupClasses.groupedOutlined}${capitalize(color)}.${buttonGroupClasses.grouped}.${buttonGroupClasses.disabled}`]: {
+        borderColor: alpha(theme.palette[color].main, 0.5),
+        color: alpha(theme.palette[color].main, 0.5),
+    },
+}));
+export const ButtonGroup = (_a) => {
+    var { children } = _a, otherProps = __rest(_a, ["children"]);
+    return (React.createElement(StyledButtonGroup, Object.assign({}, otherProps), children));
+};
+export default ButtonGroup;

package/dist/lib/menu-item/SelectMenuItem.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { MenuItem } from '@mui/material';
+import { menuItemClasses } from '@mui/material/MenuItem';
+const SelectMenuItem = (_a) => {
+    var { children, value = '' } = _a, otherProps = __rest(_a, ["children", "value"]);
+    const { sx: menuItemSx } = otherProps, otherMenuItemProps = __rest(otherProps, ["sx"]);
+    return (React.createElement(MenuItem, Object.assign({ sx: [
+            (theme) => ({
+                whiteSpace: 'unset',
+                color: theme.palette.text.primary,
+                [`&.${menuItemClasses.selected}`]: {
+                    backgroundColor: theme.palette.grey[300],
+                    '&:hover': {
+                        backgroundColor: theme.palette.grey[200],
+                    },
+                },
+            }),
+            ...(Array.isArray(menuItemSx) ? menuItemSx : [menuItemSx]),
+        ], value: value }, otherMenuItemProps), children));
+};
+export default SelectMenuItem;

package/dist/lib/radio/Radio.d.ts

@@ -0,0 +1,11 @@
+import { RadioProps as MuiRadioProps, FormControlLabelProps as MuiFormControlLabelProps, TypographyProps as MuiTypographyProps } from '@mui/material';
+export interface RadioProps extends MuiFormControlLabelProps {
+    color?: 'primary' | 'secondary' | 'default';
+    size?: 'medium' | 'small';
+    caption?: string;
+    FormControlLabelProps?: Partial<MuiFormControlLabelProps>;
+    RadioProps?: Partial<MuiRadioProps>;
+    TypographyProps?: Partial<MuiTypographyProps>;
+}
+export declare const Radio: ({ checked, disabled, label, labelPlacement, value, FormControlLabelProps, RadioProps, TypographyProps, color, size, caption, }: RadioProps) => JSX.Element;
+export default Radio;

package/dist/lib/radio/Radio.js

@@ -0,0 +1,47 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import { Radio as MuiRadio, FormControlLabel, Typography, } from '@mui/material';
+import { formControlLabelClasses } from '@mui/material/FormControlLabel';
+import { radioClasses } from '@mui/material/Radio';
+// self-defined-components
+const StyledFormControlLabel = styled(FormControlLabel)(({ theme }) => ({
+    [`& .${formControlLabelClasses.label}`]: {
+        color: theme.palette.text.secondary,
+        [`&.${formControlLabelClasses.disabled}`]: {
+            color: theme.palette.text.disabled,
+        },
+    },
+    [`& .${radioClasses.checked} + .${formControlLabelClasses.label}`]: {
+        color: theme.palette.text.primary,
+    },
+}));
+export const Radio = ({ checked, disabled, label, labelPlacement, value, FormControlLabelProps = {}, RadioProps = {}, TypographyProps = {}, color = 'secondary', size = 'medium', caption = '', }) => {
+    const { sx: radioSx = [] } = RadioProps, otherRadioProps = __rest(RadioProps, ["sx"]);
+    const { sx: typographySx = [] } = TypographyProps, otherTypographyProps = __rest(TypographyProps, ["sx"]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(StyledFormControlLabel, Object.assign({ control: React.createElement(MuiRadio, Object.assign({ sx: [
+                    (theme) => ({
+                        color: theme.palette.text.primary,
+                    }),
+                    ...(Array.isArray(radioSx) ? radioSx : [radioSx]),
+                ], color: color, size: size }, otherRadioProps)), checked: checked, disabled: disabled, label: label, labelPlacement: labelPlacement, value: value }, FormControlLabelProps)),
+        caption && (React.createElement(Typography, Object.assign({ sx: [
+                (theme) => ({
+                    color: theme.palette.text.disabled,
+                    margin: '0 0 0 30px',
+                }),
+                ...(Array.isArray(typographySx) ? typographySx : [typographySx]),
+            ], variant: "body2" }, otherTypographyProps), caption))));
+};
+export default Radio;

package/dist/lib/select/OutlinedSelect.d.ts

@@ -0,0 +1,3 @@
+import { SelectProps as ISelectProps } from '../../interfaces';
+export declare const OutlinedSelect: ({ label, helperText, FormControlProps, InputLabelProps, InputProps, SelectProps, FormHelperTextProps, className, children, color, size, paperMaxHeight, error, hasLabel, hasShrink, value, disabled, }: ISelectProps) => JSX.Element;
+export default OutlinedSelect;

package/dist/lib/select/OutlinedSelect.js

@@ -0,0 +1,95 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import { InputLabel, FormControl, Select, OutlinedInput, FormHelperText, } from '@mui/material';
+import { formHelperTextClasses } from '@mui/material/FormHelperText';
+import { inputLabelClasses } from '@mui/material/InputLabel';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
+import { inputBaseClasses } from '@mui/material/InputBase';
+const StyledInputLabel = styled(InputLabel, {
+    shouldForwardProp: (prop) => prop !== 'color',
+})(({ color, theme }) => ({
+    color: theme.palette.text.secondary,
+    [`&.${inputLabelClasses.outlined}`]: {
+        [`&:not(.${inputLabelClasses.disabled}) .${inputLabelClasses.focused}`]: {
+            color: theme.palette.action.active,
+        },
+        [`&.${inputLabelClasses.sizeSmall}:not(.${inputLabelClasses.shrink})`]: {
+            transform: 'translate(12px, 12px) scale(1)',
+        },
+    },
+    // eslint-disable-next-line
+    [`&.${inputLabelClasses.shrink}:not(.${inputLabelClasses.error}):not(.${inputLabelClasses.disabled}).${inputLabelClasses.focused}`]: {
+        color: theme.palette[color].main,
+    },
+    [`&.${inputLabelClasses.shrink}`]: {
+        backgroundColor: '#ffffff',
+        padding: '0 2px',
+    },
+}));
+const StyledOutlinedInput = styled(OutlinedInput)(({ theme }) => ({
+    [`&.${outlinedInputClasses.root}`]: {
+        [`&.${outlinedInputClasses.error}.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
+            borderColor: `${theme.palette.error.main}`,
+        },
+        [`& .${inputBaseClasses.inputSizeSmall}`]: {
+            padding: '12.5px 15px 12.5px 12px',
+        },
+    },
+    [`& .${outlinedInputClasses.input}`]: {
+        color: theme.palette.text.primary,
+        '&:focus': {
+            background: 'rgba(0,0,0,0)',
+        },
+    },
+}));
+export const OutlinedSelect = ({ label, helperText, FormControlProps = {}, InputLabelProps = {}, InputProps = {}, SelectProps = {}, FormHelperTextProps = {}, className, children, color = 'primary', size = 'small', paperMaxHeight = 'auto', error = false, hasLabel = true, hasShrink = false, value = '', disabled = false, }) => {
+    const hasHelperText = !!helperText;
+    const { sx: formControlSx = [] } = FormControlProps, otherFormControlProps = __rest(FormControlProps, ["sx"]);
+    const { sx: formHelperTextSx = [] } = FormHelperTextProps, otherFormHelperTextProps = __rest(FormHelperTextProps, ["sx"]);
+    return (React.createElement(FormControl, Object.assign({ sx: [
+            (theme) => ({
+                backgroundColor: 'white',
+                '&:hover': {
+                    // eslint-disable-next-line
+                    [`& :not(.${outlinedInputClasses.disabled}):not(.${outlinedInputClasses.error}) .${outlinedInputClasses.notchedOutline}`]: {
+                        borderColor: theme.palette[color].main,
+                    },
+                },
+            }),
+            ...(Array.isArray(formControlSx) ? formControlSx : [formControlSx]),
+        ], size: size, disabled: disabled, error: error, color: color, className: className }, otherFormControlProps),
+        hasLabel && (React.createElement(StyledInputLabel, Object.assign({ color: color, shrink: hasShrink ? true : undefined }, InputLabelProps), label)),
+        React.createElement(Select, Object.assign({ value: value, label: hasLabel ? label : undefined, MenuProps: {
+                PaperProps: {
+                    sx: {
+                        maxHeight: paperMaxHeight,
+                    },
+                },
+                disableAutoFocusItem: true,
+                anchorOrigin: {
+                    vertical: 2,
+                    horizontal: 'left',
+                },
+                transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'left',
+                },
+            }, input: React.createElement(StyledOutlinedInput, Object.assign({ color: color, label: hasLabel ? label : undefined, disabled: disabled }, InputProps)) }, SelectProps), children),
+        hasHelperText && (React.createElement(FormHelperText, Object.assign({ sx: Object.assign({ [`&.${formHelperTextClasses.root}`]: {
+                    marginLeft: 0,
+                } }, (Array.isArray(formHelperTextSx)
+                ? formHelperTextSx
+                : [formHelperTextSx])) }, otherFormHelperTextProps), helperText))));
+};
+export default OutlinedSelect;

package/dist/lib/select/Select.js

@@ -0,0 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { OutlinedSelect } from './OutlinedSelect';
+import { StandardSelect } from './StandardSelect';
+export function Select(_a) {
+    var { variant } = _a, props = __rest(_a, ["variant"]);
+    if (variant === 'outlined') {
+        return React.createElement(OutlinedSelect, Object.assign({}, props));
+    }
+    return React.createElement(StandardSelect, Object.assign({}, props));
+}
+export default Select;

package/dist/lib/select/StandardSelect.d.ts

@@ -0,0 +1,3 @@
+import { SelectProps as ISelectProps } from '../../interfaces';
+export declare function StandardSelect({ label, helperText, FormControlProps, InputLabelProps, InputProps, SelectProps, FormHelperTextProps, className, children, color, size, paperMaxHeight, error, hasShrink, value, disabled, }: ISelectProps): JSX.Element;
+export default StandardSelect;

package/dist/lib/select/StandardSelect.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import { InputLabel, FormControl, Select, Input, FormHelperText, } from '@mui/material';
+import { inputLabelClasses } from '@mui/material/InputLabel';
+import { inputClasses } from '@mui/material/Input';
+const StyledInputLabel = styled(InputLabel, {
+    shouldForwardProp: (prop) => prop !== 'color',
+})(({ color, theme }) => ({
+    [`&.${inputLabelClasses.root}`]: {
+        color: theme.palette.text.disabled,
+    },
+    [`&.${inputLabelClasses.focused}`]: {
+        color: theme.palette[color].main,
+    },
+    [`&.${inputLabelClasses.error}`]: {
+        color: theme.palette.error.main,
+    },
+}));
+const StyledInput = styled(Input, {
+    shouldForwardProp: (prop) => prop !== 'color',
+})(({ color, theme }) => ({
+    color: theme.palette.text.primary,
+    [`& .${inputClasses.input}`]: {
+        '&:focus': {
+            background: 'rgba(0,0,0,0)',
+        },
+    },
+    [`&.${inputClasses.underline}:not(.${inputClasses.disabled}):not(.${inputClasses.error})`]: {
+        '&:after,&:hover:before': {
+            borderBottomColor: theme.palette[color].main,
+        },
+    },
+    [`&.${inputClasses.underline}.${inputClasses.error}:not(.${inputClasses.disabled})`]: {
+        '&:after,&:hover:before': {
+            borderBottomColor: theme.palette.error.main,
+        },
+    },
+}));
+export function StandardSelect({ label, helperText, FormControlProps = {}, InputLabelProps = {}, InputProps = {}, SelectProps = {}, FormHelperTextProps = {}, className, children, color = 'primary', size = 'small', paperMaxHeight = 'auto', error = false, hasShrink = false, value = '', disabled = false, }) {
+    const hasHelperText = !!helperText;
+    return (React.createElement(FormControl, Object.assign({ variant: "standard", color: color, size: size, disabled: disabled, error: error, className: className }, FormControlProps),
+        React.createElement(StyledInputLabel, Object.assign({ color: color, shrink: hasShrink ? true : undefined }, InputLabelProps), label),
+        React.createElement(Select, Object.assign({ label: label, value: value, MenuProps: {
+                PaperProps: {
+                    sx: {
+                        maxHeight: paperMaxHeight,
+                    },
+                },
+                anchorOrigin: {
+                    vertical: 2,
+                    horizontal: 'left',
+                },
+                transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'left',
+                },
+            }, input: React.createElement(StyledInput, Object.assign({ color: color }, InputProps)) }, SelectProps), children),
+        hasHelperText && (React.createElement(FormHelperText, Object.assign({}, FormHelperTextProps), helperText))));
+}
+export default StandardSelect;

package/dist/lib/text-field/TextField.d.ts

@@ -0,0 +1,3 @@
+import { TextFieldProps as MuiTextFieldProps } from '@mui/material';
+export declare const TextField: (props: MuiTextFieldProps) => JSX.Element;
+export default TextField;

package/dist/lib/text-field/TextField.js

@@ -0,0 +1,78 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import { TextField as MuiTextField, } from '@mui/material';
+import { textFieldClasses } from '@mui/material/TextField';
+import { inputClasses } from '@mui/material/Input';
+import { inputLabelClasses } from '@mui/material/InputLabel';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
+import { formHelperTextClasses } from '@mui/material/FormHelperText';
+// utils
+import capitalize from '../../utils/Capitalize';
+// self-defined-components
+const StyledTextField = styled(MuiTextField)(({ label, color = 'primary', theme }) => ({
+    [`& .${inputLabelClasses.error}`]: {
+        [`&:not(.${inputLabelClasses.shrink})`]: {
+            color: theme.palette.text.secondary,
+        },
+        [`&.${inputLabelClasses.disabled}`]: {
+            color: theme.palette.text.disabled,
+        },
+    },
+    [`& .${inputLabelClasses.error}.${inputLabelClasses.focused}`]: {
+        color: theme.palette.error.main,
+    },
+    // For variant: standard | filled
+    [`& .${inputClasses.underline}:not(.${inputClasses.disabled})`]: {
+        [`&.MuiInputBase-color${capitalize(color)}:hover:before`]: {
+            borderColor: theme.palette[color].main,
+        },
+    },
+    // For variant: outlined
+    [`& .${inputClasses.disabled} .${outlinedInputClasses.notchedOutline}`]: {
+        borderStyle: 'dotted',
+    },
+    [`& .${inputClasses.error}.${inputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
+        borderColor: theme.palette.error.main,
+    },
+    [`&.${textFieldClasses.root} :not(.${inputClasses.disabled}):not(.${inputClasses.error})`]: {
+        [`&.MuiInputBase-color${capitalize(color)}:hover .${outlinedInputClasses.notchedOutline}`]: {
+            borderColor: theme.palette[color].main,
+        },
+    },
+    [`& .${outlinedInputClasses.notchedOutline}`]: {
+        '& > legend': {
+            maxWidth: label === '' && 0,
+        },
+    },
+}));
+export const TextField = (props) => {
+    var _a;
+    const hasEndAdornment = !!((_a = props === null || props === void 0 ? void 0 : props.InputProps) === null || _a === void 0 ? void 0 : _a.endAdornment);
+    const { InputLabelProps, InputProps, FormHelperTextProps = {} } = props, otherProps = __rest(props, ["InputLabelProps", "InputProps", "FormHelperTextProps"]);
+    const { sx: formHelperTextSx = [] } = FormHelperTextProps, otherFormHelperTextProps = __rest(FormHelperTextProps, ["sx"]);
+    return (React.createElement(StyledTextField, Object.assign({ InputLabelProps: Object.assign(Object.assign({}, InputLabelProps), { shrink: hasEndAdornment ? true : undefined }), FormHelperTextProps: Object.assign({ sx: [
+                (theme) => ({
+                    [`&.${formHelperTextClasses.root}`]: {
+                        marginLeft: 0,
+                        [`&.${inputClasses.error}`]: {
+                            color: theme.palette.error.main,
+                        },
+                    },
+                }),
+                ...(Array.isArray(formHelperTextSx)
+                    ? formHelperTextSx
+                    : [formHelperTextSx]),
+            ] }, otherFormHelperTextProps), InputProps: Object.assign({}, InputProps) }, otherProps)));
+};
+export default TextField;

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

@@ -1,23 +1,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TopicFilter = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const styles_1 = require("@mui/material/styles");
-const ArrowRightRounded_1 = tslib_1.__importDefault(require("@mui/icons-material/ArrowRightRounded"));
-const material_1 = require("@mui/material");
-const Select_1 = tslib_1.__importDefault(require("../select/Select"));
-const SelectMenuItem_1 = tslib_1.__importDefault(require("../menu-item/SelectMenuItem"));
+import React, { useState, useEffect } from 'react';
+import { styled } from '@mui/material/styles';
+import ArrowRightRoundedIcon from '@mui/icons-material/ArrowRightRounded';
+import { Box } from '@mui/material';
+import Select from '../select/Select';
+import SelectMenuItem from '../menu-item/SelectMenuItem';
 // self-defined-configs
 const LABEL = '請選擇';
-const StyledSelect = styles_1.styled(Select_1.default)(({ theme }) => ({
+const StyledSelect = styled(Select)(({ theme }) => ({
     width: 220,
     margin: theme.spacing(1),
 }));
-const TopicFilter = ({ topicTree, onTopicSelected, isLastLayer, hasArrow, initSelectedTopicIds, }) => {
-    const [selectedTopicIds, setSelectedTopicIds] = react_1.useState([]);
-    const [layeredTopicList, setLayeredTopicList] = react_1.useState([]);
-    const [isFocusedList, setIsFocusedList] = react_1.useState([]);
+export const TopicFilter = ({ topicTree, onTopicSelected, isLastLayer, hasArrow, initSelectedTopicIds, }) => {
+    const [selectedTopicIds, setSelectedTopicIds] = useState([]);
+    const [layeredTopicList, setLayeredTopicList] = useState([]);
+    const [isFocusedList, setIsFocusedList] = useState([]);
     const initSelectedLayers = () => {
         const newLayeredTopicList = initSelectedTopicIds.reduce((topicListAccumulator, topicId, index) => {
             var _a, _b;
@@ -60,7 +56,7 @@ const TopicFilter = ({ topicTree, onTopicSelected, isLastLayer, hasArrow, initSe
             ]);
         }
     };
-    react_1.useEffect(() => {
+    useEffect(() => {
         if (!topicTree || Object.keys(topicTree).length === 0) {
             return;
         }
@@ -71,19 +67,19 @@ const TopicFilter = ({ topicTree, onTopicSelected, isLastLayer, hasArrow, initSe
         setLayeredTopicList([topicTree]);
     }, [topicTree]);
     if (layeredTopicList.length === 0) {
-        return (react_1.default.createElement(StyledSelect, { variant: 'outlined', size: 'small', label: '\u8F09\u5165\u8CC7\u6599\u4E2D...', disabled: true }));
+        return (React.createElement(StyledSelect, { variant: "outlined", size: "small", label: "\u8F09\u5165\u8CC7\u6599\u4E2D...", disabled: true }));
     }
-    return (react_1.default.createElement(material_1.Box, { sx: {
+    return (React.createElement(Box, { sx: {
             display: 'flex',
             alignItems: 'center',
             flexWrap: 'wrap',
         } }, layeredTopicList.map((layeredTopic, layerNumber) => {
         const hasLabel = isFocusedList[layerNumber] || !selectedTopicIds[layerNumber];
-        return (react_1.default.createElement(material_1.Box, { sx: {
+        return (React.createElement(Box, { sx: {
                 display: 'flex',
                 alignItems: 'center',
             }, key: layeredTopic.id },
-            react_1.default.createElement(StyledSelect, { variant: 'outlined', size: 'small', label: LABEL, paperMaxHeight: 412, hasLabel: hasLabel, value: (selectedTopicIds === null || selectedTopicIds === void 0 ? void 0 : selectedTopicIds[layerNumber]) || '', SelectProps: {
+            React.createElement(StyledSelect, { variant: "outlined", size: "small", label: LABEL, paperMaxHeight: 412, hasLabel: hasLabel, value: (selectedTopicIds === null || selectedTopicIds === void 0 ? void 0 : selectedTopicIds[layerNumber]) || '', SelectProps: {
                     'data-testid': `layered-topic-${layerNumber}`,
                 }, InputProps: {
                     inputProps: {
@@ -107,14 +103,13 @@ const TopicFilter = ({ topicTree, onTopicSelected, isLastLayer, hasArrow, initSe
                         });
                     },
                 } },
-                react_1.default.createElement(SelectMenuItem_1.default, { disabled: true, value: '' }, LABEL),
-                layeredTopic.childTopics.map((childTopic) => (react_1.default.createElement(SelectMenuItem_1.default, { key: childTopic.id, value: childTopic.id, "data-testid": `layered-menuitem-${layerNumber}`, "data-is-content-topic": childTopic.isContentTopic }, childTopic.title)))),
-            hasArrow && layerNumber !== layeredTopicList.length - 1 && (react_1.default.createElement(ArrowRightRounded_1.default, { sx: (theme) => ({
+                React.createElement(SelectMenuItem, { disabled: true, value: "" }, LABEL),
+                layeredTopic.childTopics.map((childTopic) => (React.createElement(SelectMenuItem, { key: childTopic.id, value: childTopic.id, "data-testid": `layered-menuitem-${layerNumber}`, "data-is-content-topic": childTopic.isContentTopic }, childTopic.title)))),
+            hasArrow && layerNumber !== layeredTopicList.length - 1 && (React.createElement(ArrowRightRoundedIcon, { sx: (theme) => ({
                     margin: theme.spacing(-1, -1.5),
                     fontSize: theme.spacing(7),
                     color: '#444',
-                }), fontSize: 'large', "data-testid": 'topic-filter-arrow' }))));
+                }), fontSize: "large", "data-testid": "topic-filter-arrow" }))));
     })));
 };
-exports.TopicFilter = TopicFilter;
-exports.default = exports.TopicFilter;
+export default TopicFilter;

package/dist/styles/theme.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2020 Junyi Academy.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+declare module '@mui/material/styles/createPalette' {
+    interface Palette {
+        green: {
+            primary: Palette['primary'];
+            blueGreen: Palette['primary'];
+            grassGreen: Palette['primary'];
+        };
+    }
+    interface PaletteOptions {
+        green: {
+            primary: PaletteOptions['primary'];
+            blueGreen: PaletteOptions['primary'];
+            grassGreen: PaletteOptions['primary'];
+        };
+    }
+}
+declare const theme: import("@mui/material/styles").Theme;
+export default theme;