@true-engineering/true-react-common-ui-kit 3.12.0 → 3.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.12.0",
+  "version": "3.13.1",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/IconButton/IconButton.styles.ts

@@ -47,10 +47,6 @@ export const useStyles = createThemedStyles('IconButton', {
   },
 
   loading: {
-    '& $content': {
-      visibility: 'hidden',
-    },
-
     '& $loader': {
       display: 'block',
     },

package/src/components/Modal/Modal.tsx

@@ -5,6 +5,7 @@ import clsx from 'clsx';
 import {
   addDataTestId,
   getTestId,
+  isArrayNotEmpty,
   isReactNodeNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
@@ -20,6 +21,8 @@ export interface IModalProps extends ICommonProps<IModalStyles>, IModalTransitio
   size?: 'l' | 'm' | 's';
   /** @default false */
   isFooterSticky?: boolean;
+  footer?: ReactNode;
+  /** @deprecated use {@link footer} */
   buttons?: ReactNode[];
   /** @default 'right' */
   buttonsAlign?: 'left' | 'center' | 'right';
@@ -48,6 +51,7 @@ export const Modal: FC<IModalProps> = ({
   title,
   size = 'l',
   isFooterSticky = false,
+  footer,
   buttons,
   buttonsAlign = 'right',
   hasCloseButton = true,
@@ -77,7 +81,7 @@ export const Modal: FC<IModalProps> = ({
   const [isClickOnOverlay, setIsClickOnOverlay] = useState(false);
 
   const isModalOpen = restProps.in ?? isOpen;
-  const hasFooter = buttons !== undefined && buttons.length > 0;
+  const hasFooter = isReactNodeNotEmpty(footer) || isArrayNotEmpty(buttons);
   const overlay = useRef<HTMLDivElement>(null);
 
   // Клик на оверлее обрабатываем через связку onMouseDown и onMouseUp, т.к. клик
@@ -185,7 +189,7 @@ export const Modal: FC<IModalProps> = ({
                         [classes.stickyFooter]: isFooterSticky,
                       })}
                     >
-                      {buttons.map((button) => button)}
+                      {isReactNodeNotEmpty(footer) ? footer : buttons}
                     </div>
                   </div>
                 )}