@junyiacademy/ui-test 0.0.13 → 1.4.2

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

@@ -17,10 +17,10 @@ export interface SelectProps extends MuiSelectProp {
     SelectProps?: object | Partial<MuiSelectProp>;
     color?: 'primary' | 'secondary';
     size?: 'medium' | 'small';
-    width?: number | 'auto';
-    paperMaxHeight?: number | 'auto';
+    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 | 'auto';
     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, 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, 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,19 +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}`]: {
+    [`&.${classes.menuItemSelected}`]: {
         backgroundColor: theme.palette.grey[300],
+        '&: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,20 +24,15 @@ const classes = {
     selectPaper: `${PREFIX}-menuPaper`,
 };
 const StyledFormControl = styles_1.styled((_a) => {
-    var { color: _color, width: _width } = _a, props = tslib_1.__rest(_a, ["color", "width"]);
-    return react_1.default.createElement(core_1.FormControl, Object.assign({}, props));
-})(({ color, width, theme }) => ({
-    margin: theme.spacing(1),
-    width: width,
+    var { color: _color } = _a, props = tslib_1.__rest(_a, ["color"]);
+    return (react_1.default.createElement(core_1.FormControl, Object.assign({}, props)));
+})(({ color, theme }) => ({
     backgroundColor: 'white',
     '&:hover': {
         [`& :not(.${classes.outlineInputDisabled}):not(.${classes.outlineInputError}) .${classes.outlineInputNotchedOutline}`]: {
             borderColor: theme.palette[color].main,
         },
     },
-    [`& .${classes.outlineInputError}.${classes.outlineInputFocused} .${classes.outlineInputNotchedOutline}`]: {
-        borderColor: `${theme.palette.error.main}`,
-    },
 }));
 const StyledInputLabel = styles_1.styled((_a) => {
     var { color: _color } = _a, props = tslib_1.__rest(_a, ["color"]);
@@ -69,15 +64,20 @@ const StyledInputLabel = styles_1.styled((_a) => {
 }));
 const StyledOutlinedInput = styles_1.styled((props) => (react_1.default.createElement(core_1.OutlinedInput, Object.assign({ classes: {
         root: classes.outlineInputRoot,
-        focused: classes.outlineInputFocused,
         input: classes.outlineInputInput,
+        focused: classes.outlineInputFocused,
         inputMarginDense: classes.outlineInputInputMarginDense,
         notchedOutline: classes.outlineInputNotchedOutline,
         disabled: classes.outlineInputDisabled,
         error: classes.outlineInputError,
     } }, props))))(({ theme }) => ({
-    [`&.${classes.outlineInputRoot}.${classes.outlineInputFocused}`]: {
-        backgroundColor: theme.palette.action.selected,
+    [`&.${classes.outlineInputRoot}`]: {
+        [`&.${classes.outlineInputError}.${classes.outlineInputFocused} .${classes.outlineInputNotchedOutline}`]: {
+            borderColor: `${theme.palette.error.main}`,
+        },
+        [`& .${classes.outlineInputInputMarginDense}`]: {
+            padding: '14.5px 15px 14.5px 12px',
+        },
     },
     [`& .${classes.outlineInputInput}`]: {
         color: theme.palette.text.primary,
@@ -85,9 +85,6 @@ const StyledOutlinedInput = styles_1.styled((props) => (react_1.default.createEl
             background: 'rgba(0,0,0,0)',
         },
     },
-    [`& .${classes.outlineInputInputMarginDense}`]: {
-        padding: '14.5px 15px 14.5px 12px',
-    },
 }));
 const StyledSelect = styles_1.styled((_a) => {
     var { paperMaxHeight: _paperMaxHeight, hasAdornment: _hasAdornment, className } = _a, props = tslib_1.__rest(_a, ["paperMaxHeight", "hasAdornment", "className"]);
@@ -112,10 +109,10 @@ const StyledSelect = styles_1.styled((_a) => {
         left: hasAdornment ? '24px !important' : '70px',
     },
 }));
-const OutlinedSelect = ({ placeholder, helperText, InputProps, SelectProps, children, color = 'primary', size = 'medium', width = 'auto', 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, 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

@@ -11,7 +11,6 @@ const classes = {
     inputLabelFocused: `${PREFIX}-inputLabelFocused`,
     inputLabelMarginDense: `${PREFIX}-inputLabelMarginDense`,
     inputLabelError: `${PREFIX}-inputLabelError`,
-    inputRoot: `${PREFIX}-inputRoot`,
     inputFocused: `${PREFIX}-inputFocused`,
     inputInput: `${PREFIX}-input`,
     inputUnderline: `${PREFIX}-inputUnderline`,
@@ -21,13 +20,6 @@ const classes = {
     selectPaper: `${PREFIX}-menuPaper`,
     selectDisabled: `${PREFIX}-selectDisabled`,
 };
-const StyledFormControl = styles_1.styled((_a) => {
-    var { width: _width } = _a, props = tslib_1.__rest(_a, ["width"]);
-    return (react_1.default.createElement(core_1.FormControl, Object.assign({}, props)));
-})(({ width, theme }) => ({
-    width,
-    margin: theme.spacing(0, 4, 4, 4),
-}));
 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: {
@@ -63,8 +55,6 @@ const StyledSelect = styles_1.styled((_a) => {
 const StyledInput = styles_1.styled((_a) => {
     var { color: _color } = _a, props = tslib_1.__rest(_a, ["color"]);
     return (react_1.default.createElement(core_1.Input, Object.assign({ classes: {
-            root: classes.inputRoot,
-            focused: classes.inputFocused,
             input: classes.inputInput,
             disabled: classes.inputDisabled,
             underline: classes.inputUnderline,
@@ -72,29 +62,26 @@ const StyledInput = styles_1.styled((_a) => {
         } }, props)));
 })(({ color, theme }) => ({
     color: theme.palette.text.primary,
-    [`&.${classes.inputRoot}.${classes.inputFocused}`]: {
-        backgroundColor: theme.palette.action.selected,
-    },
     [`& .${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 = 'medium', width = 'auto', 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, 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

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const styles_1 = require("@material-ui/core/styles");
 const ArrowRightRounded_1 = tslib_1.__importDefault(require("@material-ui/icons/ArrowRightRounded"));
-const OutlinedSelect_1 = tslib_1.__importDefault(require("../select/OutlinedSelect"));
+const Select_1 = tslib_1.__importDefault(require("../select/Select"));
 const SelectMenuItem_1 = tslib_1.__importDefault(require("../menu-item/SelectMenuItem"));
 // self-defined-configs
 const PLACEHOLDER = '請選擇';
@@ -20,6 +20,10 @@ 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),
@@ -82,12 +86,12 @@ const TopicFilter = ({ topicTree, onTopicSelected, isLastLayer, hasArrow, initSe
         setLayeredTopicList([topicTree]);
     }, [topicTree]);
     if (layeredTopicList.length === 0) {
-        return (react_1.default.createElement(OutlinedSelect_1.default, { size: 'small', width: 220, placeholder: '\u8F09\u5165\u8CC7\u6599\u4E2D...', disabled: true }));
+        return (react_1.default.createElement(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(OutlinedSelect_1.default, { size: 'small', width: 220, paperMaxHeight: 412, hasLabel: hasLabel, placeholder: PLACEHOLDER, value: (selectedTopicIds === null || selectedTopicIds === void 0 ? void 0 : selectedTopicIds[layerNumber]) || '', SelectProps: {
+            react_1.default.createElement(StyledSelect, { variant: 'outlined', size: 'medium', paperMaxHeight: 1000, hasLabel: hasLabel, placeholder: PLACEHOLDER, value: (selectedTopicIds === null || selectedTopicIds === void 0 ? void 0 : selectedTopicIds[layerNumber]) || '', SelectProps: {
                     'data-testid': `layered-topic-${layerNumber}`,
                 }, InputProps: {
                     inputProps: {
@@ -111,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": "0.0.13",
+  "version": "1.4.2",
   "description": "junyiacademy ui library",
   "main": "./dist/libs/ui/src/index.js",
   "typings": "./declarations/libs/ui/src/index.d.ts",
@@ -19,7 +19,7 @@
   "dependencies": {
     "@material-ui/core": "4.9.10",
     "@material-ui/icons": "4.9.1",
-    "react": "16.13.1"
+    "react": "17.0.2"
   },
   "devDependencies": {
     "typescript": "~4.1.4"

package/.eslintrc.json

@@ -1,24 +0,0 @@
-{
-  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "parserOptions": {
-        "project": [
-          "libs/ui/tsconfig.*?.json",
-          "libs/ui/.storybook/tsconfig.json"
-        ]
-      },
-      "rules": {}
-    },
-    {
-      "files": ["*.ts", "*.tsx"],
-      "rules": {}
-    },
-    {
-      "files": ["*.js", "*.jsx"],
-      "rules": {}
-    }
-  ]
-}

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/declarations/libs/ui/src/lib/alert/Alert.d.ts

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

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

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

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

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

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

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

package/jest.config.js

@@ -1,9 +0,0 @@
-module.exports = {
-  displayName: 'ui',
-  preset: '../../jest.preset.js',
-  transform: {
-    '^.+\\.[tj]sx?$': 'babel-jest',
-  },
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  coverageDirectory: '../../coverage/libs/ui',
-}

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,33 +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 | 'auto'
-  paperMaxHeight?: number | 'auto'
-  error?: boolean
-  hasLabel?: boolean
-  hasShrink?: boolean
-  disabled?: boolean
-}