intelicoreact 1.6.0 → 1.6.2

package/dist/Atomic/UI/MonoAccordion/MonoAccordion._test.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } from '@testing-library/react';
+import MonoAccordion from './MonoAccordion';
+describe('monoAccordion', ()=>{
+    const defaultProps = {
+        titleJSX: /*#__PURE__*/ _jsx("div", {
+            children: "Accordion Title"
+        }),
+        icon: /*#__PURE__*/ _jsx("span", {
+            children: "▼"
+        }),
+        isOpen: false,
+        onClick: jest.fn(),
+        testId: 'test-accordion'
+    };
+    it('renders correctly with default props', ()=>{
+        render(/*#__PURE__*/ _jsx(MonoAccordion, {
+            ...defaultProps,
+            children: /*#__PURE__*/ _jsx("div", {
+                children: "Accordion Content"
+            })
+        }));
+        expect(screen.getByTestId('test-accordion')).toBeInTheDocument();
+        expect(screen.getByText('Accordion Title')).toBeInTheDocument();
+    });
+    it('handles click events correctly', ()=>{
+        render(/*#__PURE__*/ _jsx(MonoAccordion, {
+            ...defaultProps,
+            children: /*#__PURE__*/ _jsx("div", {
+                children: "Accordion Content"
+            })
+        }));
+        fireEvent.click(screen.getByRole('button'));
+        expect(defaultProps.onClick).toHaveBeenCalled();
+    });
+    it('applies correct classes when open', ()=>{
+        render(/*#__PURE__*/ _jsx(MonoAccordion, {
+            ...defaultProps,
+            isOpen: true,
+            children: /*#__PURE__*/ _jsx("div", {
+                children: "Accordion Content"
+            })
+        }));
+        expect(screen.getByTestId('test-accordion')).toHaveClass('mono-accordion--is-open');
+    });
+    it('applies disabled state correctly', ()=>{
+        render(/*#__PURE__*/ _jsx(MonoAccordion, {
+            ...defaultProps,
+            disabled: true,
+            children: /*#__PURE__*/ _jsx("div", {
+                children: "Accordion Content"
+            })
+        }));
+        const button = screen.getByRole('button');
+        expect(button).toBeDisabled();
+        expect(screen.getByTestId('test-accordion')).toHaveClass('mono-accordion--disabled');
+    });
+    it('handles aria attributes correctly', ()=>{
+        const { rerender } = render(/*#__PURE__*/ _jsx(MonoAccordion, {
+            ...defaultProps,
+            children: /*#__PURE__*/ _jsx("div", {
+                children: "Accordion Content"
+            })
+        }));
+        expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
+        rerender(/*#__PURE__*/ _jsx(MonoAccordion, {
+            ...defaultProps,
+            isOpen: true,
+            children: /*#__PURE__*/ _jsx("div", {
+                children: "Accordion Content"
+            })
+        }));
+        expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
+    });
+});

package/dist/Atomic/UI/MonoAccordion/MonoAccordion.interface.js

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
+export { };

package/dist/Atomic/UI/MonoAccordion/MonoAccordion.js

@@ -1,118 +1,63 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
-        return _default;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-require("./MonoAccordion.scss");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from "react";
+import cn from "classnames";
+import "./MonoAccordion.scss";
+const RC = "mono-accordion";
+const MonoAccordion = ({ titleJSX, icon, children, isOpen, onClick, className, disabled, testId = "mono-accordion", datasetProp = {} })=>{
+    const [maxHeight, setMaxHeight] = useState();
+    const titleRef = useRef();
+    const containerRef = useRef();
+    const setHeight = (value)=>{
+        if (value !== undefined) setMaxHeight((state)=>`${value}px`);
+        else setMaxHeight((state)=>{
+            var _Array_from_reduce, _Array_from, _containerRef_current;
+            return `${(_Array_from = Array.from((_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.childNodes)) === null || _Array_from === void 0 ? void 0 : (_Array_from_reduce = _Array_from.reduce) === null || _Array_from_reduce === void 0 ? void 0 : _Array_from_reduce.call(_Array_from, (acc, el)=>acc + el.offsetHeight, 0)}px`;
+        });
     };
-}
-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 = 'mono-accordion';
-const dataSetDefault = {};
-const MonoAccordion = ({ titleJSX, icon, children, isOpen, onClick, className, disabled = false, testId = 'mono-accordion', datasetProp = dataSetDefault })=>{
-    const contentRef = (0, _react.useRef)(null);
-    const containerRef = (0, _react.useRef)(null);
-    const handleClick = (0, _react.useCallback)((e)=>{
-        e.stopPropagation();
-        if (!disabled) {
+    const handleClick = (e)=>{
+        if (!Array.from(titleRef.current.childNodes).some((el)=>el.contains(e.target))) {
             onClick(e);
-        }
-    }, [
-        onClick,
-        disabled
-    ]);
-    // Обновляем CSS переменную с высотой контента при изменении содержимого
-    (0, _react.useEffect)(()=>{
-        if (containerRef.current && contentRef.current) {
-            const height = contentRef.current.scrollHeight;
-            containerRef.current.style.setProperty('--content-height', `${height}px`);
-        }
+            e === null || e === void 0 ? void 0 : e.preventDefault();
+            e === null || e === void 0 ? void 0 : e.stopPropagation();
+        } else return e;
+    };
+    useEffect(()=>{
+        if (!isOpen) setHeight(0);
+        else setHeight();
     }, [
-        children,
-        isOpen
+        isOpen,
+        children
     ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+    return /*#__PURE__*/ _jsxs("div", {
         ...datasetProp,
         "data-testid": testId,
-        className: (0, _classnames.default)(RC, className, {
-            [`${RC}--is-open`]: isOpen,
-            [`${RC}--disabled`]: disabled
+        className: cn(RC, className, {
+            [`${RC}_is-open`]: isOpen,
+            [`${RC}_disabled`]: disabled
         }),
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)("button", {
-                type: "button",
+            /*#__PURE__*/ _jsxs("div", {
                 className: `${RC}__head`,
                 onClick: handleClick,
-                "aria-expanded": isOpen,
-                disabled: disabled,
                 children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                        className: `${RC}__title-container`,
+                    /*#__PURE__*/ _jsx("div", {
+                        ref: titleRef,
+                        className: `${RC}__tile-container`,
                         children: titleJSX
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                    /*#__PURE__*/ _jsx("span", {
                         className: `${RC}__icon-container`,
-                        "aria-hidden": "true",
                         children: icon
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            /*#__PURE__*/ _jsx("div", {
                 ref: containerRef,
-                className: `${RC}__container`,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                    ref: contentRef,
+                style: {
+                    maxHeight
+                },
+                className: cn(`${RC}__container`),
+                children: /*#__PURE__*/ _jsx("div", {
                     className: `${RC}__content-wrapper`,
                     children: children
                 })
@@ -120,4 +65,4 @@ const MonoAccordion = ({ titleJSX, icon, children, isOpen, onClick, className, d
         ]
     });
 };
-const _default = MonoAccordion;
+export default MonoAccordion;

package/dist/Atomic/UI/MonoAccordion/MonoAccordion.scss

@@ -2,215 +2,68 @@
 @use "../../../scss/mixins";
 
 .mono-accordion {
-  // Layout & Spacing
-  --accordion-padding-x: 15px;
-  --accordion-padding-y: 10px;
-  --accordion-padding: var(--accordion-padding-y, 10px)
-    var(--accordion-padding-x, 15px);
-  --accordion-nested-margin: 10px;
-  --accordion-icon-margin: 12px;
-  --accordion-border-radius: 0px;
-  --accordion-max-width: 100%;
-  --accordion-min-width: auto;
-
-  // Typography
-  --accordion-font-size: 13px;
-  --accordion-font-weight: 400;
-  --accordion-line-height: 1.4;
-  --accordion-title-font-size: var(--accordion-font-size, 13px);
-  --accordion-title-font-weight: 500;
-  --accordion-content-font-size: var(--accordion-font-size, 13px);
-
-  // Colors
-  --accordion-bg: transparent;
-  --accordion-hover-bg: var(--color-gray-gentle, #{vars.$color--gray-gentel});
-  --accordion-active-bg: var(--accordion-hover-bg);
-  --accordion-text-color: inherit;
-  --accordion-title-color: var(--accordion-text-color, inherit);
-  --accordion-content-color: var(--accordion-text-color, inherit);
-  --accordion-icon-color: currentColor;
-  --accordion-disabled-opacity: 0.5;
-
-  // Borders
-  --accordion-border-width: 0px;
-  --accordion-border-style: solid;
-  --accordion-border-color: transparent;
-  --accordion-focus-ring-color: #4a90e2;
-  --accordion-focus-ring-width: 2px;
-  --accordion-focus-ring-offset: -2px;
-
-  // Animation
-  --accordion-transition-duration: 350ms;
-  --accordion-transition-timing: cubic-bezier(0.34, 1.56, 0.64, 1);
-  --accordion-icon-rotation: 180deg;
-  --accordion-scale-factor: 0.98;
-  --accordion-content-origin: top;
-
-  // Icons
-  --accordion-icon-size: 1em;
-  --accordion-icon-rotation-initial: 0deg;
-
-  // Z-index
-  --accordion-head-z-index: 1;
-  --accordion-content-z-index: 0;
-  width: var(--accordion-max-width, 100%);
-  min-width: var(--accordion-min-width, auto);
   height: fit-content;
 
-  font-size: var(--accordion-font-size, 13px);
-  line-height: var(--accordion-line-height, 1.4);
-
-  color: var(--accordion-text-color, inherit);
-  border: var(--accordion-border-width, 0px)
-    var(--accordion-border-style, solid)
-    var(--accordion-border-color, transparent);
-  border-radius: var(--accordion-border-radius, 0px);
-  background: var(--accordion-bg, transparent);
-
-  // Стили для вложенных аккордеонов
-  .mono-accordion {
-    margin: var(--accordion-nested-margin, 10px) 0;
-
-    .mono-accordion__container {
-      max-height: 0;
-    }
-
-    &--is-open {
-      .mono-accordion__container {
-        max-height: var(--content-height, 1000px);
-      }
-
-      .mono-accordion__content-wrapper {
-        opacity: 1;
-
-        transform: scale(1);
-      }
-    }
-  }
-
   &__head {
-    z-index: var(--accordion-head-z-index, 1);
-
     display: flex;
     justify-content: space-between;
     align-items: center;
 
-    width: 100%;
-    padding: var(--accordion-padding, 10px 15px);
+    height: fit-content;
+    padding: 10px 15px;
 
-    font-size: var(--accordion-title-font-size, 13px);
-    font-weight: var(--accordion-title-font-weight, 500);
     cursor: pointer;
-    text-align: left;
-
-    color: var(--accordion-title-color, inherit);
-    border: none;
-    background: none;
-
-    transition: background-color var(--accordion-transition-duration, 350ms)
-      ease;
-    transform: translateZ(0);
 
     &:hover {
-      background-color: var(--accordion-hover-bg, #{vars.$color--gray-gentel});
-    }
-
-    &:active {
-      background-color: var(--accordion-active-bg, #{vars.$color--gray-gentel});
-    }
-
-    &:focus-visible {
-      outline: var(--accordion-focus-ring-width, 2px) solid
-        var(--accordion-focus-ring-color, #4a90e2);
-      outline-offset: var(--accordion-focus-ring-offset, -2px);
+      background-color: vars.$color--gray-gentel;
     }
   }
 
   &__icon-container {
     display: flex;
-    flex-shrink: 0;
+    flex-flow: row nowrap;
     justify-content: center;
     align-items: center;
 
-    margin-left: var(--accordion-icon-margin, 12px);
-
-    font-size: var(--accordion-icon-size, 1em);
-
-    color: var(--accordion-icon-color, currentColor);
-
-    transition: transform var(--accordion-transition-duration, 350ms)
-      var(--accordion-transition-timing, cubic-bezier(0.34, 1.56, 0.64, 1));
-    transform: rotate(var(--accordion-icon-rotation-initial, 0deg));
+    width: fit-content;
+    height: 100%;
   }
 
-  &__title-container {
+  &__tile-container {
     flex-grow: 1;
   }
 
   &__container {
-    z-index: var(--accordion-content-z-index, 0);
-
+    display: flex;
     overflow: hidden;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
 
-    max-height: 0;
+    font-size: 13px;
 
-    transition: max-height var(--accordion-transition-duration, 350ms)
-      var(--accordion-transition-timing, cubic-bezier(0.34, 1.56, 0.64, 1));
+    transition: all 0.25s ease-out;
+
+    @include mixins.custom-scroll;
   }
 
   &__content-wrapper {
-    padding: 0 var(--accordion-padding-x, 15px);
-
-    font-size: var(--accordion-content-font-size, 13px);
-
-    opacity: 0;
-    color: var(--accordion-content-color, inherit);
-
-    transition:
-      opacity var(--accordion-transition-duration, 350ms)
-        var(--accordion-transition-timing, cubic-bezier(0.34, 1.56, 0.64, 1)),
-      transform var(--accordion-transition-duration, 350ms)
-        var(--accordion-transition-timing, cubic-bezier(0.34, 1.56, 0.64, 1));
-    transform: scale(var(--accordion-scale-factor, 0.98));
-    transform-origin: var(--accordion-content-origin, top);
-    will-change: transform, opacity;
+    padding: 0 15px;
   }
 
-  &--is-open {
-    > .mono-accordion__container {
-      max-height: var(--content-height, 1000px);
-    }
-
-    > .mono-accordion__container .mono-accordion__content-wrapper {
-      opacity: 1;
+  &_open {
+    .mono-accordion__container {
+      padding: 10px 15px;
 
-      transform: scale(1);
+      transition: all 0.25s ease-out;
     }
 
-    > .mono-accordion__head .mono-accordion__icon-container {
-      transform: rotate(var(--accordion-icon-rotation, 180deg));
+    .mono-accordion__content-wrapper {
+      pointer-events: initial;
     }
   }
 
-  &--disabled {
+  &_disabled {
     pointer-events: none;
-
-    opacity: var(--accordion-disabled-opacity, 0.5);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    --accordion-transition-duration: 0ms;
-
-    &__content-wrapper {
-      transform: none;
-    }
-  }
-
-  @media (max-width: 768px) {
-    --accordion-padding-x: 12px;
-    --accordion-padding-y: 8px;
-    --accordion-nested-margin: 8px;
-    --accordion-icon-margin: 8px;
-    --accordion-font-size: 14px;
   }
 }