@true-engineering/true-react-common-ui-kit 1.11.0 → 1.12.0

package/package.json

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

package/src/components/Button/Button.tsx

@@ -1,10 +1,10 @@
 import {
   useMemo,
-  FC,
   ReactElement,
   ReactNode,
   ButtonHTMLAttributes,
   MouseEvent,
+  forwardRef,
 } from 'react';
 import clsx from 'clsx';
 import merge from 'lodash-es/merge';
@@ -102,94 +102,106 @@ export interface IButtonProps extends ICommonProps {
   onMouseDown?(event: MouseEvent<HTMLButtonElement>): void | Promise<void>;
 }
 
-export const Button: FC<IButtonProps> = ({
-  type = 'button',
-  children,
-  size = 'l',
-  view = 'primary',
-  isFullWidth = false,
-  isInline = false,
-  isDisabled = false,
-  isActive = false,
-  isLoading = false,
-  shouldSkipTabNavigation = false,
-  data,
-  testId,
-  tweakStyles,
-  icon,
-  iconPosition = 'left',
-  preloaderType = 'dots',
-  onClick,
-  onMouseDown,
-}) => {
-  const { classes, componentStyles } = useTheme('Button', styles, tweakStyles);
+export const Button = forwardRef<HTMLButtonElement, IButtonProps>(
+  (
+    {
+      type = 'button',
+      children,
+      size = 'l',
+      view = 'primary',
+      isFullWidth = false,
+      isInline = false,
+      isDisabled = false,
+      isActive = false,
+      isLoading = false,
+      shouldSkipTabNavigation = false,
+      data,
+      testId,
+      tweakStyles,
+      icon,
+      iconPosition = 'left',
+      preloaderType = 'dots',
+      onClick,
+      onMouseDown,
+    },
+    ref,
+  ) => {
+    const { classes, componentStyles } = useTheme(
+      'Button',
+      styles,
+      tweakStyles,
+    );
 
-  const tweakPreloaderStyles = useMemo(
-    () =>
-      merge(
-        {},
-        size === 's' || size === 'm' ? dotsPreloaderStyles : undefined,
-        componentStyles.tweakPreloader,
-        tweakStyles?.tweakPreloader,
-      ) as ThemedPreloaderStyles,
-    [tweakStyles?.tweakPreloader, size],
-  );
+    const tweakPreloaderStyles = useMemo(
+      () =>
+        merge(
+          {},
+          size === 's' || size === 'm' ? dotsPreloaderStyles : undefined,
+          componentStyles.tweakPreloader,
+          tweakStyles?.tweakPreloader,
+        ) as ThemedPreloaderStyles,
+      [tweakStyles?.tweakPreloader, size],
+    );
 
-  const hasIcon = isNotEmpty(icon);
-  const hasChildren = isNotEmpty(children);
-  const hasNoAction = isDisabled || isLoading;
+    const hasIcon = isNotEmpty(icon);
+    const hasChildren = isNotEmpty(children);
+    const hasNoAction = isDisabled || isLoading;
 
-  return (
-    <button
-      type={type}
-      className={clsx(classes.root, classes[size], classes[view], {
-        [classes.disabled]: isDisabled,
-        [classes.fullWidth]: isFullWidth,
-        [classes.inline]: isInline,
-        [classes.active]: isActive,
-        [classes.loading]: isLoading,
-        [classes.onlyIcon]: hasIcon && !hasChildren,
-      })}
-      tabIndex={shouldSkipTabNavigation ? -1 : undefined}
-      disabled={hasNoAction}
-      onClick={!hasNoAction ? onClick : undefined}
-      onMouseDown={!hasNoAction ? onMouseDown : undefined}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
-    >
-      <span
-        className={clsx(classes.content, {
-          [classes.iconFromRight]:
-            hasChildren && hasIcon && iconPosition === 'right',
-          [classes.iconFromLeft]:
-            hasChildren && hasIcon && iconPosition === 'left',
+    return (
+      <button
+        ref={ref}
+        type={type}
+        className={clsx(classes.root, classes[size], classes[view], {
+          [classes.disabled]: isDisabled,
+          [classes.fullWidth]: isFullWidth,
+          [classes.inline]: isInline,
+          [classes.active]: isActive,
+          [classes.loading]: isLoading,
+          [classes.onlyIcon]: hasIcon && !hasChildren,
         })}
+        tabIndex={shouldSkipTabNavigation ? -1 : undefined}
+        disabled={hasNoAction}
+        onClick={!hasNoAction ? onClick : undefined}
+        onMouseDown={!hasNoAction ? onMouseDown : undefined}
+        {...addDataTestId(testId)}
+        {...addDataAttributes(data)}
       >
-        {hasIcon && (
-          <span className={classes.icon}>
-            {typeof icon === 'string' ? (
-              <Icon type={icon as IIconType} />
-            ) : (
-              icon
-            )}
-          </span>
-        )}
-        {hasChildren && (
-          <span className={clsx(classes.children, hasIcon && classes.withIcon)}>
-            {children}
+        <span
+          className={clsx(classes.content, {
+            [classes.iconFromRight]:
+              hasChildren && hasIcon && iconPosition === 'right',
+            [classes.iconFromLeft]:
+              hasChildren && hasIcon && iconPosition === 'left',
+          })}
+        >
+          {hasIcon && (
+            <span className={classes.icon}>
+              {typeof icon === 'string' ? (
+                <Icon type={icon as IIconType} />
+              ) : (
+                icon
+              )}
+            </span>
+          )}
+          {hasChildren && (
+            <span
+              className={clsx(classes.children, hasIcon && classes.withIcon)}
+            >
+              {children}
+            </span>
+          )}
+        </span>
+
+        {isLoading && (
+          <span className={classes.loader}>
+            <ThemedPreloader
+              type={preloaderType}
+              useCurrentColor
+              tweakStyles={tweakPreloaderStyles}
+            />
           </span>
         )}
-      </span>
-
-      {isLoading && (
-        <span className={classes.loader}>
-          <ThemedPreloader
-            type={preloaderType}
-            useCurrentColor
-            tweakStyles={tweakPreloaderStyles}
-          />
-        </span>
-      )}
-    </button>
-  );
-};
+      </button>
+    );
+  },
+);