tp-react-elements 3.0.10 → 3.0.12

package/dist/_virtual/index.esm12.js

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

package/dist/_virtual/index.esm13.js

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

package/dist/_virtual/index.esm5.js

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

package/dist/_virtual/index.esm6.js

@@ -1,3 +1,3 @@
-var Calendar = {};
+var DateRangePicker = {};
 
-export { Calendar as __exports };
+export { DateRangePicker 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

@@ -1,7 +1,5 @@
 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 SingleSelect from '../FormComponents/Select/SingleSelect.esm.js';
 import MultiSelectAutocomplete from '../FormComponents/Select/MultiSelectAutocomplete.esm.js';
 import SingleSelectNonAutoComplete from '../FormComponents/Select/SingleSelectNonAutoComplete.esm.js';
@@ -13,7 +11,9 @@ import RichTextEditorWrapper from '../FormComponents/RichTextEditor/RichTextEdit
 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 FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
 import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
+import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.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';

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

@@ -57,28 +57,6 @@ const RichTextEditor = ({ props }) => {
             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,
     }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps

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,13 +1,13 @@
-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';
 export { default as SingleSelectSearchApi } from './Select/SingleSelectSearchApi.esm.js';
 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 DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';
 export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
+export { default as FormCheckBox } from './FormCheckBox/FormCheckBox.esm.js';
+export { default as FormCheckBoxGroup } from './FormCheckBoxGroup/FormCheckBoxGroup.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';

package/dist/components/PaginatedGrid/GenericPaginatedGrid.esm.js

@@ -76,8 +76,27 @@ const extractSxColors = (sx) => {
     }
     return { background, text };
 };
-/** Converts a `#RRGGBB` hex string to the 8-char ARGB xlsx-js-style expects. Returns `undefined` for anything else. */
-const hexToArgb = (hex) => hex?.startsWith('#') ? 'FF' + hex.slice(1).toUpperCase().padEnd(6, '0') : undefined;
+/**
+ * Converts a hex colour string to the 8-char ARGB `xlsx-js-style` expects.
+ * Handles both `#RRGGBB` and CSS shorthand `#RGB` (each digit doubled, e.g.
+ * `#fff` → `ffffff`) — shorthand was previously padded with trailing zeros
+ * instead of expanded, silently turning `#fff` into a bright yellow
+ * (`FFFFF000`) instead of white. An 8-digit `#RRGGBBAA` has its alpha
+ * channel dropped (this export always renders fully opaque). Returns
+ * `undefined` for anything else (non-hex/theme-token colours, etc.).
+ */
+const hexToArgb = (hex) => {
+    if (!hex?.startsWith('#'))
+        return undefined;
+    let digits = hex.slice(1);
+    if (digits.length === 3 || digits.length === 4) {
+        digits = digits.slice(0, 3).split('').map((c) => c + c).join('');
+    }
+    else {
+        digits = digits.slice(0, 6);
+    }
+    return 'FF' + digits.toUpperCase().padEnd(6, '0');
+};
 /**
  * Header overrides applied via GlobalStyles (literal prop values).
  * MRT sets `backgroundColor: 'inherit'` and fixed density padding — must use !important.

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/DateInput/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateInput } from '../../../../../_virtual/index.esm13.js';
+import { __exports as DateInput } 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/DateRangePicker/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm5.js';
+import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm6.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDateRange } from '../DateRange/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.esm5.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.esm13.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.12",
   "private": false,
   "type": "module",
   "description": "React form components library built with React Hook Form and Yup",