@junyiacademy/ui-test 1.4.0 → 1.4.1

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

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

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

@@ -1,9 +1,8 @@
 import React from 'react';
 import { MenuItemProps } from '@material-ui/core';
 export interface SelectMenuItemProps extends MenuItemProps {
-    width: number | string;
     value?: any;
     disabled?: boolean;
 }
-declare const SelectMenuItem: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<SelectMenuItemProps>, "classes" | "disabled" | "value" | "onChange" | "children" | "onKeyUp" | "onKeyDown" | "onBlur" | "onFocus" | "defaultValue" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "innerRef" | "button" | "width" | "alignItems" | "dense" | "key" | "selected" | "ContainerComponent" | "ContainerProps" | "disableGutters" | "divider" | "focusVisibleClassName"> & React.RefAttributes<HTMLLIElement>>;
+declare const SelectMenuItem: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<SelectMenuItemProps>, "classes" | "disabled" | "value" | "onChange" | "children" | "onKeyUp" | "onKeyDown" | "onBlur" | "onFocus" | "defaultValue" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "innerRef" | "button" | "alignItems" | "dense" | "key" | "selected" | "ContainerComponent" | "ContainerProps" | "disableGutters" | "divider" | "focusVisibleClassName"> & React.RefAttributes<HTMLLIElement>>;
 export default SelectMenuItem;

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

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

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

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

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

@@ -9,22 +9,18 @@ const PREFIX = 'JuiSelectMenuItem';
 const classes = {
     menuItemSelected: `${PREFIX}-menuItemSelected`,
 };
-const StyledMenuItem = styles_1.styled((_a) => {
-    var { width: _width } = _a, props = tslib_1.__rest(_a, ["width"]);
-    return (react_1.default.createElement(core_1.MenuItem, Object.assign({ classes: { selected: classes.menuItemSelected } }, props)));
-})(({ width, theme }) => ({
-    width: width,
+const StyledMenuItem = styles_1.styled((props) => (react_1.default.createElement(core_1.MenuItem, Object.assign({ classes: { selected: classes.menuItemSelected } }, props))))(({ theme }) => ({
     whiteSpace: 'unset',
     color: theme.palette.text.primary,
     [`&.${classes.menuItemSelected}`]: {
         backgroundColor: theme.palette.grey[300],
-        ['&:hover']: {
+        '&:hover': {
             backgroundColor: theme.palette.grey[200],
         },
     },
 }));
 const SelectMenuItem = react_1.default.forwardRef((_a, ref) => {
-    var { width, children, value = '' } = _a, otherProps = tslib_1.__rest(_a, ["width", "children", "value"]);
-    return (react_1.default.createElement(StyledMenuItem, Object.assign({ width: width, innerRef: ref, value: value }, otherProps), children));
+    var { children, value = '' } = _a, otherProps = tslib_1.__rest(_a, ["children", "value"]);
+    return (react_1.default.createElement(StyledMenuItem, Object.assign({ innerRef: ref, value: value }, otherProps), children));
 });
 exports.default = SelectMenuItem;

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

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

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

@@ -20,13 +20,6 @@ const classes = {
     selectPaper: `${PREFIX}-menuPaper`,
     selectDisabled: `${PREFIX}-selectDisabled`,
 };
-const StyledFormControl = styles_1.styled((_a) => {
-    var { width: _width, selectMargin: _selectMargin } = _a, props = tslib_1.__rest(_a, ["width", "selectMargin"]);
-    return (react_1.default.createElement(core_1.FormControl, Object.assign({}, props)));
-})(({ width, selectMargin, theme }) => ({
-    width,
-    margin: selectMargin,
-}));
 const StyledInputLabel = styles_1.styled((_a) => {
     var { color: _color } = _a, props = tslib_1.__rest(_a, ["color"]);
     return (react_1.default.createElement(core_1.InputLabel, Object.assign({ classes: {
@@ -70,25 +63,25 @@ const StyledInput = styles_1.styled((_a) => {
 })(({ color, theme }) => ({
     color: theme.palette.text.primary,
     [`& .${classes.inputInput}`]: {
-        ['&:focus']: {
+        '&:focus': {
             background: 'rgba(0,0,0,0)',
         },
     },
     [`&.${classes.inputUnderline}:not(.${classes.inputDisabled}):not(.${classes.inputError})`]: {
-        [`&:after,&:hover:before`]: {
+        '&:after,&:hover:before': {
             borderBottomColor: theme.palette[color].main,
         },
     },
     [`&.${classes.inputUnderline}.${classes.inputError}:not(.${classes.inputDisabled})`]: {
-        [`&:after,&:hover:before`]: {
+        '&:after,&:hover:before': {
             borderBottomColor: theme.palette.error.main,
         },
     },
 }));
-function StandardSelect({ placeholder, helperText, InputProps, SelectProps, children, color = 'primary', size = 'small', width = 'auto', selectMargin = '0', paperMaxHeight = 'auto', error = false, hasShrink = false, value = '', disabled = false, }) {
+function StandardSelect({ placeholder, helperText, InputProps, SelectProps, className, children, color = 'primary', size = 'small', paperMaxHeight = 'auto', error = false, hasShrink = false, value = '', disabled = false, }) {
     const hasAdornment = !!(InputProps === null || InputProps === void 0 ? void 0 : InputProps.startAdornment);
     const hasHelperText = !!helperText;
-    return (react_1.default.createElement(StyledFormControl, { color: color, size: size, width: width, selectMargin: selectMargin, disabled: disabled, error: error },
+    return (react_1.default.createElement(core_1.FormControl, { color: color, size: size, disabled: disabled, error: error, className: className },
         react_1.default.createElement(StyledInputLabel, { color: color, shrink: hasShrink ? true : undefined }, placeholder),
         react_1.default.createElement(StyledSelect, Object.assign({ value: value, paperMaxHeight: paperMaxHeight, hasAdornment: hasAdornment, input: react_1.default.createElement(StyledInput, Object.assign({ color: color }, InputProps)) }, SelectProps), children),
         hasHelperText && react_1.default.createElement(core_1.FormHelperText, null, helperText)));

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

@@ -20,13 +20,16 @@ const SelectWrapper = styles_1.styled('div')({
     display: 'flex',
     alignItems: 'center',
 });
+const StyledSelect = styles_1.styled(Select_1.default)(({ theme }) => ({
+    width: 220,
+    margin: theme.spacing(1),
+}));
 const StyledArrowRightRoundedIcon = styles_1.styled(ArrowRightRounded_1.default)(({ theme }) => ({
     margin: theme.spacing(-1, -1.5),
     fontSize: theme.spacing(7),
     color: '#444',
 }));
 const TopicFilter = ({ topicTree, onTopicSelected, isLastLayer, hasArrow, initSelectedTopicIds, }) => {
-    const theme = styles_1.useTheme();
     const [selectedTopicIds, setSelectedTopicIds] = react_1.useState([]);
     const [layeredTopicList, setLayeredTopicList] = react_1.useState([]);
     const [isFocusedList, setIsFocusedList] = react_1.useState([]);
@@ -83,12 +86,12 @@ const TopicFilter = ({ topicTree, onTopicSelected, isLastLayer, hasArrow, initSe
         setLayeredTopicList([topicTree]);
     }, [topicTree]);
     if (layeredTopicList.length === 0) {
-        return (react_1.default.createElement(Select_1.default, { variant: 'outlined', size: 'small', width: 220, selectMargin: theme.spacing(1), placeholder: '\u8F09\u5165\u8CC7\u6599\u4E2D...', disabled: true }));
+        return (react_1.default.createElement(StyledSelect, { variant: 'outlined', size: 'small', placeholder: '\u8F09\u5165\u8CC7\u6599\u4E2D...', disabled: true }));
     }
     return (react_1.default.createElement(FiltersWrapper, null, layeredTopicList.map((layeredTopic, layerNumber) => {
         const hasLabel = isFocusedList[layerNumber] || !selectedTopicIds[layerNumber];
         return (react_1.default.createElement(SelectWrapper, { key: layeredTopic.id },
-            react_1.default.createElement(Select_1.default, { variant: 'outlined', size: 'small', width: 220, selectMargin: theme.spacing(1), paperMaxHeight: 412, hasLabel: hasLabel, placeholder: PLACEHOLDER, value: (selectedTopicIds === null || selectedTopicIds === void 0 ? void 0 : selectedTopicIds[layerNumber]) || '', SelectProps: {
+            react_1.default.createElement(StyledSelect, { variant: 'outlined', size: 'small', paperMaxHeight: 412, hasLabel: hasLabel, placeholder: PLACEHOLDER, value: (selectedTopicIds === null || selectedTopicIds === void 0 ? void 0 : selectedTopicIds[layerNumber]) || '', SelectProps: {
                     'data-testid': `layered-topic-${layerNumber}`,
                 }, InputProps: {
                     inputProps: {
@@ -112,8 +115,8 @@ const TopicFilter = ({ topicTree, onTopicSelected, isLastLayer, hasArrow, initSe
                         });
                     },
                 } },
-                react_1.default.createElement(SelectMenuItem_1.default, { width: 220, disabled: true }, PLACEHOLDER),
-                layeredTopic.childTopics.map((childTopic) => (react_1.default.createElement(SelectMenuItem_1.default, { width: 220, key: childTopic.id, value: childTopic.id, "data-testid": `layered-menuitem-${layerNumber}`, "data-is-content-topic": childTopic.isContentTopic }, childTopic.title)))),
+                react_1.default.createElement(SelectMenuItem_1.default, { disabled: true }, PLACEHOLDER),
+                layeredTopic.childTopics.map((childTopic) => (react_1.default.createElement(SelectMenuItem_1.default, { key: childTopic.id, value: childTopic.id, "data-testid": `layered-menuitem-${layerNumber}`, "data-is-content-topic": childTopic.isContentTopic }, childTopic.title)))),
             hasArrow && layerNumber !== layeredTopicList.length - 1 && (react_1.default.createElement(StyledArrowRightRoundedIcon, { fontSize: 'large', "data-testid": 'topic-filter-arrow' }))));
     })));
 };

package/package.json

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

package/.storybook/main.js

@@ -1,9 +0,0 @@
-const rootMain = require('../../../.storybook/main')
-
-// Use the following syntax to add addons!
-// rootMain.addons.push('');
-rootMain.stories.push(
-  ...['../src/lib/**/*.stories.mdx', '../src/lib/**/*.stories.@(js|jsx|ts|tsx)']
-)
-
-module.exports = rootMain

package/.storybook/preview.js

@@ -1,10 +0,0 @@
-import { ThemeProvider } from '@material-ui/core/styles'
-import theme from '../src/styles/theme'
-
-export const decorators = [
-  (Story) => (
-    <ThemeProvider theme={theme}>
-      <Story />
-    </ThemeProvider>
-  ),
-]

package/.storybook/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "emitDecoratorMetadata": true,
-    "outDir": ""
-  },
-  "exclude": [
-    "../**/*.spec.ts",
-    "../**/*.spec.js",
-    "../**/*.spec.tsx",
-    "../**/*.spec.jsx"
-  ],
-  "include": ["../src/**/*", "*.js"]
-}

package/.storybook/webpack.config.js

@@ -1,84 +0,0 @@
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
-const rootWebpackConfig = require('../../../.storybook/webpack.config')
-/**
- * Export a function. Accept the base config as the only param.
- *
- * @param {Parameters<typeof rootWebpackConfig>[0]} options
- */
-module.exports = async ({ config, mode }) => {
-  config = await rootWebpackConfig({ config, mode })
-
-  const tsPaths = new TsconfigPathsPlugin({
-    configFile: './tsconfig.base.json',
-  })
-
-  config.resolve.plugins
-    ? config.resolve.plugins.push(tsPaths)
-    : (config.resolve.plugins = [tsPaths])
-
-  // Found this here: https://github.com/nrwl/nx/issues/2859
-  // And copied the part of the solution that made it work
-
-  const svgRuleIndex = config.module.rules.findIndex((rule) => {
-    const { test } = rule
-
-    return test.toString().startsWith('/\\.(svg|ico')
-  })
-  config.module.rules[
-    svgRuleIndex
-  ].test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/
-
-  config.module.rules.push(
-    {
-      test: /\.(png|jpe?g|gif|webp)$/,
-      loader: require.resolve('url-loader'),
-      options: {
-        limit: 10000, // 10kB
-        name: '[name].[hash:7].[ext]',
-      },
-    },
-    {
-      test: /\.svg$/,
-      oneOf: [
-        // If coming from JS/TS file, then transform into React component using SVGR.
-        {
-          issuer: {
-            test: /\.[jt]sx?$/,
-          },
-          use: [
-            {
-              loader: require.resolve('@svgr/webpack'),
-              options: {
-                svgo: false,
-                titleProp: true,
-                ref: true,
-              },
-            },
-            {
-              loader: require.resolve('url-loader'),
-              options: {
-                limit: 10000, // 10kB
-                name: '[name].[hash:7].[ext]',
-                esModule: false,
-              },
-            },
-          ],
-        },
-        // Fallback to plain URL loader.
-        {
-          use: [
-            {
-              loader: require.resolve('url-loader'),
-              options: {
-                limit: 10000, // 10kB
-                name: '[name].[hash:7].[ext]',
-              },
-            },
-          ],
-        },
-      ],
-    }
-  )
-
-  return config
-}

package/src/index.ts

@@ -1,7 +0,0 @@
-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/src/interfaces/index.tsx

@@ -1,34 +0,0 @@
-import { ChangeEvent } from 'react'
-import {
-  SelectProps as MuiSelectProp,
-  InputProps as MuiInputProps,
-  OutlinedInputProps,
-} from '@material-ui/core'
-
-export interface ITopicTreeNode {
-  childTopics: ITopicTreeNode[]
-  id: string
-  isContentTopic: boolean
-  key: string
-  tags: string[]
-  title: string
-}
-export interface SelectProps extends MuiSelectProp {
-  placeholder: string
-  helperText?: string
-  InputProps?:
-    | (Partial<OutlinedInputProps> & {
-        onChange: (e: ChangeEvent<HTMLInputElement>) => void
-      })
-    | (object & Partial<MuiInputProps>)
-  SelectProps?: object | Partial<MuiSelectProp>
-  color?: 'primary' | 'secondary'
-  size?: 'medium' | 'small'
-  width?: number | string
-  selectMargin?: number | string
-  paperMaxHeight?: number | string
-  error?: boolean
-  hasLabel?: boolean
-  hasShrink?: boolean
-  disabled?: boolean
-}

package/src/lib/button/Button.stories.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-import { Button, ButtonProps } from './Button'
-
-export default {
-  component: Button,
-  title: 'Button',
-  argTypes: {
-    active: {
-      description: 'The Button is active or not.',
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    variant: {
-      table: {
-        defaultValue: { summary: 'contained' },
-      },
-    },
-    color: {
-      table: {
-        defaultValue: { summary: 'default' },
-      },
-    },
-    disabled: {
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    size: {
-      table: {
-        defaultValue: { summary: 'medium' },
-      },
-    },
-  },
-} as Meta
-
-const Template: Story<ButtonProps> = (args) => (
-  <Button {...args}>I'm a Button</Button>
-)
-
-export const TextOnly = Template.bind({})
-
-TextOnly.args = {
-  active: false,
-  variant: 'contained',
-  color: 'default',
-  disabled: false,
-  size: 'medium',
-}

package/src/lib/button/Button.tsx

@@ -1,85 +0,0 @@
-import React from 'react'
-import { styled, fade, Theme } from '@material-ui/core/styles'
-import {
-  Button as MuiButton,
-  ButtonProps as MuiButtonProps,
-} from '@material-ui/core'
-
-// self-defined-components
-const PREFIX = 'JuiButton'
-
-const classes = {
-  outlinedPrimary: `${PREFIX}-outlinedPrimary`,
-  outlinedSecondary: `${PREFIX}-outlinedSecondary`,
-  textPrimary: `${PREFIX}-textPrimary`,
-  textSecondary: `${PREFIX}-textSecondary`,
-  disabled: `${PREFIX}-disabled`,
-}
-
-interface StyleFuncProps {
-  active?: boolean
-  theme?: Theme
-}
-
-const StyledButton = styled(({ active: _active, ...other }) => (
-  <MuiButton classes={classes} {...other} />
-))(({ active, theme }: StyleFuncProps) => ({
-  [`&.${classes.outlinedPrimary}`]: {
-    backgroundColor: active
-      ? theme.palette.primary.main
-      : theme.palette.common.white,
-    color: active ? theme.palette.common.white : theme.palette.primary.main,
-    borderColor: theme.palette.primary.main,
-    '&:hover': {
-      backgroundColor: active
-        ? theme.palette.primary.main
-        : fade(theme.palette.primary.main, 0.1),
-    },
-    [`&.${classes.disabled}`]: {
-      backgroundColor: theme.palette.common.white,
-      borderColor: theme.palette.action.disabledBackground,
-      color: theme.palette.action.disabled,
-    },
-  },
-  [`&.${classes.outlinedSecondary}`]: {
-    backgroundColor: active
-      ? theme.palette.secondary.main
-      : theme.palette.common.white,
-    color: active ? theme.palette.common.white : theme.palette.secondary.main,
-    borderColor: theme.palette.secondary.main,
-    '&:hover': {
-      backgroundColor: active
-        ? theme.palette.secondary.main
-        : fade(theme.palette.secondary.main, 0.1),
-    },
-    [`&.${classes.disabled}`]: {
-      backgroundColor: theme.palette.common.white,
-      borderColor: theme.palette.action.disabledBackground,
-      color: theme.palette.action.disabled,
-    },
-  },
-  [`&.${classes.textPrimary}`]: {
-    '&:hover': {
-      backgroundColor: fade(theme.palette.primary.main, 0.1),
-    },
-  },
-  [`&.${classes.textSecondary}`]: {
-    '&:hover': {
-      backgroundColor: fade(theme.palette.secondary.main, 0.1),
-    },
-  },
-}))
-
-export interface ButtonProps extends MuiButtonProps {
-  active?: boolean
-}
-
-export const Button = ({ active, children, ...otherProps }: ButtonProps) => {
-  return (
-    <StyledButton active={active} {...otherProps}>
-      {children}
-    </StyledButton>
-  )
-}
-
-export default Button

package/src/lib/button-group/ButtonGroup.stories.tsx

@@ -1,59 +0,0 @@
-import React, { useState } from 'react'
-import { Story, Meta } from '@storybook/react'
-import { ButtonGroupProps as MuiButtonGroupProps } from '@material-ui/core'
-import { ButtonGroup } from './ButtonGroup'
-import { Button } from '../button/Button'
-
-const ButtonGroupWithState = (props: MuiButtonGroupProps) => {
-  const [activeId, setActiveId] = useState(null)
-
-  const buttons = ['JUI', 'MUI', 'Unstyled UI']
-
-  return (
-    <ButtonGroup {...props}>
-      {buttons.map((id) => (
-        <Button
-          key={id}
-          onClick={() => setActiveId(id)}
-          active={id === activeId}
-        >
-          {id}
-        </Button>
-      ))}
-    </ButtonGroup>
-  )
-}
-
-export default {
-  component: ButtonGroup,
-  title: 'ButtonGroup',
-  argTypes: {
-    variant: {
-      table: {
-        defaultValue: { summary: 'contained' },
-      },
-    },
-    color: {
-      table: {
-        defaultValue: { summary: 'default' },
-      },
-    },
-    disabled: {
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-} as Meta
-
-const Template: Story<MuiButtonGroupProps> = (args) => (
-  <ButtonGroupWithState {...args} />
-)
-
-export const Basic = Template.bind({})
-
-Basic.args = {
-  variant: 'contained',
-  color: 'default',
-  disabled: false,
-}

package/src/lib/button-group/ButtonGroup.tsx

@@ -1,37 +0,0 @@
-import React from 'react'
-import { styled, fade } from '@material-ui/core/styles'
-import {
-  ButtonGroup as MuiButtonGroup,
-  ButtonGroupProps as MuiButtonGroupProps,
-} from '@material-ui/core'
-
-const PREFIX = 'JuiButtonGroup'
-
-const classes = {
-  grouped: `${PREFIX}-grouped`,
-  groupedOutlinedPrimary: `${PREFIX}-groupedOutlinedPrimary`,
-  groupedOutlinedSecondary: `${PREFIX}-groupedOutlinedSecondary`,
-  disabled: `${PREFIX}-disabled`,
-}
-
-const StyledButtonGroup = styled(({ ...props }) => (
-  <MuiButtonGroup classes={classes} {...props} />
-))(({ theme }) => ({
-  [`& .${classes.groupedOutlinedPrimary}.${classes.grouped}.${classes.disabled}`]: {
-    borderColor: fade(theme.palette.primary.main, 0.5),
-    color: fade(theme.palette.primary.main, 0.5),
-  },
-  [`& .${classes.groupedOutlinedSecondary}.${classes.grouped}.${classes.disabled}`]: {
-    borderColor: fade(theme.palette.secondary.main, 0.5),
-    color: fade(theme.palette.secondary.main, 0.5),
-  },
-}))
-
-export const ButtonGroup = ({
-  children,
-  ...otherProps
-}: MuiButtonGroupProps) => (
-  <StyledButtonGroup {...otherProps}>{children}</StyledButtonGroup>
-)
-
-export default ButtonGroup