tp-react-elements-dev 1.12.25 → 1.12.26

package/dist/components/Form/FormRender.esm.js

@@ -9,6 +9,7 @@ import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaF
 import FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
 import PasswordField from '../FormComponents/PasswordField/PasswordField.esm.js';
 import SingleSelect from '../FormComponents/Select/SingleSelect.esm.js';
+import MultiSelectAutocomplete from '../FormComponents/Select/MultiSelectAutocomplete.esm.js';
 import SingleSelectNonAutoComplete from '../FormComponents/Select/SingleSelectNonAutoComplete.esm.js';
 import FormActiveSwitch from './FormActiveSwitch.esm.js';
 
@@ -48,7 +49,8 @@ const RenderForm = (props) => {
      * This is the core mapping logic that determines which component to render
      * based on the inputType property of the form item
      */
-    switch (props.item?.inputType) {
+    const inputType = props.item?.inputType;
+    switch (inputType) {
         /**
          * Text input cases
          * These cases handle standard text input, email input, and multi-email input
@@ -68,6 +70,9 @@ const RenderForm = (props) => {
         case 'select':
         case 'autocomplete-select': // new alias
             return jsx(SingleSelect, { props: props, variant: variant });
+        // Autocomplete multi-select with checkboxes
+        case 'autocomplete-multi-select':
+            return jsx(MultiSelectAutocomplete, { props: props, variant: variant });
         // Dropdown select (non auto-complete)
         case 'select-v2':
         case 'basic-select': // new alias

package/dist/components/FormComponents/Select/MultiSelectAutocomplete.d.ts

@@ -0,0 +1,6 @@
+import { FormRenderProps, VariantProps } from '../../../utils';
+declare const MultiSelectAutocomplete: ({ props, variant, }: {
+    props: FormRenderProps;
+    variant: VariantProps;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MultiSelectAutocomplete;

package/dist/components/FormComponents/Select/MultiSelectAutocomplete.esm.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Autocomplete, TextField, Checkbox } from '@mui/material';
+import { useMemo } from 'react';
+import { useWatch, Controller } from 'react-hook-form';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import 'dayjs';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+
+const MultiSelectAutocomplete = ({ props, variant, }) => {
+    const isError = !!props.errors?.[props.item.name];
+    const watchedValue = useWatch({ control: props.control, name: props.item.name });
+    const isShowBorderError = isError && (!watchedValue || watchedValue.length === 0);
+    const options = (props.item.options || []);
+    const selectedOptions = useMemo(() => {
+        if (!watchedValue)
+            return [];
+        const values = typeof watchedValue === 'string' ? watchedValue.split(',') : [];
+        const valueSet = new Set(values);
+        return options.filter((opt) => valueSet.has(String(opt.value)));
+    }, [watchedValue, options]);
+    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Autocomplete, { ...field, multiple: true, disableCloseOnSelect: true, id: `${props.item.name}-autocomplete-multi`, options: options, value: selectedOptions, getOptionLabel: (option) => String(option.label), isOptionEqualToValue: (option, value) => option.value === value.value, onChange: (_, newValue) => {
+                        const joined = (newValue || []).map((o) => o.value).join(',');
+                        props.setValue(props.item.name, joined);
+                        props?.item?.onChangeFn && props?.item?.onChangeFn(joined);
+                        props?.clearErrors && props?.clearErrors(props?.item?.name);
+                    }, onBlur: (e) => {
+                        props?.item?.onBlurFn && props?.item?.onBlurFn(e);
+                    }, size: "small", renderOption: (renderProps, option, { selected }) => (jsxs("li", { ...renderProps, style: { fontSize: '11px' }, children: [jsx(Checkbox, { checked: selected, size: "small", sx: { mr: 1, p: '2px' } }), option.label] })), renderTags: (tagValue) => (tagValue.length ? jsx("span", { children: tagValue.map((o) => String(o.label)).join(' , ') }) : null), sx: {
+                        '& .MuiAutocomplete-input': {
+                            padding: '0px 0px 0px 5px !important',
+                        },
+                        '& .css-erkti9-MuiFormLabel-root-MuiInputLabel-root,.css-8edmr2-MuiFormLabel-root-MuiInputLabel-root': {
+                            top: '-3px',
+                        },
+                        '& .MuiAutocomplete-option': {
+                            fontSize: '11px',
+                            zIndex: 2000,
+                        },
+                        ...props.item.sx,
+                    }, ListboxProps: {
+                        onScroll: (event) => {
+                            const listboxNode = event.currentTarget;
+                            if (listboxNode.scrollTop + listboxNode.clientHeight === listboxNode.scrollHeight) ;
+                        },
+                    }, disabled: props.item.disable, slotProps: {
+                        popper: {
+                            sx: {
+                                zIndex: 1401,
+                            },
+                        },
+                        listbox: {
+                            sx: {
+                                fontSize: '11px',
+                            },
+                        },
+                    }, renderInput: (params) => (jsx(TextField, { ...params, placeholder: props.item.placeholder, error: isShowBorderError, label: variant !== 'standard'
+                            ? `${props.item.label}${props.item.required ? ' *' : ''}`
+                            : '', inputProps: {
+                            ...params.inputProps,
+                            'aria-labelledby': `${props.item.name}-label`,
+                            'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
+                            'aria-required': props.item.required ? true : undefined,
+                        } })) }), jsx(FormBottomField, { ...props })] })) }, props.item.name));
+};
+
+export { MultiSelectAutocomplete as default };

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' | 'datepicker' | 'multiselect' | 'select-v2' | 'basic-select' | 'decimal' | 'alpha-numerical' | 'yearpicker' | 'dateRangePicker' | 'monthpicker' | 'multiselect' | 'file' | 'multifile' | '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' | 'textarea' | 'phoneNumber' | 'pincode' | 'email' | 'toggleSwitch' | 'rich-text-editor' | 'multiEmail' | 'timepicker' | 'checkbox-group' | 'radio-group' | 'checkbox' | 'custom' | '';
     options?: OptionsProps[];
     required?: boolean;
     errorMessage?: string;

package/package.json

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