tp-react-elements 1.0.0

package/dist/components/FormComponents/PasswordField/PasswordField.d.ts

@@ -0,0 +1,25 @@
+import { FormRenderProps, VariantProps } from '../../../utils';
+/**
+ * PasswordField Component
+ *
+ * A password input field component that integrates with react-hook-form for form state management.
+ * Includes a visibility toggle button to show/hide the password.
+ *
+ * @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
+ * <PasswordField props={formRenderProps} variant="outlined" />
+ */
+declare const PasswordField: ({ props, variant }: {
+    props: FormRenderProps;
+    variant: VariantProps;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Export the PasswordField component for use in the form renderer
+ * This component is used for password input types
+ */
+export default PasswordField;

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

@@ -0,0 +1,91 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
+import { Box, FormControl, TextField, IconButton } from '@mui/material';
+import { useState } from 'react';
+import { Controller } from 'react-hook-form';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import 'dayjs';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+
+/**
+ * PasswordField Component
+ *
+ * A password input field component that integrates with react-hook-form for form state management.
+ * Includes a visibility toggle button to show/hide the password.
+ *
+ * @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
+ * <PasswordField props={formRenderProps} variant="outlined" />
+ */
+const PasswordField = ({ props, variant }) => {
+    /**
+     * State to track password visibility
+     */
+    const [showPassword, setShowPassword] = useState(false);
+    /**
+     * Toggles password visibility between plain text and hidden
+     */
+    const handleTogglePasswordVisibility = () => {
+        setShowPassword((prevShowPassword) => !prevShowPassword);
+    };
+    /**
+     * 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 ? ' *' : ''}` : '';
+    /**
+     * Determines if the field has an error based on form validation
+     */
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError;
+    /**
+     * Renders the password field component with visibility toggle
+     */
+    return (jsx(Box, { position: 'relative', children: jsx(FormControl, { fullWidth: true, children: jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [jsxs(Box, { sx: { position: 'relative' }, children: [renderLabel(variant, props), jsx(TextField, { size: "small", error: isShowBorderError, type: showPassword ? 'text' : 'password', autoComplete: props.item?.InputProps?.autoComplete || 'off', placeholder: props.item.placeholder || '', ...field, label: label, sx: {
+                                        width: '100%',
+                                        '& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy': {
+                                            top: '-8px',
+                                        },
+                                    }, inputProps: {
+                                        maxLength: props.item.maxLength || 100,
+                                        /**
+                                         * Handles input events
+                                         * Calls custom onInputProps handler if provided
+                                         *
+                                         * @param {any} e - The input event object
+                                         */
+                                        onInput: (e) => {
+                                            props.item.onInputProps && props.item.onInputProps(e);
+                                        },
+                                        /**
+                                         * Handles paste events
+                                         * Prevents paste action if configured
+                                         *
+                                         * @param {React.ClipboardEvent} e - The paste event object
+                                         */
+                                        onPaste: (e) => {
+                                            if (props.item?.doNotAllowPaste) {
+                                                e.preventDefault();
+                                            }
+                                        },
+                                    }, value: field.value || null, disabled: props.item.disable }), jsx(IconButton, { sx: {
+                                        position: 'absolute',
+                                        right: '14px',
+                                        top: variant === 'standard' ? '70%' : '50%',
+                                        transform: 'translateY(-50%)',
+                                        width: '25px',
+                                    }, "aria-label": showPassword ? 'Hide password' : 'Show password', "aria-pressed": showPassword, onClick: handleTogglePasswordVisibility, edge: "end", children: showPassword ? (jsx(Visibility, { sx: {
+                                            fontSize: '12px',
+                                            position: 'absolute',
+                                        } })) : (jsx(VisibilityOff, { sx: {
+                                            fontSize: '12px',
+                                            position: 'absolute',
+                                        } })) })] }), jsx(FormBottomField, { ...props })] })) }) }) }, props.item.name));
+};
+
+export { PasswordField as default };

package/dist/components/FormComponents/RichTextEditor/RichTextEditor.d.ts

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

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

@@ -0,0 +1,109 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import { useWatch } from 'react-hook-form';
+import { getJoditEditor } from './jodit.index.esm.js';
+
+const RichTextEditor = ({ props }) => {
+    const editor = useRef(null);
+    const [content, setContent] = useState('');
+    const [JoditEditor, setJoditEditor] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const value = useWatch({ control: props.control, name: props.item.name });
+    useEffect(() => {
+        const loadJoditDependencies = async () => {
+            try {
+                const joditEditorModule = await getJoditEditor();
+                // Extract the default export if present
+                const Editor = joditEditorModule?.default
+                    ? joditEditorModule.default
+                    : joditEditorModule;
+                setJoditEditor(() => Editor);
+                setIsLoading(false);
+            }
+            catch (error) {
+                console.error('Failed to load Jodit dependencies:', error);
+            }
+        };
+        loadJoditDependencies();
+    }, []);
+    const config = {
+        readonly: false,
+        placeholder: props.item.placeholder || 'Start typing...',
+        statusbar: false,
+        removeButtons: props.item.removeButtons,
+        style: { 'font-family': 'Arial' },
+        controls: {
+            font: { list: { Arial: 'Arial', ...props.item?.FontFamily } },
+            fontsize: {
+                list: props.item.Fonts || [
+                    8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24,
+                    25, 26, 27, 28, 29, 30,
+                ],
+            },
+        },
+        defaultFont: 'Arial',
+        defaultFontSize: '11px',
+        askBeforePasteFromWord: false,
+        askBeforePasteHTML: false,
+        hotkeys: {
+            redo: 'ctrl+z',
+            undo: 'ctrl+y,ctrl+shift+z',
+            indent: 'ctrl+]',
+            outdent: 'ctrl+[',
+            bold: 'ctrl+b',
+            italic: 'ctrl+i',
+            removeFormat: 'ctrl+shift+m',
+            insertOrderedList: 'ctrl+shift+7',
+            insertUnorderedList: 'ctrl+shift+8',
+            openSearchDialog: 'ctrl+f',
+            openReplaceDialog: 'ctrl+r',
+        },
+        events: {
+            processPaste: (_event, html) => {
+                const instance = editor.current;
+                if (instance?.editor) {
+                    const joditEditor = instance.editor;
+                    joditEditor.selection?.insertHTML?.(html);
+                    joditEditor.tempContent = joditEditor.getHTML?.();
+                }
+            },
+            afterPaste: () => {
+                const instance = editor.current;
+                if (instance?.editor) {
+                    const joditEditor = instance.editor;
+                    const el = document.createElement('div');
+                    el.innerHTML = joditEditor.tempContent
+                        ? joditEditor.tempContent
+                        : joditEditor.getHTML?.();
+                    joditEditor.setHTML?.(el.innerHTML);
+                    joditEditor.tempContent = null;
+                }
+            },
+        },
+        ...props.item.sx,
+    };
+    useEffect(() => {
+        setContent(value);
+    }, [value]);
+    const handleBlur = (newContent) => {
+        if (newContent === '<p><br></p>') {
+            setContent(newContent);
+            props.setValue(props.item.name, '');
+        }
+        else {
+            setContent(newContent);
+            props.setValue(props.item.name, newContent);
+        }
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        props.item.onBlurFn && props.item.onBlurFn(newContent);
+    };
+    const handleChange = (newContent) => {
+        props.item.onChangeFn && props.item.onChangeFn(newContent);
+    };
+    if (isLoading || !JoditEditor) {
+        return jsx("div", { children: "Loading editor..." });
+    }
+    return (jsx(JoditEditor, { ref: editor, value: content, config: config, onBlur: handleBlur, onChange: handleChange }));
+};
+
+export { RichTextEditor as default };

package/dist/components/FormComponents/RichTextEditor/RichTextEditorWrapper.d.ts

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

package/dist/components/FormComponents/RichTextEditor/RichTextEditorWrapper.esm.js

@@ -0,0 +1,12 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Controller } from 'react-hook-form';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import RichTextEditor from './RichTextEditor.esm.js';
+import 'dayjs';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+
+const RichTextEditorWrapper = ({ props, variant, }) => {
+    return (jsx(Controller, { control: props.control, name: props.item.name, render: () => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(RichTextEditor, { props: props }), jsx(FormBottomField, { ...props })] })) }, props.item.name));
+};
+
+export { RichTextEditorWrapper as default };

package/dist/components/FormComponents/RichTextEditor/jodit.index.d.ts

@@ -0,0 +1,13 @@
+export interface IJoditEditorProps {
+    value?: string;
+    config?: any;
+    tabIndex?: any;
+    onBlur?: (content: string) => void;
+    onChange?: (content: string) => void;
+}
+declare const getJoditEditor: () => Promise<any>;
+declare const getJodit: () => Promise<null>;
+declare const JoditEditor: any;
+export default JoditEditor;
+export { getJoditEditor, getJodit };
+export declare const Jodit: any;

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

@@ -0,0 +1,23 @@
+// import { Jodit } from 'jodit/esm/index';
+// import * as React from 'react';
+// Declare module augmentation for TypeScript
+// Removing module augmentation since we are not importing 'jodit' directly here
+// Create a dynamic import function to load Jodit only when needed
+let JoditEditorPromise = null;
+const getJoditEditor = async () => {
+    if (!JoditEditorPromise) {
+        JoditEditorPromise = import('jodit-react').then((module) => module.default || module);
+    }
+    return JoditEditorPromise;
+};
+// Export a proxy object that will load the real module on demand
+new Proxy({}, {
+    get: function () {
+        throw new Error('JoditEditor must be dynamically imported before use');
+    },
+    apply: function () {
+        throw new Error('JoditEditor must be dynamically imported before use');
+    },
+});
+
+export { getJoditEditor };

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

@@ -0,0 +1,2 @@
+declare const MultiSelect: () => import("react/jsx-runtime").JSX.Element;
+export default MultiSelect;

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,238 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Checkbox, Autocomplete, TextField, Box, Tooltip, Chip } from '@mui/material';
+import { useState, useRef, useMemo, useCallback } 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';
+
+//region old code
+// const MultiSelectAutocomplete = ({
+//   props,
+//   variant,
+// }: {
+//   props: FormRenderProps;
+//   variant: VariantProps;
+// }) => {
+//   const isError = !!props.errors?.[props.item.name];
+//   const watchedValue = useWatch({ control: props.control, name: props.item.name });
+//   const normalizeToStringArray = (value: unknown): string[] => {
+//     if (Array.isArray(value)) {
+//       return value.map((v) => String(v));
+//     }
+//     if (typeof value === 'string') {
+//       return value
+//         .split(',')
+//         .map((v) => v.trim())
+//         .filter((v) => v.length > 0);
+//     }
+//     if (value == null) return [];
+//     return [String(value)];
+//   };
+//   const normalizedSelectedValues = normalizeToStringArray(watchedValue);
+//   const isShowBorderError = isError && normalizedSelectedValues.length === 0;
+//   const options: OptionItem[] = (props.item.options || []) as OptionItem[];
+//   const selectedOptions: OptionItem[] = useMemo(() => {
+//     const valueSet = new Set(normalizedSelectedValues.map((v) => String(v)));
+//     return options.filter((opt) => valueSet.has(String(opt.value)));
+//   }, [normalizedSelectedValues, options]);
+//   return (
+//     <Controller
+//       control={props.control}
+//       name={props.item.name}
+//       key={props.item.name}
+//       render={({ field }) => (
+//         <>
+//           {renderLabel(variant, props)}
+//           <Autocomplete
+//             {...field}
+//             multiple
+//             disableCloseOnSelect
+//             id={`${props.item.name}-autocomplete-multi`}
+//             options={options}
+//             value={selectedOptions}
+//             getOptionLabel={(option) => String(option.label)}
+//             isOptionEqualToValue={(option, value) => String(option.value) === String(value.value)}
+//             onChange={(_, newValue) => {
+//               const joined = (newValue || []).map((o: OptionItem) => String(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: any) => {
+//               props?.item?.onBlurFn && props?.item?.onBlurFn(e);
+//             }}
+//             size="small"
+//             renderOption={(renderProps, option, { selected }) => (
+//               <li {...renderProps} style={{ fontSize: '11px' }}>
+//                 <Checkbox
+//                   checked={selected}
+//                   size="small"
+//                   sx={{ mr: 1, p: '2px' }}
+//                 />
+//                 {option.label}
+//               </li>
+//             )}
+//             renderTags={(tagValue) => (
+//               tagValue.length ? <span>{tagValue.map((o: OptionItem) => String(o.label)).join(' , ')}</span> : 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: React.SyntheticEvent) => {
+//                 const listboxNode = event.currentTarget as HTMLElement;
+//                 if (listboxNode.scrollTop + listboxNode.clientHeight === listboxNode.scrollHeight) {
+//                   // Infinite scroll hook can be wired here
+//                 }
+//               },
+//             }}
+//             disabled={props.item.disable}
+//             slotProps={{
+//               popper: {
+//                 sx: {
+//                   zIndex: 1401,
+//                 },
+//               },
+//               listbox: {
+//                 sx: {
+//                   fontSize: '11px',
+//                 },
+//               },
+//             }}
+//             renderInput={(params) => (
+//               <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,
+//                 }}
+//               />
+//             )}
+//           />
+//           <FormBottomField {...props} />
+//         </>
+//       )}
+//     />
+//   );
+// };
+//endregion
+const MultiSelectAutocomplete = ({ props, variant, }) => {
+    const isError = !!props.errors?.[props.item.name];
+    const watchedValue = useWatch({ control: props.control, name: props.item.name });
+    const [open, setOpen] = useState(false);
+    const tagsContainerRef = useRef(null);
+    const normalizeToStringArray = (value) => {
+        if (Array.isArray(value)) {
+            // already array of primitives/strings
+            return value.map((v) => String(v));
+        }
+        if (typeof value === 'string') {
+            // if backend provided CSV string, convert to array
+            return value
+                .split(',')
+                .map((v) => v.trim())
+                .filter((v) => v.length > 0);
+        }
+        if (value == null)
+            return [];
+        // for any other types, coerce to single-element array
+        return [String(value)];
+    };
+    const normalizedSelectedValues = normalizeToStringArray(watchedValue);
+    const isShowBorderError = isError && normalizedSelectedValues.length === 0;
+    const options = useMemo(() => (props.item.options || []), [props.item.options]);
+    const selectedOptions = useMemo(() => {
+        const valueSet = new Set(normalizedSelectedValues.map((v) => String(v)));
+        return options.filter((opt) => valueSet.has(String(opt.value)));
+    }, [normalizedSelectedValues, options]);
+    // Derived overflow flag without extra renders
+    const isOverflowing = (selectedOptions || []).length > 2;
+    // Stable callbacks to avoid re-renders
+    const getOptionLabelCb = useCallback((option) => String(option.label), []);
+    const isOptionEqualCb = useCallback((option, value) => String(option.value) === String(value.value), []);
+    const renderOptionCb = useCallback((renderProps, option, state) => (jsxs("li", { ...renderProps, style: { fontSize: '11px' }, children: [jsx(Checkbox, { checked: state.selected, size: "small", sx: { mr: 1, p: '2px' } }), option.label] })), []);
+    const chipSx = useMemo(() => ({ mr: 0.5, height: 20, fontSize: '10px', borderRadius: '10px', '& .MuiChip-label': { px: 0.75, py: 0 } }), []);
+    const selectedTooltip = useMemo(() => selectedOptions.map(o => String(o.label)).join(', '), [selectedOptions]);
+    const handleChange = useCallback((_, newValue) => {
+        const values = Array.isArray(newValue)
+            ? newValue.map((o) => String(o.value))
+            : [];
+        // Minimize work during selection for snappier UX
+        props.setValue(props.item.name, values, { shouldValidate: false, shouldDirty: true });
+        props?.item?.onChangeFn && props?.item?.onChangeFn(values.join(','));
+        props?.clearErrors && props?.clearErrors(props?.item?.name);
+    }, [props]);
+    const handleBlur = useCallback((e) => {
+        props?.item?.onBlurFn && props?.item?.onBlurFn(e);
+    }, [props]);
+    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field: { ref, onBlur: fieldOnBlur } }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Autocomplete, { ref: ref, open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), multiple: true, disableCloseOnSelect: true, id: `${props.item.name}-autocomplete-multi`, options: options, value: selectedOptions, getOptionLabel: getOptionLabelCb, isOptionEqualToValue: isOptionEqualCb, onChange: handleChange, onBlur: (e) => {
+                        fieldOnBlur();
+                        handleBlur(e);
+                    }, size: "small", disablePortal: false, autoHighlight: true, selectOnFocus: true, clearOnBlur: false, renderTags: (tagValue, getTagProps) => (jsx(Box, { ref: tagsContainerRef, sx: {
+                            '& :hover': {
+                                cursor: 'pointer',
+                            },
+                            display: 'flex', flexWrap: 'nowrap', overflow: 'hidden', alignItems: 'center'
+                        }, children: isOverflowing ? (jsx(Tooltip, { title: selectedTooltip, placement: "top", children: jsx(Chip, { size: "small", label: `${tagValue.length} selected`, onClick: () => setOpen(true), clickable: true, sx: chipSx }) })) : (tagValue.map((option, index) => (jsx(Tooltip, { title: String(option?.label ?? option), placement: "top", children: jsx(Chip, { ...getTagProps({ index }), size: "small", label: String(option?.label ?? option), sx: chipSx }) }, String(option?.value ?? option?.label ?? index))))) })), renderOption: renderOptionCb, sx: {
+                        '& .MuiAutocomplete-input': {
+                            padding: '0px 0px 0px 5px !important',
+                        },
+                        '& .MuiAutocomplete-inputRoot': {
+                            flexWrap: 'nowrap', // keep search beside chip
+                            alignItems: 'center'
+                        },
+                        '& .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: 20000,
+                            },
+                        },
+                        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/components/FormComponents/Select/MultiSelectv1.d.ts

@@ -0,0 +1,5 @@
+import { FormRenderProps, VariantProps } from '../../../utils';
+export default function MultiSelectV1({ props, variant, }: {
+    props: FormRenderProps;
+    variant: VariantProps;
+}): import("react/jsx-runtime").JSX.Element;