@flipdish/portal-library 5.6.0 → 5.8.0

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.
Files changed (47) hide show
  1. package/dist/components/Form/GenericAutocompleteField/index.cjs.js +1 -1
  2. package/dist/components/Form/GenericAutocompleteField/index.cjs.js.map +1 -1
  3. package/dist/components/Form/GenericAutocompleteField/index.d.ts +2 -2
  4. package/dist/components/Form/GenericAutocompleteField/index.js +1 -1
  5. package/dist/components/Form/GenericAutocompleteField/index.js.map +1 -1
  6. package/dist/components/atoms/ListItem/index.cjs.js +2 -0
  7. package/dist/components/atoms/ListItem/index.cjs.js.map +1 -0
  8. package/dist/components/atoms/ListItem/index.d.ts +2 -0
  9. package/dist/components/atoms/ListItem/index.js +2 -0
  10. package/dist/components/atoms/ListItem/index.js.map +1 -0
  11. package/dist/components/atoms/ListItemIcon/index.cjs.js +2 -0
  12. package/dist/components/atoms/ListItemIcon/index.cjs.js.map +1 -0
  13. package/dist/components/atoms/ListItemIcon/index.d.ts +2 -0
  14. package/dist/components/atoms/ListItemIcon/index.js +2 -0
  15. package/dist/components/atoms/ListItemIcon/index.js.map +1 -0
  16. package/dist/components/atoms/ListItemText/index.cjs.js +2 -0
  17. package/dist/components/atoms/ListItemText/index.cjs.js.map +1 -0
  18. package/dist/components/atoms/ListItemText/index.d.ts +2 -0
  19. package/dist/components/atoms/ListItemText/index.js +2 -0
  20. package/dist/components/atoms/ListItemText/index.js.map +1 -0
  21. package/dist/components/atoms/Select/index.cjs.js.map +1 -1
  22. package/dist/components/atoms/Select/index.d.ts +1 -0
  23. package/dist/components/atoms/Select/index.js.map +1 -1
  24. package/dist/components/atoms/TextField/index.cjs.js.map +1 -1
  25. package/dist/components/atoms/TextField/index.d.ts +5 -4
  26. package/dist/components/atoms/TextField/index.js.map +1 -1
  27. package/dist/components/molecules/Autocomplete/index.d.ts +1 -1
  28. package/dist/components/molecules/Dialog/index.d.ts +1 -1
  29. package/dist/components/molecules/List/index.cjs.js +2 -0
  30. package/dist/components/molecules/List/index.cjs.js.map +1 -0
  31. package/dist/components/molecules/List/index.d.ts +2 -0
  32. package/dist/components/molecules/List/index.js +2 -0
  33. package/dist/components/molecules/List/index.js.map +1 -0
  34. package/dist/components/molecules/MenuList/index.cjs.js +2 -0
  35. package/dist/components/molecules/MenuList/index.cjs.js.map +1 -0
  36. package/dist/components/molecules/MenuList/index.d.ts +2 -0
  37. package/dist/components/molecules/MenuList/index.js +2 -0
  38. package/dist/components/molecules/MenuList/index.js.map +1 -0
  39. package/dist/components/molecules/ProgressStepper/index.cjs.js +2 -0
  40. package/dist/components/molecules/ProgressStepper/index.cjs.js.map +1 -0
  41. package/dist/components/molecules/ProgressStepper/index.d.ts +13 -0
  42. package/dist/components/molecules/ProgressStepper/index.js +2 -0
  43. package/dist/components/molecules/ProgressStepper/index.js.map +1 -0
  44. package/dist/utilities/styledUtilities.cjs.js +1 -1
  45. package/dist/utilities/styledUtilities.d.ts +1 -1
  46. package/dist/utilities/styledUtilities.js +1 -1
  47. package/package.json +4 -4
@@ -1,2 +1,2 @@
1
- "use strict";var e=require("react/jsx-runtime");require("react");var l=require("@mui/material/Autocomplete"),i=require("@mui/material/CircularProgress"),r=require("@mui/material/TextField"),t=require("@mui/material/Typography"),a=require("formik"),o=require("../../../custom-hooks/useRenderValidText.cjs.js"),n=require("../FormItemLayout/index.cjs.js");const d=({field:t,form:a,fieldName:n,options:d,label:u,variant:s,placeholder:p,getOptionLabel:m,isOptionEqualToValue:h,onChange:c,onInputChange:g,onScroll:x,layout:q="horizontal",disabled:b=!1,loading:v=!1,required:j=!1,multiple:T=!1,limitTags:f})=>{const{errors:y,touched:C,isSubmitting:I}=a,O=t.value,V=y[t.name],E=!!V&&C[t.name],F=o({fieldError:V,showError:E,touched:!!C[t.name],value:O},"Valid");return e.jsx(l,{fullWidth:!0,disabled:I||b,getOptionLabel:m,isOptionEqualToValue:h,limitTags:T?f??2:void 0,loading:v,multiple:T,options:d,renderInput:l=>e.jsx(r,{...l,fullWidth:!0,"data-testid":`text-field-${n}`,error:E,helperText:F,label:"standard"===s?void 0:u,placeholder:p||void 0,required:j,slotProps:{input:{...l.InputProps,endAdornment:e.jsxs(e.Fragment,{children:[v&&e.jsx(i,{color:"inherit",size:25}),l.InputProps.endAdornment]})},formHelperText:{children:" ",style:{textAlign:"right"}}},style:{paddingRight:"horizontal"===q?16:0},variant:s}),slotProps:{listbox:{onScroll:x}},value:O||(T?[]:null),onChange:(e,l)=>{a.setFieldValue(n,l),c&&c(e,l)},onInputChange:g})};module.exports=({label:l,fieldName:i,options:r,placeholder:o,getOptionLabel:u,validation:s,onChange:p,onInputChange:m,isOptionEqualToValue:h,onScroll:c,layout:g="horizontal",variant:x="outlined",disabled:q=!1,loading:b=!1,required:v=!1,multiple:j=!1,limitTags:T})=>{const f=()=>e.jsx(a.Field,{name:i,validate:s,children:t=>e.jsx(d,{...t,disabled:q,fieldName:i,getOptionLabel:u,isOptionEqualToValue:h,label:l,layout:g,limitTags:T,loading:b,multiple:j,options:r,placeholder:o,required:v,variant:x,onChange:p,onInputChange:m,onScroll:c})});return"vertical"===g?e.jsxs(e.Fragment,{children:["standard"===x&&e.jsx(t,{color:"textPrimary",component:"h3",variant:"subtitle1",children:l}),f()]}):e.jsx(n,{label:l,children:f()})};
1
+ "use strict";var e=require("react/jsx-runtime");require("react");var i=require("@mui/material/Autocomplete"),l=require("@mui/material/CircularProgress"),t=require("@mui/material/TextField"),r=require("@mui/material/Typography"),o=require("formik"),a=require("../../../custom-hooks/useRenderValidText.cjs.js"),n=require("../FormItemLayout/index.cjs.js");const s=({field:r,form:o,fieldName:n,options:s,label:d,variant:u,placeholder:p,getOptionLabel:m,filterOptions:h,isOptionEqualToValue:c,onChange:g,onInputChange:x,onScroll:q,layout:b="horizontal",disabled:v=!1,loading:f=!1,required:j=!1,multiple:T=!1,limitTags:O})=>{const{errors:y,touched:C,isSubmitting:I}=o,V=r.value,E=y[r.name],F=!!E&&C[r.name],P=a({fieldError:E,showError:F,touched:!!C[r.name],value:V},"Valid");return e.jsx(i,{fullWidth:!0,disabled:I||v,filterOptions:h,getOptionLabel:m,isOptionEqualToValue:c,limitTags:T?O??2:void 0,loading:f,multiple:T,onChange:(e,i)=>{o.setFieldValue(n,i),g&&g(e,i)},onInputChange:x,options:s,renderInput:i=>e.jsx(t,{...i,fullWidth:!0,"data-testid":`text-field-${n}`,error:F,helperText:P,label:"standard"===u?void 0:d,placeholder:p||void 0,required:j,slotProps:{input:{...i.InputProps,endAdornment:e.jsxs(e.Fragment,{children:[f&&e.jsx(l,{color:"inherit",size:25}),i.InputProps.endAdornment]})},formHelperText:{children:" ",style:{textAlign:"right"}}},style:{paddingRight:"horizontal"===b?16:0},variant:u}),slotProps:{listbox:{onScroll:q}},value:V||(T?[]:null)})};module.exports=({label:i,fieldName:l,options:t,placeholder:a,getOptionLabel:d,validation:u,onChange:p,onInputChange:m,isOptionEqualToValue:h,onScroll:c,layout:g="horizontal",variant:x="outlined",disabled:q=!1,loading:b=!1,required:v=!1,multiple:f=!1,limitTags:j,filterOptions:T})=>{const O=()=>e.jsx(o.Field,{name:l,validate:u,children:r=>e.jsx(s,{...r,disabled:q,fieldName:l,filterOptions:T,getOptionLabel:d,isOptionEqualToValue:h,label:i,layout:g,limitTags:j,loading:b,multiple:f,onChange:p,onInputChange:m,onScroll:c,options:t,placeholder:a,required:v,variant:x})});return"vertical"===g?e.jsxs(e.Fragment,{children:["standard"===x&&e.jsx(r,{color:"textPrimary",component:"h3",variant:"subtitle1",children:i}),O()]}):e.jsx(n,{label:i,children:O()})};
2
2
  //# sourceMappingURL=index.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/Form/GenericAutocompleteField/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { type SyntheticEvent } from 'react';\n\nimport Autocomplete from '@mui/material/Autocomplete';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport TextField, { type TextFieldProps } from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\n\nimport { Field, type FieldProps } from 'formik';\n\nimport useRenderValidText from '../../../custom-hooks/useRenderValidText';\nimport FormItemLayout from '../FormItemLayout';\n\nexport interface Props<T> {\n label: string;\n fieldName: string;\n options: T[];\n placeholder?: string;\n getOptionLabel?: (option: T) => string;\n validation?: (value: T | T[]) => string | undefined;\n onChange?: (e: SyntheticEvent, value: T | T[] | null) => void;\n onInputChange?: (e: SyntheticEvent, value: string) => void;\n isOptionEqualToValue?: (option: T, value: T) => boolean;\n onScroll?: (e: React.UIEvent<HTMLUListElement, UIEvent>) => void;\n layout?: 'horizontal' | 'vertical';\n variant?: TextFieldProps['variant'];\n disabled?: boolean;\n loading?: boolean;\n required?: boolean;\n multiple?: boolean;\n limitTags?: number;\n}\n\ninterface AutocompleteFieldProps<T> {\n field: FieldProps['field'];\n form: FieldProps['form'];\n fieldName: string;\n options: T[];\n label: string;\n variant: TextFieldProps['variant'];\n placeholder?: string;\n getOptionLabel?: (option: T) => string;\n isOptionEqualToValue?: (option: T, value: T) => boolean;\n onChange?: (e: SyntheticEvent, value: T | T[] | null) => void;\n onInputChange?: (e: SyntheticEvent, value: string) => void;\n onScroll?: (e: React.UIEvent<HTMLUListElement, UIEvent>) => void;\n layout?: 'horizontal' | 'vertical';\n disabled?: boolean;\n loading?: boolean;\n required?: boolean;\n multiple?: boolean;\n limitTags?: number;\n}\n\nconst AutocompleteFieldComponent = <T,>({\n field,\n form,\n fieldName,\n options,\n label,\n variant,\n placeholder,\n getOptionLabel,\n isOptionEqualToValue,\n onChange,\n onInputChange,\n onScroll,\n layout = 'horizontal',\n disabled = false,\n loading = false,\n required = false,\n multiple = false,\n limitTags,\n}: AutocompleteFieldProps<T>) => {\n const { errors, touched, isSubmitting } = form;\n const fieldValue = field.value as T | T[] | null;\n const fieldError = errors[field.name] as string | undefined;\n const showError = !!fieldError && (touched[field.name] as boolean | undefined);\n const helperText = useRenderValidText(\n {\n fieldError,\n showError,\n touched: !!touched[field.name],\n value: fieldValue as string,\n },\n 'Valid',\n );\n\n return (\n <Autocomplete\n fullWidth\n disabled={isSubmitting || disabled}\n getOptionLabel={getOptionLabel}\n isOptionEqualToValue={isOptionEqualToValue}\n limitTags={multiple ? (limitTags ?? 2) : undefined}\n loading={loading}\n multiple={multiple}\n options={options}\n renderInput={(params) => (\n <TextField\n {...params}\n fullWidth\n data-testid={`text-field-${fieldName}`}\n error={showError}\n helperText={helperText}\n label={variant === 'standard' ? undefined : label}\n placeholder={placeholder || undefined}\n required={required}\n slotProps={{\n input: {\n ...params.InputProps,\n endAdornment: (\n <>\n {loading && <CircularProgress color=\"inherit\" size={25} />}\n {params.InputProps.endAdornment}\n </>\n ),\n },\n formHelperText: {\n children: ' ', // reserves line height for error message\n style: { textAlign: 'right' },\n },\n }}\n style={{ paddingRight: layout === 'horizontal' ? 16 : 0 }}\n variant={variant}\n />\n )}\n slotProps={{\n listbox: {\n onScroll,\n },\n }}\n value={fieldValue || (multiple ? [] : null)}\n onChange={(e: SyntheticEvent<Element, Event>, value: T | T[] | null) => {\n // eslint-disable-next-line @typescript-eslint/no-floating-promises\n form.setFieldValue(fieldName, value);\n if (onChange) {\n onChange(e, value);\n }\n }}\n onInputChange={onInputChange}\n />\n );\n};\n\nconst GenericAutocompleteField = <T,>({\n label,\n fieldName,\n options,\n placeholder,\n getOptionLabel,\n validation,\n onChange,\n onInputChange,\n isOptionEqualToValue,\n onScroll,\n layout = 'horizontal',\n variant = 'outlined',\n disabled = false,\n loading = false,\n required = false,\n multiple = false,\n limitTags = undefined,\n}: Props<T>) => {\n const renderField = () => {\n return (\n <Field name={fieldName} validate={validation}>\n {(fieldProps: FieldProps) => (\n <AutocompleteFieldComponent<T>\n {...fieldProps}\n disabled={disabled}\n fieldName={fieldName}\n getOptionLabel={getOptionLabel}\n isOptionEqualToValue={isOptionEqualToValue}\n label={label}\n layout={layout}\n limitTags={limitTags}\n loading={loading}\n multiple={multiple}\n options={options}\n placeholder={placeholder}\n required={required}\n variant={variant}\n onChange={onChange}\n onInputChange={onInputChange}\n onScroll={onScroll}\n />\n )}\n </Field>\n );\n };\n\n if (layout === 'vertical') {\n return (\n <>\n {variant === 'standard' && (\n <Typography color=\"textPrimary\" component=\"h3\" variant=\"subtitle1\">\n {label}\n </Typography>\n )}\n {renderField()}\n </>\n );\n }\n\n return <FormItemLayout label={label}>{renderField()}</FormItemLayout>;\n};\n\nexport default GenericAutocompleteField;\n"],"names":["AutocompleteFieldComponent","field","form","fieldName","options","label","variant","placeholder","getOptionLabel","isOptionEqualToValue","onChange","onInputChange","onScroll","layout","disabled","loading","required","multiple","limitTags","errors","touched","isSubmitting","fieldValue","value","fieldError","name","showError","helperText","useRenderValidText","_jsx","Autocomplete","fullWidth","undefined","renderInput","params","TextField","error","slotProps","input","InputProps","endAdornment","_jsxs","_Fragment","children","CircularProgress","color","size","formHelperText","style","textAlign","paddingRight","listbox","e","setFieldValue","validation","renderField","Field","validate","fieldProps","Typography","component","FormItemLayout"],"mappings":"iWAsDA,MAAMA,EAA6B,EACjCC,QACAC,OACAC,YACAC,UACAC,QACAC,UACAC,cACAC,iBACAC,uBACAC,WACAC,gBACAC,WACAC,SAAS,aACTC,YAAW,EACXC,WAAU,EACVC,YAAW,EACXC,YAAW,EACXC,gBAEA,MAAMC,OAAEA,EAAMC,QAAEA,EAAOC,aAAEA,GAAiBnB,EACpCoB,EAAarB,EAAMsB,MACnBC,EAAaL,EAAOlB,EAAMwB,MAC1BC,IAAcF,GAAeJ,EAAQnB,EAAMwB,MAC3CE,EAAaC,EACjB,CACEJ,aACAE,YACAN,UAAWA,EAAQnB,EAAMwB,MACzBF,MAAOD,GAET,SAGF,OACEO,MAACC,EAAY,CACXC,WAAS,EACTjB,SAAUO,GAAgBP,EAC1BN,eAAgBA,EAChBC,qBAAsBA,EACtBS,UAAWD,EAAYC,GAAa,OAAKc,EACzCjB,QAASA,EACTE,SAAUA,EACVb,QAASA,EACT6B,YAAcC,GACZL,EAAAA,IAACM,EAAS,IACJD,EACJH,WAAS,EAAA,cACI,cAAc5B,IAC3BiC,MAAOV,EACPC,WAAYA,EACZtB,MAAmB,aAAZC,OAAyB0B,EAAY3B,EAC5CE,YAAaA,QAAeyB,EAC5BhB,SAAUA,EACVqB,UAAW,CACTC,MAAO,IACFJ,EAAOK,WACVC,aACEC,EAAAA,KAAAC,WAAA,CAAAC,SAAA,CACG5B,GAAWc,EAAAA,IAACe,EAAgB,CAACC,MAAM,UAAUC,KAAM,KACnDZ,EAAOK,WAAWC,iBAIzBO,eAAgB,CACdJ,SAAU,IACVK,MAAO,CAAEC,UAAW,WAGxBD,MAAO,CAAEE,aAAyB,eAAXrC,EAA0B,GAAK,GACtDP,QAASA,IAGb+B,UAAW,CACTc,QAAS,CACPvC,aAGJW,MAAOD,IAAeL,EAAW,GAAK,MACtCP,SAAU,CAAC0C,EAAmC7B,KAE5CrB,EAAKmD,cAAclD,EAAWoB,GAC1Bb,GACFA,EAAS0C,EAAG7B,IAGhBZ,cAAeA,oBAKY,EAC/BN,QACAF,YACAC,UACAG,cACAC,iBACA8C,aACA5C,WACAC,gBACAF,uBACAG,WACAC,SAAS,aACTP,UAAU,WACVQ,YAAW,EACXC,WAAU,EACVC,YAAW,EACXC,YAAW,EACXC,gBAEA,MAAMqC,EAAc,IAEhB1B,MAAC2B,EAAAA,OAAM/B,KAAMtB,EAAWsD,SAAUH,EAAUX,SACxCe,GACA7B,MAAC7B,EAA0B,IACrB0D,EACJ5C,SAAUA,EACVX,UAAWA,EACXK,eAAgBA,EAChBC,qBAAsBA,EACtBJ,MAAOA,EACPQ,OAAQA,EACRK,UAAWA,EACXH,QAASA,EACTE,SAAUA,EACVb,QAASA,EACTG,YAAaA,EACbS,SAAUA,EACVV,QAASA,EACTI,SAAUA,EACVC,cAAeA,EACfC,SAAUA,MAOpB,MAAe,aAAXC,EAEA4B,EAAAA,KAAAC,WAAA,CAAAC,SAAA,CACe,aAAZrC,GACCuB,EAAAA,IAAC8B,EAAU,CAACd,MAAM,cAAce,UAAU,KAAKtD,QAAQ,YAAWqC,SAC/DtC,IAGJkD,OAKA1B,EAAAA,IAACgC,EAAc,CAACxD,MAAOA,EAAKsC,SAAGY"}
1
+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/Form/GenericAutocompleteField/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { type SyntheticEvent } from 'react';\n\nimport Autocomplete from '@mui/material/Autocomplete';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport TextField, { type TextFieldProps } from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\n\nimport { Field, type FieldProps } from 'formik';\n\nimport useRenderValidText from '../../../custom-hooks/useRenderValidText';\nimport FormItemLayout from '../FormItemLayout';\n\nexport interface Props<T> {\n label: string;\n fieldName: string;\n options: T[];\n placeholder?: string;\n getOptionLabel?: (option: T) => string;\n validation?: (value: T | T[]) => string | undefined;\n onChange?: (e: SyntheticEvent, value: T | T[] | null) => void;\n onInputChange?: (e: SyntheticEvent, value: string) => void;\n isOptionEqualToValue?: (option: T, value: T) => boolean;\n onScroll?: (e: React.UIEvent<HTMLUListElement, UIEvent>) => void;\n layout?: 'horizontal' | 'vertical';\n variant?: TextFieldProps['variant'];\n disabled?: boolean;\n loading?: boolean;\n required?: boolean;\n multiple?: boolean;\n limitTags?: number;\n filterOptions?: (options: T[]) => T[];\n}\n\ninterface AutocompleteFieldProps<T> {\n field: FieldProps['field'];\n form: FieldProps['form'];\n fieldName: string;\n // this prop overrides the default filter options\n filterOptions?: (options: T[]) => T[];\n options: T[];\n label: string;\n variant: TextFieldProps['variant'];\n placeholder?: string;\n getOptionLabel?: (option: T) => string;\n isOptionEqualToValue?: (option: T, value: T) => boolean;\n onChange?: (e: SyntheticEvent, value: T | T[] | null) => void;\n onInputChange?: (e: SyntheticEvent, value: string) => void;\n onScroll?: (e: React.UIEvent<HTMLUListElement, UIEvent>) => void;\n layout?: 'horizontal' | 'vertical';\n disabled?: boolean;\n loading?: boolean;\n required?: boolean;\n multiple?: boolean;\n limitTags?: number;\n}\n\nconst AutocompleteFieldComponent = <T,>({\n field,\n form,\n fieldName,\n options,\n label,\n variant,\n placeholder,\n getOptionLabel,\n filterOptions,\n isOptionEqualToValue,\n onChange,\n onInputChange,\n onScroll,\n layout = 'horizontal',\n disabled = false,\n loading = false,\n required = false,\n multiple = false,\n limitTags,\n}: AutocompleteFieldProps<T>): JSX.Element => {\n const { errors, touched, isSubmitting } = form;\n const fieldValue = field.value as T | T[] | null;\n const fieldError = errors[field.name] as string | undefined;\n const showError = !!fieldError && (touched[field.name] as boolean | undefined);\n const helperText = useRenderValidText(\n {\n fieldError,\n showError,\n touched: !!touched[field.name],\n value: fieldValue as string,\n },\n 'Valid',\n );\n\n return (\n <Autocomplete\n fullWidth\n disabled={isSubmitting || disabled}\n filterOptions={filterOptions}\n getOptionLabel={getOptionLabel}\n isOptionEqualToValue={isOptionEqualToValue}\n limitTags={multiple ? (limitTags ?? 2) : undefined}\n loading={loading}\n multiple={multiple}\n onChange={(e: SyntheticEvent<Element, Event>, value: T | T[] | null) => {\n // eslint-disable-next-line @typescript-eslint/no-floating-promises\n form.setFieldValue(fieldName, value);\n if (onChange) {\n onChange(e, value);\n }\n }}\n onInputChange={onInputChange}\n options={options}\n renderInput={(params) => (\n <TextField\n {...params}\n fullWidth\n data-testid={`text-field-${fieldName}`}\n error={showError}\n helperText={helperText}\n label={variant === 'standard' ? undefined : label}\n placeholder={placeholder || undefined}\n required={required}\n slotProps={{\n input: {\n ...params.InputProps,\n endAdornment: (\n <>\n {loading && <CircularProgress color=\"inherit\" size={25} />}\n {params.InputProps.endAdornment}\n </>\n ),\n },\n formHelperText: {\n children: ' ', // reserves line height for error message\n style: { textAlign: 'right' },\n },\n }}\n style={{ paddingRight: layout === 'horizontal' ? 16 : 0 }}\n variant={variant}\n />\n )}\n slotProps={{\n listbox: {\n onScroll,\n },\n }}\n value={fieldValue || (multiple ? [] : null)}\n />\n );\n};\n\nconst GenericAutocompleteField = <T,>({\n label,\n fieldName,\n options,\n placeholder,\n getOptionLabel,\n validation,\n onChange,\n onInputChange,\n isOptionEqualToValue,\n onScroll,\n layout = 'horizontal',\n variant = 'outlined',\n disabled = false,\n loading = false,\n required = false,\n multiple = false,\n limitTags = undefined,\n filterOptions,\n}: Props<T>): JSX.Element => {\n const renderField = (): React.ReactNode => {\n return (\n <Field name={fieldName} validate={validation}>\n {(fieldProps: FieldProps) => (\n <AutocompleteFieldComponent<T>\n {...fieldProps}\n disabled={disabled}\n fieldName={fieldName}\n filterOptions={filterOptions}\n getOptionLabel={getOptionLabel}\n isOptionEqualToValue={isOptionEqualToValue}\n label={label}\n layout={layout}\n limitTags={limitTags}\n loading={loading}\n multiple={multiple}\n onChange={onChange}\n onInputChange={onInputChange}\n onScroll={onScroll}\n options={options}\n placeholder={placeholder}\n required={required}\n variant={variant}\n />\n )}\n </Field>\n );\n };\n\n if (layout === 'vertical') {\n return (\n <>\n {variant === 'standard' && (\n <Typography color=\"textPrimary\" component=\"h3\" variant=\"subtitle1\">\n {label}\n </Typography>\n )}\n {renderField()}\n </>\n );\n }\n\n return <FormItemLayout label={label}>{renderField()}</FormItemLayout>;\n};\n\nexport default GenericAutocompleteField;\n"],"names":["AutocompleteFieldComponent","field","form","fieldName","options","label","variant","placeholder","getOptionLabel","filterOptions","isOptionEqualToValue","onChange","onInputChange","onScroll","layout","disabled","loading","required","multiple","limitTags","errors","touched","isSubmitting","fieldValue","value","fieldError","name","showError","helperText","useRenderValidText","_jsx","Autocomplete","fullWidth","undefined","e","setFieldValue","renderInput","params","TextField","error","slotProps","input","InputProps","endAdornment","_jsxs","_Fragment","children","CircularProgress","color","size","formHelperText","style","textAlign","paddingRight","listbox","validation","renderField","Field","validate","fieldProps","Typography","component","FormItemLayout"],"mappings":"iWAyDA,MAAMA,EAA6B,EACjCC,QACAC,OACAC,YACAC,UACAC,QACAC,UACAC,cACAC,iBACAC,gBACAC,uBACAC,WACAC,gBACAC,WACAC,SAAS,aACTC,YAAW,EACXC,WAAU,EACVC,YAAW,EACXC,YAAW,EACXC,gBAEA,MAAMC,OAAEA,EAAMC,QAAEA,EAAOC,aAAEA,GAAiBpB,EACpCqB,EAAatB,EAAMuB,MACnBC,EAAaL,EAAOnB,EAAMyB,MAC1BC,IAAcF,GAAeJ,EAAQpB,EAAMyB,MAC3CE,EAAaC,EACjB,CACEJ,aACAE,YACAN,UAAWA,EAAQpB,EAAMyB,MACzBF,MAAOD,GAET,SAGF,OACEO,EAAAA,IAACC,EAAY,CACXC,aACAjB,SAAUO,GAAgBP,EAC1BN,cAAeA,EACfD,eAAgBA,EAChBE,qBAAsBA,EACtBS,UAAWD,EAAYC,GAAa,OAAKc,EACzCjB,QAASA,EACTE,SAAUA,EACVP,SAAU,CAACuB,EAAmCV,KAE5CtB,EAAKiC,cAAchC,EAAWqB,GAC1Bb,GACFA,EAASuB,EAAGV,IAGhBZ,cAAeA,EACfR,QAASA,EACTgC,YAAcC,GACZP,EAAAA,IAACQ,EAAS,IACJD,EACJL,WAAS,EAAA,cACI,cAAc7B,IAC3BoC,MAAOZ,EACPC,WAAYA,EACZvB,MAAmB,aAAZC,OAAyB2B,EAAY5B,EAC5CE,YAAaA,QAAe0B,EAC5BhB,SAAUA,EACVuB,UAAW,CACTC,MAAO,IACFJ,EAAOK,WACVC,aACEC,EAAAA,KAAAC,WAAA,CAAAC,SAAA,CACG9B,GAAWc,EAAAA,IAACiB,EAAgB,CAACC,MAAM,UAAUC,KAAM,KACnDZ,EAAOK,WAAWC,iBAIzBO,eAAgB,CACdJ,SAAU,IACVK,MAAO,CAAEC,UAAW,WAGxBD,MAAO,CAAEE,aAAyB,eAAXvC,EAA0B,GAAK,GACtDR,QAASA,IAGbkC,UAAW,CACTc,QAAS,CACPzC,aAGJW,MAAOD,IAAeL,EAAW,GAAK,wBAKX,EAC/Bb,QACAF,YACAC,UACAG,cACAC,iBACA+C,aACA5C,WACAC,gBACAF,uBACAG,WACAC,SAAS,aACTR,UAAU,WACVS,YAAW,EACXC,WAAU,EACVC,YAAW,EACXC,YAAW,EACXC,YACAV,oBAEA,MAAM+C,EAAc,IAEhB1B,MAAC2B,EAAAA,MAAK,CAAC/B,KAAMvB,EAAWuD,SAAUH,EAAUT,SACxCa,GACA7B,EAAAA,IAAC9B,EAA0B,IACrB2D,EACJ5C,SAAUA,EACVZ,UAAWA,EACXM,cAAeA,EACfD,eAAgBA,EAChBE,qBAAsBA,EACtBL,MAAOA,EACPS,OAAQA,EACRK,UAAWA,EACXH,QAASA,EACTE,SAAUA,EACVP,SAAUA,EACVC,cAAeA,EACfC,SAAUA,EACVT,QAASA,EACTG,YAAaA,EACbU,SAAUA,EACVX,QAASA,MAOnB,MAAe,aAAXQ,EAEA8B,EAAAA,KAAAC,WAAA,CAAAC,SAAA,CACe,aAAZxC,GACCwB,EAAAA,IAAC8B,EAAU,CAACZ,MAAM,cAAca,UAAU,KAAKvD,QAAQ,YAAWwC,SAC/DzC,IAGJmD,OAKA1B,EAAAA,IAACgC,EAAc,CAACzD,MAAOA,EAAKyC,SAAGU"}
@@ -1,4 +1,3 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
1
  import { SyntheticEvent } from 'react';
3
2
  import { TextFieldProps } from '@mui/material/TextField';
4
3
 
@@ -20,8 +19,9 @@ interface Props<T> {
20
19
  required?: boolean;
21
20
  multiple?: boolean;
22
21
  limitTags?: number;
22
+ filterOptions?: (options: T[]) => T[];
23
23
  }
24
- declare const GenericAutocompleteField: <T>({ label, fieldName, options, placeholder, getOptionLabel, validation, onChange, onInputChange, isOptionEqualToValue, onScroll, layout, variant, disabled, loading, required, multiple, limitTags, }: Props<T>) => react_jsx_runtime.JSX.Element;
24
+ declare const GenericAutocompleteField: <T>({ label, fieldName, options, placeholder, getOptionLabel, validation, onChange, onInputChange, isOptionEqualToValue, onScroll, layout, variant, disabled, loading, required, multiple, limitTags, filterOptions, }: Props<T>) => JSX.Element;
25
25
 
26
26
  export { GenericAutocompleteField as default };
27
27
  export type { Props };
@@ -1,2 +1,2 @@
1
- import{jsxs as e,Fragment as o,jsx as l}from"react/jsx-runtime";import"react";import i from"@mui/material/Autocomplete";import t from"@mui/material/CircularProgress";import r from"@mui/material/TextField";import a from"@mui/material/Typography";import{Field as n}from"formik";import d from"../../../custom-hooks/useRenderValidText.js";import m from"../FormItemLayout/index.js";const u=({field:a,form:n,fieldName:m,options:u,label:p,variant:s,placeholder:h,getOptionLabel:c,isOptionEqualToValue:g,onChange:f,onInputChange:b,onScroll:v,layout:T="horizontal",disabled:x=!1,loading:y=!1,required:C=!1,multiple:q=!1,limitTags:I})=>{const{errors:O,touched:V,isSubmitting:E}=n,P=a.value,L=O[a.name],S=!!L&&V[a.name],z=d({fieldError:L,showError:S,touched:!!V[a.name],value:P},"Valid");return l(i,{fullWidth:!0,disabled:E||x,getOptionLabel:c,isOptionEqualToValue:g,limitTags:q?I??2:void 0,loading:y,multiple:q,options:u,renderInput:i=>l(r,{...i,fullWidth:!0,"data-testid":`text-field-${m}`,error:S,helperText:z,label:"standard"===s?void 0:p,placeholder:h||void 0,required:C,slotProps:{input:{...i.InputProps,endAdornment:e(o,{children:[y&&l(t,{color:"inherit",size:25}),i.InputProps.endAdornment]})},formHelperText:{children:" ",style:{textAlign:"right"}}},style:{paddingRight:"horizontal"===T?16:0},variant:s}),slotProps:{listbox:{onScroll:v}},value:P||(q?[]:null),onChange:(e,o)=>{n.setFieldValue(m,o),f&&f(e,o)},onInputChange:b})},p=({label:i,fieldName:t,options:r,placeholder:d,getOptionLabel:p,validation:s,onChange:h,onInputChange:c,isOptionEqualToValue:g,onScroll:f,layout:b="horizontal",variant:v="outlined",disabled:T=!1,loading:x=!1,required:y=!1,multiple:C=!1,limitTags:q})=>{const I=()=>l(n,{name:t,validate:s,children:e=>l(u,{...e,disabled:T,fieldName:t,getOptionLabel:p,isOptionEqualToValue:g,label:i,layout:b,limitTags:q,loading:x,multiple:C,options:r,placeholder:d,required:y,variant:v,onChange:h,onInputChange:c,onScroll:f})});return"vertical"===b?e(o,{children:["standard"===v&&l(a,{color:"textPrimary",component:"h3",variant:"subtitle1",children:i}),I()]}):l(m,{label:i,children:I()})};export{p as default};
1
+ import{jsxs as e,Fragment as i,jsx as t}from"react/jsx-runtime";import"react";import o from"@mui/material/Autocomplete";import l from"@mui/material/CircularProgress";import r from"@mui/material/TextField";import a from"@mui/material/Typography";import{Field as n}from"formik";import d from"../../../custom-hooks/useRenderValidText.js";import m from"../FormItemLayout/index.js";const p=({field:a,form:n,fieldName:m,options:p,label:u,variant:s,placeholder:h,getOptionLabel:c,filterOptions:g,isOptionEqualToValue:f,onChange:b,onInputChange:v,onScroll:T,layout:O="horizontal",disabled:x=!1,loading:y=!1,required:C=!1,multiple:q=!1,limitTags:I})=>{const{errors:V,touched:E,isSubmitting:P}=n,L=a.value,S=V[a.name],z=!!S&&E[a.name],A=d({fieldError:S,showError:z,touched:!!E[a.name],value:L},"Valid");return t(o,{fullWidth:!0,disabled:P||x,filterOptions:g,getOptionLabel:c,isOptionEqualToValue:f,limitTags:q?I??2:void 0,loading:y,multiple:q,onChange:(e,i)=>{n.setFieldValue(m,i),b&&b(e,i)},onInputChange:v,options:p,renderInput:o=>t(r,{...o,fullWidth:!0,"data-testid":`text-field-${m}`,error:z,helperText:A,label:"standard"===s?void 0:u,placeholder:h||void 0,required:C,slotProps:{input:{...o.InputProps,endAdornment:e(i,{children:[y&&t(l,{color:"inherit",size:25}),o.InputProps.endAdornment]})},formHelperText:{children:" ",style:{textAlign:"right"}}},style:{paddingRight:"horizontal"===O?16:0},variant:s}),slotProps:{listbox:{onScroll:T}},value:L||(q?[]:null)})},u=({label:o,fieldName:l,options:r,placeholder:d,getOptionLabel:u,validation:s,onChange:h,onInputChange:c,isOptionEqualToValue:g,onScroll:f,layout:b="horizontal",variant:v="outlined",disabled:T=!1,loading:O=!1,required:x=!1,multiple:y=!1,limitTags:C,filterOptions:q})=>{const I=()=>t(n,{name:l,validate:s,children:e=>t(p,{...e,disabled:T,fieldName:l,filterOptions:q,getOptionLabel:u,isOptionEqualToValue:g,label:o,layout:b,limitTags:C,loading:O,multiple:y,onChange:h,onInputChange:c,onScroll:f,options:r,placeholder:d,required:x,variant:v})});return"vertical"===b?e(i,{children:["standard"===v&&t(a,{color:"textPrimary",component:"h3",variant:"subtitle1",children:o}),I()]}):t(m,{label:o,children:I()})};export{u as default};
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../src/components/Form/GenericAutocompleteField/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { type SyntheticEvent } from 'react';\n\nimport Autocomplete from '@mui/material/Autocomplete';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport TextField, { type TextFieldProps } from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\n\nimport { Field, type FieldProps } from 'formik';\n\nimport useRenderValidText from '../../../custom-hooks/useRenderValidText';\nimport FormItemLayout from '../FormItemLayout';\n\nexport interface Props<T> {\n label: string;\n fieldName: string;\n options: T[];\n placeholder?: string;\n getOptionLabel?: (option: T) => string;\n validation?: (value: T | T[]) => string | undefined;\n onChange?: (e: SyntheticEvent, value: T | T[] | null) => void;\n onInputChange?: (e: SyntheticEvent, value: string) => void;\n isOptionEqualToValue?: (option: T, value: T) => boolean;\n onScroll?: (e: React.UIEvent<HTMLUListElement, UIEvent>) => void;\n layout?: 'horizontal' | 'vertical';\n variant?: TextFieldProps['variant'];\n disabled?: boolean;\n loading?: boolean;\n required?: boolean;\n multiple?: boolean;\n limitTags?: number;\n}\n\ninterface AutocompleteFieldProps<T> {\n field: FieldProps['field'];\n form: FieldProps['form'];\n fieldName: string;\n options: T[];\n label: string;\n variant: TextFieldProps['variant'];\n placeholder?: string;\n getOptionLabel?: (option: T) => string;\n isOptionEqualToValue?: (option: T, value: T) => boolean;\n onChange?: (e: SyntheticEvent, value: T | T[] | null) => void;\n onInputChange?: (e: SyntheticEvent, value: string) => void;\n onScroll?: (e: React.UIEvent<HTMLUListElement, UIEvent>) => void;\n layout?: 'horizontal' | 'vertical';\n disabled?: boolean;\n loading?: boolean;\n required?: boolean;\n multiple?: boolean;\n limitTags?: number;\n}\n\nconst AutocompleteFieldComponent = <T,>({\n field,\n form,\n fieldName,\n options,\n label,\n variant,\n placeholder,\n getOptionLabel,\n isOptionEqualToValue,\n onChange,\n onInputChange,\n onScroll,\n layout = 'horizontal',\n disabled = false,\n loading = false,\n required = false,\n multiple = false,\n limitTags,\n}: AutocompleteFieldProps<T>) => {\n const { errors, touched, isSubmitting } = form;\n const fieldValue = field.value as T | T[] | null;\n const fieldError = errors[field.name] as string | undefined;\n const showError = !!fieldError && (touched[field.name] as boolean | undefined);\n const helperText = useRenderValidText(\n {\n fieldError,\n showError,\n touched: !!touched[field.name],\n value: fieldValue as string,\n },\n 'Valid',\n );\n\n return (\n <Autocomplete\n fullWidth\n disabled={isSubmitting || disabled}\n getOptionLabel={getOptionLabel}\n isOptionEqualToValue={isOptionEqualToValue}\n limitTags={multiple ? (limitTags ?? 2) : undefined}\n loading={loading}\n multiple={multiple}\n options={options}\n renderInput={(params) => (\n <TextField\n {...params}\n fullWidth\n data-testid={`text-field-${fieldName}`}\n error={showError}\n helperText={helperText}\n label={variant === 'standard' ? undefined : label}\n placeholder={placeholder || undefined}\n required={required}\n slotProps={{\n input: {\n ...params.InputProps,\n endAdornment: (\n <>\n {loading && <CircularProgress color=\"inherit\" size={25} />}\n {params.InputProps.endAdornment}\n </>\n ),\n },\n formHelperText: {\n children: ' ', // reserves line height for error message\n style: { textAlign: 'right' },\n },\n }}\n style={{ paddingRight: layout === 'horizontal' ? 16 : 0 }}\n variant={variant}\n />\n )}\n slotProps={{\n listbox: {\n onScroll,\n },\n }}\n value={fieldValue || (multiple ? [] : null)}\n onChange={(e: SyntheticEvent<Element, Event>, value: T | T[] | null) => {\n // eslint-disable-next-line @typescript-eslint/no-floating-promises\n form.setFieldValue(fieldName, value);\n if (onChange) {\n onChange(e, value);\n }\n }}\n onInputChange={onInputChange}\n />\n );\n};\n\nconst GenericAutocompleteField = <T,>({\n label,\n fieldName,\n options,\n placeholder,\n getOptionLabel,\n validation,\n onChange,\n onInputChange,\n isOptionEqualToValue,\n onScroll,\n layout = 'horizontal',\n variant = 'outlined',\n disabled = false,\n loading = false,\n required = false,\n multiple = false,\n limitTags = undefined,\n}: Props<T>) => {\n const renderField = () => {\n return (\n <Field name={fieldName} validate={validation}>\n {(fieldProps: FieldProps) => (\n <AutocompleteFieldComponent<T>\n {...fieldProps}\n disabled={disabled}\n fieldName={fieldName}\n getOptionLabel={getOptionLabel}\n isOptionEqualToValue={isOptionEqualToValue}\n label={label}\n layout={layout}\n limitTags={limitTags}\n loading={loading}\n multiple={multiple}\n options={options}\n placeholder={placeholder}\n required={required}\n variant={variant}\n onChange={onChange}\n onInputChange={onInputChange}\n onScroll={onScroll}\n />\n )}\n </Field>\n );\n };\n\n if (layout === 'vertical') {\n return (\n <>\n {variant === 'standard' && (\n <Typography color=\"textPrimary\" component=\"h3\" variant=\"subtitle1\">\n {label}\n </Typography>\n )}\n {renderField()}\n </>\n );\n }\n\n return <FormItemLayout label={label}>{renderField()}</FormItemLayout>;\n};\n\nexport default GenericAutocompleteField;\n"],"names":["AutocompleteFieldComponent","field","form","fieldName","options","label","variant","placeholder","getOptionLabel","isOptionEqualToValue","onChange","onInputChange","onScroll","layout","disabled","loading","required","multiple","limitTags","errors","touched","isSubmitting","fieldValue","value","fieldError","name","showError","helperText","useRenderValidText","_jsx","Autocomplete","fullWidth","undefined","renderInput","params","TextField","error","slotProps","input","InputProps","endAdornment","_jsxs","_Fragment","children","CircularProgress","color","size","formHelperText","style","textAlign","paddingRight","listbox","e","setFieldValue","GenericAutocompleteField","validation","renderField","Field","validate","fieldProps","Typography","component","FormItemLayout"],"mappings":"yXAsDA,MAAMA,EAA6B,EACjCC,QACAC,OACAC,YACAC,UACAC,QACAC,UACAC,cACAC,iBACAC,uBACAC,WACAC,gBACAC,WACAC,SAAS,aACTC,YAAW,EACXC,WAAU,EACVC,YAAW,EACXC,YAAW,EACXC,gBAEA,MAAMC,OAAEA,EAAMC,QAAEA,EAAOC,aAAEA,GAAiBnB,EACpCoB,EAAarB,EAAMsB,MACnBC,EAAaL,EAAOlB,EAAMwB,MAC1BC,IAAcF,GAAeJ,EAAQnB,EAAMwB,MAC3CE,EAAaC,EACjB,CACEJ,aACAE,YACAN,UAAWA,EAAQnB,EAAMwB,MACzBF,MAAOD,GAET,SAGF,OACEO,EAACC,EAAY,CACXC,WAAS,EACTjB,SAAUO,GAAgBP,EAC1BN,eAAgBA,EAChBC,qBAAsBA,EACtBS,UAAWD,EAAYC,GAAa,OAAKc,EACzCjB,QAASA,EACTE,SAAUA,EACVb,QAASA,EACT6B,YAAcC,GACZL,EAACM,EAAS,IACJD,EACJH,WAAS,EAAA,cACI,cAAc5B,IAC3BiC,MAAOV,EACPC,WAAYA,EACZtB,MAAmB,aAAZC,OAAyB0B,EAAY3B,EAC5CE,YAAaA,QAAeyB,EAC5BhB,SAAUA,EACVqB,UAAW,CACTC,MAAO,IACFJ,EAAOK,WACVC,aACEC,EAAAC,EAAA,CAAAC,SAAA,CACG5B,GAAWc,EAACe,EAAgB,CAACC,MAAM,UAAUC,KAAM,KACnDZ,EAAOK,WAAWC,iBAIzBO,eAAgB,CACdJ,SAAU,IACVK,MAAO,CAAEC,UAAW,WAGxBD,MAAO,CAAEE,aAAyB,eAAXrC,EAA0B,GAAK,GACtDP,QAASA,IAGb+B,UAAW,CACTc,QAAS,CACPvC,aAGJW,MAAOD,IAAeL,EAAW,GAAK,MACtCP,SAAU,CAAC0C,EAAmC7B,KAE5CrB,EAAKmD,cAAclD,EAAWoB,GAC1Bb,GACFA,EAAS0C,EAAG7B,IAGhBZ,cAAeA,KAKf2C,EAA2B,EAC/BjD,QACAF,YACAC,UACAG,cACAC,iBACA+C,aACA7C,WACAC,gBACAF,uBACAG,WACAC,SAAS,aACTP,UAAU,WACVQ,YAAW,EACXC,WAAU,EACVC,YAAW,EACXC,YAAW,EACXC,gBAEA,MAAMsC,EAAc,IAEhB3B,EAAC4B,GAAMhC,KAAMtB,EAAWuD,SAAUH,EAAUZ,SACxCgB,GACA9B,EAAC7B,EAA0B,IACrB2D,EACJ7C,SAAUA,EACVX,UAAWA,EACXK,eAAgBA,EAChBC,qBAAsBA,EACtBJ,MAAOA,EACPQ,OAAQA,EACRK,UAAWA,EACXH,QAASA,EACTE,SAAUA,EACVb,QAASA,EACTG,YAAaA,EACbS,SAAUA,EACVV,QAASA,EACTI,SAAUA,EACVC,cAAeA,EACfC,SAAUA,MAOpB,MAAe,aAAXC,EAEA4B,EAAAC,EAAA,CAAAC,SAAA,CACe,aAAZrC,GACCuB,EAAC+B,EAAU,CAACf,MAAM,cAAcgB,UAAU,KAAKvD,QAAQ,YAAWqC,SAC/DtC,IAGJmD,OAKA3B,EAACiC,EAAc,CAACzD,MAAOA,EAAKsC,SAAGa"}
1
+ {"version":3,"file":"index.js","sources":["../../../../src/components/Form/GenericAutocompleteField/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { type SyntheticEvent } from 'react';\n\nimport Autocomplete from '@mui/material/Autocomplete';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport TextField, { type TextFieldProps } from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\n\nimport { Field, type FieldProps } from 'formik';\n\nimport useRenderValidText from '../../../custom-hooks/useRenderValidText';\nimport FormItemLayout from '../FormItemLayout';\n\nexport interface Props<T> {\n label: string;\n fieldName: string;\n options: T[];\n placeholder?: string;\n getOptionLabel?: (option: T) => string;\n validation?: (value: T | T[]) => string | undefined;\n onChange?: (e: SyntheticEvent, value: T | T[] | null) => void;\n onInputChange?: (e: SyntheticEvent, value: string) => void;\n isOptionEqualToValue?: (option: T, value: T) => boolean;\n onScroll?: (e: React.UIEvent<HTMLUListElement, UIEvent>) => void;\n layout?: 'horizontal' | 'vertical';\n variant?: TextFieldProps['variant'];\n disabled?: boolean;\n loading?: boolean;\n required?: boolean;\n multiple?: boolean;\n limitTags?: number;\n filterOptions?: (options: T[]) => T[];\n}\n\ninterface AutocompleteFieldProps<T> {\n field: FieldProps['field'];\n form: FieldProps['form'];\n fieldName: string;\n // this prop overrides the default filter options\n filterOptions?: (options: T[]) => T[];\n options: T[];\n label: string;\n variant: TextFieldProps['variant'];\n placeholder?: string;\n getOptionLabel?: (option: T) => string;\n isOptionEqualToValue?: (option: T, value: T) => boolean;\n onChange?: (e: SyntheticEvent, value: T | T[] | null) => void;\n onInputChange?: (e: SyntheticEvent, value: string) => void;\n onScroll?: (e: React.UIEvent<HTMLUListElement, UIEvent>) => void;\n layout?: 'horizontal' | 'vertical';\n disabled?: boolean;\n loading?: boolean;\n required?: boolean;\n multiple?: boolean;\n limitTags?: number;\n}\n\nconst AutocompleteFieldComponent = <T,>({\n field,\n form,\n fieldName,\n options,\n label,\n variant,\n placeholder,\n getOptionLabel,\n filterOptions,\n isOptionEqualToValue,\n onChange,\n onInputChange,\n onScroll,\n layout = 'horizontal',\n disabled = false,\n loading = false,\n required = false,\n multiple = false,\n limitTags,\n}: AutocompleteFieldProps<T>): JSX.Element => {\n const { errors, touched, isSubmitting } = form;\n const fieldValue = field.value as T | T[] | null;\n const fieldError = errors[field.name] as string | undefined;\n const showError = !!fieldError && (touched[field.name] as boolean | undefined);\n const helperText = useRenderValidText(\n {\n fieldError,\n showError,\n touched: !!touched[field.name],\n value: fieldValue as string,\n },\n 'Valid',\n );\n\n return (\n <Autocomplete\n fullWidth\n disabled={isSubmitting || disabled}\n filterOptions={filterOptions}\n getOptionLabel={getOptionLabel}\n isOptionEqualToValue={isOptionEqualToValue}\n limitTags={multiple ? (limitTags ?? 2) : undefined}\n loading={loading}\n multiple={multiple}\n onChange={(e: SyntheticEvent<Element, Event>, value: T | T[] | null) => {\n // eslint-disable-next-line @typescript-eslint/no-floating-promises\n form.setFieldValue(fieldName, value);\n if (onChange) {\n onChange(e, value);\n }\n }}\n onInputChange={onInputChange}\n options={options}\n renderInput={(params) => (\n <TextField\n {...params}\n fullWidth\n data-testid={`text-field-${fieldName}`}\n error={showError}\n helperText={helperText}\n label={variant === 'standard' ? undefined : label}\n placeholder={placeholder || undefined}\n required={required}\n slotProps={{\n input: {\n ...params.InputProps,\n endAdornment: (\n <>\n {loading && <CircularProgress color=\"inherit\" size={25} />}\n {params.InputProps.endAdornment}\n </>\n ),\n },\n formHelperText: {\n children: ' ', // reserves line height for error message\n style: { textAlign: 'right' },\n },\n }}\n style={{ paddingRight: layout === 'horizontal' ? 16 : 0 }}\n variant={variant}\n />\n )}\n slotProps={{\n listbox: {\n onScroll,\n },\n }}\n value={fieldValue || (multiple ? [] : null)}\n />\n );\n};\n\nconst GenericAutocompleteField = <T,>({\n label,\n fieldName,\n options,\n placeholder,\n getOptionLabel,\n validation,\n onChange,\n onInputChange,\n isOptionEqualToValue,\n onScroll,\n layout = 'horizontal',\n variant = 'outlined',\n disabled = false,\n loading = false,\n required = false,\n multiple = false,\n limitTags = undefined,\n filterOptions,\n}: Props<T>): JSX.Element => {\n const renderField = (): React.ReactNode => {\n return (\n <Field name={fieldName} validate={validation}>\n {(fieldProps: FieldProps) => (\n <AutocompleteFieldComponent<T>\n {...fieldProps}\n disabled={disabled}\n fieldName={fieldName}\n filterOptions={filterOptions}\n getOptionLabel={getOptionLabel}\n isOptionEqualToValue={isOptionEqualToValue}\n label={label}\n layout={layout}\n limitTags={limitTags}\n loading={loading}\n multiple={multiple}\n onChange={onChange}\n onInputChange={onInputChange}\n onScroll={onScroll}\n options={options}\n placeholder={placeholder}\n required={required}\n variant={variant}\n />\n )}\n </Field>\n );\n };\n\n if (layout === 'vertical') {\n return (\n <>\n {variant === 'standard' && (\n <Typography color=\"textPrimary\" component=\"h3\" variant=\"subtitle1\">\n {label}\n </Typography>\n )}\n {renderField()}\n </>\n );\n }\n\n return <FormItemLayout label={label}>{renderField()}</FormItemLayout>;\n};\n\nexport default GenericAutocompleteField;\n"],"names":["AutocompleteFieldComponent","field","form","fieldName","options","label","variant","placeholder","getOptionLabel","filterOptions","isOptionEqualToValue","onChange","onInputChange","onScroll","layout","disabled","loading","required","multiple","limitTags","errors","touched","isSubmitting","fieldValue","value","fieldError","name","showError","helperText","useRenderValidText","_jsx","Autocomplete","fullWidth","undefined","e","setFieldValue","renderInput","params","TextField","error","slotProps","input","InputProps","endAdornment","_jsxs","_Fragment","children","CircularProgress","color","size","formHelperText","style","textAlign","paddingRight","listbox","GenericAutocompleteField","validation","renderField","Field","validate","fieldProps","Typography","component","FormItemLayout"],"mappings":"yXAyDA,MAAMA,EAA6B,EACjCC,QACAC,OACAC,YACAC,UACAC,QACAC,UACAC,cACAC,iBACAC,gBACAC,uBACAC,WACAC,gBACAC,WACAC,SAAS,aACTC,YAAW,EACXC,WAAU,EACVC,YAAW,EACXC,YAAW,EACXC,gBAEA,MAAMC,OAAEA,EAAMC,QAAEA,EAAOC,aAAEA,GAAiBpB,EACpCqB,EAAatB,EAAMuB,MACnBC,EAAaL,EAAOnB,EAAMyB,MAC1BC,IAAcF,GAAeJ,EAAQpB,EAAMyB,MAC3CE,EAAaC,EACjB,CACEJ,aACAE,YACAN,UAAWA,EAAQpB,EAAMyB,MACzBF,MAAOD,GAET,SAGF,OACEO,EAACC,EAAY,CACXC,aACAjB,SAAUO,GAAgBP,EAC1BN,cAAeA,EACfD,eAAgBA,EAChBE,qBAAsBA,EACtBS,UAAWD,EAAYC,GAAa,OAAKc,EACzCjB,QAASA,EACTE,SAAUA,EACVP,SAAU,CAACuB,EAAmCV,KAE5CtB,EAAKiC,cAAchC,EAAWqB,GAC1Bb,GACFA,EAASuB,EAAGV,IAGhBZ,cAAeA,EACfR,QAASA,EACTgC,YAAcC,GACZP,EAACQ,EAAS,IACJD,EACJL,WAAS,EAAA,cACI,cAAc7B,IAC3BoC,MAAOZ,EACPC,WAAYA,EACZvB,MAAmB,aAAZC,OAAyB2B,EAAY5B,EAC5CE,YAAaA,QAAe0B,EAC5BhB,SAAUA,EACVuB,UAAW,CACTC,MAAO,IACFJ,EAAOK,WACVC,aACEC,EAAAC,EAAA,CAAAC,SAAA,CACG9B,GAAWc,EAACiB,EAAgB,CAACC,MAAM,UAAUC,KAAM,KACnDZ,EAAOK,WAAWC,iBAIzBO,eAAgB,CACdJ,SAAU,IACVK,MAAO,CAAEC,UAAW,WAGxBD,MAAO,CAAEE,aAAyB,eAAXvC,EAA0B,GAAK,GACtDR,QAASA,IAGbkC,UAAW,CACTc,QAAS,CACPzC,aAGJW,MAAOD,IAAeL,EAAW,GAAK,SAKtCqC,EAA2B,EAC/BlD,QACAF,YACAC,UACAG,cACAC,iBACAgD,aACA7C,WACAC,gBACAF,uBACAG,WACAC,SAAS,aACTR,UAAU,WACVS,YAAW,EACXC,WAAU,EACVC,YAAW,EACXC,YAAW,EACXC,YACAV,oBAEA,MAAMgD,EAAc,IAEhB3B,EAAC4B,EAAK,CAAChC,KAAMvB,EAAWwD,SAAUH,EAAUV,SACxCc,GACA9B,EAAC9B,EAA0B,IACrB4D,EACJ7C,SAAUA,EACVZ,UAAWA,EACXM,cAAeA,EACfD,eAAgBA,EAChBE,qBAAsBA,EACtBL,MAAOA,EACPS,OAAQA,EACRK,UAAWA,EACXH,QAASA,EACTE,SAAUA,EACVP,SAAUA,EACVC,cAAeA,EACfC,SAAUA,EACVT,QAASA,EACTG,YAAaA,EACbU,SAAUA,EACVX,QAASA,MAOnB,MAAe,aAAXQ,EAEA8B,EAAAC,EAAA,CAAAC,SAAA,CACe,aAAZxC,GACCwB,EAAC+B,EAAU,CAACb,MAAM,cAAcc,UAAU,KAAKxD,QAAQ,YAAWwC,SAC/DzC,IAGJoD,OAKA3B,EAACiC,EAAc,CAAC1D,MAAOA,EAAKyC,SAAGW"}
@@ -0,0 +1,2 @@
1
+ "use strict";var e=require("@mui/material/ListItem");module.exports=e;
2
+ //# sourceMappingURL=index.cjs.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ import ListItem from '@mui/material/ListItem';
2
+ export { ListItemProps, default } from '@mui/material/ListItem';
@@ -0,0 +1,2 @@
1
+ import m from"@mui/material/ListItem";export{default}from"@mui/material/ListItem";
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ "use strict";var e=require("@mui/material/ListItemIcon");module.exports=e;
2
+ //# sourceMappingURL=index.cjs.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ import ListItemIcon from '@mui/material/ListItemIcon';
2
+ export { ListItemIconProps, default } from '@mui/material/ListItemIcon';
@@ -0,0 +1,2 @@
1
+ import m from"@mui/material/ListItemIcon";export{default}from"@mui/material/ListItemIcon";
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ "use strict";var e=require("@mui/material/ListItemText");module.exports=e;
2
+ //# sourceMappingURL=index.cjs.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ import ListItemText from '@mui/material/ListItemText';
2
+ export { ListItemTextProps, default } from '@mui/material/ListItemText';
@@ -0,0 +1,2 @@
1
+ import t from"@mui/material/ListItemText";export{default}from"@mui/material/ListItemText";
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Select/index.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport MuiMenuItem from '@mui/material/MenuItem';\nimport MuiSelect, { type SelectChangeEvent, type SelectProps as MuiSelectProps } from '@mui/material/Select';\nimport { styled } from '@mui/material/styles';\n\nimport ArrowDown01Icon from '@fd/icons/ArrowDown01';\nimport ArrowUp01Icon from '@fd/icons/ArrowUp01';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nexport interface SelectOption {\n value: number | string;\n label: string;\n disabled?: boolean;\n}\n\nexport type SelectProps = Omit<MuiSelectProps, 'error' | 'id' | 'value' | 'variant'> & {\n errorText?: string;\n fdKey: string;\n helperText?: string;\n options?: SelectOption[];\n placeholder?: string;\n value?: number | string;\n};\n\nconst StyledContainer = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ theme, fullWidth = false }) => ({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(0.5),\n width: fullWidth ? '100%' : 'min(364px, 100%)', // Constrain minWidth to a maximum of 100% of the container width\n}));\n\nconst StyledSelect = styled(MuiSelect, {\n shouldForwardProp: (prop) => !['fullWidth', 'showPlaceholder'].includes(prop as string),\n})<{ fullWidth?: boolean; showPlaceholder?: boolean }>(\n ({ theme, fullWidth = false, showPlaceholder = false }) => ({\n display: 'flex',\n width: fullWidth ? '100%' : 'auto',\n\n '& .MuiSelect-select': {\n color: showPlaceholder\n ? theme.palette.semantic.text['text-weak']\n : theme.palette.semantic.text['text-strong'],\n },\n }),\n);\n\nconst StyledIconContainer = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ theme, disabled = false }) => ({\n alignItems: 'center',\n cursor: disabled ? 'not-allowed' : 'pointer',\n display: 'flex',\n justifyContent: 'center',\n pointerEvents: 'auto',\n\n '& svg': {\n color: disabled\n ? theme.palette.semantic.icon['icon-disabled']\n : theme.palette.semantic.icon['icon-strong'],\n },\n}));\n\nconst Select = ({\n children,\n disabled = false,\n errorText,\n fdKey,\n fullWidth = false,\n helperText,\n label,\n onChange,\n options = [],\n placeholder,\n required = false,\n value,\n ...props\n}: SelectProps): JSX.Element => {\n const [isOpen, setIsOpen] = useState<boolean>(false);\n\n const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n // Combine helper text and error message IDs for aria-describedby\n const ariaDescribedBy = [helperTextId, errorMessageId].filter(Boolean).join(' ') || undefined;\n\n const isError = !!errorText && !disabled;\n const showPlaceholder = !!placeholder && (!value || value === '');\n\n const handleOpen = (): void => {\n if (disabled) {\n return;\n }\n\n setIsOpen((open) => !open);\n };\n\n const handleChange = (event: SelectChangeEvent<unknown>, child?: React.ReactNode): void => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access\n const isMenuItemDisabled = (child as React.ReactElement)?.props?.disabled;\n if (isMenuItemDisabled) {\n return;\n }\n\n // Call the original onChange handler if provided\n if (onChange) {\n onChange(event, child);\n }\n };\n\n const getDisplayValue = (): string => {\n if (showPlaceholder) {\n return placeholder;\n }\n\n return String(value);\n };\n\n const renderIcon = (): JSX.Element => {\n const handleIconClick = (event: React.MouseEvent): void => {\n if (disabled) {\n return;\n }\n\n event.stopPropagation();\n handleOpen();\n };\n\n return (\n <StyledIconContainer disabled={disabled} onClick={handleIconClick}>\n {isOpen ? <ArrowUp01Icon /> : <ArrowDown01Icon />}\n </StyledIconContainer>\n );\n };\n\n const optionsMenuItems = useMemo((): React.ReactNode[] => {\n return options.map((option) => (\n <MuiMenuItem key={option.value} disabled={option.disabled} value={option.value}>\n {option.label}\n </MuiMenuItem>\n ));\n }, [options]);\n\n const renderMenuItems = (): React.ReactNode => {\n const menuItems = [];\n\n // Workaround to get the placeholder to show up when no value is selected\n // Placeholder must be a menu item to be displayed\n if (showPlaceholder) {\n menuItems.push(\n <MuiMenuItem\n key=\"placeholder\"\n disabled\n aria-hidden=\"true\"\n sx={{ display: 'none' }}\n value={placeholder}\n >\n {placeholder}\n </MuiMenuItem>,\n );\n }\n\n // Add either options or children\n if (options?.length > 0) {\n menuItems.push(...optionsMenuItems);\n } else {\n // If no options are provided, use the children\n menuItems.push(children);\n }\n\n return menuItems;\n };\n\n return (\n <StyledContainer fullWidth={fullWidth}>\n {label && (\n <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n {label}\n </MuiInputLabel>\n )}\n\n {helperText && (\n <MuiFormHelperText disabled={disabled} id={helperTextId}>\n {helperText}\n </MuiFormHelperText>\n )}\n\n {isError && (\n <MuiFormHelperText error id={errorMessageId}>\n <CancelCircleIcon />\n\n {errorText}\n </MuiFormHelperText>\n )}\n\n <StyledSelect\n data-fd={fdKey}\n disabled={disabled}\n error={isError}\n fullWidth={fullWidth}\n IconComponent={renderIcon}\n id={fdKey}\n inputProps={{\n 'aria-describedby': ariaDescribedBy,\n }}\n label=\"\" // Remove label from Select since we're rendering it separately\n onChange={handleChange}\n onClick={handleOpen}\n open={isOpen}\n required={required}\n showPlaceholder={showPlaceholder}\n value={getDisplayValue()}\n variant=\"outlined\"\n {...props}\n >\n {renderMenuItems()}\n </StyledSelect>\n </StyledContainer>\n );\n};\n\nexport default Select;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledSelect","MuiSelect","includes","showPlaceholder","color","palette","semantic","text","StyledIconContainer","disabled","alignItems","cursor","justifyContent","pointerEvents","icon","children","errorText","fdKey","helperText","label","onChange","options","placeholder","required","value","props","isOpen","setIsOpen","useState","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","isError","handleOpen","open","optionsMenuItems","useMemo","map","option","_jsx","MuiMenuItem","_jsxs","MuiInputLabel","htmlFor","MuiFormHelperText","id","error","CancelCircleIcon","IconComponent","onClick","event","stopPropagation","ArrowUp01Icon","ArrowDown01Icon","inputProps","child","isMenuItemDisabled","String","variant","menuItems","push","sx","length","renderMenuItems"],"mappings":"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"}
1
+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Select/index.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport MuiMenuItem from '@mui/material/MenuItem';\nimport MuiSelect, { type SelectChangeEvent, type SelectProps as MuiSelectProps } from '@mui/material/Select';\nimport { styled } from '@mui/material/styles';\n\nimport ArrowDown01Icon from '@fd/icons/ArrowDown01';\nimport ArrowUp01Icon from '@fd/icons/ArrowUp01';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nexport interface SelectOption {\n value: number | string;\n label: string;\n disabled?: boolean;\n}\n\nexport type SelectProps = Omit<MuiSelectProps, 'error' | 'id' | 'value' | 'variant'> & {\n errorText?: string;\n fdKey: string;\n helperText?: string;\n options?: SelectOption[];\n placeholder?: string;\n value?: number | string;\n};\n\nconst StyledContainer = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ theme, fullWidth = false }) => ({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(0.5),\n width: fullWidth ? '100%' : 'min(364px, 100%)', // Constrain minWidth to a maximum of 100% of the container width\n}));\n\nconst StyledSelect = styled(MuiSelect, {\n shouldForwardProp: (prop) => !['fullWidth', 'showPlaceholder'].includes(prop as string),\n})<{ fullWidth?: boolean; showPlaceholder?: boolean }>(\n ({ theme, fullWidth = false, showPlaceholder = false }) => ({\n display: 'flex',\n width: fullWidth ? '100%' : 'auto',\n\n '& .MuiSelect-select': {\n color: showPlaceholder\n ? theme.palette.semantic.text['text-weak']\n : theme.palette.semantic.text['text-strong'],\n },\n }),\n);\n\nconst StyledIconContainer = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ theme, disabled = false }) => ({\n alignItems: 'center',\n cursor: disabled ? 'not-allowed' : 'pointer',\n display: 'flex',\n justifyContent: 'center',\n pointerEvents: 'auto',\n\n '& svg': {\n color: disabled\n ? theme.palette.semantic.icon['icon-disabled']\n : theme.palette.semantic.icon['icon-strong'],\n },\n}));\n\nconst Select = ({\n children,\n disabled = false,\n errorText,\n fdKey,\n fullWidth = false,\n helperText,\n label,\n onChange,\n options = [],\n placeholder,\n required = false,\n value,\n ...props\n}: SelectProps): JSX.Element => {\n const [isOpen, setIsOpen] = useState<boolean>(false);\n\n const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n // Combine helper text and error message IDs for aria-describedby\n const ariaDescribedBy = [helperTextId, errorMessageId].filter(Boolean).join(' ') || undefined;\n\n const isError = !!errorText && !disabled;\n const showPlaceholder = !!placeholder && (!value || value === '');\n\n const handleOpen = (): void => {\n if (disabled) {\n return;\n }\n\n setIsOpen((open) => !open);\n };\n\n const handleChange = (event: SelectChangeEvent<unknown>, child?: React.ReactNode): void => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access\n const isMenuItemDisabled = (child as React.ReactElement)?.props?.disabled;\n if (isMenuItemDisabled) {\n return;\n }\n\n // Call the original onChange handler if provided\n if (onChange) {\n onChange(event, child);\n }\n };\n\n const getDisplayValue = (): string => {\n if (showPlaceholder) {\n return placeholder;\n }\n\n return String(value);\n };\n\n const renderIcon = (): JSX.Element => {\n const handleIconClick = (event: React.MouseEvent): void => {\n if (disabled) {\n return;\n }\n\n event.stopPropagation();\n handleOpen();\n };\n\n return (\n <StyledIconContainer disabled={disabled} onClick={handleIconClick}>\n {isOpen ? <ArrowUp01Icon /> : <ArrowDown01Icon />}\n </StyledIconContainer>\n );\n };\n\n const optionsMenuItems = useMemo((): React.ReactNode[] => {\n return options.map((option) => (\n <MuiMenuItem key={option.value} disabled={option.disabled} value={option.value}>\n {option.label}\n </MuiMenuItem>\n ));\n }, [options]);\n\n const renderMenuItems = (): React.ReactNode => {\n const menuItems = [];\n\n // Workaround to get the placeholder to show up when no value is selected\n // Placeholder must be a menu item to be displayed\n if (showPlaceholder) {\n menuItems.push(\n <MuiMenuItem\n key=\"placeholder\"\n disabled\n aria-hidden=\"true\"\n sx={{ display: 'none' }}\n value={placeholder}\n >\n {placeholder}\n </MuiMenuItem>,\n );\n }\n\n // Add either options or children\n if (options?.length > 0) {\n menuItems.push(...optionsMenuItems);\n } else {\n // If no options are provided, use the children\n menuItems.push(children);\n }\n\n return menuItems;\n };\n\n return (\n <StyledContainer fullWidth={fullWidth}>\n {label && (\n <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n {label}\n </MuiInputLabel>\n )}\n\n {helperText && (\n <MuiFormHelperText disabled={disabled} id={helperTextId}>\n {helperText}\n </MuiFormHelperText>\n )}\n\n {isError && (\n <MuiFormHelperText error id={errorMessageId}>\n <CancelCircleIcon />\n\n {errorText}\n </MuiFormHelperText>\n )}\n\n <StyledSelect\n data-fd={fdKey}\n disabled={disabled}\n error={isError}\n fullWidth={fullWidth}\n IconComponent={renderIcon}\n id={fdKey}\n inputProps={{\n 'aria-describedby': ariaDescribedBy,\n }}\n label=\"\" // Remove label from Select since we're rendering it separately\n onChange={handleChange}\n onClick={handleOpen}\n open={isOpen}\n required={required}\n showPlaceholder={showPlaceholder}\n value={getDisplayValue()}\n variant=\"outlined\"\n {...props}\n >\n {renderMenuItems()}\n </StyledSelect>\n </StyledContainer>\n );\n};\nexport type { SelectChangeEvent };\nexport default Select;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledSelect","MuiSelect","includes","showPlaceholder","color","palette","semantic","text","StyledIconContainer","disabled","alignItems","cursor","justifyContent","pointerEvents","icon","children","errorText","fdKey","helperText","label","onChange","options","placeholder","required","value","props","isOpen","setIsOpen","useState","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","isError","handleOpen","open","optionsMenuItems","useMemo","map","option","_jsx","MuiMenuItem","_jsxs","MuiInputLabel","htmlFor","MuiFormHelperText","id","error","CancelCircleIcon","IconComponent","onClick","event","stopPropagation","ArrowUp01Icon","ArrowDown01Icon","inputProps","child","isMenuItemDisabled","String","variant","menuItems","push","sx","length","renderMenuItems"],"mappings":"wbA4BA,MAAMA,EAAkBC,EAAAA,OAAOC,EAAK,CAClCC,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGI,QAAOC,aAAY,MAAO,CACvDC,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,IACnBC,MAAOL,EAAY,OAAS,uBAGxBM,EAAeX,EAAAA,OAAOY,EAAW,CACrCV,kBAAoBC,IAAU,CAAC,YAAa,mBAAmBU,SAASV,IADrDH,EAGnB,EAAGI,QAAOC,aAAY,EAAOS,mBAAkB,MAAO,CACpDR,QAAS,OACTI,MAAOL,EAAY,OAAS,OAE5B,sBAAuB,CACrBU,MAAOD,EACHV,EAAMY,QAAQC,SAASC,KAAK,aAC5Bd,EAAMY,QAAQC,SAASC,KAAK,oBAKhCC,EAAsBnB,EAAAA,OAAOC,EAAK,CACtCC,kBAAoBC,GAAkB,aAATA,GADHH,EAED,EAAGI,QAAOgB,YAAW,MAAO,CACrDC,WAAY,SACZC,OAAQF,EAAW,cAAgB,UACnCd,QAAS,OACTiB,eAAgB,SAChBC,cAAe,OAEf,QAAS,CACPT,MAAOK,EACHhB,EAAMY,QAAQC,SAASQ,KAAK,iBAC5BrB,EAAMY,QAAQC,SAASQ,KAAK,mCAIrB,EACbC,WACAN,YAAW,EACXO,YACAC,QACAvB,aAAY,EACZwB,aACAC,QACAC,WACAC,UAAU,GACVC,cACAC,YAAW,EACXC,WACGC,MAEH,MAAOC,EAAQC,GAAaC,EAAAA,UAAkB,GAExCC,EAAeX,EAAa,GAAGD,qBAAsBa,EACrDC,EAAiBf,EAAY,GAAGC,uBAAwBa,EAGxDE,EAAkB,CAACH,EAAcE,GAAgBE,OAAOC,SAASC,KAAK,WAAQL,EAE9EM,IAAYpB,IAAcP,EAC1BN,KAAoBmB,GAAiBE,GAAmB,KAAVA,GAE9Ca,EAAa,KACb5B,GAIJkB,GAAWW,IAAUA,KAyCjBC,EAAmBC,EAAAA,SAAQ,IACxBnB,EAAQoB,KAAKC,GAClBC,EAAAA,IAACC,EAAW,CAAoBnC,SAAUiC,EAAOjC,SAAUe,MAAOkB,EAAOlB,eACtEkB,EAAOvB,OADQuB,EAAOlB,UAI1B,CAACH,IAgCJ,OACEwB,EAAAA,KAACzD,EAAe,CAACM,UAAWA,YACzByB,GACCwB,EAAAA,IAACG,GAAcrC,SAAUA,EAAUsC,QAAS9B,EAAOM,SAAUA,WAC1DJ,IAIJD,GACCyB,EAAAA,IAACK,EAAiB,CAACvC,SAAUA,EAAUwC,GAAIpB,EAAYd,SACpDG,IAIJkB,GACCS,EAAAA,KAACG,GAAkBE,OAAK,EAACD,GAAIlB,YAC3BY,EAAAA,IAACQ,MAEAnC,KAIL2B,EAAAA,IAAC3C,EAAY,CAAA,UACFiB,EACTR,SAAUA,EACVyC,MAAOd,EACP1C,UAAWA,EACX0D,cAlFa,IAWfT,EAAAA,IAACnC,EAAmB,CAACC,SAAUA,EAAU4C,QAVlBC,IACnB7C,IAIJ6C,EAAMC,kBACNlB,MAIiEtB,SAC9DW,EAASiB,EAAAA,IAACa,EAAa,IAAMb,EAAAA,IAACc,EAAe,CAAA,KAuE9CR,GAAIhC,EACJyC,WAAY,CACV,mBAAoB1B,GAEtBb,MAAM,GACNC,SA7Ge,CAACkC,EAAmCK,KAEvD,MAAMC,EAAsBD,GAA8BlC,OAAOhB,SAC7DmD,GAKAxC,GACFA,EAASkC,EAAOK,IAqGdN,QAAShB,EACTC,KAAMZ,EACNH,SAAUA,EACVpB,gBAAiBA,EACjBqB,MApGArB,EACKmB,EAGFuC,OAAOrC,GAiGVsC,QAAQ,cACJrC,WAtEc,MACtB,MAAMsC,EAAY,GA0BlB,OAtBI5D,GACF4D,EAAUC,KACRrB,EAAAA,IAACC,EAAW,CAEVnC,UAAQ,EAAA,cACI,OACZwD,GAAI,CAAEtE,QAAS,QACf6B,MAAOF,EAAWP,SAEjBO,GANG,gBAYND,GAAS6C,OAAS,EACpBH,EAAUC,QAAQzB,GAGlBwB,EAAUC,KAAKjD,GAGVgD,GA6CFI"}
@@ -1,4 +1,5 @@
1
1
  import { SelectProps as SelectProps$1 } from '@mui/material/Select';
2
+ export { SelectChangeEvent } from '@mui/material/Select';
2
3
 
3
4
  interface SelectOption {
4
5
  value: number | string;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Select/index.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport MuiMenuItem from '@mui/material/MenuItem';\nimport MuiSelect, { type SelectChangeEvent, type SelectProps as MuiSelectProps } from '@mui/material/Select';\nimport { styled } from '@mui/material/styles';\n\nimport ArrowDown01Icon from '@fd/icons/ArrowDown01';\nimport ArrowUp01Icon from '@fd/icons/ArrowUp01';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nexport interface SelectOption {\n value: number | string;\n label: string;\n disabled?: boolean;\n}\n\nexport type SelectProps = Omit<MuiSelectProps, 'error' | 'id' | 'value' | 'variant'> & {\n errorText?: string;\n fdKey: string;\n helperText?: string;\n options?: SelectOption[];\n placeholder?: string;\n value?: number | string;\n};\n\nconst StyledContainer = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ theme, fullWidth = false }) => ({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(0.5),\n width: fullWidth ? '100%' : 'min(364px, 100%)', // Constrain minWidth to a maximum of 100% of the container width\n}));\n\nconst StyledSelect = styled(MuiSelect, {\n shouldForwardProp: (prop) => !['fullWidth', 'showPlaceholder'].includes(prop as string),\n})<{ fullWidth?: boolean; showPlaceholder?: boolean }>(\n ({ theme, fullWidth = false, showPlaceholder = false }) => ({\n display: 'flex',\n width: fullWidth ? '100%' : 'auto',\n\n '& .MuiSelect-select': {\n color: showPlaceholder\n ? theme.palette.semantic.text['text-weak']\n : theme.palette.semantic.text['text-strong'],\n },\n }),\n);\n\nconst StyledIconContainer = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ theme, disabled = false }) => ({\n alignItems: 'center',\n cursor: disabled ? 'not-allowed' : 'pointer',\n display: 'flex',\n justifyContent: 'center',\n pointerEvents: 'auto',\n\n '& svg': {\n color: disabled\n ? theme.palette.semantic.icon['icon-disabled']\n : theme.palette.semantic.icon['icon-strong'],\n },\n}));\n\nconst Select = ({\n children,\n disabled = false,\n errorText,\n fdKey,\n fullWidth = false,\n helperText,\n label,\n onChange,\n options = [],\n placeholder,\n required = false,\n value,\n ...props\n}: SelectProps): JSX.Element => {\n const [isOpen, setIsOpen] = useState<boolean>(false);\n\n const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n // Combine helper text and error message IDs for aria-describedby\n const ariaDescribedBy = [helperTextId, errorMessageId].filter(Boolean).join(' ') || undefined;\n\n const isError = !!errorText && !disabled;\n const showPlaceholder = !!placeholder && (!value || value === '');\n\n const handleOpen = (): void => {\n if (disabled) {\n return;\n }\n\n setIsOpen((open) => !open);\n };\n\n const handleChange = (event: SelectChangeEvent<unknown>, child?: React.ReactNode): void => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access\n const isMenuItemDisabled = (child as React.ReactElement)?.props?.disabled;\n if (isMenuItemDisabled) {\n return;\n }\n\n // Call the original onChange handler if provided\n if (onChange) {\n onChange(event, child);\n }\n };\n\n const getDisplayValue = (): string => {\n if (showPlaceholder) {\n return placeholder;\n }\n\n return String(value);\n };\n\n const renderIcon = (): JSX.Element => {\n const handleIconClick = (event: React.MouseEvent): void => {\n if (disabled) {\n return;\n }\n\n event.stopPropagation();\n handleOpen();\n };\n\n return (\n <StyledIconContainer disabled={disabled} onClick={handleIconClick}>\n {isOpen ? <ArrowUp01Icon /> : <ArrowDown01Icon />}\n </StyledIconContainer>\n );\n };\n\n const optionsMenuItems = useMemo((): React.ReactNode[] => {\n return options.map((option) => (\n <MuiMenuItem key={option.value} disabled={option.disabled} value={option.value}>\n {option.label}\n </MuiMenuItem>\n ));\n }, [options]);\n\n const renderMenuItems = (): React.ReactNode => {\n const menuItems = [];\n\n // Workaround to get the placeholder to show up when no value is selected\n // Placeholder must be a menu item to be displayed\n if (showPlaceholder) {\n menuItems.push(\n <MuiMenuItem\n key=\"placeholder\"\n disabled\n aria-hidden=\"true\"\n sx={{ display: 'none' }}\n value={placeholder}\n >\n {placeholder}\n </MuiMenuItem>,\n );\n }\n\n // Add either options or children\n if (options?.length > 0) {\n menuItems.push(...optionsMenuItems);\n } else {\n // If no options are provided, use the children\n menuItems.push(children);\n }\n\n return menuItems;\n };\n\n return (\n <StyledContainer fullWidth={fullWidth}>\n {label && (\n <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n {label}\n </MuiInputLabel>\n )}\n\n {helperText && (\n <MuiFormHelperText disabled={disabled} id={helperTextId}>\n {helperText}\n </MuiFormHelperText>\n )}\n\n {isError && (\n <MuiFormHelperText error id={errorMessageId}>\n <CancelCircleIcon />\n\n {errorText}\n </MuiFormHelperText>\n )}\n\n <StyledSelect\n data-fd={fdKey}\n disabled={disabled}\n error={isError}\n fullWidth={fullWidth}\n IconComponent={renderIcon}\n id={fdKey}\n inputProps={{\n 'aria-describedby': ariaDescribedBy,\n }}\n label=\"\" // Remove label from Select since we're rendering it separately\n onChange={handleChange}\n onClick={handleOpen}\n open={isOpen}\n required={required}\n showPlaceholder={showPlaceholder}\n value={getDisplayValue()}\n variant=\"outlined\"\n {...props}\n >\n {renderMenuItems()}\n </StyledSelect>\n </StyledContainer>\n );\n};\n\nexport default Select;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledSelect","MuiSelect","includes","showPlaceholder","color","palette","semantic","text","StyledIconContainer","disabled","alignItems","cursor","justifyContent","pointerEvents","icon","Select","children","errorText","fdKey","helperText","label","onChange","options","placeholder","required","value","props","isOpen","setIsOpen","useState","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","isError","handleOpen","open","optionsMenuItems","useMemo","map","option","_jsx","MuiMenuItem","_jsxs","MuiInputLabel","htmlFor","MuiFormHelperText","id","error","CancelCircleIcon","IconComponent","onClick","event","stopPropagation","ArrowUp01Icon","ArrowDown01Icon","inputProps","child","isMenuItemDisabled","String","variant","menuItems","push","sx","length","renderMenuItems"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Select/index.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport MuiMenuItem from '@mui/material/MenuItem';\nimport MuiSelect, { type SelectChangeEvent, type SelectProps as MuiSelectProps } from '@mui/material/Select';\nimport { styled } from '@mui/material/styles';\n\nimport ArrowDown01Icon from '@fd/icons/ArrowDown01';\nimport ArrowUp01Icon from '@fd/icons/ArrowUp01';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nexport interface SelectOption {\n value: number | string;\n label: string;\n disabled?: boolean;\n}\n\nexport type SelectProps = Omit<MuiSelectProps, 'error' | 'id' | 'value' | 'variant'> & {\n errorText?: string;\n fdKey: string;\n helperText?: string;\n options?: SelectOption[];\n placeholder?: string;\n value?: number | string;\n};\n\nconst StyledContainer = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ theme, fullWidth = false }) => ({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(0.5),\n width: fullWidth ? '100%' : 'min(364px, 100%)', // Constrain minWidth to a maximum of 100% of the container width\n}));\n\nconst StyledSelect = styled(MuiSelect, {\n shouldForwardProp: (prop) => !['fullWidth', 'showPlaceholder'].includes(prop as string),\n})<{ fullWidth?: boolean; showPlaceholder?: boolean }>(\n ({ theme, fullWidth = false, showPlaceholder = false }) => ({\n display: 'flex',\n width: fullWidth ? '100%' : 'auto',\n\n '& .MuiSelect-select': {\n color: showPlaceholder\n ? theme.palette.semantic.text['text-weak']\n : theme.palette.semantic.text['text-strong'],\n },\n }),\n);\n\nconst StyledIconContainer = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ theme, disabled = false }) => ({\n alignItems: 'center',\n cursor: disabled ? 'not-allowed' : 'pointer',\n display: 'flex',\n justifyContent: 'center',\n pointerEvents: 'auto',\n\n '& svg': {\n color: disabled\n ? theme.palette.semantic.icon['icon-disabled']\n : theme.palette.semantic.icon['icon-strong'],\n },\n}));\n\nconst Select = ({\n children,\n disabled = false,\n errorText,\n fdKey,\n fullWidth = false,\n helperText,\n label,\n onChange,\n options = [],\n placeholder,\n required = false,\n value,\n ...props\n}: SelectProps): JSX.Element => {\n const [isOpen, setIsOpen] = useState<boolean>(false);\n\n const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n // Combine helper text and error message IDs for aria-describedby\n const ariaDescribedBy = [helperTextId, errorMessageId].filter(Boolean).join(' ') || undefined;\n\n const isError = !!errorText && !disabled;\n const showPlaceholder = !!placeholder && (!value || value === '');\n\n const handleOpen = (): void => {\n if (disabled) {\n return;\n }\n\n setIsOpen((open) => !open);\n };\n\n const handleChange = (event: SelectChangeEvent<unknown>, child?: React.ReactNode): void => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access\n const isMenuItemDisabled = (child as React.ReactElement)?.props?.disabled;\n if (isMenuItemDisabled) {\n return;\n }\n\n // Call the original onChange handler if provided\n if (onChange) {\n onChange(event, child);\n }\n };\n\n const getDisplayValue = (): string => {\n if (showPlaceholder) {\n return placeholder;\n }\n\n return String(value);\n };\n\n const renderIcon = (): JSX.Element => {\n const handleIconClick = (event: React.MouseEvent): void => {\n if (disabled) {\n return;\n }\n\n event.stopPropagation();\n handleOpen();\n };\n\n return (\n <StyledIconContainer disabled={disabled} onClick={handleIconClick}>\n {isOpen ? <ArrowUp01Icon /> : <ArrowDown01Icon />}\n </StyledIconContainer>\n );\n };\n\n const optionsMenuItems = useMemo((): React.ReactNode[] => {\n return options.map((option) => (\n <MuiMenuItem key={option.value} disabled={option.disabled} value={option.value}>\n {option.label}\n </MuiMenuItem>\n ));\n }, [options]);\n\n const renderMenuItems = (): React.ReactNode => {\n const menuItems = [];\n\n // Workaround to get the placeholder to show up when no value is selected\n // Placeholder must be a menu item to be displayed\n if (showPlaceholder) {\n menuItems.push(\n <MuiMenuItem\n key=\"placeholder\"\n disabled\n aria-hidden=\"true\"\n sx={{ display: 'none' }}\n value={placeholder}\n >\n {placeholder}\n </MuiMenuItem>,\n );\n }\n\n // Add either options or children\n if (options?.length > 0) {\n menuItems.push(...optionsMenuItems);\n } else {\n // If no options are provided, use the children\n menuItems.push(children);\n }\n\n return menuItems;\n };\n\n return (\n <StyledContainer fullWidth={fullWidth}>\n {label && (\n <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n {label}\n </MuiInputLabel>\n )}\n\n {helperText && (\n <MuiFormHelperText disabled={disabled} id={helperTextId}>\n {helperText}\n </MuiFormHelperText>\n )}\n\n {isError && (\n <MuiFormHelperText error id={errorMessageId}>\n <CancelCircleIcon />\n\n {errorText}\n </MuiFormHelperText>\n )}\n\n <StyledSelect\n data-fd={fdKey}\n disabled={disabled}\n error={isError}\n fullWidth={fullWidth}\n IconComponent={renderIcon}\n id={fdKey}\n inputProps={{\n 'aria-describedby': ariaDescribedBy,\n }}\n label=\"\" // Remove label from Select since we're rendering it separately\n onChange={handleChange}\n onClick={handleOpen}\n open={isOpen}\n required={required}\n showPlaceholder={showPlaceholder}\n value={getDisplayValue()}\n variant=\"outlined\"\n {...props}\n >\n {renderMenuItems()}\n </StyledSelect>\n </StyledContainer>\n );\n};\nexport type { SelectChangeEvent };\nexport default Select;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledSelect","MuiSelect","includes","showPlaceholder","color","palette","semantic","text","StyledIconContainer","disabled","alignItems","cursor","justifyContent","pointerEvents","icon","Select","children","errorText","fdKey","helperText","label","onChange","options","placeholder","required","value","props","isOpen","setIsOpen","useState","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","isError","handleOpen","open","optionsMenuItems","useMemo","map","option","_jsx","MuiMenuItem","_jsxs","MuiInputLabel","htmlFor","MuiFormHelperText","id","error","CancelCircleIcon","IconComponent","onClick","event","stopPropagation","ArrowUp01Icon","ArrowDown01Icon","inputProps","child","isMenuItemDisabled","String","variant","menuItems","push","sx","length","renderMenuItems"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/TextField/index.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputAdornment from '@mui/material/InputAdornment';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\nimport MuiTextField, { type TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';\n\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport ViewIcon from '@fd/icons/View';\nimport ViewOffIcon from '@fd/icons/ViewOff';\n\nimport IconButton from '../IconButton';\n\n// Common props for all TextField variants\ntype BaseTextFieldProps = Omit<MuiTextFieldProps, 'error' | 'id' | 'type' | 'variant'> & {\n errorText?: string;\n fdKey: string;\n};\n\n// Password TextField variant - requires aria labels\ntype PasswordTextFieldProps = BaseTextFieldProps & {\n type: 'password';\n showPasswordAriaLabel: string;\n hidePasswordAriaLabel: string;\n startAdornment?: string;\n endAdornment?: string;\n};\n\n// Generic TextField variant - for all other input types\ntype GenericTextFieldProps = BaseTextFieldProps & {\n type?: Exclude<MuiTextFieldProps['type'], 'password'>;\n showPasswordAriaLabel?: never;\n hidePasswordAriaLabel?: never;\n startAdornment?: string;\n endAdornment?: string;\n};\n\nexport type TextFieldProps = GenericTextFieldProps | PasswordTextFieldProps;\n\nconst StyledContainer = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ theme, fullWidth = false }) => ({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(0.5),\n width: fullWidth ? '100%' : 'min(364px, 100%)', // Constrain width to a maximum of 100% of the container width\n}));\n\nconst StyledTextField = styled(MuiTextField, {\n shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n display: 'flex',\n width: fullWidth ? '100%' : 'auto',\n}));\n\nconst TextField = ({\n disabled = false,\n errorText,\n fdKey,\n fullWidth = false,\n helperText,\n hidePasswordAriaLabel,\n label,\n multiline = false,\n required = false,\n showPasswordAriaLabel,\n type = 'text',\n startAdornment = '',\n endAdornment = '',\n ...props\n}: TextFieldProps): JSX.Element => {\n const [showPassword, setShowPassword] = useState<boolean>(false);\n\n const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n // Combine helper text and error message IDs for aria-describedby\n const ariaDescribedBy = [helperTextId, errorMessageId].filter(Boolean).join(' ') || undefined;\n\n const isError = !!errorText && !disabled;\n const isPassword = type === 'password';\n\n const handleClickShowPassword = (): void => setShowPassword((show) => !show);\n\n const getFieldType = (): MuiTextFieldProps['type'] => {\n if (isPassword) {\n return showPassword ? 'text' : 'password';\n }\n\n return type;\n };\n\n const renderEndAdornment = (): React.ReactNode => {\n if (isPassword) {\n if (!showPasswordAriaLabel || !hidePasswordAriaLabel) {\n return undefined;\n }\n\n return (\n <MuiInputAdornment position=\"end\">\n <IconButton\n aria-label={showPassword ? hidePasswordAriaLabel : showPasswordAriaLabel}\n disabled={disabled}\n onClick={handleClickShowPassword}\n size=\"small\"\n tone=\"neutral\"\n variant=\"tertiary\"\n >\n {showPassword ? <ViewOffIcon /> : <ViewIcon />}\n </IconButton>\n </MuiInputAdornment>\n );\n }\n if (endAdornment) {\n return (\n <MuiInputAdornment position=\"end\">\n {endAdornment}\n </MuiInputAdornment>\n )\n }\n\n return undefined;\n };\n\n const renderStartAdornment = (): React.ReactNode => {\n if(startAdornment) {\n return (\n <MuiInputAdornment position=\"start\" >\n {startAdornment}\n </MuiInputAdornment>\n )\n }\n return undefined;\n }\n\n return (\n <StyledContainer fullWidth={fullWidth}>\n {label && (\n <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n {label}\n </MuiInputLabel>\n )}\n\n {helperText && (\n <MuiFormHelperText disabled={disabled} id={helperTextId}>\n {helperText}\n </MuiFormHelperText>\n )}\n\n {isError && (\n <MuiFormHelperText error id={errorMessageId}>\n <CancelCircleIcon />\n\n {errorText}\n </MuiFormHelperText>\n )}\n\n <StyledTextField\n data-fd={fdKey}\n disabled={disabled}\n error={isError}\n fullWidth={fullWidth}\n id={fdKey}\n label=\"\" // Remove label from TextField since we're rendering it separately\n multiline={multiline}\n required={required}\n slotProps={{\n input: {\n endAdornment: renderEndAdornment(),\n startAdornment: renderStartAdornment(),\n },\n htmlInput: {\n 'aria-describedby': ariaDescribedBy,\n },\n }}\n type={getFieldType()}\n variant=\"outlined\"\n {...props}\n />\n </StyledContainer>\n );\n};\n\nexport default TextField;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledTextField","MuiTextField","disabled","errorText","fdKey","helperText","hidePasswordAriaLabel","label","multiline","required","showPasswordAriaLabel","type","startAdornment","endAdornment","props","showPassword","setShowPassword","useState","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","isError","isPassword","handleClickShowPassword","show","_jsxs","_jsx","MuiInputLabel","htmlFor","MuiFormHelperText","id","error","children","CancelCircleIcon","slotProps","input","MuiInputAdornment","position","IconButton","onClick","size","tone","variant","ViewOffIcon","ViewIcon","renderEndAdornment","renderStartAdornment","htmlInput"],"mappings":"geAyCA,MAAMA,EAAkBC,EAAAA,OAAOC,EAAK,CAClCC,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGI,QAAOC,aAAY,MAAO,CACvDC,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,IACnBC,MAAOL,EAAY,OAAS,uBAGxBM,EAAkBX,EAAAA,OAAOY,EAAc,CAC3CV,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGK,aAAY,MAAO,CAChDC,QAAS,OACTI,MAAOL,EAAY,OAAS,0BAGZ,EAChBQ,YAAW,EACXC,YACAC,QACAV,aAAY,EACZW,aACAC,wBACAC,QACAC,aAAY,EACZC,YAAW,EACXC,wBACAC,OAAO,OACPC,iBAAiB,GACjBC,eAAe,MACZC,MAEH,MAAOC,EAAcC,GAAmBC,EAAAA,UAAkB,GAEpDC,EAAeb,EAAa,GAAGD,qBAAsBe,EACrDC,EAAiBjB,EAAY,GAAGC,uBAAwBe,EAGxDE,EAAkB,CAACH,EAAcE,GAAgBE,OAAOC,SAASC,KAAK,WAAQL,EAE9EM,IAAYtB,IAAcD,EAC1BwB,EAAsB,aAATf,EAEbgB,EAA0B,IAAYX,GAAiBY,IAAUA,IAqDvE,OACEC,EAAAA,KAACzC,EAAe,CAACM,UAAWA,YACzBa,GACCuB,EAAAA,IAACC,GAAc7B,SAAUA,EAAU8B,QAAS5B,EAAOK,SAAUA,WAC1DF,IAIJF,GACCyB,EAAAA,IAACG,EAAiB,CAAC/B,SAAUA,EAAUgC,GAAIhB,WACxCb,IAIJoB,GACCI,EAAAA,KAACI,EAAiB,CAACE,SAAMD,GAAId,EAAcgB,SAAA,CACzCN,EAAAA,IAACO,EAAgB,CAAA,GAEhBlC,KAIL2B,EAAAA,IAAC9B,aACUI,EACTF,SAAUA,EACViC,MAAOV,EACP/B,UAAWA,EACXwC,GAAI9B,EACJG,MAAM,GACNC,UAAWA,EACXC,SAAUA,EACV6B,UAAW,CACTC,MAAO,CACL1B,aA5EiB,MACzB,GAAIa,EAAY,CACd,IAAKhB,IAA0BJ,EAC7B,OAGF,OACEwB,EAAAA,IAACU,EAAiB,CAACC,SAAS,MAAKL,SAC/BN,MAACY,EAAAA,WAAU,CAAA,aACG3B,EAAeT,EAAwBI,EACnDR,SAAUA,EACVyC,QAAShB,EACTiB,KAAK,QACLC,KAAK,UACLC,QAAQ,WAAUV,SAEjBrB,EAAee,EAAAA,IAACiB,EAAW,CAAA,GAAMjB,EAAAA,IAACkB,EAAQ,CAAA,MAInD,CACA,GAAInC,EACF,OACEiB,EAAAA,IAACU,EAAiB,CAACC,SAAS,MAAKL,SAC9BvB,KAoDeoC,GACdrC,eA7CmB,MAC3B,GAAGA,EACD,OACEkB,EAAAA,IAACU,EAAiB,CAACC,SAAS,QAAOL,SAChCxB,KAyCiBsC,IAElBC,UAAW,CACT,mBAAoB9B,IAGxBV,KA1FAe,EACKX,EAAe,OAAS,WAG1BJ,EAuFHmC,QAAQ,cACJhC"}
1
+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/TextField/index.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputAdornment from '@mui/material/InputAdornment';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\nimport MuiTextField, { type TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';\n\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport ViewIcon from '@fd/icons/View';\nimport ViewOffIcon from '@fd/icons/ViewOff';\n\nimport IconButton from '../IconButton';\n\n// Common props for all TextField variants\ntype BaseTextFieldProps = Omit<MuiTextFieldProps, 'error' | 'id' | 'type' | 'variant'> & {\n errorText?: string;\n fdKey: string;\n};\n\n// Password TextField variant - requires aria labels\ntype PasswordTextFieldProps = BaseTextFieldProps & {\n type: 'password';\n showPasswordAriaLabel: string;\n hidePasswordAriaLabel: string;\n startAdornment?: ReactNode;\n endAdornment?: ReactNode;\n};\n\n// Generic TextField variant - for all other input types\ntype GenericTextFieldProps = BaseTextFieldProps & {\n type?: Exclude<MuiTextFieldProps['type'], 'password'>;\n showPasswordAriaLabel?: never;\n hidePasswordAriaLabel?: never;\n startAdornment?: ReactNode;\n endAdornment?: ReactNode;\n};\n\nexport type TextFieldProps = GenericTextFieldProps | PasswordTextFieldProps;\n\nconst StyledContainer = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ theme, fullWidth = false }) => ({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(0.5),\n width: fullWidth ? '100%' : 'min(364px, 100%)', // Constrain width to a maximum of 100% of the container width\n}));\n\nconst StyledTextField = styled(MuiTextField, {\n shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n display: 'flex',\n width: fullWidth ? '100%' : 'auto',\n}));\n\nconst TextField = ({\n disabled = false,\n errorText,\n fdKey,\n fullWidth = false,\n helperText,\n hidePasswordAriaLabel,\n label,\n multiline = false,\n required = false,\n showPasswordAriaLabel,\n type = 'text',\n startAdornment = '',\n endAdornment = '',\n ...props\n}: TextFieldProps): JSX.Element => {\n const [showPassword, setShowPassword] = useState<boolean>(false);\n\n const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n // Combine helper text and error message IDs for aria-describedby\n const ariaDescribedBy = [helperTextId, errorMessageId].filter(Boolean).join(' ') || undefined;\n\n const isError = !!errorText && !disabled;\n const isPassword = type === 'password';\n\n const handleClickShowPassword = (): void => setShowPassword((show) => !show);\n\n const getFieldType = (): MuiTextFieldProps['type'] => {\n if (isPassword) {\n return showPassword ? 'text' : 'password';\n }\n\n return type;\n };\n\n const renderEndAdornment = (): React.ReactNode => {\n if (isPassword) {\n if (!showPasswordAriaLabel || !hidePasswordAriaLabel) {\n return undefined;\n }\n\n return (\n <MuiInputAdornment position=\"end\">\n <IconButton\n aria-label={showPassword ? hidePasswordAriaLabel : showPasswordAriaLabel}\n disabled={disabled}\n onClick={handleClickShowPassword}\n size=\"small\"\n tone=\"neutral\"\n variant=\"tertiary\"\n >\n {showPassword ? <ViewOffIcon /> : <ViewIcon />}\n </IconButton>\n </MuiInputAdornment>\n );\n }\n if (endAdornment) {\n return (\n <MuiInputAdornment position=\"end\">\n {endAdornment}\n </MuiInputAdornment>\n )\n }\n\n return undefined;\n };\n\n const renderStartAdornment = (): React.ReactNode => {\n if(startAdornment) {\n return (\n <MuiInputAdornment position=\"start\" >\n {startAdornment}\n </MuiInputAdornment>\n )\n }\n return undefined;\n }\n\n return (\n <StyledContainer fullWidth={fullWidth}>\n {label && (\n <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n {label}\n </MuiInputLabel>\n )}\n\n {helperText && (\n <MuiFormHelperText disabled={disabled} id={helperTextId}>\n {helperText}\n </MuiFormHelperText>\n )}\n\n {isError && (\n <MuiFormHelperText error id={errorMessageId}>\n <CancelCircleIcon />\n\n {errorText}\n </MuiFormHelperText>\n )}\n\n <StyledTextField\n data-fd={fdKey}\n disabled={disabled}\n error={isError}\n fullWidth={fullWidth}\n id={fdKey}\n label=\"\" // Remove label from TextField since we're rendering it separately\n multiline={multiline}\n required={required}\n slotProps={{\n input: {\n endAdornment: renderEndAdornment(),\n startAdornment: renderStartAdornment(),\n },\n htmlInput: {\n 'aria-describedby': ariaDescribedBy,\n },\n }}\n type={getFieldType()}\n variant=\"outlined\"\n {...props}\n />\n </StyledContainer>\n );\n};\n\nexport default TextField;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledTextField","MuiTextField","disabled","errorText","fdKey","helperText","hidePasswordAriaLabel","label","multiline","required","showPasswordAriaLabel","type","startAdornment","endAdornment","props","showPassword","setShowPassword","useState","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","isError","isPassword","handleClickShowPassword","show","_jsxs","_jsx","MuiInputLabel","htmlFor","MuiFormHelperText","id","error","children","CancelCircleIcon","slotProps","input","MuiInputAdornment","position","IconButton","onClick","size","tone","variant","ViewOffIcon","ViewIcon","renderEndAdornment","renderStartAdornment","htmlInput"],"mappings":"geAyCA,MAAMA,EAAkBC,EAAAA,OAAOC,EAAK,CAClCC,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGI,QAAOC,aAAY,MAAO,CACvDC,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,IACnBC,MAAOL,EAAY,OAAS,uBAGxBM,EAAkBX,EAAAA,OAAOY,EAAc,CAC3CV,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGK,aAAY,MAAO,CAChDC,QAAS,OACTI,MAAOL,EAAY,OAAS,0BAGZ,EAChBQ,YAAW,EACXC,YACAC,QACAV,aAAY,EACZW,aACAC,wBACAC,QACAC,aAAY,EACZC,YAAW,EACXC,wBACAC,OAAO,OACPC,iBAAiB,GACjBC,eAAe,MACZC,MAEH,MAAOC,EAAcC,GAAmBC,EAAAA,UAAkB,GAEpDC,EAAeb,EAAa,GAAGD,qBAAsBe,EACrDC,EAAiBjB,EAAY,GAAGC,uBAAwBe,EAGxDE,EAAkB,CAACH,EAAcE,GAAgBE,OAAOC,SAASC,KAAK,WAAQL,EAE9EM,IAAYtB,IAAcD,EAC1BwB,EAAsB,aAATf,EAEbgB,EAA0B,IAAYX,GAAiBY,IAAUA,IAqDvE,OACEC,EAAAA,KAACzC,EAAe,CAACM,UAAWA,YACzBa,GACCuB,EAAAA,IAACC,GAAc7B,SAAUA,EAAU8B,QAAS5B,EAAOK,SAAUA,WAC1DF,IAIJF,GACCyB,EAAAA,IAACG,EAAiB,CAAC/B,SAAUA,EAAUgC,GAAIhB,WACxCb,IAIJoB,GACCI,EAAAA,KAACI,EAAiB,CAACE,SAAMD,GAAId,EAAcgB,SAAA,CACzCN,EAAAA,IAACO,EAAgB,CAAA,GAEhBlC,KAIL2B,EAAAA,IAAC9B,aACUI,EACTF,SAAUA,EACViC,MAAOV,EACP/B,UAAWA,EACXwC,GAAI9B,EACJG,MAAM,GACNC,UAAWA,EACXC,SAAUA,EACV6B,UAAW,CACTC,MAAO,CACL1B,aA5EiB,MACzB,GAAIa,EAAY,CACd,IAAKhB,IAA0BJ,EAC7B,OAGF,OACEwB,EAAAA,IAACU,EAAiB,CAACC,SAAS,MAAKL,SAC/BN,MAACY,EAAAA,WAAU,CAAA,aACG3B,EAAeT,EAAwBI,EACnDR,SAAUA,EACVyC,QAAShB,EACTiB,KAAK,QACLC,KAAK,UACLC,QAAQ,WAAUV,SAEjBrB,EAAee,EAAAA,IAACiB,EAAW,CAAA,GAAMjB,EAAAA,IAACkB,EAAQ,CAAA,MAInD,CACA,GAAInC,EACF,OACEiB,EAAAA,IAACU,EAAiB,CAACC,SAAS,MAAKL,SAC9BvB,KAoDeoC,GACdrC,eA7CmB,MAC3B,GAAGA,EACD,OACEkB,EAAAA,IAACU,EAAiB,CAACC,SAAS,QAAOL,SAChCxB,KAyCiBsC,IAElBC,UAAW,CACT,mBAAoB9B,IAGxBV,KA1FAe,EACKX,EAAe,OAAS,WAG1BJ,EAuFHmC,QAAQ,cACJhC"}
@@ -1,3 +1,4 @@
1
+ import { ReactNode } from 'react';
1
2
  import { TextFieldProps as TextFieldProps$1 } from '@mui/material/TextField';
2
3
 
3
4
  type BaseTextFieldProps = Omit<TextFieldProps$1, 'error' | 'id' | 'type' | 'variant'> & {
@@ -8,15 +9,15 @@ type PasswordTextFieldProps = BaseTextFieldProps & {
8
9
  type: 'password';
9
10
  showPasswordAriaLabel: string;
10
11
  hidePasswordAriaLabel: string;
11
- startAdornment?: string;
12
- endAdornment?: string;
12
+ startAdornment?: ReactNode;
13
+ endAdornment?: ReactNode;
13
14
  };
14
15
  type GenericTextFieldProps = BaseTextFieldProps & {
15
16
  type?: Exclude<TextFieldProps$1['type'], 'password'>;
16
17
  showPasswordAriaLabel?: never;
17
18
  hidePasswordAriaLabel?: never;
18
- startAdornment?: string;
19
- endAdornment?: string;
19
+ startAdornment?: ReactNode;
20
+ endAdornment?: ReactNode;
20
21
  };
21
22
  type TextFieldProps = GenericTextFieldProps | PasswordTextFieldProps;
22
23
  declare const TextField: ({ disabled, errorText, fdKey, fullWidth, helperText, hidePasswordAriaLabel, label, multiline, required, showPasswordAriaLabel, type, startAdornment, endAdornment, ...props }: TextFieldProps) => JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/TextField/index.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputAdornment from '@mui/material/InputAdornment';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\nimport MuiTextField, { type TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';\n\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport ViewIcon from '@fd/icons/View';\nimport ViewOffIcon from '@fd/icons/ViewOff';\n\nimport IconButton from '../IconButton';\n\n// Common props for all TextField variants\ntype BaseTextFieldProps = Omit<MuiTextFieldProps, 'error' | 'id' | 'type' | 'variant'> & {\n errorText?: string;\n fdKey: string;\n};\n\n// Password TextField variant - requires aria labels\ntype PasswordTextFieldProps = BaseTextFieldProps & {\n type: 'password';\n showPasswordAriaLabel: string;\n hidePasswordAriaLabel: string;\n startAdornment?: string;\n endAdornment?: string;\n};\n\n// Generic TextField variant - for all other input types\ntype GenericTextFieldProps = BaseTextFieldProps & {\n type?: Exclude<MuiTextFieldProps['type'], 'password'>;\n showPasswordAriaLabel?: never;\n hidePasswordAriaLabel?: never;\n startAdornment?: string;\n endAdornment?: string;\n};\n\nexport type TextFieldProps = GenericTextFieldProps | PasswordTextFieldProps;\n\nconst StyledContainer = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ theme, fullWidth = false }) => ({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(0.5),\n width: fullWidth ? '100%' : 'min(364px, 100%)', // Constrain width to a maximum of 100% of the container width\n}));\n\nconst StyledTextField = styled(MuiTextField, {\n shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n display: 'flex',\n width: fullWidth ? '100%' : 'auto',\n}));\n\nconst TextField = ({\n disabled = false,\n errorText,\n fdKey,\n fullWidth = false,\n helperText,\n hidePasswordAriaLabel,\n label,\n multiline = false,\n required = false,\n showPasswordAriaLabel,\n type = 'text',\n startAdornment = '',\n endAdornment = '',\n ...props\n}: TextFieldProps): JSX.Element => {\n const [showPassword, setShowPassword] = useState<boolean>(false);\n\n const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n // Combine helper text and error message IDs for aria-describedby\n const ariaDescribedBy = [helperTextId, errorMessageId].filter(Boolean).join(' ') || undefined;\n\n const isError = !!errorText && !disabled;\n const isPassword = type === 'password';\n\n const handleClickShowPassword = (): void => setShowPassword((show) => !show);\n\n const getFieldType = (): MuiTextFieldProps['type'] => {\n if (isPassword) {\n return showPassword ? 'text' : 'password';\n }\n\n return type;\n };\n\n const renderEndAdornment = (): React.ReactNode => {\n if (isPassword) {\n if (!showPasswordAriaLabel || !hidePasswordAriaLabel) {\n return undefined;\n }\n\n return (\n <MuiInputAdornment position=\"end\">\n <IconButton\n aria-label={showPassword ? hidePasswordAriaLabel : showPasswordAriaLabel}\n disabled={disabled}\n onClick={handleClickShowPassword}\n size=\"small\"\n tone=\"neutral\"\n variant=\"tertiary\"\n >\n {showPassword ? <ViewOffIcon /> : <ViewIcon />}\n </IconButton>\n </MuiInputAdornment>\n );\n }\n if (endAdornment) {\n return (\n <MuiInputAdornment position=\"end\">\n {endAdornment}\n </MuiInputAdornment>\n )\n }\n\n return undefined;\n };\n\n const renderStartAdornment = (): React.ReactNode => {\n if(startAdornment) {\n return (\n <MuiInputAdornment position=\"start\" >\n {startAdornment}\n </MuiInputAdornment>\n )\n }\n return undefined;\n }\n\n return (\n <StyledContainer fullWidth={fullWidth}>\n {label && (\n <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n {label}\n </MuiInputLabel>\n )}\n\n {helperText && (\n <MuiFormHelperText disabled={disabled} id={helperTextId}>\n {helperText}\n </MuiFormHelperText>\n )}\n\n {isError && (\n <MuiFormHelperText error id={errorMessageId}>\n <CancelCircleIcon />\n\n {errorText}\n </MuiFormHelperText>\n )}\n\n <StyledTextField\n data-fd={fdKey}\n disabled={disabled}\n error={isError}\n fullWidth={fullWidth}\n id={fdKey}\n label=\"\" // Remove label from TextField since we're rendering it separately\n multiline={multiline}\n required={required}\n slotProps={{\n input: {\n endAdornment: renderEndAdornment(),\n startAdornment: renderStartAdornment(),\n },\n htmlInput: {\n 'aria-describedby': ariaDescribedBy,\n },\n }}\n type={getFieldType()}\n variant=\"outlined\"\n {...props}\n />\n </StyledContainer>\n );\n};\n\nexport default TextField;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledTextField","MuiTextField","TextField","disabled","errorText","fdKey","helperText","hidePasswordAriaLabel","label","multiline","required","showPasswordAriaLabel","type","startAdornment","endAdornment","props","showPassword","setShowPassword","useState","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","isError","isPassword","handleClickShowPassword","show","_jsxs","_jsx","MuiInputLabel","htmlFor","MuiFormHelperText","id","error","children","CancelCircleIcon","slotProps","input","MuiInputAdornment","position","IconButton","onClick","size","tone","variant","ViewOffIcon","ViewIcon","renderEndAdornment","renderStartAdornment","htmlInput"],"mappings":"4gBAyCA,MAAMA,EAAkBC,EAAOC,EAAK,CAClCC,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGI,QAAOC,aAAY,MAAO,CACvDC,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,IACnBC,MAAOL,EAAY,OAAS,uBAGxBM,EAAkBX,EAAOY,EAAc,CAC3CV,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGK,aAAY,MAAO,CAChDC,QAAS,OACTI,MAAOL,EAAY,OAAS,WAGxBQ,EAAY,EAChBC,YAAW,EACXC,YACAC,QACAX,aAAY,EACZY,aACAC,wBACAC,QACAC,aAAY,EACZC,YAAW,EACXC,wBACAC,OAAO,OACPC,iBAAiB,GACjBC,eAAe,MACZC,MAEH,MAAOC,EAAcC,GAAmBC,GAAkB,GAEpDC,EAAeb,EAAa,GAAGD,qBAAsBe,EACrDC,EAAiBjB,EAAY,GAAGC,uBAAwBe,EAGxDE,EAAkB,CAACH,EAAcE,GAAgBE,OAAOC,SAASC,KAAK,WAAQL,EAE9EM,IAAYtB,IAAcD,EAC1BwB,EAAsB,aAATf,EAEbgB,EAA0B,IAAYX,GAAiBY,IAAUA,IAqDvE,OACEC,EAAC1C,EAAe,CAACM,UAAWA,YACzBc,GACCuB,EAACC,GAAc7B,SAAUA,EAAU8B,QAAS5B,EAAOK,SAAUA,WAC1DF,IAIJF,GACCyB,EAACG,EAAiB,CAAC/B,SAAUA,EAAUgC,GAAIhB,WACxCb,IAIJoB,GACCI,EAACI,EAAiB,CAACE,SAAMD,GAAId,EAAcgB,SAAA,CACzCN,EAACO,EAAgB,CAAA,GAEhBlC,KAIL2B,EAAC/B,aACUK,EACTF,SAAUA,EACViC,MAAOV,EACPhC,UAAWA,EACXyC,GAAI9B,EACJG,MAAM,GACNC,UAAWA,EACXC,SAAUA,EACV6B,UAAW,CACTC,MAAO,CACL1B,aA5EiB,MACzB,GAAIa,EAAY,CACd,IAAKhB,IAA0BJ,EAC7B,OAGF,OACEwB,EAACU,EAAiB,CAACC,SAAS,MAAKL,SAC/BN,EAACY,EAAU,CAAA,aACG3B,EAAeT,EAAwBI,EACnDR,SAAUA,EACVyC,QAAShB,EACTiB,KAAK,QACLC,KAAK,UACLC,QAAQ,WAAUV,SAEFN,EAAff,EAAgBgC,EAAkBC,EAAP,CAAA,MAIpC,CACA,GAAInC,EACF,OACEiB,EAACU,EAAiB,CAACC,SAAS,MAAKL,SAC9BvB,KAoDeoC,GACdrC,eA7CmB,MAC3B,GAAGA,EACD,OACEkB,EAACU,EAAiB,CAACC,SAAS,QAAOL,SAChCxB,KAyCiBsC,IAElBC,UAAW,CACT,mBAAoB9B,IAGxBV,KA1FAe,EACKX,EAAe,OAAS,WAG1BJ,EAuFHmC,QAAQ,cACJhC"}
1
+ {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/TextField/index.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputAdornment from '@mui/material/InputAdornment';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\nimport MuiTextField, { type TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';\n\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport ViewIcon from '@fd/icons/View';\nimport ViewOffIcon from '@fd/icons/ViewOff';\n\nimport IconButton from '../IconButton';\n\n// Common props for all TextField variants\ntype BaseTextFieldProps = Omit<MuiTextFieldProps, 'error' | 'id' | 'type' | 'variant'> & {\n errorText?: string;\n fdKey: string;\n};\n\n// Password TextField variant - requires aria labels\ntype PasswordTextFieldProps = BaseTextFieldProps & {\n type: 'password';\n showPasswordAriaLabel: string;\n hidePasswordAriaLabel: string;\n startAdornment?: ReactNode;\n endAdornment?: ReactNode;\n};\n\n// Generic TextField variant - for all other input types\ntype GenericTextFieldProps = BaseTextFieldProps & {\n type?: Exclude<MuiTextFieldProps['type'], 'password'>;\n showPasswordAriaLabel?: never;\n hidePasswordAriaLabel?: never;\n startAdornment?: ReactNode;\n endAdornment?: ReactNode;\n};\n\nexport type TextFieldProps = GenericTextFieldProps | PasswordTextFieldProps;\n\nconst StyledContainer = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ theme, fullWidth = false }) => ({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(0.5),\n width: fullWidth ? '100%' : 'min(364px, 100%)', // Constrain width to a maximum of 100% of the container width\n}));\n\nconst StyledTextField = styled(MuiTextField, {\n shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n display: 'flex',\n width: fullWidth ? '100%' : 'auto',\n}));\n\nconst TextField = ({\n disabled = false,\n errorText,\n fdKey,\n fullWidth = false,\n helperText,\n hidePasswordAriaLabel,\n label,\n multiline = false,\n required = false,\n showPasswordAriaLabel,\n type = 'text',\n startAdornment = '',\n endAdornment = '',\n ...props\n}: TextFieldProps): JSX.Element => {\n const [showPassword, setShowPassword] = useState<boolean>(false);\n\n const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n // Combine helper text and error message IDs for aria-describedby\n const ariaDescribedBy = [helperTextId, errorMessageId].filter(Boolean).join(' ') || undefined;\n\n const isError = !!errorText && !disabled;\n const isPassword = type === 'password';\n\n const handleClickShowPassword = (): void => setShowPassword((show) => !show);\n\n const getFieldType = (): MuiTextFieldProps['type'] => {\n if (isPassword) {\n return showPassword ? 'text' : 'password';\n }\n\n return type;\n };\n\n const renderEndAdornment = (): React.ReactNode => {\n if (isPassword) {\n if (!showPasswordAriaLabel || !hidePasswordAriaLabel) {\n return undefined;\n }\n\n return (\n <MuiInputAdornment position=\"end\">\n <IconButton\n aria-label={showPassword ? hidePasswordAriaLabel : showPasswordAriaLabel}\n disabled={disabled}\n onClick={handleClickShowPassword}\n size=\"small\"\n tone=\"neutral\"\n variant=\"tertiary\"\n >\n {showPassword ? <ViewOffIcon /> : <ViewIcon />}\n </IconButton>\n </MuiInputAdornment>\n );\n }\n if (endAdornment) {\n return (\n <MuiInputAdornment position=\"end\">\n {endAdornment}\n </MuiInputAdornment>\n )\n }\n\n return undefined;\n };\n\n const renderStartAdornment = (): React.ReactNode => {\n if(startAdornment) {\n return (\n <MuiInputAdornment position=\"start\" >\n {startAdornment}\n </MuiInputAdornment>\n )\n }\n return undefined;\n }\n\n return (\n <StyledContainer fullWidth={fullWidth}>\n {label && (\n <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n {label}\n </MuiInputLabel>\n )}\n\n {helperText && (\n <MuiFormHelperText disabled={disabled} id={helperTextId}>\n {helperText}\n </MuiFormHelperText>\n )}\n\n {isError && (\n <MuiFormHelperText error id={errorMessageId}>\n <CancelCircleIcon />\n\n {errorText}\n </MuiFormHelperText>\n )}\n\n <StyledTextField\n data-fd={fdKey}\n disabled={disabled}\n error={isError}\n fullWidth={fullWidth}\n id={fdKey}\n label=\"\" // Remove label from TextField since we're rendering it separately\n multiline={multiline}\n required={required}\n slotProps={{\n input: {\n endAdornment: renderEndAdornment(),\n startAdornment: renderStartAdornment(),\n },\n htmlInput: {\n 'aria-describedby': ariaDescribedBy,\n },\n }}\n type={getFieldType()}\n variant=\"outlined\"\n {...props}\n />\n </StyledContainer>\n );\n};\n\nexport default TextField;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledTextField","MuiTextField","TextField","disabled","errorText","fdKey","helperText","hidePasswordAriaLabel","label","multiline","required","showPasswordAriaLabel","type","startAdornment","endAdornment","props","showPassword","setShowPassword","useState","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","isError","isPassword","handleClickShowPassword","show","_jsxs","_jsx","MuiInputLabel","htmlFor","MuiFormHelperText","id","error","children","CancelCircleIcon","slotProps","input","MuiInputAdornment","position","IconButton","onClick","size","tone","variant","ViewOffIcon","ViewIcon","renderEndAdornment","renderStartAdornment","htmlInput"],"mappings":"4gBAyCA,MAAMA,EAAkBC,EAAOC,EAAK,CAClCC,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGI,QAAOC,aAAY,MAAO,CACvDC,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,IACnBC,MAAOL,EAAY,OAAS,uBAGxBM,EAAkBX,EAAOY,EAAc,CAC3CV,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGK,aAAY,MAAO,CAChDC,QAAS,OACTI,MAAOL,EAAY,OAAS,WAGxBQ,EAAY,EAChBC,YAAW,EACXC,YACAC,QACAX,aAAY,EACZY,aACAC,wBACAC,QACAC,aAAY,EACZC,YAAW,EACXC,wBACAC,OAAO,OACPC,iBAAiB,GACjBC,eAAe,MACZC,MAEH,MAAOC,EAAcC,GAAmBC,GAAkB,GAEpDC,EAAeb,EAAa,GAAGD,qBAAsBe,EACrDC,EAAiBjB,EAAY,GAAGC,uBAAwBe,EAGxDE,EAAkB,CAACH,EAAcE,GAAgBE,OAAOC,SAASC,KAAK,WAAQL,EAE9EM,IAAYtB,IAAcD,EAC1BwB,EAAsB,aAATf,EAEbgB,EAA0B,IAAYX,GAAiBY,IAAUA,IAqDvE,OACEC,EAAC1C,EAAe,CAACM,UAAWA,YACzBc,GACCuB,EAACC,GAAc7B,SAAUA,EAAU8B,QAAS5B,EAAOK,SAAUA,WAC1DF,IAIJF,GACCyB,EAACG,EAAiB,CAAC/B,SAAUA,EAAUgC,GAAIhB,WACxCb,IAIJoB,GACCI,EAACI,EAAiB,CAACE,SAAMD,GAAId,EAAcgB,SAAA,CACzCN,EAACO,EAAgB,CAAA,GAEhBlC,KAIL2B,EAAC/B,aACUK,EACTF,SAAUA,EACViC,MAAOV,EACPhC,UAAWA,EACXyC,GAAI9B,EACJG,MAAM,GACNC,UAAWA,EACXC,SAAUA,EACV6B,UAAW,CACTC,MAAO,CACL1B,aA5EiB,MACzB,GAAIa,EAAY,CACd,IAAKhB,IAA0BJ,EAC7B,OAGF,OACEwB,EAACU,EAAiB,CAACC,SAAS,MAAKL,SAC/BN,EAACY,EAAU,CAAA,aACG3B,EAAeT,EAAwBI,EACnDR,SAAUA,EACVyC,QAAShB,EACTiB,KAAK,QACLC,KAAK,UACLC,QAAQ,WAAUV,SAEFN,EAAff,EAAgBgC,EAAkBC,EAAP,CAAA,MAIpC,CACA,GAAInC,EACF,OACEiB,EAACU,EAAiB,CAACC,SAAS,MAAKL,SAC9BvB,KAoDeoC,GACdrC,eA7CmB,MAC3B,GAAGA,EACD,OACEkB,EAACU,EAAiB,CAACC,SAAS,QAAOL,SAChCxB,KAyCiBsC,IAElBC,UAAW,CACT,mBAAoB9B,IAGxBV,KA1FAe,EACKX,EAAe,OAAS,WAG1BJ,EAuFHmC,QAAQ,cACJhC"}
@@ -1,2 +1,2 @@
1
1
  import Autocomplete from '@mui/material/Autocomplete';
2
- export { default } from '@mui/material/Autocomplete';
2
+ export { AutocompleteInputChangeReason, default } from '@mui/material/Autocomplete';
@@ -1,2 +1,2 @@
1
1
  import Dialog from '@mui/material/Dialog';
2
- export { default } from '@mui/material/Dialog';
2
+ export { DialogProps, default } from '@mui/material/Dialog';
@@ -0,0 +1,2 @@
1
+ "use strict";var e=require("@mui/material/List");module.exports=e;
2
+ //# sourceMappingURL=index.cjs.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ import List from '@mui/material/List';
2
+ export { ListProps, default } from '@mui/material/List';
@@ -0,0 +1,2 @@
1
+ import i from"@mui/material/List";export{default}from"@mui/material/List";
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ "use strict";var e=require("@mui/material/MenuList");module.exports=e;
2
+ //# sourceMappingURL=index.cjs.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ import MenuList from '@mui/material/MenuList';
2
+ export { MenuListProps, default } from '@mui/material/MenuList';
@@ -0,0 +1,2 @@
1
+ import i from"@mui/material/MenuList";export{default}from"@mui/material/MenuList";
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ "use strict";var e=require("react/jsx-runtime"),r=require("@mui/material/Box"),t=require("../../atoms/Button/index.cjs.js"),s=require("@mui/material/Grid2"),i=require("../../atoms/LinearProgress/index.cjs.js"),a=require("@mui/material/Typography"),o=require("../../../icons/ArrowLeft02/index.cjs.js");const n=require("@mui/material/styles").styled(t.Button)((({theme:e})=>({textDecoration:"none",padding:0,maxWidth:"none",height:"24px",[e.breakpoints.up("tablet")]:{maxWidth:"unset"}})));module.exports=({step:t,totalSteps:p,backButtonProps:d,title:l})=>e.jsxs(s,{"data-testid":"progress-stepper-container",mt:3,children:[e.jsx(r,{mb:2,children:d&&e.jsxs(n,{"data-testid":"progress-stepper-back-button",disabled:d.disabled,fdKey:"progress-stepper-back-button",onClick:d.onClick,variant:"tertiary",children:[e.jsx(o,{}),d.label]})}),e.jsx(r,{mb:1,children:e.jsx(a,{"data-testid":"progress-stepper-title",variant:"b1Strong",children:l||`Step ${t} of ${p}`})}),e.jsx(r,{"data-testid":"progress-stepper-bars",sx:{display:"flex",gap:.5},children:Array.from({length:p},((e,r)=>r+1)).map((s=>e.jsx(r,{sx:{width:"100%"},children:e.jsx(i.LinearProgress,{color:"primary",value:s<=t?100:0,variant:"determinate"},`${s}-progress-stepper`)},`${s}-progress-stepper-box`)))})]});
2
+ //# sourceMappingURL=index.cjs.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/ProgressStepper/index.tsx"],"sourcesContent":["import Box from '@fd/components/atoms/Box';\nimport Button from '@fd/components/atoms/Button';\nimport Grid from '@fd/components/atoms/Grid';\nimport LinearProgress from '@fd/components/atoms/LinearProgress';\nimport Typography from '@fd/components/atoms/Typography';\nimport ArrowLeft02 from '@fd/icons/ArrowLeft02';\nimport styled from '@fd/utilities/styledUtilities';\n\ninterface IProgressStepper {\n step: number;\n totalSteps: number;\n backButtonProps?: {\n disabled?: boolean;\n onClick: () => void;\n label: string;\n };\n title?: string;\n}\n\nconst BackButton = styled(Button)(({ theme }) => ({\n textDecoration: 'none',\n padding: 0,\n maxWidth: 'none',\n height: '24px',\n [theme.breakpoints.up('tablet')]: {\n maxWidth: 'unset',\n },\n}));\n\nconst ProgressStepper: React.FC<IProgressStepper> = ({\n step,\n totalSteps,\n backButtonProps,\n title,\n}) => {\n return (\n <Grid data-testid=\"progress-stepper-container\" mt={3}>\n <Box mb={2}>\n {backButtonProps && (\n <BackButton\n data-testid=\"progress-stepper-back-button\"\n disabled={backButtonProps.disabled}\n fdKey=\"progress-stepper-back-button\"\n onClick={backButtonProps.onClick}\n variant=\"tertiary\"\n >\n <ArrowLeft02 />\n {backButtonProps.label}\n </BackButton>\n )}\n </Box>\n <Box mb={1}>\n <Typography data-testid=\"progress-stepper-title\" variant=\"b1Strong\">\n {title || `Step ${step} of ${totalSteps}`}\n </Typography>\n </Box>\n <Box data-testid=\"progress-stepper-bars\" sx={{ display: 'flex', gap: 0.5 }}>\n {Array.from({ length: totalSteps }, (_, index) => index + 1).map((stepNumber) => (\n <Box key={`${stepNumber}-progress-stepper-box`} sx={{ width: '100%' }}>\n <LinearProgress\n key={`${stepNumber}-progress-stepper`}\n color=\"primary\"\n value={stepNumber <= step ? 100 : 0}\n variant=\"determinate\"\n />\n </Box>\n ))}\n </Box>\n </Grid>\n );\n};\n\nexport default ProgressStepper;\n"],"names":["BackButton","styled","Button","theme","textDecoration","padding","maxWidth","height","breakpoints","up","step","totalSteps","backButtonProps","title","_jsxs","Grid","mt","children","_jsx","Box","mb","disabled","fdKey","onClick","variant","ArrowLeft02","label","Typography","sx","display","gap","Array","from","length","_","index","map","stepNumber","width","LinearProgress","color","value"],"mappings":"6SAmBA,MAAMA,kCAAaC,OAAOC,EAAAA,OAAPD,EAAe,EAAGE,YAAO,CAC1CC,eAAgB,OAChBC,QAAS,EACTC,SAAU,OACVC,OAAQ,OACR,CAACJ,EAAMK,YAAYC,GAAG,WAAY,CAChCH,SAAU,4BAIsC,EAClDI,OACAC,aACAC,kBACAC,WAGEC,EAAAA,KAACC,iBAAiB,6BAA6BC,GAAI,EAACC,SAAA,CAClDC,EAAAA,IAACC,EAAG,CAACC,GAAI,EAACH,SACPL,GACCE,EAAAA,KAACd,iBACa,+BACZqB,SAAUT,EAAgBS,SAC1BC,MAAM,+BACNC,QAASX,EAAgBW,QACzBC,QAAQ,WAAUP,SAAA,CAElBC,EAAAA,IAACO,EAAW,CAAA,GACXb,EAAgBc,WAIvBR,EAAAA,IAACC,EAAG,CAACC,GAAI,EAACH,SACRC,EAAAA,IAACS,EAAU,CAAA,cAAa,yBAAyBH,QAAQ,oBACtDX,GAAS,QAAQH,QAAWC,QAGjCO,MAACC,EAAG,CAAA,cAAa,wBAAwBS,GAAI,CAAEC,QAAS,OAAQC,IAAK,IAAKb,SACvEc,MAAMC,KAAK,CAAEC,OAAQtB,IAAc,CAACuB,EAAGC,IAAUA,EAAQ,IAAGC,KAAKC,GAChEnB,EAAAA,IAACC,EAAG,CAA4CS,GAAI,CAAEU,MAAO,QAAQrB,SACnEC,EAAAA,IAACqB,EAAAA,eAAc,CAEbC,MAAM,UACNC,MAAOJ,GAAc3B,EAAO,IAAM,EAClCc,QAAQ,eAHH,GAAGa,uBAFF,GAAGA"}
@@ -0,0 +1,13 @@
1
+ interface IProgressStepper {
2
+ step: number;
3
+ totalSteps: number;
4
+ backButtonProps?: {
5
+ disabled?: boolean;
6
+ onClick: () => void;
7
+ label: string;
8
+ };
9
+ title?: string;
10
+ }
11
+ declare const ProgressStepper: React.FC<IProgressStepper>;
12
+
13
+ export { ProgressStepper as default };
@@ -0,0 +1,2 @@
1
+ import{jsxs as t,jsx as r}from"react/jsx-runtime";import e from"@mui/material/Box";import{Button as i}from"../../atoms/Button/index.js";import a from"@mui/material/Grid2";import{LinearProgress as o}from"../../atoms/LinearProgress/index.js";import s from"@mui/material/Typography";import p from"../../../icons/ArrowLeft02/index.js";import{styled as m}from"@mui/material/styles";const n=m(i)((({theme:t})=>({textDecoration:"none",padding:0,maxWidth:"none",height:"24px",[t.breakpoints.up("tablet")]:{maxWidth:"unset"}}))),d=({step:i,totalSteps:m,backButtonProps:d,title:l})=>t(a,{"data-testid":"progress-stepper-container",mt:3,children:[r(e,{mb:2,children:d&&t(n,{"data-testid":"progress-stepper-back-button",disabled:d.disabled,fdKey:"progress-stepper-back-button",onClick:d.onClick,variant:"tertiary",children:[r(p,{}),d.label]})}),r(e,{mb:1,children:r(s,{"data-testid":"progress-stepper-title",variant:"b1Strong",children:l||`Step ${i} of ${m}`})}),r(e,{"data-testid":"progress-stepper-bars",sx:{display:"flex",gap:.5},children:Array.from({length:m},((t,r)=>r+1)).map((t=>r(e,{sx:{width:"100%"},children:r(o,{color:"primary",value:t<=i?100:0,variant:"determinate"},`${t}-progress-stepper`)},`${t}-progress-stepper-box`)))})]});export{d as default};
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../../../../src/components/molecules/ProgressStepper/index.tsx"],"sourcesContent":["import Box from '@fd/components/atoms/Box';\nimport Button from '@fd/components/atoms/Button';\nimport Grid from '@fd/components/atoms/Grid';\nimport LinearProgress from '@fd/components/atoms/LinearProgress';\nimport Typography from '@fd/components/atoms/Typography';\nimport ArrowLeft02 from '@fd/icons/ArrowLeft02';\nimport styled from '@fd/utilities/styledUtilities';\n\ninterface IProgressStepper {\n step: number;\n totalSteps: number;\n backButtonProps?: {\n disabled?: boolean;\n onClick: () => void;\n label: string;\n };\n title?: string;\n}\n\nconst BackButton = styled(Button)(({ theme }) => ({\n textDecoration: 'none',\n padding: 0,\n maxWidth: 'none',\n height: '24px',\n [theme.breakpoints.up('tablet')]: {\n maxWidth: 'unset',\n },\n}));\n\nconst ProgressStepper: React.FC<IProgressStepper> = ({\n step,\n totalSteps,\n backButtonProps,\n title,\n}) => {\n return (\n <Grid data-testid=\"progress-stepper-container\" mt={3}>\n <Box mb={2}>\n {backButtonProps && (\n <BackButton\n data-testid=\"progress-stepper-back-button\"\n disabled={backButtonProps.disabled}\n fdKey=\"progress-stepper-back-button\"\n onClick={backButtonProps.onClick}\n variant=\"tertiary\"\n >\n <ArrowLeft02 />\n {backButtonProps.label}\n </BackButton>\n )}\n </Box>\n <Box mb={1}>\n <Typography data-testid=\"progress-stepper-title\" variant=\"b1Strong\">\n {title || `Step ${step} of ${totalSteps}`}\n </Typography>\n </Box>\n <Box data-testid=\"progress-stepper-bars\" sx={{ display: 'flex', gap: 0.5 }}>\n {Array.from({ length: totalSteps }, (_, index) => index + 1).map((stepNumber) => (\n <Box key={`${stepNumber}-progress-stepper-box`} sx={{ width: '100%' }}>\n <LinearProgress\n key={`${stepNumber}-progress-stepper`}\n color=\"primary\"\n value={stepNumber <= step ? 100 : 0}\n variant=\"determinate\"\n />\n </Box>\n ))}\n </Box>\n </Grid>\n );\n};\n\nexport default ProgressStepper;\n"],"names":["BackButton","styled","Button","theme","textDecoration","padding","maxWidth","height","breakpoints","up","ProgressStepper","step","totalSteps","backButtonProps","title","_jsxs","Grid","mt","children","_jsx","Box","mb","disabled","fdKey","onClick","variant","ArrowLeft02","label","Typography","sx","display","gap","Array","from","length","_","index","map","stepNumber","width","LinearProgress","color","value"],"mappings":"yXAmBA,MAAMA,EAAaC,EAAOC,EAAPD,EAAe,EAAGE,YAAO,CAC1CC,eAAgB,OAChBC,QAAS,EACTC,SAAU,OACVC,OAAQ,OACR,CAACJ,EAAMK,YAAYC,GAAG,WAAY,CAChCH,SAAU,aAIRI,EAA8C,EAClDC,OACAC,aACAC,kBACAC,WAGEC,EAACC,iBAAiB,6BAA6BC,GAAI,EAACC,SAAA,CAClDC,EAACC,EAAG,CAACC,GAAI,EAACH,SACPL,GACCE,EAACf,iBACa,+BACZsB,SAAUT,EAAgBS,SAC1BC,MAAM,+BACNC,QAASX,EAAgBW,QACzBC,QAAQ,WAAUP,SAAA,CAElBC,EAACO,EAAW,CAAA,GACXb,EAAgBc,WAIvBR,EAACC,EAAG,CAACC,GAAI,EAACH,SACRC,EAACS,EAAU,CAAA,cAAa,yBAAyBH,QAAQ,oBACtDX,GAAS,QAAQH,QAAWC,QAGjCO,EAACC,EAAG,CAAA,cAAa,wBAAwBS,GAAI,CAAEC,QAAS,OAAQC,IAAK,IAAKb,SACvEc,MAAMC,KAAK,CAAEC,OAAQtB,IAAc,CAACuB,EAAGC,IAAUA,EAAQ,IAAGC,KAAKC,GAChEnB,EAACC,EAAG,CAA4CS,GAAI,CAAEU,MAAO,QAAQrB,SACnEC,EAACqB,EAAc,CAEbC,MAAM,UACNC,MAAOJ,GAAc3B,EAAO,IAAM,EAClCc,QAAQ,eAHH,GAAGa,uBAFF,GAAGA"}
@@ -1,2 +1,2 @@
1
- "use strict";var e=require("@mui/material/styles");module.exports=e.styled;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@mui/material/styles");Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return e.styled}}),Object.defineProperty(exports,"keyframes",{enumerable:!0,get:function(){return e.keyframes}});
2
2
  //# sourceMappingURL=styledUtilities.cjs.js.map
@@ -1,2 +1,2 @@
1
1
  import { styled } from '@mui/material/styles';
2
- export { styled as default } from '@mui/material/styles';
2
+ export { styled as default, keyframes } from '@mui/material/styles';
@@ -1,2 +1,2 @@
1
- import{styled as t}from"@mui/material/styles";export{styled as default}from"@mui/material/styles";
1
+ import{styled as e}from"@mui/material/styles";export{styled as default,keyframes}from"@mui/material/styles";
2
2
  //# sourceMappingURL=styledUtilities.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flipdish/portal-library",
3
- "version": "5.6.0",
3
+ "version": "5.8.0",
4
4
  "files": [
5
5
  "dist"
6
6
  ],
@@ -80,10 +80,10 @@
80
80
  "@storybook/test": "^8.6.7",
81
81
  "@svgr/rollup": "^8.1.0",
82
82
  "@tanstack/react-query": "^5.62.0",
83
- "@testing-library/jest-dom": "6.8.0",
83
+ "@testing-library/jest-dom": "6.9.1",
84
84
  "@testing-library/react": "15.0.7",
85
85
  "@types/lodash.debounce": "^4.0.9",
86
- "@types/react": "18.3.24",
86
+ "@types/react": "18.3.25",
87
87
  "@types/react-dom": "18.3.7",
88
88
  "@types/react-imgix": "^9.5.4",
89
89
  "@typescript-eslint/eslint-plugin": "7.18.0",
@@ -101,7 +101,7 @@
101
101
  "eslint-plugin-prettier": "^5.1.3",
102
102
  "eslint-plugin-react": "^7.37.4",
103
103
  "eslint-plugin-react-hooks": "4.6.2",
104
- "eslint-plugin-react-refresh": "0.4.22",
104
+ "eslint-plugin-react-refresh": "0.4.23",
105
105
  "eslint-plugin-simple-import-sort": "^12.0.0",
106
106
  "eslint-plugin-storybook": "^0.12.0",
107
107
  "eslint-plugin-testing-library": "^7.1.1",