intelicoreact 1.8.8 → 1.8.10

package/dist/Atomic/FormElements/Textarea/Textarea.jsx

@@ -1 +1,61 @@
-import{jsx as t}from"react/jsx-runtime";import e from"classnames";import{useEffect as a,useRef as o}from"react";import{formatToOnlyASCIICodeText as n}from"../../../Functions/fieldValueFormatters";import"./Textarea.scss";var r="textarea";export default function(i){var l=i.ref,c=i.id,s=i.value,u=i.onChange,d=i.onFocus,f=i.onBlur,m=i.placeholder,h=i.disabled,v=i.className,p=i.isNotValidateASCII,x=void 0!==p&&p,g=i.testId,w=void 0===g?r:g,y=i.withAutoGrow,F=i.onKeyDown,N=o(),C=l||N,I=function(t){var e=t;x||(e=n(e)),u(e)},b=function(t){t.style.height="5px",t.style.height="".concat(t.scrollHeight,"px")};return a(function(){y&&b(null==C?void 0:C.current)},[s,y]),t("div",{"data-testid":w,className:e("".concat(r),v),children:t("textarea",{id:null!=c?c:Math.random().toString(16).slice(2),"data-testid":"".concat(w,"-textarea"),className:"".concat(r,"__textarea"),value:s,onChange:function(t){return I(t.target.value)},placeholder:m,disabled:h,onKeyDown:void 0===F?function(){}:F,ref:C,onFocus:function(t){null==d||d(t)},onBlur:function(t){null==f||f(t)}})})}
+import cn from 'classnames';
+
+import { useEffect, useRef } from 'react';
+
+import { formatToOnlyASCIICodeText } from '../../../Functions/fieldValueFormatters';
+
+import './Textarea.scss';
+
+const RC = 'textarea';
+
+function Textarea({ ref, id, value, onChange, onFocus, onBlur, placeholder, disabled, className, isNotValidateASCII = false, testId = RC, withAutoGrow, onKeyDown = () => {} }) {
+  const internalRef = useRef();
+  const textareaRef = ref || internalRef;
+
+  const handle = {
+    change: (val) => {
+      let inputValue = val;
+      if (!isNotValidateASCII)
+        inputValue = formatToOnlyASCIICodeText(inputValue);
+
+      onChange(inputValue);
+    },
+    focus: (e) => {
+      onFocus?.(e);
+    },
+    blur: (e) => {
+      onBlur?.(e);
+    },
+  };
+
+  const autoGrow = (el) => {
+    el.style.height = '5px';
+    el.style.height = `${el.scrollHeight}px`;
+  };
+
+  useEffect(() => {
+    if (withAutoGrow) {
+      autoGrow(textareaRef?.current);
+    }
+  }, [value, withAutoGrow]);
+
+  return (
+    <div data-testid={testId} className={cn(`${RC}`, className)}>
+      <textarea
+        id={id ?? Math.random().toString(16).slice(2)}
+        data-testid={`${testId}-textarea`}
+        className={`${RC}__textarea`}
+        value={value}
+        onChange={e => handle.change(e.target.value)}
+        placeholder={placeholder}
+        disabled={disabled}
+        onKeyDown={onKeyDown}
+        ref={textareaRef}
+        onFocus={handle.focus}
+        onBlur={handle.blur}
+      />
+    </div>
+  );
+}
+
+export default Textarea;

package/dist/Atomic/FormElements/TieredCheckboxes/TieredCheckboxes.jsx

@@ -1 +1,181 @@
-function e(e,n){(null==n||n>e.length)&&(n=e.length);for(var r=0,t=Array(n);r<n;r++)t[r]=e[r];return t}function n(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function r(n){return function(n){if(Array.isArray(n))return e(n)}(n)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(n)||function(n,r){if(n){if("string"==typeof n)return e(n,void 0);var t=Object.prototype.toString.call(n).slice(8,-1);if("Object"===t&&n.constructor&&(t=n.constructor.name),"Map"===t||"Set"===t)return Array.from(t);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return e(n,r)}}(n)||function(){throw TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}import{jsx as t}from"react/jsx-runtime";import{createElement as i}from"react";import o from"classnames";import{useMemo as a}from"react";import{compareAlphabetical as c}from"../../../Functions/utils";import l from"../CheckboxInput/CheckboxInput";import u from"./partial/AccordionWithCheckbox";import"./TieredCheckboxes.scss";var s="tiered-checkboxes";export default function(e){var d=e.items,f=void 0===d?{}:d,p=e.className,v=e.onChange,y=e.isUseParentsClassesAsDataset,b=e.isUseAccordionForGroup,h=e.accordionIcons,m=e.isOnlyOne,O=void 0!==m&&m,k=e.sortGroups,g=void 0!==k&&k,j=e.sortGroupItems,P=void 0!==j&&j,C={changeParent:function(e,n,t){var i=f.find(function(e){return e.key===n});t?i[t]=e:i.value=e,t||(e?i.children.filter(function(e){return!e.disabled}).forEach(function(e){return e.value=!0}):i.children.filter(function(e){return!e.disabled}).forEach(function(e){return e.value=!1})),v(r(f))},changeChild:function(e,n,t){if(O){var i=f.find(function(e){return e.key===t});i.children.find(function(e){return e.key===n}).value=e,i.children.map(function(r){return r.key!==n&&!0===e?(r.disabled=!0,i.disabled=!0):r.key!==n&&!1===e?(r.disabled=!1,i.disabled=!1):r.disabled=!1,r}),i.disabled=!0}else{var o=f.find(function(e){return e.key===t});o.children.find(function(e){return e.key===n}).value=e,o.children.every(function(e){return e.value})?o.value=!0:o.value=!1}v(r(f))},isAllChecked:function(e){return(null==e?void 0:e.children.some(function(e){return e.value}))&&!(null==e?void 0:e.children.every(function(e){return e.value}))}},A=a(function(){var e=r(f);return g&&(e=null==e?void 0:e.sort(c)),P&&(e=null==e?void 0:e.map(function(e){if(null==e?void 0:e.children){var n;e.children=null==e||null==(n=e.children)?void 0:n.sort(c)}return e})),e},[f]),w=function(e){return e.children&&e.children.map(function(n){return t("div",{className:"".concat(s,"__children"),children:t(l,{testId:n.key,label:n.label,value:n.value,disabled:null==n?void 0:n.disabled,onChange:function(r){return C.changeChild(r,n.key,e.key)}})},n.key)})};return t("div",{className:o(s,p),children:A.map(function(e){var r,a,c=y&&(null==e?void 0:e.className)?{"data-key":null==e?void 0:e.className}:{};return b?t(u,{RC:s,parent:e,datasetProp:c,isUseParentsClassesAsDataset:y,className:"".concat(s,"__mono-accordion"),setIsOpen:function(){return C.changeParent(!e.isOpen,e.key,"isOpen")},onChange:function(n){return C.changeParent(n,e.key)},icon:e.isOpen?(null==h?void 0:h[1])||null:(null==h?void 0:h[0])||null,children:w(e)},e.key):i("div",(r=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},i=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),i.forEach(function(r){n(e,r,t[r])})}return e}({},c),a=a={key:e.key,className:o("".concat(s,"__parents"),n({},"".concat(e.className),!y)),children:[t(l,{isStark:C.isAllChecked(e),label:e.label,value:e.value,onChange:function(n){return C.changeParent(n,e.key)},disabled:e.children.every(function(e){return!0===e.disabled})||e.disabled}),t("div",{className:o("".concat(s,"__parent__children")),children:w(e)})]},Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(a)):(function(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r})(Object(a)).forEach(function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(a,e))}),r))})})}
+import cn from 'classnames';
+
+import { useMemo } from 'react';
+
+import { compareAlphabetical } from '../../../Functions/utils';
+import CheckboxInput from '../CheckboxInput/CheckboxInput';
+
+import AccordionWithCheckbox from './partial/AccordionWithCheckbox';
+
+import './TieredCheckboxes.scss';
+
+const RC = 'tiered-checkboxes';
+
+function TieredCheckboxes({
+  items = {},
+  className,
+  onChange,
+  isUseParentsClassesAsDataset,
+  isUseAccordionForGroup,
+  accordionIcons,
+  isOnlyOne = false,
+  sortGroups = false,
+  sortGroupItems = false,
+}) {
+  const handle = {
+    changeParent: (value, key, prop) => {
+      const parent = items.find(item => item.key === key);
+      if (prop) parent[prop] = value;
+      else parent.value = value;
+
+      if (!prop) {
+        if (value) {
+          parent.children
+            .filter(({ disabled }) => !disabled)
+            .forEach(item => (item.value = true));
+        }
+        else {
+          parent.children
+            .filter(({ disabled }) => !disabled)
+            .forEach(item => (item.value = false));
+        }
+      }
+      onChange([...items]);
+    },
+    changeChild: (value, key, parentKey) => {
+      if (isOnlyOne) {
+        const parent = items.find(item => item.key === parentKey);
+        parent.children.find(item => item.key === key).value = value;
+
+        parent.children.map((item) => {
+          if (item.key !== key && value === true) {
+            item.disabled = true;
+            parent.disabled = true;
+          }
+          else if (item.key !== key && value === false) {
+            item.disabled = false;
+            parent.disabled = false;
+          }
+          else {
+            item.disabled = false;
+          }
+          return item;
+        });
+
+        parent.disabled = true;
+      }
+      else {
+        const parent = items.find(item => item.key === parentKey);
+        parent.children.find(item => item.key === key).value = value;
+
+        if (parent.children.every(item => item.value)) parent.value = true;
+        else parent.value = false;
+      }
+
+      onChange([...items]);
+    },
+    isAllChecked: (item) => {
+      return (
+        item?.children.some(item => item.value)
+        && !item?.children.every(item => item.value)
+      );
+    },
+  };
+
+  const preparedItems = useMemo(() => {
+    let newItems = [...items];
+
+    if (sortGroups) {
+      newItems = newItems?.sort(compareAlphabetical);
+    }
+
+    if (sortGroupItems) {
+      newItems = newItems?.map((parent) => {
+        if (parent?.children) {
+          parent.children = parent?.children?.sort(compareAlphabetical);
+        }
+
+        return parent;
+      });
+    }
+
+    return newItems;
+  }, [items]);
+
+  const renderInner = (parent) => {
+    return (
+      parent.children
+      && parent.children.map(child => (
+        <div key={child.key} className={`${RC}__children`}>
+          <CheckboxInput
+            testId={child.key}
+            label={child.label}
+            value={child.value}
+            disabled={child?.disabled}
+            onChange={value =>
+              handle.changeChild(value, child.key, parent.key)}
+          />
+        </div>
+      ))
+    );
+  };
+
+  return (
+    <div className={cn(RC, className)}>
+      {preparedItems.map((parent) => {
+        const datasetProp
+          = isUseParentsClassesAsDataset && parent?.className
+            ? { 'data-key': parent?.className }
+            : {};
+        if (isUseAccordionForGroup) {
+          return (
+            <AccordionWithCheckbox
+              key={parent.key}
+              RC={RC}
+              parent={parent}
+              datasetProp={datasetProp}
+              isUseParentsClassesAsDataset={isUseParentsClassesAsDataset}
+              className={`${RC}__mono-accordion`}
+              setIsOpen={() =>
+                handle.changeParent(!parent.isOpen, parent.key, 'isOpen')}
+              onChange={value => handle.changeParent(value, parent.key)}
+              icon={
+                !parent.isOpen
+                  ? accordionIcons?.[0] || null
+                  : accordionIcons?.[1] || null
+              }
+              // disabled={parent.children?.every?.((child) => child.disabled)}
+            >
+              {renderInner(parent)}
+            </AccordionWithCheckbox>
+          );
+        }
+        return (
+          <div
+            {...datasetProp}
+            key={parent.key}
+            className={cn(`${RC}__parents`, {
+              [`${parent.className}`]: !isUseParentsClassesAsDataset,
+            })}
+          >
+            <CheckboxInput
+              isStark={handle.isAllChecked(parent)}
+              label={parent.label}
+              value={parent.value}
+              onChange={value => handle.changeParent(value, parent.key)}
+              disabled={
+                parent.children.every(({ disabled }) => disabled === true)
+                || parent.disabled
+              }
+            />
+            <div className={cn(`${RC}__parent__children`)}>
+              {renderInner(parent)}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export default TieredCheckboxes;

package/dist/Atomic/FormElements/TieredCheckboxes/partial/AccordionWithCheckbox.jsx

@@ -1 +1,60 @@
-import{jsx as e,jsxs as n,Fragment as l}from"react/jsx-runtime";import a from"classnames";import c from"../../../UI/MonoAccordion/MonoAccordion";import r from"../../CheckboxInput/CheckboxInput";import"../TieredCheckboxes.scss";export default function(i){var t,o,s,d,u,h,m,p,b,f=i.children,v=i.parent,x=i.onChange,C=i.className,g=i.RC,k=i.setIsOpen,N=i.icon,j=i.disabled,I=i.datasetProp,O=i.isUseParentsClassesAsDataset;return e(c,{datasetProp:I,className:a(C,(t={},o="".concat(v.className),s=!O,o in t?Object.defineProperty(t,o,{value:s,enumerable:!0,configurable:!0,writable:!0}):t[o]=s,t)),isOpen:v.isOpen,onClick:k,icon:N,disabled:j,titleJSX:n(l,{children:[e(r,{className:"".concat(g,"__checkbox-input"),isStark:(null==v||null==(u=v.children)||null==(d=u.some)?void 0:d.call(u,function(e){return e.value}))&&!(null==v||null==(m=v.children)||null==(h=m.every)?void 0:h.call(m,function(e){return e.value})),label:v.label,value:v.value,onChange:x,disabled:v.children.every(function(e){return!0===e.disabled})||v.disabled}),e("span",{className:"".concat(g,"__description-checked"),children:(null==v||null==(p=v.children)?void 0:p.length)?"Selected ".concat(v.children.filter(function(e){return e.value}).length," from ").concat(null==(b=v.children)?void 0:b.length):null})]}),children:f})}
+import cn from 'classnames';
+
+import MonoAccordion from '../../../UI/MonoAccordion/MonoAccordion';
+import CheckboxInput from '../../CheckboxInput/CheckboxInput';
+
+import '../TieredCheckboxes.scss';
+
+function AccordionWithCheckbox({
+  children,
+  parent,
+  onChange,
+  className,
+  RC,
+  setIsOpen,
+  icon,
+  disabled,
+  datasetProp,
+  isUseParentsClassesAsDataset,
+}) {
+  return (
+    <MonoAccordion
+      datasetProp={datasetProp}
+      className={cn(className, {
+        [`${parent.className}`]: !isUseParentsClassesAsDataset,
+      })}
+      isOpen={parent.isOpen}
+      onClick={setIsOpen}
+      icon={icon}
+      disabled={disabled}
+      // disabled={parent.children?.every?.((child) => child.disabled)}
+      titleJSX={(
+        <>
+          <CheckboxInput
+            className={`${RC}__checkbox-input`}
+            isStark={
+              parent?.children?.some?.(item => item.value)
+              && !parent?.children?.every?.(item => item.value)
+            }
+            label={parent.label}
+            value={parent.value}
+            onChange={onChange}
+            disabled={
+              parent.children.every(({ disabled }) => disabled === true)
+              || parent.disabled
+            }
+          />
+          <span className={`${RC}__description-checked`}>
+            {parent?.children?.length
+              ? `Selected ${parent.children.filter(child => child.value).length} from ${parent.children?.length}`
+              : null}
+          </span>
+        </>
+      )}
+    >
+      {children}
+    </MonoAccordion>
+  );
+}
+
+export default AccordionWithCheckbox;

package/dist/Atomic/FormElements/VariantsListRadio/VariantsListRadio.jsx

@@ -1 +1,83 @@
-function t(t,r){(null==r||r>t.length)&&(r=t.length);for(var e=0,n=Array(r);e<r;e++)n[e]=t[e];return n}function r(t,r,e){return r in t?Object.defineProperty(t,r,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[r]=e,t}function e(r,e){return function(t){if(Array.isArray(t))return t}(r)||function(t,r){var e,n,i=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=i){var o=[],a=!0,s=!1;try{for(i=i.call(t);!(a=(e=i.next()).done)&&(o.push(e.value),!r||o.length!==r);a=!0);}catch(t){s=!0,n=t}finally{try{a||null==i.return||i.return()}finally{if(s)throw n}}return o}}(r,e)||function(r,e){if(r){if("string"==typeof r)return t(r,e);var n=Object.prototype.toString.call(r).slice(8,-1);if("Object"===n&&r.constructor&&(n=r.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return t(r,e)}}(r,e)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}import{jsx as n}from"react/jsx-runtime";import i from"classnames";import{useEffect as o,useState as a}from"react";import{compare as s}from"../../../Functions/utils";import c from"./partials/VariantsListRadioItem";import"./VariantsListRadio.scss";var l="variants-list-radio";export default function(t){var u,f=t.items,d=t.value,p=t.onChange,b=void 0===p?function(){}:p,m=t.isWithBorders,y=t.itemsContentRenderMode,v=t.isRadioPositionReverse,O=t.isUseAsOptionsList,h=t.disabled,j=t.isDisabled,g=t.id,P=t.className,w=t.testId,A=t.attributesOfNativeInput,S=t.isMixWithPersonalAttributes,D=e(a(f),2),I=D[0],R=D[1],x=e(a(d),2),C=x[0],L=x[1],M=g||"variantsListRadio",N=h||j,E=function(t){L(t),b(t)};return o(function(){s(f,I)||R(f)},[f]),o(function(){C!==d&&L(d)},[d]),n("div",{id:M,"data-testid":void 0===w?"variants-list-radio":w,className:i(l,"".concat(l,"_items-content-").concat("col"===y?"col":"row"),P,(r(u={},"".concat(l,"_with-borders"),m&&!O),r(u,"".concat(l,"_radio-position-reverse"),v),u)),children:I.map(function(t){var e,i;return n(c,{RC:l,parentId:M,item:(e=function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),i.forEach(function(e){r(t,e,n[e])})}return t}({},t),i=i={isDisabled:t.disabled||t.isDisabled||N||!1},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):(function(t,r){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e.push.apply(e,n)}return e})(Object(i)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}),e),value:C,onChange:E,attributesOfNativeInput:A,isMixWithPersonalAttributes:S,parentDisabled:h,isUseAsOptionsList:O},"variants-list-radio-id-".concat(M,"-item-id-").concat(t.value))})})}
+import cn from 'classnames';
+
+import { useEffect, useState } from 'react';
+
+import { compare } from '../../../Functions/utils';
+
+import VariantsListRadioItem from './partials/VariantsListRadioItem';
+
+import './VariantsListRadio.scss';
+
+const RC = 'variants-list-radio';
+
+function VariantsListRadio({
+  items: outerItems,
+  value: outerValue,
+  onChange = () => {},
+
+  isWithBorders,
+  itemsContentRenderMode,
+  isRadioPositionReverse,
+  isUseAsOptionsList,
+  disabled,
+  isDisabled,
+
+  id,
+  className,
+  testId = 'variants-list-radio',
+
+  attributesOfNativeInput,
+  isMixWithPersonalAttributes,
+}) {
+  const [items, setItems] = useState(outerItems);
+  const [value, setValue] = useState(outerValue);
+
+  const componentnId = id || 'variantsListRadio';
+  const mode = itemsContentRenderMode === 'col' ? 'col' : 'row';
+  const isElementDisabled = disabled || isDisabled;
+
+  const handleChange = (newValue) => {
+    setValue(newValue);
+    onChange(newValue);
+  };
+
+  useEffect(() => {
+    if (!compare(outerItems, items)) setItems(outerItems);
+  }, [outerItems]);
+
+  useEffect(() => {
+    if (value !== outerValue) setValue(outerValue);
+  }, [outerValue]);
+
+  return (
+    <div
+      id={componentnId}
+      data-testid={testId}
+      className={cn(RC, `${RC}_items-content-${mode}`, className, {
+        [`${RC}_with-borders`]: isWithBorders && !isUseAsOptionsList,
+        [`${RC}_radio-position-reverse`]: isRadioPositionReverse,
+      })}
+    >
+      {items.map(item => (
+        <VariantsListRadioItem
+          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}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default VariantsListRadio;

package/dist/Atomic/FormElements/VariantsListRadio/partials/VariantsListRadioItem.jsx

@@ -1 +1,80 @@
-function t(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function e(e){for(var i=1;i<arguments.length;i++){var n=null!=arguments[i]?arguments[i]:{},a=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),a.forEach(function(i){t(e,i,n[i])})}return e}import{jsx as i,jsxs as n}from"react/jsx-runtime";import a from"classnames";import{getIsOnlyAnObject as c}from"../../../../Functions/utils";export default function(r){var o,s=r.RC,l=r.parentId,d=r.item,m=r.value,u=r.onChange,_=void 0===u?function(){}:u,p=r.attributesOfNativeInput,v=void 0===p?{}:p,f=r.isMixWithPersonalAttributes,b=r.isUseAsOptionsList,h=r.testId,N=void 0===h?"variants-list-radio-item":h;if(!l||!c(d))return null;var O=d.value,g=d.label,y=d.description,j=d.isDisabled,w=d.attributesOfNativeInput,x="".concat(l.toString(),"--item-").concat(O),P=l.toString(),I=m===O,S=f?e({},v,w):w||v||{};return n("label",{"data-testid":N,className:a("".concat(s,"__item"),(t(o={},"".concat(s,"__item_disabled"),j),t(o,"".concat(s,"__item_active"),I),t(o,"".concat(s,"__item_as-option"),b),o)),htmlFor:x,children:[i("div",{className:a("".concat(s,"__item-radio-container")),children:n("div",{className:a("".concat(s,"__item-radio")),children:[i("input",e({id:x,"data-testid":"".concat(N,"-input"),type:"radio",checked:I,className:"".concat(s,"__item-radio-input"),onChange:function(){return _(O)},name:P,disabled:j},S)),i("div",{className:"".concat(s,"__item-radio-mark")})]})}),n("div",{className:a("".concat(s,"__item-content")),children:[g&&i("div",{className:a("".concat(s,"__item-content-wrapper")),children:i("div",{className:a("".concat(s,"__item-content-label")),children:g})}),y&&!b&&i("div",{className:a("".concat(s,"__item-content-wrapper")),children:i("div",{className:a("".concat(s,"__item-content-description")),children:y})})]})]})}
+import cn from 'classnames';
+
+import { getIsOnlyAnObject } from '../../../../Functions/utils';
+
+function VariantsListRadioItem({
+  RC,
+  parentId,
+  item,
+  value: actualValue,
+  onChange = () => {},
+
+  attributesOfNativeInput = {},
+  isMixWithPersonalAttributes,
+
+  isUseAsOptionsList,
+  testId = 'variants-list-radio-item',
+}) {
+  // ? Для корректной работы нужны parentId и item(объект)
+  if (!parentId || !getIsOnlyAnObject(item)) return null;
+
+  const {
+    value,
+    label,
+    description,
+    isDisabled,
+    attributesOfNativeInput: personalAttributesOfNativeInput,
+  } = item;
+  const id = `${parentId.toString()}--item-${value}`;
+  const name = parentId.toString();
+  const isActive = actualValue === value;
+  const addAtributesObj = isMixWithPersonalAttributes
+    ? { ...attributesOfNativeInput, ...personalAttributesOfNativeInput }
+    : personalAttributesOfNativeInput || attributesOfNativeInput || {};
+
+  return (
+    <label
+      data-testid={testId}
+      className={cn(`${RC}__item`, {
+        [`${RC}__item_disabled`]: isDisabled,
+        [`${RC}__item_active`]: isActive,
+        [`${RC}__item_as-option`]: isUseAsOptionsList,
+      })}
+      htmlFor={id}
+    >
+      <div className={cn(`${RC}__item-radio-container`)}>
+        <div className={cn(`${RC}__item-radio`)}>
+          <input
+            id={id}
+            data-testid={`${testId}-input`}
+            type="radio"
+            checked={isActive}
+            className={`${RC}__item-radio-input`}
+            onChange={() => onChange(value)}
+            name={name}
+            disabled={isDisabled}
+            {...addAtributesObj}
+          />
+          <div className={`${RC}__item-radio-mark`}></div>
+        </div>
+      </div>
+
+      <div className={cn(`${RC}__item-content`)}>
+        {label && (
+          <div className={cn(`${RC}__item-content-wrapper`)}>
+            <div className={cn(`${RC}__item-content-label`)}>{label}</div>
+          </div>
+        )}
+        {description && !isUseAsOptionsList && (
+          <div className={cn(`${RC}__item-content-wrapper`)}>
+            <div className={cn(`${RC}__item-content-description`)}>
+              {description}
+            </div>
+          </div>
+        )}
+      </div>
+    </label>
+  );
+}
+
+export default VariantsListRadioItem;

package/dist/Atomic/FormElements/WidgetPseudoTable/WidgetPseudoTable.jsx

@@ -1 +1,103 @@
-function e(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function t(t){for(var n=1;n<arguments.length;n++){var c=null!=arguments[n]?arguments[n]:{},a=Object.keys(c);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(c).filter(function(e){return Object.getOwnPropertyDescriptor(c,e).enumerable}))),a.forEach(function(n){e(t,n,c[n])})}return t}function n(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):(function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);n.push.apply(n,c)}return n})(Object(t)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}),e}import{jsx as c,jsxs as a}from"react/jsx-runtime";import r from"classnames";import"./WidgetPseudoTable.scss";var o="widget-pseudo-table";export default function(l){var i=l||{},s=i.className,d=i.title,u=i.rightHeaderContent,m=i.nullContentData,p=i.isNotRenderThead,h=i.isNoHeader,b=i.columns,_=void 0===b?[]:b,f=i.rows,y=i.CellComponent,v=i.CellComponentProps,O=i.onChange;return a("div",{className:r(o,s),children:[!(void 0!==h&&h)&&a("div",{className:r("".concat(o,"__header")),children:[c("div",{className:r("".concat(o,"__title-block")),children:d}),c("div",{className:r("".concat(o,"__right-header-content-block")),children:u})]}),a("div",{className:r("".concat(o,"__body"),e({},"".concat(o,"__body_no-content"),!(null==f?void 0:f.length))),children:[!!(null==f?void 0:f.length)&&!(void 0!==p&&p)&&c("div",{className:r("".concat(o,"__thead")),children:_.map(function(t){return c("div",{className:r("".concat(o,"__thead-cell"),t.theadCellClassName,t.columnClassName,e({},"".concat(o,"__thead-cell_reqiured"),t.isRequired)),"data-key":t.key,children:t.label},"thead-".concat(t.key))})}),c("div",{className:r("".concat(o,"__table")),children:(null==f?void 0:f.length)?f.map(function(e){return c("div",{className:r("".concat(o,"__row")),"data-id":e.id,children:_.map(function(a){return c("div",{className:r("".concat(o,"__cell"),a.cellClassName,a.columnClassName),children:c(y,n(t({},v),{field:n(t({},a),{value:e[a.key],rowData:e}),onChange:function(t,n){return O(n,a.key,e.id)}}))},"row-".concat(e.id,"-cell-").concat(a.key))})},"row-".concat(e.id))}):c("div",{className:r("".concat(o,"__row")),"data-id":"empty-row",children:c("span",{className:r("".concat(o,"__no-data-content")),children:null!=m?m:"No data"})})})]})]})}
+import cn from 'classnames';
+
+import './WidgetPseudoTable.scss';
+
+const RC = 'widget-pseudo-table';
+
+function WidgetPseudoTable(props) {
+  const {
+    className,
+    title,
+    rightHeaderContent,
+    nullContentData,
+    isNotRenderThead = false,
+    isNoHeader = false,
+    columns = [],
+    rows,
+    CellComponent,
+    CellComponentProps,
+    onChange,
+  } = props || {};
+
+  return (
+    <div className={cn(RC, className)}>
+      {!isNoHeader && (
+        <div className={cn(`${RC}__header`)}>
+          <div className={cn(`${RC}__title-block`)}>{title}</div>
+          <div className={cn(`${RC}__right-header-content-block`)}>
+            {rightHeaderContent}
+          </div>
+        </div>
+      )}
+      <div
+        className={cn(`${RC}__body`, {
+          [`${RC}__body_no-content`]: !rows?.length,
+        })}
+      >
+        {Boolean(rows?.length) && !isNotRenderThead && (
+          <div className={cn(`${RC}__thead`)}>
+            {columns.map(field => (
+              <div
+                key={`thead-${field.key}`}
+                className={cn(
+                  `${RC}__thead-cell`,
+                  field.theadCellClassName,
+                  field.columnClassName,
+                  {
+                    [`${RC}__thead-cell_reqiured`]: field.isRequired,
+                  },
+                )}
+                data-key={field.key}
+              >
+                {field.label}
+              </div>
+            ))}
+          </div>
+        )}
+
+        <div className={cn(`${RC}__table`)}>
+          {rows?.length
+            ? (
+                rows.map(row => (
+                  <div
+                    key={`row-${row.id}`}
+                    className={cn(`${RC}__row`)}
+                    data-id={row.id}
+                  >
+                    {columns.map(cell => (
+                      <div
+                        key={`row-${row.id}-cell-${cell.key}`}
+                        className={cn(
+                          `${RC}__cell`,
+                          cell.cellClassName,
+                          cell.columnClassName,
+                        )}
+                      >
+                        <CellComponent
+                          {...CellComponentProps}
+                          field={{
+                            ...cell,
+                            value: row[cell.key],
+                            rowData: row,
+                          }}
+                          onChange={(key, val) => onChange(val, cell.key, row.id)}
+                        />
+                      </div>
+                    ))}
+                  </div>
+                ))
+              )
+            : (
+                <div className={cn(`${RC}__row`)} data-id="empty-row">
+                  <span className={cn(`${RC}__no-data-content`)}>
+                    {nullContentData ?? 'No data'}
+                  </span>
+                </div>
+              )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default WidgetPseudoTable;