@moysklad/uikit 28.1.0

package/dist/data-grid/cells/LinkCell/LinkCell_module.css

@@ -0,0 +1,37 @@
+.archiveable-mNwVU4 {
+  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 auto;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  display: grid;
+}
+
+.link-zBgktt {
+  cursor: pointer;
+  width: 100%;
+  color: var(--product-blue-700);
+  font-weight: 400;
+  font-size: var(--font-size, 14px);
+  font-feature-settings: "tnum" on,"lnum" on;
+  letter-spacing: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin: 2px 0;
+  font-family: ALS Hauss, sans-serif;
+  line-height: 20px;
+  text-decoration: none;
+  display: block;
+  overflow: hidden;
+}
+
+.link-zBgktt:hover {
+  color: var(--product-blue-600);
+  text-decoration: underline;
+}
+
+.disabled-ACqXa8 {
+  color: var(--dark-grey-grey-500);
+}
+

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

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

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

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

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

@@ -0,0 +1,27 @@
+import { type IHasTestId } from '../../../common';
+import type { ValueOf } from '../../../common/types';
+import { type LinkProps } from '../../../components/Link/Link';
+import { type RowActionsMenuProps } from '../components/RowActionsMenu/RowActionsMenu';
+type OmittedLinkProps = 'children' | 'title' | 'disabled';
+export declare const NameCellLabelVariant: {
+    readonly DEFAULT: "default";
+    readonly DARK: "dark";
+};
+export type NameCellLabelVariantValue = ValueOf<typeof NameCellLabelVariant>;
+export interface NameCellProps extends IHasTestId, Omit<LinkProps, OmittedLinkProps> {
+    label: string;
+    code?: string;
+    isArchived?: boolean;
+    isDisabled?: boolean;
+    isNeedArchiveIcon?: boolean;
+    isTextCollapsible?: boolean;
+    hintZIndex?: number;
+    menuProps?: {
+        showMenu: boolean;
+    } & RowActionsMenuProps;
+    className?: string;
+    nameClassName?: string;
+    labelVariant?: NameCellLabelVariantValue;
+}
+export declare const NameCell: import("react").MemoExoticComponent<({ code, label, testId, isArchived, isDisabled, className, hintZIndex, menuProps, isNeedArchiveIcon, isTextCollapsible, nameClassName, labelVariant, ...linkProps }: NameCellProps) => import("react/jsx-runtime").JSX.Element | null>;
+export {};

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

@@ -0,0 +1,109 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useMemo, useRef, useState } from "react";
+import { cn } from "../../../common/index.js";
+import { Hint } from "../../../components/Hint/Hint.js";
+import { Link } from "../../../components/Link/Link.js";
+import { Text, TextColor, TextTag } from "../../../components/Text/Text.js";
+import { Archived12Icon } from "../../../icon/index.js";
+import { isOverflowed } from "../../utils/index.js";
+import { RowActionsMenu } from "../components/RowActionsMenu/RowActionsMenu.js";
+import NameCell_module from "./NameCell.module.js";
+const NameCellLabelVariant = {
+    DEFAULT: 'default',
+    DARK: 'dark'
+};
+const NameCell = /*#__PURE__*/ memo(({ code, label, testId, isArchived, isDisabled, className, hintZIndex = 6, menuProps, isNeedArchiveIcon, isTextCollapsible = true, nameClassName, labelVariant = NameCellLabelVariant.DEFAULT, ...linkProps })=>{
+    const [visible, setVisible] = useState(false);
+    const titleRef = useRef(null);
+    const title = useMemo(()=>{
+        const textContent = /*#__PURE__*/ jsxs("div", {
+            ref: titleRef,
+            className: cn(NameCell_module.titleWrapper, isTextCollapsible && NameCell_module.ellipsis),
+            children: [
+                code ? /*#__PURE__*/ jsxs(Text.BodyStrong, {
+                    as: TextTag.span,
+                    colorToken: TextColor.secondary,
+                    className: NameCell_module.code,
+                    title: "",
+                    testId: `${testId}-code`,
+                    children: [
+                        code,
+                        ' '
+                    ]
+                }) : null,
+                /*#__PURE__*/ jsx(Link, {
+                    ...linkProps,
+                    className: cn(NameCell_module.label, labelVariant === NameCellLabelVariant.DARK && NameCell_module.dark, isDisabled && NameCell_module.disabled, isArchived && NameCell_module.archived, nameClassName),
+                    title: "",
+                    testId: `${testId}-label`,
+                    children: label
+                })
+            ]
+        });
+        if (!isTextCollapsible) return textContent;
+        return /*#__PURE__*/ jsx(Hint, {
+            mouseEnterDelay: 0.5,
+            mouseLeaveDelay: 0,
+            zIndex: hintZIndex,
+            visible: visible,
+            onVisibleChange: (visible)=>{
+                if (!titleRef.current) return;
+                if (visible && isOverflowed(titleRef.current)) setVisible(true);
+                if (!visible) setVisible(false);
+            },
+            overlay: /*#__PURE__*/ jsx(Text.Body, {
+                colorToken: TextColor.invert,
+                children: code ? `${code} ${label}` : label
+            }),
+            children: textContent
+        });
+    }, [
+        code,
+        hintZIndex,
+        isArchived,
+        isDisabled,
+        isTextCollapsible,
+        label,
+        linkProps,
+        nameClassName,
+        testId,
+        visible
+    ]);
+    const wrapperClassName = useMemo(()=>{
+        if (isArchived && isNeedArchiveIcon && !!menuProps?.showMenu) return NameCell_module.threeColumns;
+        if (isArchived && isNeedArchiveIcon || !!menuProps?.showMenu) return NameCell_module.twoColumns;
+        return null;
+    }, [
+        isArchived,
+        isNeedArchiveIcon,
+        menuProps?.showMenu
+    ]);
+    if (!label) return null;
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn(NameCell_module.wrapper, wrapperClassName, className),
+        "data-test-id": testId,
+        children: [
+            title,
+            isArchived && isNeedArchiveIcon && /*#__PURE__*/ jsx("div", {
+                className: NameCell_module.box,
+                children: /*#__PURE__*/ jsx(Archived12Icon, {
+                    className: NameCell_module.icon,
+                    stroke: "var(--text-tertiary, rgba(159, 167, 175, 100%))"
+                })
+            }),
+            menuProps?.showMenu && /*#__PURE__*/ jsx("div", {
+                className: NameCell_module.box,
+                children: /*#__PURE__*/ jsx(RowActionsMenu, {
+                    menuItems: menuProps.menuItems,
+                    renderDropDownContent: menuProps.renderDropDownContent,
+                    buttonIcon: menuProps.buttonIcon,
+                    dropdownClassName: menuProps.dropdownClassName,
+                    buttonClassName: menuProps.buttonClassName,
+                    testId: menuProps.testId ?? testId
+                })
+            })
+        ]
+    });
+});
+NameCell.displayName = 'NameCell';
+export { NameCell, NameCellLabelVariant };

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

@@ -0,0 +1,16 @@
+import "./NameCell_module.css";
+const NameCell_module = {
+    wrapper: "wrapper-svgw8n",
+    twoColumns: "twoColumns-arhF31",
+    threeColumns: "threeColumns-Hydkqk",
+    titleWrapper: "titleWrapper-S4Tgos",
+    ellipsis: "ellipsis-sGd41A",
+    label: "label-cqqVn5",
+    dark: "dark-USbU7u",
+    archived: "archived-fkYGc8",
+    disabled: "disabled-MSSU6e",
+    code: "code-nu9tgn",
+    box: "box-J6rO73",
+    icon: "icon-toqVco"
+};
+export default NameCell_module;

package/dist/data-grid/cells/NameCell/NameCell_module.css

@@ -0,0 +1,78 @@
+.wrapper-svgw8n {
+  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: 1fr;
+  gap: 12px;
+  display: grid;
+}
+
+.twoColumns-arhF31 {
+  grid-template-columns: 1fr 20px;
+}
+
+.threeColumns-Hydkqk {
+  grid-template-columns: 1fr 20px 20px;
+}
+
+.titleWrapper-S4Tgos {
+  white-space: break-spaces;
+  width: 100%;
+  margin: 2px 0;
+}
+
+.ellipsis-sGd41A {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.label-cqqVn5 {
+  cursor: pointer;
+  color: var(--button-primary-normal, #036ce5);
+  font-size: var(--font-size, 14px);
+}
+
+.label-cqqVn5.dark-USbU7u {
+  color: var(--text-primary, #091739);
+}
+
+.label-cqqVn5:hover {
+  color: var(--button-primary-hover, #0b7cff);
+}
+
+.label-cqqVn5.archived-fkYGc8 {
+  color: var(--text-tertiary, #9fa7af);
+}
+
+.label-cqqVn5.disabled-MSSU6e {
+  color: var(--text-secondary, #5f6d79);
+}
+
+.label-cqqVn5.disabled-MSSU6e:hover {
+  color: var(--button-primary-hover, #0b7cff);
+}
+
+.code-nu9tgn {
+  font-size: var(--font-size, 14px);
+  word-break: break-all;
+}
+
+.box-J6rO73 {
+  justify-content: end;
+  align-items: center;
+  height: 24px;
+  display: flex;
+}
+
+.icon-toqVco {
+  overflow: visible;
+}
+
+tr:hover > td > .wrapper-svgw8n .titleWrapper-S4Tgos .label-cqqVn5, tr:hover > td > .wrapper-svgw8n .titleWrapper-S4Tgos .label-cqqVn5 .disabled-MSSU6e {
+  color: var(--button-primary-hover, #0b7cff);
+}
+
+tr:hover > td > .wrapper-svgw8n .titleWrapper-S4Tgos .label-cqqVn5.archived-fkYGc8 {
+  color: var(--text-tertiary, #9fa7af);
+}
+

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

@@ -0,0 +1 @@
+export { NameCell, NameCellLabelVariant, type NameCellLabelVariantValue, type NameCellProps, } from './NameCell';

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

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

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

@@ -0,0 +1,10 @@
+import { type FC } from 'react';
+type Props = {
+    isArchived: boolean;
+    path: string;
+    label?: string;
+    isDisabled: boolean;
+    testId?: string;
+};
+export declare const NameWithLinkCell: FC<Props>;
+export {};

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

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { cn } from "../../../common/css/cn.js";
+import { Archived12Icon } from "../../../icon/index.js";
+import { LinkCell } from "../LinkCell/LinkCell.js";
+import NameWithLinkCell_module from "./NameWithLinkCell.module.js";
+const NameWithLinkCell = /*#__PURE__*/ memo(({ path, label, testId, isArchived, isDisabled })=>{
+    if (!label || !path) return null;
+    return /*#__PURE__*/ jsx("div", {
+        className: cn(NameWithLinkCell_module.container, isArchived && NameWithLinkCell_module.archivedContainer),
+        children: /*#__PURE__*/ jsx(LinkCell, {
+            path: path,
+            label: label,
+            testId: testId,
+            isDisabled: isDisabled,
+            className: cn(NameWithLinkCell_module.link, isArchived && NameWithLinkCell_module.archived, isDisabled && NameWithLinkCell_module.disabled),
+            children: isArchived && /*#__PURE__*/ jsx("div", {
+                className: NameWithLinkCell_module.archivedIconWrapper,
+                children: /*#__PURE__*/ jsx(Archived12Icon, {
+                    stroke: "#9fa7af"
+                })
+            })
+        })
+    });
+});
+NameWithLinkCell.displayName = 'NameWithLinkCell';
+export { NameWithLinkCell };

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

@@ -0,0 +1,10 @@
+import "./NameWithLinkCell_module.css";
+const NameWithLinkCell_module = {
+    container: "container-QH5eTp",
+    archivedContainer: "archivedContainer-xkCkzX",
+    link: "link-r2LsKU",
+    archived: "archived-EfmZCR",
+    disabled: "disabled-WOnENU",
+    archivedIconWrapper: "archivedIconWrapper-a496X8"
+};
+export default NameWithLinkCell_module;

package/dist/data-grid/cells/NameWithLinkCell/NameWithLinkCell_module.css

@@ -0,0 +1,44 @@
+.container-QH5eTp {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  grid-template-columns: auto;
+  display: grid;
+  overflow: hidden;
+}
+
+.archivedContainer-xkCkzX {
+  flex-wrap: nowrap;
+}
+
+.link-r2LsKU {
+  color: var(--dark-grey-dark-900);
+}
+
+.archived-EfmZCR {
+  color: var(--dark-grey-grey-500);
+  margin-right: 0;
+}
+
+tr:hover > td > .container-QH5eTp .disabled-WOnENU {
+  color: var(--dark-grey-grey-800);
+}
+
+tr:hover > td > .container-QH5eTp .disabled-WOnENU:hover {
+  color: var(--product-blue-700);
+}
+
+.disabled-WOnENU {
+  color: var(--dark-grey-grey-500);
+}
+
+.archivedIconWrapper-a496X8 {
+  margin-right: 10px;
+}
+
+.archivedIconWrapper-a496X8 > svg {
+  min-width: 12px;
+  min-height: 12px;
+  display: block;
+  overflow: visible;
+}
+

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { type CSSProperties, type FocusEvent } from 'react';
+import { type CellContext } from '@tanstack/react-table';
+import { type TableNumberInputProps } from '../components/TableNumberInput/TableNumberInput';
+type OmittedTableNumberInputProps = 'value' | 'onChange' | 'onBlur';
+export interface NumberInputCellProps<T = unknown> extends Omit<TableNumberInputProps, OmittedTableNumberInputProps> {
+    cellContext: CellContext<T, TableNumberInputProps['value'] | undefined>;
+    value: TableNumberInputProps['value'] | undefined;
+    onBlur?: (e: FocusEvent<HTMLInputElement>, value: number | null, rowIndex: number, columnId: string) => void;
+    onChange?: (value: number | null, rowIndex: number, columnId: string) => void;
+    cellClassName?: string;
+    style?: CSSProperties;
+}
+export declare const NumberInputCell: <T>(props: NumberInputCellProps<T>) => JSX.Element;
+export {};

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

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useContext, useEffect, useState } from "react";
+import { cn } from "../../../common/index.js";
+import { LocaleContext } from "../../../context/index.js";
+import { TableNumberInput } from "../components/TableNumberInput/TableNumberInput.js";
+import NumberInputCell_module from "./NumberInputCell.module.js";
+const NumberInputCellComponent = ({ cellContext, value, onBlur, onChange, cellClassName, style, defaultFormatterOptions, ...inputProps })=>{
+    const { column, row, table } = cellContext;
+    const { locale } = useContext(LocaleContext);
+    const [innerValue, setInnerValue] = useState(value ?? null);
+    useEffect(()=>{
+        setInnerValue(value ?? null);
+    }, [
+        value
+    ]);
+    const handleBlur = (e)=>{
+        if (innerValue !== value) table.options.meta?.updateData?.(row.index, column.id, innerValue);
+        onBlur?.(e, innerValue, row.index, column.id);
+    };
+    const handleChange = (newValue)=>{
+        setInnerValue(newValue);
+        onChange?.(newValue, row.index, column.id);
+    };
+    const finalDefaultFormatterOptions = defaultFormatterOptions ? {
+        ...defaultFormatterOptions,
+        locale: defaultFormatterOptions.locale ?? locale
+    } : {
+        locale
+    };
+    return /*#__PURE__*/ jsx("div", {
+        style: style,
+        className: cn(NumberInputCell_module.wrapper, cellClassName),
+        children: /*#__PURE__*/ jsx(TableNumberInput, {
+            value: innerValue,
+            onChange: handleChange,
+            onBlur: handleBlur,
+            defaultFormatterOptions: finalDefaultFormatterOptions,
+            ...inputProps
+        })
+    });
+};
+NumberInputCellComponent.displayName = 'NumberInputCell';
+const NumberInputCell = /*#__PURE__*/ memo(NumberInputCellComponent);
+export { NumberInputCell };

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

@@ -0,0 +1,5 @@
+import "./NumberInputCell_module.css";
+const NumberInputCell_module = {
+    wrapper: "wrapper-FLz9ol"
+};
+export default NumberInputCell_module;

package/dist/data-grid/cells/NumberInputCell/NumberInputCell_module.css

@@ -0,0 +1,8 @@
+.wrapper-FLz9ol {
+  box-sizing: border-box;
+  padding: var(--cell-padding-top, 4px) var(--cell-padding-right, 8px) var(--cell-padding-bottom, 4px) var(--cell-padding-left, 0);
+  align-items: center;
+  width: 100%;
+  display: flex;
+}
+

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

@@ -0,0 +1 @@
+export { NumberInputCell, type NumberInputCellProps } from './NumberInputCell';

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

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

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

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

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

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { cn } from "../../../common/css/cn.js";
+import { LinkCell } from "../LinkCell/LinkCell.js";
+import NumberLinkCell_module from "./NumberLinkCell.module.js";
+const NumberLinkCell = /*#__PURE__*/ memo(({ href, label, testId, isDisabled, hintZIndex, className, ...restProps })=>/*#__PURE__*/ jsx("div", {
+        className: NumberLinkCell_module.container,
+        children: /*#__PURE__*/ jsx(LinkCell, {
+            ...restProps,
+            path: href,
+            label: label,
+            testId: testId,
+            className: cn(NumberLinkCell_module.link, isDisabled && NumberLinkCell_module.disabled, className),
+            isDisabled: isDisabled,
+            hintZIndex: hintZIndex
+        })
+    }));
+NumberLinkCell.displayName = 'NumberLinkCell';
+export { NumberLinkCell };

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

@@ -0,0 +1,7 @@
+import "./NumberLinkCell_module.css";
+const NumberLinkCell_module = {
+    container: "container-Vj5RGJ",
+    link: "link-r6bNlG",
+    disabled: "disabled-n9mtjm"
+};
+export default NumberLinkCell_module;

package/dist/data-grid/cells/NumberLinkCell/NumberLinkCell_module.css

@@ -0,0 +1,20 @@
+.container-Vj5RGJ {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  overflow: hidden;
+}
+
+.link-r6bNlG {
+  color: var(--product-blue-700);
+  text-decoration: none;
+}
+
+.disabled-n9mtjm {
+  color: var(--dark-grey-grey-800);
+}
+
+tr:hover > td > .container-Vj5RGJ .disabled-n9mtjm {
+  color: var(--product-blue-700);
+}
+

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

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

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

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

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

@@ -0,0 +1,12 @@
+import type { Row } from '@tanstack/react-table';
+type Props<TData> = {
+    row: Row<TData>;
+    className?: string;
+    testId?: string;
+};
+export declare const RowDragHandleCellComponent: {
+    <TData>({ row, testId, className, }: Props<TData>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const RowDragHandleCell: typeof RowDragHandleCellComponent;
+export {};

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

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { cn } from "../../../common/css/cn.js";
+import { DragNDrop12Icon } from "../../../icon/index.js";
+import RowDragHandleCell_module from "./RowDragHandleCell.module.js";
+const RowDragHandleCellComponent = ({ row, testId, className })=>{
+    const { attributes, listeners } = useSortable({
+        id: row.id
+    });
+    return /*#__PURE__*/ jsx("div", {
+        "data-test-id": testId,
+        className: cn(RowDragHandleCell_module.dragButton, 'position-dots-icon', className),
+        ...attributes,
+        ...listeners,
+        children: /*#__PURE__*/ jsx(DragNDrop12Icon, {})
+    });
+};
+RowDragHandleCellComponent.displayName = 'RowDragHandleCell';
+const RowDragHandleCell = /*#__PURE__*/ memo(RowDragHandleCellComponent);
+export { RowDragHandleCell, RowDragHandleCellComponent };

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

@@ -0,0 +1,5 @@
+import "./RowDragHandleCell_module.css";
+const RowDragHandleCell_module = {
+    dragButton: "dragButton-yP2ZOq"
+};
+export default RowDragHandleCell_module;

package/dist/data-grid/cells/RowDragHandleCell/RowDragHandleCell_module.css

@@ -0,0 +1,13 @@
+.dragButton-yP2ZOq {
+  visibility: hidden;
+  cursor: pointer;
+  padding: var(--cell-padding-top, 4px) 0 var(--cell-padding-bottom, 4px) 0;
+  background-color: #0000;
+  border: none;
+  justify-content: center;
+  align-items: center;
+  height: 24px;
+  margin: auto;
+  display: flex;
+}
+

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

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

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

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

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

@@ -0,0 +1,15 @@
+import { type CSSProperties } from 'react';
+import { type CellContext } from '@tanstack/react-table';
+import type { ISelectOption } from '../../../components/Select/Select';
+import { type TableSelectProps } from '../components/TableSelect/TableSelect';
+type OmittedTableSelectProps = 'value' | 'onChange' | 'onClear';
+export interface SelectCellProps<T, G = unknown> extends Omit<TableSelectProps<G>, OmittedTableSelectProps> {
+    context: CellContext<T, unknown>;
+    value?: ISelectOption<G>;
+    onChange?: (option: ISelectOption<G>, rowIndex: number, columnId: string) => void;
+    onClear?: (rowIndex: number, columnId: string) => void;
+    cellClassName?: string;
+    style?: CSSProperties;
+}
+export declare const SelectCell: <T, G = unknown>(props: SelectCellProps<T, G>) => JSX.Element;
+export {};

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

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useEffect, useState } from "react";
+import { cn } from "../../../common/index.js";
+import { TableSelect } from "../components/TableSelect/TableSelect.js";
+import SelectCell_module from "./SelectCell.module.js";
+const SelectCellComponent = ({ context, dropdownStyle = {
+    maxHeight: '320px'
+}, options, onChange, onClear, style, cellClassName, value, ...selectProps })=>{
+    const { column, row, table } = context;
+    const [innerValue, setInnerValue] = useState(value);
+    useEffect(()=>{
+        setInnerValue(value);
+    }, [
+        value
+    ]);
+    const handleChange = (newValue)=>{
+        setInnerValue(newValue);
+        table.options.meta?.updateData?.(row.index, column.id, newValue);
+        onChange?.(newValue, row.index, column.id);
+    };
+    const handleClear = ()=>{
+        setInnerValue(void 0);
+        table.options.meta?.updateData?.(row.index, column.id, void 0);
+        onClear?.(row.index, column.id);
+    };
+    return /*#__PURE__*/ jsx("div", {
+        style: style,
+        className: cn(SelectCell_module.wrapper, cellClassName),
+        children: /*#__PURE__*/ jsx(TableSelect, {
+            value: innerValue,
+            options: options,
+            onChange: handleChange,
+            onClear: handleClear,
+            dropdownStyle: dropdownStyle,
+            ...selectProps
+        })
+    });
+};
+SelectCellComponent.displayName = 'SelectCell';
+const SelectCell = /*#__PURE__*/ memo(SelectCellComponent);
+export { SelectCell };