bromcom-ui 2.12.3-rc.3-test.0 → 2.12.4-rc.0

package/dist/components/Overflow.js

@@ -183,61 +183,33 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-/**
- * @license React
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var b=Symbol.for("react.element"),c=Symbol.for("react.portal"),d=Symbol.for("react.fragment"),e=Symbol.for("react.strict_mode"),f=Symbol.for("react.profiler"),g=Symbol.for("react.provider"),h=Symbol.for("react.context"),k=Symbol.for("react.server_context"),l=Symbol.for("react.forward_ref"),m=Symbol.for("react.suspense"),n=Symbol.for("react.suspense_list"),p=Symbol.for("react.memo"),q=Symbol.for("react.lazy"),t=Symbol.for("react.offscreen"),u;u=Symbol.for("react.module.reference");
-function v(a){if("object"===typeof a&&null!==a){var r=a.$$typeof;switch(r){case b:switch(a=a.type,a){case d:case f:case e:case m:case n:return a;default:switch(a=a&&a.$$typeof,a){case k:case h:case l:case q:case p:case g:return a;default:return r}}case c:return r}}}var ContextConsumer=h;var ContextProvider=g;var Element$1=b;var ForwardRef=l;var Fragment=d;var Lazy=q;var Memo=p;var Portal=c;var Profiler=f;var StrictMode=e;var Suspense=m;
-var SuspenseList=n;var isAsyncMode=function(){return !1};var isConcurrentMode=function(){return !1};var isContextConsumer=function(a){return v(a)===h};var isContextProvider=function(a){return v(a)===g};var isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===b};var isForwardRef=function(a){return v(a)===l};var isFragment=function(a){return v(a)===d};var isLazy=function(a){return v(a)===q};var isMemo=function(a){return v(a)===p};
-var isPortal=function(a){return v(a)===c};var isProfiler=function(a){return v(a)===f};var isStrictMode=function(a){return v(a)===e};var isSuspense=function(a){return v(a)===m};var isSuspenseList=function(a){return v(a)===n};
-var isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===d||a===f||a===e||a===m||a===n||a===t||"object"===typeof a&&null!==a&&(a.$$typeof===q||a.$$typeof===p||a.$$typeof===g||a.$$typeof===h||a.$$typeof===l||a.$$typeof===u||void 0!==a.getModuleId)?!0:!1};var typeOf=v;
-
-var reactIs_production_min = {
-	ContextConsumer: ContextConsumer,
-	ContextProvider: ContextProvider,
-	Element: Element$1,
-	ForwardRef: ForwardRef,
-	Fragment: Fragment,
-	Lazy: Lazy,
-	Memo: Memo,
-	Portal: Portal,
-	Profiler: Profiler,
-	StrictMode: StrictMode,
-	Suspense: Suspense,
-	SuspenseList: SuspenseList,
-	isAsyncMode: isAsyncMode,
-	isConcurrentMode: isConcurrentMode,
-	isContextConsumer: isContextConsumer,
-	isContextProvider: isContextProvider,
-	isElement: isElement,
-	isForwardRef: isForwardRef,
-	isFragment: isFragment,
-	isLazy: isLazy,
-	isMemo: isMemo,
-	isPortal: isPortal,
-	isProfiler: isProfiler,
-	isStrictMode: isStrictMode,
-	isSuspense: isSuspense,
-	isSuspenseList: isSuspenseList,
-	isValidElementType: isValidElementType,
-	typeOf: typeOf
-};
+function _typeof$1(obj) {
+  "@babel/helpers - typeof";
 
-createCommonjsModule(function (module, exports) {
-});
+  return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof$1(obj);
+}
 
-var reactIs = createCommonjsModule(function (module) {
+var REACT_ELEMENT_TYPE_18 = Symbol.for('react.element');
+var REACT_ELEMENT_TYPE_19 = Symbol.for('react.transitional.element');
+var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
 
-{
-  module.exports = reactIs_production_min;
+/**
+ * Compatible with React 18 or 19 to check if node is a Fragment.
+ */
+function isFragment$1(object) {
+  return (
+    // Base object type
+    object && _typeof$1(object) === 'object' && (
+    // React Element type
+    object.$$typeof === REACT_ELEMENT_TYPE_18 || object.$$typeof === REACT_ELEMENT_TYPE_19) &&
+    // React Fragment type
+    object.type === REACT_FRAGMENT_TYPE
+  );
 }
-});
 
 function toArray(children) {
   var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -248,7 +220,7 @@ function toArray(children) {
     }
     if (Array.isArray(child)) {
       ret = ret.concat(toArray(child));
-    } else if (reactIs.isFragment(child) && child.props) {
+    } else if (isFragment$1(child) && child.props) {
       ret = ret.concat(toArray(child.props.children, option));
     } else {
       ret.push(child);
@@ -307,22 +279,22 @@ warningOnce.preMessage = preMessage;
 warningOnce.resetWarned = resetWarned;
 warningOnce.noteOnce = noteOnce;
 
-function _typeof$1(obj) {
+function _typeof(obj) {
   "@babel/helpers - typeof";
 
-  return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
     return typeof obj;
   } : function (obj) {
     return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof$1(obj);
+  }, _typeof(obj);
 }
 
 function _toPrimitive(input, hint) {
-  if (_typeof$1(input) !== "object" || input === null) return input;
+  if (_typeof(input) !== "object" || input === null) return input;
   var prim = input[Symbol.toPrimitive];
   if (prim !== undefined) {
     var res = prim.call(input, hint || "default");
-    if (_typeof$1(res) !== "object") return res;
+    if (_typeof(res) !== "object") return res;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
   return (hint === "string" ? String : Number)(input);
@@ -330,7 +302,7 @@ function _toPrimitive(input, hint) {
 
 function _toPropertyKey(arg) {
   var key = _toPrimitive(arg, "string");
-  return _typeof$1(key) === "symbol" ? key : String(key);
+  return _typeof(key) === "symbol" ? key : String(key);
 }
 
 function _defineProperty(obj, key, value) {
@@ -377,27 +349,88 @@ function isDOM(node) {
 }
 
 /**
- * Return if a node is a DOM node. Else will return by `findDOMNode`
+ * Retrieves a DOM node via a ref, and does not invoke `findDOMNode`.
  */
-function findDOMNode(node) {
+function getDOM(node) {
+  if (node && _typeof$1(node) === 'object' && isDOM(node.nativeElement)) {
+    return node.nativeElement;
+  }
   if (isDOM(node)) {
     return node;
   }
+  return null;
+}
+
+/**
+ * Return if a node is a DOM node. Else will return by `findDOMNode`
+ */
+function findDOMNode(node) {
+  var domNode = getDOM(node);
+  if (domNode) {
+    return domNode;
+  }
   if (node instanceof react.Component) {
-    return reactDom.findDOMNode(node);
+    var _ReactDOM$findDOMNode;
+    return (_ReactDOM$findDOMNode = reactDom.findDOMNode) === null || _ReactDOM$findDOMNode === void 0 ? void 0 : _ReactDOM$findDOMNode.call(reactDom, node);
   }
   return null;
 }
 
-function _typeof(obj) {
-  "@babel/helpers - typeof";
+/**
+ * @license React
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var b=Symbol.for("react.element"),c=Symbol.for("react.portal"),d=Symbol.for("react.fragment"),e=Symbol.for("react.strict_mode"),f=Symbol.for("react.profiler"),g=Symbol.for("react.provider"),h=Symbol.for("react.context"),k=Symbol.for("react.server_context"),l=Symbol.for("react.forward_ref"),m=Symbol.for("react.suspense"),n=Symbol.for("react.suspense_list"),p=Symbol.for("react.memo"),q=Symbol.for("react.lazy"),t=Symbol.for("react.offscreen"),u;u=Symbol.for("react.module.reference");
+function v(a){if("object"===typeof a&&null!==a){var r=a.$$typeof;switch(r){case b:switch(a=a.type,a){case d:case f:case e:case m:case n:return a;default:switch(a=a&&a.$$typeof,a){case k:case h:case l:case q:case p:case g:return a;default:return r}}case c:return r}}}var ContextConsumer=h;var ContextProvider=g;var Element$1=b;var ForwardRef=l;var Fragment=d;var Lazy=q;var Memo=p;var Portal=c;var Profiler=f;var StrictMode=e;var Suspense=m;
+var SuspenseList=n;var isAsyncMode=function(){return !1};var isConcurrentMode=function(){return !1};var isContextConsumer=function(a){return v(a)===h};var isContextProvider=function(a){return v(a)===g};var isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===b};var isForwardRef=function(a){return v(a)===l};var isFragment=function(a){return v(a)===d};var isLazy=function(a){return v(a)===q};var isMemo=function(a){return v(a)===p};
+var isPortal=function(a){return v(a)===c};var isProfiler=function(a){return v(a)===f};var isStrictMode=function(a){return v(a)===e};var isSuspense=function(a){return v(a)===m};var isSuspenseList=function(a){return v(a)===n};
+var isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===d||a===f||a===e||a===m||a===n||a===t||"object"===typeof a&&null!==a&&(a.$$typeof===q||a.$$typeof===p||a.$$typeof===g||a.$$typeof===h||a.$$typeof===l||a.$$typeof===u||void 0!==a.getModuleId)?!0:!1};var typeOf=v;
 
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof(obj);
+var reactIs_production_min = {
+	ContextConsumer: ContextConsumer,
+	ContextProvider: ContextProvider,
+	Element: Element$1,
+	ForwardRef: ForwardRef,
+	Fragment: Fragment,
+	Lazy: Lazy,
+	Memo: Memo,
+	Portal: Portal,
+	Profiler: Profiler,
+	StrictMode: StrictMode,
+	Suspense: Suspense,
+	SuspenseList: SuspenseList,
+	isAsyncMode: isAsyncMode,
+	isConcurrentMode: isConcurrentMode,
+	isContextConsumer: isContextConsumer,
+	isContextProvider: isContextProvider,
+	isElement: isElement,
+	isForwardRef: isForwardRef,
+	isFragment: isFragment,
+	isLazy: isLazy,
+	isMemo: isMemo,
+	isPortal: isPortal,
+	isProfiler: isProfiler,
+	isStrictMode: isStrictMode,
+	isSuspense: isSuspense,
+	isSuspenseList: isSuspenseList,
+	isValidElementType: isValidElementType,
+	typeOf: typeOf
+};
+
+createCommonjsModule(function (module, exports) {
+});
+
+var reactIs = createCommonjsModule(function (module) {
+
+{
+  module.exports = reactIs_production_min;
 }
+});
 
 function useMemo(getValue, condition, shouldUpdate) {
   var cacheRef = react.useRef({});
@@ -408,24 +441,23 @@ function useMemo(getValue, condition, shouldUpdate) {
   return cacheRef.current.value;
 }
 
-function fillRef(ref, node) {
+var ReactMajorVersion = Number(react.version.split('.')[0]);
+var fillRef = function fillRef(ref, node) {
   if (typeof ref === 'function') {
     ref(node);
-  } else if (_typeof(ref) === 'object' && ref && 'current' in ref) {
+  } else if (_typeof$1(ref) === 'object' && ref && 'current' in ref) {
     ref.current = node;
   }
-}
+};
 
 /**
  * Merge refs into one ref function to support ref passing.
  */
-function composeRef() {
+var composeRef = function composeRef() {
   for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
     refs[_key] = arguments[_key];
   }
-  var refList = refs.filter(function (ref) {
-    return ref;
-  });
+  var refList = refs.filter(Boolean);
   if (refList.length <= 1) {
     return refList[0];
   }
@@ -434,8 +466,8 @@ function composeRef() {
       fillRef(ref, node);
     });
   };
-}
-function useComposeRef() {
+};
+var useComposeRef = function useComposeRef() {
   for (var _len2 = arguments.length, refs = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
     refs[_key2] = arguments[_key2];
   }
@@ -446,9 +478,17 @@ function useComposeRef() {
       return ref !== next[i];
     });
   });
-}
-function supportRef(nodeOrComponent) {
+};
+var supportRef = function supportRef(nodeOrComponent) {
   var _type$prototype, _nodeOrComponent$prot;
+  if (!nodeOrComponent) {
+    return false;
+  }
+
+  // React 19 no need `forwardRef` anymore. So just pass if is a React element.
+  if (isReactElement(nodeOrComponent) && ReactMajorVersion >= 19) {
+    return true;
+  }
   var type = reactIs.isMemo(nodeOrComponent) ? nodeOrComponent.type.type : nodeOrComponent.type;
 
   // Function component node
@@ -461,8 +501,26 @@ function supportRef(nodeOrComponent) {
     return false;
   }
   return true;
+};
+function isReactElement(node) {
+  return /*#__PURE__*/react.isValidElement(node) && !isFragment$1(node);
 }
-/* eslint-enable */
+
+/**
+ * In React 19. `ref` is not a property from node.
+ * But a property from `props.ref`.
+ * To check if `props.ref` exist or fallback to `ref`.
+ */
+var getNodeRef = function getNodeRef(node) {
+  if (node && isReactElement(node)) {
+    var ele = node;
+
+    // Source from:
+    // https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/getReactNodeRef/getReactNodeRef.ts
+    return ele.props.propertyIsEnumerable('ref') ? ele.props.ref : ele.ref;
+  }
+  return null;
+};
 
 var CollectionContext = /*#__PURE__*/react.createContext(null);
 /**
@@ -1533,7 +1591,7 @@ function _assertThisInitialized(self) {
 }
 
 function _possibleConstructorReturn(self, call) {
-  if (call && (_typeof$1(call) === "object" || typeof call === "function")) {
+  if (call && (_typeof(call) === "object" || typeof call === "function")) {
     return call;
   } else if (call !== void 0) {
     throw new TypeError("Derived constructors may only return object or undefined");
@@ -1602,7 +1660,7 @@ function SingleObserver(props, ref) {
     var _elementRef$current;
     return findDOMNode(elementRef.current) || (
     // Support `nativeElement` format
-    elementRef.current && _typeof$1(elementRef.current) === 'object' ? findDOMNode((_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.nativeElement) : null) || findDOMNode(wrapperRef.current);
+    elementRef.current && _typeof(elementRef.current) === 'object' ? findDOMNode((_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.nativeElement) : null) || findDOMNode(wrapperRef.current);
   };
   react.useImperativeHandle(ref, function () {
     return getDom();
@@ -2214,4 +2272,4 @@ ForwardOverflow.Item = RawItem;
 ForwardOverflow.RESPONSIVE = RESPONSIVE;
 ForwardOverflow.INVALIDATE = INVALIDATE;
 
-export { ForwardOverflow as F, RefResizeObserver as R, _typeof as _, useLayoutUpdateEffect as a, useLayoutEffect as b, canUseDom as c, useComposeRef as d, findDOMNode as e, fillRef as f, composeRef as g, warningOnce as h, isDOM as i, supportRef as s, useEvent as u, wrapperRaf as w };
+export { ForwardOverflow as F, RefResizeObserver as R, _typeof$1 as _, useLayoutUpdateEffect as a, useLayoutEffect as b, canUseDom as c, useComposeRef as d, findDOMNode as e, fillRef as f, getNodeRef as g, composeRef as h, isDOM as i, warningOnce as j, supportRef as s, useEvent as u, wrapperRaf as w };

package/dist/components/generate.js

@@ -5,7 +5,7 @@
 import { Build } from '@stencil/core/internal/client';
 import { c as colors } from './colors2.js';
 
-const version = "2.12.3-rc.3-test.0";
+const version = "2.12.4-rc.0";
 
 /**
  * 'status' prop predefined values

package/dist/components/list.js

@@ -949,6 +949,7 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.shouldTriggerChange = undefined;
     this.placement = Bcm$1.Placement["bottom-start"];
     this.disableChangeEvent = false;
+    this.autoFocusSelected = false;
     this.data = [];
     window.addEventListener("scroll", this.handleWheel.bind(this), true);
     window.addEventListener("wheel", this.handleWheel.bind(this), true);
@@ -1061,6 +1062,7 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   async handleOpen() {
+    const isAutoSelected = this.autoFocusSelected && this.type == "select" && !this.checkboxes && this.value;
     if (this.isOpen) {
       this.detectClone();
       if (this.type == "select" || this.type == "autocomplete" || this.linkedComponent) {
@@ -1075,10 +1077,15 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.onSelectSearch();
       await delay(50);
       this.isOpenAnimation = true;
+      if (isAutoSelected) {
+        this.focusSelectedElement();
+      }
     }
     else {
+      if (!isAutoSelected) {
+        this.listScrollToTop();
+      }
       this.isOpenAnimation = false;
-      this.listScrollToTop();
       this.close.emit();
       this.listClose.emit();
       await delay(100);
@@ -1431,22 +1438,33 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.markForCheck();
   }
   async initState() {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     this.onClearSearch();
     await listState.setValue({
       id: this._id,
       dataSource: this.data && snq(() => (typeof this.data == "string" ? JSON.parse(this.data) : this.data), []),
       options: this,
     });
-    const { totalRoots, totalItems } = listState.getValue(this._id);
+    const { totalRoots, totalItems, dataSource } = listState.getValue(this._id);
     this.totalData = (totalItems === null || totalItems === void 0 ? void 0 : totalItems.total) || 0;
     this.totalRootData = totalRoots || 0;
     this.value = this.checkboxes ? (await this.getCheckedList()).checkedList : listState.selectedItem(this._id) ? listState.selectedItem(this._id)[0] : null;
+    /** @description Focus selected element * BUG 282262 */
+    if (this.autoFocusSelected && this.type == "select" && this.value && !this.checkboxes) {
+      const selectedId = Array.isArray(this.value) ? (_a = this.value[0]) === null || _a === void 0 ? void 0 : _a.id : (_b = this.value) === null || _b === void 0 ? void 0 : _b.id;
+      if (selectedId && dataSource) {
+        const selectedIndex = dataSource.findIndex(item => item.id === selectedId);
+        if (selectedIndex !== -1 && selectedIndex >= this.limit) {
+          this.limit = selectedIndex + 5;
+          this.searchResultLimit = this.limit;
+        }
+      }
+    }
     if (!this.checkboxes) {
-      this.inputText = Generate.domParser((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || null;
+      this.inputText = Generate.domParser((_c = this.value) === null || _c === void 0 ? void 0 : _c.text) || null;
     }
     // checkli olan subparentların indeterminate kontrolü için
-    if (this.checkboxes && ((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+    if (this.checkboxes && ((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) > 0) {
       const checkedIDs = [];
       this.value.forEach(item => {
         if (!item.items || item.items.length === 0) {
@@ -1455,7 +1473,7 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       });
       await this.addChecked(checkedIDs, false, false);
     }
-    await this.handleIndeterminate((_c = this.value) === null || _c === void 0 ? void 0 : _c.length, this.totalData);
+    await this.handleIndeterminate((_e = this.value) === null || _e === void 0 ? void 0 : _e.length, this.totalData);
     await this.markForCheck();
   }
   async markForCheck() {
@@ -1538,20 +1556,16 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   getAutoCompleteInput() {
     return document.getElementById(`bcm-list-input-tag-container-${this._id}-autocomplete-input`);
   }
+  /** @description Fixes the issue where the list appears empty during fast scrolling. */
   dataScrollEvent(event) {
-    let count = 0;
-    let io = new IntersectionObserver((data) => {
-      if (count === 0) {
-        count++;
-        if (data[0].isIntersecting) {
-          this.limit += 15;
-          this.searchResultLimit += 15;
-          io.disconnect();
-          io = null;
-        }
-      }
-    }, this.options);
-    io.observe(event.target.lastElementChild);
+    var _a, _b;
+    const itemHeight = this.size === 'small' ? 28 : this.size === 'large' ? 48 : 36;
+    const currentScrollBottom = ((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.scrollTop) + ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.clientHeight);
+    const requiredItems = Math.ceil(currentScrollBottom / itemHeight) + 20;
+    if (requiredItems > this.limit) {
+      this.limit = requiredItems;
+      this.searchResultLimit = requiredItems;
+    }
   }
   async calculateLocation() {
     var _a, _b;
@@ -1621,6 +1635,28 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.listOpen.emit();
     }
   }
+  /** @description Focus selected element * BUG 282262 */
+  focusSelectedElement() {
+    var _a;
+    const listElement = document.querySelector(`#bcm-list-${this._id}`);
+    if (!listElement)
+      return;
+    const selectedId = (_a = this.value) === null || _a === void 0 ? void 0 : _a.id;
+    if (selectedId) {
+      const targetItem = listElement.querySelector(`[id*="${selectedId}"]`);
+      if (targetItem) {
+        targetItem.scrollIntoView({
+          block: 'center',
+          inline: 'nearest',
+          behavior: 'auto'
+        });
+        targetItem.focus();
+        const items = listElement.querySelectorAll(".bcm-list__item");
+        items.forEach(i => i.classList.remove("focused"));
+        targetItem.classList.add("focused");
+      }
+    }
+  }
   render() {
     const { checkboxes, treeview, label, size, disabled, readonly, required, hidden, fullWidth, searchable } = this.getOptions();
     const hostClasses = classnames("bcm-list", `bcm-list__size-${size}`, `bcm-list__${this.type}`, size === "large" ? "size-3" : "size-2", {
@@ -1705,6 +1741,7 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "emptyIcon": [1, "empty-icon"],
     "placement": [1025],
     "disableChangeEvent": [4, "disable-change-event"],
+    "autoFocusSelected": [4, "auto-focus-selected"],
     "data": [1032],
     "inputText": [32],
     "isOpen": [32],