tp-react-elements-dev 1.12.33 → 1.12.35

package/dist/components/FormComponents/FormTextFieldWithSelect/FormTextFieldWithSelect.esm.js

@@ -0,0 +1,106 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Controller } from 'react-hook-form';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import 'dayjs';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+import { Box, TextField, Select, MenuItem } from '@mui/material';
+
+/**
+ * FormTextField Component
+ *
+ * A text input field component that integrates with react-hook-form for form state management.
+ * This component is used for standard text inputs, email inputs, and multi-email inputs.
+ *
+ * @component
+ * @param {Object} props - The component props
+ * @param {FormRenderProps} props.props - Form rendering properties from parent form
+ * @param {VariantProps} props.variant - UI variant style ('standard', 'outlined', etc.)
+ *
+ * @example
+ * // Basic usage in FormRender
+ * <FormTextField props={formRenderProps} variant="outlined" />
+ *
+ * @example
+ * // Usage with specific configuration
+ * const formItem = {
+ *   name: "email",
+ *   label: "Email Address",
+ *   inputType: "email",
+ *   required: true,
+ *   placeholder: "Enter your email"
+ * };
+ * <FormTextField
+ *   props={{
+ *     item: formItem,
+ *     control: formMethods.control,
+ *     errors: formMethods.formState.errors
+ *   }}
+ *   variant="outlined"
+ * />
+ */
+const FormTextFieldWithSelect = ({ props, variant, }) => {
+    // Using fieldState.error directly from Controller render; no local isError needed
+    // Removed fieldError gating: error border now shows whenever there is a validation error
+    /**
+     * Generates the field label based on variant type
+     * For non-standard variants, appends an asterisk if the field is required
+     */
+    const label = variant !== 'standard' ? `${props.item.label}${props.item.required ? ' *' : ''}` : '';
+    const SelectValue = props.getValues(props.item.name + 'SelectValue');
+    /**
+     * Handles input events with various text restrictions
+     *
+     * @param {any} e - The input event object
+     *
+     * @remarks
+     * - Removes spaces if donotAllowSpace is true
+     * - Removes special characters if allowSpecialChars is false
+     * - Prevents input that starts with a space
+     * - Calls custom onInputProps handler if provided
+     */
+    const onInput = (e) => {
+        const filteredValue = e.target.value.replace(/[^a-zA-Z0-9.]/g, '');
+        e.target.value = filteredValue;
+        props.item.onInputProps && props.item.onInputProps(e);
+    };
+    /**
+     * Renders the text field component using react-hook-form's Controller
+     * for controlled form state management
+     */
+    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field, fieldState }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsxs(Box, { sx: { display: 'flex', width: '100%' }, children: [jsx(TextField, { ...field, fullWidth: true, autoFocus: props.item.autoFocus, error: !!fieldState.error, label: label, placeholder: props.item.placeholder || '', autoComplete: "off", sx: {
+                                ...props.item.sx,
+                                '& .MuiOutlinedInput-root': {
+                                    borderTopRightRadius: 0,
+                                    borderBottomRightRadius: 0,
+                                    borderRight: 'none',
+                                },
+                            }, value: field.value || '', size: "small", disabled: props.item.disable, onBlur: (e) => {
+                                props?.item?.onBlurFn && props?.item?.onBlurFn(e);
+                            }, inputProps: {
+                                ...{
+                                    maxLength: props.item.maxLength || 100,
+                                    onInput: onInput,
+                                    onPaste: (e) => {
+                                        if (props.item.doNotAllowPaste)
+                                            e.preventDefault();
+                                    },
+                                },
+                                'aria-labelledby': `${props.item.name}-label`,
+                                'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
+                                'aria-required': props.item.required ? true : undefined,
+                            } }), jsx(Select, { value: SelectValue, onChange: (_, newValue) => {
+                                // eslint-disable-next-line react/prop-types
+                                props.setValue(props.item.name + 'SelectValue', newValue);
+                            }, size: "small", sx: {
+                                // '& .MuiOutlinedInput-root': {
+                                borderTopLeftRadius: 0,
+                                borderBottomLeftRadius: 0,
+                                minWidth: '120px',
+                                borderLeft: 'none',
+                                // },
+                            }, disabled: props.item.disable, error: !!fieldState.error, children: props?.item?.options?.map((item) => {
+                                return jsx(MenuItem, { value: item.value, children: item.label });
+                            }) })] }), jsx(FormBottomField, { ...props })] })) }, props.item.name));
+};
+
+export { FormTextFieldWithSelect as default };

package/dist/components/FormComponents/index.esm.js

@@ -29,6 +29,9 @@ import '@mui/icons-material/NavigateBefore';
 import '@mui/icons-material/NavigateNext';
 import '@mui/icons-material/Delete';
 import '@mui/icons-material/UploadFile';
+import '@mui/icons-material/PictureAsPdf';
+import '@mui/icons-material/TableChart';
+import '@mui/icons-material/Description';
 export { default as RichTextEditor } from './RichTextEditor/RichTextEditor.esm.js';
 export { default as RichTextEditorWrapper } from './RichTextEditor/RichTextEditorWrapper.esm.js';
 export { default as FormErrorField } from './FormErrorField/FormErrorField.esm.js';

package/dist/components/Global.styles.esm.js

@@ -1,79 +1,79 @@
 import { styled } from '@mui/material/styles';
 import { Button, Typography, Grid, Dialog, DialogTitle } from '@mui/material';
 
-styled(Button) `
-  border: 0;
-  color: #fff;
-  position: absolute;
-  text-align: center;
-  padding: 5px 12px;
-  font-size: 13px;
-  height: 30px;
-  right: -38px;
-  text-transform: none;
-  z-index: 2;
-  border-radius: 10px 0px 0px 10px;
-  &:hover {
-    right: 0px;
-  }
+styled(Button) `
+  border: 0;
+  color: #fff;
+  position: absolute;
+  text-align: center;
+  padding: 5px 12px;
+  font-size: 13px;
+  height: 30px;
+  right: -38px;
+  text-transform: none;
+  z-index: 2;
+  border-radius: 10px 0px 0px 10px;
+  &:hover {
+    right: 0px;
+  }
 `;
-const SubmitButton = styled(Button) `
-  text-transform: none;
+const SubmitButton = styled(Button) `
+  text-transform: none;
 `;
-const CancelButton = styled(Button) `
-  text-transform: none;
-  color: #000;
-  background: #ececee;
-  &:hover {
-    background: #0009;
-    color: #fff;
-  }
+const CancelButton = styled(Button) `
+  text-transform: none;
+  color: #000;
+  background: #ececee;
+  &:hover {
+    background: #0009;
+    color: #fff;
+  }
 `;
-const SaveAsDraftButton = styled(Button) `
-  text-transform: none;
-  font-size: 12px;
-  background: orange;
-  &:hover {
-    background: orange;
-  }
+const SaveAsDraftButton = styled(Button) `
+  text-transform: none;
+  font-size: 12px;
+  background: orange;
+  &:hover {
+    background: orange;
+  }
 `;
 styled(Typography) ``;
 styled(Grid, {
     shouldForwardProp: (prop) => prop !== 'isActive' && prop !== 'noOfColumn',
-}) `
-  flex-direction: column;
-  margin-bottom: 8px;
-  min-width: 10%;
-  padding-left: 0px;
-  z-index: 2;
-  padding-right: 0px;
-  border: 1px solid #0003;
-  font-size: 12px;
-  padding: 6px;
-  text-align: center;
-  &:hover {
-    cursor: pointer;
-  }
+}) `
+  flex-direction: column;
+  margin-bottom: 8px;
+  min-width: 10%;
+  padding-left: 0px;
+  z-index: 2;
+  padding-right: 0px;
+  border: 1px solid #0003;
+  font-size: 12px;
+  padding: 6px;
+  text-align: center;
+  &:hover {
+    cursor: pointer;
+  }
 `;
-const DialogContainer = styled(Dialog) `
-  position: fixed;
-  top: -16px;
-  left: 0;
-  right: 0;
-  bottom: auto;
-  & .css-tlc64q-MuiPaper-root-MuiDialog-paper,
-  .css-mbdu2s {
-    max-width: 900px;
-  }
+const DialogContainer = styled(Dialog) `
+  position: fixed;
+  top: -16px;
+  left: 0;
+  right: 0;
+  bottom: auto;
+  & .css-tlc64q-MuiPaper-root-MuiDialog-paper,
+  .css-mbdu2s {
+    max-width: 900px;
+  }
 `;
-const DialogTitleWrapper = styled(DialogTitle) `
-  padding: 8px 16px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 14px;
-  cursor: move;
-  border-bottom: 1px solid rgb(229 231 235 / 1);
+const DialogTitleWrapper = styled(DialogTitle) `
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  cursor: move;
+  border-bottom: 1px solid rgb(229 231 235 / 1);
 `;
 
 export { CancelButton, DialogContainer, DialogTitleWrapper, SaveAsDraftButton, SubmitButton };

package/dist/components/TextFieldWithSelect/index.d.ts

@@ -0,0 +1 @@
+export { default as FormTextFieldWithSelect } from '../FormComponents/FormTextFieldWithSelect/FormTextFieldWithSelect';

package/dist/components/TextFieldWithSelect/index.esm.js

@@ -0,0 +1 @@
+export { default as FormTextFieldWithSelect } from '../FormComponents/FormTextFieldWithSelect/FormTextFieldWithSelect.esm.js';

package/dist/utils/Interface/FormInterface.d.ts

@@ -10,7 +10,7 @@ export interface TextFieldInputProps {
 export interface FormSectionPropsItem {
     name: string;
     label: string;
-    inputType: 'text' | 'password' | 'number' | 'select' | 'autocomplete-select' | 'autocomplete-multi-select' | 'datepicker' | 'multiselect' | 'select-v2' | 'basic-select' | 'decimal' | 'alpha-numerical' | 'yearpicker' | 'dateRangePicker' | 'monthpicker' | 'multiselect' | 'file' | 'multifile' | 'multifile-with-preview' | 'textarea' | 'phoneNumber' | 'pincode' | 'email' | 'toggleSwitch' | 'rich-text-editor' | 'multiEmail' | 'timepicker' | 'checkbox-group' | 'radio-group' | 'checkbox' | 'custom' | '';
+    inputType: 'text' | 'password' | 'number' | 'select' | 'autocomplete-select' | 'autocomplete-multi-select' | 'datepicker' | 'multiselect' | 'select-v2' | 'basic-select' | 'decimal' | 'alpha-numerical' | 'yearpicker' | 'dateRangePicker' | 'monthpicker' | 'multiselect' | 'file' | 'multifile' | 'multifile-with-preview' | 'textarea' | 'phoneNumber' | 'pincode' | 'email' | 'toggleSwitch' | 'rich-text-editor' | 'multiEmail' | 'timepicker' | 'checkbox-group' | 'radio-group' | 'checkbox' | 'custom' | 'input-select' | '';
     options?: OptionsProps[];
     required?: boolean;
     errorMessage?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tp-react-elements-dev",
-  "version": "1.12.33",
+  "version": "1.12.35",
   "private": false,
   "type": "module",
   "description": "React form components library built with React Hook Form and Yup",