@salutejs/plasma-new-hope 0.336.0-canary.2210.17546691141.0 → 0.336.0-canary.2210.17574972381.0

package/styled-components/cjs/components/Dropdown/Dropdown.js

@@ -176,7 +176,7 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 var dropdownRoot = function(Root) {
     return /*#__PURE__*/ (0, _react.forwardRef)(function(_param, ref) {
-        var items = _param.items, children = _param.children, placement = _param.placement, offset = _param.offset, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, onToggle = _param.onToggle, size = _param.size, view = _param.view, _param_itemRole = _param.itemRole, itemRole = _param_itemRole === void 0 ? 'treeitem' : _param_itemRole, className = _param.className, listMaxHeight = _param.listMaxHeight, listWidth = _param.listWidth, listHeight = _param.listHeight, listOverflow = _param.listOverflow, _param_closeOnSelect = _param.closeOnSelect, closeOnSelect = _param_closeOnSelect === void 0 ? true : _param_closeOnSelect, onHover = _param.onHover, onItemSelect = _param.onItemSelect, onItemClick = _param.onItemClick, _param_trigger = _param.trigger, trigger = _param_trigger === void 0 ? 'click' : _param_trigger, _param_openByRightClick = _param.openByRightClick, openByRightClick = _param_openByRightClick === void 0 ? false : _param_openByRightClick, _param_variant = _param.variant, variant = _param_variant === void 0 ? 'normal' : _param_variant, _param_hasArrow = _param.hasArrow, hasArrow = _param_hasArrow === void 0 ? true : _param_hasArrow, _param_alwaysOpened = _param.alwaysOpened, alwaysOpened = _param_alwaysOpened === void 0 ? false : _param_alwaysOpened, portal = _param.portal, renderItem = _param.renderItem, zIndex = _param.zIndex, beforeList = _param.beforeList, afterList = _param.afterList, rest = _object_without_properties(_param, [
+        var items = _param.items, children = _param.children, placement = _param.placement, offset = _param.offset, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, onToggle = _param.onToggle, size = _param.size, view = _param.view, _param_itemRole = _param.itemRole, itemRole = _param_itemRole === void 0 ? 'treeitem' : _param_itemRole, className = _param.className, listMaxHeight = _param.listMaxHeight, listWidth = _param.listWidth, listHeight = _param.listHeight, _param_closeOnSelect = _param.closeOnSelect, closeOnSelect = _param_closeOnSelect === void 0 ? true : _param_closeOnSelect, onHover = _param.onHover, onItemSelect = _param.onItemSelect, onItemClick = _param.onItemClick, _param_trigger = _param.trigger, trigger = _param_trigger === void 0 ? 'click' : _param_trigger, _param_openByRightClick = _param.openByRightClick, openByRightClick = _param_openByRightClick === void 0 ? false : _param_openByRightClick, _param_variant = _param.variant, variant = _param_variant === void 0 ? 'normal' : _param_variant, _param_hasArrow = _param.hasArrow, hasArrow = _param_hasArrow === void 0 ? true : _param_hasArrow, _param_alwaysOpened = _param.alwaysOpened, alwaysOpened = _param_alwaysOpened === void 0 ? false : _param_alwaysOpened, portal = _param.portal, renderItem = _param.renderItem, zIndex = _param.zIndex, beforeList = _param.beforeList, afterList = _param.afterList, rest = _object_without_properties(_param, [
             "items",
             "children",
             "placement",
@@ -190,7 +190,6 @@ var dropdownRoot = function(Root) {
             "listMaxHeight",
             "listWidth",
             "listHeight",
-            "listOverflow",
             "closeOnSelect",
             "onHover",
             "onItemSelect",
@@ -216,6 +215,7 @@ var dropdownRoot = function(Root) {
         var _useHashMaps1 = _sliced_to_array((0, _useHashMaps.useHashMaps)(items), 2), pathMap = _useHashMaps1[0], focusedToValueMap = _useHashMaps1[1];
         var activeDescendantItemValue = ((_getItemByFocused = (0, _utils2.getItemByFocused)(focusedPath, focusedToValueMap)) === null || _getItemByFocused === void 0 ? void 0 : _getItemByFocused.value) || '';
         var floatingPopoverRef = (0, _react.useRef)(null);
+        var listWrapperRef = (0, _react.useRef)(null);
         var treeId = (0, _utils.safeUseId)();
         // Логика работы при клике за пределами выпадающего списка
         var targetRef = (0, _hooks.useOutsideClick)(function(event) {
@@ -309,17 +309,14 @@ var dropdownRoot = function(Root) {
             className: (0, _utils1.cx)(className, _Dropdowntokens.classes.dropdownRoot),
             ref: ref,
             view: view,
-            size: size,
-            style: {
-                display: 'inline-block'
-            }
+            size: size
         }, rest), /*#__PURE__*/ _react.default.createElement(_Dropdownstyles.ListWrapper, {
+            ref: listWrapperRef,
             listWidth: listWidth
         }, /*#__PURE__*/ _react.default.createElement(_Dropdownstyles.Ul, {
             ref: targetRef,
             id: "".concat(treeId, "_tree_level_1"),
             role: "tree",
-            listOverflow: listOverflow,
             listMaxHeight: listMaxHeight || listHeight
         }, beforeList, items.map(function(item, index) {
             return /*#__PURE__*/ _react.default.createElement(_ui.DropdownInner, {
@@ -330,9 +327,8 @@ var dropdownRoot = function(Root) {
                 path: path,
                 dispatchPath: dispatchPath,
                 index: index,
-                listOverflow: listOverflow,
-                listMaxHeight: listMaxHeight || listHeight,
-                listWidth: listWidth
+                listWidth: listWidth,
+                portal: listWrapperRef
             });
         }), afterList)))));
     });

package/styled-components/cjs/components/Dropdown/Dropdown.styles.js

@@ -65,7 +65,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 var ListWrapper = _styledcomponents.default.div.withConfig({
     displayName: "Dropdown.styles__ListWrapper",
-    componentId: "sc-eabc61b1-0"
+    componentId: "sc-768e302d-0"
 })([
     "width:",
     ";padding:calc(var(",
@@ -82,19 +82,15 @@ var ListWrapper = _styledcomponents.default.div.withConfig({
 }, _Dropdowntokens.tokens.padding, _Dropdowntokens.tokens.borderWidth, _Dropdowntokens.tokens.borderRadius, _Dropdowntokens.constants.background, _Dropdowntokens.constants.boxShadow, _Dropdowntokens.tokens.borderWidth, _Dropdowntokens.tokens.borderColor);
 var Ul = _styledcomponents.default.ul.withConfig({
     displayName: "Dropdown.styles__Ul",
-    componentId: "sc-eabc61b1-1"
+    componentId: "sc-768e302d-1"
 })([
     "max-height:",
-    ";overflow-y:",
-    ";border-radius:calc(var(",
+    ";overflow-x:hidden;overflow-y:auto;border-radius:calc(var(",
     ") - 0.125rem - var(",
     ",0rem));margin:0;padding:0;"
 ], function(param) {
     var listMaxHeight = param.listMaxHeight;
     return listMaxHeight ? (0, _utils.getCorrectHeight)(listMaxHeight) : 'auto';
-}, function(param) {
-    var listOverflow = param.listOverflow;
-    return listOverflow || 'visible';
 }, _Dropdowntokens.tokens.borderRadius, _Dropdowntokens.tokens.borderWidth);
 var base = (0, _styledcomponents.css)([
     ""

package/styled-components/cjs/components/Dropdown/hooks/useKeyboardNavigation.js

@@ -180,13 +180,9 @@ var useKeyNavigation = function(param) {
             case keys.Tab:
             case keys.Escape:
                 {
-                    dispatchFocusedPath({
-                        type: 'reset'
-                    });
-                    dispatchPath({
-                        type: 'reset'
-                    });
-                    handleGlobalToggle(false, event);
+                    if (path[0]) {
+                        handleGlobalToggle(false, event);
+                    }
                     break;
                 }
             case keys.Home:

package/styled-components/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js

@@ -8,19 +8,55 @@ Object.defineProperty(exports, "DropdownInner", {
         return DropdownInner;
     }
 });
-var _react = /*#__PURE__*/ _interop_require_default(require("react"));
+var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 var _utils = require("../../../../utils");
 var _DropdownItem = require("../DropdownItem/DropdownItem");
 var _Dropdownstyles = require("../../Dropdown.styles");
 var _FloatingPopover = require("../../FloatingPopover");
 var _utils1 = require("../../utils");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
     };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
 }
 var DropdownInner = function(param) {
-    var item = param.item, currentLevel = param.currentLevel, path = param.path, dispatchPath = param.dispatchPath, index = param.index, trigger = param.trigger, listMaxHeight = param.listMaxHeight, listOverflow = param.listOverflow, listWidth = param.listWidth;
+    var item = param.item, currentLevel = param.currentLevel, path = param.path, dispatchPath = param.dispatchPath, index = param.index, trigger = param.trigger, listWidth = param.listWidth, portal = param.portal;
     var handleToggle = function(opened) {
         if (opened) {
             dispatchPath({
@@ -35,6 +71,7 @@ var DropdownInner = function(param) {
             });
         }
     };
+    var listWrapperRef = (0, _react.useRef)(null);
     var isCurrentListOpen = path[currentLevel + 1] === item.value.toString();
     var treeId = (0, _utils.safeUseId)();
     var listId = "".concat(treeId, "_tree_level_").concat(currentLevel + 2);
@@ -55,14 +92,15 @@ var DropdownInner = function(param) {
                 ariaLevel: nextLevel,
                 ariaLabel: item.label
             }),
-            isInner: true
+            isInner: true,
+            portal: portal
         }, /*#__PURE__*/ _react.default.createElement(_Dropdownstyles.ListWrapper, {
+            ref: listWrapperRef,
             listWidth: listWidth
         }, /*#__PURE__*/ _react.default.createElement(_Dropdownstyles.Ul, {
             id: listId,
             role: "group",
-            listMaxHeight: listMaxHeight,
-            listOverflow: listOverflow
+            listMaxHeight: item.listMaxHeight
         }, item.items.map(function(innerItem, innerIndex) {
             return /*#__PURE__*/ _react.default.createElement(DropdownInner, {
                 key: "".concat(innerIndex, "/").concat(currentLevel),
@@ -72,9 +110,8 @@ var DropdownInner = function(param) {
                 dispatchPath: dispatchPath,
                 index: innerIndex,
                 trigger: trigger,
-                listMaxHeight: listMaxHeight,
-                listOverflow: listOverflow,
-                listWidth: listWidth
+                listWidth: listWidth,
+                portal: listWrapperRef
             });
         }))));
     }

package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js

@@ -184,7 +184,7 @@ var DropdownItem = function(param) {
     };
     var handleHover = function() {
         if (onHover) {
-            onHover(index);
+            onHover(index, item);
         }
     };
     return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, dividerBefore && /*#__PURE__*/ _react.default.createElement(_DropdownItemstyles.Divider, {

package/styled-components/cjs/components/Select/Select.js

@@ -267,6 +267,7 @@ var selectRoot = function(Root) {
         var activeDescendantItemValue = ((_getItemByFocused = (0, _useKeyboardNavigation.getItemByFocused)(focusedPath, focusedToValueMap)) === null || _getItemByFocused === void 0 ? void 0 : _getItemByFocused.value.toString()) || '';
         var closeAfterSelect = outerCloseAfterSelect !== null && outerCloseAfterSelect !== void 0 ? outerCloseAfterSelect : !props.multiselect;
         var treeId = (0, _utils.safeUseId)();
+        var listWrapperRef = (0, _react.useRef)(null);
         var view = target === 'textfield-like' && (disabled || readOnly) ? 'default' : (0, _utils1.getView)(status, outerView);
         // Собираем объект с пропсами для required и прокидываем их напрямую в компонент Textfield.
         var requiredProps = props.target === 'button-like' ? undefined : {
@@ -553,12 +554,12 @@ var selectRoot = function(Root) {
             disabled: disabled,
             readOnly: readOnly
         }, rest), /*#__PURE__*/ _react.default.createElement(_Selectstyles.ListWrapper, {
+            ref: listWrapperRef,
             listWidth: listWidth
         }, /*#__PURE__*/ _react.default.createElement(_Selectstyles.Ul, {
             role: "tree",
             id: "".concat(treeId, "_tree_level_1"),
             "aria-multiselectable": Boolean(props.multiselect),
-            listOverflow: listOverflow,
             listMaxHeight: listMaxHeight || listHeight,
             onScroll: virtual ? undefined : handleScroll,
             ref: targetRef,
@@ -579,7 +580,8 @@ var selectRoot = function(Root) {
                 path: path,
                 dispatchPath: dispatchPath,
                 index: index,
-                listWidth: listWidth
+                listWidth: listWidth,
+                portal: listWrapperRef
             });
         }), afterList))))));
     });

package/styled-components/cjs/components/Select/Select.styles.js

@@ -65,7 +65,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 var ListWrapper = _styledcomponents.default.div.withConfig({
     displayName: "Select.styles__ListWrapper",
-    componentId: "sc-30266665-0"
+    componentId: "sc-3f8cf8d4-0"
 })([
     "width:",
     ";padding:calc(var(",
@@ -82,10 +82,10 @@ var ListWrapper = _styledcomponents.default.div.withConfig({
 }, _Selecttokens.tokens.padding, _Selecttokens.tokens.dropdownBorderWidth, _Selecttokens.tokens.borderRadius, _Selecttokens.constants.background, _Selecttokens.constants.boxShadow, _Selecttokens.tokens.dropdownBorderWidth, _Selecttokens.tokens.dropdownBorderColor);
 var Ul = _styledcomponents.default.ul.withConfig({
     displayName: "Select.styles__Ul",
-    componentId: "sc-30266665-1"
+    componentId: "sc-3f8cf8d4-1"
 })([
     "max-height:",
-    ";overflow-y:",
+    ";overflow-x:hidden;overflow-y:",
     ";border-radius:calc(var(",
     ") - 0.125rem - var(",
     ",0rem));margin:0;padding:0;"
@@ -94,8 +94,8 @@ var Ul = _styledcomponents.default.ul.withConfig({
     return(// eslint-disable-next-line no-nested-ternary
     virtual ? 'auto' : listMaxHeight ? (0, _utils.getCorrectHeight)(listMaxHeight) : 'auto');
 }, function(param) {
-    var virtual = param.virtual, listOverflow = param.listOverflow;
-    return virtual ? 'visible' : listOverflow || 'visible';
+    var virtual = param.virtual;
+    return virtual ? 'visible' : 'auto';
 }, _Selecttokens.tokens.borderRadius, _Selecttokens.tokens.dropdownBorderWidth);
 var base = (0, _styledcomponents.css)([
     ""

package/styled-components/cjs/components/Select/hooks/useKeyboardNavigation.js

@@ -198,13 +198,9 @@ var useKeyNavigation = function(param) {
             case keys.Tab:
             case keys.Escape:
                 {
-                    dispatchFocusedPath({
-                        type: 'reset'
-                    });
-                    dispatchPath({
-                        type: 'reset'
-                    });
-                    handleListToggle(false);
+                    if (path[0]) {
+                        handleListToggle(false);
+                    }
                     break;
                 }
             case keys.Home:

package/styled-components/cjs/components/Select/ui/Inner/Inner.js

@@ -8,18 +8,54 @@ Object.defineProperty(exports, "Inner", {
         return Inner;
     }
 });
-var _react = /*#__PURE__*/ _interop_require_default(require("react"));
+var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 var _utils = require("../../../../utils");
 var _Selectstyles = require("../../Select.styles");
 var _FloatingPopover = require("../../FloatingPopover");
 var _Item = require("./ui/Item/Item");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
     };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
 }
 var Inner = function(param) {
-    var item = param.item, currentLevel = param.currentLevel, path = param.path, dispatchPath = param.dispatchPath, index = param.index, listWidth = param.listWidth;
+    var item = param.item, currentLevel = param.currentLevel, path = param.path, dispatchPath = param.dispatchPath, index = param.index, listWidth = param.listWidth, portal = param.portal;
     var handleToggle = function(opened) {
         if (opened) {
             dispatchPath({
@@ -34,6 +70,7 @@ var Inner = function(param) {
             });
         }
     };
+    var listWrapperRef = (0, _react.useRef)(null);
     var isCurrentListOpen = path[currentLevel + 1] === item.value.toString();
     var treeId = (0, _utils.safeUseId)();
     var listId = "".concat(treeId, "_tree_level_").concat(currentLevel + 2);
@@ -54,13 +91,16 @@ var Inner = function(param) {
                 ariaLevel: nextLevel,
                 ariaLabel: item.label
             }),
-            isInner: true
+            isInner: true,
+            portal: portal
         }, /*#__PURE__*/ _react.default.createElement(_Selectstyles.ListWrapper, {
-            listWidth: listWidth
+            listWidth: listWidth,
+            ref: listWrapperRef
         }, /*#__PURE__*/ _react.default.createElement(_Selectstyles.Ul, {
             role: "group",
             id: listId,
-            virtual: false
+            virtual: false,
+            listMaxHeight: item === null || item === void 0 ? void 0 : item.listMaxHeight
         }, (_item_items = item.items) === null || _item_items === void 0 ? void 0 : _item_items.map(function(innerItem, innerIndex) {
             return /*#__PURE__*/ _react.default.createElement(Inner, {
                 key: "".concat(innerIndex, "/").concat(currentLevel),
@@ -69,7 +109,8 @@ var Inner = function(param) {
                 path: path,
                 dispatchPath: dispatchPath,
                 index: innerIndex,
-                listWidth: listWidth
+                listWidth: listWidth,
+                portal: listWrapperRef
             });
         }))));
     }

package/styled-components/cjs/examples/components/Combobox/Combobox.js

@@ -1,16 +1 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "Combobox", {
-    enumerable: true,
-    get: function() {
-        return Combobox;
-    }
-});
-var _engines = require("../../../engines");
-var _ = require("../../..");
-var _Comboboxconfig = require("./Combobox.config");
-var mergedConfig = (0, _engines.mergeConfig)(_.comboboxNewConfig, _Comboboxconfig.config);
-var ComboboxComponent = (0, _engines.component)(mergedConfig);
-var Combobox = ComboboxComponent;

package/styled-components/es/components/CodeField/CodeField.js

@@ -124,7 +124,7 @@ import { base as viewCSS } from "./variations/_view/base";
 import { base as sizeCSS } from "./variations/_size/base";
 import { base as shapeCSS } from "./variations/_shape/base";
 import { base as disabledCSS } from "./variations/_disabled/base";
-// import { useWebOTP } from './hooks/useWebOTP';
+import { useWebOTP } from "./hooks/useWebOTP";
 export var codeFieldRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(_param, ref) {
         var className = _param.className, outerValue = _param.value, placeholder = _param.placeholder, autoFocus = _param.autoFocus, _param_codeLength = _param.codeLength, codeLength = _param_codeLength === void 0 ? 6 : _param_codeLength, caption = _param.caption, _param_captionAlign = _param.captionAlign, captionAlign = _param_captionAlign === void 0 ? 'left' : _param_captionAlign, width = _param.width, _param_shape = _param.shape, shape = _param_shape === void 0 ? 'default' : _param_shape, view = _param.view, size = _param.size, disabled = _param.disabled, isError = _param.isError, _param_allowedSymbols = _param.allowedSymbols, allowedSymbols = _param_allowedSymbols === void 0 ? ONLY_DIGITS_PATTERN : _param_allowedSymbols, _param_itemErrorBehavior = _param.itemErrorBehavior, itemErrorBehavior = _param_itemErrorBehavior === void 0 ? 'remove-symbol' : _param_itemErrorBehavior, _param_codeErrorBehavior = _param.codeErrorBehavior, codeErrorBehavior = _param_codeErrorBehavior === void 0 ? 'remove-code' : _param_codeErrorBehavior, _param_autoComplete = _param.autoComplete, autoComplete = _param_autoComplete === void 0 ? 'one-time-code' : _param_autoComplete, setIsError = _param.setIsError, onChange = _param.onChange, onFullCodeEnter = _param.onFullCodeEnter, rest = _object_without_properties(_param, [
@@ -153,7 +153,6 @@ export var codeFieldRoot = function(Root) {
         var _useState = _sliced_to_array(useState(getCodeValue(codeLength, '')), 2), innerValue = _useState[0], setInnerValue = _useState[1];
         var code = typeof outerValue === 'string' ? getCodeValue(codeLength, outerValue) : innerValue;
         var _useState1 = _sliced_to_array(useState(code.join('')), 2), originalValue = _useState1[0], setOriginalValue = _useState1[1];
-        // const [otpVal, setOtpVal] = useState<Credential | null>(null);
         var inputRefs = useRef([]);
         var inputContainerRef = useRef(null);
         var captionRef = useRef(null);
@@ -179,19 +178,15 @@ export var codeFieldRoot = function(Root) {
             if (onChange) {
                 onChange(originalCode);
             }
-        // if (originalCode.length > 0) {
-        //     stopWebOTPListener();
-        // }
         };
-        // const { startWebOTPListener, stopWebOTPListener } = useWebOTP({
-        //     codeString: originalValue,
-        //     enableSMSAutoRead: autoComplete === 'one-time-code',
-        //     disabled: Boolean(disabled),
-        //     codeLength,
-        //     codeSetter,
-        //     onFullCodeEnter,
-        //     setOtpVal,
-        // });
+        useWebOTP({
+            codeString: originalValue,
+            enableSMSAutoRead: autoComplete === 'one-time-code',
+            disabled: Boolean(disabled),
+            codeLength: codeLength,
+            codeSetter: codeSetter,
+            onFullCodeEnter: onFullCodeEnter
+        });
         var handleClick = function() {
             if (disabled) {
                 return;
@@ -305,7 +300,6 @@ export var codeFieldRoot = function(Root) {
             if (onFullCodeEnter) {
                 onFullCodeEnter(fullCode);
             }
-        // startWebOTPListener();
         }, []);
         useCodeHook({
             inputRefs: inputRefs,

package/styled-components/es/components/CodeField/CodeField.styles.js

@@ -7,32 +7,32 @@ export var base = css([
 ], classes.captionAlignLeft);
 export var CodeWrapper = styled.div.withConfig({
     displayName: "CodeField.styles__CodeWrapper",
-    componentId: "sc-ae648a72-0"
+    componentId: "sc-ff3d9c22-0"
 })([
     "display:flex;align-items:center;"
 ]);
 export var CodeGroup = styled.div.withConfig({
     displayName: "CodeField.styles__CodeGroup",
-    componentId: "sc-ae648a72-1"
+    componentId: "sc-ff3d9c22-1"
 })([
     "display:flex;align-items:center;"
 ]);
 export var Separator = styled.div.withConfig({
     displayName: "CodeField.styles__Separator",
-    componentId: "sc-ae648a72-2"
+    componentId: "sc-ff3d9c22-2"
 })([
     "width:var(",
     ");"
 ], tokens.separatorWidth);
 export var ItemInput = styled.input.withConfig({
     displayName: "CodeField.styles__ItemInput",
-    componentId: "sc-ae648a72-3"
+    componentId: "sc-ff3d9c22-3"
 })([
     "box-sizing:border-box;appearance:none;border:0;padding:0;outline:none;pointer-events:none;text-align:center;"
 ]);
 export var CaptionWrapper = styled.div.withConfig({
     displayName: "CodeField.styles__CaptionWrapper",
-    componentId: "sc-ae648a72-4"
+    componentId: "sc-ff3d9c22-4"
 })([
     "text-align:",
     ";align-self:",
@@ -50,7 +50,7 @@ export var CaptionWrapper = styled.div.withConfig({
 });
 export var HiddenInput = styled.input.withConfig({
     displayName: "CodeField.styles__HiddenInput",
-    componentId: "sc-ae648a72-5"
+    componentId: "sc-ff3d9c22-5"
 })([
-    ""
+    "display:none;"
 ]);

package/styled-components/es/components/CodeField/hooks/useWebOTP.js

@@ -127,12 +127,11 @@ function _ts_generator(thisArg, body) {
 }
 import { useCallback, useEffect, useRef } from "react";
 import { getCodeValue, isWebOTPSupported } from "../utils";
-// Type guard function to check if credential is OTPCredential
 var isOTPCredential = function(credential) {
     return credential !== null && 'code' in credential;
 };
 export var useWebOTP = function(param) {
-    var codeString = param.codeString, enableSMSAutoRead = param.enableSMSAutoRead, disabled = param.disabled, codeLength = param.codeLength, codeSetter = param.codeSetter, onFullCodeEnter = param.onFullCodeEnter, setOtpVal = param.setOtpVal;
+    var codeString = param.codeString, enableSMSAutoRead = param.enableSMSAutoRead, disabled = param.disabled, codeLength = param.codeLength, codeSetter = param.codeSetter, onFullCodeEnter = param.onFullCodeEnter;
     var abortControllerRef = useRef(null);
     var startWebOTPListener = useCallback(function() {
         return _async_to_generator(function() {
@@ -170,16 +169,11 @@ export var useWebOTP = function(param) {
                         ];
                     case 2:
                         otp = _state.sent();
-                        console.log('otp received', otp);
-                        setOtpVal(otp);
-                        // Type guard to check if it's an OTP credential
                         if (otp && isOTPCredential(otp) && otp.code) {
                             otpCode = otp.code;
-                            // Validate the OTP code length matches our expected length
                             if (otpCode.length === codeLength) {
                                 newCode = getCodeValue(codeLength, otpCode);
                                 codeSetter(newCode);
-                                // Trigger full code enter callback
                                 if (onFullCodeEnter) {
                                     onFullCodeEnter(otpCode);
                                 }
@@ -239,8 +233,4 @@ export var useWebOTP = function(param) {
         startWebOTPListener,
         stopWebOTPListener
     ]);
-    return {
-        startWebOTPListener: startWebOTPListener,
-        stopWebOTPListener: stopWebOTPListener
-    };
 };