@junyiacademy/ui-test 1.5.14 → 1.6.0

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/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.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.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.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.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/lib/topic-filter/TopicFilter.js

@@ -0,0 +1,115 @@
+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 = styled(Select)(({ theme }) => ({
+    width: 220,
+    margin: theme.spacing(1),
+}));
+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;
+            const selectedTopic = (_b = (_a = topicListAccumulator[index]) === null || _a === void 0 ? void 0 : _a.childTopics) === null || _b === void 0 ? void 0 : _b.find((childTopic) => childTopic.id === topicId);
+            if (!selectedTopic) {
+                return topicListAccumulator;
+            }
+            if (isLastLayer(selectedTopic)) {
+                return topicListAccumulator;
+            }
+            return [...topicListAccumulator, selectedTopic];
+        }, [topicTree]);
+        setLayeredTopicList(newLayeredTopicList);
+        setSelectedTopicIds(initSelectedTopicIds.slice(0, newLayeredTopicList.length));
+        setIsFocusedList(Array(newLayeredTopicList.length).fill(false));
+    };
+    const handleChange = (e, layerNumber, layeredTopic) => {
+        const selectedTopic = layeredTopic.childTopics.find((childTopic) => childTopic.id === e.target.value);
+        const newSelectedTopicIds = [
+            ...selectedTopicIds.slice(0, layerNumber),
+            selectedTopic.id,
+        ];
+        setSelectedTopicIds(newSelectedTopicIds);
+        onTopicSelected(selectedTopic, {
+            layerNumber,
+            selectedTopicIds: newSelectedTopicIds,
+        });
+        if (isLastLayer(selectedTopic)) {
+            setLayeredTopicList((prevTopicList) => prevTopicList.slice(0, layerNumber + 1));
+            setIsFocusedList((prevList) => prevList.slice(0, layerNumber + 1));
+        }
+        else {
+            setLayeredTopicList((prevTopicList) => [
+                ...prevTopicList.slice(0, layerNumber + 1),
+                selectedTopic,
+            ]);
+            setIsFocusedList((prevList) => [
+                ...prevList.slice(0, layerNumber + 1),
+                false,
+            ]);
+        }
+    };
+    useEffect(() => {
+        if (!topicTree || Object.keys(topicTree).length === 0) {
+            return;
+        }
+        if (initSelectedTopicIds.length !== 0) {
+            initSelectedLayers();
+            return;
+        }
+        setLayeredTopicList([topicTree]);
+    }, [topicTree]);
+    if (layeredTopicList.length === 0) {
+        return (React.createElement(StyledSelect, { variant: "outlined", size: "small", label: "\u8F09\u5165\u8CC7\u6599\u4E2D...", disabled: true }));
+    }
+    return (React.createElement(Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+        } }, layeredTopicList.map((layeredTopic, layerNumber) => {
+        const hasLabel = isFocusedList[layerNumber] || !selectedTopicIds[layerNumber];
+        return (React.createElement(Box, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+            }, key: layeredTopic.id },
+            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: {
+                        'aria-label': `layered-topic-${layerNumber}`,
+                    },
+                    onChange: (e) => {
+                        handleChange(e, layerNumber, layeredTopic);
+                    },
+                    onFocus: () => {
+                        setIsFocusedList((prevList) => {
+                            const newList = [...prevList];
+                            newList[layerNumber] = true;
+                            return newList;
+                        });
+                    },
+                    onBlur: () => {
+                        setIsFocusedList((prevList) => {
+                            const newList = [...prevList];
+                            newList[layerNumber] = false;
+                            return newList;
+                        });
+                    },
+                } },
+                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" }))));
+    })));
+};
+export default TopicFilter;

package/dist/libs/ui/src/lib/text-field/TextField.js

@@ -9,6 +9,7 @@ const TextField_1 = require("@mui/material/TextField");
 const Input_1 = require("@mui/material/Input");
 const InputLabel_1 = require("@mui/material/InputLabel");
 const OutlinedInput_1 = require("@mui/material/OutlinedInput");
+const FormHelperText_1 = require("@mui/material/FormHelperText");
 //utils
 const Capitalize_1 = tslib_1.__importDefault(require("../../utils/Capitalize"));
 // self-defined-components
@@ -52,7 +53,16 @@ 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 } = props, otherProps = tslib_1.__rest(props, ["InputLabelProps", "InputProps"]);
-    return (react_1.default.createElement(StyledTextField, Object.assign({ InputLabelProps: Object.assign(Object.assign({}, InputLabelProps), { shrink: hasEndAdornment ? true : undefined }), InputProps: Object.assign({}, InputProps) }, otherProps)));
+    return (react_1.default.createElement(StyledTextField, Object.assign({ InputLabelProps: Object.assign(Object.assign({}, InputLabelProps), { shrink: hasEndAdornment ? true : undefined }), FormHelperTextProps: {
+            sx: (theme) => ({
+                [`&.${FormHelperText_1.formHelperTextClasses.root}`]: {
+                    marginLeft: 0,
+                    [`&.${Input_1.inputClasses.error}`]: {
+                        color: theme.palette.error.main,
+                    },
+                },
+            }),
+        }, InputProps: Object.assign({}, InputProps) }, otherProps)));
 };
 exports.TextField = TextField;
 exports.default = exports.TextField;

package/dist/styles/theme.js

@@ -0,0 +1,40 @@
+/**
+ * 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.
+ */
+import { createTheme } from '@mui/material/styles';
+// Create a theme instance.
+const theme = createTheme({
+    typography: {
+        fontFamily: ['Noto Sans TC', 'Helvetica', 'Arial', 'sans-serif'].join(','),
+    },
+    palette: {
+        primary: {
+            light: '#82C0FF',
+            main: '#4990E2',
+            dark: '#0063B0',
+        },
+        secondary: {
+            light: '#FFD759',
+            main: '#F5A623',
+            dark: '#BD7700',
+            contrastText: '#FFFFFF',
+        },
+        green: {
+            primary: {
+                light: '#9DD49E',
+                main: '#5CB85D',
+                dark: '#218838',
+            },
+            blueGreen: {
+                main: '#19A696',
+            },
+            grassGreen: {
+                main: '#80BB5A',
+            },
+        },
+    },
+});
+export default theme;

package/dist/utils/Capitalize.js

@@ -0,0 +1,3 @@
+export default function capitalize(string) {
+    return `${string.charAt(0).toUpperCase()}${string.slice(1)}`;
+}

package/dist/utils/topicTree.js

@@ -0,0 +1,174 @@
+export const topicTree = {
+    childTopics: [
+        {
+            childTopics: [
+                {
+                    childTopics: [
+                        {
+                            childTopics: [
+                                {
+                                    childTopics: [],
+                                    id: 'j-m1ach1',
+                                    isContentTopic: true,
+                                    key: 'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKFlWUkdyck1reDdXU3lSb3pQYXU4RDlDTnZ4Ukx3MjhYU2ZCcTF0LTEM',
+                                    tags: [],
+                                    title: '【一上】數到 10',
+                                },
+                                {
+                                    childTopics: [],
+                                    id: 'j-m1ach2',
+                                    isContentTopic: true,
+                                    key: 'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
+                                    tags: [],
+                                    title: '【一上】比長短1',
+                                },
+                                {
+                                    childTopics: [],
+                                    id: 'j-m1ach3',
+                                    isContentTopic: true,
+                                    key: 'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
+                                    tags: [],
+                                    title: '【一上】比長短2',
+                                },
+                                {
+                                    childTopics: [],
+                                    id: 'j-m1ach4',
+                                    isContentTopic: true,
+                                    key: 'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
+                                    tags: [],
+                                    title: '【一上】比長短3',
+                                },
+                                {
+                                    childTopics: [],
+                                    id: 'j-m1ach5',
+                                    isContentTopic: true,
+                                    key: 'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
+                                    tags: [],
+                                    title: '【一上】比長短4',
+                                },
+                                {
+                                    childTopics: [],
+                                    id: 'j-m1ach6',
+                                    isContentTopic: true,
+                                    key: 'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
+                                    tags: [],
+                                    title: '【一上】比長短5',
+                                },
+                                {
+                                    childTopics: [],
+                                    id: 'j-m1ach7',
+                                    isContentTopic: true,
+                                    key: 'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
+                                    tags: [],
+                                    title: '【一上】比長短6',
+                                },
+                                {
+                                    childTopics: [],
+                                    id: 'j-m1ach8',
+                                    isContentTopic: true,
+                                    key: 'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
+                                    tags: [],
+                                    title: '【一上】比長短7',
+                                },
+                                {
+                                    childTopics: [],
+                                    id: 'j-m1ach9',
+                                    isContentTopic: true,
+                                    key: 'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
+                                    tags: [],
+                                    title: '【一上】比長短8',
+                                },
+                                {
+                                    childTopics: [],
+                                    id: 'j-m1ach10',
+                                    isContentTopic: true,
+                                    key: 'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
+                                    tags: [],
+                                    title: '【一上】比長短9',
+                                },
+                                {
+                                    childTopics: [],
+                                    id: 'j-m1ach11',
+                                    isContentTopic: true,
+                                    key: 'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
+                                    tags: [],
+                                    title: '【一上】比長短10',
+                                },
+                                {
+                                    childTopics: [],
+                                    id: 'j-m1ach12',
+                                    isContentTopic: true,
+                                    key: 'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
+                                    tags: [],
+                                    title: '【一上】比長短11',
+                                },
+                            ],
+                            id: 'math-grade-1-a',
+                            isContentTopic: false,
+                            key: 'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHN2MlIzS0VwaXlVeWdJQnhyYzBYakZ0RDZhU0JraGFJbGctU19qZFoM',
+                            tags: [],
+                            title: '均一版',
+                        },
+                    ],
+                    id: 'math-1',
+                    isContentTopic: false,
+                    key: 'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKEVzRnVINFdtalZBRmdQUkpjeWtaWFVnSlR2OEc2RzVsWnA1a0ZEVV8M',
+                    tags: ['grouping_eleme'],
+                    title: '一年級',
+                },
+                {
+                    childTopics: [
+                        {
+                            childTopics: [
+                                {
+                                    childTopics: [],
+                                    id: 'n-m2ach1',
+                                    isContentTopic: true,
+                                    key: 'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKExzUnEyWUgzUEduZmVzWm1oVXdxLU5tdmxjZmx4aWJXbkVKN0JVcXYM',
+                                    tags: [],
+                                    title: '【二上】第一單元 數到 300',
+                                },
+                                {
+                                    childTopics: [],
+                                    id: 'n-m2ach2',
+                                    isContentTopic: true,
+                                    key: 'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKFJuTDZLWXhxS0xNQ3VPU3BkUXZBOVN6YkRrVTNqdVNRSFdjbTEwc2UM',
+                                    tags: [],
+                                    title: '【二上】第二單元 二位數的加法',
+                                },
+                                {
+                                    childTopics: [],
+                                    id: 'n-m2ach3',
+                                    isContentTopic: true,
+                                    key: 'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHpYUWFzZXNPbS16V1BVeG9qeVFRQXlfZzA5Wm44ajdVZnM1dU85UWkM',
+                                    tags: [],
+                                    title: '【二上】第三單元 幾公分',
+                                },
+                            ],
+                            id: 'n-m2a',
+                            isContentTopic: false,
+                            key: 'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHl3QXRqNW1xMmk2QTRfR0JzWlpXQnVRQW1fYW5ZTEV4MkJ2ZUlYSmUM',
+                            tags: [],
+                            title: '南一版',
+                        },
+                    ],
+                    id: 'math-2',
+                    isContentTopic: false,
+                    key: 'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKE92cm9EU1N4c3FZM2J6MzMzZ05XWFR6RGFLMDJudHlIaHFtN1VRcXIM',
+                    tags: ['grouping_eleme'],
+                    title: '二年級',
+                },
+            ],
+            id: 'course-compare',
+            isContentTopic: false,
+            key: 'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKDFCSmFuVjVsTWlUUWZaU21MeE9FU3BZbVlmcktkNHJWN3Q5WU1VWjQM',
+            tags: ['has-pre-exam', 'has-post-exam'],
+            title: '數學',
+        },
+    ],
+    id: 'root',
+    isContentTopic: false,
+    key: 'ag5zfmp1bnlpYWNhZGVteXIzCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoM',
+    tags: [],
+    title: '知識樹',
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@junyiacademy/ui-test",
-  "version": "1.5.14",
+  "version": "1.6.0",
   "description": "junyiacademy ui library",
   "main": "./dist/libs/ui/src/index.js",
   "typings": "./declarations/libs/ui/src/index.d.ts",
@@ -17,10 +17,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@emotion/react": "11.7.1",
-    "@emotion/styled": "11.6.0",
-    "@mui/icons-material": "5.2.5",
-    "@mui/material": "5.2.7",
+    "@emotion/react": "11.9.0",
+    "@emotion/styled": "11.8.1",
+    "@mui/icons-material": "5.6.2",
+    "@mui/material": "5.6.2",
     "react": "17.0.2"
   },
   "devDependencies": {