@cloud-ru/uikit-product-load-status 1.1.10 → 1.1.11-preview-e99a99a6.0

package/dist/cjs/components/LoadStatus.d.ts

@@ -1,8 +1,9 @@
+import { ReactNode } from 'react';
 import { WithSupportProps } from '@cloud-ru/uikit-product-utils';
 import { ProgressBarProps } from '@snack-uikit/progress-bar';
 import { LoadValueType, ProgressLimitList } from './types';
 export type LoadStatusProps = WithSupportProps<{
-    label?: string;
+    label?: ReactNode;
     value?: string;
     hint?: string;
     valueType?: LoadValueType;
@@ -10,4 +11,14 @@ export type LoadStatusProps = WithSupportProps<{
     showErrorIcon?: boolean;
     className?: string;
 } & Pick<ProgressBarProps, 'progress' | 'size'>>;
-export declare function LoadStatus({ label, value, hint, valueType, progress, size, appearanceByProgress, showErrorIcon, className, ...props }: LoadStatusProps): import("react/jsx-runtime").JSX.Element;
+export declare const LoadStatus: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string;
+} & import("react").AriaAttributes & {
+    label?: ReactNode;
+    value?: string;
+    hint?: string;
+    valueType?: LoadValueType;
+    appearanceByProgress?: ProgressLimitList;
+    showErrorIcon?: boolean;
+    className?: string;
+} & Pick<ProgressBarProps, "progress" | "size"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/LoadStatus.js

@@ -14,9 +14,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LoadStatus = LoadStatus;
+exports.LoadStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
 const uikit_product_icons_1 = require("@cloud-ru/uikit-product-icons");
 const uikit_product_utils_1 = require("@cloud-ru/uikit-product-utils");
 const figma_tokens_1 = require("@snack-uikit/figma-tokens");
@@ -25,10 +26,10 @@ const typography_1 = require("@snack-uikit/typography");
 const constants_1 = require("./constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const utils_1 = require("./utils");
-function LoadStatus(_a) {
+exports.LoadStatus = (0, react_1.forwardRef)(function LoadStatus(_a, ref) {
     var { label, value, hint, valueType = 'none', progress, size = 's', appearanceByProgress = constants_1.DEFAULT_APPEARANCE_BY_PROGRESS, showErrorIcon, className } = _a, props = __rest(_a, ["label", "value", "hint", "valueType", "progress", "size", "appearanceByProgress", "showErrorIcon", "className"]);
     const progressAppearance = (0, utils_1.getProgressBarColor)(progress, appearanceByProgress);
     const isShowHeader = label || value || valueType !== 'none';
     const symbol = constants_1.SYMBOL_BY_TYPE[valueType];
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.loadStatus, className) }, (0, uikit_product_utils_1.extractSupportProps)(props), { children: [isShowHeader && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsxs)(typography_1.Typography.SansBodyS, { children: [label, (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.labelValue, children: value })] }), symbol && ((0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, { className: styles_module_scss_1.default.valueSymbol, children: `${progress} ${symbol}` }))] })), (0, jsx_runtime_1.jsx)(progress_bar_1.ProgressBar, { progress: progress, size: size, appearance: progressAppearance }), hint && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.hintWrapper, children: [showErrorIcon && (0, jsx_runtime_1.jsx)(uikit_product_icons_1.CrossFilledSVG, { color: figma_tokens_1.themeVars.sys.red.accentDefault, size: 16 }), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, { className: styles_module_scss_1.default.hint, children: hint })] }))] })));
-}
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.loadStatus, className), ref: ref }, (0, uikit_product_utils_1.extractSupportProps)(props), { children: [isShowHeader && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsxs)(typography_1.Typography.SansBodyS, { children: [label, (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.labelValue, children: value })] }), symbol && ((0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, { className: styles_module_scss_1.default.valueSymbol, children: `${progress} ${symbol}` }))] })), (0, jsx_runtime_1.jsx)(progress_bar_1.ProgressBar, { progress: progress, size: size, appearance: progressAppearance }), hint && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.hintWrapper, children: [showErrorIcon && (0, jsx_runtime_1.jsx)(uikit_product_icons_1.CrossFilledSVG, { color: figma_tokens_1.themeVars.sys.red.accentDefault, size: 16 }), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, { className: styles_module_scss_1.default.hint, children: hint })] }))] })));
+});

package/dist/esm/components/LoadStatus.d.ts

@@ -1,8 +1,9 @@
+import { ReactNode } from 'react';
 import { WithSupportProps } from '@cloud-ru/uikit-product-utils';
 import { ProgressBarProps } from '@snack-uikit/progress-bar';
 import { LoadValueType, ProgressLimitList } from './types';
 export type LoadStatusProps = WithSupportProps<{
-    label?: string;
+    label?: ReactNode;
     value?: string;
     hint?: string;
     valueType?: LoadValueType;
@@ -10,4 +11,14 @@ export type LoadStatusProps = WithSupportProps<{
     showErrorIcon?: boolean;
     className?: string;
 } & Pick<ProgressBarProps, 'progress' | 'size'>>;
-export declare function LoadStatus({ label, value, hint, valueType, progress, size, appearanceByProgress, showErrorIcon, className, ...props }: LoadStatusProps): import("react/jsx-runtime").JSX.Element;
+export declare const LoadStatus: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string;
+} & import("react").AriaAttributes & {
+    label?: ReactNode;
+    value?: string;
+    hint?: string;
+    valueType?: LoadValueType;
+    appearanceByProgress?: ProgressLimitList;
+    showErrorIcon?: boolean;
+    className?: string;
+} & Pick<ProgressBarProps, "progress" | "size"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/components/LoadStatus.js

@@ -11,6 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
+import { forwardRef } from 'react';
 import { CrossFilledSVG } from '@cloud-ru/uikit-product-icons';
 import { extractSupportProps } from '@cloud-ru/uikit-product-utils';
 import { themeVars } from '@snack-uikit/figma-tokens';
@@ -19,10 +20,10 @@ import { Typography } from '@snack-uikit/typography';
 import { DEFAULT_APPEARANCE_BY_PROGRESS, SYMBOL_BY_TYPE } from './constants';
 import styles from './styles.module.css';
 import { getProgressBarColor } from './utils';
-export function LoadStatus(_a) {
+export const LoadStatus = forwardRef(function LoadStatus(_a, ref) {
     var { label, value, hint, valueType = 'none', progress, size = 's', appearanceByProgress = DEFAULT_APPEARANCE_BY_PROGRESS, showErrorIcon, className } = _a, props = __rest(_a, ["label", "value", "hint", "valueType", "progress", "size", "appearanceByProgress", "showErrorIcon", "className"]);
     const progressAppearance = getProgressBarColor(progress, appearanceByProgress);
     const isShowHeader = label || value || valueType !== 'none';
     const symbol = SYMBOL_BY_TYPE[valueType];
-    return (_jsxs("div", Object.assign({ className: cn(styles.loadStatus, className) }, extractSupportProps(props), { children: [isShowHeader && (_jsxs("div", { className: styles.header, children: [_jsxs(Typography.SansBodyS, { children: [label, _jsx("span", { className: styles.labelValue, children: value })] }), symbol && (_jsx(Typography.SansBodyS, { className: styles.valueSymbol, children: `${progress} ${symbol}` }))] })), _jsx(ProgressBar, { progress: progress, size: size, appearance: progressAppearance }), hint && (_jsxs("div", { className: styles.hintWrapper, children: [showErrorIcon && _jsx(CrossFilledSVG, { color: themeVars.sys.red.accentDefault, size: 16 }), _jsx(Typography.SansBodyS, { className: styles.hint, children: hint })] }))] })));
-}
+    return (_jsxs("div", Object.assign({ className: cn(styles.loadStatus, className), ref: ref }, extractSupportProps(props), { children: [isShowHeader && (_jsxs("div", { className: styles.header, children: [_jsxs(Typography.SansBodyS, { children: [label, _jsx("span", { className: styles.labelValue, children: value })] }), symbol && (_jsx(Typography.SansBodyS, { className: styles.valueSymbol, children: `${progress} ${symbol}` }))] })), _jsx(ProgressBar, { progress: progress, size: size, appearance: progressAppearance }), hint && (_jsxs("div", { className: styles.hintWrapper, children: [showErrorIcon && _jsx(CrossFilledSVG, { color: themeVars.sys.red.accentDefault, size: 16 }), _jsx(Typography.SansBodyS, { className: styles.hint, children: hint })] }))] })));
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-load-status",
   "title": "Load Status",
-  "version": "1.1.10",
+  "version": "1.1.11-preview-e99a99a6.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -45,5 +45,5 @@
   "peerDependencies": {
     "@snack-uikit/figma-tokens": "*"
   },
-  "gitHead": "849cdd305b21bc8fea872e8645014d7fc4d3b2d6"
+  "gitHead": "e584fa2e3e9e6300502615ed545b67c1ac3beb7b"
 }

package/src/components/LoadStatus.tsx

@@ -1,4 +1,5 @@
 import cn from 'classnames';
+import { forwardRef, ReactNode } from 'react';
 
 import { CrossFilledSVG } from '@cloud-ru/uikit-product-icons';
 import { extractSupportProps, WithSupportProps } from '@cloud-ru/uikit-product-utils';
@@ -13,7 +14,7 @@ import { getProgressBarColor } from './utils';
 
 export type LoadStatusProps = WithSupportProps<
   {
-    label?: string;
+    label?: ReactNode;
     value?: string;
     hint?: string;
     valueType?: LoadValueType;
@@ -23,18 +24,21 @@ export type LoadStatusProps = WithSupportProps<
   } & Pick<ProgressBarProps, 'progress' | 'size'>
 >;
 
-export function LoadStatus({
-  label,
-  value,
-  hint,
-  valueType = 'none',
-  progress,
-  size = 's',
-  appearanceByProgress = DEFAULT_APPEARANCE_BY_PROGRESS,
-  showErrorIcon,
-  className,
-  ...props
-}: LoadStatusProps) {
+export const LoadStatus = forwardRef<HTMLDivElement, LoadStatusProps>(function LoadStatus(
+  {
+    label,
+    value,
+    hint,
+    valueType = 'none',
+    progress,
+    size = 's',
+    appearanceByProgress = DEFAULT_APPEARANCE_BY_PROGRESS,
+    showErrorIcon,
+    className,
+    ...props
+  },
+  ref,
+) {
   const progressAppearance = getProgressBarColor(progress, appearanceByProgress);
 
   const isShowHeader = label || value || valueType !== 'none';
@@ -42,7 +46,7 @@ export function LoadStatus({
   const symbol = SYMBOL_BY_TYPE[valueType];
 
   return (
-    <div className={cn(styles.loadStatus, className)} {...extractSupportProps(props)}>
+    <div className={cn(styles.loadStatus, className)} ref={ref} {...extractSupportProps(props)}>
       {isShowHeader && (
         <div className={styles.header}>
           <Typography.SansBodyS>
@@ -65,4 +69,4 @@ export function LoadStatus({
       )}
     </div>
   );
-}
+});