intelicoreact 1.5.41 → 1.6.0

package/dist/Atomic/FormElements/UserContacts/UserContacts.js

@@ -1,131 +1,188 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _CustomIcons = require("../../../Molecular/CustomIcons");
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _CustomIcons = require("@/Molecular/CustomIcons");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 require("./UserContacts.scss");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const RC = "user-contacts";
-const UserContacts = props => {
-  const {
-    className,
-    email,
-    phone,
-    EmalIcon,
-    PhoneIcon,
-    isFirstPhone,
-    maxWidth,
-    isUseCommaSeparator = true,
-    generalizingWord = "contact",
-    isNotRenderGeneralizingWord = false,
-    Lng = value => value,
-    otherContacts = [],
-    isOtherTogetherMainContacts = false,
-    //! rest-свойство должено быть последним в деструкторизации.
-    //!По задумке оно соберет в себе только свойства соответствующии контактам
-    ...mainContacts
-  } = props || {};
-  const PRIMARY_TEXT = Lng("Primary");
-
-  //? В случае появления новых типов контактов добавлять их сюда по аналогии,
-  //? или на крайний случай в массив otherContacts (otherContacts - массив строк)
-  const mainContactsDescriptions = {
-    isDisputeContact: "Dispute",
-    isSalesContact: "Sales",
-    isAccountingContact: "Accounting",
-    isBusinessContact: "Business",
-    isTechnicalContact: "Technical"
-  };
-  const getContact = key => {
-    const {
-      prefix,
-      postfix
-    } = typeof mainContacts[key] === "object" ? mainContacts[key] : {};
-    return `${prefix ? Lng(prefix.toString()) + " " : ""}${Lng(mainContactsDescriptions[key])}${postfix ? " " + Lng(postfix.toString()) : ""}`;
-  };
-  let mainContactsStructure = Object.keys(mainContacts).reduce((acc, key) => mainContacts[key] && key in mainContactsDescriptions ? [...acc, getContact(key)] : acc, []);
-  mainContactsStructure = isOtherTogetherMainContacts ? [...mainContactsStructure, ...(Array.isArray(otherContacts) ? otherContacts?.map?.(contact => Lng(contact)) : [])] : mainContactsStructure;
-  let mainContactsCount = mainContactsStructure.length;
-  let otherContactsCount = otherContacts?.length || 0;
-  const isContacts = Boolean(mainContactsCount) || Boolean(otherContactsCount);
-  const isMainContacts = Boolean(mainContactsCount);
-  const mainRef = (0, _react.useRef)(null);
-  const firstRef = (0, _react.useRef)(null);
-  const secondRef = (0, _react.useRef)(null);
-  const contactsRef = (0, _react.useRef)(null);
-  const [isIconMode, setIconMode] = (0, _react.useState)(false);
-  const [isRunTask, setIsRunTask] = (0, _react.useState)(null);
-  const getSeparator = type => {
-    const separator = isUseCommaSeparator ? ", " : " ";
-    switch (type) {
-      case "main":
-        return mainContactsCount-- > 1 ? separator : "";
-      case "other":
-        return otherContactsCount-- > 1 ? separator : "";
-      default:
-        return separator;
+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
+        };
     }
-  };
-  const firstKey = isFirstPhone ? "phone" : "email";
-  const secondKey = isFirstPhone ? "email" : "phone";
-  const getIcon = key => {
-    switch (key) {
-      case "email":
-        return EmalIcon || /*#__PURE__*/_react.default.createElement(_CustomIcons.Email, null);
-      case "phone":
-        return PhoneIcon || /*#__PURE__*/_react.default.createElement(_CustomIcons.Phone, null);
-      default:
-        return null;
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
     }
-  };
-  const getProtocol = key => {
-    switch (key) {
-      case "email":
-        return "mailto:";
-      case "phone":
-        return "tel:";
-      default:
-        return "https://";
+    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];
+            }
+        }
     }
-  };
-  const getClasses = isFirst => (0, _classnames.default)("no-wrap", `${RC}__${isFirst ? firstKey : secondKey}`, {
-    [`${RC}__${isFirst ? firstKey : secondKey}_icon-mode`]: isIconMode
-  });
-  const checkWidth = () => {
-    if (mainRef.current && firstRef.current && secondRef.current && contactsRef.current) {
-      const measure = maxWidth && typeof maxWidth === "number" ? maxWidth : mainRef.current.clientWidth;
-      if (firstRef.current.clientWidth + secondRef.current.clientWidth + contactsRef.current.clientWidth > measure) setIconMode(true);else setIconMode(false);
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
     }
-  };
-  (0, _react.useLayoutEffect)(checkWidth, [isRunTask]);
-  (0, _react.useEffect)(() => {
-    setIsRunTask({});
-    return () => setIconMode(false);
-  }, [email, phone, JSON.stringify(mainContactsStructure), Number(maxWidth)]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: mainRef,
-    className: (0, _classnames.default)("j4", RC, className)
-  }, Boolean(props[firstKey]) && /*#__PURE__*/_react.default.createElement("a", {
-    ref: firstRef,
-    href: `${getProtocol(firstKey)}${props[firstKey].trim()}`,
-    target: "_blank",
-    rel: "noreferrer",
-    className: getClasses(true)
-  }, isIconMode ? getIcon(firstKey) : `${props[firstKey]}${props[secondKey] || isContacts ? getSeparator() : ""}`), Boolean(props[secondKey]) && /*#__PURE__*/_react.default.createElement("a", {
-    ref: secondRef,
-    href: `${getProtocol(secondKey)}${props[secondKey].trim()}`,
-    target: "_blank",
-    rel: "noreferrer",
-    className: getClasses()
-  }, isIconMode ? getIcon(secondKey) : `${props[secondKey]}${isContacts ? getSeparator() : ""}`), isContacts && /*#__PURE__*/_react.default.createElement("span", {
-    ref: contactsRef,
-    className: (0, _classnames.default)("no-wrap", `${RC}__contacts`)
-  }, isMainContacts ? mainContactsStructure.map(contact => `${contact}${getSeparator("main")}`) : null, isMainContacts && generalizingWord && !isNotRenderGeneralizingWord ? ` ${Lng(generalizingWord)}` : "", isMainContacts && Boolean(otherContacts) && Boolean(otherContacts?.length) && !isOtherTogetherMainContacts ? getSeparator() : "", Boolean(otherContacts) && Boolean(otherContacts?.length) && !isOtherTogetherMainContacts ? otherContacts?.map?.(contact => `${contact}${getSeparator("other")}`) : null));
+    return newObj;
+}
+const RC = 'user-contacts';
+const UserContacts = (props)=>{
+    var _props_firstKey, _props_secondKey, _otherContacts_map;
+    const { testId = RC, className, email, phone, EmailIcon, PhoneIcon, isFirstPhone = false, maxWidth, isUseCommaSeparator = true, generalizingWord = 'contact', isNotRenderGeneralizingWord = false, Lng = (value)=>value, otherContacts = [], isOtherTogetherMainContacts = false, ...mainContacts } = props || {};
+    const mainContactsDescriptions = {
+        isDisputeContact: 'Dispute',
+        isSalesContact: 'Sales',
+        isAccountingContact: 'Accounting',
+        isBusinessContact: 'Business',
+        isTechnicalContact: 'Technical'
+    };
+    const getContact = (key)=>{
+        const contact = mainContacts[key];
+        const { prefix = '', postfix = '' } = typeof contact === 'object' ? contact : {};
+        return `${prefix ? `${Lng(prefix.toString())} ` : ''}${Lng(mainContactsDescriptions[key])}${postfix ? ` ${Lng(postfix.toString())}` : ''}`;
+    };
+    let mainContactsStructure = Object.keys(mainContacts).reduce((acc, key)=>mainContacts[key] && key in mainContactsDescriptions ? [
+            ...acc,
+            getContact(key)
+        ] : acc, []);
+    mainContactsStructure = isOtherTogetherMainContacts ? [
+        ...mainContactsStructure,
+        ...Array.isArray(otherContacts) ? otherContacts.map((contact)=>Lng(contact)) : []
+    ] : mainContactsStructure;
+    let mainContactsCount = mainContactsStructure.length;
+    let otherContactsCount = (otherContacts === null || otherContacts === void 0 ? void 0 : otherContacts.length) || 0;
+    const isContacts = Boolean(mainContactsCount) || Boolean(otherContactsCount);
+    const isMainContacts = Boolean(mainContactsCount);
+    const mainRef = (0, _react.useRef)(null);
+    const firstRef = (0, _react.useRef)(null);
+    const secondRef = (0, _react.useRef)(null);
+    const contactsRef = (0, _react.useRef)(null);
+    const [isIconMode, setIconMode] = (0, _react.useState)(false);
+    const [isRunTask, setIsRunTask] = (0, _react.useState)(null);
+    const getSeparator = (type)=>{
+        const separator = isUseCommaSeparator ? ', ' : ' ';
+        switch(type){
+            case 'main':
+                return mainContactsCount-- > 1 ? separator : '';
+            case 'other':
+                return otherContactsCount-- > 1 ? separator : '';
+            default:
+                return separator;
+        }
+    };
+    const firstKey = isFirstPhone ? 'phone' : 'email';
+    const secondKey = isFirstPhone ? 'email' : 'phone';
+    const getIcon = (key)=>{
+        switch(key){
+            case 'email':
+                return EmailIcon || /*#__PURE__*/ (0, _jsxruntime.jsx)(_CustomIcons.Email, {});
+            case 'phone':
+                return PhoneIcon || /*#__PURE__*/ (0, _jsxruntime.jsx)(_CustomIcons.Phone, {});
+            default:
+                return null;
+        }
+    };
+    const getProtocol = (key)=>{
+        switch(key){
+            case 'email':
+                return 'mailto:';
+            case 'phone':
+                return 'tel:';
+            default:
+                return 'https://';
+        }
+    };
+    const getClasses = (isFirst)=>(0, _classnames.default)('no-wrap', `${RC}__${isFirst ? firstKey : secondKey}`, {
+            [`${RC}__${isFirst ? firstKey : secondKey}_icon-mode`]: isIconMode
+        });
+    const checkWidth = ()=>{
+        if (mainRef.current && firstRef.current && secondRef.current && contactsRef.current) {
+            const measure = maxWidth || mainRef.current.clientWidth;
+            if (firstRef.current.clientWidth + secondRef.current.clientWidth + contactsRef.current.clientWidth > measure) {
+                setIconMode(true);
+            } else {
+                setIconMode(false);
+            }
+        }
+    };
+    (0, _react.useLayoutEffect)(checkWidth, [
+        isRunTask
+    ]);
+    (0, _react.useEffect)(()=>{
+        setIsRunTask({});
+        return ()=>setIconMode(false);
+    }, [
+        email,
+        phone,
+        JSON.stringify(mainContactsStructure),
+        Number(maxWidth)
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        "data-testid": testId,
+        ref: mainRef,
+        className: (0, _classnames.default)('j4', RC, className),
+        children: [
+            Boolean(props[firstKey]) && /*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
+                ref: firstRef,
+                href: `${getProtocol(firstKey)}${(_props_firstKey = props[firstKey]) === null || _props_firstKey === void 0 ? void 0 : _props_firstKey.trim()}`,
+                target: "_blank",
+                rel: "noreferrer",
+                className: getClasses(true),
+                children: isIconMode ? getIcon(firstKey) : `${props[firstKey]}${props[secondKey] || isContacts ? getSeparator() : ''}`
+            }),
+            Boolean(props[secondKey]) && /*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
+                ref: secondRef,
+                href: `${getProtocol(secondKey)}${(_props_secondKey = props[secondKey]) === null || _props_secondKey === void 0 ? void 0 : _props_secondKey.trim()}`,
+                target: "_blank",
+                rel: "noreferrer",
+                className: getClasses(false),
+                children: isIconMode ? getIcon(secondKey) : `${props[secondKey]}${isContacts ? getSeparator() : ''}`
+            }),
+            isContacts && /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+                ref: contactsRef,
+                className: (0, _classnames.default)('no-wrap', `${RC}__contacts`),
+                children: [
+                    isMainContacts ? mainContactsStructure.map((contact)=>`${contact}${getSeparator('main')}`) : null,
+                    isMainContacts && generalizingWord && !isNotRenderGeneralizingWord ? ` ${Lng(generalizingWord)}` : '',
+                    isMainContacts && Boolean(otherContacts) && Boolean(otherContacts === null || otherContacts === void 0 ? void 0 : otherContacts.length) && !isOtherTogetherMainContacts ? getSeparator() : '',
+                    Boolean(otherContacts) && Boolean(otherContacts === null || otherContacts === void 0 ? void 0 : otherContacts.length) && !isOtherTogetherMainContacts ? otherContacts === null || otherContacts === void 0 ? void 0 : (_otherContacts_map = otherContacts.map) === null || _otherContacts_map === void 0 ? void 0 : _otherContacts_map.call(otherContacts, (contact)=>`${contact}${getSeparator('other')}`) : null
+                ]
+            })
+        ]
+    });
 };
-var _default = exports.default = UserContacts;
+const _default = UserContacts;

package/dist/Atomic/FormElements/UserContacts/UserContacts.scss

@@ -1,14 +1,19 @@
-@import "../../../scss/vars";
+:root {
+  --user-contacts-margin-right: 5px;
+  --user-contacts-icon-mode-width: 16px;
+  --user-contacts-icon-mode-height: 16px;
+  --user-contacts-icon-mode-margin-right: 8px;
+}
 
 .user-contacts {
   &__email,
   &__phone {
-    margin-right: 5px;
+    margin-right: var(--user-contacts-margin-right);
 
     &_icon-mode {
-      width: 16px;
-      height: 16px;
-      margin-right: 8px;
+      width: var(--user-contacts-icon-mode-width);
+      height: var(--user-contacts-icon-mode-height);
+      margin-right: var(--user-contacts-icon-mode-margin-right);
     }
   }
 }

package/dist/Atomic/FormElements/UserContacts/UserContacts.stories.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    UserContactsTemplate: function() {
+        return UserContactsTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _UserContacts = /*#__PURE__*/ _interop_require_default(require("./UserContacts"));
+require("./partial/AnyOuterClass.scss");
+require("../../../../../scss/main.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const _default = {
+    title: 'Form Elements/UserContacts',
+    component: _UserContacts.default
+};
+const Template = (args)=>{
+    const { isIncludeOuterStyles, ...restArgs } = args;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_UserContacts.default, {
+        className: isIncludeOuterStyles ? 'any-outer-class__user-contacts' : '',
+        ...restArgs
+    });
+};
+const UserContactsTemplate = Template.bind({});
+UserContactsTemplate.args = {
+    isIncludeOuterStyles: false,
+    email: 'vosnosdnonsjo@kvmsdv.com',
+    // email: 0,
+    phone: '1111-111-111',
+    // phone: 0,
+    isDisputeContact: false,
+    // isDisputeContact: { prefix: '', postfix: '' },
+    isSalesContact: false,
+    // isSalesContact: { prefix: '', postfix: '' },
+    isAccountingContact: false,
+    // isAccountingContact: { prefix: '', postfix: '' },
+    // isBusinessContact: false,
+    isBusinessContact: {
+        prefix: 'Primary',
+        postfix: ''
+    },
+    // isTechnicalContact: false,
+    isTechnicalContact: {
+        prefix: 'Primary',
+        postfix: 'Contact'
+    },
+    // otherContacts: ['My personal account manager'],
+    otherContacts: [
+        'Super',
+        'Any',
+        'View'
+    ],
+    isOtherTogetherMainContacts: false,
+    // generalizingWord: 'manager',
+    isNotRenderGeneralizingWord: false,
+    isFirstPhone: false,
+    isUseCommaSeparator: true,
+    maxWidth: 480
+};

package/dist/Atomic/FormElements/UserContacts/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _UserContacts = /*#__PURE__*/ _interop_require_default(require("./UserContacts"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const _default = _UserContacts.default;

package/dist/Atomic/FormElements/VariantsListRadio/VariantsListRadio.js

@@ -1,71 +1,107 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _utils = require("../../../Functions/utils");
-var _VariantsListRadioItem = _interopRequireDefault(require("./partials/VariantsListRadioItem"));
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _utils = require("../../../Functions/utils");
+const _VariantsListRadioItem = /*#__PURE__*/ _interop_require_default(require("./partials/VariantsListRadioItem"));
 require("./VariantsListRadio.scss");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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;
+}
 const RC = "variants-list-radio";
-const VariantsListRadio = _ref => {
-  let {
-    items: outerItems,
-    value: outerValue,
-    onChange = () => {},
-    isWithBorders,
-    itemsContentRenderMode,
-    isRadioPositionReverse,
-    isUseAsOptionsList,
-    disabled,
-    isDisabled,
-    id,
-    className,
-    testId = "variants-list-radio",
-    attributesOfNativeInput,
-    isMixWithPersonalAttributes
-  } = _ref;
-  const [items, setItems] = (0, _react.useState)(outerItems);
-  const [value, setValue] = (0, _react.useState)(outerValue);
-  const componentnId = id || "variantsListRadio";
-  const mode = itemsContentRenderMode === "col" ? "col" : "row";
-  const isElementDisabled = disabled || isDisabled;
-  const handleChange = newValue => {
-    setValue(newValue);
-    onChange(newValue);
-  };
-  (0, _react.useEffect)(() => {
-    if (!(0, _utils.compare)(outerItems, items)) setItems(outerItems);
-  }, [outerItems]);
-  (0, _react.useEffect)(() => {
-    if (value !== outerValue) setValue(outerValue);
-  }, [outerValue]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    id: componentnId,
-    "data-testid": testId,
-    className: (0, _classnames.default)(RC, `${RC}_items-content-${mode}`, className, {
-      [`${RC}_with-borders`]: isWithBorders && !isUseAsOptionsList,
-      [`${RC}_radio-position-reverse`]: isRadioPositionReverse
-    })
-  }, items.map(item => /*#__PURE__*/_react.default.createElement(_VariantsListRadioItem.default, {
-    key: `variants-list-radio-id-${componentnId}-item-id-${item.value}`,
-    RC: RC,
-    parentId: componentnId,
-    item: {
-      ...item,
-      isDisabled: item.disabled || item.isDisabled || isElementDisabled || false
-    },
-    value: value,
-    onChange: handleChange,
-    attributesOfNativeInput: attributesOfNativeInput,
-    isMixWithPersonalAttributes: isMixWithPersonalAttributes,
-    parentDisabled: disabled,
-    isUseAsOptionsList: isUseAsOptionsList
-  })));
+const VariantsListRadio = ({ items: outerItems, value: outerValue, onChange = ()=>{}, isWithBorders, itemsContentRenderMode, isRadioPositionReverse, isUseAsOptionsList, disabled, isDisabled, id, className, testId = "variants-list-radio", attributesOfNativeInput, isMixWithPersonalAttributes })=>{
+    const [items, setItems] = (0, _react.useState)(outerItems);
+    const [value, setValue] = (0, _react.useState)(outerValue);
+    const componentnId = id || "variantsListRadio";
+    const mode = itemsContentRenderMode === "col" ? "col" : "row";
+    const isElementDisabled = disabled || isDisabled;
+    const handleChange = (newValue)=>{
+        setValue(newValue);
+        onChange(newValue);
+    };
+    (0, _react.useEffect)(()=>{
+        if (!(0, _utils.compare)(outerItems, items)) setItems(outerItems);
+    }, [
+        outerItems
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (value !== outerValue) setValue(outerValue);
+    }, [
+        outerValue
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        id: componentnId,
+        "data-testid": testId,
+        className: (0, _classnames.default)(RC, `${RC}_items-content-${mode}`, className, {
+            [`${RC}_with-borders`]: isWithBorders && !isUseAsOptionsList,
+            [`${RC}_radio-position-reverse`]: isRadioPositionReverse
+        }),
+        children: items.map((item)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_VariantsListRadioItem.default, {
+                RC: RC,
+                parentId: componentnId,
+                item: {
+                    ...item,
+                    isDisabled: item.disabled || item.isDisabled || isElementDisabled || false
+                },
+                value: value,
+                onChange: handleChange,
+                attributesOfNativeInput: attributesOfNativeInput,
+                isMixWithPersonalAttributes: isMixWithPersonalAttributes,
+                parentDisabled: disabled,
+                isUseAsOptionsList: isUseAsOptionsList
+            }, `variants-list-radio-id-${componentnId}-item-id-${item.value}`))
+    });
 };
-var _default = exports.default = VariantsListRadio;
+const _default = VariantsListRadio;