intelicoreact 1.4.69 → 1.4.70

package/dist/Atomic/UI/AccordionText/AccordionText.js

@@ -11,37 +11,51 @@ var _reactFeather = require("react-feather");
 require("./AccordionText.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 && Object.prototype.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 defaultText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
 const AccordionText = _ref => {
   let {
     isDefaultOpen = false,
     isOuterOpen = false,
-    isForcedAlwaysAccordion = false,
     className,
-    text = "Default Accordion Text."
+    text = defaultText,
+    shortText = null
   } = _ref;
   const bodyRef = (0, _react.useRef)(null);
   const [isOpen, setIsOpen] = (0, _react.useState)(isDefaultOpen);
-  const [isAccordionNeeded, setIsAccordionNeeded] = (0, _react.useState)(false);
-  function isEllipsisActive(e) {
-    return e.offsetWidth < e.scrollWidth;
-  }
+  const [isNeedTrimText, setIsNeedTrimText] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => {
     setIsOpen(isOuterOpen);
   }, [isOuterOpen]);
   (0, _react.useEffect)(() => {
-    if (bodyRef !== null && bodyRef !== void 0 && bodyRef.current) {
-      setIsAccordionNeeded(isEllipsisActive(bodyRef === null || bodyRef === void 0 ? void 0 : bodyRef.current));
+    const checkEllipsis = () => {
+      if (bodyRef.current) {
+        setIsNeedTrimText(bodyRef.current.scrollWidth > bodyRef.current.clientWidth);
+      }
+    };
+    const resizeObserver = new ResizeObserver(() => {
+      checkEllipsis();
+    });
+    if (bodyRef.current) {
+      resizeObserver.observe(bodyRef.current);
+      checkEllipsis();
     }
-  }, [bodyRef === null || bodyRef === void 0 ? void 0 : bodyRef.current]);
+    return () => {
+      if (bodyRef.current) {
+        resizeObserver.unobserve(bodyRef.current);
+      }
+    };
+  }, [text]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)("accordion-text", className, {
       "accordion-text--open": isOpen
     }),
-    onClick: () => setIsOpen(isOpen => !isOpen)
+    onClick: () => setIsOpen(prevIsOpen => !prevIsOpen)
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "accordion-text__body",
+    className: (0, _classnames.default)("accordion-text__body", {
+      "accordion-text__body--trim-text": isNeedTrimText && !isOpen
+    }),
     ref: bodyRef
-  }, text), isAccordionNeeded || isForcedAlwaysAccordion && /*#__PURE__*/_react.default.createElement("div", {
+  }, shortText ? isOpen ? text : shortText : text), /*#__PURE__*/_react.default.createElement("div", {
     className: "accordion-text__toggle"
   }, isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, null) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, null)));
 };

package/dist/Atomic/UI/AccordionText/AccordionText.scss

@@ -1,50 +1,53 @@
 .accordion-text {
   position: relative;
-
-  height: 100%;
-  max-height: 18px;
   padding: 4px 24px 4px 8px;
-
   font-size: 12px;
   font-weight: 400;
   line-height: 18px;
   cursor: pointer;
-
   border-radius: 4px;
   background-color: rgba(48, 57, 91, 0.05);
+  overflow: hidden;
+  height: 25px;
+  box-sizing: border-box;
 
   &--open {
     max-height: 100%;
-  }
-
-  &--open &__body {
-    overflow: visible;
-
-    white-space: normal; // Change 'wrap' to 'normal'
-    text-overflow: clip; // Change 'unset' to 'clip'
+    height: fit-content;
   }
 
   &__body {
     overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 100%; // Устанавливаем ширину в 100% родительского контейнера
+  }
 
+  &__body--trim-text > * {
     white-space: nowrap;
     text-overflow: ellipsis;
+    overflow: hidden; // Необходимо для работы обрезки текста
+    width: 100%; // Обеспечивает переполнение текста
+  }
+
+  &--open &__body {
+    white-space: normal; // Вернуть к нормальному переносу в открытом состоянии
+    text-overflow: clip; // Убираем обрезку текста
+    overflow: visible; // Убираем скрытие переполненного контента в открытом состоянии
   }
 
   &__toggle {
     position: absolute;
     top: 0;
     right: 0;
-
     display: flex;
     justify-content: center;
     align-items: center;
-
     width: 16px;
     height: 16px;
     margin: 4px;
     padding: 2px;
-
     color: #a0a4b0;
+    pointer-events: none;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "1.4.69",
+  "version": "1.4.70",
   "description": "",
   "main": "dist/index.js",
   "files": [