@flipdish/portal-library 5.7.0 → 5.8.0

package/dist/components/Form/GenericAutocompleteField/index.cjs.js

@@ -1,2 +1,2 @@
-"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()})};
+"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()})};
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/Form/GenericAutocompleteField/index.cjs.js.map

@@ -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"}
+{"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"}

package/dist/components/Form/GenericAutocompleteField/index.d.ts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { SyntheticEvent } from 'react';
 import { TextFieldProps } from '@mui/material/TextField';
 
@@ -20,8 +19,9 @@ interface Props<T> {
     required?: boolean;
     multiple?: boolean;
     limitTags?: number;
+    filterOptions?: (options: T[]) => T[];
 }
-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;
+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;
 
 export { GenericAutocompleteField as default };
 export type { Props };

package/dist/components/Form/GenericAutocompleteField/index.js

@@ -1,2 +1,2 @@
-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};
+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};
 //# sourceMappingURL=index.js.map

package/dist/components/Form/GenericAutocompleteField/index.js.map

@@ -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"}
+{"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"}

package/dist/components/atoms/ListItem/index.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("@mui/material/ListItem");module.exports=e;
+//# sourceMappingURL=index.cjs.js.map

package/dist/components/atoms/ListItem/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/atoms/ListItem/index.d.ts

@@ -0,0 +1,2 @@
+import ListItem from '@mui/material/ListItem';
+export { ListItemProps, default } from '@mui/material/ListItem';

package/dist/components/atoms/ListItem/index.js

@@ -0,0 +1,2 @@
+import m from"@mui/material/ListItem";export{default}from"@mui/material/ListItem";
+//# sourceMappingURL=index.js.map

package/dist/components/atoms/ListItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/atoms/ListItemIcon/index.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("@mui/material/ListItemIcon");module.exports=e;
+//# sourceMappingURL=index.cjs.js.map

package/dist/components/atoms/ListItemIcon/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/atoms/ListItemIcon/index.d.ts

@@ -0,0 +1,2 @@
+import ListItemIcon from '@mui/material/ListItemIcon';
+export { ListItemIconProps, default } from '@mui/material/ListItemIcon';

package/dist/components/atoms/ListItemIcon/index.js

@@ -0,0 +1,2 @@
+import m from"@mui/material/ListItemIcon";export{default}from"@mui/material/ListItemIcon";
+//# sourceMappingURL=index.js.map

package/dist/components/atoms/ListItemIcon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/atoms/ListItemText/index.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("@mui/material/ListItemText");module.exports=e;
+//# sourceMappingURL=index.cjs.js.map

package/dist/components/atoms/ListItemText/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/atoms/ListItemText/index.d.ts

@@ -0,0 +1,2 @@
+import ListItemText from '@mui/material/ListItemText';
+export { ListItemTextProps, default } from '@mui/material/ListItemText';

package/dist/components/atoms/ListItemText/index.js

@@ -0,0 +1,2 @@
+import t from"@mui/material/ListItemText";export{default}from"@mui/material/ListItemText";
+//# sourceMappingURL=index.js.map

package/dist/components/atoms/ListItemText/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/atoms/Select/index.cjs.js.map

@@ -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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"}
+{"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":"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"}

package/dist/components/atoms/Select/index.d.ts

@@ -1,4 +1,5 @@
 import { SelectProps as SelectProps$1 } from '@mui/material/Select';
+export { SelectChangeEvent } from '@mui/material/Select';
 
 interface SelectOption {
     value: number | string;

package/dist/components/atoms/Select/index.js.map

@@ -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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"}
+{"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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"}

package/dist/components/atoms/TextField/index.cjs.js.map

@@ -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"}
+{"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"}

package/dist/components/atoms/TextField/index.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { TextFieldProps as TextFieldProps$1 } from '@mui/material/TextField';
 
 type BaseTextFieldProps = Omit<TextFieldProps$1, 'error' | 'id' | 'type' | 'variant'> & {
@@ -8,15 +9,15 @@ type PasswordTextFieldProps = BaseTextFieldProps & {
     type: 'password';
     showPasswordAriaLabel: string;
     hidePasswordAriaLabel: string;
-    startAdornment?: string;
-    endAdornment?: string;
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
 };
 type GenericTextFieldProps = BaseTextFieldProps & {
     type?: Exclude<TextFieldProps$1['type'], 'password'>;
     showPasswordAriaLabel?: never;
     hidePasswordAriaLabel?: never;
-    startAdornment?: string;
-    endAdornment?: string;
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
 };
 type TextFieldProps = GenericTextFieldProps | PasswordTextFieldProps;
 declare const TextField: ({ disabled, errorText, fdKey, fullWidth, helperText, hidePasswordAriaLabel, label, multiline, required, showPasswordAriaLabel, type, startAdornment, endAdornment, ...props }: TextFieldProps) => JSX.Element;

package/dist/components/atoms/TextField/index.js.map

@@ -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"}
+{"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"}

package/dist/components/molecules/Autocomplete/index.d.ts

@@ -1,2 +1,2 @@
 import Autocomplete from '@mui/material/Autocomplete';
-export { default } from '@mui/material/Autocomplete';
+export { AutocompleteInputChangeReason, default } from '@mui/material/Autocomplete';

package/dist/components/molecules/Dialog/index.d.ts

@@ -1,2 +1,2 @@
 import Dialog from '@mui/material/Dialog';
-export { default } from '@mui/material/Dialog';
+export { DialogProps, default } from '@mui/material/Dialog';

package/dist/components/molecules/List/index.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("@mui/material/List");module.exports=e;
+//# sourceMappingURL=index.cjs.js.map

package/dist/components/molecules/List/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/molecules/List/index.d.ts

@@ -0,0 +1,2 @@
+import List from '@mui/material/List';
+export { ListProps, default } from '@mui/material/List';

package/dist/components/molecules/List/index.js

@@ -0,0 +1,2 @@
+import i from"@mui/material/List";export{default}from"@mui/material/List";
+//# sourceMappingURL=index.js.map

package/dist/components/molecules/List/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/molecules/MenuList/index.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("@mui/material/MenuList");module.exports=e;
+//# sourceMappingURL=index.cjs.js.map

package/dist/components/molecules/MenuList/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/molecules/MenuList/index.d.ts

@@ -0,0 +1,2 @@
+import MenuList from '@mui/material/MenuList';
+export { MenuListProps, default } from '@mui/material/MenuList';

package/dist/components/molecules/MenuList/index.js

@@ -0,0 +1,2 @@
+import i from"@mui/material/MenuList";export{default}from"@mui/material/MenuList";
+//# sourceMappingURL=index.js.map

package/dist/components/molecules/MenuList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/utilities/styledUtilities.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("@mui/material/styles");module.exports=e.styled;
+"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}});
 //# sourceMappingURL=styledUtilities.cjs.js.map

package/dist/utilities/styledUtilities.d.ts

@@ -1,2 +1,2 @@
 import { styled } from '@mui/material/styles';
-export { styled as default } from '@mui/material/styles';
+export { styled as default, keyframes } from '@mui/material/styles';

package/dist/utilities/styledUtilities.js

@@ -1,2 +1,2 @@
-import{styled as t}from"@mui/material/styles";export{styled as default}from"@mui/material/styles";
+import{styled as e}from"@mui/material/styles";export{styled as default,keyframes}from"@mui/material/styles";
 //# sourceMappingURL=styledUtilities.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flipdish/portal-library",
-  "version": "5.7.0",
+  "version": "5.8.0",
   "files": [
     "dist"
   ],