ece-docs-components 1.0.106 → 1.0.108
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/dist/cjs/components/AutocompleteSelect.js +67 -12
- package/dist/cjs/components/AutocompleteSelect.js.map +1 -1
- package/dist/cjs/node_modules/domhandler/lib/index.js +1 -1
- package/dist/cjs/node_modules/html-dom-parser/lib/index.js +1 -1
- package/dist/esm/components/AutocompleteSelect.js +67 -12
- package/dist/esm/components/AutocompleteSelect.js.map +1 -1
- package/dist/esm/node_modules/domhandler/lib/index.js +1 -1
- package/dist/esm/node_modules/html-dom-parser/lib/index.js +1 -1
- package/package.json +1 -1
|
@@ -15,12 +15,77 @@ function AutocompleteSelect({ id, label, error, helperText, placeholder, fullWid
|
|
|
15
15
|
return (jsxRuntime.jsxs(AutocompleteWrapper, { className: className, sx: [
|
|
16
16
|
{ ...(!fullWidth && { width: "auto" }) },
|
|
17
17
|
...(Array.isArray(sx) ? sx : [sx]),
|
|
18
|
-
], children: [label && (jsxRuntime.jsx(Input.StyledLabel, { htmlFor: selectId, shrink: false, children: label })), jsxRuntime.jsx(material.Autocomplete, { id: selectId, options: options, value: value, disabled: disabled,
|
|
18
|
+
], children: [label && (jsxRuntime.jsx(Input.StyledLabel, { htmlFor: selectId, shrink: false, children: label })), jsxRuntime.jsx(material.Autocomplete, { id: selectId, options: options, value: value, disabled: disabled, getOptionLabel: (option) => option?.label || "", isOptionEqualToValue: (option, val) => option?.value === val?.value, onChange: (_event, newValue) => onChange(newValue), popupIcon: jsxRuntime.jsx(iconsMaterial.ExpandMoreRounded, { sx: { color: `${theme.palette.dark.main}66` } }), slotProps: {
|
|
19
|
+
popper: {
|
|
20
|
+
sx: {
|
|
21
|
+
zIndex: (muiTheme) => muiTheme.zIndex.modal + 1,
|
|
22
|
+
},
|
|
23
|
+
modifiers: [
|
|
24
|
+
{
|
|
25
|
+
name: "flip",
|
|
26
|
+
options: {
|
|
27
|
+
padding: 8,
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
name: "preventOverflow",
|
|
32
|
+
options: {
|
|
33
|
+
padding: 8,
|
|
34
|
+
},
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
name: "setListboxMaxHeight",
|
|
38
|
+
enabled: true,
|
|
39
|
+
phase: "beforeWrite",
|
|
40
|
+
fn: ({ state }) => {
|
|
41
|
+
if (typeof window === "undefined")
|
|
42
|
+
return;
|
|
43
|
+
const viewportMargin = 8;
|
|
44
|
+
const maxHeight = 352;
|
|
45
|
+
const minHeight = 96;
|
|
46
|
+
const referenceRect = state.elements.reference.getBoundingClientRect();
|
|
47
|
+
const isAbove = state.placement.startsWith("top");
|
|
48
|
+
const availableHeight = isAbove
|
|
49
|
+
? referenceRect.top - viewportMargin
|
|
50
|
+
: window.innerHeight -
|
|
51
|
+
referenceRect.bottom -
|
|
52
|
+
viewportMargin;
|
|
53
|
+
state.styles.popper = {
|
|
54
|
+
...state.styles.popper,
|
|
55
|
+
"--AutocompleteSelect-listbox-max-height": `${Math.max(minHeight, Math.min(maxHeight, availableHeight))}px`,
|
|
56
|
+
};
|
|
57
|
+
},
|
|
58
|
+
},
|
|
59
|
+
],
|
|
60
|
+
},
|
|
61
|
+
listbox: {
|
|
62
|
+
sx: {
|
|
63
|
+
m: 0,
|
|
64
|
+
p: 0,
|
|
65
|
+
maxHeight: "var(--AutocompleteSelect-listbox-max-height, min(22rem, calc(100vh - 6rem)))",
|
|
66
|
+
backgroundColor: theme.palette.light.main,
|
|
67
|
+
overflowY: "auto",
|
|
68
|
+
"& .MuiAutocomplete-option": {
|
|
69
|
+
m: 0,
|
|
70
|
+
width: "100%",
|
|
71
|
+
boxSizing: "border-box",
|
|
72
|
+
borderRadius: 0,
|
|
73
|
+
backgroundColor: theme.palette.light.main,
|
|
74
|
+
fontSize: "1rem",
|
|
75
|
+
color: theme.palette.dark.main,
|
|
76
|
+
'&[aria-selected="true"]': {
|
|
77
|
+
backgroundColor: theme.palette.light.main,
|
|
78
|
+
},
|
|
79
|
+
'&[aria-selected="true"].Mui-focused, &:hover, &.Mui-focused': {
|
|
80
|
+
backgroundColor: `${theme.palette.primary.main}1A !important`,
|
|
81
|
+
},
|
|
82
|
+
},
|
|
83
|
+
},
|
|
84
|
+
},
|
|
19
85
|
paper: {
|
|
20
86
|
sx: {
|
|
21
87
|
borderRadius: 2,
|
|
22
88
|
boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
|
|
23
|
-
maxHeight: "min(22rem, calc(100vh - 6rem))",
|
|
24
89
|
overflow: "hidden",
|
|
25
90
|
backgroundColor: theme.palette.light.main,
|
|
26
91
|
mt: 0.5,
|
|
@@ -36,16 +101,6 @@ function AutocompleteSelect({ id, label, error, helperText, placeholder, fullWid
|
|
|
36
101
|
"& .MuiAutocomplete-input": {
|
|
37
102
|
padding: "0 !important",
|
|
38
103
|
},
|
|
39
|
-
"& + .MuiAutocomplete-popper .MuiAutocomplete-option": {
|
|
40
|
-
fontSize: "1rem",
|
|
41
|
-
color: theme.palette.dark.main,
|
|
42
|
-
'&[aria-selected="true"]': {
|
|
43
|
-
backgroundColor: "transparent",
|
|
44
|
-
},
|
|
45
|
-
'&[aria-selected="true"].Mui-focused, &:hover, &.Mui-focused': {
|
|
46
|
-
backgroundColor: `${theme.palette.primary.main}1A !important`,
|
|
47
|
-
},
|
|
48
|
-
},
|
|
49
104
|
}, renderInput: (params) => {
|
|
50
105
|
// 1. Separate structural configurations from direct props
|
|
51
106
|
const { InputProps, inputProps, ...restParams } = params;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AutocompleteSelect.js","sources":["../../../../src/components/AutocompleteSelect.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n Autocomplete as MuiAutocomplete,\n FormHelperText,\n styled,\n} from \"@mui/material\";\nimport { ExpandMoreRounded } from \"@mui/icons-material\";\nimport { useTheme } from \"../ThemeProvider\"; // Adjust pathway according to project layout\nimport { Input, StyledLabel } from \"./Input\";\n\ninterface AutocompleteOption {\n value: string;\n label: string;\n}\n\ninterface AutocompleteSelectProps {\n id?: string;\n label?: string;\n error?: string;\n helperText?: string;\n placeholder?: string;\n fullWidth?: boolean;\n disabled?: boolean;\n options: AutocompleteOption[];\n value: AutocompleteOption | null;\n onChange: (value: AutocompleteOption | null) => void;\n className?: string;\n sx?: any;\n}\n\nconst AutocompleteWrapper = styled(\"div\")({\n width: \"100%\",\n});\n\nexport function AutocompleteSelect({\n id,\n label,\n error,\n helperText,\n placeholder,\n fullWidth = false,\n disabled = false,\n options,\n value,\n onChange,\n className = \"\",\n sx,\n}: AutocompleteSelectProps): React.JSX.Element {\n const theme = useTheme();\n const selectId =\n id || `auto-select-${Math.random().toString(36).substr(2, 9)}`;\n\n return (\n <AutocompleteWrapper\n className={className}\n sx={[\n { ...(!fullWidth && { width: \"auto\" }) },\n ...(Array.isArray(sx) ? sx : [sx]),\n ]}\n >\n {label && (\n <StyledLabel htmlFor={selectId} shrink={false}>\n {label}\n </StyledLabel>\n )}\n\n <MuiAutocomplete\n id={selectId}\n options={options}\n value={value}\n disabled={disabled}\n disablePortal\n getOptionLabel={(option: { label: string; value: string }) =>\n option?.label || \"\"\n }\n isOptionEqualToValue={(\n option: AutocompleteOption,\n val: AutocompleteOption,\n ) => option?.value === val?.value}\n onChange={(_event, newValue) => onChange(newValue)}\n popupIcon={\n <ExpandMoreRounded sx={{ color: `${theme.palette.dark.main}66` }} />\n }\n slotProps={{\n paper: {\n sx: {\n borderRadius: 2,\n boxShadow:\n \"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)\",\n maxHeight: \"min(22rem, calc(100vh - 6rem))\",\n overflow: \"hidden\",\n backgroundColor: theme.palette.light.main,\n mt: 0.5,\n },\n },\n }}\n sx={{\n \"& .MuiOutlinedInput-root\": {\n padding: \"0 9px !important\",\n height: 48,\n display: \"flex\",\n alignItems: \"center\",\n },\n \"& .MuiAutocomplete-input\": {\n padding: \"0 !important\",\n },\n \"& + .MuiAutocomplete-popper .MuiAutocomplete-option\": {\n fontSize: \"1rem\",\n color: theme.palette.dark.main,\n '&[aria-selected=\"true\"]': {\n backgroundColor: \"transparent\",\n },\n '&[aria-selected=\"true\"].Mui-focused, &:hover, &.Mui-focused': {\n backgroundColor: `${theme.palette.primary.main}1A !important`,\n },\n },\n }}\n renderInput={(params: any) => {\n // 1. Separate structural configurations from direct props\n const { InputProps, inputProps, ...restParams } = params;\n\n return (\n <Input\n {...restParams}\n // 2. Safely spread native input elements\n inputProps={inputProps}\n // 3. Bind MUI's dynamic layout objects (adornments, ref) into the slot configuration\n InputProps={{\n ...InputProps,\n }}\n error={error}\n placeholder={placeholder}\n fullWidth\n // Explicitly empty string avoids passing a raw error object down to helperText slots\n helperText=\"\"\n />\n );\n }}\n />\n\n {error && (\n <FormHelperText\n sx={{\n mt: 0.75,\n fontSize: \"0.875rem\",\n color: theme.palette.error.main,\n }}\n >\n {error}\n </FormHelperText>\n )}\n\n {helperText && !error && (\n <FormHelperText\n sx={{\n mt: 0.75,\n fontSize: \"0.875rem\",\n color: `${theme.palette.dark.main}99`,\n }}\n >\n {helperText}\n </FormHelperText>\n )}\n </AutocompleteWrapper>\n );\n}\n"],"names":["styled","useTheme","_jsxs","_jsx","StyledLabel","MuiAutocomplete","ExpandMoreRounded","Input","FormHelperText"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"AutocompleteSelect.js","sources":["../../../../src/components/AutocompleteSelect.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n Autocomplete as MuiAutocomplete,\n FormHelperText,\n styled,\n} from \"@mui/material\";\nimport { ExpandMoreRounded } from \"@mui/icons-material\";\nimport { useTheme } from \"../ThemeProvider\"; // Adjust pathway according to project layout\nimport { Input, StyledLabel } from \"./Input\";\n\ninterface AutocompleteOption {\n value: string;\n label: string;\n}\n\ninterface AutocompleteSelectProps {\n id?: string;\n label?: string;\n error?: string;\n helperText?: string;\n placeholder?: string;\n fullWidth?: boolean;\n disabled?: boolean;\n options: AutocompleteOption[];\n value: AutocompleteOption | null;\n onChange: (value: AutocompleteOption | null) => void;\n className?: string;\n sx?: any;\n}\n\nconst AutocompleteWrapper = styled(\"div\")({\n width: \"100%\",\n});\n\nexport function AutocompleteSelect({\n id,\n label,\n error,\n helperText,\n placeholder,\n fullWidth = false,\n disabled = false,\n options,\n value,\n onChange,\n className = \"\",\n sx,\n}: AutocompleteSelectProps): React.JSX.Element {\n const theme = useTheme();\n const selectId =\n id || `auto-select-${Math.random().toString(36).substr(2, 9)}`;\n\n return (\n <AutocompleteWrapper\n className={className}\n sx={[\n { ...(!fullWidth && { width: \"auto\" }) },\n ...(Array.isArray(sx) ? sx : [sx]),\n ]}\n >\n {label && (\n <StyledLabel htmlFor={selectId} shrink={false}>\n {label}\n </StyledLabel>\n )}\n\n <MuiAutocomplete\n id={selectId}\n options={options}\n value={value}\n disabled={disabled}\n getOptionLabel={(option: { label: string; value: string }) =>\n option?.label || \"\"\n }\n isOptionEqualToValue={(\n option: AutocompleteOption,\n val: AutocompleteOption,\n ) => option?.value === val?.value}\n onChange={(_event, newValue) => onChange(newValue)}\n popupIcon={\n <ExpandMoreRounded sx={{ color: `${theme.palette.dark.main}66` }} />\n }\n slotProps={{\n popper: {\n sx: {\n zIndex: (muiTheme) => muiTheme.zIndex.modal + 1,\n },\n modifiers: [\n {\n name: \"flip\",\n options: {\n padding: 8,\n },\n },\n {\n name: \"preventOverflow\",\n options: {\n padding: 8,\n },\n },\n {\n name: \"setListboxMaxHeight\",\n enabled: true,\n phase: \"beforeWrite\",\n fn: ({ state }: any) => {\n if (typeof window === \"undefined\") return;\n\n const viewportMargin = 8;\n const maxHeight = 352;\n const minHeight = 96;\n const referenceRect =\n state.elements.reference.getBoundingClientRect();\n const isAbove = state.placement.startsWith(\"top\");\n const availableHeight = isAbove\n ? referenceRect.top - viewportMargin\n : window.innerHeight -\n referenceRect.bottom -\n viewportMargin;\n\n state.styles.popper = {\n ...state.styles.popper,\n \"--AutocompleteSelect-listbox-max-height\": `${Math.max(\n minHeight,\n Math.min(maxHeight, availableHeight),\n )}px`,\n };\n },\n },\n ],\n },\n listbox: {\n sx: {\n m: 0,\n p: 0,\n maxHeight:\n \"var(--AutocompleteSelect-listbox-max-height, min(22rem, calc(100vh - 6rem)))\",\n backgroundColor: theme.palette.light.main,\n overflowY: \"auto\",\n \"& .MuiAutocomplete-option\": {\n m: 0,\n width: \"100%\",\n boxSizing: \"border-box\",\n borderRadius: 0,\n backgroundColor: theme.palette.light.main,\n fontSize: \"1rem\",\n color: theme.palette.dark.main,\n '&[aria-selected=\"true\"]': {\n backgroundColor: theme.palette.light.main,\n },\n '&[aria-selected=\"true\"].Mui-focused, &:hover, &.Mui-focused':\n {\n backgroundColor: `${theme.palette.primary.main}1A !important`,\n },\n },\n },\n },\n paper: {\n sx: {\n borderRadius: 2,\n boxShadow:\n \"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)\",\n overflow: \"hidden\",\n backgroundColor: theme.palette.light.main,\n mt: 0.5,\n },\n },\n }}\n sx={{\n \"& .MuiOutlinedInput-root\": {\n padding: \"0 9px !important\",\n height: 48,\n display: \"flex\",\n alignItems: \"center\",\n },\n \"& .MuiAutocomplete-input\": {\n padding: \"0 !important\",\n },\n }}\n renderInput={(params: any) => {\n // 1. Separate structural configurations from direct props\n const { InputProps, inputProps, ...restParams } = params;\n\n return (\n <Input\n {...restParams}\n // 2. Safely spread native input elements\n inputProps={inputProps}\n // 3. Bind MUI's dynamic layout objects (adornments, ref) into the slot configuration\n InputProps={{\n ...InputProps,\n }}\n error={error}\n placeholder={placeholder}\n fullWidth\n // Explicitly empty string avoids passing a raw error object down to helperText slots\n helperText=\"\"\n />\n );\n }}\n />\n\n {error && (\n <FormHelperText\n sx={{\n mt: 0.75,\n fontSize: \"0.875rem\",\n color: theme.palette.error.main,\n }}\n >\n {error}\n </FormHelperText>\n )}\n\n {helperText && !error && (\n <FormHelperText\n sx={{\n mt: 0.75,\n fontSize: \"0.875rem\",\n color: `${theme.palette.dark.main}99`,\n }}\n >\n {helperText}\n </FormHelperText>\n )}\n </AutocompleteWrapper>\n );\n}\n"],"names":["styled","useTheme","_jsxs","_jsx","StyledLabel","MuiAutocomplete","ExpandMoreRounded","Input","FormHelperText"],"mappings":"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"}
|
|
@@ -13,12 +13,77 @@ function AutocompleteSelect({ id, label, error, helperText, placeholder, fullWid
|
|
|
13
13
|
return (jsxs(AutocompleteWrapper, { className: className, sx: [
|
|
14
14
|
{ ...(!fullWidth && { width: "auto" }) },
|
|
15
15
|
...(Array.isArray(sx) ? sx : [sx]),
|
|
16
|
-
], children: [label && (jsx(StyledLabel, { htmlFor: selectId, shrink: false, children: label })), jsx(Autocomplete, { id: selectId, options: options, value: value, disabled: disabled,
|
|
16
|
+
], children: [label && (jsx(StyledLabel, { htmlFor: selectId, shrink: false, children: label })), jsx(Autocomplete, { id: selectId, options: options, value: value, disabled: disabled, getOptionLabel: (option) => option?.label || "", isOptionEqualToValue: (option, val) => option?.value === val?.value, onChange: (_event, newValue) => onChange(newValue), popupIcon: jsx(ExpandMoreRounded, { sx: { color: `${theme.palette.dark.main}66` } }), slotProps: {
|
|
17
|
+
popper: {
|
|
18
|
+
sx: {
|
|
19
|
+
zIndex: (muiTheme) => muiTheme.zIndex.modal + 1,
|
|
20
|
+
},
|
|
21
|
+
modifiers: [
|
|
22
|
+
{
|
|
23
|
+
name: "flip",
|
|
24
|
+
options: {
|
|
25
|
+
padding: 8,
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
name: "preventOverflow",
|
|
30
|
+
options: {
|
|
31
|
+
padding: 8,
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
name: "setListboxMaxHeight",
|
|
36
|
+
enabled: true,
|
|
37
|
+
phase: "beforeWrite",
|
|
38
|
+
fn: ({ state }) => {
|
|
39
|
+
if (typeof window === "undefined")
|
|
40
|
+
return;
|
|
41
|
+
const viewportMargin = 8;
|
|
42
|
+
const maxHeight = 352;
|
|
43
|
+
const minHeight = 96;
|
|
44
|
+
const referenceRect = state.elements.reference.getBoundingClientRect();
|
|
45
|
+
const isAbove = state.placement.startsWith("top");
|
|
46
|
+
const availableHeight = isAbove
|
|
47
|
+
? referenceRect.top - viewportMargin
|
|
48
|
+
: window.innerHeight -
|
|
49
|
+
referenceRect.bottom -
|
|
50
|
+
viewportMargin;
|
|
51
|
+
state.styles.popper = {
|
|
52
|
+
...state.styles.popper,
|
|
53
|
+
"--AutocompleteSelect-listbox-max-height": `${Math.max(minHeight, Math.min(maxHeight, availableHeight))}px`,
|
|
54
|
+
};
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
],
|
|
58
|
+
},
|
|
59
|
+
listbox: {
|
|
60
|
+
sx: {
|
|
61
|
+
m: 0,
|
|
62
|
+
p: 0,
|
|
63
|
+
maxHeight: "var(--AutocompleteSelect-listbox-max-height, min(22rem, calc(100vh - 6rem)))",
|
|
64
|
+
backgroundColor: theme.palette.light.main,
|
|
65
|
+
overflowY: "auto",
|
|
66
|
+
"& .MuiAutocomplete-option": {
|
|
67
|
+
m: 0,
|
|
68
|
+
width: "100%",
|
|
69
|
+
boxSizing: "border-box",
|
|
70
|
+
borderRadius: 0,
|
|
71
|
+
backgroundColor: theme.palette.light.main,
|
|
72
|
+
fontSize: "1rem",
|
|
73
|
+
color: theme.palette.dark.main,
|
|
74
|
+
'&[aria-selected="true"]': {
|
|
75
|
+
backgroundColor: theme.palette.light.main,
|
|
76
|
+
},
|
|
77
|
+
'&[aria-selected="true"].Mui-focused, &:hover, &.Mui-focused': {
|
|
78
|
+
backgroundColor: `${theme.palette.primary.main}1A !important`,
|
|
79
|
+
},
|
|
80
|
+
},
|
|
81
|
+
},
|
|
82
|
+
},
|
|
17
83
|
paper: {
|
|
18
84
|
sx: {
|
|
19
85
|
borderRadius: 2,
|
|
20
86
|
boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
|
|
21
|
-
maxHeight: "min(22rem, calc(100vh - 6rem))",
|
|
22
87
|
overflow: "hidden",
|
|
23
88
|
backgroundColor: theme.palette.light.main,
|
|
24
89
|
mt: 0.5,
|
|
@@ -34,16 +99,6 @@ function AutocompleteSelect({ id, label, error, helperText, placeholder, fullWid
|
|
|
34
99
|
"& .MuiAutocomplete-input": {
|
|
35
100
|
padding: "0 !important",
|
|
36
101
|
},
|
|
37
|
-
"& + .MuiAutocomplete-popper .MuiAutocomplete-option": {
|
|
38
|
-
fontSize: "1rem",
|
|
39
|
-
color: theme.palette.dark.main,
|
|
40
|
-
'&[aria-selected="true"]': {
|
|
41
|
-
backgroundColor: "transparent",
|
|
42
|
-
},
|
|
43
|
-
'&[aria-selected="true"].Mui-focused, &:hover, &.Mui-focused': {
|
|
44
|
-
backgroundColor: `${theme.palette.primary.main}1A !important`,
|
|
45
|
-
},
|
|
46
|
-
},
|
|
47
102
|
}, renderInput: (params) => {
|
|
48
103
|
// 1. Separate structural configurations from direct props
|
|
49
104
|
const { InputProps, inputProps, ...restParams } = params;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AutocompleteSelect.js","sources":["../../../../src/components/AutocompleteSelect.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n Autocomplete as MuiAutocomplete,\n FormHelperText,\n styled,\n} from \"@mui/material\";\nimport { ExpandMoreRounded } from \"@mui/icons-material\";\nimport { useTheme } from \"../ThemeProvider\"; // Adjust pathway according to project layout\nimport { Input, StyledLabel } from \"./Input\";\n\ninterface AutocompleteOption {\n value: string;\n label: string;\n}\n\ninterface AutocompleteSelectProps {\n id?: string;\n label?: string;\n error?: string;\n helperText?: string;\n placeholder?: string;\n fullWidth?: boolean;\n disabled?: boolean;\n options: AutocompleteOption[];\n value: AutocompleteOption | null;\n onChange: (value: AutocompleteOption | null) => void;\n className?: string;\n sx?: any;\n}\n\nconst AutocompleteWrapper = styled(\"div\")({\n width: \"100%\",\n});\n\nexport function AutocompleteSelect({\n id,\n label,\n error,\n helperText,\n placeholder,\n fullWidth = false,\n disabled = false,\n options,\n value,\n onChange,\n className = \"\",\n sx,\n}: AutocompleteSelectProps): React.JSX.Element {\n const theme = useTheme();\n const selectId =\n id || `auto-select-${Math.random().toString(36).substr(2, 9)}`;\n\n return (\n <AutocompleteWrapper\n className={className}\n sx={[\n { ...(!fullWidth && { width: \"auto\" }) },\n ...(Array.isArray(sx) ? sx : [sx]),\n ]}\n >\n {label && (\n <StyledLabel htmlFor={selectId} shrink={false}>\n {label}\n </StyledLabel>\n )}\n\n <MuiAutocomplete\n id={selectId}\n options={options}\n value={value}\n disabled={disabled}\n disablePortal\n getOptionLabel={(option: { label: string; value: string }) =>\n option?.label || \"\"\n }\n isOptionEqualToValue={(\n option: AutocompleteOption,\n val: AutocompleteOption,\n ) => option?.value === val?.value}\n onChange={(_event, newValue) => onChange(newValue)}\n popupIcon={\n <ExpandMoreRounded sx={{ color: `${theme.palette.dark.main}66` }} />\n }\n slotProps={{\n paper: {\n sx: {\n borderRadius: 2,\n boxShadow:\n \"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)\",\n maxHeight: \"min(22rem, calc(100vh - 6rem))\",\n overflow: \"hidden\",\n backgroundColor: theme.palette.light.main,\n mt: 0.5,\n },\n },\n }}\n sx={{\n \"& .MuiOutlinedInput-root\": {\n padding: \"0 9px !important\",\n height: 48,\n display: \"flex\",\n alignItems: \"center\",\n },\n \"& .MuiAutocomplete-input\": {\n padding: \"0 !important\",\n },\n \"& + .MuiAutocomplete-popper .MuiAutocomplete-option\": {\n fontSize: \"1rem\",\n color: theme.palette.dark.main,\n '&[aria-selected=\"true\"]': {\n backgroundColor: \"transparent\",\n },\n '&[aria-selected=\"true\"].Mui-focused, &:hover, &.Mui-focused': {\n backgroundColor: `${theme.palette.primary.main}1A !important`,\n },\n },\n }}\n renderInput={(params: any) => {\n // 1. Separate structural configurations from direct props\n const { InputProps, inputProps, ...restParams } = params;\n\n return (\n <Input\n {...restParams}\n // 2. Safely spread native input elements\n inputProps={inputProps}\n // 3. Bind MUI's dynamic layout objects (adornments, ref) into the slot configuration\n InputProps={{\n ...InputProps,\n }}\n error={error}\n placeholder={placeholder}\n fullWidth\n // Explicitly empty string avoids passing a raw error object down to helperText slots\n helperText=\"\"\n />\n );\n }}\n />\n\n {error && (\n <FormHelperText\n sx={{\n mt: 0.75,\n fontSize: \"0.875rem\",\n color: theme.palette.error.main,\n }}\n >\n {error}\n </FormHelperText>\n )}\n\n {helperText && !error && (\n <FormHelperText\n sx={{\n mt: 0.75,\n fontSize: \"0.875rem\",\n color: `${theme.palette.dark.main}99`,\n }}\n >\n {helperText}\n </FormHelperText>\n )}\n </AutocompleteWrapper>\n );\n}\n"],"names":["_jsxs","_jsx","MuiAutocomplete"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"AutocompleteSelect.js","sources":["../../../../src/components/AutocompleteSelect.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n Autocomplete as MuiAutocomplete,\n FormHelperText,\n styled,\n} from \"@mui/material\";\nimport { ExpandMoreRounded } from \"@mui/icons-material\";\nimport { useTheme } from \"../ThemeProvider\"; // Adjust pathway according to project layout\nimport { Input, StyledLabel } from \"./Input\";\n\ninterface AutocompleteOption {\n value: string;\n label: string;\n}\n\ninterface AutocompleteSelectProps {\n id?: string;\n label?: string;\n error?: string;\n helperText?: string;\n placeholder?: string;\n fullWidth?: boolean;\n disabled?: boolean;\n options: AutocompleteOption[];\n value: AutocompleteOption | null;\n onChange: (value: AutocompleteOption | null) => void;\n className?: string;\n sx?: any;\n}\n\nconst AutocompleteWrapper = styled(\"div\")({\n width: \"100%\",\n});\n\nexport function AutocompleteSelect({\n id,\n label,\n error,\n helperText,\n placeholder,\n fullWidth = false,\n disabled = false,\n options,\n value,\n onChange,\n className = \"\",\n sx,\n}: AutocompleteSelectProps): React.JSX.Element {\n const theme = useTheme();\n const selectId =\n id || `auto-select-${Math.random().toString(36).substr(2, 9)}`;\n\n return (\n <AutocompleteWrapper\n className={className}\n sx={[\n { ...(!fullWidth && { width: \"auto\" }) },\n ...(Array.isArray(sx) ? sx : [sx]),\n ]}\n >\n {label && (\n <StyledLabel htmlFor={selectId} shrink={false}>\n {label}\n </StyledLabel>\n )}\n\n <MuiAutocomplete\n id={selectId}\n options={options}\n value={value}\n disabled={disabled}\n getOptionLabel={(option: { label: string; value: string }) =>\n option?.label || \"\"\n }\n isOptionEqualToValue={(\n option: AutocompleteOption,\n val: AutocompleteOption,\n ) => option?.value === val?.value}\n onChange={(_event, newValue) => onChange(newValue)}\n popupIcon={\n <ExpandMoreRounded sx={{ color: `${theme.palette.dark.main}66` }} />\n }\n slotProps={{\n popper: {\n sx: {\n zIndex: (muiTheme) => muiTheme.zIndex.modal + 1,\n },\n modifiers: [\n {\n name: \"flip\",\n options: {\n padding: 8,\n },\n },\n {\n name: \"preventOverflow\",\n options: {\n padding: 8,\n },\n },\n {\n name: \"setListboxMaxHeight\",\n enabled: true,\n phase: \"beforeWrite\",\n fn: ({ state }: any) => {\n if (typeof window === \"undefined\") return;\n\n const viewportMargin = 8;\n const maxHeight = 352;\n const minHeight = 96;\n const referenceRect =\n state.elements.reference.getBoundingClientRect();\n const isAbove = state.placement.startsWith(\"top\");\n const availableHeight = isAbove\n ? referenceRect.top - viewportMargin\n : window.innerHeight -\n referenceRect.bottom -\n viewportMargin;\n\n state.styles.popper = {\n ...state.styles.popper,\n \"--AutocompleteSelect-listbox-max-height\": `${Math.max(\n minHeight,\n Math.min(maxHeight, availableHeight),\n )}px`,\n };\n },\n },\n ],\n },\n listbox: {\n sx: {\n m: 0,\n p: 0,\n maxHeight:\n \"var(--AutocompleteSelect-listbox-max-height, min(22rem, calc(100vh - 6rem)))\",\n backgroundColor: theme.palette.light.main,\n overflowY: \"auto\",\n \"& .MuiAutocomplete-option\": {\n m: 0,\n width: \"100%\",\n boxSizing: \"border-box\",\n borderRadius: 0,\n backgroundColor: theme.palette.light.main,\n fontSize: \"1rem\",\n color: theme.palette.dark.main,\n '&[aria-selected=\"true\"]': {\n backgroundColor: theme.palette.light.main,\n },\n '&[aria-selected=\"true\"].Mui-focused, &:hover, &.Mui-focused':\n {\n backgroundColor: `${theme.palette.primary.main}1A !important`,\n },\n },\n },\n },\n paper: {\n sx: {\n borderRadius: 2,\n boxShadow:\n \"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)\",\n overflow: \"hidden\",\n backgroundColor: theme.palette.light.main,\n mt: 0.5,\n },\n },\n }}\n sx={{\n \"& .MuiOutlinedInput-root\": {\n padding: \"0 9px !important\",\n height: 48,\n display: \"flex\",\n alignItems: \"center\",\n },\n \"& .MuiAutocomplete-input\": {\n padding: \"0 !important\",\n },\n }}\n renderInput={(params: any) => {\n // 1. Separate structural configurations from direct props\n const { InputProps, inputProps, ...restParams } = params;\n\n return (\n <Input\n {...restParams}\n // 2. Safely spread native input elements\n inputProps={inputProps}\n // 3. Bind MUI's dynamic layout objects (adornments, ref) into the slot configuration\n InputProps={{\n ...InputProps,\n }}\n error={error}\n placeholder={placeholder}\n fullWidth\n // Explicitly empty string avoids passing a raw error object down to helperText slots\n helperText=\"\"\n />\n );\n }}\n />\n\n {error && (\n <FormHelperText\n sx={{\n mt: 0.75,\n fontSize: \"0.875rem\",\n color: theme.palette.error.main,\n }}\n >\n {error}\n </FormHelperText>\n )}\n\n {helperText && !error && (\n <FormHelperText\n sx={{\n mt: 0.75,\n fontSize: \"0.875rem\",\n color: `${theme.palette.dark.main}99`,\n }}\n >\n {helperText}\n </FormHelperText>\n )}\n </AutocompleteWrapper>\n );\n}\n"],"names":["_jsxs","_jsx","MuiAutocomplete"],"mappings":"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"}
|