tp-react-elements 1.1.17 → 1.1.18

package/dist/_virtual/index.esm11.js

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

package/dist/_virtual/index.esm12.js

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

package/dist/_virtual/index.esm13.js

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

package/dist/_virtual/index.esm14.js

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

package/dist/_virtual/index.esm5.js

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

package/dist/_virtual/index.esm6.js

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

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

@@ -1,5 +1,5 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import require$$0__default, { lazy, Suspense } from 'react';
+import React__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';
@@ -155,6 +155,6 @@ const RenderForm = (props) => {
  *
  * @see FormRenderWrapper
  */
-var RenderForm$1 = require$$0__default.memo(RenderForm);
+var RenderForm$1 = React__default.memo(RenderForm);
 
 export { RenderForm$1 as default };

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

@@ -1,5 +1,5 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import require$$0__default from 'react';
+import React__default from 'react';
 import { useFormState } from 'react-hook-form';
 import { FormComponent, Formitem } from './Form.styles.esm.js';
 import RenderForm from './FormRender.esm.js';
@@ -28,6 +28,6 @@ const FormRenderWrapper = ({ formArray, name = '', numberOfColumns = 3, form, va
  * Export the FormRenderWrapper component for use in form containers
  * This component is the main entry point for rendering form fields
  */
-var FormRenderWrapper_default = require$$0__default.memo(FormRenderWrapper);
+var FormRenderWrapper_default = React__default.memo(FormRenderWrapper);
 
 export { FormRenderWrapper_default as default };

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

@@ -6,7 +6,7 @@ import ListItemText from '@mui/material/ListItemText';
 import MenuItem from '@mui/material/MenuItem';
 import OutlinedInput from '@mui/material/OutlinedInput';
 import Select from '@mui/material/Select';
-import require$$0__default, { useState, useRef, useMemo } from 'react';
+import React__default, { useState, useRef, useMemo } from 'react';
 import { useWatch } from 'react-hook-form';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
@@ -22,25 +22,32 @@ const extractValuesToArray = (inputString) => {
 function MultiSelectV1({ props, variant, }) {
     const [searchText, setSearchText] = useState('');
     const options = props.item?.options || [];
-    const [filterOptions, setFilterOptions] = useState(props.item.options || []);
     const textfieldRef = useRef(null);
     // Ref to capture the width of the Select container
     const containerRef = useRef(null);
     const fieldValue = useWatch({ control: props.control, name: props.item.name });
+    const [savedSortValue, setSavedSortValue] = useState(fieldValue);
+    const sortedOptions = useMemo(() => {
+        const selectedArray = savedSortValue ? savedSortValue.split(',') : [];
+        const selectedItems = options.filter((opt) => selectedArray.includes(String(opt.value)));
+        const unselectedItems = options.filter((opt) => !selectedArray.includes(String(opt.value)));
+        return [...selectedItems, ...unselectedItems];
+    }, [options, savedSortValue]);
+    const [filterOptions, setFilterOptions] = useState(sortedOptions);
     const selectAll = useMemo(() => {
         if (!fieldValue || filterOptions.length === 0)
             return false;
         const selectedValues = fieldValue.split(',').filter(Boolean);
         return filterOptions.every((option) => selectedValues.includes(String(option.value)));
     }, [fieldValue, filterOptions]);
-    require$$0__default.useEffect(() => {
+    React__default.useEffect(() => {
         if (searchText !== '') {
-            setFilterOptions(options.filter((item) => item.label.toLowerCase().includes(searchText.toLowerCase())));
+            setFilterOptions(sortedOptions.filter((item) => item.label.toLowerCase().includes(searchText.toLowerCase())));
         }
         else {
-            setFilterOptions(options);
+            setFilterOptions(sortedOptions);
         }
-    }, [options, searchText]);
+    }, [sortedOptions, searchText]);
     const handleChange = (event) => {
         const { target: { value } } = event;
         const finalValue = typeof value === 'string' ? value.split(',') : value;
@@ -49,8 +56,12 @@ function MultiSelectV1({ props, variant, }) {
     const selectedOptions = useMemo(() => options.filter((item) => fieldValue?.split(',').some((value) => value === item.value)), [options, fieldValue]);
     const selectedValuesString = selectedOptions.map((item) => item.label).join(' , ');
     const isShowBorderError = !!props.errors?.[props.item.name];
-    return (jsx(Box, { children: jsxs(FormControl, { fullWidth: true, ref: containerRef, sx: { '& .MuiFormLabel-root': { top: -10 }, '& .MuiInputLabel-shrink': { top: 0 } }, children: [renderLabel(variant, props), variant !== 'standard' && (jsxs(InputLabel, { error: isShowBorderError, id: `${props.item.name}-ms-labelId`, children: [props.item.label, props.item.required ? ' *' : ''] })), jsxs(Select, { labelId: `${props.item.name}-ms-labelId`, id: `${props.item.name}-ms-select`, multiple: true, displayEmpty: true, error: isShowBorderError, disabled: props.item.disable, value: fieldValue ? extractValuesToArray(fieldValue) : [], onChange: handleChange, onOpen: () => setTimeout(() => textfieldRef.current?.focus(), 0), onClose: () => {
+    return (jsx(Box, { children: jsxs(FormControl, { fullWidth: true, ref: containerRef, sx: { '& .MuiFormLabel-root': { top: -10 }, '& .MuiInputLabel-shrink': { top: 0 } }, children: [renderLabel(variant, props), variant !== 'standard' && (jsxs(InputLabel, { error: isShowBorderError, id: `${props.item.name}-ms-labelId`, children: [props.item.label, props.item.required ? ' *' : ''] })), jsxs(Select, { labelId: `${props.item.name}-ms-labelId`, id: `${props.item.name}-ms-select`, multiple: true, displayEmpty: true, error: isShowBorderError, disabled: props.item.disable, value: fieldValue ? extractValuesToArray(fieldValue) : [], onChange: handleChange, onOpen: () => {
+                        setSavedSortValue(fieldValue);
+                        setTimeout(() => textfieldRef.current?.focus(), 0);
+                    }, onClose: () => {
                         setSearchText('');
+                        setSavedSortValue(fieldValue);
                         props?.item?.onCloseMenu && props?.item?.onCloseMenu();
                     }, input: jsx(OutlinedInput, { label: variant !== 'standard' ? props.item.label : '' }), renderValue: () => (jsx(Tooltip, { title: selectedValuesString, children: jsx("span", { style: { display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: props.item.placeholder && selectedOptions.length === 0 ? (jsx("span", { style: { color: '#0009' }, children: props.item.placeholder })) : (selectedOptions.length > (props.item.multiSelectLabelLength || 3)
                                 ? `${selectedOptions.length} Selected`

package/dist/components/SelectField/MultiSelectFieldComponent.esm.js

@@ -5,7 +5,7 @@ import FormControl from '@mui/material/FormControl';
 import ListItemText from '@mui/material/ListItemText';
 import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
-import * as require$$0 from 'react';
+import * as React from 'react';
 import { useState } from 'react';
 
 const ITEM_HEIGHT = 36;
@@ -16,22 +16,29 @@ const extractValuesToArray = (inputString) => {
     return trimmedArray;
 };
 function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false, optionFontSize = '13px', }) {
-    const [personName, setPersonName] = require$$0.useState(value ? extractValuesToArray(value) : []);
+    const [personName, setPersonName] = React.useState(value ? extractValuesToArray(value) : []);
     const [searchText, setSearchText] = useState('');
-    const [filterOptions, setFilterOptions] = useState(options);
     const [selectAll, setSelectAll] = useState(false);
-    const textfieldRef = require$$0.useRef(null);
-    const containerRef = require$$0.useRef(null);
+    const textfieldRef = React.useRef(null);
+    const containerRef = React.useRef(null);
     const fieldValue = value;
-    require$$0.useEffect(() => {
+    const [savedSortValue, setSavedSortValue] = React.useState(fieldValue);
+    const sortedOptions = React.useMemo(() => {
+        const selectedArray = savedSortValue ? savedSortValue.split(',') : [];
+        const selectedItems = options.filter((opt) => selectedArray.includes(String(opt.value)));
+        const unselectedItems = options.filter((opt) => !selectedArray.includes(String(opt.value)));
+        return [...selectedItems, ...unselectedItems];
+    }, [options, savedSortValue]);
+    const [filterOptions, setFilterOptions] = useState(sortedOptions);
+    React.useEffect(() => {
         if (searchText !== '') {
-            setFilterOptions(options.filter((item) => item.label.toLowerCase().includes(searchText.toLowerCase())));
+            setFilterOptions(sortedOptions.filter((item) => item.label.toLowerCase().includes(searchText.toLowerCase())));
         }
         else {
-            setFilterOptions(options);
+            setFilterOptions(sortedOptions);
         }
-    }, [options, searchText]);
-    require$$0.useEffect(() => {
+    }, [sortedOptions, searchText]);
+    React.useEffect(() => {
         const values = fieldValue ? fieldValue.split(',').filter(Boolean) : [];
         const filterIdStrings = filterOptions.map((item) => String(item.value));
         if (values.length === 0 || filterOptions.length === 0) {
@@ -61,6 +68,7 @@ function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false
                         fontSize: '5px !important',
                     },
                 }, disabled: disable, value: value ? extractValuesToArray(value) : [], onChange: handleChange, onOpen: () => {
+                    setSavedSortValue(fieldValue);
                     setTimeout(() => {
                         if (textfieldRef.current) {
                             textfieldRef.current?.focus();
@@ -68,6 +76,7 @@ function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false
                     }, 0);
                 }, onClose: () => {
                     setSearchText('');
+                    setSavedSortValue(fieldValue);
                 }, renderValue: () => (jsx(Tooltip, { title: selectedValues, children: jsx("span", { children: selectedOptions.length > 3 ? `${selectedOptions.length} Selected` : selectedValues }) })), MenuProps: {
                     PaperProps: {
                         style: {

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

@@ -1,5 +1,5 @@
 import { __exports as Calendar } from '../../../../../_virtual/index.esm4.js';
-import require$$0__default from 'react';
+import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDayCell } from '../DayCell/index.esm.js';
 import { __require as requireMonth } from '../Month/index.esm.js';
@@ -23,7 +23,7 @@ function requireCalendar () {
 	  value: true
 	});
 	Calendar.default = void 0;
-	var _react = _interopRequireWildcard(require$$0__default);
+	var _react = _interopRequireWildcard(React__default);
 	var _propTypes = _interopRequireDefault(/*@__PURE__*/ requirePropTypes());
 	var _DayCell = requireDayCell();
 	var _Month = _interopRequireDefault(requireMonth());

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

@@ -1,5 +1,5 @@
-import { __exports as DateInput } from '../../../../../_virtual/index.esm13.js';
-import require$$0__default from 'react';
+import { __exports as DateInput } from '../../../../../_virtual/index.esm14.js';
+import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireClassnames } from '../../../../classnames/index.esm.js';
 import { __require as requireDateFns } from '../../../../date-fns/index.esm.js';
@@ -14,7 +14,7 @@ function requireDateInput () {
 	  value: true
 	});
 	DateInput.default = void 0;
-	var _react = _interopRequireWildcard(require$$0__default);
+	var _react = _interopRequireWildcard(React__default);
 	var _propTypes = _interopRequireDefault(/*@__PURE__*/ requirePropTypes());
 	var _classnames = _interopRequireDefault(requireClassnames());
 	var _dateFns = /*@__PURE__*/ requireDateFns();

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

@@ -1,5 +1,5 @@
-import { __exports as DateRange } from '../../../../../_virtual/index.esm5.js';
-import require$$0__default from 'react';
+import { __exports as DateRange } from '../../../../../_virtual/index.esm6.js';
+import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireCalendar } from '../Calendar/index.esm.js';
 import { __require as requireDayCell } from '../DayCell/index.esm.js';
@@ -18,7 +18,7 @@ function requireDateRange () {
 	  value: true
 	});
 	DateRange.default = void 0;
-	var _react = _interopRequireWildcard(require$$0__default);
+	var _react = _interopRequireWildcard(React__default);
 	var _propTypes = _interopRequireDefault(/*@__PURE__*/ requirePropTypes());
 	var _Calendar = _interopRequireDefault(requireCalendar());
 	var _DayCell = requireDayCell();

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

@@ -1,5 +1,5 @@
 import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm7.js';
-import require$$0__default from 'react';
+import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDateRange } from '../DateRange/index.esm.js';
 import { __require as requireDefinedRange } from '../DefinedRange/index.esm.js';
@@ -17,7 +17,7 @@ function requireDateRangePicker () {
 	  value: true
 	});
 	DateRangePicker.default = void 0;
-	var _react = _interopRequireWildcard(require$$0__default);
+	var _react = _interopRequireWildcard(React__default);
 	var _propTypes = _interopRequireDefault(/*@__PURE__*/ requirePropTypes());
 	var _DateRange = _interopRequireDefault(requireDateRange());
 	var _DefinedRange = _interopRequireDefault(requireDefinedRange());

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

@@ -1,5 +1,5 @@
-import { __exports as DayCell } from '../../../../../_virtual/index.esm12.js';
-import require$$0__default from 'react';
+import { __exports as DayCell } from '../../../../../_virtual/index.esm11.js';
+import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireClassnames } from '../../../../classnames/index.esm.js';
 import { __require as requireDateFns } from '../../../../date-fns/index.esm.js';
@@ -14,7 +14,7 @@ function requireDayCell () {
 	  value: true
 	});
 	DayCell.rangeShape = DayCell.default = void 0;
-	var _react = _interopRequireWildcard(require$$0__default);
+	var _react = _interopRequireWildcard(React__default);
 	var _propTypes = _interopRequireDefault(/*@__PURE__*/ requirePropTypes());
 	var _classnames = _interopRequireDefault(requireClassnames());
 	var _dateFns = /*@__PURE__*/ requireDateFns();

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

@@ -1,5 +1,5 @@
-import { __exports as DefinedRange } from '../../../../../_virtual/index.esm6.js';
-import require$$0__default from 'react';
+import { __exports as DefinedRange } from '../../../../../_virtual/index.esm5.js';
+import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireStyles } from '../../styles.esm.js';
 import { __require as requireDefaultRanges } from '../../defaultRanges.esm.js';
@@ -17,7 +17,7 @@ function requireDefinedRange () {
 	  value: true
 	});
 	DefinedRange.default = void 0;
-	var _react = _interopRequireWildcard(require$$0__default);
+	var _react = _interopRequireWildcard(React__default);
 	var _propTypes = _interopRequireDefault(/*@__PURE__*/ requirePropTypes());
 	var _styles = _interopRequireDefault(requireStyles());
 	var _defaultRanges = requireDefaultRanges();

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

@@ -1,5 +1,5 @@
-import { __exports as InputRangeField } from '../../../../../_virtual/index.esm14.js';
-import require$$0__default from 'react';
+import { __exports as InputRangeField } from '../../../../../_virtual/index.esm12.js';
+import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 
 var hasRequiredInputRangeField;
@@ -12,7 +12,7 @@ function requireInputRangeField () {
 	  value: true
 	});
 	InputRangeField.default = void 0;
-	var _react = _interopRequireWildcard(require$$0__default);
+	var _react = _interopRequireWildcard(React__default);
 	var _propTypes = _interopRequireDefault(/*@__PURE__*/ requirePropTypes());
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 	function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }

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

@@ -1,5 +1,5 @@
-import { __exports as Month } from '../../../../../_virtual/index.esm11.js';
-import require$$0__default from 'react';
+import { __exports as Month } from '../../../../../_virtual/index.esm13.js';
+import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDayCell } from '../DayCell/index.esm.js';
 import { __require as requireDateFns } from '../../../../date-fns/index.esm.js';
@@ -15,7 +15,7 @@ function requireMonth () {
 	  value: true
 	});
 	Month.default = void 0;
-	var _react = _interopRequireWildcard(require$$0__default);
+	var _react = _interopRequireWildcard(React__default);
 	var _propTypes = _interopRequireDefault(/*@__PURE__*/ requirePropTypes());
 	var _DayCell = _interopRequireWildcard(requireDayCell());
 	var _dateFns = /*@__PURE__*/ requireDateFns();

package/dist/node_modules/react-list/react-list.esm.js

@@ -1,5 +1,5 @@
 import { __exports as reactList } from '../../_virtual/react-list.esm.js';
-import require$$0__default from 'react';
+import React__default from 'react';
 import require$$1 from 'react/jsx-runtime';
 
 var hasRequiredReactList;
@@ -10,7 +10,7 @@ function requireReactList () {
 	(function (exports$1) {
 		(function (global, factory) {
 		  {
-		    factory(exports$1, require$$0__default, require$$1);
+		    factory(exports$1, React__default, require$$1);
 		  }
 		})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : reactList, function (_exports, _react, _jsxRuntime) {
 

package/package.json

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