@availity/mui-textfield 0.1.1 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/index.d.ts +8 -4
- package/dist/index.js +12 -54
- package/dist/index.mjs +19 -56
- package/package.json +3 -4
- package/src/lib/TextField.stories.tsx +121 -9
- package/src/lib/TextField.test.tsx +2 -2
- package/src/lib/TextField.tsx +30 -56
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [0.2.1](https://github.com/Availity/element/compare/@availity/mui-textfield@0.2.0...@availity/mui-textfield@0.2.1) (2023-11-07)
|
|
6
|
+
|
|
7
|
+
## [0.2.0](https://github.com/Availity/element/compare/@availity/mui-textfield@0.1.1...@availity/mui-textfield@0.2.0) (2023-10-20)
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
- **mui-textfield:** add select, wrap mui textfield ([c3329f9](https://github.com/Availity/element/commit/c3329f9ab6de35be3c07168f1d609c41fa29f79a))
|
|
12
|
+
|
|
5
13
|
## [0.1.1](https://github.com/Availity/element/compare/@availity/mui-textfield@0.1.0...@availity/mui-textfield@0.1.1) (2023-10-06)
|
|
6
14
|
|
|
7
15
|
## 0.1.0 (2023-09-25)
|
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { TextFieldProps as TextFieldProps$1 } from '@mui/material/TextField';
|
|
3
|
+
import { FormHelperTextProps, FormLabelProps, InputProps, SelectProps } from '@availity/mui-form-utils';
|
|
3
4
|
|
|
4
5
|
type TextFieldProps = {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
FormHelperTextProps?: FormHelperTextProps;
|
|
7
|
+
InputLabelProps?: FormLabelProps;
|
|
8
|
+
InputProps?: InputProps;
|
|
9
|
+
SelectProps?: SelectProps;
|
|
10
|
+
} & Pick<FormLabelProps, 'helpTopicId'> & Omit<TextFieldProps$1, 'variant'>;
|
|
11
|
+
declare const TextField: react.ForwardRefExoticComponent<Pick<TextFieldProps, "className" | "style" | "classes" | "children" | "color" | "sx" | "label" | "slot" | "select" | "title" | "id" | "lang" | "name" | "type" | "role" | "tabIndex" | "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" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "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" | "onResize" | "onResizeCapture" | "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" | "key" | "component" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "nonce" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "autoFocus" | "disabled" | "value" | "autoComplete" | "required" | "size" | "rows" | "error" | "margin" | "fullWidth" | "helpTopicId" | "inputRef" | "focused" | "inputProps" | "multiline" | "maxRows" | "minRows" | "hiddenLabel" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "SelectProps"> & react.RefAttributes<HTMLDivElement>>;
|
|
8
12
|
|
|
9
13
|
export { TextField, TextFieldProps };
|
package/dist/index.js
CHANGED
|
@@ -32,62 +32,20 @@ module.exports = __toCommonJS(src_exports);
|
|
|
32
32
|
|
|
33
33
|
// src/lib/TextField.tsx
|
|
34
34
|
var import_react = require("react");
|
|
35
|
-
var
|
|
36
|
-
var import_InputAdornment = __toESM(require("@mui/material/InputAdornment"));
|
|
37
|
-
var import_FormHelperText = __toESM(require("@mui/material/FormHelperText"));
|
|
35
|
+
var import_TextField = __toESM(require("@mui/material/TextField"));
|
|
38
36
|
var import_mui_form_utils = require("@availity/mui-form-utils");
|
|
39
|
-
var import_mui_icon = require("@availity/mui-icon");
|
|
40
37
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
41
|
-
var
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
id: labelId,
|
|
53
|
-
htmlFor: id,
|
|
54
|
-
required,
|
|
55
|
-
error: !!error,
|
|
56
|
-
disabled: rest.disabled,
|
|
57
|
-
children: label
|
|
58
|
-
}),
|
|
59
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_form_utils.Input, {
|
|
60
|
-
inputRef: ref,
|
|
61
|
-
id,
|
|
62
|
-
"aria-describedby": helperId,
|
|
63
|
-
error: !!error,
|
|
64
|
-
inputProps: size === "medium" ? mediumStyles : smallStyles,
|
|
65
|
-
startAdornment: startAdornment ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_InputAdornment.default, {
|
|
66
|
-
position: "start",
|
|
67
|
-
children: startAdornment
|
|
68
|
-
}) : void 0,
|
|
69
|
-
endAdornment: endAdornment ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_InputAdornment.default, {
|
|
70
|
-
position: "end",
|
|
71
|
-
children: endAdornment
|
|
72
|
-
}) : void 0,
|
|
73
|
-
size,
|
|
74
|
-
...rest
|
|
75
|
-
}),
|
|
76
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_FormHelperText.default, {
|
|
77
|
-
id: helperId,
|
|
78
|
-
error,
|
|
79
|
-
children: [
|
|
80
|
-
error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_icon.WarningTriangleIcon, {
|
|
81
|
-
sx: iconStyles
|
|
82
|
-
}),
|
|
83
|
-
helperText
|
|
84
|
-
]
|
|
85
|
-
})
|
|
86
|
-
]
|
|
87
|
-
});
|
|
88
|
-
}
|
|
89
|
-
);
|
|
90
|
-
TextField.displayName = "TextField";
|
|
38
|
+
var TextField = (0, import_react.forwardRef)((props, ref) => {
|
|
39
|
+
const { InputProps: InputProps2, helpTopicId, InputLabelProps, FormHelperTextProps: FormHelperTextProps2, SelectProps: SelectProps2, ...rest } = props;
|
|
40
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextField.default, {
|
|
41
|
+
...rest,
|
|
42
|
+
InputProps: { ...InputProps2, ...import_mui_form_utils.InputPropOverrides },
|
|
43
|
+
InputLabelProps: { component: import_mui_form_utils.FormLabel, helpTopicId, shrink: true, ...InputLabelProps },
|
|
44
|
+
FormHelperTextProps: { component: import_mui_form_utils.FormHelperText, ...FormHelperTextProps2 },
|
|
45
|
+
SelectProps: { ...SelectProps2, ...import_mui_form_utils.SelectPropOverrides },
|
|
46
|
+
ref
|
|
47
|
+
});
|
|
48
|
+
});
|
|
91
49
|
// Annotate the CommonJS export names for ESM import in node:
|
|
92
50
|
0 && (module.exports = {
|
|
93
51
|
TextField
|
package/dist/index.mjs
CHANGED
|
@@ -1,61 +1,24 @@
|
|
|
1
1
|
// src/lib/TextField.tsx
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
var
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
required,
|
|
23
|
-
error: !!error,
|
|
24
|
-
disabled: rest.disabled,
|
|
25
|
-
children: label
|
|
26
|
-
}),
|
|
27
|
-
/* @__PURE__ */ jsx(Input, {
|
|
28
|
-
inputRef: ref,
|
|
29
|
-
id,
|
|
30
|
-
"aria-describedby": helperId,
|
|
31
|
-
error: !!error,
|
|
32
|
-
inputProps: size === "medium" ? mediumStyles : smallStyles,
|
|
33
|
-
startAdornment: startAdornment ? /* @__PURE__ */ jsx(InputAdornment, {
|
|
34
|
-
position: "start",
|
|
35
|
-
children: startAdornment
|
|
36
|
-
}) : void 0,
|
|
37
|
-
endAdornment: endAdornment ? /* @__PURE__ */ jsx(InputAdornment, {
|
|
38
|
-
position: "end",
|
|
39
|
-
children: endAdornment
|
|
40
|
-
}) : void 0,
|
|
41
|
-
size,
|
|
42
|
-
...rest
|
|
43
|
-
}),
|
|
44
|
-
/* @__PURE__ */ jsxs(FormHelperText, {
|
|
45
|
-
id: helperId,
|
|
46
|
-
error,
|
|
47
|
-
children: [
|
|
48
|
-
error && /* @__PURE__ */ jsx(WarningTriangleIcon, {
|
|
49
|
-
sx: iconStyles
|
|
50
|
-
}),
|
|
51
|
-
helperText
|
|
52
|
-
]
|
|
53
|
-
})
|
|
54
|
-
]
|
|
55
|
-
});
|
|
56
|
-
}
|
|
57
|
-
);
|
|
58
|
-
TextField.displayName = "TextField";
|
|
3
|
+
import MuiTextField from "@mui/material/TextField";
|
|
4
|
+
import {
|
|
5
|
+
FormHelperText,
|
|
6
|
+
FormLabel,
|
|
7
|
+
InputPropOverrides,
|
|
8
|
+
SelectPropOverrides
|
|
9
|
+
} from "@availity/mui-form-utils";
|
|
10
|
+
import { jsx } from "react/jsx-runtime";
|
|
11
|
+
var TextField = forwardRef((props, ref) => {
|
|
12
|
+
const { InputProps: InputProps2, helpTopicId, InputLabelProps, FormHelperTextProps: FormHelperTextProps2, SelectProps: SelectProps2, ...rest } = props;
|
|
13
|
+
return /* @__PURE__ */ jsx(MuiTextField, {
|
|
14
|
+
...rest,
|
|
15
|
+
InputProps: { ...InputProps2, ...InputPropOverrides },
|
|
16
|
+
InputLabelProps: { component: FormLabel, helpTopicId, shrink: true, ...InputLabelProps },
|
|
17
|
+
FormHelperTextProps: { component: FormHelperText, ...FormHelperTextProps2 },
|
|
18
|
+
SelectProps: { ...SelectProps2, ...SelectPropOverrides },
|
|
19
|
+
ref
|
|
20
|
+
});
|
|
21
|
+
});
|
|
59
22
|
export {
|
|
60
23
|
TextField
|
|
61
24
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@availity/mui-textfield",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "Availity MUI Textfield Component - part of the @availity/element design system",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -28,13 +28,12 @@
|
|
|
28
28
|
"dev": "tsup src/index.ts --format esm,cjs --watch --dts",
|
|
29
29
|
"clean": "rm -rf dist",
|
|
30
30
|
"clean:nm": "rm -rf node_modules",
|
|
31
|
-
"bundlesize": "bundlesize",
|
|
32
31
|
"publish": "yarn npm publish --tolerate-republish --access public",
|
|
33
32
|
"publish:canary": "yarn npm publish --access public --tag canary"
|
|
34
33
|
},
|
|
35
34
|
"dependencies": {
|
|
36
|
-
"@availity/mui-form-utils": "0.
|
|
37
|
-
"@availity/mui-icon": "0.
|
|
35
|
+
"@availity/mui-form-utils": "0.5.1",
|
|
36
|
+
"@availity/mui-icon": "0.7.1"
|
|
38
37
|
},
|
|
39
38
|
"devDependencies": {
|
|
40
39
|
"@mui/material": "^5.14.12",
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
// Each exported component in the package should have its own stories file
|
|
2
2
|
import { useState } from 'react';
|
|
3
3
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
4
|
-
import {
|
|
4
|
+
import { Box, Chip, InputAdornment, MenuItem, SelectChangeEvent, Stack } from '@mui/material';
|
|
5
|
+
import { EyeIcon, EyeSlashIcon, SearchIcon } from '@availity/mui-icon';
|
|
5
6
|
import { IconButton } from '@availity/mui-button';
|
|
6
7
|
|
|
7
8
|
import { TextField, TextFieldProps } from './TextField';
|
|
@@ -10,6 +11,14 @@ const meta: Meta<typeof TextField> = {
|
|
|
10
11
|
title: 'Components/TextField/TextField',
|
|
11
12
|
component: TextField,
|
|
12
13
|
tags: ['autodocs'],
|
|
14
|
+
args: {
|
|
15
|
+
helperText: 'Helper Text',
|
|
16
|
+
},
|
|
17
|
+
argTypes: {
|
|
18
|
+
helperText: {
|
|
19
|
+
type: 'string',
|
|
20
|
+
},
|
|
21
|
+
},
|
|
13
22
|
};
|
|
14
23
|
|
|
15
24
|
export default meta;
|
|
@@ -19,27 +28,130 @@ export const _TextField: StoryObj<typeof TextField> = {
|
|
|
19
28
|
args: {
|
|
20
29
|
label: 'Field Label',
|
|
21
30
|
id: 'test',
|
|
31
|
+
helpTopicId: '123',
|
|
22
32
|
},
|
|
23
33
|
};
|
|
24
34
|
|
|
35
|
+
export const _States: StoryObj<typeof TextField> = {
|
|
36
|
+
render: (args: TextFieldProps) => (
|
|
37
|
+
<Stack direction="row" spacing={1}>
|
|
38
|
+
<TextField label="Default" id="default" {...args} />
|
|
39
|
+
<TextField label="Focused" id="Focused" focused {...args} />
|
|
40
|
+
<TextField label="Error" id="error" error {...args} />
|
|
41
|
+
<TextField label="Disabled" id="disabled" disabled {...args} />
|
|
42
|
+
</Stack>
|
|
43
|
+
),
|
|
44
|
+
args: {
|
|
45
|
+
margin: 'normal',
|
|
46
|
+
},
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
export const _WithIcon: StoryObj<typeof TextField> = {
|
|
50
|
+
render: () => (
|
|
51
|
+
<TextField
|
|
52
|
+
label="With Icon"
|
|
53
|
+
id="search"
|
|
54
|
+
InputProps={{
|
|
55
|
+
startAdornment: (
|
|
56
|
+
<InputAdornment position="start">
|
|
57
|
+
<SearchIcon />
|
|
58
|
+
</InputAdornment>
|
|
59
|
+
),
|
|
60
|
+
}}
|
|
61
|
+
/>
|
|
62
|
+
),
|
|
63
|
+
};
|
|
64
|
+
|
|
25
65
|
export const _PasswordField: StoryObj<typeof TextField> = {
|
|
26
|
-
render: (
|
|
66
|
+
render: () => {
|
|
27
67
|
const [showPassword, setShowPassword] = useState(false);
|
|
28
68
|
|
|
29
69
|
return (
|
|
30
70
|
<TextField
|
|
31
|
-
{...args}
|
|
32
71
|
type={showPassword ? 'text' : 'password'}
|
|
72
|
+
label="Password"
|
|
33
73
|
id="password"
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
74
|
+
InputProps={{
|
|
75
|
+
endAdornment: (
|
|
76
|
+
<InputAdornment position="end">
|
|
77
|
+
<IconButton
|
|
78
|
+
title="password visibility"
|
|
79
|
+
onClick={() => setShowPassword((prev) => !prev)}
|
|
80
|
+
edge="end"
|
|
81
|
+
size="small"
|
|
82
|
+
>
|
|
83
|
+
{showPassword ? <EyeIcon /> : <EyeSlashIcon />}
|
|
84
|
+
</IconButton>
|
|
85
|
+
</InputAdornment>
|
|
86
|
+
),
|
|
87
|
+
}}
|
|
39
88
|
/>
|
|
40
89
|
);
|
|
41
90
|
},
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
export const _Select: StoryObj<typeof TextField> = {
|
|
94
|
+
render: (args: TextFieldProps) => {
|
|
95
|
+
const [count, setCount] = useState('');
|
|
96
|
+
|
|
97
|
+
const handleChange = (event: SelectChangeEvent) => {
|
|
98
|
+
setCount(event.target.value as string);
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
return (
|
|
102
|
+
<TextField value={count} select SelectProps={{ onChange: handleChange }} {...args}>
|
|
103
|
+
<MenuItem value={10}>10</MenuItem>
|
|
104
|
+
<MenuItem value={20}>20</MenuItem>
|
|
105
|
+
<MenuItem value={30}>30</MenuItem>
|
|
106
|
+
</TextField>
|
|
107
|
+
);
|
|
108
|
+
},
|
|
109
|
+
args: {
|
|
110
|
+
label: 'Select',
|
|
111
|
+
},
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
export const _MultiSelect: StoryObj<typeof TextField> = {
|
|
115
|
+
render: (args: TextFieldProps) => {
|
|
116
|
+
const [multiValue, setMultiValue] = useState<string[]>([]);
|
|
117
|
+
|
|
118
|
+
const handleChange = (event: SelectChangeEvent<typeof multiValue>) => {
|
|
119
|
+
const {
|
|
120
|
+
target: { value },
|
|
121
|
+
} = event;
|
|
122
|
+
setMultiValue(
|
|
123
|
+
// On autofill we get a stringified value.
|
|
124
|
+
typeof value === 'string' ? value.split(',') : value
|
|
125
|
+
);
|
|
126
|
+
};
|
|
127
|
+
|
|
128
|
+
const options = ['one', 'two', 'three', 'four', 'five', 'six'];
|
|
129
|
+
|
|
130
|
+
const renderValue = (selected: typeof multiValue) => (
|
|
131
|
+
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
|
132
|
+
{selected.map((value) => (
|
|
133
|
+
<Chip key={value} label={value} />
|
|
134
|
+
))}
|
|
135
|
+
</Box>
|
|
136
|
+
);
|
|
137
|
+
|
|
138
|
+
return (
|
|
139
|
+
<TextField
|
|
140
|
+
id="multiple-chip"
|
|
141
|
+
select
|
|
142
|
+
SelectProps={{ multiple: true, onChange: handleChange, renderValue: renderValue }}
|
|
143
|
+
value={multiValue}
|
|
144
|
+
{...args}
|
|
145
|
+
>
|
|
146
|
+
{options.map((option) => (
|
|
147
|
+
<MenuItem key={option} value={option}>
|
|
148
|
+
{option}
|
|
149
|
+
</MenuItem>
|
|
150
|
+
))}
|
|
151
|
+
</TextField>
|
|
152
|
+
);
|
|
153
|
+
},
|
|
42
154
|
args: {
|
|
43
|
-
label: '
|
|
155
|
+
label: 'MultiSelect',
|
|
44
156
|
},
|
|
45
157
|
};
|
|
@@ -3,7 +3,7 @@ import { TextField } from './TextField';
|
|
|
3
3
|
|
|
4
4
|
describe('TextField', () => {
|
|
5
5
|
test('should render successfully', () => {
|
|
6
|
-
const {
|
|
7
|
-
expect(
|
|
6
|
+
const { getByLabelText } = render(<TextField label="Test" />);
|
|
7
|
+
expect(getByLabelText('Test')).toBeTruthy();
|
|
8
8
|
});
|
|
9
9
|
});
|
package/src/lib/TextField.tsx
CHANGED
|
@@ -1,60 +1,34 @@
|
|
|
1
1
|
import { forwardRef } from 'react';
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
helperText?: string;
|
|
10
|
-
} & Omit<
|
|
2
|
+
import MuiTextField, { TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';
|
|
3
|
+
import {
|
|
4
|
+
FormHelperText,
|
|
5
|
+
FormHelperTextProps,
|
|
6
|
+
FormLabel,
|
|
7
|
+
FormLabelProps,
|
|
8
|
+
InputPropOverrides,
|
|
11
9
|
InputProps,
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
| 'color'
|
|
16
|
-
| 'multiline'
|
|
17
|
-
| 'notched'
|
|
18
|
-
| 'fullWidth'
|
|
19
|
-
| 'inputProps'
|
|
20
|
-
>;
|
|
21
|
-
|
|
22
|
-
const smallStyles = { sx: { padding: '8px 8px' } };
|
|
23
|
-
const mediumStyles = { sx: { padding: '16px 8px' } };
|
|
24
|
-
const iconStyles = { marginRight: '4px', paddingTop: '4px' };
|
|
10
|
+
SelectPropOverrides,
|
|
11
|
+
SelectProps,
|
|
12
|
+
} from '@availity/mui-form-utils';
|
|
25
13
|
|
|
26
|
-
export
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
{label && (
|
|
34
|
-
<FormLabel id={labelId} htmlFor={id} required={required} error={!!error} disabled={rest.disabled}>
|
|
35
|
-
{label}
|
|
36
|
-
</FormLabel>
|
|
37
|
-
)}
|
|
38
|
-
<Input
|
|
39
|
-
inputRef={ref}
|
|
40
|
-
id={id}
|
|
41
|
-
aria-describedby={helperId}
|
|
42
|
-
error={!!error}
|
|
43
|
-
inputProps={size === 'medium' ? mediumStyles : smallStyles}
|
|
44
|
-
startAdornment={
|
|
45
|
-
startAdornment ? <InputAdornment position="start">{startAdornment}</InputAdornment> : undefined
|
|
46
|
-
}
|
|
47
|
-
endAdornment={endAdornment ? <InputAdornment position="end">{endAdornment}</InputAdornment> : undefined}
|
|
48
|
-
size={size}
|
|
49
|
-
{...rest}
|
|
50
|
-
/>
|
|
51
|
-
<FormHelperText id={helperId} error={error}>
|
|
52
|
-
{error && <WarningTriangleIcon sx={iconStyles} />}
|
|
53
|
-
{helperText}
|
|
54
|
-
</FormHelperText>
|
|
55
|
-
</FormControl>
|
|
56
|
-
);
|
|
57
|
-
}
|
|
58
|
-
);
|
|
14
|
+
export type TextFieldProps = {
|
|
15
|
+
FormHelperTextProps?: FormHelperTextProps;
|
|
16
|
+
InputLabelProps?: FormLabelProps;
|
|
17
|
+
InputProps?: InputProps;
|
|
18
|
+
SelectProps?: SelectProps;
|
|
19
|
+
} & Pick<FormLabelProps, 'helpTopicId'> &
|
|
20
|
+
Omit<MuiTextFieldProps, 'variant'>;
|
|
59
21
|
|
|
60
|
-
TextField
|
|
22
|
+
export const TextField = forwardRef<HTMLDivElement, TextFieldProps>((props, ref) => {
|
|
23
|
+
const { InputProps, helpTopicId, InputLabelProps, FormHelperTextProps, SelectProps, ...rest } = props;
|
|
24
|
+
return (
|
|
25
|
+
<MuiTextField
|
|
26
|
+
{...rest}
|
|
27
|
+
InputProps={{ ...InputProps, ...InputPropOverrides }}
|
|
28
|
+
InputLabelProps={{ component: FormLabel, helpTopicId: helpTopicId, shrink: true, ...InputLabelProps }}
|
|
29
|
+
FormHelperTextProps={{ component: FormHelperText, ...FormHelperTextProps }}
|
|
30
|
+
SelectProps={{ ...SelectProps, ...SelectPropOverrides }}
|
|
31
|
+
ref={ref}
|
|
32
|
+
/>
|
|
33
|
+
);
|
|
34
|
+
});
|