@moysklad/uikit 28.1.0

package/dist/data-grid/cells/BooleanCell/index.d.ts

@@ -0,0 +1 @@
+export { BooleanCell } from './BooleanCell';

package/dist/data-grid/cells/BooleanCell/index.js

@@ -0,0 +1 @@
+export { BooleanCell } from "./BooleanCell.js";

package/dist/data-grid/cells/CheckboxCell/CheckboxCell.d.ts

@@ -0,0 +1,11 @@
+import type { Row, Table } from '@tanstack/react-table';
+type Props<TData> = {
+    row: Row<TData>;
+    table: Table<TData>;
+    testId?: string;
+};
+export declare function CheckboxCell<TData>({ row, table, testId }: Props<TData>): import("react/jsx-runtime").JSX.Element;
+export declare namespace CheckboxCell {
+    var displayName: string;
+}
+export {};

package/dist/data-grid/cells/CheckboxCell/CheckboxCell.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { Checkbox } from "../../../components/Checkbox/Checkbox.js";
+import { useMassRowSelection } from "../../hooks/index.js";
+import CheckboxCell_module from "./CheckboxCell.module.js";
+function CheckboxCell({ row, table, testId }) {
+    const { toggleSelected, getIsSelected, index } = row;
+    const { rows } = table.getRowModel();
+    const onCheckboxClick = useMassRowSelection({
+        rowIdx: index,
+        rows,
+        toggleSelected
+    });
+    return /*#__PURE__*/ jsx("div", {
+        onClick: (event)=>event.stopPropagation(),
+        className: CheckboxCell_module.container,
+        children: /*#__PURE__*/ jsx(Checkbox, {
+            onClick: onCheckboxClick,
+            checked: getIsSelected(),
+            testId: testId || 'CheckboxCellComponentTEST'
+        })
+    });
+}
+CheckboxCell.displayName = 'CheckboxCell';
+export { CheckboxCell };

package/dist/data-grid/cells/CheckboxCell/CheckboxCell.module.js

@@ -0,0 +1,5 @@
+import "./CheckboxCell_module.css";
+const CheckboxCell_module = {
+    container: "container-BRl89d"
+};
+export default CheckboxCell_module;

package/dist/data-grid/cells/CheckboxCell/CheckboxCell_module.css

@@ -0,0 +1,13 @@
+.container-BRl89d {
+  margin: var(--cell-padding-top, 4px) 0 var(--cell-padding-bottom, 4px) 0;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: 24px;
+  padding-left: 12px;
+  display: flex;
+  position: absolute;
+  left: 0;
+  right: 0;
+}
+

package/dist/data-grid/cells/CheckboxCell/index.d.ts

@@ -0,0 +1 @@
+export { CheckboxCell } from './CheckboxCell';

package/dist/data-grid/cells/CheckboxCell/index.js

@@ -0,0 +1 @@
+export { CheckboxCell } from "./CheckboxCell.js";

package/dist/data-grid/cells/DateCell/DateCell.d.ts

@@ -0,0 +1,11 @@
+import { type FC, type HTMLAttributes } from 'react';
+type Props = {
+    parsedDate: Date;
+    isDisabled: boolean;
+    hideTime?: boolean;
+    hintZIndex?: number;
+    testId?: string;
+    shouldToCheckDeadline?: boolean;
+} & HTMLAttributes<HTMLSpanElement>;
+export declare const DateCell: FC<Props>;
+export {};

package/dist/data-grid/cells/DateCell/DateCell.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useContext, useMemo, useRef } from "react";
+import { cn } from "../../../common/css/cn.js";
+import { Text, TextColor, TextTag } from "../../../components/Text/Text.js";
+import { LocaleContext } from "../../../context/index.js";
+import { OverflowHint } from "../../base/OverflowHint/OverflowHint.js";
+import { FormatUtils } from "../utils/index.js";
+import DateCell_module from "./DateCell.module.js";
+const DateCell = /*#__PURE__*/ memo(({ parsedDate, isDisabled, hideTime = false, hintZIndex = 2, testId, shouldToCheckDeadline, className, ...restProps })=>{
+    const displayNameRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const { locale } = useContext(LocaleContext);
+    const shouldBeRed = useMemo(()=>{
+        if (!shouldToCheckDeadline) return false;
+        return parsedDate < new Date();
+    }, [
+        shouldToCheckDeadline,
+        parsedDate
+    ]);
+    if (!parsedDate) return null;
+    const { date, time } = FormatUtils.formatToLocaleDateTime(parsedDate, {
+        includeSeconds: false,
+        dateFormatOptions: {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric'
+        }
+    }, locale);
+    const dateTime = `${date} ${time}`;
+    const getColorToken = (defaultColor)=>{
+        if (isDisabled) return TextColor.tertiary;
+        if (shouldBeRed) return TextColor.critical;
+        return defaultColor;
+    };
+    return /*#__PURE__*/ jsx(OverflowHint, {
+        hintText: hideTime ? date : dateTime,
+        hintZIndex: hintZIndex,
+        overflowElement: displayNameRef,
+        parent: wrapperRef,
+        children: /*#__PURE__*/ jsx("div", {
+            ref: wrapperRef,
+            className: cn(DateCell_module.wrapper, className),
+            "data-test-id": testId,
+            ...restProps,
+            children: /*#__PURE__*/ jsxs("div", {
+                ref: displayNameRef,
+                className: DateCell_module.container,
+                title: "",
+                children: [
+                    /*#__PURE__*/ jsx(Text.Body, {
+                        className: DateCell_module.date,
+                        as: TextTag.span,
+                        colorToken: getColorToken(TextColor.primary),
+                        children: date
+                    }),
+                    !hideTime && /*#__PURE__*/ jsx(Text.Body, {
+                        className: DateCell_module.time,
+                        as: TextTag.span,
+                        colorToken: getColorToken(TextColor.secondary),
+                        children: time
+                    })
+                ]
+            })
+        })
+    });
+});
+DateCell.displayName = 'DateCell';
+export { DateCell };

package/dist/data-grid/cells/DateCell/DateCell.module.js

@@ -0,0 +1,9 @@
+import "./DateCell_module.css";
+const DateCell_module = {
+    wrapper: "wrapper-HEgwqd",
+    container: "container-oeEpCL",
+    date: "date-DK_Tie",
+    time: "time-R4r0Tl",
+    disabledDate: "disabledDate-HpBqpc"
+};
+export default DateCell_module;

package/dist/data-grid/cells/DateCell/DateCell_module.css

@@ -0,0 +1,29 @@
+.wrapper-HEgwqd {
+  box-sizing: border-box;
+  padding: var(--cell-padding-top, 4px) var(--cell-padding-right, 8px) var(--cell-padding-bottom, 4px) var(--cell-padding-left, 8px);
+  grid-template-columns: auto;
+  display: grid;
+}
+
+.container-oeEpCL {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  margin: 2px 0;
+  overflow: hidden;
+}
+
+.date-DK_Tie {
+  font-size: var(--font-size, 14px);
+  padding-right: 4px;
+}
+
+.time-R4r0Tl {
+  font-size: var(--font-size, 14px);
+  padding-left: 4px;
+}
+
+tr:hover > td > .wrapper-HEgwqd .disabledDate-HpBqpc {
+  color: var(--dark-grey-grey-800);
+}
+

package/dist/data-grid/cells/DateCell/index.d.ts

@@ -0,0 +1 @@
+export { DateCell } from './DateCell';

package/dist/data-grid/cells/DateCell/index.js

@@ -0,0 +1 @@
+export { DateCell } from "./DateCell.js";

package/dist/data-grid/cells/DecimalCell/DecimalCell.d.ts

@@ -0,0 +1,17 @@
+import { type FC, type HTMLAttributes } from 'react';
+import { type TableFillCellValue } from './DecimalCell.helpers';
+type Props = {
+    value?: number;
+    testId?: string;
+    isDisabled: boolean;
+    isCustom?: boolean;
+    hintZIndex?: number;
+    fillState?: TableFillCellValue | null;
+    fillStateLabel?: string;
+    formatOptions?: {
+        minimumFractionDigits: number;
+        maximumFractionDigits: number;
+    };
+} & HTMLAttributes<HTMLDivElement>;
+export declare const DecimalCell: FC<Props>;
+export {};

package/dist/data-grid/cells/DecimalCell/DecimalCell.helpers.d.ts

@@ -0,0 +1,11 @@
+import type { ValueOf } from '../../../common/types';
+export declare const ETableFillCellValues: {
+    readonly PARTIAL: "partial";
+    readonly FULL: "full";
+    readonly ZERO: "zero";
+};
+export type TableFillCellValue = ValueOf<typeof ETableFillCellValues>;
+export declare const getFillState: (abstractSum?: number, totalSum?: number) => "full" | "partial" | "zero" | null;
+export declare const getBackgroundColorByFillState: (fillState: TableFillCellValue) => "" | "#defcf0" | "#fae1ca";
+export declare const getTranslationPostfixByFillState: (fillState?: TableFillCellValue | null) => "" | "Partial" | "Full";
+export declare const isFillStateWithTooltip: (fillState: TableFillCellValue | null | undefined) => fillState is "full" | "partial";

package/dist/data-grid/cells/DecimalCell/DecimalCell.helpers.js

@@ -0,0 +1,30 @@
+const ETableFillCellValues = {
+    PARTIAL: 'partial',
+    FULL: 'full',
+    ZERO: 'zero'
+};
+const getFillState = (abstractSum, totalSum)=>{
+    if (void 0 === abstractSum || void 0 === totalSum) return null;
+    if (0 === abstractSum) return ETableFillCellValues.ZERO;
+    if (abstractSum >= totalSum) return ETableFillCellValues.FULL;
+    if (abstractSum < totalSum) return ETableFillCellValues.PARTIAL;
+    return null;
+};
+const getBackgroundColorByFillState = (fillState)=>{
+    switch(fillState){
+        case ETableFillCellValues.FULL:
+            return '#defcf0';
+        case ETableFillCellValues.PARTIAL:
+            return '#fae1ca';
+        case ETableFillCellValues.ZERO:
+        default:
+            return '';
+    }
+};
+const getTranslationPostfixByFillState = (fillState)=>{
+    if (fillState === ETableFillCellValues.PARTIAL) return 'Partial';
+    if (fillState === ETableFillCellValues.FULL) return 'Full';
+    return '';
+};
+const isFillStateWithTooltip = (fillState)=>fillState === ETableFillCellValues.PARTIAL || fillState === ETableFillCellValues.FULL;
+export { ETableFillCellValues, getBackgroundColorByFillState, getFillState, getTranslationPostfixByFillState, isFillStateWithTooltip };

package/dist/data-grid/cells/DecimalCell/DecimalCell.js

@@ -0,0 +1,87 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useContext, useRef, useState } from "react";
+import { cn } from "../../../common/css/cn.js";
+import { Hint } from "../../../components/Hint/Hint.js";
+import { Text, TextColor, TextTag } from "../../../components/Text/Text.js";
+import { LocaleContext } from "../../../context/index.js";
+import { isFullyVisibleX, isOverflowed } from "../../utils/index.js";
+import { FormatUtils } from "../utils/index.js";
+import { getBackgroundColorByFillState, isFillStateWithTooltip } from "./DecimalCell.helpers.js";
+import DecimalCell_module from "./DecimalCell.module.js";
+const DecimalCell = /*#__PURE__*/ memo(({ value, testId, isDisabled, isCustom, hintZIndex = 2, fillState, fillStateLabel, formatOptions, className, ...restProps })=>{
+    const [visible, setVisible] = useState(false);
+    const displayNameRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const { locale } = useContext(LocaleContext);
+    const displayValue = value || 0 === value ? FormatUtils.formatToLocaleNumber(value, formatOptions, locale) : {
+        integerPart: '—',
+        decimalPart: ''
+    };
+    const { integerPart, decimalPart } = displayValue;
+    return /*#__PURE__*/ jsx(Hint, {
+        mouseEnterDelay: 0.5,
+        mouseLeaveDelay: 0,
+        zIndex: hintZIndex,
+        visible: visible,
+        onVisibleChange: (visible)=>{
+            if (visible && wrapperRef.current && isFullyVisibleX(wrapperRef.current) && (displayNameRef.current && isOverflowed(displayNameRef.current) || isFillStateWithTooltip(fillState))) setVisible(true);
+            if (!visible) setVisible(false);
+        },
+        overlay: (()=>{
+            const numberLabel = `${integerPart}${decimalPart}`;
+            const isFillStateTooltip = isFillStateWithTooltip(fillState);
+            const isOverflowedCell = displayNameRef.current && isOverflowed(displayNameRef.current);
+            if (isCustom) return /*#__PURE__*/ jsx(Text.Body, {
+                colorToken: TextColor.invert,
+                children: numberLabel
+            });
+            if (isFillStateTooltip && isOverflowedCell) return /*#__PURE__*/ jsxs(Text.Body, {
+                colorToken: TextColor.invert,
+                className: DecimalCell_module.overlayFillStatus,
+                children: [
+                    fillStateLabel,
+                    /*#__PURE__*/ jsx("br", {}),
+                    numberLabel
+                ]
+            });
+            if (isFillStateTooltip) return /*#__PURE__*/ jsx(Text.Body, {
+                colorToken: TextColor.invert,
+                children: fillStateLabel
+            });
+            return /*#__PURE__*/ jsx(Text.Body, {
+                colorToken: TextColor.invert,
+                children: numberLabel
+            });
+        })(),
+        children: /*#__PURE__*/ jsx("div", {
+            ref: wrapperRef,
+            className: cn(DecimalCell_module.wrapper, className),
+            "data-test-id": testId,
+            ...restProps,
+            style: {
+                backgroundColor: getBackgroundColorByFillState(fillState)
+            },
+            children: /*#__PURE__*/ jsx("div", {
+                ref: displayNameRef,
+                className: DecimalCell_module.container,
+                title: "",
+                children: isCustom && !Number.isFinite(value) ? '' : /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsx(Text.Body, {
+                            as: TextTag.span,
+                            className: cn(DecimalCell_module.integer, isDisabled && DecimalCell_module.disabledInteger),
+                            children: integerPart
+                        }),
+                        /*#__PURE__*/ jsx(Text.Body, {
+                            as: TextTag.span,
+                            className: cn(DecimalCell_module.decimal, isDisabled && DecimalCell_module.disabledDecimal),
+                            children: decimalPart
+                        })
+                    ]
+                })
+            })
+        })
+    });
+});
+DecimalCell.displayName = 'DecimalCell';
+export { DecimalCell };

package/dist/data-grid/cells/DecimalCell/DecimalCell.module.js

@@ -0,0 +1,11 @@
+import "./DecimalCell_module.css";
+const DecimalCell_module = {
+    wrapper: "wrapper-wz1Rk0",
+    container: "container-X_u_LQ",
+    decimal: "decimal-zmz1hU",
+    integer: "integer-lLlZe5",
+    disabledDecimal: "disabledDecimal-Z5OdeN",
+    disabledInteger: "disabledInteger-UdSBtq",
+    overlayFillStatus: "overlayFillStatus-usqxGQ"
+};
+export default DecimalCell_module;

package/dist/data-grid/cells/DecimalCell/DecimalCell_module.css

@@ -0,0 +1,37 @@
+.wrapper-wz1Rk0 {
+  box-sizing: border-box;
+  padding: var(--cell-padding-top, 4px) var(--cell-padding-right, 16px) var(--cell-padding-bottom, 4px) var(--cell-padding-left, 8px);
+  grid-template-columns: auto;
+  display: grid;
+}
+
+.wrapper-wz1Rk0 .container-X_u_LQ {
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  margin: 2px 0;
+  overflow: hidden;
+}
+
+.decimal-zmz1hU {
+  color: var(--dark-grey-grey-800);
+  font-size: var(--font-size, 14px);
+}
+
+.integer-lLlZe5 {
+  font-size: var(--font-size, 14px);
+}
+
+.disabledDecimal-Z5OdeN, .disabledInteger-UdSBtq {
+  color: var(--dark-grey-grey-500);
+}
+
+tr:hover > td > .wrapper-wz1Rk0 .disabledInteger-UdSBtq {
+  color: var(--dark-grey-grey-800);
+}
+
+.overlayFillStatus-usqxGQ {
+  text-align: center;
+}
+

package/dist/data-grid/cells/DecimalCell/index.d.ts

@@ -0,0 +1 @@
+export { DecimalCell } from './DecimalCell';

package/dist/data-grid/cells/DecimalCell/index.js

@@ -0,0 +1 @@
+export { DecimalCell } from "./DecimalCell.js";

package/dist/data-grid/cells/FileCell/FileCell.d.ts

@@ -0,0 +1,10 @@
+import { type FC, type HTMLAttributes } from 'react';
+type Props = {
+    label: string;
+    testId?: string;
+    isArchived: boolean;
+    isDisabled: boolean;
+    hintZIndex?: number;
+} & HTMLAttributes<HTMLParagraphElement>;
+export declare const FileCell: FC<Props>;
+export {};

package/dist/data-grid/cells/FileCell/FileCell.js

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useMemo, useRef } from "react";
+import { cn } from "../../../common/css/cn.js";
+import { Text, TextColor } from "../../../components/Text/Text.js";
+import { OverflowHint } from "../../base/OverflowHint/OverflowHint.js";
+import { Archived12Icon } from "../../../icon/index.js";
+import FileCell_module from "./FileCell.module.js";
+const removeLastDot = (str)=>{
+    const splitted = str.split('.');
+    splitted.splice(-1);
+    return splitted.join('.');
+};
+const getFileExtension = (fname)=>fname.slice((fname.lastIndexOf('.') - 1 >>> 0) + 2);
+const FileCell = /*#__PURE__*/ memo(({ label = '', testId, isDisabled, isArchived, className, hintZIndex = 6, ...restProps })=>{
+    const displayNameRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const fileExt = getFileExtension(label);
+    const [labelWithoutFileExtTemp] = label.split(fileExt);
+    const labelWithoutFileExt = labelWithoutFileExtTemp ? removeLastDot(labelWithoutFileExtTemp) : '';
+    const component = useMemo(()=>/*#__PURE__*/ jsxs("div", {
+            ref: wrapperRef,
+            className: cn(FileCell_module.wrapper, isArchived && FileCell_module.archivedWrapper),
+            "data-test-id": testId,
+            children: [
+                /*#__PURE__*/ jsxs(Text.Body, {
+                    className: cn(FileCell_module.ref, isDisabled && FileCell_module.disabled, isArchived && FileCell_module.archived, className),
+                    colorToken: isDisabled || isArchived ? TextColor.tertiary : TextColor.primary,
+                    title: "",
+                    ...restProps,
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            ref: displayNameRef,
+                            className: FileCell_module.textWithoutExtension,
+                            children: labelWithoutFileExt
+                        }),
+                        /*#__PURE__*/ jsxs("span", {
+                            children: [
+                                ".",
+                                fileExt
+                            ]
+                        })
+                    ]
+                }),
+                isArchived && /*#__PURE__*/ jsx("div", {
+                    className: FileCell_module.archivedIconWrapper,
+                    children: /*#__PURE__*/ jsx(Archived12Icon, {
+                        stroke: "#9fa7af"
+                    })
+                })
+            ]
+        }), [
+        className,
+        isDisabled,
+        isArchived,
+        testId,
+        restProps,
+        fileExt,
+        labelWithoutFileExt
+    ]);
+    if (!label) return null;
+    return /*#__PURE__*/ jsx(OverflowHint, {
+        hintText: label,
+        hintZIndex: hintZIndex,
+        overflowElement: displayNameRef,
+        parent: wrapperRef,
+        children: component
+    });
+});
+FileCell.displayName = 'FileCell';
+export { FileCell };

package/dist/data-grid/cells/FileCell/FileCell.module.js

@@ -0,0 +1,11 @@
+import "./FileCell_module.css";
+const FileCell_module = {
+    wrapper: "wrapper-e80Jgd",
+    ref: "ref-aHokSK",
+    archived: "archived-CTAdLm",
+    textWithoutExtension: "textWithoutExtension-aShayr",
+    archivedIconWrapper: "archivedIconWrapper-z4WJ9U",
+    archivedWrapper: "archivedWrapper-LG5ekU",
+    disabled: "disabled-yLaABA"
+};
+export default FileCell_module;

package/dist/data-grid/cells/FileCell/FileCell_module.css

@@ -0,0 +1,51 @@
+.wrapper-e80Jgd {
+  box-sizing: border-box;
+  padding: var(--cell-padding-top, 4px) var(--cell-padding-right, 16px) var(--cell-padding-bottom, 4px) var(--cell-padding-left, 8px);
+  grid-template-columns: auto;
+  align-items: center;
+  gap: 10px;
+  display: grid;
+}
+
+.wrapper-e80Jgd .ref-aHokSK {
+  width: 100%;
+  font-size: var(--font-size, 14px);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  align-items: center;
+  margin: 2px 0;
+  display: flex;
+  overflow: hidden;
+}
+
+.wrapper-e80Jgd .archived-CTAdLm {
+  max-width: calc(100% - 32px);
+  margin-right: 0;
+}
+
+.wrapper-e80Jgd .textWithoutExtension-aShayr {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.wrapper-e80Jgd .archivedIconWrapper-z4WJ9U {
+  position: absolute;
+  right: 26px;
+}
+
+.wrapper-e80Jgd .archivedIconWrapper-z4WJ9U > svg {
+  min-width: 12px;
+  min-height: 12px;
+  display: block;
+  overflow: visible;
+}
+
+.archivedWrapper-LG5ekU {
+  grid-template-columns: auto auto;
+}
+
+tr:hover > td > .wrapper-e80Jgd .disabled-yLaABA {
+  color: var(--dark-grey-grey-800);
+}
+

package/dist/data-grid/cells/FileCell/index.d.ts

@@ -0,0 +1 @@
+export { FileCell } from './FileCell';

package/dist/data-grid/cells/FileCell/index.js

@@ -0,0 +1 @@
+export { FileCell } from "./FileCell.js";

package/dist/data-grid/cells/FooterCell/FooterCell.d.ts

@@ -0,0 +1,13 @@
+import { type FC, type HTMLAttributes } from 'react';
+type Props = {
+    value: number;
+    overflowVisible?: boolean;
+    testId?: string;
+    formatOptions?: {
+        minimumFractionDigits: number;
+        maximumFractionDigits: number;
+    };
+    hintZIndex?: number;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const FooterCell: FC<Props>;
+export {};

package/dist/data-grid/cells/FooterCell/FooterCell.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useContext, useMemo, useRef } from "react";
+import { cn } from "../../../common/css/cn.js";
+import { Text } from "../../../components/Text/Text.js";
+import { LocaleContext } from "../../../context/index.js";
+import { OverflowHint } from "../../base/OverflowHint/OverflowHint.js";
+import { FormatUtils } from "../utils/index.js";
+import FooterCell_module from "./FooterCell.module.js";
+const FooterCell = /*#__PURE__*/ memo(({ value, testId, overflowVisible = false, formatOptions, className, hintZIndex = 6, ...restProps })=>{
+    const displayNameRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const { locale } = useContext(LocaleContext);
+    const numericValue = isNaN(Number(value)) ? 0 : Number(value);
+    const decimals = Number.isInteger(numericValue) ? 0 : 2;
+    const defaultFormatOptions = {
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals
+    };
+    const { integerPart, decimalPart } = FormatUtils.formatToLocaleNumber(value || 0, formatOptions ?? defaultFormatOptions, locale);
+    const numberLabel = `${integerPart}${decimalPart}`;
+    const component = useMemo(()=>/*#__PURE__*/ jsx("div", {
+            className: FooterCell_module.wrapper,
+            ref: wrapperRef,
+            children: /*#__PURE__*/ jsx(Text.BodyStrong, {
+                className: cn(FooterCell_module.text, overflowVisible && FooterCell_module.overflowEllipsis, className),
+                testId: testId,
+                ref: displayNameRef,
+                title: "",
+                ...restProps,
+                children: numberLabel
+            })
+        }), [
+        className,
+        numberLabel,
+        testId,
+        overflowVisible,
+        restProps
+    ]);
+    return /*#__PURE__*/ jsx(OverflowHint, {
+        hintText: numberLabel,
+        hintZIndex: hintZIndex,
+        overflowElement: displayNameRef,
+        parent: wrapperRef,
+        children: component
+    });
+});
+FooterCell.displayName = 'FooterCell';
+export { FooterCell };

package/dist/data-grid/cells/FooterCell/FooterCell.module.js

@@ -0,0 +1,7 @@
+import "./FooterCell_module.css";
+const FooterCell_module = {
+    wrapper: "wrapper-wylrKs",
+    text: "text-SXsUlJ",
+    overflowEllipsis: "overflowEllipsis-gWfQ0t"
+};
+export default FooterCell_module;

package/dist/data-grid/cells/FooterCell/FooterCell_module.css

@@ -0,0 +1,19 @@
+.wrapper-wylrKs {
+  box-sizing: border-box;
+  grid-template-columns: auto;
+  justify-content: flex-end;
+  padding: 6px 16px 6px 8px;
+  display: grid;
+}
+
+.text-SXsUlJ {
+  font-size: var(--font-size, 14px);
+}
+
+.overflowEllipsis-gWfQ0t {
+  text-align: right;
+  text-overflow: ellipsis;
+  width: 100%;
+  overflow: hidden;
+}
+

package/dist/data-grid/cells/FooterCell/index.d.ts

@@ -0,0 +1 @@
+export { FooterCell } from './FooterCell';

package/dist/data-grid/cells/FooterCell/index.js

@@ -0,0 +1 @@
+export { FooterCell } from "./FooterCell.js";