funda-ui 2.0.475 → 2.0.555

package/MultiFuncSelect/index.css

@@ -143,6 +143,9 @@
   text-overflow: ellipsis;
   position: relative;
 }
+.mf-select__wrapper .mf-select-multi__inputplaceholder-wrapper ul.mf-select-multi__list li.mf-select-multi__list-item-statusstring {
+  background: transparent;
+}
 .mf-select__wrapper .mf-select-multi__inputplaceholder-wrapper ul.mf-select-multi__list li.mf-select-multi__list-item-placeholder {
   background: transparent;
   color: var(--mf-sel-placeholder-color);

package/MultiFuncSelect/index.d.ts

@@ -23,6 +23,11 @@ interface MultiSelectConfig {
     selectAllLabel?: string;
     data: MultiSelectDataConfig | null;
 }
+interface multiSelectSelectedItemOnlyStatusConfig {
+    itemsLabel?: string;
+    allItemsLabel?: string;
+    noneLabel?: string;
+}
 interface CleanTriggerConfig {
     valid: boolean;
     cleanValueLabel?: string;
@@ -31,6 +36,7 @@ declare type MultiFuncSelectProps = {
     wrapperClassName?: string;
     controlClassName?: string;
     multiSelect?: MultiSelectConfig;
+    multiSelectSelectedItemOnlyStatus?: multiSelectSelectedItemOnlyStatusConfig;
     cleanTrigger?: CleanTriggerConfig;
     value?: string;
     label?: React.ReactNode | string;

package/MultiFuncSelect/index.js

@@ -876,7 +876,7 @@ var enableBodyScroll = function enableBodyScroll(targetElement) {
 // EXTERNAL MODULE: ./src/utils/tree.js
 var tree = __webpack_require__(602);
 ;// CONCATENATED MODULE: ./src/index.tsx
-var _excluded = ["wrapperClassName", "controlClassName", "multiSelect", "disabled", "required", "value", "label", "name", "readOnly", "placeholder", "id", "options", "cleanTrigger", "lockBodyScroll", "hierarchical", "indentation", "doubleIndent", "style", "depth", "controlArrow", "winWidth", "tabIndex", "fetchTrigger", "fetchTriggerForDefaultData", "fetchNoneInfo", "fetchUpdate", "fetchFuncAsync", "fetchFuncMethod", "fetchFuncMethodParams", "data", "extractValueByBrackets", "fetchCallback", "onFetch", "onLoad", "onSelect", "onChange", "onBlur", "onFocus"];
+var _excluded = ["wrapperClassName", "controlClassName", "multiSelect", "multiSelectSelectedItemOnlyStatus", "disabled", "required", "value", "label", "name", "readOnly", "placeholder", "id", "options", "cleanTrigger", "lockBodyScroll", "hierarchical", "indentation", "doubleIndent", "style", "depth", "controlArrow", "winWidth", "tabIndex", "fetchTrigger", "fetchTriggerForDefaultData", "fetchNoneInfo", "fetchUpdate", "fetchFuncAsync", "fetchFuncMethod", "fetchFuncMethodParams", "data", "extractValueByBrackets", "fetchCallback", "onFetch", "onLoad", "onSelect", "onChange", "onBlur", "onFocus"];
 function src_toConsumableArray(arr) { return src_arrayWithoutHoles(arr) || src_iterableToArray(arr) || src_unsupportedIterableToArray(arr) || src_nonIterableSpread(); }
 function src_nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function src_iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
@@ -913,6 +913,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
   var wrapperClassName = props.wrapperClassName,
     controlClassName = props.controlClassName,
     multiSelect = props.multiSelect,
+    multiSelectSelectedItemOnlyStatus = props.multiSelectSelectedItemOnlyStatus,
     disabled = props.disabled,
     required = props.required,
     value = props.value,
@@ -1010,6 +1011,11 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
   var selectedSign = false;
   var MULTI_SEL_VALID = multiSelect ? multiSelect.valid : false;
   var MULTI_SEL_LABEL = multiSelect ? multiSelect.selectAllLabel : 'Select all options';
+  var MULTI_SEL_SELECTED_STATUS = {
+    itemsLabel: '{num} Selected',
+    allItemsLabel: 'All Content',
+    noneLabel: 'No items selected'
+  };
   var _useState17 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({
       labels: [],
       values: []
@@ -2567,7 +2573,9 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     className: "mf-select-multi__inputplaceholder-inner"
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("ul", {
     className: "mf-select-multi__list"
-  }, controlArr.labels.map(function (item, index) {
+  }, typeof multiSelectSelectedItemOnlyStatus !== 'undefined' ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("li", {
+    className: "mf-select-multi__list-item-statusstring"
+  }, typeof multiSelectSelectedItemOnlyStatus.itemsLabel === 'string' && controlArr.labels.length > 0 && controlArr.labels.length < optionsData.length ? multiSelectSelectedItemOnlyStatus.itemsLabel.replace('{num}', controlArr.labels.length) : null, typeof multiSelectSelectedItemOnlyStatus.noneLabel === 'string' && controlArr.labels.length === 0 ? multiSelectSelectedItemOnlyStatus.noneLabel : null, typeof multiSelectSelectedItemOnlyStatus.allItemsLabel === 'string' && controlArr.labels.length === optionsData.length ? multiSelectSelectedItemOnlyStatus.allItemsLabel : null, typeof multiSelectSelectedItemOnlyStatus.itemsLabel !== 'string' && controlArr.labels.length > 0 ? MULTI_SEL_SELECTED_STATUS.itemsLabel.replace('{num}', controlArr.labels.length) : null, typeof multiSelectSelectedItemOnlyStatus.noneLabel !== 'string' && controlArr.labels.length === 0 ? MULTI_SEL_SELECTED_STATUS.noneLabel : null, typeof multiSelectSelectedItemOnlyStatus.allItemsLabel !== 'string' && controlArr.labels.length === optionsData.length ? MULTI_SEL_SELECTED_STATUS.allItemsLabel : null)) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, controlArr.labels.map(function (item, index) {
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("li", {
       key: index
     }, stripHTML(item), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("a", {
@@ -2587,7 +2595,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     className: "mf-select-multi__list-item-placeholder ".concat(typeof placeholder === 'undefined' || placeholder === '' ? 'hide' : '')
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
     className: "mf-select-multi__control-blinking-cursor ".concat(generateInputFocusStr() === placeholder && placeholder !== '' && typeof placeholder !== 'undefined' ? 'control-placeholder' : '', " ").concat(generateInputFocusStr() === '|' ? 'animated' : '')
-  }, generateInputFocusStr()))))), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
+  }, generateInputFocusStr())))))), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
     className: "arrow position-absolute top-0 end-0 me-2 mt-1",
     style: {
       translate: 'all .2s',
@@ -2683,6 +2691,30 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
   }, fetchNoneInfo || 'No match yet'), optionsData ? optionsData.map(function (item, index) {
     var startItemBorder = index === 0 ? 'border-top-0' : '';
     var endItemBorder = index === optionsData.length - 1 ? 'border-bottom-0' : '';
+
+    // disable selected options (only single selection)
+    var disabledCurrentOption = false;
+    if (typeof value !== 'undefined' && value !== null && value !== '' && typeof item.value !== 'undefined' && item.value !== null && item.value !== '') {
+      if (!MULTI_SEL_VALID) {
+        var _defaultValue = value.toString();
+        var filterRes = [];
+        var filterResQueryValue = optionsData.filter(function (item) {
+          return item.value == _defaultValue;
+        });
+        var filterResQueryLabel = optionsData.filter(function (item) {
+          return item.label == _defaultValue;
+        });
+        if (filterResQueryValue.length === 0 && filterResQueryLabel.length > 0) {
+          filterRes = filterResQueryValue;
+          if (filterResQueryValue.length === 0) filterRes = filterResQueryLabel;
+        }
+        var _targetValue = filterRes.length > 0 ? filterRes[0].value : _defaultValue;
+        var _realValue = item.value.toString();
+        if (_realValue === _targetValue && _targetValue !== '') {
+          disabledCurrentOption = true;
+        }
+      }
+    }
     if (!MULTI_SEL_VALID) {
       // ++++++++++++++++++++
       // Single selection
@@ -2692,7 +2724,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
         type: "button",
         "data-index": index,
         key: index,
-        className: "list-group-item list-group-item-action border-start-0 border-end-0 mf-select-multi__control-option-item ".concat(startItemBorder, " ").concat(endItemBorder, " border-bottom-0 ").concat(typeof item.disabled === 'undefined' ? '' : item.disabled == true ? 'disabled' : ''),
+        className: "list-group-item list-group-item-action border-start-0 border-end-0 mf-select-multi__control-option-item ".concat(startItemBorder, " ").concat(endItemBorder, " border-bottom-0 ").concat(typeof item.disabled === 'undefined' ? '' : item.disabled == true ? 'disabled' : '', " ").concat(disabledCurrentOption ? 'active disabled' : ''),
         "data-value": "".concat(item.value),
         "data-label": "".concat(item.label),
         "data-querystring": "".concat(typeof item.queryString === 'undefined' ? '' : item.queryString),

package/Tabs/index.js

@@ -141,26 +141,17 @@ var TabPanel = function TabPanel(props) {
     attributes = _objectWithoutProperties(props, _excluded);
   var _expandClassName = typeof expandedActiveClassNameForPanel !== 'undefined' ? expandedActiveClassNameForPanel : '';
   var activedClassName = typeof defaultActive !== 'undefined' && defaultActive !== false ? " active ".concat(_expandClassName) : " ".concat(_expandClassName);
+  var activedStyles = typeof defaultActive !== 'undefined' && defaultActive !== false ? {} : {
+    height: '0',
+    overflow: 'hidden'
+  };
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", _extends({
     "data-index": index,
     "data-tabpanel-index": index,
     role: "tabpanel",
     id: targetId,
     className: tabpanelClass ? "tab-pane d-block ".concat(tabpanelClass, " ").concat(activedClassName) : "tab-pane d-block ".concat(activedClassName),
-    ref: function ref(node) {
-      if (node) {
-        // !!!Special note:
-        // If you want to hide the tab in advance, please use `{ height: 0; overflow: hidden; }`, do not use `{ display: none }`
-        // Otherwise it will cause the scrollHeight of the element inside the child node to be 0
-        if (typeof defaultActive !== 'undefined' && defaultActive !== false) {
-          node.style.removeProperty('height');
-          node.style.removeProperty('overflow');
-        } else {
-          node.style.setProperty('height', '0', 'important');
-          node.style.setProperty('overflow', 'hidden', 'important');
-        }
-      }
-    }
+    style: activedStyles
   }, attributes)));
 };
 /* harmony default export */ const src_TabPanel = (TabPanel);

package/lib/cjs/MultiFuncSelect/index.d.ts

@@ -23,6 +23,11 @@ interface MultiSelectConfig {
     selectAllLabel?: string;
     data: MultiSelectDataConfig | null;
 }
+interface multiSelectSelectedItemOnlyStatusConfig {
+    itemsLabel?: string;
+    allItemsLabel?: string;
+    noneLabel?: string;
+}
 interface CleanTriggerConfig {
     valid: boolean;
     cleanValueLabel?: string;
@@ -31,6 +36,7 @@ declare type MultiFuncSelectProps = {
     wrapperClassName?: string;
     controlClassName?: string;
     multiSelect?: MultiSelectConfig;
+    multiSelectSelectedItemOnlyStatus?: multiSelectSelectedItemOnlyStatusConfig;
     cleanTrigger?: CleanTriggerConfig;
     value?: string;
     label?: React.ReactNode | string;

package/lib/cjs/MultiFuncSelect/index.js

@@ -876,7 +876,7 @@ var enableBodyScroll = function enableBodyScroll(targetElement) {
 // EXTERNAL MODULE: ./src/utils/tree.js
 var tree = __webpack_require__(602);
 ;// CONCATENATED MODULE: ./src/index.tsx
-var _excluded = ["wrapperClassName", "controlClassName", "multiSelect", "disabled", "required", "value", "label", "name", "readOnly", "placeholder", "id", "options", "cleanTrigger", "lockBodyScroll", "hierarchical", "indentation", "doubleIndent", "style", "depth", "controlArrow", "winWidth", "tabIndex", "fetchTrigger", "fetchTriggerForDefaultData", "fetchNoneInfo", "fetchUpdate", "fetchFuncAsync", "fetchFuncMethod", "fetchFuncMethodParams", "data", "extractValueByBrackets", "fetchCallback", "onFetch", "onLoad", "onSelect", "onChange", "onBlur", "onFocus"];
+var _excluded = ["wrapperClassName", "controlClassName", "multiSelect", "multiSelectSelectedItemOnlyStatus", "disabled", "required", "value", "label", "name", "readOnly", "placeholder", "id", "options", "cleanTrigger", "lockBodyScroll", "hierarchical", "indentation", "doubleIndent", "style", "depth", "controlArrow", "winWidth", "tabIndex", "fetchTrigger", "fetchTriggerForDefaultData", "fetchNoneInfo", "fetchUpdate", "fetchFuncAsync", "fetchFuncMethod", "fetchFuncMethodParams", "data", "extractValueByBrackets", "fetchCallback", "onFetch", "onLoad", "onSelect", "onChange", "onBlur", "onFocus"];
 function src_toConsumableArray(arr) { return src_arrayWithoutHoles(arr) || src_iterableToArray(arr) || src_unsupportedIterableToArray(arr) || src_nonIterableSpread(); }
 function src_nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function src_iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
@@ -913,6 +913,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
   var wrapperClassName = props.wrapperClassName,
     controlClassName = props.controlClassName,
     multiSelect = props.multiSelect,
+    multiSelectSelectedItemOnlyStatus = props.multiSelectSelectedItemOnlyStatus,
     disabled = props.disabled,
     required = props.required,
     value = props.value,
@@ -1010,6 +1011,11 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
   var selectedSign = false;
   var MULTI_SEL_VALID = multiSelect ? multiSelect.valid : false;
   var MULTI_SEL_LABEL = multiSelect ? multiSelect.selectAllLabel : 'Select all options';
+  var MULTI_SEL_SELECTED_STATUS = {
+    itemsLabel: '{num} Selected',
+    allItemsLabel: 'All Content',
+    noneLabel: 'No items selected'
+  };
   var _useState17 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({
       labels: [],
       values: []
@@ -2567,7 +2573,9 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     className: "mf-select-multi__inputplaceholder-inner"
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("ul", {
     className: "mf-select-multi__list"
-  }, controlArr.labels.map(function (item, index) {
+  }, typeof multiSelectSelectedItemOnlyStatus !== 'undefined' ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("li", {
+    className: "mf-select-multi__list-item-statusstring"
+  }, typeof multiSelectSelectedItemOnlyStatus.itemsLabel === 'string' && controlArr.labels.length > 0 && controlArr.labels.length < optionsData.length ? multiSelectSelectedItemOnlyStatus.itemsLabel.replace('{num}', controlArr.labels.length) : null, typeof multiSelectSelectedItemOnlyStatus.noneLabel === 'string' && controlArr.labels.length === 0 ? multiSelectSelectedItemOnlyStatus.noneLabel : null, typeof multiSelectSelectedItemOnlyStatus.allItemsLabel === 'string' && controlArr.labels.length === optionsData.length ? multiSelectSelectedItemOnlyStatus.allItemsLabel : null, typeof multiSelectSelectedItemOnlyStatus.itemsLabel !== 'string' && controlArr.labels.length > 0 ? MULTI_SEL_SELECTED_STATUS.itemsLabel.replace('{num}', controlArr.labels.length) : null, typeof multiSelectSelectedItemOnlyStatus.noneLabel !== 'string' && controlArr.labels.length === 0 ? MULTI_SEL_SELECTED_STATUS.noneLabel : null, typeof multiSelectSelectedItemOnlyStatus.allItemsLabel !== 'string' && controlArr.labels.length === optionsData.length ? MULTI_SEL_SELECTED_STATUS.allItemsLabel : null)) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, controlArr.labels.map(function (item, index) {
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("li", {
       key: index
     }, stripHTML(item), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("a", {
@@ -2587,7 +2595,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     className: "mf-select-multi__list-item-placeholder ".concat(typeof placeholder === 'undefined' || placeholder === '' ? 'hide' : '')
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
     className: "mf-select-multi__control-blinking-cursor ".concat(generateInputFocusStr() === placeholder && placeholder !== '' && typeof placeholder !== 'undefined' ? 'control-placeholder' : '', " ").concat(generateInputFocusStr() === '|' ? 'animated' : '')
-  }, generateInputFocusStr()))))), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
+  }, generateInputFocusStr())))))), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
     className: "arrow position-absolute top-0 end-0 me-2 mt-1",
     style: {
       translate: 'all .2s',
@@ -2683,6 +2691,30 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
   }, fetchNoneInfo || 'No match yet'), optionsData ? optionsData.map(function (item, index) {
     var startItemBorder = index === 0 ? 'border-top-0' : '';
     var endItemBorder = index === optionsData.length - 1 ? 'border-bottom-0' : '';
+
+    // disable selected options (only single selection)
+    var disabledCurrentOption = false;
+    if (typeof value !== 'undefined' && value !== null && value !== '' && typeof item.value !== 'undefined' && item.value !== null && item.value !== '') {
+      if (!MULTI_SEL_VALID) {
+        var _defaultValue = value.toString();
+        var filterRes = [];
+        var filterResQueryValue = optionsData.filter(function (item) {
+          return item.value == _defaultValue;
+        });
+        var filterResQueryLabel = optionsData.filter(function (item) {
+          return item.label == _defaultValue;
+        });
+        if (filterResQueryValue.length === 0 && filterResQueryLabel.length > 0) {
+          filterRes = filterResQueryValue;
+          if (filterResQueryValue.length === 0) filterRes = filterResQueryLabel;
+        }
+        var _targetValue = filterRes.length > 0 ? filterRes[0].value : _defaultValue;
+        var _realValue = item.value.toString();
+        if (_realValue === _targetValue && _targetValue !== '') {
+          disabledCurrentOption = true;
+        }
+      }
+    }
     if (!MULTI_SEL_VALID) {
       // ++++++++++++++++++++
       // Single selection
@@ -2692,7 +2724,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
         type: "button",
         "data-index": index,
         key: index,
-        className: "list-group-item list-group-item-action border-start-0 border-end-0 mf-select-multi__control-option-item ".concat(startItemBorder, " ").concat(endItemBorder, " border-bottom-0 ").concat(typeof item.disabled === 'undefined' ? '' : item.disabled == true ? 'disabled' : ''),
+        className: "list-group-item list-group-item-action border-start-0 border-end-0 mf-select-multi__control-option-item ".concat(startItemBorder, " ").concat(endItemBorder, " border-bottom-0 ").concat(typeof item.disabled === 'undefined' ? '' : item.disabled == true ? 'disabled' : '', " ").concat(disabledCurrentOption ? 'active disabled' : ''),
         "data-value": "".concat(item.value),
         "data-label": "".concat(item.label),
         "data-querystring": "".concat(typeof item.queryString === 'undefined' ? '' : item.queryString),

package/lib/cjs/Tabs/index.js

@@ -141,26 +141,17 @@ var TabPanel = function TabPanel(props) {
     attributes = _objectWithoutProperties(props, _excluded);
   var _expandClassName = typeof expandedActiveClassNameForPanel !== 'undefined' ? expandedActiveClassNameForPanel : '';
   var activedClassName = typeof defaultActive !== 'undefined' && defaultActive !== false ? " active ".concat(_expandClassName) : " ".concat(_expandClassName);
+  var activedStyles = typeof defaultActive !== 'undefined' && defaultActive !== false ? {} : {
+    height: '0',
+    overflow: 'hidden'
+  };
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", _extends({
     "data-index": index,
     "data-tabpanel-index": index,
     role: "tabpanel",
     id: targetId,
     className: tabpanelClass ? "tab-pane d-block ".concat(tabpanelClass, " ").concat(activedClassName) : "tab-pane d-block ".concat(activedClassName),
-    ref: function ref(node) {
-      if (node) {
-        // !!!Special note:
-        // If you want to hide the tab in advance, please use `{ height: 0; overflow: hidden; }`, do not use `{ display: none }`
-        // Otherwise it will cause the scrollHeight of the element inside the child node to be 0
-        if (typeof defaultActive !== 'undefined' && defaultActive !== false) {
-          node.style.removeProperty('height');
-          node.style.removeProperty('overflow');
-        } else {
-          node.style.setProperty('height', '0', 'important');
-          node.style.setProperty('overflow', 'hidden', 'important');
-        }
-      }
-    }
+    style: activedStyles
   }, attributes)));
 };
 /* harmony default export */ const src_TabPanel = (TabPanel);

package/lib/css/MultiFuncSelect/index.css

@@ -143,6 +143,9 @@
   text-overflow: ellipsis;
   position: relative;
 }
+.mf-select__wrapper .mf-select-multi__inputplaceholder-wrapper ul.mf-select-multi__list li.mf-select-multi__list-item-statusstring {
+  background: transparent;
+}
 .mf-select__wrapper .mf-select-multi__inputplaceholder-wrapper ul.mf-select-multi__list li.mf-select-multi__list-item-placeholder {
   background: transparent;
   color: var(--mf-sel-placeholder-color);

package/lib/esm/MultiFuncSelect/index.scss

@@ -200,6 +200,10 @@
                 text-overflow: ellipsis;
                 position: relative;
 
+                &.mf-select-multi__list-item-statusstring {
+                    background: transparent;
+                }
+
                 &.mf-select-multi__list-item-placeholder {
                     background: transparent;
                     color: var(--mf-sel-placeholder-color);

package/lib/esm/MultiFuncSelect/index.tsx

@@ -50,6 +50,15 @@ interface MultiSelectConfig {
     data: MultiSelectDataConfig | null;
 }
 
+interface multiSelectSelectedItemOnlyStatusConfig {
+    itemsLabel?: string;
+    allItemsLabel?: string;
+    noneLabel?: string;
+}
+
+
+
+
 interface CleanTriggerConfig {
     valid: boolean;
     cleanValueLabel?: string;
@@ -60,6 +69,7 @@ type MultiFuncSelectProps = {
     wrapperClassName?: string;
     controlClassName?: string;
     multiSelect?: MultiSelectConfig;
+    multiSelectSelectedItemOnlyStatus?: multiSelectSelectedItemOnlyStatusConfig;
     cleanTrigger?: CleanTriggerConfig;
     value?: string;
     label?: React.ReactNode | string;
@@ -109,6 +119,7 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
         wrapperClassName,
         controlClassName,
         multiSelect,
+        multiSelectSelectedItemOnlyStatus,
         disabled,
         required,
         value,
@@ -190,10 +201,18 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
     let selectedSign: boolean = false;
     const MULTI_SEL_VALID = multiSelect ? multiSelect.valid : false;
     const MULTI_SEL_LABEL = multiSelect ? multiSelect.selectAllLabel : 'Select all options';
+    const MULTI_SEL_SELECTED_STATUS = {
+        itemsLabel: '{num} Selected',
+        allItemsLabel: 'All Content',
+        noneLabel: 'No items selected',
+    };
+
     const [controlArr, setControlArr] = useState<any>({
         labels: [],
         values: []
     });
+
+
     const multiSelControlOptionExist = (arr: any[], val: any) => {
         const _data = arr.filter(Boolean);
         return _data.map((v: any) => v.toString()).includes(val.toString());
@@ -1996,19 +2015,35 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
                         <div>
                             <ul className="mf-select-multi__list">
 
-                                {controlArr.labels.map((item: any, index: number) => (
-                                    <li key={index}>
-                                        {stripHTML(item)}
+                                {typeof multiSelectSelectedItemOnlyStatus !== 'undefined' ? <>
+                                
+                                    <li className="mf-select-multi__list-item-statusstring">
+                                        {typeof multiSelectSelectedItemOnlyStatus.itemsLabel === 'string' && controlArr.labels.length > 0 && controlArr.labels.length < optionsData.length ? multiSelectSelectedItemOnlyStatus.itemsLabel.replace('{num}', controlArr.labels.length) : null }
+                                        {typeof multiSelectSelectedItemOnlyStatus.noneLabel === 'string' && controlArr.labels.length === 0 ? multiSelectSelectedItemOnlyStatus.noneLabel : null }
+                                        {typeof multiSelectSelectedItemOnlyStatus.allItemsLabel === 'string' && controlArr.labels.length === optionsData.length ? multiSelectSelectedItemOnlyStatus.allItemsLabel : null }
 
-                                        <a href="#" tabIndex={-1} onClick={handleMultiControlItemRemove} data-item={controlArr.values[index]}><svg width="10px" height="10px" viewBox="0 0 1024 1024"><path fill="#000" d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z" /></svg></a>
-                                    </li>
-                                ))}
+                                        {/*-----*/}
+                                        {typeof multiSelectSelectedItemOnlyStatus.itemsLabel !== 'string' && controlArr.labels.length > 0 ? MULTI_SEL_SELECTED_STATUS.itemsLabel.replace('{num}', controlArr.labels.length) : null }
+                                        {typeof multiSelectSelectedItemOnlyStatus.noneLabel !== 'string' && controlArr.labels.length === 0 ? MULTI_SEL_SELECTED_STATUS.noneLabel : null }
+                                        {typeof multiSelectSelectedItemOnlyStatus.allItemsLabel !== 'string' && controlArr.labels.length === optionsData.length ? MULTI_SEL_SELECTED_STATUS.allItemsLabel : null }
 
-                                <li className={`mf-select-multi__list-item-placeholder ${typeof placeholder === 'undefined' || placeholder === '' ? 'hide' : ''}`}>
-                                    <span className={`mf-select-multi__control-blinking-cursor ${generateInputFocusStr() === placeholder && placeholder !== '' && typeof placeholder !== 'undefined' ? 'control-placeholder' : ''} ${generateInputFocusStr() === '|' ? 'animated' : ''}`}>
-                                        {generateInputFocusStr()}
-                                    </span>
-                                </li>
+                                    </li>
+                                </> : <>
+                                    {controlArr.labels.map((item: any, index: number) => (
+                                        <li key={index}>
+                                            {stripHTML(item)}
+
+                                            <a href="#" tabIndex={-1} onClick={handleMultiControlItemRemove} data-item={controlArr.values[index]}><svg width="10px" height="10px" viewBox="0 0 1024 1024"><path fill="#000" d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z" /></svg></a>
+                                        </li>
+                                    ))}
+
+                                    <li className={`mf-select-multi__list-item-placeholder ${typeof placeholder === 'undefined' || placeholder === '' ? 'hide' : ''}`}>
+                                        <span className={`mf-select-multi__control-blinking-cursor ${generateInputFocusStr() === placeholder && placeholder !== '' && typeof placeholder !== 'undefined' ? 'control-placeholder' : ''} ${generateInputFocusStr() === '|' ? 'animated' : ''}`}>
+                                            {generateInputFocusStr()}
+                                        </span>
+                                    </li>
+                                </>}
+                                
                             </ul>
 
                         </div>
@@ -2113,6 +2148,35 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
                                     const endItemBorder = index === optionsData.length - 1 ? 'border-bottom-0' : '';
 
 
+                                    // disable selected options (only single selection)
+                                    let disabledCurrentOption: boolean = false;
+                                    if (
+                                        (typeof value !== 'undefined' && value !== null && value !== '') &&
+                                        (typeof item.value !== 'undefined' && item.value !== null && item.value !== '')
+                                    ) {
+
+                                        if (!MULTI_SEL_VALID) {
+                                            const _defaultValue = value.toString();
+                                            let filterRes: any = [];
+                                            const filterResQueryValue = optionsData.filter((item: any) => item.value == _defaultValue);
+                                            const filterResQueryLabel = optionsData.filter((item: any) => item.label == _defaultValue);
+    
+                                            if (filterResQueryValue.length === 0 && filterResQueryLabel.length > 0) {
+                                                filterRes = filterResQueryValue;
+                                                if (filterResQueryValue.length === 0) filterRes = filterResQueryLabel;
+                                            }
+
+                                            const _targetValue = filterRes.length > 0 ? filterRes[0].value : _defaultValue;
+                                            const _realValue = item.value.toString();
+
+                                            if (_realValue === _targetValue && _targetValue !== '') {
+                                                disabledCurrentOption = true;
+                                            }
+                                        }
+
+                                    }
+                                    
+
 
                                     if (!MULTI_SEL_VALID) {
 
@@ -2124,7 +2188,7 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
                                             type="button" 
                                             data-index={index} 
                                             key={index} 
-                                            className={`list-group-item list-group-item-action border-start-0 border-end-0 mf-select-multi__control-option-item ${startItemBorder} ${endItemBorder} border-bottom-0 ${typeof item.disabled === 'undefined' ? '' : (item.disabled == true ? 'disabled' : '')}`} 
+                                            className={`list-group-item list-group-item-action border-start-0 border-end-0 mf-select-multi__control-option-item ${startItemBorder} ${endItemBorder} border-bottom-0 ${typeof item.disabled === 'undefined' ? '' : (item.disabled == true ? 'disabled' : '')} ${disabledCurrentOption ? 'active disabled' : ''}`} 
                                             data-value={`${item.value}`} 
                                             data-label={`${item.label}`} 
                                             data-querystring={`${typeof item.queryString === 'undefined' ? '' : item.queryString}`} 

package/lib/esm/Tabs/TabPanel.tsx

@@ -23,8 +23,8 @@ const TabPanel = (props: TabPanelProps) => {
 
     const _expandClassName =  typeof(expandedActiveClassNameForPanel) !== 'undefined' ? expandedActiveClassNameForPanel : '';
     const activedClassName = typeof(defaultActive) !== 'undefined' && defaultActive !== false ? ` active ${_expandClassName}` : ` ${_expandClassName}`;
+    const activedStyles = typeof(defaultActive) !== 'undefined' && defaultActive !== false ? {} : {height: '0', overflow: 'hidden'};
 
-    
     return (
         <>
 
@@ -33,22 +33,7 @@ const TabPanel = (props: TabPanelProps) => {
                 data-tabpanel-index={index} 
                 role="tabpanel" id={targetId} 
                 className={ tabpanelClass ? `tab-pane d-block ${tabpanelClass} ${activedClassName}` : `tab-pane d-block ${activedClassName}`}
-                ref={(node) => {
-                    if (node) {
-
-                        // !!!Special note:
-                        // If you want to hide the tab in advance, please use `{ height: 0; overflow: hidden; }`, do not use `{ display: none }`
-                        // Otherwise it will cause the scrollHeight of the element inside the child node to be 0
-                        if (typeof(defaultActive) !== 'undefined' && defaultActive !== false) {
-                            node.style.removeProperty('height');
-                            node.style.removeProperty('overflow');
-                        } else {
-                            node.style.setProperty('height', '0', 'important');
-                            node.style.setProperty('overflow', 'hidden', 'important');
-                        }
-
-                    }
-                }}
+                style={activedStyles}
                 {...attributes}
             ></div>
 

package/package.json

@@ -2,7 +2,7 @@
   "author": "UIUX Lab",
   "email": "uiuxlab@gmail.com",
   "name": "funda-ui",
-  "version": "2.0.475",
+  "version": "2.0.555",
   "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
   "repository": {
     "type": "git",