funda-ui 4.7.533 → 4.7.545

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.
Files changed (7) hide show
  1. package/LiveSearch/index.js +16 -8
  2. package/Select/index.js +14 -5
  3. package/lib/cjs/LiveSearch/index.js +16 -8
  4. package/lib/cjs/Select/index.js +14 -5
  5. package/lib/esm/LiveSearch/index.tsx +15 -11
  6. package/lib/esm/Select/index.tsx +11 -5
  7. package/package.json +1 -1
package/LiveSearch/index.js CHANGED
@@ -3026,7 +3026,6 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
3026
3026
  if (isBlurringRef.current && !MANUAL_REQ) return;
3027
3027
 
3028
3028
  //
3029
- var contentHeightOffset = 80;
3030
3029
  var contentMaxHeight = 0;
3031
3030
 
3032
3031
  // update modal position
@@ -3067,6 +3066,11 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
3067
3066
  var _contentActualHeight = listContentRef.current.querySelector('.livesearch__options-contentlist-inner').clientHeight;
3068
3067
  if (targetPos === 'top') {
3069
3068
  contentMaxHeight = _triggerBox.top;
3069
+
3070
+ // Calculate the final height with minimum height protection
3071
+ var contentHeightOffset = 0;
3072
+ var finalHeight = Math.max(contentMaxHeight - contentHeightOffset, 150); // Ensure minimum height of 150px
3073
+
3070
3074
  if (_contentBox.height > _contentActualHeight) {
3071
3075
  if (_contentActualHeight > 0) listContentRef.current.style.height = _contentActualHeight + 'px';
3072
3076
  } else {
@@ -3074,11 +3078,16 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
3074
3078
 
3075
3079
  // recalculate the height
3076
3080
  _contentBox = listContentRef.current.getBoundingClientRect();
3077
- if (_contentBox.height > contentMaxHeight) listContentRef.current.style.height = contentMaxHeight - contentHeightOffset + 'px';
3081
+ if (_contentBox.height > contentMaxHeight) listContentRef.current.style.height = finalHeight + 'px';
3078
3082
  }
3079
3083
  }
3080
3084
  if (targetPos === 'bottom') {
3081
3085
  contentMaxHeight = window.innerHeight - _triggerBox.bottom;
3086
+
3087
+ // Calculate the final height with minimum height protection
3088
+ var _contentHeightOffset = 10;
3089
+ var _finalHeight = Math.max(contentMaxHeight - _contentHeightOffset, 150); // Ensure minimum height of 150px
3090
+
3082
3091
  if (_contentBox.height > _contentActualHeight) {
3083
3092
  if (_contentActualHeight > 0) listContentRef.current.style.height = _contentActualHeight + 'px';
3084
3093
  } else {
@@ -3086,7 +3095,7 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
3086
3095
 
3087
3096
  // recalculate the height
3088
3097
  _contentBox = listContentRef.current.getBoundingClientRect();
3089
- if (_contentBox.height > contentMaxHeight) listContentRef.current.style.height = contentMaxHeight - 10 + 'px';
3098
+ if (_contentBox.height > contentMaxHeight) listContentRef.current.style.height = _finalHeight + 'px';
3090
3099
  }
3091
3100
  }
3092
3101
 
@@ -3095,17 +3104,16 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
3095
3104
  // Adjust position
3096
3105
  if (targetPos === 'top') {
3097
3106
  _modalRef.style.left = x + 'px';
3098
- //_modalRef.style.top = y - POS_OFFSET - (listContentRef.current.clientHeight) - 2 + 'px';
3099
- _modalRef.style.top = 'auto';
3100
- _modalRef.style.bottom = window.innerHeight - _triggerBox.top + POS_OFFSET + 2 + 'px';
3101
- _modalRef.style.setProperty('position', 'fixed', 'important');
3107
+ _modalRef.style.bottom = 'auto';
3108
+ // Position the popup above the trigger without overlapping
3109
+ var topPosition = y - POS_OFFSET - listContentRef.current.clientHeight - 2;
3110
+ _modalRef.style.top = topPosition + 'px';
3102
3111
  _modalRef.classList.add('pos-top');
3103
3112
  }
3104
3113
  if (targetPos === 'bottom') {
3105
3114
  _modalRef.style.left = x + 'px';
3106
3115
  _modalRef.style.bottom = 'auto';
3107
3116
  _modalRef.style.top = y + height + POS_OFFSET + 'px';
3108
- _modalRef.style.setProperty('position', 'absolute', 'important');
3109
3117
  _modalRef.classList.remove('pos-top');
3110
3118
  }
3111
3119
 
package/Select/index.js CHANGED
@@ -4289,7 +4289,6 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
4289
4289
  if (isBlurringRef.current) return;
4290
4290
 
4291
4291
  //
4292
- var contentHeightOffset = 80;
4293
4292
  var contentMaxHeight = 0;
4294
4293
 
4295
4294
  // update modal position
@@ -4370,9 +4369,14 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
4370
4369
 
4371
4370
  // height restrictions
4372
4371
  contentMaxHeight = listContainerHeightLimit(contentMaxHeight);
4372
+
4373
+ // Calculate the final height with minimum height protection
4374
+ var contentHeightOffset = 0;
4375
+ var finalHeight = Math.max(contentMaxHeight - contentHeightOffset, 150); // Ensure minimum height of 150px
4376
+
4373
4377
  if (_contentBox.height > contentMaxHeight) {
4374
- listContentRef.current.style.height = contentMaxHeight - contentHeightOffset + 'px';
4375
- if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = contentMaxHeight - contentHeightOffset;
4378
+ listContentRef.current.style.height = finalHeight + 'px';
4379
+ if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = finalHeight;
4376
4380
 
4377
4381
  // has scrollbar
4378
4382
  listContentRef.current.dataset.hasScrollbar = 'true';
@@ -4393,9 +4397,14 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
4393
4397
 
4394
4398
  // height restrictions
4395
4399
  contentMaxHeight = listContainerHeightLimit(contentMaxHeight);
4400
+
4401
+ // Calculate the final height with minimum height protection
4402
+ var _contentHeightOffset = 10;
4403
+ var _finalHeight = Math.max(contentMaxHeight - _contentHeightOffset, 150); // Ensure minimum height of 150px
4404
+
4396
4405
  if (_contentBox.height > contentMaxHeight) {
4397
- listContentRef.current.style.height = contentMaxHeight - 10 + 'px';
4398
- if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = contentMaxHeight - 10;
4406
+ listContentRef.current.style.height = _finalHeight + 'px';
4407
+ if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = _finalHeight;
4399
4408
 
4400
4409
  // has scrollbar
4401
4410
  listContentRef.current.dataset.hasScrollbar = 'true';
package/lib/cjs/LiveSearch/index.js CHANGED
@@ -3026,7 +3026,6 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
3026
3026
  if (isBlurringRef.current && !MANUAL_REQ) return;
3027
3027
 
3028
3028
  //
3029
- var contentHeightOffset = 80;
3030
3029
  var contentMaxHeight = 0;
3031
3030
 
3032
3031
  // update modal position
@@ -3067,6 +3066,11 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
3067
3066
  var _contentActualHeight = listContentRef.current.querySelector('.livesearch__options-contentlist-inner').clientHeight;
3068
3067
  if (targetPos === 'top') {
3069
3068
  contentMaxHeight = _triggerBox.top;
3069
+
3070
+ // Calculate the final height with minimum height protection
3071
+ var contentHeightOffset = 0;
3072
+ var finalHeight = Math.max(contentMaxHeight - contentHeightOffset, 150); // Ensure minimum height of 150px
3073
+
3070
3074
  if (_contentBox.height > _contentActualHeight) {
3071
3075
  if (_contentActualHeight > 0) listContentRef.current.style.height = _contentActualHeight + 'px';
3072
3076
  } else {
@@ -3074,11 +3078,16 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
3074
3078
 
3075
3079
  // recalculate the height
3076
3080
  _contentBox = listContentRef.current.getBoundingClientRect();
3077
- if (_contentBox.height > contentMaxHeight) listContentRef.current.style.height = contentMaxHeight - contentHeightOffset + 'px';
3081
+ if (_contentBox.height > contentMaxHeight) listContentRef.current.style.height = finalHeight + 'px';
3078
3082
  }
3079
3083
  }
3080
3084
  if (targetPos === 'bottom') {
3081
3085
  contentMaxHeight = window.innerHeight - _triggerBox.bottom;
3086
+
3087
+ // Calculate the final height with minimum height protection
3088
+ var _contentHeightOffset = 10;
3089
+ var _finalHeight = Math.max(contentMaxHeight - _contentHeightOffset, 150); // Ensure minimum height of 150px
3090
+
3082
3091
  if (_contentBox.height > _contentActualHeight) {
3083
3092
  if (_contentActualHeight > 0) listContentRef.current.style.height = _contentActualHeight + 'px';
3084
3093
  } else {
@@ -3086,7 +3095,7 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
3086
3095
 
3087
3096
  // recalculate the height
3088
3097
  _contentBox = listContentRef.current.getBoundingClientRect();
3089
- if (_contentBox.height > contentMaxHeight) listContentRef.current.style.height = contentMaxHeight - 10 + 'px';
3098
+ if (_contentBox.height > contentMaxHeight) listContentRef.current.style.height = _finalHeight + 'px';
3090
3099
  }
3091
3100
  }
3092
3101
 
@@ -3095,17 +3104,16 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
3095
3104
  // Adjust position
3096
3105
  if (targetPos === 'top') {
3097
3106
  _modalRef.style.left = x + 'px';
3098
- //_modalRef.style.top = y - POS_OFFSET - (listContentRef.current.clientHeight) - 2 + 'px';
3099
- _modalRef.style.top = 'auto';
3100
- _modalRef.style.bottom = window.innerHeight - _triggerBox.top + POS_OFFSET + 2 + 'px';
3101
- _modalRef.style.setProperty('position', 'fixed', 'important');
3107
+ _modalRef.style.bottom = 'auto';
3108
+ // Position the popup above the trigger without overlapping
3109
+ var topPosition = y - POS_OFFSET - listContentRef.current.clientHeight - 2;
3110
+ _modalRef.style.top = topPosition + 'px';
3102
3111
  _modalRef.classList.add('pos-top');
3103
3112
  }
3104
3113
  if (targetPos === 'bottom') {
3105
3114
  _modalRef.style.left = x + 'px';
3106
3115
  _modalRef.style.bottom = 'auto';
3107
3116
  _modalRef.style.top = y + height + POS_OFFSET + 'px';
3108
- _modalRef.style.setProperty('position', 'absolute', 'important');
3109
3117
  _modalRef.classList.remove('pos-top');
3110
3118
  }
3111
3119
 
package/lib/cjs/Select/index.js CHANGED
@@ -4289,7 +4289,6 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
4289
4289
  if (isBlurringRef.current) return;
4290
4290
 
4291
4291
  //
4292
- var contentHeightOffset = 80;
4293
4292
  var contentMaxHeight = 0;
4294
4293
 
4295
4294
  // update modal position
@@ -4370,9 +4369,14 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
4370
4369
 
4371
4370
  // height restrictions
4372
4371
  contentMaxHeight = listContainerHeightLimit(contentMaxHeight);
4372
+
4373
+ // Calculate the final height with minimum height protection
4374
+ var contentHeightOffset = 0;
4375
+ var finalHeight = Math.max(contentMaxHeight - contentHeightOffset, 150); // Ensure minimum height of 150px
4376
+
4373
4377
  if (_contentBox.height > contentMaxHeight) {
4374
- listContentRef.current.style.height = contentMaxHeight - contentHeightOffset + 'px';
4375
- if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = contentMaxHeight - contentHeightOffset;
4378
+ listContentRef.current.style.height = finalHeight + 'px';
4379
+ if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = finalHeight;
4376
4380
 
4377
4381
  // has scrollbar
4378
4382
  listContentRef.current.dataset.hasScrollbar = 'true';
@@ -4393,9 +4397,14 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
4393
4397
 
4394
4398
  // height restrictions
4395
4399
  contentMaxHeight = listContainerHeightLimit(contentMaxHeight);
4400
+
4401
+ // Calculate the final height with minimum height protection
4402
+ var _contentHeightOffset = 10;
4403
+ var _finalHeight = Math.max(contentMaxHeight - _contentHeightOffset, 150); // Ensure minimum height of 150px
4404
+
4396
4405
  if (_contentBox.height > contentMaxHeight) {
4397
- listContentRef.current.style.height = contentMaxHeight - 10 + 'px';
4398
- if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = contentMaxHeight - 10;
4406
+ listContentRef.current.style.height = _finalHeight + 'px';
4407
+ if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = _finalHeight;
4399
4408
 
4400
4409
  // has scrollbar
4401
4410
  listContentRef.current.dataset.hasScrollbar = 'true';
package/lib/esm/LiveSearch/index.tsx CHANGED
@@ -276,7 +276,6 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
276
276
 
277
277
 
278
278
  //
279
- const contentHeightOffset = 80;
280
279
  let contentMaxHeight = 0;
281
280
 
282
281
  // update modal position
@@ -321,6 +320,10 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
321
320
  if (targetPos === 'top') {
322
321
  contentMaxHeight = _triggerBox.top;
323
322
 
323
+ // Calculate the final height with minimum height protection
324
+ const contentHeightOffset = 0;
325
+ const finalHeight = Math.max(contentMaxHeight - contentHeightOffset, 150); // Ensure minimum height of 150px
326
+
324
327
  if (_contentBox.height > _contentActualHeight) {
325
328
  if (_contentActualHeight > 0) listContentRef.current.style.height = _contentActualHeight + 'px';
326
329
  } else {
@@ -328,7 +331,7 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
328
331
 
329
332
  // recalculate the height
330
333
  _contentBox = listContentRef.current.getBoundingClientRect();
331
- if (_contentBox.height > contentMaxHeight) listContentRef.current.style.height = contentMaxHeight - contentHeightOffset + 'px';
334
+ if (_contentBox.height > contentMaxHeight) listContentRef.current.style.height = finalHeight + 'px';
332
335
 
333
336
  }
334
337
  }
@@ -336,6 +339,10 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
336
339
  if (targetPos === 'bottom') {
337
340
  contentMaxHeight = window.innerHeight - _triggerBox.bottom;
338
341
 
342
+ // Calculate the final height with minimum height protection
343
+ const contentHeightOffset = 10;
344
+ const finalHeight = Math.max(contentMaxHeight - contentHeightOffset, 150); // Ensure minimum height of 150px
345
+
339
346
  if (_contentBox.height > _contentActualHeight) {
340
347
  if (_contentActualHeight > 0) listContentRef.current.style.height = _contentActualHeight + 'px';
341
348
  } else {
@@ -343,7 +350,7 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
343
350
 
344
351
  // recalculate the height
345
352
  _contentBox = listContentRef.current.getBoundingClientRect();
346
- if (_contentBox.height > contentMaxHeight) listContentRef.current.style.height = contentMaxHeight - 10 + 'px';
353
+ if (_contentBox.height > contentMaxHeight) listContentRef.current.style.height = finalHeight + 'px';
347
354
  }
348
355
 
349
356
  }
@@ -355,25 +362,22 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
355
362
  // Adjust position
356
363
  if (targetPos === 'top') {
357
364
  _modalRef.style.left = x + 'px';
358
- //_modalRef.style.top = y - POS_OFFSET - (listContentRef.current.clientHeight) - 2 + 'px';
359
- _modalRef.style.top = 'auto';
360
- _modalRef.style.bottom = (window.innerHeight - _triggerBox.top) + POS_OFFSET + 2 + 'px';
361
- _modalRef.style.setProperty('position', 'fixed', 'important');
365
+ _modalRef.style.bottom = 'auto';
366
+ // Position the popup above the trigger without overlapping
367
+ const topPosition = y - POS_OFFSET - (listContentRef.current.clientHeight) - 2;
368
+ _modalRef.style.top = topPosition + 'px';
362
369
  _modalRef.classList.add('pos-top');
370
+
363
371
  }
364
372
 
365
373
  if (targetPos === 'bottom') {
366
374
  _modalRef.style.left = x + 'px';
367
375
  _modalRef.style.bottom = 'auto';
368
376
  _modalRef.style.top = y + height + POS_OFFSET + 'px';
369
- _modalRef.style.setProperty('position', 'absolute', 'important');
370
377
  _modalRef.classList.remove('pos-top');
371
378
  }
372
379
 
373
380
 
374
-
375
-
376
-
377
381
  // STEP 5:
378
382
  //-----------
379
383
  // Determine whether it exceeds the far right or left side of the screen
package/lib/esm/Select/index.tsx CHANGED
@@ -47,6 +47,7 @@ import {
47
47
  import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
48
48
 
49
49
 
50
+
50
51
  export interface MultiSelectValue {
51
52
  items: { label: string; value: string }[];
52
53
  labels: string[];
@@ -815,7 +816,6 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
815
816
  if (isBlurringRef.current) return;
816
817
 
817
818
  //
818
- const contentHeightOffset = 80;
819
819
  let contentMaxHeight = 0;
820
820
 
821
821
  // update modal position
@@ -904,10 +904,13 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
904
904
  // height restrictions
905
905
  contentMaxHeight = listContainerHeightLimit(contentMaxHeight);
906
906
 
907
+ // Calculate the final height with minimum height protection
908
+ const contentHeightOffset = 0;
909
+ const finalHeight = Math.max(contentMaxHeight - contentHeightOffset, 150); // Ensure minimum height of 150px
907
910
 
908
911
  if (_contentBox.height > contentMaxHeight) {
909
- listContentRef.current.style.height = contentMaxHeight - contentHeightOffset + 'px';
910
- if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = contentMaxHeight - contentHeightOffset;
912
+ listContentRef.current.style.height = finalHeight + 'px';
913
+ if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = finalHeight;
911
914
 
912
915
  // has scrollbar
913
916
  listContentRef.current.dataset.hasScrollbar = 'true';
@@ -933,10 +936,13 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
933
936
  // height restrictions
934
937
  contentMaxHeight = listContainerHeightLimit(contentMaxHeight);
935
938
 
939
+ // Calculate the final height with minimum height protection
940
+ const contentHeightOffset = 10;
941
+ const finalHeight = Math.max(contentMaxHeight - contentHeightOffset, 150); // Ensure minimum height of 150px
936
942
 
937
943
  if (_contentBox.height > contentMaxHeight) {
938
- listContentRef.current.style.height = contentMaxHeight - 10 + 'px';
939
- if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = contentMaxHeight - 10;
944
+ listContentRef.current.style.height = finalHeight + 'px';
945
+ if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = finalHeight;
940
946
 
941
947
  // has scrollbar
942
948
  listContentRef.current.dataset.hasScrollbar = 'true';
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "author": "UIUX Lab",
3
3
  "email": "uiuxlab@gmail.com",
4
4
  "name": "funda-ui",
5
- "version": "4.7.533",
5
+ "version": "4.7.545",
6
6
  "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
7
7
  "repository": {
8
8
  "type": "git",