@flipdish/portal-library 1.0.62 → 1.0.63

package/dist/components/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("./themes/flipdishPublicTheme.cjs.js"),i=require("./ui/NotFoundPage/NotFoundPage.cjs.js"),r=require("./ui/FlipdishStaffContainer/FlipdishStaffContainer.cjs.js"),t=require("./ui/PageLayout/PageLayout.cjs.js"),o=require("./ui/PortalMock/PortalMock.cjs.js"),s=require("./ui/LazyComponent/LazyComponent.cjs.js"),c=require("./ui/Spacer/Spacer.cjs.js"),n=require("./ui/Chip/Chip.cjs.js"),u=require("./ui/Switch/Switch.cjs.js"),a=require("./ui/Form/utilities/formValidation.cjs.js"),d=require("./ui/Form/GenericAutocompleteField.cjs.js"),l=require("./ui/Form/GenericFormContainer.cjs.js"),p=require("./ui/Form/GenericTextField.cjs.js"),j=require("./ui/Form/PaginatedAutocompleteField.cjs.js"),x=require("./ui/GenericDateTimePickerField/GenericDateTimePickerField.cjs.js"),m=require("./ui/GenericRadioButtons/GenericRadioButtons.cjs.js"),q=require("./ui/DateTimeLocalizationProvider/DateTimeLocalizationProvider.cjs.js"),F=require("./ui/GenericTable/GenericTable.cjs.js"),T=require("./ui/GenericTableBody/GenericTableBody.cjs.js"),G=require("./ui/GenericTableBodyRow/GenericTableBodyRow.cjs.js"),L=require("./ui/GenericTableTitle/GenericTableTitle.cjs.js"),h=require("./ui/ListItemLink/ListItemLink.cjs.js"),g=require("./ui/ListItemLinkButton/ListItemLinkButton.cjs.js"),b=require("@mui/icons-material/Search"),P=require("@mui/icons-material/CalendarToday"),y=require("./custom-hooks/useRenderValidText.cjs.js"),k=require("./custom-hooks/useMicroFrontendAttributes.cjs.js"),I=require("./renderUtilities/renderUtilities.cjs.js"),f=require("./genericUtilities/index.cjs.js");exports.flipdishPublicTheme=e,exports.NotFoundPage=i,exports.FlipdishStaffContainer=r,exports.PageLayout=t.default,exports.PortalMock=o,exports.LazyComponent=s,exports.Spacer=c,exports.Chip=n,exports.Switch=u,exports.formikValidate=a.formikValidate,exports.GenericAutocompleteField=d,exports.GenericFormContainer=l,exports.GenericTextField=p,exports.PaginatedAutocompleteField=j,exports.GenericDatePickerField=x,exports.GenericRadioButtons=m,exports.DateTimeLocalizationProvider=q,exports.GenericTable=F,exports.GenericTableBody=T,exports.GenericTableBodyRow=G,exports.GenericTableTitle=L,exports.ListItemLink=h,exports.ListItemLinkButton=g.ListItemLinkButton,exports.SearchIcon=b,exports.CalendarTodayIcon=P,exports.useRenderValidText=y,exports.useMicroFrontendAttributes=k,exports.getAppId=I.getAppId,exports.getBrandId=I.getBrandId,exports.getIsFlipdishStaff=I.getIsFlipdishStaff,exports.getMicroFrontendAttribute=I.getMicroFrontendAttribute,exports.getOrgId=I.getOrgId,exports.lazyWithRetry=I.lazyWithRetry,exports.debounce=f.debounce;
+"use strict";var e=require("./themes/flipdishPublicTheme.cjs.js"),i=require("./ui/NotFoundPage/NotFoundPage.cjs.js"),r=require("./ui/FlipdishStaffContainer/FlipdishStaffContainer.cjs.js"),t=require("./ui/PageLayout/PageLayout.cjs.js"),o=require("./ui/PortalMock/PortalMock.cjs.js"),s=require("./ui/LazyComponent/LazyComponent.cjs.js"),c=require("./ui/Spacer/Spacer.cjs.js"),n=require("./ui/Chip/Chip.cjs.js"),u=require("./ui/Switch/Switch.cjs.js"),a=require("./ui/Form/utilities/formValidation.cjs.js"),d=require("./ui/Form/GenericAutocompleteField.cjs.js"),l=require("./ui/Form/GenericFormContainer.cjs.js"),p=require("./ui/Form/GenericTextField.cjs.js"),j=require("./ui/Form/PaginatedAutocompleteField.cjs.js"),x=require("./ui/GenericDatePickerField/GenericDatePickerField.cjs.js"),m=require("./ui/GenericDateTimePickerField/GenericDateTimePickerField.cjs.js"),F=require("./ui/GenericRadioButtons/GenericRadioButtons.cjs.js"),q=require("./ui/DateTimeLocalizationProvider/DateTimeLocalizationProvider.cjs.js"),T=require("./ui/GenericTable/GenericTable.cjs.js"),G=require("./ui/GenericTableBody/GenericTableBody.cjs.js"),L=require("./ui/GenericTableBodyRow/GenericTableBodyRow.cjs.js"),h=require("./ui/GenericTableTitle/GenericTableTitle.cjs.js"),P=require("./ui/ListItemLink/ListItemLink.cjs.js"),g=require("./ui/ListItemLinkButton/ListItemLinkButton.cjs.js"),b=require("@mui/icons-material/Search"),k=require("@mui/icons-material/CalendarToday"),y=require("./custom-hooks/useRenderValidText.cjs.js"),I=require("./custom-hooks/useMicroFrontendAttributes.cjs.js"),f=require("./renderUtilities/renderUtilities.cjs.js"),B=require("./genericUtilities/index.cjs.js");exports.flipdishPublicTheme=e,exports.NotFoundPage=i,exports.FlipdishStaffContainer=r,exports.PageLayout=t.default,exports.PortalMock=o,exports.LazyComponent=s,exports.Spacer=c,exports.Chip=n,exports.Switch=u,exports.formikValidate=a.formikValidate,exports.GenericAutocompleteField=d,exports.GenericFormContainer=l,exports.GenericTextField=p,exports.PaginatedAutocompleteField=j,exports.GenericDatePickerField=x,exports.GenericDateTimePickerField=m,exports.GenericRadioButtons=F,exports.DateTimeLocalizationProvider=q,exports.GenericTable=T,exports.GenericTableBody=G,exports.GenericTableBodyRow=L,exports.GenericTableTitle=h,exports.ListItemLink=P,exports.ListItemLinkButton=g.ListItemLinkButton,exports.SearchIcon=b,exports.CalendarTodayIcon=k,exports.useRenderValidText=y,exports.useMicroFrontendAttributes=I,exports.getAppId=f.getAppId,exports.getBrandId=f.getBrandId,exports.getIsFlipdishStaff=f.getIsFlipdishStaff,exports.getMicroFrontendAttribute=f.getMicroFrontendAttribute,exports.getOrgId=f.getOrgId,exports.lazyWithRetry=f.lazyWithRetry,exports.debounce=B.debounce;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/index.d.ts

@@ -12,7 +12,8 @@ export { default as GenericAutocompleteField } from './ui/Form/GenericAutocomple
 export { default as GenericFormContainer } from './ui/Form/GenericFormContainer.js';
 export { default as GenericTextField } from './ui/Form/GenericTextField.js';
 export { default as PaginatedAutocompleteField } from './ui/Form/PaginatedAutocompleteField.js';
-export { default as GenericDatePickerField } from './ui/GenericDateTimePickerField/GenericDateTimePickerField.js';
+export { default as GenericDatePickerField } from './ui/GenericDatePickerField/GenericDatePickerField.js';
+export { default as GenericDateTimePickerField } from './ui/GenericDateTimePickerField/GenericDateTimePickerField.js';
 export { default as GenericRadioButtons } from './ui/GenericRadioButtons/GenericRadioButtons.js';
 export { default as DateTimeLocalizationProvider } from './ui/DateTimeLocalizationProvider/DateTimeLocalizationProvider.js';
 export { GenericTableColumns } from './ui/GenericTable/types.js';

package/dist/components/index.js

@@ -1,2 +1,2 @@
-export{default as flipdishPublicTheme}from"./themes/flipdishPublicTheme.js";export{default as NotFoundPage}from"./ui/NotFoundPage/NotFoundPage.js";export{default as FlipdishStaffContainer}from"./ui/FlipdishStaffContainer/FlipdishStaffContainer.js";export{default as PageLayout}from"./ui/PageLayout/PageLayout.js";export{default as PortalMock}from"./ui/PortalMock/PortalMock.js";export{default as LazyComponent}from"./ui/LazyComponent/LazyComponent.js";export{default as Spacer}from"./ui/Spacer/Spacer.js";export{default as Chip}from"./ui/Chip/Chip.js";export{default as Switch}from"./ui/Switch/Switch.js";export{formikValidate}from"./ui/Form/utilities/formValidation.js";export{default as GenericAutocompleteField}from"./ui/Form/GenericAutocompleteField.js";export{default as GenericFormContainer}from"./ui/Form/GenericFormContainer.js";export{default as GenericTextField}from"./ui/Form/GenericTextField.js";export{default as PaginatedAutocompleteField}from"./ui/Form/PaginatedAutocompleteField.js";export{default as GenericDatePickerField}from"./ui/GenericDateTimePickerField/GenericDateTimePickerField.js";export{default as GenericRadioButtons}from"./ui/GenericRadioButtons/GenericRadioButtons.js";export{default as DateTimeLocalizationProvider}from"./ui/DateTimeLocalizationProvider/DateTimeLocalizationProvider.js";export{default as GenericTable}from"./ui/GenericTable/GenericTable.js";export{default as GenericTableBody}from"./ui/GenericTableBody/GenericTableBody.js";export{default as GenericTableBodyRow}from"./ui/GenericTableBodyRow/GenericTableBodyRow.js";export{default as GenericTableTitle}from"./ui/GenericTableTitle/GenericTableTitle.js";export{default as ListItemLink}from"./ui/ListItemLink/ListItemLink.js";export{ListItemLinkButton}from"./ui/ListItemLinkButton/ListItemLinkButton.js";export{default as SearchIcon}from"@mui/icons-material/Search";export{default as CalendarTodayIcon}from"@mui/icons-material/CalendarToday";export{default as useRenderValidText}from"./custom-hooks/useRenderValidText.js";export{default as useMicroFrontendAttributes}from"./custom-hooks/useMicroFrontendAttributes.js";export{getAppId,getBrandId,getIsFlipdishStaff,getMicroFrontendAttribute,getOrgId,lazyWithRetry}from"./renderUtilities/renderUtilities.js";export{debounce}from"./genericUtilities/index.js";
+export{default as flipdishPublicTheme}from"./themes/flipdishPublicTheme.js";export{default as NotFoundPage}from"./ui/NotFoundPage/NotFoundPage.js";export{default as FlipdishStaffContainer}from"./ui/FlipdishStaffContainer/FlipdishStaffContainer.js";export{default as PageLayout}from"./ui/PageLayout/PageLayout.js";export{default as PortalMock}from"./ui/PortalMock/PortalMock.js";export{default as LazyComponent}from"./ui/LazyComponent/LazyComponent.js";export{default as Spacer}from"./ui/Spacer/Spacer.js";export{default as Chip}from"./ui/Chip/Chip.js";export{default as Switch}from"./ui/Switch/Switch.js";export{formikValidate}from"./ui/Form/utilities/formValidation.js";export{default as GenericAutocompleteField}from"./ui/Form/GenericAutocompleteField.js";export{default as GenericFormContainer}from"./ui/Form/GenericFormContainer.js";export{default as GenericTextField}from"./ui/Form/GenericTextField.js";export{default as PaginatedAutocompleteField}from"./ui/Form/PaginatedAutocompleteField.js";export{default as GenericDatePickerField}from"./ui/GenericDatePickerField/GenericDatePickerField.js";export{default as GenericDateTimePickerField}from"./ui/GenericDateTimePickerField/GenericDateTimePickerField.js";export{default as GenericRadioButtons}from"./ui/GenericRadioButtons/GenericRadioButtons.js";export{default as DateTimeLocalizationProvider}from"./ui/DateTimeLocalizationProvider/DateTimeLocalizationProvider.js";export{default as GenericTable}from"./ui/GenericTable/GenericTable.js";export{default as GenericTableBody}from"./ui/GenericTableBody/GenericTableBody.js";export{default as GenericTableBodyRow}from"./ui/GenericTableBodyRow/GenericTableBodyRow.js";export{default as GenericTableTitle}from"./ui/GenericTableTitle/GenericTableTitle.js";export{default as ListItemLink}from"./ui/ListItemLink/ListItemLink.js";export{ListItemLinkButton}from"./ui/ListItemLinkButton/ListItemLinkButton.js";export{default as SearchIcon}from"@mui/icons-material/Search";export{default as CalendarTodayIcon}from"@mui/icons-material/CalendarToday";export{default as useRenderValidText}from"./custom-hooks/useRenderValidText.js";export{default as useMicroFrontendAttributes}from"./custom-hooks/useMicroFrontendAttributes.js";export{getAppId,getBrandId,getIsFlipdishStaff,getMicroFrontendAttribute,getOrgId,lazyWithRetry}from"./renderUtilities/renderUtilities.js";export{debounce}from"./genericUtilities/index.js";
 //# sourceMappingURL=index.js.map

package/dist/components/ui/Form/GenericTextField.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("formik"),t=require("@mui/material/TextField"),i=require("../../custom-hooks/useRenderValidText.cjs.js"),a=require("./FormItemLayout.cjs.js"),o=require("@mui/material/Typography"),l=require("@mui/material/InputAdornment");module.exports=({label:n,fieldName:d,placeholder:s,validation:u,onChange:m,multiline:h,minRows:c,maxRows:p,layout:v="horizontal",variant:x="standard",disabled:g=!1,required:j=!1,showHelperTextWhenValid:f=!1,startIcon:q,endIcon:y,value:b})=>{const w=!!d,T=(r,i,a,o,u)=>e.jsx(t,{label:"standard"===x?void 0:n,variant:x,value:b??r,"data-testid":`text-field-${d??n.toLowerCase().replace(/\s+/g,"-")}`,autoComplete:"off",fullWidth:!0,multiline:h,minRows:c??(h?3:void 0),maxRows:p??(h?10:void 0),style:{paddingRight:"horizontal"===v?16:0},placeholder:s||void 0,disabled:i||g,required:j,error:a,helperText:a||f?o:void 0,onChange:e=>{u&&u(d,e.target.value),m&&m(e)},slotProps:{htmlInput:{style:{paddingTop:"outlined"!==x?0:void 0,height:"1.1876em"}},formHelperText:{children:" ",style:{textAlign:"right"}}},InputProps:{startAdornment:q?e.jsx(l,{position:"start",children:q}):void 0,endAdornment:y?e.jsx(l,{position:"end",children:y}):void 0}}),I=()=>e.jsx(r.Field,{name:d,validate:u,children:({field:e,form:r})=>{const{errors:t,touched:a,isSubmitting:o}=r,l=t[e.name],n=!!l&&a[e.name],d=i({fieldError:l,showError:n,touched:!!a[e.name],value:e.value});return T(e.value,o,n,d,r.setFieldValue)}});return"vertical"===v?e.jsxs(e.Fragment,{children:["standard"===x&&e.jsx(o,{variant:"subtitle1",component:"h3",color:"textPrimary",children:n}),w?I():T()]}):e.jsx(a,{label:n,children:w?I():T()})};
+"use strict";var e=require("react/jsx-runtime"),r=require("formik"),t=require("@mui/material/TextField"),i=require("../../custom-hooks/useRenderValidText.cjs.js"),a=require("./FormItemLayout.cjs.js"),l=require("@mui/material/Typography"),o=require("@mui/material/InputAdornment");module.exports=({label:n,fieldName:d,placeholder:s,validation:u,onChange:m,multiline:h,minRows:c,maxRows:p,layout:v="horizontal",variant:x="standard",disabled:g=!1,required:j=!1,showHelperTextWhenValid:f=!1,startIcon:b,endIcon:q,value:y,type:w="text"})=>{const T=!!d,I=(r,i,a,l,u)=>e.jsx(t,{label:"standard"===x?void 0:n,variant:x,value:y??r,"data-testid":`text-field-${d??n.toLowerCase().replace(/\s+/g,"-")}`,autoComplete:"off",fullWidth:!0,multiline:h,minRows:c??(h?3:void 0),maxRows:p??(h?10:void 0),style:{paddingRight:"horizontal"===v?16:0},placeholder:s||void 0,disabled:i||g,required:j,error:a,helperText:a||f?l:void 0,onChange:e=>{"number"===w&&isNaN(Number(e.target.value))||(u&&u(d,e.target.value),m&&m(e))},slotProps:{htmlInput:{style:{paddingTop:"outlined"!==x?0:void 0,height:"1.1876em"}},formHelperText:{children:" ",style:{textAlign:"right"}}},InputProps:{startAdornment:b?e.jsx(o,{position:"start",children:b}):void 0,endAdornment:q?e.jsx(o,{position:"end",children:q}):void 0}}),R=()=>e.jsx(r.Field,{name:d,validate:u,children:({field:e,form:r})=>{const{errors:t,touched:a,isSubmitting:l}=r,o=t[e.name],n=!!o&&a[e.name],d=i({fieldError:o,showError:n,touched:!!a[e.name],value:e.value});return I(e.value,l,n,d,r.setFieldValue)}});return"vertical"===v?e.jsxs(e.Fragment,{children:["standard"===x&&e.jsx(l,{variant:"subtitle1",component:"h3",color:"textPrimary",children:n}),T?R():I()]}):e.jsx(a,{label:n,children:T?R():I()})};
 //# sourceMappingURL=GenericTextField.cjs.js.map

package/dist/components/ui/Form/GenericTextField.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"GenericTextField.cjs.js","sources":["../../../../src/components/ui/Form/GenericTextField.tsx"],"sourcesContent":["import { ChangeEvent, ReactNode } from 'react';\n\nimport { type FieldProps, Field } from 'formik';\nimport TextField, { TextFieldProps } from '@mui/material/TextField';\nimport useRenderValidText from '../../custom-hooks/useRenderValidText';\nimport FormItemLayout from './FormItemLayout';\nimport Typography from '@mui/material/Typography';\nimport InputAdornment from '@mui/material/InputAdornment';\n\ntype Props = {\n    label: string;\n    fieldName?: string;\n    placeholder?: string;\n    validation?: (value: string) => string | undefined;\n    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n    multiline?: boolean;\n    minRows?: number;\n    maxRows?: number;\n    layout?: 'horizontal' | 'vertical';\n    variant?: TextFieldProps['variant'];\n    disabled?: boolean;\n    required?: boolean;\n    showHelperTextWhenValid?: boolean;\n    startIcon?: React.ReactNode;\n    endIcon?: React.ReactNode;\n    value?: string;\n};\n\nconst GenericTextField = ({\n    label,\n    fieldName = undefined,\n    placeholder,\n    validation,\n    onChange,\n    multiline,\n    minRows,\n    maxRows,\n    layout = 'horizontal',\n    variant = 'standard',\n    disabled = false,\n    required = false,\n    showHelperTextWhenValid = false,\n    startIcon = undefined,\n    endIcon = undefined,\n    value,\n}: Props) => {\n    const useFormik = !!fieldName;\n\n    const renderField = (\n        formikValue?: string,\n        isSubmitting?: boolean,\n        showError?: boolean,\n        helperText?: string | ReactNode,\n        setFieldValue?: (name: string, value: string) => void,\n    ) => {\n        return (\n            <TextField\n                label={variant === 'standard' ? undefined : label}\n                variant={variant}\n                value={value ?? formikValue}\n                data-testid={`text-field-${fieldName ?? label.toLowerCase().replace(/\\s+/g, '-')}`}\n                autoComplete=\"off\"\n                fullWidth\n                multiline={multiline}\n                minRows={minRows ?? (multiline ? 3 : undefined)}\n                maxRows={maxRows ?? (multiline ? 10 : undefined)}\n                style={{ paddingRight: layout === 'horizontal' ? 16 : 0 }}\n                placeholder={placeholder ? placeholder : undefined}\n                disabled={isSubmitting || disabled}\n                required={required}\n                error={showError}\n                helperText={showError ? helperText : showHelperTextWhenValid ? helperText : undefined}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => {\n                    // eslint-disable-next-line @typescript-eslint/no-floating-promises\n                    setFieldValue && setFieldValue(fieldName, e.target.value);\n                    if (onChange) {\n                        onChange(e);\n                    }\n                }}\n                slotProps={{\n                    htmlInput: {\n                        style: {\n                            paddingTop: variant !== 'outlined' ? 0 : undefined,\n                            height: '1.1876em',\n                        },\n                    },\n                    formHelperText: {\n                        children: ' ', // reserves line height for error message\n                        style: { textAlign: 'right' },\n                    },\n                }}\n                InputProps={{\n                    startAdornment: startIcon ? <InputAdornment position=\"start\">{startIcon}</InputAdornment> : undefined,\n                    endAdornment: endIcon ? <InputAdornment position=\"end\">{endIcon}</InputAdornment> : undefined,\n                }}\n            />\n        );\n    };\n\n    const renderFormikField = () => {\n        return (\n            <Field name={fieldName} validate={validation}>\n                {({ field, form }: FieldProps) => {\n                    const { errors, touched, isSubmitting } = form;\n                    const fieldError = errors[field.name] as string | undefined;\n                    const showError = !!fieldError && (touched[field.name] as boolean | undefined);\n                    const helperText = useRenderValidText({\n                        fieldError,\n                        showError,\n                        touched: !!touched[field.name],\n                        value: field.value,\n                    });\n\n                    // eslint-disable-next-line @typescript-eslint/no-misused-promises\n                    return renderField(field.value as string, isSubmitting, showError, helperText, form.setFieldValue);\n                }}\n            </Field>\n        );\n    };\n\n    if (layout === 'vertical') {\n        return (\n            <>\n                {variant === 'standard' && (\n                    <Typography variant=\"subtitle1\" component=\"h3\" color=\"textPrimary\">\n                        {label}\n                    </Typography>\n                )}\n                {useFormik ? renderFormikField() : renderField()}\n            </>\n        );\n    }\n\n    return <FormItemLayout label={label}>{useFormik ? renderFormikField() : renderField()}</FormItemLayout>;\n};\n\nexport default GenericTextField;\n"],"names":["label","fieldName","placeholder","validation","onChange","multiline","minRows","maxRows","layout","variant","disabled","required","showHelperTextWhenValid","startIcon","endIcon","value","useFormik","renderField","formikValue","isSubmitting","showError","helperText","setFieldValue","_jsx","TextField","undefined","toLowerCase","replace","autoComplete","fullWidth","style","paddingRight","error","e","target","slotProps","htmlInput","paddingTop","height","formHelperText","children","textAlign","InputProps","startAdornment","InputAdornment","position","endAdornment","renderFormikField","Field","name","validate","field","form","errors","touched","fieldError","useRenderValidText","_jsxs","_Fragment","Typography","component","color","FormItemLayout"],"mappings":"uSA4ByB,EACrBA,QACAC,YACAC,cACAC,aACAC,WACAC,YACAC,UACAC,UACAC,SAAS,aACTC,UAAU,WACVC,YAAW,EACXC,YAAW,EACXC,2BAA0B,EAC1BC,YACAC,UACAC,YAEA,MAAMC,IAAcf,EAEdgB,EAAc,CAChBC,EACAC,EACAC,EACAC,EACAC,IAGIC,EAAAA,IAACC,EAAS,CACNxB,MAAmB,aAAZS,OAAyBgB,EAAYzB,EAC5CS,QAASA,EACTM,MAAOA,GAASG,EACH,cAAA,cAAcjB,GAAaD,EAAM0B,cAAcC,QAAQ,OAAQ,OAC5EC,aAAa,MACbC,aACAxB,UAAWA,EACXC,QAASA,IAAYD,EAAY,OAAIoB,GACrClB,QAASA,IAAYF,EAAY,QAAKoB,GACtCK,MAAO,CAAEC,aAAyB,eAAXvB,EAA0B,GAAK,GACtDN,YAAaA,QAA4BuB,EACzCf,SAAUS,GAAgBT,EAC1BC,SAAUA,EACVqB,MAAOZ,EACPC,WAAYD,GAAyBR,EAAbS,OAAoDI,EAC5ErB,SAAW6B,IAEPX,GAAiBA,EAAcrB,EAAWgC,EAAEC,OAAOnB,OAC/CX,GACAA,EAAS6B,EACZ,EAELE,UAAW,CACPC,UAAW,CACPN,MAAO,CACHO,WAAwB,aAAZ5B,EAAyB,OAAIgB,EACzCa,OAAQ,aAGhBC,eAAgB,CACZC,SAAU,IACVV,MAAO,CAAEW,UAAW,WAG5BC,WAAY,CACRC,eAAgB9B,EAAYU,MAACqB,EAAc,CAACC,SAAS,QAASL,SAAA3B,SAA8BY,EAC5FqB,aAAchC,EAAUS,MAACqB,EAAc,CAACC,SAAS,MAAOL,SAAA1B,SAA4BW,KAM9FsB,EAAoB,IAElBxB,MAACyB,EAAAA,OAAMC,KAAMhD,EAAWiD,SAAU/C,EAAUqC,SACvC,EAAGW,QAAOC,WACP,MAAMC,OAAEA,EAAMC,QAAEA,EAAOnC,aAAEA,GAAiBiC,EACpCG,EAAaF,EAAOF,EAAMF,MAC1B7B,IAAcmC,GAAeD,EAAQH,EAAMF,MAC3C5B,EAAamC,EAAmB,CAClCD,aACAnC,YACAkC,UAAWA,EAAQH,EAAMF,MACzBlC,MAAOoC,EAAMpC,QAIjB,OAAOE,EAAYkC,EAAMpC,MAAiBI,EAAcC,EAAWC,EAAY+B,EAAK9B,cAAc,IAMlH,MAAe,aAAXd,EAEIiD,OACKC,EAAAA,SAAA,CAAAlB,SAAA,CAAY,aAAZ/B,GACGc,MAACoC,EAAU,CAAClD,QAAQ,YAAYmD,UAAU,KAAKC,MAAM,uBAChD7D,IAGRgB,EAAY+B,IAAsB9B,OAKxCM,MAACuC,EAAc,CAAC9D,MAAOA,WAAQgB,EAAY+B,IAAsB9B,KAA+B"}
+{"version":3,"file":"GenericTextField.cjs.js","sources":["../../../../src/components/ui/Form/GenericTextField.tsx"],"sourcesContent":["import { ChangeEvent, ReactNode } from 'react';\n\nimport { type FieldProps, Field } from 'formik';\nimport TextField, { TextFieldProps } from '@mui/material/TextField';\nimport useRenderValidText from '../../custom-hooks/useRenderValidText';\nimport FormItemLayout from './FormItemLayout';\nimport Typography from '@mui/material/Typography';\nimport InputAdornment from '@mui/material/InputAdornment';\n\ntype Props = {\n    label: string;\n    fieldName?: string;\n    placeholder?: string;\n    validation?: (value: string) => string | undefined;\n    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n    multiline?: boolean;\n    minRows?: number;\n    maxRows?: number;\n    layout?: 'horizontal' | 'vertical';\n    variant?: TextFieldProps['variant'];\n    disabled?: boolean;\n    required?: boolean;\n    showHelperTextWhenValid?: boolean;\n    startIcon?: React.ReactNode;\n    endIcon?: React.ReactNode;\n    value?: string;\n    type?: 'number' | 'text';\n};\n\nconst GenericTextField = ({\n    label,\n    fieldName = undefined,\n    placeholder,\n    validation,\n    onChange,\n    multiline,\n    minRows,\n    maxRows,\n    layout = 'horizontal',\n    variant = 'standard',\n    disabled = false,\n    required = false,\n    showHelperTextWhenValid = false,\n    startIcon = undefined,\n    endIcon = undefined,\n    value,\n    type = 'text',\n}: Props) => {\n    const useFormik = !!fieldName;\n\n    const renderField = (\n        formikValue?: string,\n        isSubmitting?: boolean,\n        showError?: boolean,\n        helperText?: string | ReactNode,\n        setFieldValue?: (name: string, value: string) => void,\n    ) => {\n        return (\n            <TextField\n                label={variant === 'standard' ? undefined : label}\n                variant={variant}\n                value={value ?? formikValue}\n                data-testid={`text-field-${fieldName ?? label.toLowerCase().replace(/\\s+/g, '-')}`}\n                autoComplete=\"off\"\n                fullWidth\n                multiline={multiline}\n                minRows={minRows ?? (multiline ? 3 : undefined)}\n                maxRows={maxRows ?? (multiline ? 10 : undefined)}\n                style={{ paddingRight: layout === 'horizontal' ? 16 : 0 }}\n                placeholder={placeholder ? placeholder : undefined}\n                disabled={isSubmitting || disabled}\n                required={required}\n                error={showError}\n                helperText={showError ? helperText : showHelperTextWhenValid ? helperText : undefined}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => {\n                    if (type === 'number' && isNaN(Number(e.target.value))) {\n                        return;\n                    }\n\n                    // eslint-disable-next-line @typescript-eslint/no-floating-promises\n                    setFieldValue && setFieldValue(fieldName, e.target.value);\n                    if (onChange) {\n                        onChange(e);\n                    }\n                }}\n                slotProps={{\n                    htmlInput: {\n                        style: {\n                            paddingTop: variant !== 'outlined' ? 0 : undefined,\n                            height: '1.1876em',\n                        },\n                    },\n                    formHelperText: {\n                        children: ' ', // reserves line height for error message\n                        style: { textAlign: 'right' },\n                    },\n                }}\n                InputProps={{\n                    startAdornment: startIcon ? <InputAdornment position=\"start\">{startIcon}</InputAdornment> : undefined,\n                    endAdornment: endIcon ? <InputAdornment position=\"end\">{endIcon}</InputAdornment> : undefined,\n                }}\n            />\n        );\n    };\n\n    const renderFormikField = () => {\n        return (\n            <Field name={fieldName} validate={validation}>\n                {({ field, form }: FieldProps) => {\n                    const { errors, touched, isSubmitting } = form;\n                    const fieldError = errors[field.name] as string | undefined;\n                    const showError = !!fieldError && (touched[field.name] as boolean | undefined);\n                    const helperText = useRenderValidText({\n                        fieldError,\n                        showError,\n                        touched: !!touched[field.name],\n                        value: field.value,\n                    });\n\n                    // eslint-disable-next-line @typescript-eslint/no-misused-promises\n                    return renderField(field.value as string, isSubmitting, showError, helperText, form.setFieldValue);\n                }}\n            </Field>\n        );\n    };\n\n    if (layout === 'vertical') {\n        return (\n            <>\n                {variant === 'standard' && (\n                    <Typography variant=\"subtitle1\" component=\"h3\" color=\"textPrimary\">\n                        {label}\n                    </Typography>\n                )}\n                {useFormik ? renderFormikField() : renderField()}\n            </>\n        );\n    }\n\n    return <FormItemLayout label={label}>{useFormik ? renderFormikField() : renderField()}</FormItemLayout>;\n};\n\nexport default GenericTextField;\n"],"names":["label","fieldName","placeholder","validation","onChange","multiline","minRows","maxRows","layout","variant","disabled","required","showHelperTextWhenValid","startIcon","endIcon","value","type","useFormik","renderField","formikValue","isSubmitting","showError","helperText","setFieldValue","_jsx","TextField","undefined","toLowerCase","replace","autoComplete","fullWidth","style","paddingRight","error","e","isNaN","Number","target","slotProps","htmlInput","paddingTop","height","formHelperText","children","textAlign","InputProps","startAdornment","InputAdornment","position","endAdornment","renderFormikField","Field","name","validate","field","form","errors","touched","fieldError","useRenderValidText","_jsxs","_Fragment","Typography","component","color","FormItemLayout"],"mappings":"uSA6ByB,EACrBA,QACAC,YACAC,cACAC,aACAC,WACAC,YACAC,UACAC,UACAC,SAAS,aACTC,UAAU,WACVC,YAAW,EACXC,YAAW,EACXC,2BAA0B,EAC1BC,YACAC,UACAC,QACAC,OAAO,WAEP,MAAMC,IAAchB,EAEdiB,EAAc,CAChBC,EACAC,EACAC,EACAC,EACAC,IAGIC,EAAAA,IAACC,EAAS,CACNzB,MAAmB,aAAZS,OAAyBiB,EAAY1B,EAC5CS,QAASA,EACTM,MAAOA,GAASI,EACH,cAAA,cAAclB,GAAaD,EAAM2B,cAAcC,QAAQ,OAAQ,OAC5EC,aAAa,MACbC,aACAzB,UAAWA,EACXC,QAASA,IAAYD,EAAY,OAAIqB,GACrCnB,QAASA,IAAYF,EAAY,QAAKqB,GACtCK,MAAO,CAAEC,aAAyB,eAAXxB,EAA0B,GAAK,GACtDN,YAAaA,QAA4BwB,EACzChB,SAAUU,GAAgBV,EAC1BC,SAAUA,EACVsB,MAAOZ,EACPC,WAAYD,GAAyBT,EAAbU,OAAoDI,EAC5EtB,SAAW8B,IACM,WAATlB,GAAqBmB,MAAMC,OAAOF,EAAEG,OAAOtB,UAK/CQ,GAAiBA,EAActB,EAAWiC,EAAEG,OAAOtB,OAC/CX,GACAA,EAAS8B,GACZ,EAELI,UAAW,CACPC,UAAW,CACPR,MAAO,CACHS,WAAwB,aAAZ/B,EAAyB,OAAIiB,EACzCe,OAAQ,aAGhBC,eAAgB,CACZC,SAAU,IACVZ,MAAO,CAAEa,UAAW,WAG5BC,WAAY,CACRC,eAAgBjC,EAAYW,MAACuB,EAAc,CAACC,SAAS,QAASL,SAAA9B,SAA8Ba,EAC5FuB,aAAcnC,EAAUU,MAACuB,EAAc,CAACC,SAAS,MAAOL,SAAA7B,SAA4BY,KAM9FwB,EAAoB,IAElB1B,MAAC2B,EAAAA,OAAMC,KAAMnD,EAAWoD,SAAUlD,EAAUwC,SACvC,EAAGW,QAAOC,WACP,MAAMC,OAAEA,EAAMC,QAAEA,EAAOrC,aAAEA,GAAiBmC,EACpCG,EAAaF,EAAOF,EAAMF,MAC1B/B,IAAcqC,GAAeD,EAAQH,EAAMF,MAC3C9B,EAAaqC,EAAmB,CAClCD,aACArC,YACAoC,UAAWA,EAAQH,EAAMF,MACzBrC,MAAOuC,EAAMvC,QAIjB,OAAOG,EAAYoC,EAAMvC,MAAiBK,EAAcC,EAAWC,EAAYiC,EAAKhC,cAAc,IAMlH,MAAe,aAAXf,EAEIoD,OACKC,EAAAA,SAAA,CAAAlB,SAAA,CAAY,aAAZlC,GACGe,MAACsC,EAAU,CAACrD,QAAQ,YAAYsD,UAAU,KAAKC,MAAM,uBAChDhE,IAGRiB,EAAYiC,IAAsBhC,OAKxCM,MAACyC,EAAc,CAACjE,MAAOA,WAAQiB,EAAYiC,IAAsBhC,KAA+B"}

package/dist/components/ui/Form/GenericTextField.d.ts

@@ -19,7 +19,8 @@ type Props = {
     startIcon?: React.ReactNode;
     endIcon?: React.ReactNode;
     value?: string;
+    type?: 'number' | 'text';
 };
-declare const GenericTextField: ({ label, fieldName, placeholder, validation, onChange, multiline, minRows, maxRows, layout, variant, disabled, required, showHelperTextWhenValid, startIcon, endIcon, value, }: Props) => react_jsx_runtime.JSX.Element;
+declare const GenericTextField: ({ label, fieldName, placeholder, validation, onChange, multiline, minRows, maxRows, layout, variant, disabled, required, showHelperTextWhenValid, startIcon, endIcon, value, type, }: Props) => react_jsx_runtime.JSX.Element;
 
 export { GenericTextField as default };

package/dist/components/ui/Form/GenericTextField.js

@@ -1,2 +1,2 @@
-import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import{Field as o}from"formik";import i from"@mui/material/TextField";import a from"../../custom-hooks/useRenderValidText.js";import l from"./FormItemLayout.js";import n from"@mui/material/Typography";import d from"@mui/material/InputAdornment";const m=({label:m,fieldName:s,placeholder:u,validation:h,onChange:p,multiline:c,minRows:v,maxRows:f,layout:g="horizontal",variant:x="standard",disabled:y=!1,required:b=!1,showHelperTextWhenValid:w=!1,startIcon:T,endIcon:I,value:R})=>{const A=!!s,C=(e,t,o,a,l)=>r(i,{label:"standard"===x?void 0:m,variant:x,value:R??e,"data-testid":`text-field-${s??m.toLowerCase().replace(/\s+/g,"-")}`,autoComplete:"off",fullWidth:!0,multiline:c,minRows:v??(c?3:void 0),maxRows:f??(c?10:void 0),style:{paddingRight:"horizontal"===g?16:0},placeholder:u||void 0,disabled:t||y,required:b,error:o,helperText:o||w?a:void 0,onChange:e=>{l&&l(s,e.target.value),p&&p(e)},slotProps:{htmlInput:{style:{paddingTop:"outlined"!==x?0:void 0,height:"1.1876em"}},formHelperText:{children:" ",style:{textAlign:"right"}}},InputProps:{startAdornment:T?r(d,{position:"start",children:T}):void 0,endAdornment:I?r(d,{position:"end",children:I}):void 0}}),j=()=>r(o,{name:s,validate:h,children:({field:e,form:t})=>{const{errors:r,touched:o,isSubmitting:i}=t,l=r[e.name],n=!!l&&o[e.name],d=a({fieldError:l,showError:n,touched:!!o[e.name],value:e.value});return C(e.value,i,n,d,t.setFieldValue)}});return"vertical"===g?e(t,{children:["standard"===x&&r(n,{variant:"subtitle1",component:"h3",color:"textPrimary",children:m}),A?j():C()]}):r(l,{label:m,children:A?j():C()})};export{m as default};
+import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import{Field as o}from"formik";import i from"@mui/material/TextField";import a from"../../custom-hooks/useRenderValidText.js";import l from"./FormItemLayout.js";import n from"@mui/material/Typography";import d from"@mui/material/InputAdornment";const m=({label:m,fieldName:s,placeholder:u,validation:p,onChange:h,multiline:c,minRows:v,maxRows:f,layout:g="horizontal",variant:x="standard",disabled:b=!1,required:y=!1,showHelperTextWhenValid:w=!1,startIcon:T,endIcon:I,value:R,type:A="text"})=>{const C=!!s,N=(e,t,o,a,l)=>r(i,{label:"standard"===x?void 0:m,variant:x,value:R??e,"data-testid":`text-field-${s??m.toLowerCase().replace(/\s+/g,"-")}`,autoComplete:"off",fullWidth:!0,multiline:c,minRows:v??(c?3:void 0),maxRows:f??(c?10:void 0),style:{paddingRight:"horizontal"===g?16:0},placeholder:u||void 0,disabled:t||b,required:y,error:o,helperText:o||w?a:void 0,onChange:e=>{"number"===A&&isNaN(Number(e.target.value))||(l&&l(s,e.target.value),h&&h(e))},slotProps:{htmlInput:{style:{paddingTop:"outlined"!==x?0:void 0,height:"1.1876em"}},formHelperText:{children:" ",style:{textAlign:"right"}}},InputProps:{startAdornment:T?r(d,{position:"start",children:T}):void 0,endAdornment:I?r(d,{position:"end",children:I}):void 0}}),j=()=>r(o,{name:s,validate:p,children:({field:e,form:t})=>{const{errors:r,touched:o,isSubmitting:i}=t,l=r[e.name],n=!!l&&o[e.name],d=a({fieldError:l,showError:n,touched:!!o[e.name],value:e.value});return N(e.value,i,n,d,t.setFieldValue)}});return"vertical"===g?e(t,{children:["standard"===x&&r(n,{variant:"subtitle1",component:"h3",color:"textPrimary",children:m}),C?j():N()]}):r(l,{label:m,children:C?j():N()})};export{m as default};
 //# sourceMappingURL=GenericTextField.js.map

package/dist/components/ui/Form/GenericTextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"GenericTextField.js","sources":["../../../../src/components/ui/Form/GenericTextField.tsx"],"sourcesContent":["import { ChangeEvent, ReactNode } from 'react';\n\nimport { type FieldProps, Field } from 'formik';\nimport TextField, { TextFieldProps } from '@mui/material/TextField';\nimport useRenderValidText from '../../custom-hooks/useRenderValidText';\nimport FormItemLayout from './FormItemLayout';\nimport Typography from '@mui/material/Typography';\nimport InputAdornment from '@mui/material/InputAdornment';\n\ntype Props = {\n    label: string;\n    fieldName?: string;\n    placeholder?: string;\n    validation?: (value: string) => string | undefined;\n    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n    multiline?: boolean;\n    minRows?: number;\n    maxRows?: number;\n    layout?: 'horizontal' | 'vertical';\n    variant?: TextFieldProps['variant'];\n    disabled?: boolean;\n    required?: boolean;\n    showHelperTextWhenValid?: boolean;\n    startIcon?: React.ReactNode;\n    endIcon?: React.ReactNode;\n    value?: string;\n};\n\nconst GenericTextField = ({\n    label,\n    fieldName = undefined,\n    placeholder,\n    validation,\n    onChange,\n    multiline,\n    minRows,\n    maxRows,\n    layout = 'horizontal',\n    variant = 'standard',\n    disabled = false,\n    required = false,\n    showHelperTextWhenValid = false,\n    startIcon = undefined,\n    endIcon = undefined,\n    value,\n}: Props) => {\n    const useFormik = !!fieldName;\n\n    const renderField = (\n        formikValue?: string,\n        isSubmitting?: boolean,\n        showError?: boolean,\n        helperText?: string | ReactNode,\n        setFieldValue?: (name: string, value: string) => void,\n    ) => {\n        return (\n            <TextField\n                label={variant === 'standard' ? undefined : label}\n                variant={variant}\n                value={value ?? formikValue}\n                data-testid={`text-field-${fieldName ?? label.toLowerCase().replace(/\\s+/g, '-')}`}\n                autoComplete=\"off\"\n                fullWidth\n                multiline={multiline}\n                minRows={minRows ?? (multiline ? 3 : undefined)}\n                maxRows={maxRows ?? (multiline ? 10 : undefined)}\n                style={{ paddingRight: layout === 'horizontal' ? 16 : 0 }}\n                placeholder={placeholder ? placeholder : undefined}\n                disabled={isSubmitting || disabled}\n                required={required}\n                error={showError}\n                helperText={showError ? helperText : showHelperTextWhenValid ? helperText : undefined}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => {\n                    // eslint-disable-next-line @typescript-eslint/no-floating-promises\n                    setFieldValue && setFieldValue(fieldName, e.target.value);\n                    if (onChange) {\n                        onChange(e);\n                    }\n                }}\n                slotProps={{\n                    htmlInput: {\n                        style: {\n                            paddingTop: variant !== 'outlined' ? 0 : undefined,\n                            height: '1.1876em',\n                        },\n                    },\n                    formHelperText: {\n                        children: ' ', // reserves line height for error message\n                        style: { textAlign: 'right' },\n                    },\n                }}\n                InputProps={{\n                    startAdornment: startIcon ? <InputAdornment position=\"start\">{startIcon}</InputAdornment> : undefined,\n                    endAdornment: endIcon ? <InputAdornment position=\"end\">{endIcon}</InputAdornment> : undefined,\n                }}\n            />\n        );\n    };\n\n    const renderFormikField = () => {\n        return (\n            <Field name={fieldName} validate={validation}>\n                {({ field, form }: FieldProps) => {\n                    const { errors, touched, isSubmitting } = form;\n                    const fieldError = errors[field.name] as string | undefined;\n                    const showError = !!fieldError && (touched[field.name] as boolean | undefined);\n                    const helperText = useRenderValidText({\n                        fieldError,\n                        showError,\n                        touched: !!touched[field.name],\n                        value: field.value,\n                    });\n\n                    // eslint-disable-next-line @typescript-eslint/no-misused-promises\n                    return renderField(field.value as string, isSubmitting, showError, helperText, form.setFieldValue);\n                }}\n            </Field>\n        );\n    };\n\n    if (layout === 'vertical') {\n        return (\n            <>\n                {variant === 'standard' && (\n                    <Typography variant=\"subtitle1\" component=\"h3\" color=\"textPrimary\">\n                        {label}\n                    </Typography>\n                )}\n                {useFormik ? renderFormikField() : renderField()}\n            </>\n        );\n    }\n\n    return <FormItemLayout label={label}>{useFormik ? renderFormikField() : renderField()}</FormItemLayout>;\n};\n\nexport default GenericTextField;\n"],"names":["GenericTextField","label","fieldName","placeholder","validation","onChange","multiline","minRows","maxRows","layout","variant","disabled","required","showHelperTextWhenValid","startIcon","endIcon","value","useFormik","renderField","formikValue","isSubmitting","showError","helperText","setFieldValue","_jsx","TextField","undefined","toLowerCase","replace","autoComplete","fullWidth","style","paddingRight","error","e","target","slotProps","htmlInput","paddingTop","height","formHelperText","children","textAlign","InputProps","startAdornment","InputAdornment","position","endAdornment","renderFormikField","Field","name","validate","field","form","errors","touched","fieldError","useRenderValidText","_jsxs","_Fragment","Typography","component","color","FormItemLayout"],"mappings":"qTA4BM,MAAAA,EAAmB,EACrBC,QACAC,YACAC,cACAC,aACAC,WACAC,YACAC,UACAC,UACAC,SAAS,aACTC,UAAU,WACVC,YAAW,EACXC,YAAW,EACXC,2BAA0B,EAC1BC,YACAC,UACAC,YAEA,MAAMC,IAAcf,EAEdgB,EAAc,CAChBC,EACAC,EACAC,EACAC,EACAC,IAGIC,EAACC,EAAS,CACNxB,MAAmB,aAAZS,OAAyBgB,EAAYzB,EAC5CS,QAASA,EACTM,MAAOA,GAASG,EACH,cAAA,cAAcjB,GAAaD,EAAM0B,cAAcC,QAAQ,OAAQ,OAC5EC,aAAa,MACbC,aACAxB,UAAWA,EACXC,QAASA,IAAYD,EAAY,OAAIoB,GACrClB,QAASA,IAAYF,EAAY,QAAKoB,GACtCK,MAAO,CAAEC,aAAyB,eAAXvB,EAA0B,GAAK,GACtDN,YAAaA,QAA4BuB,EACzCf,SAAUS,GAAgBT,EAC1BC,SAAUA,EACVqB,MAAOZ,EACPC,WAAYD,GAAyBR,EAAbS,OAAoDI,EAC5ErB,SAAW6B,IAEPX,GAAiBA,EAAcrB,EAAWgC,EAAEC,OAAOnB,OAC/CX,GACAA,EAAS6B,EACZ,EAELE,UAAW,CACPC,UAAW,CACPN,MAAO,CACHO,WAAwB,aAAZ5B,EAAyB,OAAIgB,EACzCa,OAAQ,aAGhBC,eAAgB,CACZC,SAAU,IACVV,MAAO,CAAEW,UAAW,WAG5BC,WAAY,CACRC,eAAgB9B,EAAYU,EAACqB,EAAc,CAACC,SAAS,QAASL,SAAA3B,SAA8BY,EAC5FqB,aAAchC,EAAUS,EAACqB,EAAc,CAACC,SAAS,MAAOL,SAAA1B,SAA4BW,KAM9FsB,EAAoB,IAElBxB,EAACyB,GAAMC,KAAMhD,EAAWiD,SAAU/C,EAAUqC,SACvC,EAAGW,QAAOC,WACP,MAAMC,OAAEA,EAAMC,QAAEA,EAAOnC,aAAEA,GAAiBiC,EACpCG,EAAaF,EAAOF,EAAMF,MAC1B7B,IAAcmC,GAAeD,EAAQH,EAAMF,MAC3C5B,EAAamC,EAAmB,CAClCD,aACAnC,YACAkC,UAAWA,EAAQH,EAAMF,MACzBlC,MAAOoC,EAAMpC,QAIjB,OAAOE,EAAYkC,EAAMpC,MAAiBI,EAAcC,EAAWC,EAAY+B,EAAK9B,cAAc,IAMlH,MAAe,aAAXd,EAEIiD,EACKC,EAAA,CAAAlB,SAAA,CAAY,aAAZ/B,GACGc,EAACoC,EAAU,CAAClD,QAAQ,YAAYmD,UAAU,KAAKC,MAAM,uBAChD7D,IAGRgB,EAAY+B,IAAsB9B,OAKxCM,EAACuC,EAAc,CAAC9D,MAAOA,WAAQgB,EAAY+B,IAAsB9B,KAA+B"}
+{"version":3,"file":"GenericTextField.js","sources":["../../../../src/components/ui/Form/GenericTextField.tsx"],"sourcesContent":["import { ChangeEvent, ReactNode } from 'react';\n\nimport { type FieldProps, Field } from 'formik';\nimport TextField, { TextFieldProps } from '@mui/material/TextField';\nimport useRenderValidText from '../../custom-hooks/useRenderValidText';\nimport FormItemLayout from './FormItemLayout';\nimport Typography from '@mui/material/Typography';\nimport InputAdornment from '@mui/material/InputAdornment';\n\ntype Props = {\n    label: string;\n    fieldName?: string;\n    placeholder?: string;\n    validation?: (value: string) => string | undefined;\n    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n    multiline?: boolean;\n    minRows?: number;\n    maxRows?: number;\n    layout?: 'horizontal' | 'vertical';\n    variant?: TextFieldProps['variant'];\n    disabled?: boolean;\n    required?: boolean;\n    showHelperTextWhenValid?: boolean;\n    startIcon?: React.ReactNode;\n    endIcon?: React.ReactNode;\n    value?: string;\n    type?: 'number' | 'text';\n};\n\nconst GenericTextField = ({\n    label,\n    fieldName = undefined,\n    placeholder,\n    validation,\n    onChange,\n    multiline,\n    minRows,\n    maxRows,\n    layout = 'horizontal',\n    variant = 'standard',\n    disabled = false,\n    required = false,\n    showHelperTextWhenValid = false,\n    startIcon = undefined,\n    endIcon = undefined,\n    value,\n    type = 'text',\n}: Props) => {\n    const useFormik = !!fieldName;\n\n    const renderField = (\n        formikValue?: string,\n        isSubmitting?: boolean,\n        showError?: boolean,\n        helperText?: string | ReactNode,\n        setFieldValue?: (name: string, value: string) => void,\n    ) => {\n        return (\n            <TextField\n                label={variant === 'standard' ? undefined : label}\n                variant={variant}\n                value={value ?? formikValue}\n                data-testid={`text-field-${fieldName ?? label.toLowerCase().replace(/\\s+/g, '-')}`}\n                autoComplete=\"off\"\n                fullWidth\n                multiline={multiline}\n                minRows={minRows ?? (multiline ? 3 : undefined)}\n                maxRows={maxRows ?? (multiline ? 10 : undefined)}\n                style={{ paddingRight: layout === 'horizontal' ? 16 : 0 }}\n                placeholder={placeholder ? placeholder : undefined}\n                disabled={isSubmitting || disabled}\n                required={required}\n                error={showError}\n                helperText={showError ? helperText : showHelperTextWhenValid ? helperText : undefined}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => {\n                    if (type === 'number' && isNaN(Number(e.target.value))) {\n                        return;\n                    }\n\n                    // eslint-disable-next-line @typescript-eslint/no-floating-promises\n                    setFieldValue && setFieldValue(fieldName, e.target.value);\n                    if (onChange) {\n                        onChange(e);\n                    }\n                }}\n                slotProps={{\n                    htmlInput: {\n                        style: {\n                            paddingTop: variant !== 'outlined' ? 0 : undefined,\n                            height: '1.1876em',\n                        },\n                    },\n                    formHelperText: {\n                        children: ' ', // reserves line height for error message\n                        style: { textAlign: 'right' },\n                    },\n                }}\n                InputProps={{\n                    startAdornment: startIcon ? <InputAdornment position=\"start\">{startIcon}</InputAdornment> : undefined,\n                    endAdornment: endIcon ? <InputAdornment position=\"end\">{endIcon}</InputAdornment> : undefined,\n                }}\n            />\n        );\n    };\n\n    const renderFormikField = () => {\n        return (\n            <Field name={fieldName} validate={validation}>\n                {({ field, form }: FieldProps) => {\n                    const { errors, touched, isSubmitting } = form;\n                    const fieldError = errors[field.name] as string | undefined;\n                    const showError = !!fieldError && (touched[field.name] as boolean | undefined);\n                    const helperText = useRenderValidText({\n                        fieldError,\n                        showError,\n                        touched: !!touched[field.name],\n                        value: field.value,\n                    });\n\n                    // eslint-disable-next-line @typescript-eslint/no-misused-promises\n                    return renderField(field.value as string, isSubmitting, showError, helperText, form.setFieldValue);\n                }}\n            </Field>\n        );\n    };\n\n    if (layout === 'vertical') {\n        return (\n            <>\n                {variant === 'standard' && (\n                    <Typography variant=\"subtitle1\" component=\"h3\" color=\"textPrimary\">\n                        {label}\n                    </Typography>\n                )}\n                {useFormik ? renderFormikField() : renderField()}\n            </>\n        );\n    }\n\n    return <FormItemLayout label={label}>{useFormik ? renderFormikField() : renderField()}</FormItemLayout>;\n};\n\nexport default GenericTextField;\n"],"names":["GenericTextField","label","fieldName","placeholder","validation","onChange","multiline","minRows","maxRows","layout","variant","disabled","required","showHelperTextWhenValid","startIcon","endIcon","value","type","useFormik","renderField","formikValue","isSubmitting","showError","helperText","setFieldValue","_jsx","TextField","undefined","toLowerCase","replace","autoComplete","fullWidth","style","paddingRight","error","e","isNaN","Number","target","slotProps","htmlInput","paddingTop","height","formHelperText","children","textAlign","InputProps","startAdornment","InputAdornment","position","endAdornment","renderFormikField","Field","name","validate","field","form","errors","touched","fieldError","useRenderValidText","_jsxs","_Fragment","Typography","component","color","FormItemLayout"],"mappings":"qTA6BM,MAAAA,EAAmB,EACrBC,QACAC,YACAC,cACAC,aACAC,WACAC,YACAC,UACAC,UACAC,SAAS,aACTC,UAAU,WACVC,YAAW,EACXC,YAAW,EACXC,2BAA0B,EAC1BC,YACAC,UACAC,QACAC,OAAO,WAEP,MAAMC,IAAchB,EAEdiB,EAAc,CAChBC,EACAC,EACAC,EACAC,EACAC,IAGIC,EAACC,EAAS,CACNzB,MAAmB,aAAZS,OAAyBiB,EAAY1B,EAC5CS,QAASA,EACTM,MAAOA,GAASI,EACH,cAAA,cAAclB,GAAaD,EAAM2B,cAAcC,QAAQ,OAAQ,OAC5EC,aAAa,MACbC,aACAzB,UAAWA,EACXC,QAASA,IAAYD,EAAY,OAAIqB,GACrCnB,QAASA,IAAYF,EAAY,QAAKqB,GACtCK,MAAO,CAAEC,aAAyB,eAAXxB,EAA0B,GAAK,GACtDN,YAAaA,QAA4BwB,EACzChB,SAAUU,GAAgBV,EAC1BC,SAAUA,EACVsB,MAAOZ,EACPC,WAAYD,GAAyBT,EAAbU,OAAoDI,EAC5EtB,SAAW8B,IACM,WAATlB,GAAqBmB,MAAMC,OAAOF,EAAEG,OAAOtB,UAK/CQ,GAAiBA,EAActB,EAAWiC,EAAEG,OAAOtB,OAC/CX,GACAA,EAAS8B,GACZ,EAELI,UAAW,CACPC,UAAW,CACPR,MAAO,CACHS,WAAwB,aAAZ/B,EAAyB,OAAIiB,EACzCe,OAAQ,aAGhBC,eAAgB,CACZC,SAAU,IACVZ,MAAO,CAAEa,UAAW,WAG5BC,WAAY,CACRC,eAAgBjC,EAAYW,EAACuB,EAAc,CAACC,SAAS,QAASL,SAAA9B,SAA8Ba,EAC5FuB,aAAcnC,EAAUU,EAACuB,EAAc,CAACC,SAAS,MAAOL,SAAA7B,SAA4BY,KAM9FwB,EAAoB,IAElB1B,EAAC2B,GAAMC,KAAMnD,EAAWoD,SAAUlD,EAAUwC,SACvC,EAAGW,QAAOC,WACP,MAAMC,OAAEA,EAAMC,QAAEA,EAAOrC,aAAEA,GAAiBmC,EACpCG,EAAaF,EAAOF,EAAMF,MAC1B/B,IAAcqC,GAAeD,EAAQH,EAAMF,MAC3C9B,EAAaqC,EAAmB,CAClCD,aACArC,YACAoC,UAAWA,EAAQH,EAAMF,MACzBrC,MAAOuC,EAAMvC,QAIjB,OAAOG,EAAYoC,EAAMvC,MAAiBK,EAAcC,EAAWC,EAAYiC,EAAKhC,cAAc,IAMlH,MAAe,aAAXf,EAEIoD,EACKC,EAAA,CAAAlB,SAAA,CAAY,aAAZlC,GACGe,EAACsC,EAAU,CAACrD,QAAQ,YAAYsD,UAAU,KAAKC,MAAM,uBAChDhE,IAGRiB,EAAYiC,IAAsBhC,OAKxCM,EAACyC,EAAc,CAACjE,MAAOA,WAAQiB,EAAYiC,IAAsBhC,KAA+B"}

package/dist/components/ui/GenericDatePickerField/GenericDatePickerField.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),r=require("formik"),a=require("../Form/FormItemLayout.cjs.js"),i=require("@mui/x-date-pickers/DatePicker"),t=require("@mui/material/styles"),l=require("@mui/material/Box"),s=require("@mui/material/Typography"),o=require("../../custom-hooks/useRenderValidText.cjs.js");const d=t.styled(i.DatePicker)((({theme:e})=>({marginTop:e.spacing(2),width:"100%"})));module.exports=({label:i,fieldName:n,description:u,validation:c,variant:m="standard",layout:h,onChange:x,disabled:p=!1,disablePast:v=!1,disablefuture:j=!1,placeholder:b,showHelperTextWhenValid:g=!1})=>{const y=t.useTheme(),q=()=>e.jsx(r.Field,{name:n,validate:c,children:({field:r,form:a})=>{const{errors:t,touched:c,isSubmitting:q}=a,F=t[r.name],P=!!F&&c[r.name],T=o({fieldError:F,showError:P,touched:!!c[r.name],value:r.value});return e.jsxs(l,{sx:{paddingRight:"horizontal"===h?"16px":0},children:[e.jsx(d,{label:"standard"===m?void 0:i,value:r.value,onChange:e=>{a.setFieldValue(r.name,e),x&&x(e)},name:n,slotProps:{textField:{variant:m,placeholder:b,error:P,helperText:P||g?T:void 0,FormHelperTextProps:{children:" ",style:{textAlign:"right"}}}},disabled:q||p,disablePast:v,disableFuture:j}),u&&e.jsx(s,{variant:"caption",sx:{color:y.palette.text.secondary},children:u})]})}});return"vertical"===h?e.jsxs(e.Fragment,{children:["standard"===m&&e.jsx(s,{variant:"subtitle1",component:"h3",color:"textPrimary",children:i}),q()]}):e.jsx(a,{label:i,children:q()})};
+//# sourceMappingURL=GenericDatePickerField.cjs.js.map

package/dist/components/ui/GenericDatePickerField/GenericDatePickerField.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GenericDatePickerField.cjs.js","sources":["../../../../src/components/ui/GenericDatePickerField/GenericDatePickerField.tsx"],"sourcesContent":["import { type FieldProps, Field } from 'formik';\nimport FormItemLayout from '../Form/FormItemLayout';\nimport { DatePicker } from '@mui/x-date-pickers/DatePicker';\nimport { styled, useTheme } from '@mui/material/styles';\nimport { TextFieldVariants } from '@mui/material/TextField';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport useRenderValidText from '../../custom-hooks/useRenderValidText';\n\nconst StyledDateTimePicker = styled(DatePicker)(({ theme }) => ({\n    marginTop: theme.spacing(2),\n    width: '100%',\n}));\n\ntype Props = {\n    label: string;\n    placeholder?: string;\n    fieldName: string;\n    description?: string;\n    validation?: (value: string) => string | undefined;\n    layout?: 'horizontal' | 'vertical';\n    variant?: TextFieldVariants;\n    disabled?: boolean;\n    disablePast?: boolean;\n    disablefuture?: boolean;\n    onChange?: (dateTime: moment.Moment) => void;\n    showHelperTextWhenValid?: boolean;\n};\nconst GenericDatePickerField = ({\n    label,\n    fieldName,\n    description,\n    validation,\n    variant = 'standard',\n    layout,\n    onChange,\n    disabled = false,\n    disablePast = false,\n    disablefuture = false,\n    placeholder = undefined,\n    showHelperTextWhenValid = false,\n}: Props) => {\n    const theme = useTheme();\n\n    const renderField = () => {\n        return (\n            <Field name={fieldName} validate={validation}>\n                {({ field, form }: FieldProps) => {\n                    const { errors, touched, isSubmitting } = form;\n                    const fieldError = errors[field.name] as string | undefined;\n                    const showError = !!fieldError && (touched[field.name] as boolean | undefined);\n                    const helperText = useRenderValidText({\n                        fieldError,\n                        showError,\n                        touched: !!touched[field.name],\n                        value: field.value,\n                    });\n\n                    return (\n                        <Box sx={{ paddingRight: layout === 'horizontal' ? '16px' : 0 }}>\n                            <StyledDateTimePicker\n                                label={variant === 'standard' ? undefined : label}\n                                value={field.value}\n                                onChange={(value) => {\n                                    // eslint-disable-next-line @typescript-eslint/no-floating-promises\n                                    form.setFieldValue(field.name, value);\n                                    if (onChange) {\n                                        onChange(value);\n                                    }\n                                }}\n                                name={fieldName}\n                                slotProps={{\n                                    textField: {\n                                        variant,\n                                        placeholder,\n                                        error: showError,\n                                        helperText: showError ? helperText : showHelperTextWhenValid ? helperText : undefined,\n                                        FormHelperTextProps: {\n                                            children: ' ', // reserves line height for error message\n                                            style: { textAlign: 'right' },\n                                        },\n                                    },\n                                }}\n                                disabled={isSubmitting || disabled}\n                                disablePast={disablePast}\n                                disableFuture={disablefuture}\n                            />\n                            {description && (\n                                <Typography variant=\"caption\" sx={{ color: theme.palette.text.secondary }}>\n                                    {description}\n                                </Typography>\n                            )}\n                        </Box>\n                    );\n                }}\n            </Field>\n        );\n    };\n\n    if (layout === 'vertical') {\n        return (\n            <>\n                {variant === 'standard' && (\n                    <Typography variant=\"subtitle1\" component=\"h3\" color=\"textPrimary\">\n                        {label}\n                    </Typography>\n                )}\n                {renderField()}\n            </>\n        );\n    }\n\n    return <FormItemLayout label={label}>{renderField()}</FormItemLayout>;\n};\n\nexport default GenericDatePickerField;\n"],"names":["StyledDateTimePicker","styled","DatePicker","theme","marginTop","spacing","width","label","fieldName","description","validation","variant","layout","onChange","disabled","disablePast","disablefuture","placeholder","showHelperTextWhenValid","useTheme","renderField","_jsx","Field","name","validate","children","field","form","errors","touched","isSubmitting","fieldError","showError","helperText","useRenderValidText","value","_jsxs","Box","sx","paddingRight","undefined","setFieldValue","slotProps","textField","error","FormHelperTextProps","style","textAlign","disableFuture","jsx","Typography","color","palette","text","secondary","jsxs","_Fragment","component","FormItemLayout"],"mappings":"4TASA,MAAMA,EAAuBC,EAAAA,OAAOC,EAAAA,WAAPD,EAAmB,EAAGE,YAAa,CAC5DC,UAAWD,EAAME,QAAQ,GACzBC,MAAO,0BAiBoB,EAC3BC,QACAC,YACAC,cACAC,aACAC,UAAU,WACVC,SACAC,WACAC,YAAW,EACXC,eAAc,EACdC,iBAAgB,EAChBC,cACAC,2BAA0B,MAE1B,MAAMf,EAAQgB,EAAAA,WAERC,EAAc,IAEZC,MAACC,EAAAA,OAAMC,KAAMf,EAAWgB,SAAUd,EAAUe,SACvC,EAAGC,QAAOC,WACP,MAAMC,OAAEA,EAAMC,QAAEA,EAAOC,aAAEA,GAAiBH,EACpCI,EAAaH,EAAOF,EAAMH,MAC1BS,IAAcD,GAAeF,EAAQH,EAAMH,MAC3CU,EAAaC,EAAmB,CAClCH,aACAC,YACAH,UAAWA,EAAQH,EAAMH,MACzBY,MAAOT,EAAMS,QAGjB,OACIC,OAACC,EAAG,CAACC,GAAI,CAAEC,aAAyB,eAAX3B,EAA0B,OAAS,GACxDa,SAAA,CAAAJ,EAAAA,IAACrB,EAAoB,CACjBO,MAAmB,aAAZI,OAAyB6B,EAAYjC,EAC5C4B,MAAOT,EAAMS,MACbtB,SAAWsB,IAEPR,EAAKc,cAAcf,EAAMH,KAAMY,GAC3BtB,GACAA,EAASsB,EACZ,EAELZ,KAAMf,EACNkC,UAAW,CACPC,UAAW,CACPhC,UACAM,cACA2B,MAAOZ,EACPC,WAAYD,GAAyBd,EAAbe,OAAoDO,EAC5EK,oBAAqB,CACjBpB,SAAU,IACVqB,MAAO,CAAEC,UAAW,YAIhCjC,SAAUgB,GAAgBhB,EAC1BC,YAAaA,EACbiC,cAAehC,IAElBP,GACGY,EAAA4B,IAACC,EAAW,CAAAvC,QAAQ,UAAU2B,GAAI,CAAEa,MAAOhD,EAAMiD,QAAQC,KAAKC,WACzD7B,SAAAhB,MAIf,IAMlB,MAAe,aAAXG,EAEIwB,EAAAmB,KAAAC,WAAA,CAAA/B,SAAA,CACiB,aAAZd,GACGU,EAAA4B,IAACC,EAAU,CAACvC,QAAQ,YAAY8C,UAAU,KAAKN,MAAM,cAChD1B,SAAAlB,IAGRa,OAKNC,EAAA4B,IAACS,EAAc,CAACnD,MAAOA,EAAQkB,SAAAL,KAA+B"}

package/dist/components/ui/GenericDatePickerField/GenericDatePickerField.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TextFieldVariants } from '@mui/material/TextField';
+
+type Props = {
+    label: string;
+    placeholder?: string;
+    fieldName: string;
+    description?: string;
+    validation?: (value: string) => string | undefined;
+    layout?: 'horizontal' | 'vertical';
+    variant?: TextFieldVariants;
+    disabled?: boolean;
+    disablePast?: boolean;
+    disablefuture?: boolean;
+    onChange?: (dateTime: moment.Moment) => void;
+    showHelperTextWhenValid?: boolean;
+};
+declare const GenericDatePickerField: ({ label, fieldName, description, validation, variant, layout, onChange, disabled, disablePast, disablefuture, placeholder, showHelperTextWhenValid, }: Props) => react_jsx_runtime.JSX.Element;
+
+export { GenericDatePickerField as default };

package/dist/components/ui/GenericDatePickerField/GenericDatePickerField.js

@@ -0,0 +1,2 @@
+import{jsxs as e,Fragment as r,jsx as t}from"react/jsx-runtime";import{Field as a}from"formik";import i from"../Form/FormItemLayout.js";import{DatePicker as o}from"@mui/x-date-pickers/DatePicker";import{styled as l,useTheme as d}from"@mui/material/styles";import n from"@mui/material/Box";import m from"@mui/material/Typography";import s from"../../custom-hooks/useRenderValidText.js";const p=l(o)((({theme:e})=>({marginTop:e.spacing(2),width:"100%"}))),c=({label:o,fieldName:l,description:c,validation:h,variant:u="standard",layout:f,onChange:x,disabled:v=!1,disablePast:b=!1,disablefuture:g=!1,placeholder:y,showHelperTextWhenValid:F=!1})=>{const P=d(),T=()=>t(a,{name:l,validate:h,children:({field:r,form:a})=>{const{errors:i,touched:d,isSubmitting:h}=a,T=i[r.name],k=!!T&&d[r.name],j=s({fieldError:T,showError:k,touched:!!d[r.name],value:r.value});return e(n,{sx:{paddingRight:"horizontal"===f?"16px":0},children:[t(p,{label:"standard"===u?void 0:o,value:r.value,onChange:e=>{a.setFieldValue(r.name,e),x&&x(e)},name:l,slotProps:{textField:{variant:u,placeholder:y,error:k,helperText:k||F?j:void 0,FormHelperTextProps:{children:" ",style:{textAlign:"right"}}}},disabled:h||v,disablePast:b,disableFuture:g}),c&&t(m,{variant:"caption",sx:{color:P.palette.text.secondary},children:c})]})}});return"vertical"===f?e(r,{children:["standard"===u&&t(m,{variant:"subtitle1",component:"h3",color:"textPrimary",children:o}),T()]}):t(i,{label:o,children:T()})};export{c as default};
+//# sourceMappingURL=GenericDatePickerField.js.map

package/dist/components/ui/GenericDatePickerField/GenericDatePickerField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GenericDatePickerField.js","sources":["../../../../src/components/ui/GenericDatePickerField/GenericDatePickerField.tsx"],"sourcesContent":["import { type FieldProps, Field } from 'formik';\nimport FormItemLayout from '../Form/FormItemLayout';\nimport { DatePicker } from '@mui/x-date-pickers/DatePicker';\nimport { styled, useTheme } from '@mui/material/styles';\nimport { TextFieldVariants } from '@mui/material/TextField';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport useRenderValidText from '../../custom-hooks/useRenderValidText';\n\nconst StyledDateTimePicker = styled(DatePicker)(({ theme }) => ({\n    marginTop: theme.spacing(2),\n    width: '100%',\n}));\n\ntype Props = {\n    label: string;\n    placeholder?: string;\n    fieldName: string;\n    description?: string;\n    validation?: (value: string) => string | undefined;\n    layout?: 'horizontal' | 'vertical';\n    variant?: TextFieldVariants;\n    disabled?: boolean;\n    disablePast?: boolean;\n    disablefuture?: boolean;\n    onChange?: (dateTime: moment.Moment) => void;\n    showHelperTextWhenValid?: boolean;\n};\nconst GenericDatePickerField = ({\n    label,\n    fieldName,\n    description,\n    validation,\n    variant = 'standard',\n    layout,\n    onChange,\n    disabled = false,\n    disablePast = false,\n    disablefuture = false,\n    placeholder = undefined,\n    showHelperTextWhenValid = false,\n}: Props) => {\n    const theme = useTheme();\n\n    const renderField = () => {\n        return (\n            <Field name={fieldName} validate={validation}>\n                {({ field, form }: FieldProps) => {\n                    const { errors, touched, isSubmitting } = form;\n                    const fieldError = errors[field.name] as string | undefined;\n                    const showError = !!fieldError && (touched[field.name] as boolean | undefined);\n                    const helperText = useRenderValidText({\n                        fieldError,\n                        showError,\n                        touched: !!touched[field.name],\n                        value: field.value,\n                    });\n\n                    return (\n                        <Box sx={{ paddingRight: layout === 'horizontal' ? '16px' : 0 }}>\n                            <StyledDateTimePicker\n                                label={variant === 'standard' ? undefined : label}\n                                value={field.value}\n                                onChange={(value) => {\n                                    // eslint-disable-next-line @typescript-eslint/no-floating-promises\n                                    form.setFieldValue(field.name, value);\n                                    if (onChange) {\n                                        onChange(value);\n                                    }\n                                }}\n                                name={fieldName}\n                                slotProps={{\n                                    textField: {\n                                        variant,\n                                        placeholder,\n                                        error: showError,\n                                        helperText: showError ? helperText : showHelperTextWhenValid ? helperText : undefined,\n                                        FormHelperTextProps: {\n                                            children: ' ', // reserves line height for error message\n                                            style: { textAlign: 'right' },\n                                        },\n                                    },\n                                }}\n                                disabled={isSubmitting || disabled}\n                                disablePast={disablePast}\n                                disableFuture={disablefuture}\n                            />\n                            {description && (\n                                <Typography variant=\"caption\" sx={{ color: theme.palette.text.secondary }}>\n                                    {description}\n                                </Typography>\n                            )}\n                        </Box>\n                    );\n                }}\n            </Field>\n        );\n    };\n\n    if (layout === 'vertical') {\n        return (\n            <>\n                {variant === 'standard' && (\n                    <Typography variant=\"subtitle1\" component=\"h3\" color=\"textPrimary\">\n                        {label}\n                    </Typography>\n                )}\n                {renderField()}\n            </>\n        );\n    }\n\n    return <FormItemLayout label={label}>{renderField()}</FormItemLayout>;\n};\n\nexport default GenericDatePickerField;\n"],"names":["StyledDateTimePicker","styled","DatePicker","theme","marginTop","spacing","width","GenericDatePickerField","label","fieldName","description","validation","variant","layout","onChange","disabled","disablePast","disablefuture","placeholder","showHelperTextWhenValid","useTheme","renderField","_jsx","Field","name","validate","children","field","form","errors","touched","isSubmitting","fieldError","showError","helperText","useRenderValidText","value","_jsxs","Box","sx","paddingRight","undefined","setFieldValue","slotProps","textField","error","FormHelperTextProps","style","textAlign","disableFuture","Typography","color","palette","text","secondary","_Fragment","component","FormItemLayout"],"mappings":"iYASA,MAAMA,EAAuBC,EAAOC,EAAPD,EAAmB,EAAGE,YAAa,CAC5DC,UAAWD,EAAME,QAAQ,GACzBC,MAAO,WAiBLC,EAAyB,EAC3BC,QACAC,YACAC,cACAC,aACAC,UAAU,WACVC,SACAC,WACAC,YAAW,EACXC,eAAc,EACdC,iBAAgB,EAChBC,cACAC,2BAA0B,MAE1B,MAAMhB,EAAQiB,IAERC,EAAc,IAEZC,EAACC,GAAMC,KAAMf,EAAWgB,SAAUd,EAAUe,SACvC,EAAGC,QAAOC,WACP,MAAMC,OAAEA,EAAMC,QAAEA,EAAOC,aAAEA,GAAiBH,EACpCI,EAAaH,EAAOF,EAAMH,MAC1BS,IAAcD,GAAeF,EAAQH,EAAMH,MAC3CU,EAAaC,EAAmB,CAClCH,aACAC,YACAH,UAAWA,EAAQH,EAAMH,MACzBY,MAAOT,EAAMS,QAGjB,OACIC,EAACC,EAAG,CAACC,GAAI,CAAEC,aAAyB,eAAX3B,EAA0B,OAAS,GACxDa,SAAA,CAAAJ,EAACtB,EAAoB,CACjBQ,MAAmB,aAAZI,OAAyB6B,EAAYjC,EAC5C4B,MAAOT,EAAMS,MACbtB,SAAWsB,IAEPR,EAAKc,cAAcf,EAAMH,KAAMY,GAC3BtB,GACAA,EAASsB,EACZ,EAELZ,KAAMf,EACNkC,UAAW,CACPC,UAAW,CACPhC,UACAM,cACA2B,MAAOZ,EACPC,WAAYD,GAAyBd,EAAbe,OAAoDO,EAC5EK,oBAAqB,CACjBpB,SAAU,IACVqB,MAAO,CAAEC,UAAW,YAIhCjC,SAAUgB,GAAgBhB,EAC1BC,YAAaA,EACbiC,cAAehC,IAElBP,GACGY,EAAC4B,EAAW,CAAAtC,QAAQ,UAAU2B,GAAI,CAAEY,MAAOhD,EAAMiD,QAAQC,KAAKC,WACzD5B,SAAAhB,MAIf,IAMlB,MAAe,aAAXG,EAEIwB,EAAAkB,EAAA,CAAA7B,SAAA,CACiB,aAAZd,GACGU,EAAC4B,EAAU,CAACtC,QAAQ,YAAY4C,UAAU,KAAKL,MAAM,cAChDzB,SAAAlB,IAGRa,OAKNC,EAACmC,EAAc,CAACjD,MAAOA,EAAQkB,SAAAL,KAA+B"}

package/dist/components/ui/GenericDateTimePickerField/GenericDateTimePickerField.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"GenericDateTimePickerField.cjs.js","sources":["../../../../src/components/ui/GenericDateTimePickerField/GenericDateTimePickerField.tsx"],"sourcesContent":["import { type FieldProps, Field } from 'formik';\nimport FormItemLayout from '../Form/FormItemLayout';\nimport { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';\nimport { styled, useTheme } from '@mui/material/styles';\nimport { TextFieldVariants } from '@mui/material/TextField';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport useRenderValidText from '../../custom-hooks/useRenderValidText';\n\nconst StyledDateTimePicker = styled(DateTimePicker)(({ theme }) => ({\n    marginTop: theme.spacing(2),\n    width: '100%',\n}));\n\ntype Props = {\n    label: string;\n    placeholder?: string;\n    fieldName: string;\n    description?: string;\n    validation?: (value: string) => string | undefined;\n    layout?: 'horizontal' | 'vertical';\n    variant?: TextFieldVariants;\n    disabled?: boolean;\n    disablePast?: boolean;\n    disablefuture?: boolean;\n    onChange?: (dateTime: moment.Moment) => void;\n    showHelperTextWhenValid?: boolean;\n};\nconst GenericDatePickerField = ({\n    label,\n    fieldName,\n    description,\n    validation,\n    variant = 'standard',\n    layout,\n    onChange,\n    disabled = false,\n    disablePast = false,\n    disablefuture = false,\n    placeholder = undefined,\n    showHelperTextWhenValid = false,\n}: Props) => {\n    const theme = useTheme();\n\n    const renderField = () => {\n        return (\n            <Field name={fieldName} validate={validation}>\n                {({ field, form }: FieldProps) => {\n                    const { errors, touched, isSubmitting } = form;\n                    const fieldError = errors[field.name] as string | undefined;\n                    const showError = !!fieldError && (touched[field.name] as boolean | undefined);\n                    const helperText = useRenderValidText({\n                        fieldError,\n                        showError,\n                        touched: !!touched[field.name],\n                        value: field.value,\n                    });\n\n                    return (\n                        <Box sx={{ paddingRight: layout === 'horizontal' ? '16px' : 0 }}>\n                            <StyledDateTimePicker\n                                label={variant === 'standard' ? undefined : label}\n                                value={field.value}\n                                onChange={(value) => {\n                                    // eslint-disable-next-line @typescript-eslint/no-floating-promises\n                                    form.setFieldValue(field.name, value);\n                                    if (onChange) {\n                                        onChange(value);\n                                    }\n                                }}\n                                name={fieldName}\n                                slotProps={{\n                                    textField: {\n                                        variant,\n                                        placeholder,\n                                        error: showError,\n                                        helperText: showError ? helperText : showHelperTextWhenValid ? helperText : undefined,\n                                        FormHelperTextProps: {\n                                            children: ' ', // reserves line height for error message\n                                            style: { textAlign: 'right' },\n                                        },\n                                    },\n                                }}\n                                disabled={isSubmitting || disabled}\n                                disablePast={disablePast}\n                                disableFuture={disablefuture}\n                            />\n                            {description && (\n                                <Typography variant=\"caption\" sx={{ color: theme.palette.text.secondary }}>\n                                    {description}\n                                </Typography>\n                            )}\n                        </Box>\n                    );\n                }}\n            </Field>\n        );\n    };\n\n    if (layout === 'vertical') {\n        return (\n            <>\n                {variant === 'standard' && (\n                    <Typography variant=\"subtitle1\" component=\"h3\" color=\"textPrimary\">\n                        {label}\n                    </Typography>\n                )}\n                {renderField()}\n            </>\n        );\n    }\n\n    return <FormItemLayout label={label}>{renderField()}</FormItemLayout>;\n};\n\nexport default GenericDatePickerField;\n"],"names":["StyledDateTimePicker","styled","DateTimePicker","theme","marginTop","spacing","width","label","fieldName","description","validation","variant","layout","onChange","disabled","disablePast","disablefuture","placeholder","showHelperTextWhenValid","useTheme","renderField","_jsx","Field","name","validate","children","field","form","errors","touched","isSubmitting","fieldError","showError","helperText","useRenderValidText","value","_jsxs","Box","sx","paddingRight","undefined","setFieldValue","slotProps","textField","error","FormHelperTextProps","style","textAlign","disableFuture","jsx","Typography","color","palette","text","secondary","jsxs","_Fragment","component","FormItemLayout"],"mappings":"gUASA,MAAMA,EAAuBC,EAAAA,OAAOC,EAAAA,eAAPD,EAAuB,EAAGE,YAAa,CAChEC,UAAWD,EAAME,QAAQ,GACzBC,MAAO,0BAiBoB,EAC3BC,QACAC,YACAC,cACAC,aACAC,UAAU,WACVC,SACAC,WACAC,YAAW,EACXC,eAAc,EACdC,iBAAgB,EAChBC,cACAC,2BAA0B,MAE1B,MAAMf,EAAQgB,EAAAA,WAERC,EAAc,IAEZC,MAACC,EAAAA,OAAMC,KAAMf,EAAWgB,SAAUd,EAAUe,SACvC,EAAGC,QAAOC,WACP,MAAMC,OAAEA,EAAMC,QAAEA,EAAOC,aAAEA,GAAiBH,EACpCI,EAAaH,EAAOF,EAAMH,MAC1BS,IAAcD,GAAeF,EAAQH,EAAMH,MAC3CU,EAAaC,EAAmB,CAClCH,aACAC,YACAH,UAAWA,EAAQH,EAAMH,MACzBY,MAAOT,EAAMS,QAGjB,OACIC,OAACC,EAAG,CAACC,GAAI,CAAEC,aAAyB,eAAX3B,EAA0B,OAAS,GACxDa,SAAA,CAAAJ,EAAAA,IAACrB,EAAoB,CACjBO,MAAmB,aAAZI,OAAyB6B,EAAYjC,EAC5C4B,MAAOT,EAAMS,MACbtB,SAAWsB,IAEPR,EAAKc,cAAcf,EAAMH,KAAMY,GAC3BtB,GACAA,EAASsB,EACZ,EAELZ,KAAMf,EACNkC,UAAW,CACPC,UAAW,CACPhC,UACAM,cACA2B,MAAOZ,EACPC,WAAYD,GAAyBd,EAAbe,OAAoDO,EAC5EK,oBAAqB,CACjBpB,SAAU,IACVqB,MAAO,CAAEC,UAAW,YAIhCjC,SAAUgB,GAAgBhB,EAC1BC,YAAaA,EACbiC,cAAehC,IAElBP,GACGY,EAAA4B,IAACC,EAAW,CAAAvC,QAAQ,UAAU2B,GAAI,CAAEa,MAAOhD,EAAMiD,QAAQC,KAAKC,WACzD7B,SAAAhB,MAIf,IAMlB,MAAe,aAAXG,EAEIwB,EAAAmB,KAAAC,WAAA,CAAA/B,SAAA,CACiB,aAAZd,GACGU,EAAA4B,IAACC,EAAU,CAACvC,QAAQ,YAAY8C,UAAU,KAAKN,MAAM,cAChD1B,SAAAlB,IAGRa,OAKNC,EAAA4B,IAACS,EAAc,CAACnD,MAAOA,EAAQkB,SAAAL,KAA+B"}
+{"version":3,"file":"GenericDateTimePickerField.cjs.js","sources":["../../../../src/components/ui/GenericDateTimePickerField/GenericDateTimePickerField.tsx"],"sourcesContent":["import { type FieldProps, Field } from 'formik';\nimport FormItemLayout from '../Form/FormItemLayout';\nimport { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';\nimport { styled, useTheme } from '@mui/material/styles';\nimport { TextFieldVariants } from '@mui/material/TextField';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport useRenderValidText from '../../custom-hooks/useRenderValidText';\n\nconst StyledDateTimePicker = styled(DateTimePicker)(({ theme }) => ({\n    marginTop: theme.spacing(2),\n    width: '100%',\n}));\n\ntype Props = {\n    label: string;\n    placeholder?: string;\n    fieldName: string;\n    description?: string;\n    validation?: (value: string) => string | undefined;\n    layout?: 'horizontal' | 'vertical';\n    variant?: TextFieldVariants;\n    disabled?: boolean;\n    disablePast?: boolean;\n    disablefuture?: boolean;\n    onChange?: (dateTime: moment.Moment) => void;\n    showHelperTextWhenValid?: boolean;\n};\nconst GenericDateTimePickerField = ({\n    label,\n    fieldName,\n    description,\n    validation,\n    variant = 'standard',\n    layout,\n    onChange,\n    disabled = false,\n    disablePast = false,\n    disablefuture = false,\n    placeholder = undefined,\n    showHelperTextWhenValid = false,\n}: Props) => {\n    const theme = useTheme();\n\n    const renderField = () => {\n        return (\n            <Field name={fieldName} validate={validation}>\n                {({ field, form }: FieldProps) => {\n                    const { errors, touched, isSubmitting } = form;\n                    const fieldError = errors[field.name] as string | undefined;\n                    const showError = !!fieldError && (touched[field.name] as boolean | undefined);\n                    const helperText = useRenderValidText({\n                        fieldError,\n                        showError,\n                        touched: !!touched[field.name],\n                        value: field.value,\n                    });\n\n                    return (\n                        <Box sx={{ paddingRight: layout === 'horizontal' ? '16px' : 0 }}>\n                            <StyledDateTimePicker\n                                label={variant === 'standard' ? undefined : label}\n                                value={field.value}\n                                onChange={(value) => {\n                                    // eslint-disable-next-line @typescript-eslint/no-floating-promises\n                                    form.setFieldValue(field.name, value);\n                                    if (onChange) {\n                                        onChange(value);\n                                    }\n                                }}\n                                name={fieldName}\n                                slotProps={{\n                                    textField: {\n                                        variant,\n                                        placeholder,\n                                        error: showError,\n                                        helperText: showError ? helperText : showHelperTextWhenValid ? helperText : undefined,\n                                        FormHelperTextProps: {\n                                            children: ' ', // reserves line height for error message\n                                            style: { textAlign: 'right' },\n                                        },\n                                    },\n                                }}\n                                disabled={isSubmitting || disabled}\n                                disablePast={disablePast}\n                                disableFuture={disablefuture}\n                            />\n                            {description && (\n                                <Typography variant=\"caption\" sx={{ color: theme.palette.text.secondary }}>\n                                    {description}\n                                </Typography>\n                            )}\n                        </Box>\n                    );\n                }}\n            </Field>\n        );\n    };\n\n    if (layout === 'vertical') {\n        return (\n            <>\n                {variant === 'standard' && (\n                    <Typography variant=\"subtitle1\" component=\"h3\" color=\"textPrimary\">\n                        {label}\n                    </Typography>\n                )}\n                {renderField()}\n            </>\n        );\n    }\n\n    return <FormItemLayout label={label}>{renderField()}</FormItemLayout>;\n};\n\nexport default GenericDateTimePickerField;\n"],"names":["StyledDateTimePicker","styled","DateTimePicker","theme","marginTop","spacing","width","label","fieldName","description","validation","variant","layout","onChange","disabled","disablePast","disablefuture","placeholder","showHelperTextWhenValid","useTheme","renderField","_jsx","Field","name","validate","children","field","form","errors","touched","isSubmitting","fieldError","showError","helperText","useRenderValidText","value","_jsxs","Box","sx","paddingRight","undefined","setFieldValue","slotProps","textField","error","FormHelperTextProps","style","textAlign","disableFuture","jsx","Typography","color","palette","text","secondary","jsxs","_Fragment","component","FormItemLayout"],"mappings":"gUASA,MAAMA,EAAuBC,EAAAA,OAAOC,EAAAA,eAAPD,EAAuB,EAAGE,YAAa,CAChEC,UAAWD,EAAME,QAAQ,GACzBC,MAAO,0BAiBwB,EAC/BC,QACAC,YACAC,cACAC,aACAC,UAAU,WACVC,SACAC,WACAC,YAAW,EACXC,eAAc,EACdC,iBAAgB,EAChBC,cACAC,2BAA0B,MAE1B,MAAMf,EAAQgB,EAAAA,WAERC,EAAc,IAEZC,MAACC,EAAAA,OAAMC,KAAMf,EAAWgB,SAAUd,EAAUe,SACvC,EAAGC,QAAOC,WACP,MAAMC,OAAEA,EAAMC,QAAEA,EAAOC,aAAEA,GAAiBH,EACpCI,EAAaH,EAAOF,EAAMH,MAC1BS,IAAcD,GAAeF,EAAQH,EAAMH,MAC3CU,EAAaC,EAAmB,CAClCH,aACAC,YACAH,UAAWA,EAAQH,EAAMH,MACzBY,MAAOT,EAAMS,QAGjB,OACIC,OAACC,EAAG,CAACC,GAAI,CAAEC,aAAyB,eAAX3B,EAA0B,OAAS,GACxDa,SAAA,CAAAJ,EAAAA,IAACrB,EAAoB,CACjBO,MAAmB,aAAZI,OAAyB6B,EAAYjC,EAC5C4B,MAAOT,EAAMS,MACbtB,SAAWsB,IAEPR,EAAKc,cAAcf,EAAMH,KAAMY,GAC3BtB,GACAA,EAASsB,EACZ,EAELZ,KAAMf,EACNkC,UAAW,CACPC,UAAW,CACPhC,UACAM,cACA2B,MAAOZ,EACPC,WAAYD,GAAyBd,EAAbe,OAAoDO,EAC5EK,oBAAqB,CACjBpB,SAAU,IACVqB,MAAO,CAAEC,UAAW,YAIhCjC,SAAUgB,GAAgBhB,EAC1BC,YAAaA,EACbiC,cAAehC,IAElBP,GACGY,EAAA4B,IAACC,EAAW,CAAAvC,QAAQ,UAAU2B,GAAI,CAAEa,MAAOhD,EAAMiD,QAAQC,KAAKC,WACzD7B,SAAAhB,MAIf,IAMlB,MAAe,aAAXG,EAEIwB,EAAAmB,KAAAC,WAAA,CAAA/B,SAAA,CACiB,aAAZd,GACGU,EAAA4B,IAACC,EAAU,CAACvC,QAAQ,YAAY8C,UAAU,KAAKN,MAAM,cAChD1B,SAAAlB,IAGRa,OAKNC,EAAA4B,IAACS,EAAc,CAACnD,MAAOA,EAAQkB,SAAAL,KAA+B"}

package/dist/components/ui/GenericDateTimePickerField/GenericDateTimePickerField.d.ts

@@ -15,6 +15,6 @@ type Props = {
     onChange?: (dateTime: moment.Moment) => void;
     showHelperTextWhenValid?: boolean;
 };
-declare const GenericDatePickerField: ({ label, fieldName, description, validation, variant, layout, onChange, disabled, disablePast, disablefuture, placeholder, showHelperTextWhenValid, }: Props) => react_jsx_runtime.JSX.Element;
+declare const GenericDateTimePickerField: ({ label, fieldName, description, validation, variant, layout, onChange, disabled, disablePast, disablefuture, placeholder, showHelperTextWhenValid, }: Props) => react_jsx_runtime.JSX.Element;
 
-export { GenericDatePickerField as default };
+export { GenericDateTimePickerField as default };

package/dist/components/ui/GenericDateTimePickerField/GenericDateTimePickerField.js.map

@@ -1 +1 @@
-{"version":3,"file":"GenericDateTimePickerField.js","sources":["../../../../src/components/ui/GenericDateTimePickerField/GenericDateTimePickerField.tsx"],"sourcesContent":["import { type FieldProps, Field } from 'formik';\nimport FormItemLayout from '../Form/FormItemLayout';\nimport { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';\nimport { styled, useTheme } from '@mui/material/styles';\nimport { TextFieldVariants } from '@mui/material/TextField';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport useRenderValidText from '../../custom-hooks/useRenderValidText';\n\nconst StyledDateTimePicker = styled(DateTimePicker)(({ theme }) => ({\n    marginTop: theme.spacing(2),\n    width: '100%',\n}));\n\ntype Props = {\n    label: string;\n    placeholder?: string;\n    fieldName: string;\n    description?: string;\n    validation?: (value: string) => string | undefined;\n    layout?: 'horizontal' | 'vertical';\n    variant?: TextFieldVariants;\n    disabled?: boolean;\n    disablePast?: boolean;\n    disablefuture?: boolean;\n    onChange?: (dateTime: moment.Moment) => void;\n    showHelperTextWhenValid?: boolean;\n};\nconst GenericDatePickerField = ({\n    label,\n    fieldName,\n    description,\n    validation,\n    variant = 'standard',\n    layout,\n    onChange,\n    disabled = false,\n    disablePast = false,\n    disablefuture = false,\n    placeholder = undefined,\n    showHelperTextWhenValid = false,\n}: Props) => {\n    const theme = useTheme();\n\n    const renderField = () => {\n        return (\n            <Field name={fieldName} validate={validation}>\n                {({ field, form }: FieldProps) => {\n                    const { errors, touched, isSubmitting } = form;\n                    const fieldError = errors[field.name] as string | undefined;\n                    const showError = !!fieldError && (touched[field.name] as boolean | undefined);\n                    const helperText = useRenderValidText({\n                        fieldError,\n                        showError,\n                        touched: !!touched[field.name],\n                        value: field.value,\n                    });\n\n                    return (\n                        <Box sx={{ paddingRight: layout === 'horizontal' ? '16px' : 0 }}>\n                            <StyledDateTimePicker\n                                label={variant === 'standard' ? undefined : label}\n                                value={field.value}\n                                onChange={(value) => {\n                                    // eslint-disable-next-line @typescript-eslint/no-floating-promises\n                                    form.setFieldValue(field.name, value);\n                                    if (onChange) {\n                                        onChange(value);\n                                    }\n                                }}\n                                name={fieldName}\n                                slotProps={{\n                                    textField: {\n                                        variant,\n                                        placeholder,\n                                        error: showError,\n                                        helperText: showError ? helperText : showHelperTextWhenValid ? helperText : undefined,\n                                        FormHelperTextProps: {\n                                            children: ' ', // reserves line height for error message\n                                            style: { textAlign: 'right' },\n                                        },\n                                    },\n                                }}\n                                disabled={isSubmitting || disabled}\n                                disablePast={disablePast}\n                                disableFuture={disablefuture}\n                            />\n                            {description && (\n                                <Typography variant=\"caption\" sx={{ color: theme.palette.text.secondary }}>\n                                    {description}\n                                </Typography>\n                            )}\n                        </Box>\n                    );\n                }}\n            </Field>\n        );\n    };\n\n    if (layout === 'vertical') {\n        return (\n            <>\n                {variant === 'standard' && (\n                    <Typography variant=\"subtitle1\" component=\"h3\" color=\"textPrimary\">\n                        {label}\n                    </Typography>\n                )}\n                {renderField()}\n            </>\n        );\n    }\n\n    return <FormItemLayout label={label}>{renderField()}</FormItemLayout>;\n};\n\nexport default GenericDatePickerField;\n"],"names":["StyledDateTimePicker","styled","DateTimePicker","theme","marginTop","spacing","width","GenericDatePickerField","label","fieldName","description","validation","variant","layout","onChange","disabled","disablePast","disablefuture","placeholder","showHelperTextWhenValid","useTheme","renderField","_jsx","Field","name","validate","children","field","form","errors","touched","isSubmitting","fieldError","showError","helperText","useRenderValidText","value","_jsxs","Box","sx","paddingRight","undefined","setFieldValue","slotProps","textField","error","FormHelperTextProps","style","textAlign","disableFuture","Typography","color","palette","text","secondary","_Fragment","component","FormItemLayout"],"mappings":"yYASA,MAAMA,EAAuBC,EAAOC,EAAPD,EAAuB,EAAGE,YAAa,CAChEC,UAAWD,EAAME,QAAQ,GACzBC,MAAO,WAiBLC,EAAyB,EAC3BC,QACAC,YACAC,cACAC,aACAC,UAAU,WACVC,SACAC,WACAC,YAAW,EACXC,eAAc,EACdC,iBAAgB,EAChBC,cACAC,2BAA0B,MAE1B,MAAMhB,EAAQiB,IAERC,EAAc,IAEZC,EAACC,GAAMC,KAAMf,EAAWgB,SAAUd,EAAUe,SACvC,EAAGC,QAAOC,WACP,MAAMC,OAAEA,EAAMC,QAAEA,EAAOC,aAAEA,GAAiBH,EACpCI,EAAaH,EAAOF,EAAMH,MAC1BS,IAAcD,GAAeF,EAAQH,EAAMH,MAC3CU,EAAaC,EAAmB,CAClCH,aACAC,YACAH,UAAWA,EAAQH,EAAMH,MACzBY,MAAOT,EAAMS,QAGjB,OACIC,EAACC,EAAG,CAACC,GAAI,CAAEC,aAAyB,eAAX3B,EAA0B,OAAS,GACxDa,SAAA,CAAAJ,EAACtB,EAAoB,CACjBQ,MAAmB,aAAZI,OAAyB6B,EAAYjC,EAC5C4B,MAAOT,EAAMS,MACbtB,SAAWsB,IAEPR,EAAKc,cAAcf,EAAMH,KAAMY,GAC3BtB,GACAA,EAASsB,EACZ,EAELZ,KAAMf,EACNkC,UAAW,CACPC,UAAW,CACPhC,UACAM,cACA2B,MAAOZ,EACPC,WAAYD,GAAyBd,EAAbe,OAAoDO,EAC5EK,oBAAqB,CACjBpB,SAAU,IACVqB,MAAO,CAAEC,UAAW,YAIhCjC,SAAUgB,GAAgBhB,EAC1BC,YAAaA,EACbiC,cAAehC,IAElBP,GACGY,EAAC4B,EAAW,CAAAtC,QAAQ,UAAU2B,GAAI,CAAEY,MAAOhD,EAAMiD,QAAQC,KAAKC,WACzD5B,SAAAhB,MAIf,IAMlB,MAAe,aAAXG,EAEIwB,EAAAkB,EAAA,CAAA7B,SAAA,CACiB,aAAZd,GACGU,EAAC4B,EAAU,CAACtC,QAAQ,YAAY4C,UAAU,KAAKL,MAAM,cAChDzB,SAAAlB,IAGRa,OAKNC,EAACmC,EAAc,CAACjD,MAAOA,EAAQkB,SAAAL,KAA+B"}
+{"version":3,"file":"GenericDateTimePickerField.js","sources":["../../../../src/components/ui/GenericDateTimePickerField/GenericDateTimePickerField.tsx"],"sourcesContent":["import { type FieldProps, Field } from 'formik';\nimport FormItemLayout from '../Form/FormItemLayout';\nimport { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';\nimport { styled, useTheme } from '@mui/material/styles';\nimport { TextFieldVariants } from '@mui/material/TextField';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport useRenderValidText from '../../custom-hooks/useRenderValidText';\n\nconst StyledDateTimePicker = styled(DateTimePicker)(({ theme }) => ({\n    marginTop: theme.spacing(2),\n    width: '100%',\n}));\n\ntype Props = {\n    label: string;\n    placeholder?: string;\n    fieldName: string;\n    description?: string;\n    validation?: (value: string) => string | undefined;\n    layout?: 'horizontal' | 'vertical';\n    variant?: TextFieldVariants;\n    disabled?: boolean;\n    disablePast?: boolean;\n    disablefuture?: boolean;\n    onChange?: (dateTime: moment.Moment) => void;\n    showHelperTextWhenValid?: boolean;\n};\nconst GenericDateTimePickerField = ({\n    label,\n    fieldName,\n    description,\n    validation,\n    variant = 'standard',\n    layout,\n    onChange,\n    disabled = false,\n    disablePast = false,\n    disablefuture = false,\n    placeholder = undefined,\n    showHelperTextWhenValid = false,\n}: Props) => {\n    const theme = useTheme();\n\n    const renderField = () => {\n        return (\n            <Field name={fieldName} validate={validation}>\n                {({ field, form }: FieldProps) => {\n                    const { errors, touched, isSubmitting } = form;\n                    const fieldError = errors[field.name] as string | undefined;\n                    const showError = !!fieldError && (touched[field.name] as boolean | undefined);\n                    const helperText = useRenderValidText({\n                        fieldError,\n                        showError,\n                        touched: !!touched[field.name],\n                        value: field.value,\n                    });\n\n                    return (\n                        <Box sx={{ paddingRight: layout === 'horizontal' ? '16px' : 0 }}>\n                            <StyledDateTimePicker\n                                label={variant === 'standard' ? undefined : label}\n                                value={field.value}\n                                onChange={(value) => {\n                                    // eslint-disable-next-line @typescript-eslint/no-floating-promises\n                                    form.setFieldValue(field.name, value);\n                                    if (onChange) {\n                                        onChange(value);\n                                    }\n                                }}\n                                name={fieldName}\n                                slotProps={{\n                                    textField: {\n                                        variant,\n                                        placeholder,\n                                        error: showError,\n                                        helperText: showError ? helperText : showHelperTextWhenValid ? helperText : undefined,\n                                        FormHelperTextProps: {\n                                            children: ' ', // reserves line height for error message\n                                            style: { textAlign: 'right' },\n                                        },\n                                    },\n                                }}\n                                disabled={isSubmitting || disabled}\n                                disablePast={disablePast}\n                                disableFuture={disablefuture}\n                            />\n                            {description && (\n                                <Typography variant=\"caption\" sx={{ color: theme.palette.text.secondary }}>\n                                    {description}\n                                </Typography>\n                            )}\n                        </Box>\n                    );\n                }}\n            </Field>\n        );\n    };\n\n    if (layout === 'vertical') {\n        return (\n            <>\n                {variant === 'standard' && (\n                    <Typography variant=\"subtitle1\" component=\"h3\" color=\"textPrimary\">\n                        {label}\n                    </Typography>\n                )}\n                {renderField()}\n            </>\n        );\n    }\n\n    return <FormItemLayout label={label}>{renderField()}</FormItemLayout>;\n};\n\nexport default GenericDateTimePickerField;\n"],"names":["StyledDateTimePicker","styled","DateTimePicker","theme","marginTop","spacing","width","GenericDateTimePickerField","label","fieldName","description","validation","variant","layout","onChange","disabled","disablePast","disablefuture","placeholder","showHelperTextWhenValid","useTheme","renderField","_jsx","Field","name","validate","children","field","form","errors","touched","isSubmitting","fieldError","showError","helperText","useRenderValidText","value","_jsxs","Box","sx","paddingRight","undefined","setFieldValue","slotProps","textField","error","FormHelperTextProps","style","textAlign","disableFuture","Typography","color","palette","text","secondary","_Fragment","component","FormItemLayout"],"mappings":"yYASA,MAAMA,EAAuBC,EAAOC,EAAPD,EAAuB,EAAGE,YAAa,CAChEC,UAAWD,EAAME,QAAQ,GACzBC,MAAO,WAiBLC,EAA6B,EAC/BC,QACAC,YACAC,cACAC,aACAC,UAAU,WACVC,SACAC,WACAC,YAAW,EACXC,eAAc,EACdC,iBAAgB,EAChBC,cACAC,2BAA0B,MAE1B,MAAMhB,EAAQiB,IAERC,EAAc,IAEZC,EAACC,GAAMC,KAAMf,EAAWgB,SAAUd,EAAUe,SACvC,EAAGC,QAAOC,WACP,MAAMC,OAAEA,EAAMC,QAAEA,EAAOC,aAAEA,GAAiBH,EACpCI,EAAaH,EAAOF,EAAMH,MAC1BS,IAAcD,GAAeF,EAAQH,EAAMH,MAC3CU,EAAaC,EAAmB,CAClCH,aACAC,YACAH,UAAWA,EAAQH,EAAMH,MACzBY,MAAOT,EAAMS,QAGjB,OACIC,EAACC,EAAG,CAACC,GAAI,CAAEC,aAAyB,eAAX3B,EAA0B,OAAS,GACxDa,SAAA,CAAAJ,EAACtB,EAAoB,CACjBQ,MAAmB,aAAZI,OAAyB6B,EAAYjC,EAC5C4B,MAAOT,EAAMS,MACbtB,SAAWsB,IAEPR,EAAKc,cAAcf,EAAMH,KAAMY,GAC3BtB,GACAA,EAASsB,EACZ,EAELZ,KAAMf,EACNkC,UAAW,CACPC,UAAW,CACPhC,UACAM,cACA2B,MAAOZ,EACPC,WAAYD,GAAyBd,EAAbe,OAAoDO,EAC5EK,oBAAqB,CACjBpB,SAAU,IACVqB,MAAO,CAAEC,UAAW,YAIhCjC,SAAUgB,GAAgBhB,EAC1BC,YAAaA,EACbiC,cAAehC,IAElBP,GACGY,EAAC4B,EAAW,CAAAtC,QAAQ,UAAU2B,GAAI,CAAEY,MAAOhD,EAAMiD,QAAQC,KAAKC,WACzD5B,SAAAhB,MAIf,IAMlB,MAAe,aAAXG,EAEIwB,EAAAkB,EAAA,CAAA7B,SAAA,CACiB,aAAZd,GACGU,EAAC4B,EAAU,CAACtC,QAAQ,YAAY4C,UAAU,KAAKL,MAAM,cAChDzB,SAAAlB,IAGRa,OAKNC,EAACmC,EAAc,CAACjD,MAAOA,EAAQkB,SAAAL,KAA+B"}

package/dist/components/ui/PageLayout/PageLayout.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("@mui/icons-material/Add"),t=require("@mui/icons-material/ArrowBack"),n=require("@mui/material/Grid"),r=require("@mui/material/IconButton"),a=require("@mui/material/styles"),s=require("@mui/material/Typography"),o=require("@mui/material/useMediaQuery"),d=require("./DocumentTitle.cjs.js"),l=require("./FullWidthContainer.cjs.js"),c=require("../FDErrorBoundary/FDErrorBoundary.cjs.js"),m=require("@mui/material/Button"),p=require("../../renderUtilities/renderUtilities.cjs.js"),h=require("../../../utilities/validation.cjs.js"),g=require("../Spacer/Spacer.cjs.js"),u=require("@mui/material/Box"),x=require("@mui/material/Divider");const j=1112,y=a.styled("div")((({theme:e,fluid:i})=>({maxWidth:i?"none":j,[e.breakpoints.down("md")]:{maxWidth:"none"},margin:e.spacing(2,4)}))),f=a.styled(n)((({theme:e})=>({[e.breakpoints.down("sm")]:{width:"100%",paddingTop:e.spacing(2)}}))),v=a.styled(n)((({theme:e})=>({flexWrap:"nowrap",alignItems:"flex-start",paddingTop:e.spacing(3),paddingBottom:e.spacing(3),[e.breakpoints.down("md")]:{paddingTop:e.spacing(2),paddingBottom:e.spacing(3)}}))),b=a.styled(n)((({theme:e})=>({paddingTop:e.spacing(2)}))),k=a.styled(n)((()=>({flexGrow:1}))),B=a.styled("div")((({theme:e})=>({maxWidth:j,paddingBottom:e.spacing(3),[e.breakpoints.down("md")]:{paddingBottom:e.spacing(2),paddingLeft:e.spacing(2),paddingRight:e.spacing(2)}}))),q=a.styled(r,{shouldForwardProp:e=>"hasTitleComponent"!==e})((({theme:e,hasTitleComponent:i})=>({margin:i?e.spacing(-.75,2,-1.5,-1.5):e.spacing(-1.5,2,-1.5,-1.5),[e.breakpoints.only("sm")]:{marginLeft:e.spacing(-2)},[e.breakpoints.only("xs")]:{marginLeft:e.spacing(-2)}}))),w=a.styled("div")((({theme:e})=>({maxWidth:j,marginLeft:e.spacing(6),marginRight:e.spacing(4),paddingBottom:e.spacing(2),[e.breakpoints.only("md")]:{marginLeft:12,marginRight:e.spacing(3)},[e.breakpoints.only("sm")]:{marginLeft:e.spacing(3),marginRight:e.spacing(3),maxWidth:"none"},[e.breakpoints.only("xs")]:{marginLeft:e.spacing(2),marginRight:e.spacing(2),maxWidth:"none"}}))),T=a.styled(n)((()=>({display:"flex",flexGrow:1,justifyContent:"flex-end"}))),W=a.styled(s)((()=>({lineHeight:"26px"}))),C=a.styled(s)((()=>({fontWeight:"bold"}))),L=a.styled(x)((({theme:e})=>({marginBottom:e.spacing(4)}))),F=({title:i})=>e.jsx(C,{variant:"h5",component:"h2",children:i});exports.PageTitle=F,exports.default=r=>{const{actionBtnTitle:s,caption:x,children:j,contextButtons:C,documentTitle:A,fluid:P=!1,fullWidth:D,header:I,hideHeader:R,actionButtonLink:z,openLinkInNewTab:_=!1,pageHeader:G,showActionButton:H,showAddIcon:M,title:U,titleComponent:E,toPrevious:S,toParent:N,strictToParent:O,navigate:Q,hideDivider:$=!1,customActionButtons:J}=r,K=a.useTheme(),V=o(K.breakpoints.down("md")),X=p.getMicroFrontendAttribute("data-portal-base-url")||"/",Y=z?.startsWith("https://"),Z=Y?z:void 0!==z?h.joinUrlPaths(X,z):"";return e.jsxs(y,{fluid:P,children:[A&&e.jsx(d,{children:A}),G||null,e.jsxs(w,{children:[G&&e.jsx(g,{size:16,variant:"vertical"}),!R&&e.jsxs(e.Fragment,{children:[e.jsxs(v,{container:!0,alignItems:"center",direction:"column",children:[e.jsx(n,{item:!0,container:!0,direction:"row",alignContent:"space-between",children:e.jsx(T,{item:!0,children:C&&C.map(((i,t)=>e.jsx("div",{children:i},t)))})}),e.jsxs(b,{item:!0,container:!0,children:[(N||S)&&e.jsx(u,{children:e.jsx(q,{"aria-label":"Back","data-testid":"back_button",hasTitleComponent:!!E,component:"button",onClick:()=>{S?Q(-1):N&&O||N&&history.length<3?Q(N):Q(-1)},children:e.jsx(t,{})})}),e.jsxs(k,{item:!0,children:[E?e.jsx(E,{}):e.jsx(F,{title:U}),x&&e.jsx(W,{variant:"caption",component:"h3",children:x})]}),H&&e.jsxs(e.Fragment,{children:[V&&e.jsx(g,{size:56,variant:"vertical"}),e.jsx(f,{item:!0,children:e.jsxs(m,{variant:"contained",fullWidth:!0,"data-testid":`Action-button-${s}`,href:_||Y?Z:"",target:_?"_blank":void 0,rel:_?"noopener noreferrer":void 0,onClick:_||Y?()=>{}:()=>Q(z),children:[M&&e.jsx(i,{}),s]})})]}),J&&J.map(((i,t)=>e.jsxs("div",{children:[V&&e.jsx(g,{size:56,variant:"vertical"}),!V&&e.jsx(g,{size:16,variant:"vertical"}),e.jsx(f,{item:!0,children:i})]},t)))]})]}),!$&&e.jsx(L,{})]}),e.jsxs(l,{fullWidth:D,children:[I?e.jsx(B,{children:I}):null,e.jsx(c,{identifier:A,children:e.jsx(e.Fragment,{children:j})})]})]})]})},exports.maxWidth=j;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("@mui/icons-material/Add"),t=require("@mui/icons-material/ArrowBack"),n=require("@mui/material/Grid"),r=require("@mui/material/IconButton"),a=require("@mui/material/styles"),s=require("@mui/material/Typography"),o=require("@mui/material/useMediaQuery"),d=require("./DocumentTitle.cjs.js"),l=require("./FullWidthContainer.cjs.js"),c=require("../FDErrorBoundary/FDErrorBoundary.cjs.js"),m=require("@mui/material/Button"),p=require("../../renderUtilities/renderUtilities.cjs.js"),h=require("../../../utilities/validation.cjs.js"),u=require("../Spacer/Spacer.cjs.js"),g=require("@mui/material/Box"),x=require("@mui/material/Divider");const j=1112,f=a.styled("div")((({theme:e,fluid:i,useAlternateBackground:t})=>({maxWidth:i?"none":j,[e.breakpoints.down("md")]:{maxWidth:"none"},margin:e.spacing(2,4),":before":t?{content:'""',height:"100vh",width:"100%",backgroundColor:"#F7F7F7",position:"absolute",top:0,left:0,zIndex:-1e3}:void 0}))),v=a.styled(n)((({theme:e})=>({[e.breakpoints.down("sm")]:{width:"100%",paddingTop:e.spacing(2)}}))),y=a.styled(n)((({theme:e})=>({flexWrap:"nowrap",alignItems:"flex-start",paddingTop:e.spacing(3),paddingBottom:e.spacing(3),[e.breakpoints.down("md")]:{paddingTop:e.spacing(2),paddingBottom:e.spacing(3)}}))),b=a.styled(n)((({theme:e})=>({paddingTop:e.spacing(2)}))),k=a.styled(n)((()=>({flexGrow:1}))),B=a.styled("div")((({theme:e})=>({maxWidth:j,paddingBottom:e.spacing(3),[e.breakpoints.down("md")]:{paddingBottom:e.spacing(2),paddingLeft:e.spacing(2),paddingRight:e.spacing(2)}}))),q=a.styled(r,{shouldForwardProp:e=>"hasTitleComponent"!==e})((({theme:e,hasTitleComponent:i})=>({margin:i?e.spacing(-.75,2,-1.5,-1.5):e.spacing(-1.5,2,-1.5,-1.5),[e.breakpoints.only("sm")]:{marginLeft:e.spacing(-2)},[e.breakpoints.only("xs")]:{marginLeft:e.spacing(-2)}}))),w=a.styled("div")((({theme:e})=>({maxWidth:j,marginLeft:e.spacing(6),marginRight:e.spacing(4),paddingBottom:e.spacing(2),[e.breakpoints.only("md")]:{marginLeft:12,marginRight:e.spacing(3)},[e.breakpoints.only("sm")]:{marginLeft:e.spacing(3),marginRight:e.spacing(3),maxWidth:"none"},[e.breakpoints.only("xs")]:{marginLeft:e.spacing(2),marginRight:e.spacing(2),maxWidth:"none"}}))),T=a.styled(n)((()=>({display:"flex",flexGrow:1,justifyContent:"flex-end"}))),W=a.styled(s)((()=>({lineHeight:"26px"}))),F=a.styled(s)((()=>({fontWeight:"bold"}))),A=a.styled(x)((({theme:e})=>({marginBottom:e.spacing(4)}))),C=({title:i})=>e.jsx(F,{variant:"h5",component:"h2",children:i});exports.PageTitle=C,exports.default=r=>{const{actionBtnTitle:s,caption:x,children:j,contextButtons:F,documentTitle:L,fluid:P=!1,fullWidth:I,header:z,hideHeader:D,actionButtonLink:R,openLinkInNewTab:_=!1,pageHeader:G,showActionButton:H,showAddIcon:M,title:U,titleComponent:E,toPrevious:S,toParent:N,strictToParent:O,navigate:Q,hideDivider:$=!1,customActionButtons:J,useAlternateBackground:K=!1}=r,V=a.useTheme(),X=o(V.breakpoints.down("md")),Y=p.getMicroFrontendAttribute("data-portal-base-url")||"/",Z=R?.startsWith("https://"),ee=Z?R:void 0!==R?h.joinUrlPaths(Y,R):"";return e.jsxs(f,{fluid:P,useAlternateBackground:K,children:[L&&e.jsx(d,{children:L}),G||null,e.jsxs(w,{children:[G&&e.jsx(u,{size:16,variant:"vertical"}),!D&&e.jsxs(e.Fragment,{children:[e.jsxs(y,{container:!0,alignItems:"center",direction:"column",children:[e.jsx(n,{item:!0,container:!0,direction:"row",alignContent:"space-between",children:e.jsx(T,{item:!0,children:F&&F.map(((i,t)=>e.jsx("div",{children:i},t)))})}),e.jsxs(b,{item:!0,container:!0,children:[(N||S)&&e.jsx(g,{children:e.jsx(q,{"aria-label":"Back","data-testid":"back_button",hasTitleComponent:!!E,component:"button",onClick:()=>{S?Q(-1):N&&O||N&&history.length<3?Q(N):Q(-1)},children:e.jsx(t,{})})}),e.jsxs(k,{item:!0,children:[E?e.jsx(E,{}):e.jsx(C,{title:U}),x&&e.jsx(W,{variant:"caption",component:"h3",children:x})]}),H&&e.jsxs(e.Fragment,{children:[X&&e.jsx(u,{size:56,variant:"vertical"}),e.jsx(v,{item:!0,children:e.jsxs(m,{variant:"contained",fullWidth:!0,"data-testid":`Action-button-${s}`,href:_||Z?ee:"",target:_?"_blank":void 0,rel:_?"noopener noreferrer":void 0,onClick:_||Z?()=>{}:()=>Q(R),children:[M&&e.jsx(i,{}),s]})})]}),J&&J.map(((i,t)=>e.jsxs("div",{children:[X&&e.jsx(u,{size:56,variant:"vertical"}),!X&&e.jsx(u,{size:16,variant:"vertical"}),e.jsx(v,{item:!0,children:i})]},t)))]})]}),!$&&e.jsx(A,{})]}),e.jsxs(l,{fullWidth:I,children:[z?e.jsx(B,{children:z}):null,e.jsx(c,{identifier:L,children:e.jsx(e.Fragment,{children:j})})]})]})]})},exports.maxWidth=j;
 //# sourceMappingURL=PageLayout.cjs.js.map

package/dist/components/ui/PageLayout/PageLayout.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageLayout.cjs.js","sources":["../../../../src/components/ui/PageLayout/PageLayout.tsx"],"sourcesContent":["import React, { ComponentType, ReactNode } from 'react';\n\nimport Add from '@mui/icons-material/Add';\nimport ArrowBackIcon from '@mui/icons-material/ArrowBack';\nimport Grid from '@mui/material/Grid';\nimport IconButton from '@mui/material/IconButton';\nimport { styled, useTheme } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport DocumentTitle from './DocumentTitle';\nimport FullWidthContainer from './FullWidthContainer';\nimport FDErrorBoundary from '../FDErrorBoundary/FDErrorBoundary';\nimport Button from '@mui/material/Button';\nimport { getMicroFrontendAttribute } from '../../renderUtilities';\nimport { joinUrlPaths } from '../../../utilities/validation';\nimport Spacer from '../Spacer/Spacer';\nimport Box from '@mui/material/Box';\nimport Divider from '@mui/material/Divider';\n\nexport const HORIZONTAL_SPACE_CLASSNAME = 'horizontal-content-space';\nexport const LEFT_HORIZONTAL_SPACE_CLASSNAME = 'left-horizontal-content-space';\nexport const RIGHT_HORIZONTAL_SPACE_CLASSNAME = 'right-horizontal-content-space';\nexport const VERTICAL_SPACE_CLASSNAME = 'vertical-content-space';\nexport const maxWidth = 1112;\nconst historyMinLength = 3;\n\nconst StyledWrapper = styled('div')<{ fluid: boolean }>(({ theme, fluid }) => ({\n    maxWidth: fluid ? 'none' : maxWidth,\n    [theme.breakpoints.down('md')]: {\n        maxWidth: 'none',\n    },\n    margin: theme.spacing(2, 4),\n}));\n\nconst StyledActionButtonGrid = styled(Grid)(({ theme }) => ({\n    [theme.breakpoints.down('sm')]: {\n        width: '100%',\n        paddingTop: theme.spacing(2),\n    },\n}));\n\nconst StyledHeader = styled(Grid)(({ theme }) => ({\n    flexWrap: 'nowrap',\n    alignItems: 'flex-start',\n    paddingTop: theme.spacing(3),\n    paddingBottom: theme.spacing(3),\n\n    [theme.breakpoints.down('md')]: {\n        paddingTop: theme.spacing(2),\n        paddingBottom: theme.spacing(3),\n    },\n}));\n\nconst StyledTitleContainer = styled(Grid)(({ theme }) => ({\n    paddingTop: theme.spacing(2),\n}));\n\nconst StyledTitleSection = styled(Grid)(() => ({\n    flexGrow: 1,\n}));\n\nconst StyledTopSection = styled('div')(({ theme }) => ({\n    maxWidth,\n    paddingBottom: theme.spacing(3),\n\n    [theme.breakpoints.down('md')]: {\n        paddingBottom: theme.spacing(2),\n        paddingLeft: theme.spacing(2),\n        paddingRight: theme.spacing(2),\n    },\n}));\n\nconst StyledBackButton = styled(IconButton, {\n    shouldForwardProp: (prop) => prop !== 'hasTitleComponent',\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n})<{ hasTitleComponent: boolean; component: any }>(({ theme, hasTitleComponent }) => ({\n    margin: hasTitleComponent ? theme.spacing(-0.75, 2, -1.5, -1.5) : theme.spacing(-1.5, 2, -1.5, -1.5),\n\n    [theme.breakpoints.only('sm')]: {\n        marginLeft: theme.spacing(-2),\n    },\n\n    [theme.breakpoints.only('xs')]: {\n        marginLeft: theme.spacing(-2),\n    },\n}));\n\nconst StyledInnerWrapper = styled('div')(({ theme }) => ({\n    maxWidth,\n    marginLeft: theme.spacing(6),\n    marginRight: theme.spacing(4),\n    paddingBottom: theme.spacing(2),\n\n    [theme.breakpoints.only('md')]: {\n        marginLeft: 12,\n        marginRight: theme.spacing(3),\n    },\n\n    [theme.breakpoints.only('sm')]: {\n        marginLeft: theme.spacing(3),\n        marginRight: theme.spacing(3),\n        maxWidth: 'none',\n    },\n\n    [theme.breakpoints.only('xs')]: {\n        marginLeft: theme.spacing(2),\n        marginRight: theme.spacing(2),\n        maxWidth: 'none',\n    },\n}));\n\nconst StyledHeaderContainer = styled(Grid)(() => ({\n    display: 'flex',\n    flexGrow: 1,\n    justifyContent: 'flex-end',\n}));\nconst StyledCaption = styled(Typography)<{ component: string }>(() => ({\n    lineHeight: '26px',\n}));\n\nconst StyledPageTitle = styled(Typography)<{ component: string }>(() => ({\n    fontWeight: 'bold',\n}));\n\nconst StyledPageDivider = styled(Divider)(({ theme }) => ({\n    marginBottom: theme.spacing(4),\n}));\n\nexport const PageTitle = ({ title }: { title: string | ReactNode }) => (\n    <StyledPageTitle variant=\"h5\" component=\"h2\">\n        {title}\n    </StyledPageTitle>\n);\n\nexport type Props = {\n    actionBtnTitle?: string;\n    caption?: ReactNode;\n    children: ReactNode;\n    contextButtons?: ReactNode[];\n    documentTitle: string;\n    fluid?: boolean;\n    fullWidth?: boolean;\n    header?: ReactNode;\n    hideHeader?: boolean;\n    actionButtonLink?: string;\n    pageHeader?: ReactNode;\n    showActionButton?: boolean;\n    showAddIcon?: boolean;\n    title: ReactNode;\n    titleComponent?: ComponentType<React.PropsWithChildren<unknown>>;\n    toPrevious?: boolean;\n    toParent?: string;\n    strictToParent?: boolean;\n    openLinkInNewTab?: boolean;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    navigate: (to: any) => void;\n    hideDivider?: boolean;\n    customActionButtons?: ReactNode[];\n};\n\nconst PageLayout = (props: Props) => {\n    const {\n        actionBtnTitle,\n        caption,\n        children,\n        contextButtons,\n        documentTitle,\n        fluid = false,\n        fullWidth,\n        header,\n        hideHeader,\n        actionButtonLink,\n        openLinkInNewTab = false,\n        pageHeader,\n        showActionButton,\n        showAddIcon,\n        title,\n        titleComponent: TitleComponent,\n        toPrevious,\n        toParent,\n        strictToParent,\n        navigate,\n        hideDivider = false,\n        customActionButtons,\n    } = props;\n    const theme = useTheme();\n    const isMobile = useMediaQuery(theme.breakpoints.down('md'));\n    const baseUrl = getMicroFrontendAttribute('data-portal-base-url') || '/';\n    const actionButtonWithHttps = actionButtonLink?.startsWith('https://');\n    const actionButtonLinkFinal = actionButtonWithHttps\n        ? actionButtonLink\n        : actionButtonLink !== undefined\n          ? joinUrlPaths(baseUrl, actionButtonLink)\n          : '';\n\n    return (\n        <StyledWrapper fluid={fluid}>\n            {documentTitle && <DocumentTitle>{documentTitle}</DocumentTitle>}\n\n            {pageHeader ? pageHeader : null}\n            <StyledInnerWrapper>\n                {pageHeader && <Spacer size={16} variant=\"vertical\" />}\n                {!hideHeader && (\n                    <>\n                        <StyledHeader container alignItems=\"center\" direction=\"column\">\n                            <Grid item container direction=\"row\" alignContent=\"space-between\">\n                                <StyledHeaderContainer item>\n                                    {contextButtons && contextButtons.map((button, index) => <div key={index}>{button}</div>)}\n                                </StyledHeaderContainer>\n                            </Grid>\n                            <StyledTitleContainer item container>\n                                {(toParent || toPrevious) && (\n                                    <Box>\n                                        <StyledBackButton\n                                            aria-label=\"Back\"\n                                            data-testid=\"back_button\"\n                                            hasTitleComponent={!!TitleComponent}\n                                            component={'button'}\n                                            onClick={() => {\n                                                if (toPrevious) {\n                                                    navigate(-1);\n                                                } else if (toParent && strictToParent) {\n                                                    navigate(toParent);\n                                                } else if (toParent && history.length < historyMinLength) {\n                                                    navigate(toParent);\n                                                } else {\n                                                    navigate(-1);\n                                                }\n                                            }}\n                                        >\n                                            <ArrowBackIcon />\n                                        </StyledBackButton>\n                                    </Box>\n                                )}\n\n                                <StyledTitleSection item>\n                                    {TitleComponent ? <TitleComponent /> : <PageTitle title={title} />}\n                                    {caption && (\n                                        <StyledCaption variant=\"caption\" component=\"h3\">\n                                            {caption}\n                                        </StyledCaption>\n                                    )}\n                                </StyledTitleSection>\n\n                                {showActionButton && (\n                                    <>\n                                        {isMobile && <Spacer size={56} variant=\"vertical\" />}\n                                        <StyledActionButtonGrid item>\n                                            <Button\n                                                variant=\"contained\"\n                                                fullWidth={true}\n                                                data-testid={`Action-button-${actionBtnTitle}`}\n                                                href={openLinkInNewTab || actionButtonWithHttps ? actionButtonLinkFinal : ''}\n                                                target={openLinkInNewTab ? '_blank' : undefined}\n                                                rel={openLinkInNewTab ? 'noopener noreferrer' : undefined}\n                                                onClick={!openLinkInNewTab && !actionButtonWithHttps ? () => navigate(actionButtonLink) : () => {}}\n                                            >\n                                                {showAddIcon && <Add />}\n                                                {actionBtnTitle}\n                                            </Button>\n                                        </StyledActionButtonGrid>\n                                    </>\n                                )}\n                                {customActionButtons &&\n                                    customActionButtons.map((button, index) => (\n                                        <div key={index}>\n                                            {isMobile && <Spacer size={56} variant=\"vertical\" />}\n                                            {!isMobile && <Spacer size={16} variant=\"vertical\" />}\n                                            <StyledActionButtonGrid item>{button}</StyledActionButtonGrid>\n                                        </div>\n                                    ))}\n                            </StyledTitleContainer>\n                        </StyledHeader>\n                        {!hideDivider && <StyledPageDivider />}\n                    </>\n                )}\n                <FullWidthContainer fullWidth={fullWidth}>\n                    {header ? <StyledTopSection>{header}</StyledTopSection> : null}\n                    <FDErrorBoundary identifier={documentTitle}>\n                        <>{children}</>\n                    </FDErrorBoundary>\n                </FullWidthContainer>\n            </StyledInnerWrapper>\n        </StyledWrapper>\n    );\n};\n\nexport default PageLayout;\n"],"names":["maxWidth","StyledWrapper","styled","theme","fluid","breakpoints","down","margin","spacing","StyledActionButtonGrid","Grid","width","paddingTop","StyledHeader","flexWrap","alignItems","paddingBottom","StyledTitleContainer","StyledTitleSection","flexGrow","StyledTopSection","paddingLeft","paddingRight","StyledBackButton","IconButton","shouldForwardProp","prop","hasTitleComponent","only","marginLeft","StyledInnerWrapper","marginRight","StyledHeaderContainer","display","justifyContent","StyledCaption","Typography","lineHeight","StyledPageTitle","fontWeight","StyledPageDivider","Divider","marginBottom","PageTitle","title","_jsx","variant","component","children","props","actionBtnTitle","caption","contextButtons","documentTitle","fullWidth","header","hideHeader","actionButtonLink","openLinkInNewTab","pageHeader","showActionButton","showAddIcon","titleComponent","TitleComponent","toPrevious","toParent","strictToParent","navigate","hideDivider","customActionButtons","useTheme","isMobile","useMediaQuery","baseUrl","getMicroFrontendAttribute","actionButtonWithHttps","startsWith","actionButtonLinkFinal","undefined","joinUrlPaths","_jsxs","jsx","DocumentTitle","Spacer","size","_Fragment","container","direction","item","alignContent","map","button","index","Box","onClick","history","length","ArrowBackIcon","jsxs","Button","href","target","rel","Add","FullWidthContainer","FDErrorBoundary","identifier"],"mappings":"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"}
+{"version":3,"file":"PageLayout.cjs.js","sources":["../../../../src/components/ui/PageLayout/PageLayout.tsx"],"sourcesContent":["import React, { ComponentType, ReactNode } from 'react';\n\nimport Add from '@mui/icons-material/Add';\nimport ArrowBackIcon from '@mui/icons-material/ArrowBack';\nimport Grid from '@mui/material/Grid';\nimport IconButton from '@mui/material/IconButton';\nimport { styled, useTheme } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport DocumentTitle from './DocumentTitle';\nimport FullWidthContainer from './FullWidthContainer';\nimport FDErrorBoundary from '../FDErrorBoundary/FDErrorBoundary';\nimport Button from '@mui/material/Button';\nimport { getMicroFrontendAttribute } from '../../renderUtilities';\nimport { joinUrlPaths } from '../../../utilities/validation';\nimport Spacer from '../Spacer/Spacer';\nimport Box from '@mui/material/Box';\nimport Divider from '@mui/material/Divider';\n\nexport const HORIZONTAL_SPACE_CLASSNAME = 'horizontal-content-space';\nexport const LEFT_HORIZONTAL_SPACE_CLASSNAME = 'left-horizontal-content-space';\nexport const RIGHT_HORIZONTAL_SPACE_CLASSNAME = 'right-horizontal-content-space';\nexport const VERTICAL_SPACE_CLASSNAME = 'vertical-content-space';\nexport const maxWidth = 1112;\nconst historyMinLength = 3;\n\nconst StyledWrapper = styled('div')<{ fluid: boolean; useAlternateBackground: boolean }>(({ theme, fluid, useAlternateBackground }) => ({\n    maxWidth: fluid ? 'none' : maxWidth,\n    [theme.breakpoints.down('md')]: {\n        maxWidth: 'none',\n    },\n    margin: theme.spacing(2, 4),\n    ':before': useAlternateBackground\n        ? {\n              content: '\"\"',\n              height: '100vh',\n              width: '100%',\n              backgroundColor: '#F7F7F7',\n              position: 'absolute',\n              top: 0,\n              left: 0,\n              zIndex: -1000,\n          }\n        : undefined,\n}));\n\nconst StyledActionButtonGrid = styled(Grid)(({ theme }) => ({\n    [theme.breakpoints.down('sm')]: {\n        width: '100%',\n        paddingTop: theme.spacing(2),\n    },\n}));\n\nconst StyledHeader = styled(Grid)(({ theme }) => ({\n    flexWrap: 'nowrap',\n    alignItems: 'flex-start',\n    paddingTop: theme.spacing(3),\n    paddingBottom: theme.spacing(3),\n\n    [theme.breakpoints.down('md')]: {\n        paddingTop: theme.spacing(2),\n        paddingBottom: theme.spacing(3),\n    },\n}));\n\nconst StyledTitleContainer = styled(Grid)(({ theme }) => ({\n    paddingTop: theme.spacing(2),\n}));\n\nconst StyledTitleSection = styled(Grid)(() => ({\n    flexGrow: 1,\n}));\n\nconst StyledTopSection = styled('div')(({ theme }) => ({\n    maxWidth,\n    paddingBottom: theme.spacing(3),\n\n    [theme.breakpoints.down('md')]: {\n        paddingBottom: theme.spacing(2),\n        paddingLeft: theme.spacing(2),\n        paddingRight: theme.spacing(2),\n    },\n}));\n\nconst StyledBackButton = styled(IconButton, {\n    shouldForwardProp: (prop) => prop !== 'hasTitleComponent',\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n})<{ hasTitleComponent: boolean; component: any }>(({ theme, hasTitleComponent }) => ({\n    margin: hasTitleComponent ? theme.spacing(-0.75, 2, -1.5, -1.5) : theme.spacing(-1.5, 2, -1.5, -1.5),\n\n    [theme.breakpoints.only('sm')]: {\n        marginLeft: theme.spacing(-2),\n    },\n\n    [theme.breakpoints.only('xs')]: {\n        marginLeft: theme.spacing(-2),\n    },\n}));\n\nconst StyledInnerWrapper = styled('div')(({ theme }) => ({\n    maxWidth,\n    marginLeft: theme.spacing(6),\n    marginRight: theme.spacing(4),\n    paddingBottom: theme.spacing(2),\n\n    [theme.breakpoints.only('md')]: {\n        marginLeft: 12,\n        marginRight: theme.spacing(3),\n    },\n\n    [theme.breakpoints.only('sm')]: {\n        marginLeft: theme.spacing(3),\n        marginRight: theme.spacing(3),\n        maxWidth: 'none',\n    },\n\n    [theme.breakpoints.only('xs')]: {\n        marginLeft: theme.spacing(2),\n        marginRight: theme.spacing(2),\n        maxWidth: 'none',\n    },\n}));\n\nconst StyledHeaderContainer = styled(Grid)(() => ({\n    display: 'flex',\n    flexGrow: 1,\n    justifyContent: 'flex-end',\n}));\nconst StyledCaption = styled(Typography)<{ component: string }>(() => ({\n    lineHeight: '26px',\n}));\n\nconst StyledPageTitle = styled(Typography)<{ component: string }>(() => ({\n    fontWeight: 'bold',\n}));\n\nconst StyledPageDivider = styled(Divider)(({ theme }) => ({\n    marginBottom: theme.spacing(4),\n}));\n\nexport const PageTitle = ({ title }: { title: string | ReactNode }) => (\n    <StyledPageTitle variant=\"h5\" component=\"h2\">\n        {title}\n    </StyledPageTitle>\n);\n\nexport type Props = {\n    actionBtnTitle?: string;\n    caption?: ReactNode;\n    children: ReactNode;\n    contextButtons?: ReactNode[];\n    documentTitle: string;\n    fluid?: boolean;\n    fullWidth?: boolean;\n    header?: ReactNode;\n    hideHeader?: boolean;\n    actionButtonLink?: string;\n    pageHeader?: ReactNode;\n    showActionButton?: boolean;\n    showAddIcon?: boolean;\n    title: ReactNode;\n    titleComponent?: ComponentType<React.PropsWithChildren<unknown>>;\n    toPrevious?: boolean;\n    toParent?: string;\n    strictToParent?: boolean;\n    openLinkInNewTab?: boolean;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    navigate: (to: any) => void;\n    hideDivider?: boolean;\n    customActionButtons?: ReactNode[];\n    useAlternateBackground?: boolean;\n};\n\nconst PageLayout = (props: Props) => {\n    const {\n        actionBtnTitle,\n        caption,\n        children,\n        contextButtons,\n        documentTitle,\n        fluid = false,\n        fullWidth,\n        header,\n        hideHeader,\n        actionButtonLink,\n        openLinkInNewTab = false,\n        pageHeader,\n        showActionButton,\n        showAddIcon,\n        title,\n        titleComponent: TitleComponent,\n        toPrevious,\n        toParent,\n        strictToParent,\n        navigate,\n        hideDivider = false,\n        customActionButtons,\n        useAlternateBackground = false,\n    } = props;\n    const theme = useTheme();\n    const isMobile = useMediaQuery(theme.breakpoints.down('md'));\n    const baseUrl = getMicroFrontendAttribute('data-portal-base-url') || '/';\n    const actionButtonWithHttps = actionButtonLink?.startsWith('https://');\n    const actionButtonLinkFinal = actionButtonWithHttps\n        ? actionButtonLink\n        : actionButtonLink !== undefined\n          ? joinUrlPaths(baseUrl, actionButtonLink)\n          : '';\n\n    return (\n        <StyledWrapper fluid={fluid} useAlternateBackground={useAlternateBackground}>\n            {documentTitle && <DocumentTitle>{documentTitle}</DocumentTitle>}\n\n            {pageHeader ? pageHeader : null}\n            <StyledInnerWrapper>\n                {pageHeader && <Spacer size={16} variant=\"vertical\" />}\n                {!hideHeader && (\n                    <>\n                        <StyledHeader container alignItems=\"center\" direction=\"column\">\n                            <Grid item container direction=\"row\" alignContent=\"space-between\">\n                                <StyledHeaderContainer item>\n                                    {contextButtons && contextButtons.map((button, index) => <div key={index}>{button}</div>)}\n                                </StyledHeaderContainer>\n                            </Grid>\n                            <StyledTitleContainer item container>\n                                {(toParent || toPrevious) && (\n                                    <Box>\n                                        <StyledBackButton\n                                            aria-label=\"Back\"\n                                            data-testid=\"back_button\"\n                                            hasTitleComponent={!!TitleComponent}\n                                            component={'button'}\n                                            onClick={() => {\n                                                if (toPrevious) {\n                                                    navigate(-1);\n                                                } else if (toParent && strictToParent) {\n                                                    navigate(toParent);\n                                                } else if (toParent && history.length < historyMinLength) {\n                                                    navigate(toParent);\n                                                } else {\n                                                    navigate(-1);\n                                                }\n                                            }}\n                                        >\n                                            <ArrowBackIcon />\n                                        </StyledBackButton>\n                                    </Box>\n                                )}\n\n                                <StyledTitleSection item>\n                                    {TitleComponent ? <TitleComponent /> : <PageTitle title={title} />}\n                                    {caption && (\n                                        <StyledCaption variant=\"caption\" component=\"h3\">\n                                            {caption}\n                                        </StyledCaption>\n                                    )}\n                                </StyledTitleSection>\n\n                                {showActionButton && (\n                                    <>\n                                        {isMobile && <Spacer size={56} variant=\"vertical\" />}\n                                        <StyledActionButtonGrid item>\n                                            <Button\n                                                variant=\"contained\"\n                                                fullWidth={true}\n                                                data-testid={`Action-button-${actionBtnTitle}`}\n                                                href={openLinkInNewTab || actionButtonWithHttps ? actionButtonLinkFinal : ''}\n                                                target={openLinkInNewTab ? '_blank' : undefined}\n                                                rel={openLinkInNewTab ? 'noopener noreferrer' : undefined}\n                                                onClick={!openLinkInNewTab && !actionButtonWithHttps ? () => navigate(actionButtonLink) : () => {}}\n                                            >\n                                                {showAddIcon && <Add />}\n                                                {actionBtnTitle}\n                                            </Button>\n                                        </StyledActionButtonGrid>\n                                    </>\n                                )}\n                                {customActionButtons &&\n                                    customActionButtons.map((button, index) => (\n                                        <div key={index}>\n                                            {isMobile && <Spacer size={56} variant=\"vertical\" />}\n                                            {!isMobile && <Spacer size={16} variant=\"vertical\" />}\n                                            <StyledActionButtonGrid item>{button}</StyledActionButtonGrid>\n                                        </div>\n                                    ))}\n                            </StyledTitleContainer>\n                        </StyledHeader>\n                        {!hideDivider && <StyledPageDivider />}\n                    </>\n                )}\n                <FullWidthContainer fullWidth={fullWidth}>\n                    {header ? <StyledTopSection>{header}</StyledTopSection> : null}\n                    <FDErrorBoundary identifier={documentTitle}>\n                        <>{children}</>\n                    </FDErrorBoundary>\n                </FullWidthContainer>\n            </StyledInnerWrapper>\n        </StyledWrapper>\n    );\n};\n\nexport default PageLayout;\n"],"names":["maxWidth","StyledWrapper","styled","theme","fluid","useAlternateBackground","breakpoints","down","margin","spacing","content","height","width","backgroundColor","position","top","left","zIndex","undefined","StyledActionButtonGrid","Grid","paddingTop","StyledHeader","flexWrap","alignItems","paddingBottom","StyledTitleContainer","StyledTitleSection","flexGrow","StyledTopSection","paddingLeft","paddingRight","StyledBackButton","IconButton","shouldForwardProp","prop","hasTitleComponent","only","marginLeft","StyledInnerWrapper","marginRight","StyledHeaderContainer","display","justifyContent","StyledCaption","Typography","lineHeight","StyledPageTitle","fontWeight","StyledPageDivider","Divider","marginBottom","PageTitle","title","_jsx","variant","component","children","props","actionBtnTitle","caption","contextButtons","documentTitle","fullWidth","header","hideHeader","actionButtonLink","openLinkInNewTab","pageHeader","showActionButton","showAddIcon","titleComponent","TitleComponent","toPrevious","toParent","strictToParent","navigate","hideDivider","customActionButtons","useTheme","isMobile","useMediaQuery","baseUrl","getMicroFrontendAttribute","actionButtonWithHttps","startsWith","actionButtonLinkFinal","joinUrlPaths","_jsxs","DocumentTitle","Spacer","size","_Fragment","container","direction","item","alignContent","jsx","map","button","index","jsxs","Box","onClick","history","length","ArrowBackIcon","Button","href","target","rel","Add","FullWidthContainer","FDErrorBoundary","identifier"],"mappings":"uuBAwBO,MAAMA,EAAW,KAGlBC,EAAgBC,EAAMA,OAAC,MAAPA,EAAmE,EAAGC,QAAOC,QAAOC,6BAA8B,CACpIL,SAAUI,EAAQ,OAASJ,EAC3B,CAACG,EAAMG,YAAYC,KAAK,OAAQ,CAC5BP,SAAU,QAEdQ,OAAQL,EAAMM,QAAQ,EAAG,GACzB,UAAWJ,EACL,CACIK,QAAS,KACTC,OAAQ,QACRC,MAAO,OACPC,gBAAiB,UACjBC,SAAU,WACVC,IAAK,EACLC,KAAM,EACNC,QAAS,UAEbC,MAGJC,EAAyBjB,EAAAA,OAAOkB,EAAPlB,EAAa,EAAGC,YAAa,CACxD,CAACA,EAAMG,YAAYC,KAAK,OAAQ,CAC5BK,MAAO,OACPS,WAAYlB,EAAMM,QAAQ,QAI5Ba,EAAepB,EAAAA,OAAOkB,EAAPlB,EAAa,EAAGC,YAAa,CAC9CoB,SAAU,SACVC,WAAY,aACZH,WAAYlB,EAAMM,QAAQ,GAC1BgB,cAAetB,EAAMM,QAAQ,GAE7B,CAACN,EAAMG,YAAYC,KAAK,OAAQ,CAC5Bc,WAAYlB,EAAMM,QAAQ,GAC1BgB,cAAetB,EAAMM,QAAQ,QAI/BiB,EAAuBxB,EAAAA,OAAOkB,EAAPlB,EAAa,EAAGC,YAAa,CACtDkB,WAAYlB,EAAMM,QAAQ,OAGxBkB,EAAqBzB,EAAAA,OAAOkB,EAAPlB,EAAa,KAAO,CAC3C0B,SAAU,MAGRC,EAAmB3B,EAAAA,OAAO,MAAPA,EAAc,EAAGC,YAAa,CACnDH,WACAyB,cAAetB,EAAMM,QAAQ,GAE7B,CAACN,EAAMG,YAAYC,KAAK,OAAQ,CAC5BkB,cAAetB,EAAMM,QAAQ,GAC7BqB,YAAa3B,EAAMM,QAAQ,GAC3BsB,aAAc5B,EAAMM,QAAQ,QAI9BuB,EAAmB9B,EAAMA,OAAC+B,EAAY,CACxCC,kBAAoBC,GAAkB,sBAATA,GADRjC,EAG0B,EAAGC,QAAOiC,wBAAyB,CAClF5B,OAAQ4B,EAAoBjC,EAAMM,SAAS,IAAM,GAAI,KAAM,KAAON,EAAMM,SAAS,IAAK,GAAI,KAAM,KAEhG,CAACN,EAAMG,YAAY+B,KAAK,OAAQ,CAC5BC,WAAYnC,EAAMM,SAAS,IAG/B,CAACN,EAAMG,YAAY+B,KAAK,OAAQ,CAC5BC,WAAYnC,EAAMM,SAAS,QAI7B8B,EAAqBrC,EAAAA,OAAO,MAAPA,EAAc,EAAGC,YAAa,CACrDH,WACAsC,WAAYnC,EAAMM,QAAQ,GAC1B+B,YAAarC,EAAMM,QAAQ,GAC3BgB,cAAetB,EAAMM,QAAQ,GAE7B,CAACN,EAAMG,YAAY+B,KAAK,OAAQ,CAC5BC,WAAY,GACZE,YAAarC,EAAMM,QAAQ,IAG/B,CAACN,EAAMG,YAAY+B,KAAK,OAAQ,CAC5BC,WAAYnC,EAAMM,QAAQ,GAC1B+B,YAAarC,EAAMM,QAAQ,GAC3BT,SAAU,QAGd,CAACG,EAAMG,YAAY+B,KAAK,OAAQ,CAC5BC,WAAYnC,EAAMM,QAAQ,GAC1B+B,YAAarC,EAAMM,QAAQ,GAC3BT,SAAU,YAIZyC,EAAwBvC,EAAAA,OAAOkB,EAAPlB,EAAa,KAAO,CAC9CwC,QAAS,OACTd,SAAU,EACVe,eAAgB,eAEdC,EAAgB1C,EAAAA,OAAO2C,EAAP3C,EAA0C,KAAO,CACnE4C,WAAY,WAGVC,EAAkB7C,EAAAA,OAAO2C,EAAP3C,EAA0C,KAAO,CACrE8C,WAAY,WAGVC,EAAoB/C,EAAAA,OAAOgD,EAAPhD,EAAgB,EAAGC,YAAa,CACtDgD,aAAchD,EAAMM,QAAQ,OAGnB2C,EAAY,EAAGC,WACxBC,EAAAA,IAACP,EAAgB,CAAAQ,QAAQ,KAAKC,UAAU,KACnCC,SAAAJ,wCA+BWK,IAChB,MAAMC,eACFA,EAAcC,QACdA,EAAOH,SACPA,EAAQI,eACRA,EAAcC,cACdA,EAAa1D,MACbA,GAAQ,EAAK2D,UACbA,EAASC,OACTA,EAAMC,WACNA,EAAUC,iBACVA,EAAgBC,iBAChBA,GAAmB,EAAKC,WACxBA,EAAUC,iBACVA,EAAgBC,YAChBA,EAAWjB,MACXA,EACAkB,eAAgBC,EAAcC,WAC9BA,EAAUC,SACVA,EAAQC,eACRA,EAAcC,SACdA,EAAQC,YACRA,GAAc,EAAKC,oBACnBA,EAAmBzE,uBACnBA,GAAyB,GACzBqD,EACEvD,EAAQ4E,EAAAA,WACRC,EAAWC,EAAc9E,EAAMG,YAAYC,KAAK,OAChD2E,EAAUC,EAAAA,0BAA0B,yBAA2B,IAC/DC,EAAwBlB,GAAkBmB,WAAW,YACrDC,GAAwBF,EACxBlB,OACqBhD,IAArBgD,EACEqB,EAAYA,aAACL,EAAShB,GACtB,GAER,OACIsB,OAACvF,EAAa,CAACG,MAAOA,EAAOC,uBAAwBA,EAChDoD,SAAA,CAAAK,GAAiBR,EAAAA,IAACmC,EAAe,CAAAhC,SAAAK,IAEjCM,GAA0B,KAC3BoB,EAAAA,KAACjD,aACI6B,GAAcd,EAAAA,IAACoC,EAAO,CAAAC,KAAM,GAAIpC,QAAQ,cACvCU,GACEuB,OACII,EAAAA,SAAA,CAAAnC,SAAA,CAAA+B,EAAAA,KAAClE,EAAY,CAACuE,WAAS,EAACrE,WAAW,SAASsE,UAAU,mBAClDxC,EAAAA,IAAClC,EAAK,CAAA2E,QAAKF,WAAS,EAACC,UAAU,MAAME,aAAa,gBAC9CvC,SAAAH,EAAA2C,IAACxD,EAAqB,CAACsD,MAAI,EAAAtC,SACtBI,GAAkBA,EAAeqC,KAAI,CAACC,EAAQC,IAAU9C,EAAA2C,IAAA,MAAA,CAAAxC,SAAkB0C,GAARC,SAG3EZ,EAACa,KAAA3E,EAAqB,CAAAqE,MAAK,EAAAF,WACtB,EAAApC,SAAA,EAACiB,GAAYD,IACVnB,MAACgD,EAAG,CAAA7C,SACAH,MAACtB,EAAgB,CAAA,aACF,OAAM,cACL,cACZI,oBAAqBoC,EACrBhB,UAAW,SACX+C,QAAS,KACD9B,EACAG,GAAU,GACHF,GAAYC,GAEZD,GAAY8B,QAAQC,OArNtD,EAoN2B7B,EAASF,GAITE,GAAU,EACb,WAGLtB,EAAAA,IAACoD,EAAgB,QAK7BlB,EAAAA,KAAC7D,GAAmBoE,MAAI,EAAAtC,SAAA,CACnBe,EAAiBlB,MAACkB,EAAc,CAAA,GAAMlB,EAAC2C,IAAA7C,GAAUC,MAAOA,IACxDO,GACGN,EAAC2C,IAAArD,GAAcW,QAAQ,UAAUC,UAAU,KACtCC,SAAAG,OAKZS,GACGmB,EAAAa,KAAAT,WAAA,CAAAnC,SAAA,CACKuB,GAAY1B,EAAA2C,IAACP,EAAO,CAAAC,KAAM,GAAIpC,QAAQ,aACvCD,MAACnC,EAAuB,CAAA4E,iBACpBP,EAAAA,KAACmB,GACGpD,QAAQ,YACRQ,WAAW,gBACE,iBAAiBJ,IAC9BiD,KAAMzC,GAAoBiB,EAAwBE,GAAwB,GAC1EuB,OAAQ1C,EAAmB,cAAWjD,EACtC4F,IAAK3C,EAAmB,2BAAwBjD,EAChDqF,QAAUpC,GAAqBiB,EAA2D,OAAnC,IAAMR,EAASV,GAA4BT,SAAA,CAEjGa,GAAehB,MAACyD,EAAG,CAAA,GACnBpD,UAKhBmB,GACGA,EAAoBoB,KAAI,CAACC,EAAQC,IAC7BZ,wBACKR,GAAY1B,MAACoC,EAAM,CAACC,KAAM,GAAIpC,QAAQ,cACrCyB,GAAY1B,EAAA2C,IAACP,EAAO,CAAAC,KAAM,GAAIpC,QAAQ,aACxCD,EAAAA,IAACnC,GAAuB4E,MAAI,EAAAtC,SAAE0C,MAHxBC,YAQxBvB,GAAevB,EAAC2C,IAAAhD,EAAoB,OAG9CuC,EAAAA,KAACwB,EAAmB,CAAAjD,UAAWA,EAASN,SAAA,CACnCO,EAASV,MAACzB,EAAgB,CAAA4B,SAAEO,IAA6B,KAC1DV,EAAAA,IAAC2D,EAAe,CAACC,WAAYpD,EACzBL,SAAAH,MAAAsC,EAAAA,SAAA,CAAAnC,SAAGA,cAKrB"}

package/dist/components/ui/PageLayout/PageLayout.d.ts

@@ -24,6 +24,7 @@ type Props = {
     navigate: (to: any) => void;
     hideDivider?: boolean;
     customActionButtons?: ReactNode[];
+    useAlternateBackground?: boolean;
 };
 declare const PageLayout: (props: Props) => react_jsx_runtime.JSX.Element;
 

package/dist/components/ui/PageLayout/PageLayout.js

@@ -1,2 +1,2 @@
-import{jsxs as i,jsx as t,Fragment as n}from"react/jsx-runtime";import e from"@mui/icons-material/Add";import r from"@mui/icons-material/ArrowBack";import a from"@mui/material/Grid";import o from"@mui/material/IconButton";import{styled as m,useTheme as d}from"@mui/material/styles";import l from"@mui/material/Typography";import p from"@mui/material/useMediaQuery";import c from"./DocumentTitle.js";import s from"./FullWidthContainer.js";import h from"../FDErrorBoundary/FDErrorBoundary.js";import g from"@mui/material/Button";import{getMicroFrontendAttribute as u}from"../../renderUtilities/renderUtilities.js";import{joinUrlPaths as f}from"../../../utilities/validation.js";import v from"../Spacer/Spacer.js";import b from"@mui/material/Box";import x from"@mui/material/Divider";const k=1112,B=m("div")((({theme:i,fluid:t})=>({maxWidth:t?"none":k,[i.breakpoints.down("md")]:{maxWidth:"none"},margin:i.spacing(2,4)}))),w=m(a)((({theme:i})=>({[i.breakpoints.down("sm")]:{width:"100%",paddingTop:i.spacing(2)}}))),y=m(a)((({theme:i})=>({flexWrap:"nowrap",alignItems:"flex-start",paddingTop:i.spacing(3),paddingBottom:i.spacing(3),[i.breakpoints.down("md")]:{paddingTop:i.spacing(2),paddingBottom:i.spacing(3)}}))),T=m(a)((({theme:i})=>({paddingTop:i.spacing(2)}))),W=m(a)((()=>({flexGrow:1}))),C=m("div")((({theme:i})=>({maxWidth:k,paddingBottom:i.spacing(3),[i.breakpoints.down("md")]:{paddingBottom:i.spacing(2),paddingLeft:i.spacing(2),paddingRight:i.spacing(2)}}))),L=m(o,{shouldForwardProp:i=>"hasTitleComponent"!==i})((({theme:i,hasTitleComponent:t})=>({margin:t?i.spacing(-.75,2,-1.5,-1.5):i.spacing(-1.5,2,-1.5,-1.5),[i.breakpoints.only("sm")]:{marginLeft:i.spacing(-2)},[i.breakpoints.only("xs")]:{marginLeft:i.spacing(-2)}}))),j=m("div")((({theme:i})=>({maxWidth:k,marginLeft:i.spacing(6),marginRight:i.spacing(4),paddingBottom:i.spacing(2),[i.breakpoints.only("md")]:{marginLeft:12,marginRight:i.spacing(3)},[i.breakpoints.only("sm")]:{marginLeft:i.spacing(3),marginRight:i.spacing(3),maxWidth:"none"},[i.breakpoints.only("xs")]:{marginLeft:i.spacing(2),marginRight:i.spacing(2),maxWidth:"none"}}))),A=m(a)((()=>({display:"flex",flexGrow:1,justifyContent:"flex-end"}))),D=m(l)((()=>({lineHeight:"26px"}))),I=m(l)((()=>({fontWeight:"bold"}))),R=m(x)((({theme:i})=>({marginBottom:i.spacing(4)}))),z=({title:i})=>t(I,{variant:"h5",component:"h2",children:i}),F=o=>{const{actionBtnTitle:m,caption:l,children:x,contextButtons:k,documentTitle:I,fluid:F=!1,fullWidth:P,header:G,hideHeader:H,actionButtonLink:E,openLinkInNewTab:S=!1,pageHeader:U,showActionButton:_,showAddIcon:M,title:N,titleComponent:Q,toPrevious:$,toParent:q,strictToParent:J,navigate:K,hideDivider:O=!1,customActionButtons:V}=o,X=d(),Y=p(X.breakpoints.down("md")),Z=u("data-portal-base-url")||"/",ii=E?.startsWith("https://"),ti=ii?E:void 0!==E?f(Z,E):"";return i(B,{fluid:F,children:[I&&t(c,{children:I}),U||null,i(j,{children:[U&&t(v,{size:16,variant:"vertical"}),!H&&i(n,{children:[i(y,{container:!0,alignItems:"center",direction:"column",children:[t(a,{item:!0,container:!0,direction:"row",alignContent:"space-between",children:t(A,{item:!0,children:k&&k.map(((i,n)=>t("div",{children:i},n)))})}),i(T,{item:!0,container:!0,children:[(q||$)&&t(b,{children:t(L,{"aria-label":"Back","data-testid":"back_button",hasTitleComponent:!!Q,component:"button",onClick:()=>{$?K(-1):q&&J||q&&history.length<3?K(q):K(-1)},children:t(r,{})})}),i(W,{item:!0,children:[Q?t(Q,{}):t(z,{title:N}),l&&t(D,{variant:"caption",component:"h3",children:l})]}),_&&i(n,{children:[Y&&t(v,{size:56,variant:"vertical"}),t(w,{item:!0,children:i(g,{variant:"contained",fullWidth:!0,"data-testid":`Action-button-${m}`,href:S||ii?ti:"",target:S?"_blank":void 0,rel:S?"noopener noreferrer":void 0,onClick:S||ii?()=>{}:()=>K(E),children:[M&&t(e,{}),m]})})]}),V&&V.map(((n,e)=>i("div",{children:[Y&&t(v,{size:56,variant:"vertical"}),!Y&&t(v,{size:16,variant:"vertical"}),t(w,{item:!0,children:n})]},e)))]})]}),!O&&t(R,{})]}),i(s,{fullWidth:P,children:[G?t(C,{children:G}):null,t(h,{identifier:I,children:t(n,{children:x})})]})]})]})};export{z as PageTitle,F as default,k as maxWidth};
+import{jsxs as i,jsx as t,Fragment as n}from"react/jsx-runtime";import e from"@mui/icons-material/Add";import r from"@mui/icons-material/ArrowBack";import o from"@mui/material/Grid";import a from"@mui/material/IconButton";import{styled as d,useTheme as m}from"@mui/material/styles";import l from"@mui/material/Typography";import c from"@mui/material/useMediaQuery";import p from"./DocumentTitle.js";import s from"./FullWidthContainer.js";import h from"../FDErrorBoundary/FDErrorBoundary.js";import g from"@mui/material/Button";import{getMicroFrontendAttribute as u}from"../../renderUtilities/renderUtilities.js";import{joinUrlPaths as f}from"../../../utilities/validation.js";import v from"../Spacer/Spacer.js";import b from"@mui/material/Box";import k from"@mui/material/Divider";const B=1112,x=d("div")((({theme:i,fluid:t,useAlternateBackground:n})=>({maxWidth:t?"none":B,[i.breakpoints.down("md")]:{maxWidth:"none"},margin:i.spacing(2,4),":before":n?{content:'""',height:"100vh",width:"100%",backgroundColor:"#F7F7F7",position:"absolute",top:0,left:0,zIndex:-1e3}:void 0}))),w=d(o)((({theme:i})=>({[i.breakpoints.down("sm")]:{width:"100%",paddingTop:i.spacing(2)}}))),y=d(o)((({theme:i})=>({flexWrap:"nowrap",alignItems:"flex-start",paddingTop:i.spacing(3),paddingBottom:i.spacing(3),[i.breakpoints.down("md")]:{paddingTop:i.spacing(2),paddingBottom:i.spacing(3)}}))),T=d(o)((({theme:i})=>({paddingTop:i.spacing(2)}))),W=d(o)((()=>({flexGrow:1}))),C=d("div")((({theme:i})=>({maxWidth:B,paddingBottom:i.spacing(3),[i.breakpoints.down("md")]:{paddingBottom:i.spacing(2),paddingLeft:i.spacing(2),paddingRight:i.spacing(2)}}))),A=d(a,{shouldForwardProp:i=>"hasTitleComponent"!==i})((({theme:i,hasTitleComponent:t})=>({margin:t?i.spacing(-.75,2,-1.5,-1.5):i.spacing(-1.5,2,-1.5,-1.5),[i.breakpoints.only("sm")]:{marginLeft:i.spacing(-2)},[i.breakpoints.only("xs")]:{marginLeft:i.spacing(-2)}}))),L=d("div")((({theme:i})=>({maxWidth:B,marginLeft:i.spacing(6),marginRight:i.spacing(4),paddingBottom:i.spacing(2),[i.breakpoints.only("md")]:{marginLeft:12,marginRight:i.spacing(3)},[i.breakpoints.only("sm")]:{marginLeft:i.spacing(3),marginRight:i.spacing(3),maxWidth:"none"},[i.breakpoints.only("xs")]:{marginLeft:i.spacing(2),marginRight:i.spacing(2),maxWidth:"none"}}))),j=d(o)((()=>({display:"flex",flexGrow:1,justifyContent:"flex-end"}))),F=d(l)((()=>({lineHeight:"26px"}))),I=d(l)((()=>({fontWeight:"bold"}))),z=d(k)((({theme:i})=>({marginBottom:i.spacing(4)}))),D=({title:i})=>t(I,{variant:"h5",component:"h2",children:i}),R=a=>{const{actionBtnTitle:d,caption:l,children:k,contextButtons:B,documentTitle:I,fluid:R=!1,fullWidth:P,header:G,hideHeader:H,actionButtonLink:E,openLinkInNewTab:S=!1,pageHeader:U,showActionButton:_,showAddIcon:M,title:N,titleComponent:Q,toPrevious:$,toParent:q,strictToParent:J,navigate:K,hideDivider:O=!1,customActionButtons:V,useAlternateBackground:X=!1}=a,Y=m(),Z=c(Y.breakpoints.down("md")),ii=u("data-portal-base-url")||"/",ti=E?.startsWith("https://"),ni=ti?E:void 0!==E?f(ii,E):"";return i(x,{fluid:R,useAlternateBackground:X,children:[I&&t(p,{children:I}),U||null,i(L,{children:[U&&t(v,{size:16,variant:"vertical"}),!H&&i(n,{children:[i(y,{container:!0,alignItems:"center",direction:"column",children:[t(o,{item:!0,container:!0,direction:"row",alignContent:"space-between",children:t(j,{item:!0,children:B&&B.map(((i,n)=>t("div",{children:i},n)))})}),i(T,{item:!0,container:!0,children:[(q||$)&&t(b,{children:t(A,{"aria-label":"Back","data-testid":"back_button",hasTitleComponent:!!Q,component:"button",onClick:()=>{$?K(-1):q&&J||q&&history.length<3?K(q):K(-1)},children:t(r,{})})}),i(W,{item:!0,children:[Q?t(Q,{}):t(D,{title:N}),l&&t(F,{variant:"caption",component:"h3",children:l})]}),_&&i(n,{children:[Z&&t(v,{size:56,variant:"vertical"}),t(w,{item:!0,children:i(g,{variant:"contained",fullWidth:!0,"data-testid":`Action-button-${d}`,href:S||ti?ni:"",target:S?"_blank":void 0,rel:S?"noopener noreferrer":void 0,onClick:S||ti?()=>{}:()=>K(E),children:[M&&t(e,{}),d]})})]}),V&&V.map(((n,e)=>i("div",{children:[Z&&t(v,{size:56,variant:"vertical"}),!Z&&t(v,{size:16,variant:"vertical"}),t(w,{item:!0,children:n})]},e)))]})]}),!O&&t(z,{})]}),i(s,{fullWidth:P,children:[G?t(C,{children:G}):null,t(h,{identifier:I,children:t(n,{children:k})})]})]})]})};export{D as PageTitle,R as default,B as maxWidth};
 //# sourceMappingURL=PageLayout.js.map

package/dist/components/ui/PageLayout/PageLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageLayout.js","sources":["../../../../src/components/ui/PageLayout/PageLayout.tsx"],"sourcesContent":["import React, { ComponentType, ReactNode } from 'react';\n\nimport Add from '@mui/icons-material/Add';\nimport ArrowBackIcon from '@mui/icons-material/ArrowBack';\nimport Grid from '@mui/material/Grid';\nimport IconButton from '@mui/material/IconButton';\nimport { styled, useTheme } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport DocumentTitle from './DocumentTitle';\nimport FullWidthContainer from './FullWidthContainer';\nimport FDErrorBoundary from '../FDErrorBoundary/FDErrorBoundary';\nimport Button from '@mui/material/Button';\nimport { getMicroFrontendAttribute } from '../../renderUtilities';\nimport { joinUrlPaths } from '../../../utilities/validation';\nimport Spacer from '../Spacer/Spacer';\nimport Box from '@mui/material/Box';\nimport Divider from '@mui/material/Divider';\n\nexport const HORIZONTAL_SPACE_CLASSNAME = 'horizontal-content-space';\nexport const LEFT_HORIZONTAL_SPACE_CLASSNAME = 'left-horizontal-content-space';\nexport const RIGHT_HORIZONTAL_SPACE_CLASSNAME = 'right-horizontal-content-space';\nexport const VERTICAL_SPACE_CLASSNAME = 'vertical-content-space';\nexport const maxWidth = 1112;\nconst historyMinLength = 3;\n\nconst StyledWrapper = styled('div')<{ fluid: boolean }>(({ theme, fluid }) => ({\n    maxWidth: fluid ? 'none' : maxWidth,\n    [theme.breakpoints.down('md')]: {\n        maxWidth: 'none',\n    },\n    margin: theme.spacing(2, 4),\n}));\n\nconst StyledActionButtonGrid = styled(Grid)(({ theme }) => ({\n    [theme.breakpoints.down('sm')]: {\n        width: '100%',\n        paddingTop: theme.spacing(2),\n    },\n}));\n\nconst StyledHeader = styled(Grid)(({ theme }) => ({\n    flexWrap: 'nowrap',\n    alignItems: 'flex-start',\n    paddingTop: theme.spacing(3),\n    paddingBottom: theme.spacing(3),\n\n    [theme.breakpoints.down('md')]: {\n        paddingTop: theme.spacing(2),\n        paddingBottom: theme.spacing(3),\n    },\n}));\n\nconst StyledTitleContainer = styled(Grid)(({ theme }) => ({\n    paddingTop: theme.spacing(2),\n}));\n\nconst StyledTitleSection = styled(Grid)(() => ({\n    flexGrow: 1,\n}));\n\nconst StyledTopSection = styled('div')(({ theme }) => ({\n    maxWidth,\n    paddingBottom: theme.spacing(3),\n\n    [theme.breakpoints.down('md')]: {\n        paddingBottom: theme.spacing(2),\n        paddingLeft: theme.spacing(2),\n        paddingRight: theme.spacing(2),\n    },\n}));\n\nconst StyledBackButton = styled(IconButton, {\n    shouldForwardProp: (prop) => prop !== 'hasTitleComponent',\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n})<{ hasTitleComponent: boolean; component: any }>(({ theme, hasTitleComponent }) => ({\n    margin: hasTitleComponent ? theme.spacing(-0.75, 2, -1.5, -1.5) : theme.spacing(-1.5, 2, -1.5, -1.5),\n\n    [theme.breakpoints.only('sm')]: {\n        marginLeft: theme.spacing(-2),\n    },\n\n    [theme.breakpoints.only('xs')]: {\n        marginLeft: theme.spacing(-2),\n    },\n}));\n\nconst StyledInnerWrapper = styled('div')(({ theme }) => ({\n    maxWidth,\n    marginLeft: theme.spacing(6),\n    marginRight: theme.spacing(4),\n    paddingBottom: theme.spacing(2),\n\n    [theme.breakpoints.only('md')]: {\n        marginLeft: 12,\n        marginRight: theme.spacing(3),\n    },\n\n    [theme.breakpoints.only('sm')]: {\n        marginLeft: theme.spacing(3),\n        marginRight: theme.spacing(3),\n        maxWidth: 'none',\n    },\n\n    [theme.breakpoints.only('xs')]: {\n        marginLeft: theme.spacing(2),\n        marginRight: theme.spacing(2),\n        maxWidth: 'none',\n    },\n}));\n\nconst StyledHeaderContainer = styled(Grid)(() => ({\n    display: 'flex',\n    flexGrow: 1,\n    justifyContent: 'flex-end',\n}));\nconst StyledCaption = styled(Typography)<{ component: string }>(() => ({\n    lineHeight: '26px',\n}));\n\nconst StyledPageTitle = styled(Typography)<{ component: string }>(() => ({\n    fontWeight: 'bold',\n}));\n\nconst StyledPageDivider = styled(Divider)(({ theme }) => ({\n    marginBottom: theme.spacing(4),\n}));\n\nexport const PageTitle = ({ title }: { title: string | ReactNode }) => (\n    <StyledPageTitle variant=\"h5\" component=\"h2\">\n        {title}\n    </StyledPageTitle>\n);\n\nexport type Props = {\n    actionBtnTitle?: string;\n    caption?: ReactNode;\n    children: ReactNode;\n    contextButtons?: ReactNode[];\n    documentTitle: string;\n    fluid?: boolean;\n    fullWidth?: boolean;\n    header?: ReactNode;\n    hideHeader?: boolean;\n    actionButtonLink?: string;\n    pageHeader?: ReactNode;\n    showActionButton?: boolean;\n    showAddIcon?: boolean;\n    title: ReactNode;\n    titleComponent?: ComponentType<React.PropsWithChildren<unknown>>;\n    toPrevious?: boolean;\n    toParent?: string;\n    strictToParent?: boolean;\n    openLinkInNewTab?: boolean;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    navigate: (to: any) => void;\n    hideDivider?: boolean;\n    customActionButtons?: ReactNode[];\n};\n\nconst PageLayout = (props: Props) => {\n    const {\n        actionBtnTitle,\n        caption,\n        children,\n        contextButtons,\n        documentTitle,\n        fluid = false,\n        fullWidth,\n        header,\n        hideHeader,\n        actionButtonLink,\n        openLinkInNewTab = false,\n        pageHeader,\n        showActionButton,\n        showAddIcon,\n        title,\n        titleComponent: TitleComponent,\n        toPrevious,\n        toParent,\n        strictToParent,\n        navigate,\n        hideDivider = false,\n        customActionButtons,\n    } = props;\n    const theme = useTheme();\n    const isMobile = useMediaQuery(theme.breakpoints.down('md'));\n    const baseUrl = getMicroFrontendAttribute('data-portal-base-url') || '/';\n    const actionButtonWithHttps = actionButtonLink?.startsWith('https://');\n    const actionButtonLinkFinal = actionButtonWithHttps\n        ? actionButtonLink\n        : actionButtonLink !== undefined\n          ? joinUrlPaths(baseUrl, actionButtonLink)\n          : '';\n\n    return (\n        <StyledWrapper fluid={fluid}>\n            {documentTitle && <DocumentTitle>{documentTitle}</DocumentTitle>}\n\n            {pageHeader ? pageHeader : null}\n            <StyledInnerWrapper>\n                {pageHeader && <Spacer size={16} variant=\"vertical\" />}\n                {!hideHeader && (\n                    <>\n                        <StyledHeader container alignItems=\"center\" direction=\"column\">\n                            <Grid item container direction=\"row\" alignContent=\"space-between\">\n                                <StyledHeaderContainer item>\n                                    {contextButtons && contextButtons.map((button, index) => <div key={index}>{button}</div>)}\n                                </StyledHeaderContainer>\n                            </Grid>\n                            <StyledTitleContainer item container>\n                                {(toParent || toPrevious) && (\n                                    <Box>\n                                        <StyledBackButton\n                                            aria-label=\"Back\"\n                                            data-testid=\"back_button\"\n                                            hasTitleComponent={!!TitleComponent}\n                                            component={'button'}\n                                            onClick={() => {\n                                                if (toPrevious) {\n                                                    navigate(-1);\n                                                } else if (toParent && strictToParent) {\n                                                    navigate(toParent);\n                                                } else if (toParent && history.length < historyMinLength) {\n                                                    navigate(toParent);\n                                                } else {\n                                                    navigate(-1);\n                                                }\n                                            }}\n                                        >\n                                            <ArrowBackIcon />\n                                        </StyledBackButton>\n                                    </Box>\n                                )}\n\n                                <StyledTitleSection item>\n                                    {TitleComponent ? <TitleComponent /> : <PageTitle title={title} />}\n                                    {caption && (\n                                        <StyledCaption variant=\"caption\" component=\"h3\">\n                                            {caption}\n                                        </StyledCaption>\n                                    )}\n                                </StyledTitleSection>\n\n                                {showActionButton && (\n                                    <>\n                                        {isMobile && <Spacer size={56} variant=\"vertical\" />}\n                                        <StyledActionButtonGrid item>\n                                            <Button\n                                                variant=\"contained\"\n                                                fullWidth={true}\n                                                data-testid={`Action-button-${actionBtnTitle}`}\n                                                href={openLinkInNewTab || actionButtonWithHttps ? actionButtonLinkFinal : ''}\n                                                target={openLinkInNewTab ? '_blank' : undefined}\n                                                rel={openLinkInNewTab ? 'noopener noreferrer' : undefined}\n                                                onClick={!openLinkInNewTab && !actionButtonWithHttps ? () => navigate(actionButtonLink) : () => {}}\n                                            >\n                                                {showAddIcon && <Add />}\n                                                {actionBtnTitle}\n                                            </Button>\n                                        </StyledActionButtonGrid>\n                                    </>\n                                )}\n                                {customActionButtons &&\n                                    customActionButtons.map((button, index) => (\n                                        <div key={index}>\n                                            {isMobile && <Spacer size={56} variant=\"vertical\" />}\n                                            {!isMobile && <Spacer size={16} variant=\"vertical\" />}\n                                            <StyledActionButtonGrid item>{button}</StyledActionButtonGrid>\n                                        </div>\n                                    ))}\n                            </StyledTitleContainer>\n                        </StyledHeader>\n                        {!hideDivider && <StyledPageDivider />}\n                    </>\n                )}\n                <FullWidthContainer fullWidth={fullWidth}>\n                    {header ? <StyledTopSection>{header}</StyledTopSection> : null}\n                    <FDErrorBoundary identifier={documentTitle}>\n                        <>{children}</>\n                    </FDErrorBoundary>\n                </FullWidthContainer>\n            </StyledInnerWrapper>\n        </StyledWrapper>\n    );\n};\n\nexport default PageLayout;\n"],"names":["maxWidth","StyledWrapper","styled","theme","fluid","breakpoints","down","margin","spacing","StyledActionButtonGrid","Grid","width","paddingTop","StyledHeader","flexWrap","alignItems","paddingBottom","StyledTitleContainer","StyledTitleSection","flexGrow","StyledTopSection","paddingLeft","paddingRight","StyledBackButton","IconButton","shouldForwardProp","prop","hasTitleComponent","only","marginLeft","StyledInnerWrapper","marginRight","StyledHeaderContainer","display","justifyContent","StyledCaption","Typography","lineHeight","StyledPageTitle","fontWeight","StyledPageDivider","Divider","marginBottom","PageTitle","title","_jsx","variant","component","children","PageLayout","props","actionBtnTitle","caption","contextButtons","documentTitle","fullWidth","header","hideHeader","actionButtonLink","openLinkInNewTab","pageHeader","showActionButton","showAddIcon","titleComponent","TitleComponent","toPrevious","toParent","strictToParent","navigate","hideDivider","customActionButtons","useTheme","isMobile","useMediaQuery","baseUrl","getMicroFrontendAttribute","actionButtonWithHttps","startsWith","actionButtonLinkFinal","undefined","joinUrlPaths","_jsxs","DocumentTitle","Spacer","size","_Fragment","container","direction","item","alignContent","map","button","index","Box","onClick","history","length","ArrowBackIcon","Button","href","target","rel","Add","FullWidthContainer","FDErrorBoundary","identifier"],"mappings":"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"}
+{"version":3,"file":"PageLayout.js","sources":["../../../../src/components/ui/PageLayout/PageLayout.tsx"],"sourcesContent":["import React, { ComponentType, ReactNode } from 'react';\n\nimport Add from '@mui/icons-material/Add';\nimport ArrowBackIcon from '@mui/icons-material/ArrowBack';\nimport Grid from '@mui/material/Grid';\nimport IconButton from '@mui/material/IconButton';\nimport { styled, useTheme } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport DocumentTitle from './DocumentTitle';\nimport FullWidthContainer from './FullWidthContainer';\nimport FDErrorBoundary from '../FDErrorBoundary/FDErrorBoundary';\nimport Button from '@mui/material/Button';\nimport { getMicroFrontendAttribute } from '../../renderUtilities';\nimport { joinUrlPaths } from '../../../utilities/validation';\nimport Spacer from '../Spacer/Spacer';\nimport Box from '@mui/material/Box';\nimport Divider from '@mui/material/Divider';\n\nexport const HORIZONTAL_SPACE_CLASSNAME = 'horizontal-content-space';\nexport const LEFT_HORIZONTAL_SPACE_CLASSNAME = 'left-horizontal-content-space';\nexport const RIGHT_HORIZONTAL_SPACE_CLASSNAME = 'right-horizontal-content-space';\nexport const VERTICAL_SPACE_CLASSNAME = 'vertical-content-space';\nexport const maxWidth = 1112;\nconst historyMinLength = 3;\n\nconst StyledWrapper = styled('div')<{ fluid: boolean; useAlternateBackground: boolean }>(({ theme, fluid, useAlternateBackground }) => ({\n    maxWidth: fluid ? 'none' : maxWidth,\n    [theme.breakpoints.down('md')]: {\n        maxWidth: 'none',\n    },\n    margin: theme.spacing(2, 4),\n    ':before': useAlternateBackground\n        ? {\n              content: '\"\"',\n              height: '100vh',\n              width: '100%',\n              backgroundColor: '#F7F7F7',\n              position: 'absolute',\n              top: 0,\n              left: 0,\n              zIndex: -1000,\n          }\n        : undefined,\n}));\n\nconst StyledActionButtonGrid = styled(Grid)(({ theme }) => ({\n    [theme.breakpoints.down('sm')]: {\n        width: '100%',\n        paddingTop: theme.spacing(2),\n    },\n}));\n\nconst StyledHeader = styled(Grid)(({ theme }) => ({\n    flexWrap: 'nowrap',\n    alignItems: 'flex-start',\n    paddingTop: theme.spacing(3),\n    paddingBottom: theme.spacing(3),\n\n    [theme.breakpoints.down('md')]: {\n        paddingTop: theme.spacing(2),\n        paddingBottom: theme.spacing(3),\n    },\n}));\n\nconst StyledTitleContainer = styled(Grid)(({ theme }) => ({\n    paddingTop: theme.spacing(2),\n}));\n\nconst StyledTitleSection = styled(Grid)(() => ({\n    flexGrow: 1,\n}));\n\nconst StyledTopSection = styled('div')(({ theme }) => ({\n    maxWidth,\n    paddingBottom: theme.spacing(3),\n\n    [theme.breakpoints.down('md')]: {\n        paddingBottom: theme.spacing(2),\n        paddingLeft: theme.spacing(2),\n        paddingRight: theme.spacing(2),\n    },\n}));\n\nconst StyledBackButton = styled(IconButton, {\n    shouldForwardProp: (prop) => prop !== 'hasTitleComponent',\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n})<{ hasTitleComponent: boolean; component: any }>(({ theme, hasTitleComponent }) => ({\n    margin: hasTitleComponent ? theme.spacing(-0.75, 2, -1.5, -1.5) : theme.spacing(-1.5, 2, -1.5, -1.5),\n\n    [theme.breakpoints.only('sm')]: {\n        marginLeft: theme.spacing(-2),\n    },\n\n    [theme.breakpoints.only('xs')]: {\n        marginLeft: theme.spacing(-2),\n    },\n}));\n\nconst StyledInnerWrapper = styled('div')(({ theme }) => ({\n    maxWidth,\n    marginLeft: theme.spacing(6),\n    marginRight: theme.spacing(4),\n    paddingBottom: theme.spacing(2),\n\n    [theme.breakpoints.only('md')]: {\n        marginLeft: 12,\n        marginRight: theme.spacing(3),\n    },\n\n    [theme.breakpoints.only('sm')]: {\n        marginLeft: theme.spacing(3),\n        marginRight: theme.spacing(3),\n        maxWidth: 'none',\n    },\n\n    [theme.breakpoints.only('xs')]: {\n        marginLeft: theme.spacing(2),\n        marginRight: theme.spacing(2),\n        maxWidth: 'none',\n    },\n}));\n\nconst StyledHeaderContainer = styled(Grid)(() => ({\n    display: 'flex',\n    flexGrow: 1,\n    justifyContent: 'flex-end',\n}));\nconst StyledCaption = styled(Typography)<{ component: string }>(() => ({\n    lineHeight: '26px',\n}));\n\nconst StyledPageTitle = styled(Typography)<{ component: string }>(() => ({\n    fontWeight: 'bold',\n}));\n\nconst StyledPageDivider = styled(Divider)(({ theme }) => ({\n    marginBottom: theme.spacing(4),\n}));\n\nexport const PageTitle = ({ title }: { title: string | ReactNode }) => (\n    <StyledPageTitle variant=\"h5\" component=\"h2\">\n        {title}\n    </StyledPageTitle>\n);\n\nexport type Props = {\n    actionBtnTitle?: string;\n    caption?: ReactNode;\n    children: ReactNode;\n    contextButtons?: ReactNode[];\n    documentTitle: string;\n    fluid?: boolean;\n    fullWidth?: boolean;\n    header?: ReactNode;\n    hideHeader?: boolean;\n    actionButtonLink?: string;\n    pageHeader?: ReactNode;\n    showActionButton?: boolean;\n    showAddIcon?: boolean;\n    title: ReactNode;\n    titleComponent?: ComponentType<React.PropsWithChildren<unknown>>;\n    toPrevious?: boolean;\n    toParent?: string;\n    strictToParent?: boolean;\n    openLinkInNewTab?: boolean;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    navigate: (to: any) => void;\n    hideDivider?: boolean;\n    customActionButtons?: ReactNode[];\n    useAlternateBackground?: boolean;\n};\n\nconst PageLayout = (props: Props) => {\n    const {\n        actionBtnTitle,\n        caption,\n        children,\n        contextButtons,\n        documentTitle,\n        fluid = false,\n        fullWidth,\n        header,\n        hideHeader,\n        actionButtonLink,\n        openLinkInNewTab = false,\n        pageHeader,\n        showActionButton,\n        showAddIcon,\n        title,\n        titleComponent: TitleComponent,\n        toPrevious,\n        toParent,\n        strictToParent,\n        navigate,\n        hideDivider = false,\n        customActionButtons,\n        useAlternateBackground = false,\n    } = props;\n    const theme = useTheme();\n    const isMobile = useMediaQuery(theme.breakpoints.down('md'));\n    const baseUrl = getMicroFrontendAttribute('data-portal-base-url') || '/';\n    const actionButtonWithHttps = actionButtonLink?.startsWith('https://');\n    const actionButtonLinkFinal = actionButtonWithHttps\n        ? actionButtonLink\n        : actionButtonLink !== undefined\n          ? joinUrlPaths(baseUrl, actionButtonLink)\n          : '';\n\n    return (\n        <StyledWrapper fluid={fluid} useAlternateBackground={useAlternateBackground}>\n            {documentTitle && <DocumentTitle>{documentTitle}</DocumentTitle>}\n\n            {pageHeader ? pageHeader : null}\n            <StyledInnerWrapper>\n                {pageHeader && <Spacer size={16} variant=\"vertical\" />}\n                {!hideHeader && (\n                    <>\n                        <StyledHeader container alignItems=\"center\" direction=\"column\">\n                            <Grid item container direction=\"row\" alignContent=\"space-between\">\n                                <StyledHeaderContainer item>\n                                    {contextButtons && contextButtons.map((button, index) => <div key={index}>{button}</div>)}\n                                </StyledHeaderContainer>\n                            </Grid>\n                            <StyledTitleContainer item container>\n                                {(toParent || toPrevious) && (\n                                    <Box>\n                                        <StyledBackButton\n                                            aria-label=\"Back\"\n                                            data-testid=\"back_button\"\n                                            hasTitleComponent={!!TitleComponent}\n                                            component={'button'}\n                                            onClick={() => {\n                                                if (toPrevious) {\n                                                    navigate(-1);\n                                                } else if (toParent && strictToParent) {\n                                                    navigate(toParent);\n                                                } else if (toParent && history.length < historyMinLength) {\n                                                    navigate(toParent);\n                                                } else {\n                                                    navigate(-1);\n                                                }\n                                            }}\n                                        >\n                                            <ArrowBackIcon />\n                                        </StyledBackButton>\n                                    </Box>\n                                )}\n\n                                <StyledTitleSection item>\n                                    {TitleComponent ? <TitleComponent /> : <PageTitle title={title} />}\n                                    {caption && (\n                                        <StyledCaption variant=\"caption\" component=\"h3\">\n                                            {caption}\n                                        </StyledCaption>\n                                    )}\n                                </StyledTitleSection>\n\n                                {showActionButton && (\n                                    <>\n                                        {isMobile && <Spacer size={56} variant=\"vertical\" />}\n                                        <StyledActionButtonGrid item>\n                                            <Button\n                                                variant=\"contained\"\n                                                fullWidth={true}\n                                                data-testid={`Action-button-${actionBtnTitle}`}\n                                                href={openLinkInNewTab || actionButtonWithHttps ? actionButtonLinkFinal : ''}\n                                                target={openLinkInNewTab ? '_blank' : undefined}\n                                                rel={openLinkInNewTab ? 'noopener noreferrer' : undefined}\n                                                onClick={!openLinkInNewTab && !actionButtonWithHttps ? () => navigate(actionButtonLink) : () => {}}\n                                            >\n                                                {showAddIcon && <Add />}\n                                                {actionBtnTitle}\n                                            </Button>\n                                        </StyledActionButtonGrid>\n                                    </>\n                                )}\n                                {customActionButtons &&\n                                    customActionButtons.map((button, index) => (\n                                        <div key={index}>\n                                            {isMobile && <Spacer size={56} variant=\"vertical\" />}\n                                            {!isMobile && <Spacer size={16} variant=\"vertical\" />}\n                                            <StyledActionButtonGrid item>{button}</StyledActionButtonGrid>\n                                        </div>\n                                    ))}\n                            </StyledTitleContainer>\n                        </StyledHeader>\n                        {!hideDivider && <StyledPageDivider />}\n                    </>\n                )}\n                <FullWidthContainer fullWidth={fullWidth}>\n                    {header ? <StyledTopSection>{header}</StyledTopSection> : null}\n                    <FDErrorBoundary identifier={documentTitle}>\n                        <>{children}</>\n                    </FDErrorBoundary>\n                </FullWidthContainer>\n            </StyledInnerWrapper>\n        </StyledWrapper>\n    );\n};\n\nexport default PageLayout;\n"],"names":["maxWidth","StyledWrapper","styled","theme","fluid","useAlternateBackground","breakpoints","down","margin","spacing","content","height","width","backgroundColor","position","top","left","zIndex","undefined","StyledActionButtonGrid","Grid","paddingTop","StyledHeader","flexWrap","alignItems","paddingBottom","StyledTitleContainer","StyledTitleSection","flexGrow","StyledTopSection","paddingLeft","paddingRight","StyledBackButton","IconButton","shouldForwardProp","prop","hasTitleComponent","only","marginLeft","StyledInnerWrapper","marginRight","StyledHeaderContainer","display","justifyContent","StyledCaption","Typography","lineHeight","StyledPageTitle","fontWeight","StyledPageDivider","Divider","marginBottom","PageTitle","title","_jsx","variant","component","children","PageLayout","props","actionBtnTitle","caption","contextButtons","documentTitle","fullWidth","header","hideHeader","actionButtonLink","openLinkInNewTab","pageHeader","showActionButton","showAddIcon","titleComponent","TitleComponent","toPrevious","toParent","strictToParent","navigate","hideDivider","customActionButtons","useTheme","isMobile","useMediaQuery","baseUrl","getMicroFrontendAttribute","actionButtonWithHttps","startsWith","actionButtonLinkFinal","joinUrlPaths","_jsxs","DocumentTitle","Spacer","size","_Fragment","container","direction","item","alignContent","map","button","index","Box","onClick","history","length","ArrowBackIcon","Button","href","target","rel","Add","FullWidthContainer","FDErrorBoundary","identifier"],"mappings":"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"}

package/package.json

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