tp-react-elements 3.0.10 → 3.0.11

package/dist/_virtual/index.esm11.js

@@ -1,3 +1,3 @@
-var DayCell = {};
+var InputRangeField = {};
 
-export { DayCell as __exports };
+export { InputRangeField as __exports };

package/dist/_virtual/index.esm12.js

@@ -1,3 +1,3 @@
-var InputRangeField = {};
+var DayCell = {};
 
-export { InputRangeField as __exports };
+export { DayCell as __exports };

package/dist/_virtual/index.esm6.js

@@ -1,3 +1,3 @@
-var Calendar = {};
+var DefinedRange = {};
 
-export { Calendar as __exports };
+export { DefinedRange as __exports };

package/dist/_virtual/index.esm7.js

@@ -1,3 +1,3 @@
-var DefinedRange = {};
+var Calendar = {};
 
-export { DefinedRange as __exports };
+export { Calendar as __exports };

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

@@ -2,6 +2,12 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import require$$0__default, { lazy, Suspense } from 'react';
 import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
 import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
+import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
+import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
+import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
+import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
+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';
@@ -12,12 +18,6 @@ import DateRangePickerComponent from '../DateRangePicker/DateRangePicker.esm.js'
 import RichTextEditorWrapper from '../FormComponents/RichTextEditor/RichTextEditorWrapper.esm.js';
 import SingleSelectSearchApi from '../FormComponents/Select/SingleSelectSearchApi.esm.js';
 import DatetimepickerWrapper from '../FormComponents/DatePicker/DatetimepickerWrapper.esm.js';
-import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
-import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
-import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
-import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
-import PasswordField from '../FormComponents/PasswordField/PasswordField.esm.js';
-import FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
 
 // Lazy-loaded heavy components
 // const RichTextEditorWrapper = lazy(() =>

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

@@ -11,9 +11,30 @@ import { useWatch } from 'react-hook-form';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
 import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+import { useOptionalProjectTheme } from '../../../auth/authContext.esm.js';
 
 const ITEM_HEIGHT = 36;
 const ITEM_PADDING_TOP = 2;
+/**
+ * Base shape shared by both states of the themed option glyph — only the border/background
+ * (checked vs unchecked) differ, passed in by the caller via `Checkbox`'s own `icon` and
+ * `checkedIcon` props. Kept as plain style objects (not a component) so the existing
+ * `<Checkbox>` stays the single source of truth for check state/interaction; this only
+ * reskins what it renders.
+ */
+const themedGlyphSx = {
+    width: 15,
+    height: 15,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: 10,
+    fontWeight: 800,
+    color: '#fff',
+    border: '1.5px solid',
+    lineHeight: 1,
+};
 const extractValuesToArray = (inputString) => {
     if (!inputString)
         return [];
@@ -23,6 +44,7 @@ function MultiSelectV1({ props, variant, }) {
     const [searchText, setSearchText] = useState('');
     const options = props.item?.options || [];
     const textfieldRef = useRef(null);
+    const multiSelectTheme = useOptionalProjectTheme()?.Styles?.Component?.TPMultiSelect;
     // Ref to capture the width of the Select container
     const containerRef = useRef(null);
     const fieldValue = useWatch({ control: props.control, name: props.item.name });
@@ -111,15 +133,29 @@ function MultiSelectV1({ props, variant, }) {
                                     whiteSpace: 'normal',
                                     wordBreak: 'break-all',
                                     alignItems: 'center',
-                                    py: 0.5,
-                                    px: 2,
+                                    py: multiSelectTheme ? 1 : 0.5,
+                                    px: multiSelectTheme ? 1.25 : 2,
                                     minHeight: ITEM_HEIGHT,
-                                }, children: [jsx(Checkbox, { checked: isChecked, size: "small", sx: { p: 1, mr: 1, pointerEvents: 'none' } }), jsx(ListItemText, { className: 'Mui-multi-select-option', primary: option.label, primaryTypographyProps: {
-                                            fontSize: props.item?.optionFontSize || '13px',
+                                    ...(multiSelectTheme && {
+                                        mx: 0.5,
+                                        borderRadius: '6px',
+                                        '&.Mui-selected, &.Mui-selected:hover': {
+                                            backgroundColor: multiSelectTheme.selectedRowBg ?? '#F4F8FC',
+                                        },
+                                    }),
+                                }, children: [jsx(Checkbox, { checked: isChecked, size: "small", sx: multiSelectTheme ? { p: 0, mr: 1.25, pointerEvents: 'none' } : { p: 1, mr: 1, pointerEvents: 'none' }, ...(multiSelectTheme && {
+                                            icon: (jsx(Box, { component: "span", sx: { ...themedGlyphSx, borderColor: multiSelectTheme.uncheckedBorderColor ?? '#C9D3E0', background: '#fff' } })),
+                                            checkedIcon: (jsx(Box, { component: "span", sx: { ...themedGlyphSx, borderColor: multiSelectTheme.checkedColor ?? '#073B6D', background: multiSelectTheme.checkedColor ?? '#073B6D' }, children: "\u2713" })),
+                                        }) }), jsx(ListItemText, { className: 'Mui-multi-select-option', primary: option.label, primaryTypographyProps: {
+                                            fontSize: multiSelectTheme ? 12.5 : (props.item?.optionFontSize || '13px'),
                                             sx: {
                                                 whiteSpace: 'normal',
                                                 wordBreak: 'break-all',
-                                                lineHeight: '1.2'
+                                                lineHeight: multiSelectTheme ? 1.35 : '1.2',
+                                                ...(multiSelectTheme && {
+                                                    fontWeight: 600,
+                                                    color: isChecked ? (multiSelectTheme.checkedColor ?? '#073B6D') : '#42536B',
+                                                }),
                                             }
                                         } })] }, option.value));
                         })) : (jsx(MenuItem, { disabled: true, children: "No data Found" }))] }), jsx(FormBottomField, { ...props })] }) }, props.item.name));

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

@@ -1,3 +1,8 @@
+export { default as FormNumberField } from './FormNumberField/FormNumberField.esm.js';
+export { default as FormNumberFieldDecimal } from './FormNumberField/FormNumberFieldDecimal.esm.js';
+export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
+export { default as FormTextField } from './FormTextField/FormTextField.esm.js';
+export { default as PasswordField } from './PasswordField/PasswordField.esm.js';
 export { default as FormCheckBox } from './FormCheckBox/FormCheckBox.esm.js';
 export { default as SingleSelect } from './Select/SingleSelect.esm.js';
 export { default as SingleSelectNonAutoComplete } from './Select/SingleSelectNonAutoComplete.esm.js';
@@ -6,20 +11,32 @@ export { default as MultiSelectV1 } from './Select/MultiSelectv1.esm.js';
 export { default as MultiSelectTable } from './Select/MultiSelectTable.esm.js';
 export { default as SearchableSelect } from './Select/SearchableSelect.esm.js';
 export { default as FormCheckBoxGroup } from './FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
+export { default as FormRadioGroup } from './FormRadioGroup/FormRadioGroup.esm.js';
 export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';
+export { default as Monthpickerrender } from './DatePicker/Monthpickerrender.esm.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@mui/material';
+import '@mui/icons-material/CalendarToday';
+import '@mui/icons-material/ChevronLeft';
+import '@mui/icons-material/ChevronRight';
+import 'react-hook-form';
 export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
-export { default as FormErrorField } from './FormErrorField/FormErrorField.esm.js';
-export { default as FormNumberField } from './FormNumberField/FormNumberField.esm.js';
-export { default as FormNumberFieldDecimal } from './FormNumberField/FormNumberFieldDecimal.esm.js';
-export { default as FormRadioGroup } from './FormRadioGroup/FormRadioGroup.esm.js';
+import 'dayjs';
+export { default as YearPickerField } from './YearPickerField/YearPickerField.esm.js';
+export { default as TimePicker } from './TimePicker/TimePicker.esm.js';
 export { default as FormRenderFileUpload } from './FileUpload/FormRenderFileUpload.esm.js';
 export { default as FormRenderMultiFileUpload } from './FileUpload/FormRenderMultiFileUpload.esm.js';
-export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
-export { default as FormTextField } from './FormTextField/FormTextField.esm.js';
+import '@mui/icons-material/Visibility';
+import '@mui/icons-material/Close';
+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 FormErrorField } from './FormErrorField/FormErrorField.esm.js';
 export { default as HelperText } from './HelperText/HelperText.esm.js';
-export { default as Monthpickerrender } from './DatePicker/Monthpickerrender.esm.js';
-export { default as PasswordField } from './PasswordField/PasswordField.esm.js';
 export { default as RichTextEditor } from './RichTextEditor/RichTextEditor.esm.js';
 export { default as RichTextEditorWrapper } from './RichTextEditor/RichTextEditorWrapper.esm.js';
-export { default as TimePicker } from './TimePicker/TimePicker.esm.js';
-export { default as YearPickerField } from './YearPickerField/YearPickerField.esm.js';

package/dist/node_modules/react-date-range/dist/components/Calendar/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as Calendar } from '../../../../../_virtual/index.esm6.js';
+import { __exports as Calendar } from '../../../../../_virtual/index.esm7.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDayCell } from '../DayCell/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DayCell/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DayCell } from '../../../../../_virtual/index.esm11.js';
+import { __exports as DayCell } from '../../../../../_virtual/index.esm12.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireClassnames } from '../../../../classnames/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DefinedRange/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DefinedRange } from '../../../../../_virtual/index.esm7.js';
+import { __exports as DefinedRange } from '../../../../../_virtual/index.esm6.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireStyles } from '../../styles.esm.js';

package/dist/node_modules/react-date-range/dist/components/InputRangeField/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as InputRangeField } from '../../../../../_virtual/index.esm12.js';
+import { __exports as InputRangeField } from '../../../../../_virtual/index.esm11.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 

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

@@ -21,11 +21,24 @@ export interface ProjectComponentTPToggleSwitch {
 export interface ProjectComponentTPRadioGroup {
     checkedColor?: string;
 }
+/**
+ * Optional row/checkbox styling for `multiselect` (`MultiSelectV1`)'s dropdown options. Omitted
+ * entirely = the existing stock MUI `Checkbox` + default `MenuItem` selected-row tint are
+ * unchanged for every current consumer. Providing this swaps the checkbox for a compact
+ * rounded-square box and restyles the option row (padding/radius/selected background/text
+ * weight) to match a flatter, more custom design language.
+ */
+export interface ProjectComponentTPMultiSelect {
+    checkedColor?: string;
+    uncheckedBorderColor?: string;
+    selectedRowBg?: string;
+}
 export interface ProjectComponentStyles {
     TPButton: ProjectComponentTPButton[];
     TPButtonCommonSx: SxProps<Theme>;
     TPToggleSwitch?: ProjectComponentTPToggleSwitch;
     TPRadioGroup?: ProjectComponentTPRadioGroup;
+    TPMultiSelect?: ProjectComponentTPMultiSelect;
 }
 export interface ProjectThemeStyles {
     Component: ProjectComponentStyles;

package/package.json

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