@junyiacademy/ui-test 1.6.3 → 1.6.6

package/dist/index.js

@@ -1,7 +1,20 @@
-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';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = exports.TextField = exports.Radio = exports.ButtonGroup = exports.Button = exports.SelectMenuItem = exports.TopicFilter = void 0;
+var TopicFilter_1 = require("./lib/topic-filter/TopicFilter");
+Object.defineProperty(exports, "TopicFilter", { enumerable: true, get: function () { return __importDefault(TopicFilter_1).default; } });
+var SelectMenuItem_1 = require("./lib/menu-item/SelectMenuItem");
+Object.defineProperty(exports, "SelectMenuItem", { enumerable: true, get: function () { return __importDefault(SelectMenuItem_1).default; } });
+var Button_1 = require("./lib/button/Button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });
+var ButtonGroup_1 = require("./lib/button-group/ButtonGroup");
+Object.defineProperty(exports, "ButtonGroup", { enumerable: true, get: function () { return __importDefault(ButtonGroup_1).default; } });
+var Radio_1 = require("./lib/radio/Radio");
+Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return __importDefault(Radio_1).default; } });
+var TextField_1 = require("./lib/text-field/TextField");
+Object.defineProperty(exports, "TextField", { enumerable: true, get: function () { return __importDefault(TextField_1).default; } });
+var Select_1 = require("./lib/select/Select");
+Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return __importDefault(Select_1).default; } });

package/dist/interfaces/index.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/lib/button/Button.js

@@ -1,3 +1,15 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 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)
@@ -9,42 +21,53 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+var react_1 = __importDefault(require("react"));
+var styles_1 = require("@mui/material/styles");
+var material_1 = require("@mui/material");
+var Button_1 = require("@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),
+var Capitalize_1 = __importDefault(require("../../utils/Capitalize"));
+var StyledButton = styles_1.styled(material_1.Button, {
+    shouldForwardProp: function (prop) { return prop !== 'active'; },
+})(function (_a) {
+    var _b, _c;
+    var active = _a.active, _d = _a.color, color = _d === void 0 ? 'primary' : _d, theme = _a.theme;
+    return (_b = {},
+        // For variant: outlined
+        _b["&." + Button_1.buttonClasses.outlined + Capitalize_1.default(color)] = (_c = {
+                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
+                        : styles_1.alpha(theme.palette[color].main, 0.1),
+                }
+            },
+            _c["&." + Button_1.buttonClasses.disabled] = {
+                backgroundColor: theme.palette.common.white,
+                borderColor: theme.palette.action.disabledBackground,
+                color: theme.palette.action.disabled,
+            },
+            _c),
+        // For variant: text
+        _b["&." + Button_1.buttonClasses.text + Capitalize_1.default(color)] = {
+            '&:hover': {
+                backgroundColor: styles_1.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));
+        _b);
+});
+var Button = function (_a) {
+    var active = _a.active, children = _a.children, otherProps = __rest(_a, ["active", "children"]);
+    return (react_1.default.createElement(StyledButton, __assign({ active: active }, otherProps), children));
 };
-export default Button;
+exports.Button = Button;
+exports.default = exports.Button;

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

@@ -1,3 +1,15 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 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)
@@ -9,21 +21,31 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonGroup = void 0;
+var react_1 = __importDefault(require("react"));
+var styles_1 = require("@mui/material/styles");
+var material_1 = require("@mui/material");
+var ButtonGroup_1 = require("@mui/material/ButtonGroup");
 // utils
-import capitalize from '../../utils/Capitalize';
+var Capitalize_1 = __importDefault(require("../../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));
+var StyledButtonGroup = styles_1.styled(material_1.ButtonGroup)(function (_a) {
+    var _b;
+    var _c = _a.color, color = _c === void 0 ? 'primary' : _c, theme = _a.theme;
+    return (_b = {},
+        _b["& ." + ButtonGroup_1.buttonGroupClasses.groupedOutlined + Capitalize_1.default(color) + "." + ButtonGroup_1.buttonGroupClasses.grouped + "." + ButtonGroup_1.buttonGroupClasses.disabled] = {
+            borderColor: styles_1.alpha(theme.palette[color].main, 0.5),
+            color: styles_1.alpha(theme.palette[color].main, 0.5),
+        },
+        _b);
+});
+var ButtonGroup = function (_a) {
+    var children = _a.children, otherProps = __rest(_a, ["children"]);
+    return (react_1.default.createElement(StyledButtonGroup, __assign({}, otherProps), children));
 };
-export default ButtonGroup;
+exports.ButtonGroup = ButtonGroup;
+exports.default = exports.ButtonGroup;

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

@@ -1,3 +1,15 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 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)
@@ -9,24 +21,38 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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],
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var material_1 = require("@mui/material");
+var MenuItem_1 = require("@mui/material/MenuItem");
+var SelectMenuItem = function (_a) {
+    var children = _a.children, _b = _a.value, value = _b === void 0 ? '' : _b, otherProps = __rest(_a, ["children", "value"]);
+    var menuItemSx = otherProps.sx, otherMenuItemProps = __rest(otherProps, ["sx"]);
+    return (react_1.default.createElement(material_1.MenuItem, __assign({ sx: __spreadArrays([
+            function (theme) {
+                var _a;
+                return (_a = {
+                        whiteSpace: 'unset',
+                        color: theme.palette.text.primary
+                    },
+                    _a["&." + MenuItem_1.menuItemClasses.selected] = {
+                        backgroundColor: theme.palette.grey[300],
+                        '&:hover': {
+                            backgroundColor: theme.palette.grey[200],
+                        },
                     },
-                },
-            }),
-            ...(Array.isArray(menuItemSx) ? menuItemSx : [menuItemSx]),
-        ], value: value }, otherMenuItemProps), children));
+                    _a);
+            }
+        ], (Array.isArray(menuItemSx) ? menuItemSx : [menuItemSx])), value: value }, otherMenuItemProps), children));
 };
-export default SelectMenuItem;
+exports.default = SelectMenuItem;

package/dist/lib/radio/Radio.js

@@ -1,3 +1,15 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 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)
@@ -9,39 +21,56 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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';
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Radio = void 0;
+var react_1 = __importDefault(require("react"));
+var styles_1 = require("@mui/material/styles");
+var material_1 = require("@mui/material");
+var FormControlLabel_1 = require("@mui/material/FormControlLabel");
+var Radio_1 = require("@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,
+var StyledFormControlLabel = styles_1.styled(material_1.FormControlLabel)(function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return (_b = {},
+        _b["& ." + FormControlLabel_1.formControlLabelClasses.label] = (_c = {
+                color: theme.palette.text.secondary
+            },
+            _c["&." + FormControlLabel_1.formControlLabelClasses.disabled] = {
+                color: theme.palette.text.disabled,
+            },
+            _c),
+        _b["& ." + Radio_1.radioClasses.checked + " + ." + FormControlLabel_1.formControlLabelClasses.label] = {
+            color: theme.palette.text.primary,
         },
-    },
-    [`& .${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) => ({
+        _b);
+});
+var Radio = function (_a) {
+    var checked = _a.checked, disabled = _a.disabled, label = _a.label, labelPlacement = _a.labelPlacement, value = _a.value, _b = _a.FormControlLabelProps, FormControlLabelProps = _b === void 0 ? {} : _b, _c = _a.RadioProps, RadioProps = _c === void 0 ? {} : _c, _d = _a.TypographyProps, TypographyProps = _d === void 0 ? {} : _d, _e = _a.color, color = _e === void 0 ? 'secondary' : _e, _f = _a.size, size = _f === void 0 ? 'medium' : _f, _g = _a.caption, caption = _g === void 0 ? '' : _g;
+    var _h = RadioProps.sx, radioSx = _h === void 0 ? [] : _h, otherRadioProps = __rest(RadioProps, ["sx"]);
+    var _j = TypographyProps.sx, typographySx = _j === void 0 ? [] : _j, otherTypographyProps = __rest(TypographyProps, ["sx"]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(StyledFormControlLabel, __assign({ control: react_1.default.createElement(material_1.Radio, __assign({ sx: __spreadArrays([
+                    function (theme) { return ({
                         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) => ({
+                    }); }
+                ], (Array.isArray(radioSx) ? radioSx : [radioSx])), color: color, size: size }, otherRadioProps)), checked: checked, disabled: disabled, label: label, labelPlacement: labelPlacement, value: value }, FormControlLabelProps)),
+        caption && (react_1.default.createElement(material_1.Typography, __assign({ sx: __spreadArrays([
+                function (theme) { return ({
                     color: theme.palette.text.disabled,
                     margin: '0 0 0 30px',
-                }),
-                ...(Array.isArray(typographySx) ? typographySx : [typographySx]),
-            ], variant: "body2" }, otherTypographyProps), caption))));
+                }); }
+            ], (Array.isArray(typographySx) ? typographySx : [typographySx])), variant: "body2" }, otherTypographyProps), caption))));
 };
-export default Radio;
+exports.Radio = Radio;
+exports.default = exports.Radio;

package/dist/lib/select/OutlinedSelect.js

@@ -1,3 +1,15 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 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)
@@ -9,68 +21,93 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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)',
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OutlinedSelect = void 0;
+var react_1 = __importDefault(require("react"));
+var styles_1 = require("@mui/material/styles");
+var material_1 = require("@mui/material");
+var FormHelperText_1 = require("@mui/material/FormHelperText");
+var InputLabel_1 = require("@mui/material/InputLabel");
+var OutlinedInput_1 = require("@mui/material/OutlinedInput");
+var InputBase_1 = require("@mui/material/InputBase");
+var StyledInputLabel = styles_1.styled(material_1.InputLabel, {
+    shouldForwardProp: function (prop) { return prop !== 'color'; },
+})(function (_a) {
+    var _b, _c;
+    var color = _a.color, theme = _a.theme;
+    return (_b = {
+            color: theme.palette.text.secondary
         },
-    },
-    // 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}`,
+        _b["&." + InputLabel_1.inputLabelClasses.outlined] = (_c = {},
+            _c["&:not(." + InputLabel_1.inputLabelClasses.disabled + ") ." + InputLabel_1.inputLabelClasses.focused] = {
+                color: theme.palette.action.active,
+            },
+            _c["&." + InputLabel_1.inputLabelClasses.sizeSmall + ":not(." + InputLabel_1.inputLabelClasses.shrink + ")"] = {
+                transform: 'translate(12px, 12px) scale(1)',
+            },
+            _c),
+        // eslint-disable-next-line
+        _b["&." + InputLabel_1.inputLabelClasses.shrink + ":not(." + InputLabel_1.inputLabelClasses.error + "):not(." + InputLabel_1.inputLabelClasses.disabled + ")." + InputLabel_1.inputLabelClasses.focused] = {
+            color: theme.palette[color].main,
         },
-        [`& .${inputBaseClasses.inputSizeSmall}`]: {
-            padding: '12.5px 15px 12.5px 12px',
+        _b["&." + InputLabel_1.inputLabelClasses.shrink] = {
+            backgroundColor: '#ffffff',
+            padding: '0 2px',
         },
-    },
-    [`& .${outlinedInputClasses.input}`]: {
-        color: theme.palette.text.primary,
-        '&:focus': {
-            background: 'rgba(0,0,0,0)',
+        _b);
+});
+var StyledOutlinedInput = styles_1.styled(material_1.OutlinedInput)(function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return (_b = {},
+        _b["&." + OutlinedInput_1.outlinedInputClasses.root] = (_c = {},
+            _c["&." + OutlinedInput_1.outlinedInputClasses.error + "." + OutlinedInput_1.outlinedInputClasses.focused + " ." + OutlinedInput_1.outlinedInputClasses.notchedOutline] = {
+                borderColor: "" + theme.palette.error.main,
+            },
+            _c["& ." + InputBase_1.inputBaseClasses.inputSizeSmall] = {
+                padding: '12.5px 15px 12.5px 12px',
+            },
+            _c),
+        _b["& ." + OutlinedInput_1.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: {
+        _b);
+});
+var OutlinedSelect = function (_a) {
+    var _b;
+    var label = _a.label, helperText = _a.helperText, _c = _a.FormControlProps, FormControlProps = _c === void 0 ? {} : _c, _d = _a.InputLabelProps, InputLabelProps = _d === void 0 ? {} : _d, _e = _a.InputProps, InputProps = _e === void 0 ? {} : _e, _f = _a.SelectProps, SelectProps = _f === void 0 ? {} : _f, _g = _a.FormHelperTextProps, FormHelperTextProps = _g === void 0 ? {} : _g, className = _a.className, children = _a.children, _h = _a.color, color = _h === void 0 ? 'primary' : _h, _j = _a.size, size = _j === void 0 ? 'small' : _j, _k = _a.paperMaxHeight, paperMaxHeight = _k === void 0 ? 'auto' : _k, _l = _a.error, error = _l === void 0 ? false : _l, _m = _a.hasLabel, hasLabel = _m === void 0 ? true : _m, _o = _a.hasShrink, hasShrink = _o === void 0 ? false : _o, _p = _a.value, value = _p === void 0 ? '' : _p, _q = _a.disabled, disabled = _q === void 0 ? false : _q;
+    var hasHelperText = !!helperText;
+    var _r = FormControlProps.sx, formControlSx = _r === void 0 ? [] : _r, otherFormControlProps = __rest(FormControlProps, ["sx"]);
+    var _s = FormHelperTextProps.sx, formHelperTextSx = _s === void 0 ? [] : _s, otherFormHelperTextProps = __rest(FormHelperTextProps, ["sx"]);
+    return (react_1.default.createElement(material_1.FormControl, __assign({ sx: __spreadArrays([
+            function (theme) {
+                var _a;
+                return ({
+                    backgroundColor: 'white',
+                    '&:hover': (_a = {},
+                        // eslint-disable-next-line
+                        _a["& :not(." + OutlinedInput_1.outlinedInputClasses.disabled + "):not(." + OutlinedInput_1.outlinedInputClasses.error + ") ." + OutlinedInput_1.outlinedInputClasses.notchedOutline] = {
+                            borderColor: theme.palette[color].main,
+                        },
+                        _a),
+                });
+            }
+        ], (Array.isArray(formControlSx) ? formControlSx : [formControlSx])), size: size, disabled: disabled, error: error, color: color, className: className }, otherFormControlProps),
+        hasLabel && (react_1.default.createElement(StyledInputLabel, __assign({ color: color, shrink: hasShrink ? true : undefined }, InputLabelProps), label)),
+        react_1.default.createElement(material_1.Select, __assign({ value: value, label: hasLabel ? label : undefined, MenuProps: {
                 PaperProps: {
                     sx: {
                         maxHeight: paperMaxHeight,
@@ -85,11 +122,12 @@ export const OutlinedSelect = ({ label, helperText, FormControlProps = {}, Input
                     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)
+            }, input: react_1.default.createElement(StyledOutlinedInput, __assign({ color: color, label: hasLabel ? label : undefined, disabled: disabled }, InputProps)) }, SelectProps), children),
+        hasHelperText && (react_1.default.createElement(material_1.FormHelperText, __assign({ sx: __assign((_b = {}, _b["&." + FormHelperText_1.formHelperTextClasses.root] = {
+                marginLeft: 0,
+            }, _b), (Array.isArray(formHelperTextSx)
                 ? formHelperTextSx
                 : [formHelperTextSx])) }, otherFormHelperTextProps), helperText))));
 };
-export default OutlinedSelect;
+exports.OutlinedSelect = OutlinedSelect;
+exports.default = exports.OutlinedSelect;

package/dist/lib/select/Select.js

@@ -1,3 +1,15 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 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)
@@ -9,14 +21,20 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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"]);
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+var react_1 = __importDefault(require("react"));
+var OutlinedSelect_1 = require("./OutlinedSelect");
+var StandardSelect_1 = require("./StandardSelect");
+function Select(_a) {
+    var variant = _a.variant, props = __rest(_a, ["variant"]);
     if (variant === 'outlined') {
-        return React.createElement(OutlinedSelect, Object.assign({}, props));
+        return react_1.default.createElement(OutlinedSelect_1.OutlinedSelect, __assign({}, props));
     }
-    return React.createElement(StandardSelect, Object.assign({}, props));
+    return react_1.default.createElement(StandardSelect_1.StandardSelect, __assign({}, props));
 }
-export default Select;
+exports.Select = Select;
+exports.default = Select;

package/dist/lib/select/StandardSelect.js

@@ -1,46 +1,73 @@
-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)',
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StandardSelect = void 0;
+var react_1 = __importDefault(require("react"));
+var styles_1 = require("@mui/material/styles");
+var material_1 = require("@mui/material");
+var InputLabel_1 = require("@mui/material/InputLabel");
+var Input_1 = require("@mui/material/Input");
+var StyledInputLabel = styles_1.styled(material_1.InputLabel, {
+    shouldForwardProp: function (prop) { return prop !== 'color'; },
+})(function (_a) {
+    var _b;
+    var color = _a.color, theme = _a.theme;
+    return (_b = {},
+        _b["&." + InputLabel_1.inputLabelClasses.root] = {
+            color: theme.palette.text.disabled,
         },
-    },
-    [`&.${inputClasses.underline}:not(.${inputClasses.disabled}):not(.${inputClasses.error})`]: {
-        '&:after,&:hover:before': {
-            borderBottomColor: theme.palette[color].main,
+        _b["&." + InputLabel_1.inputLabelClasses.focused] = {
+            color: theme.palette[color].main,
         },
-    },
-    [`&.${inputClasses.underline}.${inputClasses.error}:not(.${inputClasses.disabled})`]: {
-        '&:after,&:hover:before': {
-            borderBottomColor: theme.palette.error.main,
+        _b["&." + InputLabel_1.inputLabelClasses.error] = {
+            color: 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: {
+        _b);
+});
+var StyledInput = styles_1.styled(material_1.Input, {
+    shouldForwardProp: function (prop) { return prop !== 'color'; },
+})(function (_a) {
+    var _b;
+    var color = _a.color, theme = _a.theme;
+    return (_b = {
+            color: theme.palette.text.primary
+        },
+        _b["& ." + Input_1.inputClasses.input] = {
+            '&:focus': {
+                background: 'rgba(0,0,0,0)',
+            },
+        },
+        _b["&." + Input_1.inputClasses.underline + ":not(." + Input_1.inputClasses.disabled + "):not(." + Input_1.inputClasses.error + ")"] = {
+            '&:after,&:hover:before': {
+                borderBottomColor: theme.palette[color].main,
+            },
+        },
+        _b["&." + Input_1.inputClasses.underline + "." + Input_1.inputClasses.error + ":not(." + Input_1.inputClasses.disabled + ")"] = {
+            '&:after,&:hover:before': {
+                borderBottomColor: theme.palette.error.main,
+            },
+        },
+        _b);
+});
+function StandardSelect(_a) {
+    var label = _a.label, helperText = _a.helperText, _b = _a.FormControlProps, FormControlProps = _b === void 0 ? {} : _b, _c = _a.InputLabelProps, InputLabelProps = _c === void 0 ? {} : _c, _d = _a.InputProps, InputProps = _d === void 0 ? {} : _d, _e = _a.SelectProps, SelectProps = _e === void 0 ? {} : _e, _f = _a.FormHelperTextProps, FormHelperTextProps = _f === void 0 ? {} : _f, className = _a.className, children = _a.children, _g = _a.color, color = _g === void 0 ? 'primary' : _g, _h = _a.size, size = _h === void 0 ? 'small' : _h, _j = _a.paperMaxHeight, paperMaxHeight = _j === void 0 ? 'auto' : _j, _k = _a.error, error = _k === void 0 ? false : _k, _l = _a.hasShrink, hasShrink = _l === void 0 ? false : _l, _m = _a.value, value = _m === void 0 ? '' : _m, _o = _a.disabled, disabled = _o === void 0 ? false : _o;
+    var hasHelperText = !!helperText;
+    return (react_1.default.createElement(material_1.FormControl, __assign({ variant: "standard", color: color, size: size, disabled: disabled, error: error, className: className }, FormControlProps),
+        react_1.default.createElement(StyledInputLabel, __assign({ color: color, shrink: hasShrink ? true : undefined }, InputLabelProps), label),
+        react_1.default.createElement(material_1.Select, __assign({ label: label, value: value, MenuProps: {
                 PaperProps: {
                     sx: {
                         maxHeight: paperMaxHeight,
@@ -54,7 +81,8 @@ export function StandardSelect({ label, helperText, FormControlProps = {}, Input
                     vertical: 'top',
                     horizontal: 'left',
                 },
-            }, input: React.createElement(StyledInput, Object.assign({ color: color }, InputProps)) }, SelectProps), children),
-        hasHelperText && (React.createElement(FormHelperText, Object.assign({}, FormHelperTextProps), helperText))));
+            }, input: react_1.default.createElement(StyledInput, __assign({ color: color }, InputProps)) }, SelectProps), children),
+        hasHelperText && (react_1.default.createElement(material_1.FormHelperText, __assign({}, FormHelperTextProps), helperText))));
 }
-export default StandardSelect;
+exports.StandardSelect = StandardSelect;
+exports.default = StandardSelect;

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

@@ -1,3 +1,15 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 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)
@@ -9,70 +21,90 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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';
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextField = void 0;
+var react_1 = __importDefault(require("react"));
+var styles_1 = require("@mui/material/styles");
+var material_1 = require("@mui/material");
+var TextField_1 = require("@mui/material/TextField");
+var Input_1 = require("@mui/material/Input");
+var InputLabel_1 = require("@mui/material/InputLabel");
+var OutlinedInput_1 = require("@mui/material/OutlinedInput");
+var FormHelperText_1 = require("@mui/material/FormHelperText");
 // utils
-import capitalize from '../../utils/Capitalize';
+var Capitalize_1 = __importDefault(require("../../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,
+var StyledTextField = styles_1.styled(material_1.TextField)(function (_a) {
+    var _b, _c, _d, _e;
+    var label = _a.label, _f = _a.color, color = _f === void 0 ? 'primary' : _f, theme = _a.theme;
+    return (_b = {},
+        _b["& ." + InputLabel_1.inputLabelClasses.error] = (_c = {},
+            _c["&:not(." + InputLabel_1.inputLabelClasses.shrink + ")"] = {
+                color: theme.palette.text.secondary,
+            },
+            _c["&." + InputLabel_1.inputLabelClasses.disabled] = {
+                color: theme.palette.text.disabled,
+            },
+            _c),
+        _b["& ." + InputLabel_1.inputLabelClasses.error + "." + InputLabel_1.inputLabelClasses.focused] = {
+            color: theme.palette.error.main,
         },
-    },
-    [`& .${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: standard | filled
+        _b["& ." + Input_1.inputClasses.underline + ":not(." + Input_1.inputClasses.disabled + ")"] = (_d = {},
+            _d["&.MuiInputBase-color" + Capitalize_1.default(color) + ":hover:before"] = {
+                borderColor: theme.palette[color].main,
+            },
+            _d),
+        // For variant: outlined
+        _b["& ." + Input_1.inputClasses.disabled + " ." + OutlinedInput_1.outlinedInputClasses.notchedOutline] = {
+            borderStyle: 'dotted',
         },
-    },
-    // 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,
+        _b["& ." + Input_1.inputClasses.error + "." + Input_1.inputClasses.focused + " ." + OutlinedInput_1.outlinedInputClasses.notchedOutline] = {
+            borderColor: theme.palette.error.main,
         },
-    },
-    [`& .${outlinedInputClasses.notchedOutline}`]: {
-        '& > legend': {
-            maxWidth: label === '' && 0,
+        _b["&." + TextField_1.textFieldClasses.root + " :not(." + Input_1.inputClasses.disabled + "):not(." + Input_1.inputClasses.error + ")"] = (_e = {},
+            _e["&.MuiInputBase-color" + Capitalize_1.default(color) + ":hover ." + OutlinedInput_1.outlinedInputClasses.notchedOutline] = {
+                borderColor: theme.palette[color].main,
+            },
+            _e),
+        _b["& ." + OutlinedInput_1.outlinedInputClasses.notchedOutline] = {
+            '& > legend': {
+                maxWidth: label === '' && 0,
+            },
         },
-    },
-}));
-export const TextField = (props) => {
+        _b);
+});
+var TextField = function (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)));
+    var hasEndAdornment = !!((_a = props === null || props === void 0 ? void 0 : props.InputProps) === null || _a === void 0 ? void 0 : _a.endAdornment);
+    var InputLabelProps = props.InputLabelProps, InputProps = props.InputProps, _b = props.FormHelperTextProps, FormHelperTextProps = _b === void 0 ? {} : _b, otherProps = __rest(props, ["InputLabelProps", "InputProps", "FormHelperTextProps"]);
+    var _c = FormHelperTextProps.sx, formHelperTextSx = _c === void 0 ? [] : _c, otherFormHelperTextProps = __rest(FormHelperTextProps, ["sx"]);
+    return (react_1.default.createElement(StyledTextField, __assign({ InputLabelProps: __assign(__assign({}, InputLabelProps), { shrink: hasEndAdornment ? true : undefined }), FormHelperTextProps: __assign({ sx: __spreadArrays([
+                function (theme) {
+                    var _a, _b;
+                    return (_a = {},
+                        _a["&." + FormHelperText_1.formHelperTextClasses.root] = (_b = {
+                                marginLeft: 0
+                            },
+                            _b["&." + Input_1.inputClasses.error] = {
+                                color: theme.palette.error.main,
+                            },
+                            _b),
+                        _a);
+                }
+            ], (Array.isArray(formHelperTextSx)
+                ? formHelperTextSx
+                : [formHelperTextSx])) }, otherFormHelperTextProps), InputProps: __assign({}, InputProps) }, otherProps)));
 };
-export default TextField;
+exports.TextField = TextField;
+exports.default = exports.TextField;

package/dist/lib/topic-filter/TopicFilter.js

@@ -1,62 +1,97 @@
-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),
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
 }));
-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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopicFilter = void 0;
+var react_1 = __importStar(require("react"));
+var styles_1 = require("@mui/material/styles");
+var ArrowRightRounded_1 = __importDefault(require("@mui/icons-material/ArrowRightRounded"));
+var material_1 = require("@mui/material");
+var Select_1 = __importDefault(require("../select/Select"));
+var SelectMenuItem_1 = __importDefault(require("../menu-item/SelectMenuItem"));
+// self-defined-configs
+var LABEL = '請選擇';
+var StyledSelect = styles_1.styled(Select_1.default)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        width: 220,
+        margin: theme.spacing(1),
+    });
+});
+var TopicFilter = function (_a) {
+    var topicTree = _a.topicTree, onTopicSelected = _a.onTopicSelected, isLastLayer = _a.isLastLayer, hasArrow = _a.hasArrow, initSelectedTopicIds = _a.initSelectedTopicIds;
+    var _b = react_1.useState([]), selectedTopicIds = _b[0], setSelectedTopicIds = _b[1];
+    var _c = react_1.useState([]), layeredTopicList = _c[0], setLayeredTopicList = _c[1];
+    var _d = react_1.useState([]), isFocusedList = _d[0], setIsFocusedList = _d[1];
+    var initSelectedLayers = function () {
+        var newLayeredTopicList = initSelectedTopicIds.reduce(function (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);
+            var selectedTopic = (_b = (_a = topicListAccumulator[index]) === null || _a === void 0 ? void 0 : _a.childTopics) === null || _b === void 0 ? void 0 : _b.find(function (childTopic) { return childTopic.id === topicId; });
             if (!selectedTopic) {
                 return topicListAccumulator;
             }
             if (isLastLayer(selectedTopic)) {
                 return topicListAccumulator;
             }
-            return [...topicListAccumulator, selectedTopic];
+            return __spreadArrays(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),
+    var handleChange = function (e, layerNumber, layeredTopic) {
+        var selectedTopic = layeredTopic.childTopics.find(function (childTopic) { return childTopic.id === e.target.value; });
+        var newSelectedTopicIds = __spreadArrays(selectedTopicIds.slice(0, layerNumber), [
             selectedTopic.id,
-        ];
+        ]);
         setSelectedTopicIds(newSelectedTopicIds);
         onTopicSelected(selectedTopic, {
-            layerNumber,
+            layerNumber: layerNumber,
             selectedTopicIds: newSelectedTopicIds,
         });
         if (isLastLayer(selectedTopic)) {
-            setLayeredTopicList((prevTopicList) => prevTopicList.slice(0, layerNumber + 1));
-            setIsFocusedList((prevList) => prevList.slice(0, layerNumber + 1));
+            setLayeredTopicList(function (prevTopicList) {
+                return prevTopicList.slice(0, layerNumber + 1);
+            });
+            setIsFocusedList(function (prevList) { return prevList.slice(0, layerNumber + 1); });
         }
         else {
-            setLayeredTopicList((prevTopicList) => [
-                ...prevTopicList.slice(0, layerNumber + 1),
+            setLayeredTopicList(function (prevTopicList) { return __spreadArrays(prevTopicList.slice(0, layerNumber + 1), [
                 selectedTopic,
-            ]);
-            setIsFocusedList((prevList) => [
-                ...prevList.slice(0, layerNumber + 1),
+            ]); });
+            setIsFocusedList(function (prevList) { return __spreadArrays(prevList.slice(0, layerNumber + 1), [
                 false,
-            ]);
+            ]); });
         }
     };
-    useEffect(() => {
+    react_1.useEffect(function () {
         if (!topicTree || Object.keys(topicTree).length === 0) {
             return;
         }
@@ -67,49 +102,50 @@ export const TopicFilter = ({ topicTree, onTopicSelected, isLastLayer, hasArrow,
         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_1.default.createElement(StyledSelect, { variant: "outlined", size: "small", label: "\u8F09\u5165\u8CC7\u6599\u4E2D...", disabled: true }));
     }
-    return (React.createElement(Box, { sx: {
+    return (react_1.default.createElement(material_1.Box, { sx: {
             display: 'flex',
             alignItems: 'center',
             flexWrap: 'wrap',
-        } }, layeredTopicList.map((layeredTopic, layerNumber) => {
-        const hasLabel = isFocusedList[layerNumber] || !selectedTopicIds[layerNumber];
-        return (React.createElement(Box, { sx: {
+        } }, layeredTopicList.map(function (layeredTopic, layerNumber) {
+        var hasLabel = isFocusedList[layerNumber] || !selectedTopicIds[layerNumber];
+        return (react_1.default.createElement(material_1.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}`,
+            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: {
+                    'data-testid': "layered-topic-" + layerNumber,
                 }, InputProps: {
                     inputProps: {
-                        'aria-label': `layered-topic-${layerNumber}`,
+                        'aria-label': "layered-topic-" + layerNumber,
                     },
-                    onChange: (e) => {
+                    onChange: function (e) {
                         handleChange(e, layerNumber, layeredTopic);
                     },
-                    onFocus: () => {
-                        setIsFocusedList((prevList) => {
-                            const newList = [...prevList];
+                    onFocus: function () {
+                        setIsFocusedList(function (prevList) {
+                            var newList = __spreadArrays(prevList);
                             newList[layerNumber] = true;
                             return newList;
                         });
                     },
-                    onBlur: () => {
-                        setIsFocusedList((prevList) => {
-                            const newList = [...prevList];
+                    onBlur: function () {
+                        setIsFocusedList(function (prevList) {
+                            var newList = __spreadArrays(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) => ({
+                react_1.default.createElement(SelectMenuItem_1.default, { disabled: true, value: "" }, LABEL),
+                layeredTopic.childTopics.map(function (childTopic) { return (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: function (theme) { return ({
                     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" }))));
     })));
 };
-export default TopicFilter;
+exports.TopicFilter = TopicFilter;
+exports.default = exports.TopicFilter;

package/dist/styles/theme.js

@@ -1,12 +1,14 @@
+"use strict";
 /**
  * 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';
+Object.defineProperty(exports, "__esModule", { value: true });
+var styles_1 = require("@mui/material/styles");
 // Create a theme instance.
-const theme = createTheme({
+var theme = styles_1.createTheme({
     typography: {
         fontFamily: ['Noto Sans TC', 'Helvetica', 'Arial', 'sans-serif'].join(','),
     },
@@ -37,4 +39,4 @@ const theme = createTheme({
         },
     },
 });
-export default theme;
+exports.default = theme;

package/dist/utils/Capitalize.js

@@ -1,3 +1,6 @@
-export default function capitalize(string) {
-    return `${string.charAt(0).toUpperCase()}${string.slice(1)}`;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function capitalize(string) {
+    return "" + string.charAt(0).toUpperCase() + string.slice(1);
 }
+exports.default = capitalize;

package/dist/utils/topicTree.js

@@ -1,4 +1,7 @@
-export const topicTree = {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.topicTree = void 0;
+exports.topicTree = {
     childTopics: [
         {
             childTopics: [

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@junyiacademy/ui-test",
-  "version": "1.6.3",
+  "version": "1.6.6",
   "description": "junyiacademy ui library",
-  "main": "./dist/lib/index.js",
-  "typings": "./dist/lib/index.d.ts",
+  "main": "./dist/index.js",
+  "typings": "./dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "tsc --build --clean && tsc --build"