tp-react-elements 1.1.9 → 1.1.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,3 +1,3 @@
1
- var propTypes = {exports: {}};
1
+ var accessibility = {};
2
2
 
3
- export { propTypes as __module };
3
+ export { accessibility as __exports };
@@ -1,3 +1,3 @@
1
- var DateInput = {};
1
+ var Month = {};
2
2
 
3
- export { DateInput as __exports };
3
+ export { Month as __exports };
@@ -1,3 +1,3 @@
1
- var Month = {};
1
+ var DateInput = {};
2
2
 
3
- export { Month as __exports };
3
+ export { DateInput as __exports };
@@ -1,3 +1,3 @@
1
- var Calendar = {};
1
+ var DateRangePicker = {};
2
2
 
3
- export { Calendar as __exports };
3
+ export { DateRangePicker as __exports };
@@ -1,3 +1,3 @@
1
- var DateRangePicker = {};
1
+ var Calendar = {};
2
2
 
3
- export { DateRangePicker as __exports };
3
+ export { Calendar as __exports };
@@ -1,3 +1,3 @@
1
- var accessibility = {};
1
+ var propTypes = {exports: {}};
2
2
 
3
- export { accessibility as __exports };
3
+ export { propTypes as __module };
@@ -2,6 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
2
2
  import { Box, TextField, FormControlLabel, Checkbox, Tooltip } from '@mui/material';
3
3
  import FormControl from '@mui/material/FormControl';
4
4
  import InputLabel from '@mui/material/InputLabel';
5
+ import ListItemText from '@mui/material/ListItemText';
5
6
  import MenuItem from '@mui/material/MenuItem';
6
7
  import OutlinedInput from '@mui/material/OutlinedInput';
7
8
  import Select from '@mui/material/Select';
@@ -74,7 +75,7 @@ function MultiSelectV1({ props, variant, }) {
74
75
  disableAutoFocusItem: true,
75
76
  }, children: [jsx(Box, { sx: { width: '100%', position: 'sticky', top: 0, padding: '7px', zIndex: 2, background: '#fff' }, children: jsx(TextField, { inputRef: textfieldRef, fullWidth: true, size: "small", placeholder: "Search...", value: searchText, onChange: (e) => setSearchText(e.target.value),
76
77
  // Prevent space key from closing the select while typing in search
77
- onKeyDown: (e) => e.key !== 'Escape' && e.stopPropagation() }) }), jsx(MenuItem, { disabled: filterOptions.length === 0, sx: { py: 0, px: 2 }, children: jsx(FormControlLabel, { control: jsx(Checkbox, { id: `${props.item.name}-select-all`, size: "small", checked: selectAll, sx: { p: 1 }, onChange: () => {
78
+ onKeyDown: (e) => e.key !== 'Escape' && e.stopPropagation() }) }), jsx(MenuItem, { disabled: filterOptions.length === 0, sx: { py: 0, px: 2 }, children: jsx(FormControlLabel, { control: jsx(Checkbox, { id: `${props.item.name}-select-all`, size: "small", checked: selectAll, sx: { p: 1 }, onMouseDown: (e) => e.stopPropagation(), onChange: (e) => {
78
79
  const currentValues = fieldValue?.split(',').filter(Boolean) || [];
79
80
  const filteredIds = filterOptions.map((opt) => String(opt.value));
80
81
  if (selectAll) {
@@ -86,22 +87,26 @@ function MultiSelectV1({ props, variant, }) {
86
87
  } }), label: "Select All", sx: {
87
88
  width: '100%',
88
89
  margin: 0,
89
- '& .MuiFormControlLabel-label': { fontSize: '13px' }
90
+ // Remove pointerEvents: 'none' to allow label to trigger checkbox
91
+ '& .MuiFormControlLabel-label': { fontSize: props.item?.optionFontSize || '13px' }
90
92
  } }) }), filterOptions.length !== 0 ? (filterOptions.map((option) => {
91
93
  const selectedArray = fieldValue ? extractValuesToArray(fieldValue) : [];
92
94
  const isChecked = selectedArray.includes(String(option.value));
93
- return (jsx(MenuItem, { value: `${option.value}`, sx: {
95
+ return (jsxs(MenuItem, { value: `${option.value}`, sx: {
94
96
  whiteSpace: 'normal',
95
97
  wordBreak: 'break-all',
96
- alignItems: 'flex-start',
97
- py: 0,
98
+ alignItems: 'center',
99
+ py: 0.5,
98
100
  px: 2,
99
101
  minHeight: ITEM_HEIGHT,
100
- }, children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: isChecked, size: "small", sx: { p: 1 } }), label: option.label, sx: {
101
- width: '100%',
102
- margin: 0,
103
- '& .MuiFormControlLabel-label': { fontSize: '13px' }
104
- } }) }, option.value));
102
+ }, children: [jsx(Checkbox, { checked: isChecked, size: "small", sx: { p: 1, mr: 1, pointerEvents: 'none' } }), jsx(ListItemText, { primary: option.label, primaryTypographyProps: {
103
+ fontSize: props.item?.optionFontSize || '13px',
104
+ sx: {
105
+ whiteSpace: 'normal',
106
+ wordBreak: 'break-all',
107
+ lineHeight: '1.2'
108
+ }
109
+ } })] }, option.value));
105
110
  })) : (jsx(MenuItem, { disabled: true, children: "No data Found" }))] }), jsx(FormBottomField, { ...props })] }) }, props.item.name));
106
111
  }
107
112
 
@@ -3,16 +3,30 @@ export { default as SingleSelectNonAutoComplete } from './Select/SingleSelectNon
3
3
  export { default as SingleSelectSearchApi } from './Select/SingleSelectSearchApi.esm.js';
4
4
  export { default as MultiSelectV1 } from './Select/MultiSelectv1.esm.js';
5
5
  export { default as MultiSelectTable } from './Select/MultiSelectTable.esm.js';
6
- export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';
6
+ export { default as FormRenderFileUpload } from './FileUpload/FormRenderFileUpload.esm.js';
7
+ export { default as FormRenderMultiFileUpload } from './FileUpload/FormRenderMultiFileUpload.esm.js';
8
+ import 'react/jsx-runtime';
9
+ import '@mui/material';
10
+ import 'react';
11
+ import 'react-hook-form';
12
+ import 'dayjs';
7
13
  export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
14
+ import '@mui/icons-material/Visibility';
15
+ import '@mui/icons-material/Close';
16
+ import '@mui/icons-material/NavigateBefore';
17
+ import '@mui/icons-material/NavigateNext';
18
+ import '@mui/icons-material/Delete';
19
+ import '@mui/icons-material/UploadFile';
20
+ import '@mui/icons-material/PictureAsPdf';
21
+ import '@mui/icons-material/TableChart';
22
+ import '@mui/icons-material/Description';
23
+ export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';
8
24
  export { default as FormCheckBox } from './FormCheckBox/FormCheckBox.esm.js';
9
25
  export { default as FormCheckBoxGroup } from './FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
10
26
  export { default as FormErrorField } from './FormErrorField/FormErrorField.esm.js';
11
27
  export { default as FormNumberField } from './FormNumberField/FormNumberField.esm.js';
12
28
  export { default as FormNumberFieldDecimal } from './FormNumberField/FormNumberFieldDecimal.esm.js';
13
29
  export { default as FormRadioGroup } from './FormRadioGroup/FormRadioGroup.esm.js';
14
- export { default as FormRenderFileUpload } from './FileUpload/FormRenderFileUpload.esm.js';
15
- export { default as FormRenderMultiFileUpload } from './FileUpload/FormRenderMultiFileUpload.esm.js';
16
30
  export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
17
31
  export { default as FormTextField } from './FormTextField/FormTextField.esm.js';
18
32
  export { default as HelperText } from './HelperText/HelperText.esm.js';
@@ -6,6 +6,7 @@ interface MultiSelectProps {
6
6
  }[];
7
7
  onChangeFn: (e: any) => void;
8
8
  disable?: boolean;
9
+ optionFontSize?: string;
9
10
  }
10
- export default function MultiSelectFieldComponent({ value, options, onChangeFn, disable, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
11
+ export default function MultiSelectFieldComponent({ value, options, onChangeFn, disable, optionFontSize, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
11
12
  export {};
@@ -2,6 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
2
2
  import { Box, TextField, FormControlLabel, Tooltip } from '@mui/material';
3
3
  import Checkbox from '@mui/material/Checkbox';
4
4
  import FormControl from '@mui/material/FormControl';
5
+ import ListItemText from '@mui/material/ListItemText';
5
6
  import MenuItem from '@mui/material/MenuItem';
6
7
  import Select from '@mui/material/Select';
7
8
  import * as require$$0 from 'react';
@@ -14,7 +15,7 @@ const extractValuesToArray = (inputString) => {
14
15
  const trimmedArray = valuesArray?.map((value) => value.trim());
15
16
  return trimmedArray;
16
17
  };
17
- function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false, }) {
18
+ function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false, optionFontSize = '13px', }) {
18
19
  const [personName, setPersonName] = require$$0.useState(value ? extractValuesToArray(value) : []);
19
20
  const [searchText, setSearchText] = useState('');
20
21
  const [filterOptions, setFilterOptions] = useState(options);
@@ -101,7 +102,7 @@ function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false
101
102
  if (e.key !== 'Escape') {
102
103
  e.stopPropagation();
103
104
  }
104
- } }) }), jsx(MenuItem, { disabled: filterOptions.length === 0, sx: { py: 0, px: 2 }, children: jsx(FormControlLabel, { control: jsx(Checkbox, { id: `${value}-select-all`, size: "small", checked: selectAll, sx: { p: 1 }, onChange: () => {
105
+ } }) }), jsx(MenuItem, { disabled: filterOptions.length === 0, sx: { py: 0.5, px: 2 }, onMouseDown: (e) => e.stopPropagation(), children: jsx(FormControlLabel, { control: jsx(Checkbox, { id: `${value}-select-all`, size: "small", checked: selectAll, onChange: () => {
105
106
  const currentValues = fieldValue?.split(',').filter(Boolean) || [];
106
107
  const filteredIds = filterOptions.map((opt) => String(opt.value));
107
108
  if (selectAll) {
@@ -111,19 +112,22 @@ function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false
111
112
  onChangeFn([...new Set([...currentValues, ...filteredIds])].join(','));
112
113
  }
113
114
  } }), label: "Select All", sx: {
114
- width: '100%',
115
115
  margin: 0,
116
- '& .MuiFormControlLabel-label': { fontSize: '13px' }
117
- } }) }), filterOptions.length !== 0 ? (filterOptions.map((option) => (jsx(MenuItem, { value: `${option.value}`, sx: {
116
+ width: '100%',
117
+ '& .MuiFormControlLabel-label': { fontSize: optionFontSize }
118
+ } }) }), filterOptions.length !== 0 ? (filterOptions.map((option) => (jsxs(MenuItem, { value: `${option.value}`, sx: {
118
119
  zIndex: 0,
119
120
  py: 0,
120
121
  px: 2,
121
122
  minHeight: ITEM_HEIGHT
122
- }, children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: fieldValue?.split(',').some((value) => value === String(option.value)), size: "small", sx: { p: 1 } }), label: option.label, sx: {
123
- width: '100%',
124
- margin: 0,
125
- '& .MuiFormControlLabel-label': { fontSize: '13px' }
126
- } }) }, option.value)))) : (jsx(MenuItem, { disabled: true, value: 'NA', children: "No data Found" }, 'NA'))] }) }) }));
123
+ }, children: [jsx(Checkbox, { checked: fieldValue?.split(',').some((val) => String(val) === String(option.value)), size: "small", sx: { p: 1, mr: 1, pointerEvents: 'none' } }), jsx(ListItemText, { primary: option.label, primaryTypographyProps: {
124
+ fontSize: optionFontSize,
125
+ sx: {
126
+ whiteSpace: 'normal',
127
+ wordBreak: 'break-all',
128
+ lineHeight: '1.2'
129
+ }
130
+ } })] }, option.value)))) : (jsx(MenuItem, { disabled: true, value: 'NA', children: "No data Found" }, 'NA'))] }) }) }));
127
131
  }
128
132
 
129
133
  export { MultiSelectFieldComponent as default };
@@ -1,4 +1,4 @@
1
- import { __module as propTypes } from '../../_virtual/index.esm10.js';
1
+ import { __module as propTypes } from '../../_virtual/index.esm9.js';
2
2
  import { __require as requireReactIs } from './node_modules/react-is/index.esm.js';
3
3
  import { __require as requireFactoryWithTypeCheckers } from './factoryWithTypeCheckers.esm.js';
4
4
  import { __require as requireFactoryWithThrowingShims } from './factoryWithThrowingShims.esm.js';
@@ -1,4 +1,4 @@
1
- import { __exports as accessibility } from '../../../../_virtual/index.esm9.js';
1
+ import { __exports as accessibility } from '../../../../_virtual/index.esm10.js';
2
2
  import { __require as requirePropTypes } from '../../../prop-types/index.esm.js';
3
3
 
4
4
  var hasRequiredAccessibility;
@@ -1,4 +1,4 @@
1
- import { __exports as Calendar } from '../../../../../_virtual/index.esm5.js';
1
+ import { __exports as Calendar } from '../../../../../_virtual/index.esm7.js';
2
2
  import require$$0__default from 'react';
3
3
  import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
4
4
  import { __require as requireDayCell } from '../DayCell/index.esm.js';
@@ -1,4 +1,4 @@
1
- import { __exports as DateInput } from '../../../../../_virtual/index.esm13.js';
1
+ import { __exports as DateInput } from '../../../../../_virtual/index.esm14.js';
2
2
  import require$$0__default from 'react';
3
3
  import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
4
4
  import { __require as requireClassnames } from '../../../../classnames/index.esm.js';
@@ -1,4 +1,4 @@
1
- import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm7.js';
1
+ import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm5.js';
2
2
  import require$$0__default from 'react';
3
3
  import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
4
4
  import { __require as requireDateRange } from '../DateRange/index.esm.js';
@@ -1,4 +1,4 @@
1
- import { __exports as Month } from '../../../../../_virtual/index.esm14.js';
1
+ import { __exports as Month } from '../../../../../_virtual/index.esm13.js';
2
2
  import require$$0__default from 'react';
3
3
  import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
4
4
  import { __require as requireDayCell } from '../DayCell/index.esm.js';
@@ -80,6 +80,7 @@ export interface FormSectionPropsItem {
80
80
  valueField?: string;
81
81
  labelField?: string;
82
82
  headerColor?: string;
83
+ optionFontSize?: string;
83
84
  }
84
85
  export type VariantProps = 'standard' | 'outlined' | '';
85
86
  export interface FormRenderProps {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tp-react-elements",
3
- "version": "1.1.9",
3
+ "version": "1.1.12",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "description": "React form components library built with React Hook Form and Yup",
@@ -72,6 +72,9 @@
72
72
  "publish:prepare": "npm run build:lib && npm run type-check",
73
73
  "publish:npm": "npm publish",
74
74
  "publish:beta": "npm publish --tag beta",
75
+ "publish:patch": "npm version patch --no-git-tag-version && npm publish",
76
+ "publish:minor": "npm version minor --no-git-tag-version && npm publish",
77
+ "publish:major": "npm version major --no-git-tag-version && npm publish",
75
78
  "publish:auto": "npm run publish:prepare && npm publish",
76
79
  "install-peers": "install-tp-form-deps",
77
80
  "package-build": "rollup -c --bundleConfigAsCjs",