@moysklad/uikit 28.1.0 → 30.4.0

package/dist/data-grid/Table/utils/getColumnWidthStyles.d.ts

@@ -3,7 +3,12 @@ type GetColumnWidthProps = {
     column: Column<any>;
 };
 export declare const getColumnWidthStyles: ({ column }: GetColumnWidthProps) => {
+    display: string;
+    minWidth?: undefined;
+    width?: undefined;
+} | {
     minWidth: string;
     width: string;
+    display?: undefined;
 };
 export {};

package/dist/data-grid/Table/utils/getColumnWidthStyles.js

@@ -3,7 +3,10 @@ const optionalDefaultValue = (value)=>void 0 === value ? '' : `, ${value}px`;
 const DEFAULT_COLUMN_MIN_SIZE = 80;
 const DEFAULT_COLUMN_MAX_SIZE = 250;
 const getColumnWidthStyles = ({ column })=>{
-    const { maxSizeInDefaultView = DEFAULT_COLUMN_MAX_SIZE, minSizeInDefaultView = DEFAULT_COLUMN_MIN_SIZE } = getColumnDefMeta(column);
+    const { maxSizeInDefaultView = DEFAULT_COLUMN_MAX_SIZE, minSizeInDefaultView = DEFAULT_COLUMN_MIN_SIZE, isHidden } = getColumnDefMeta(column);
+    if (isHidden) return {
+        display: 'none'
+    };
     const sizeConfig = {
         minWidth: optionalDefaultValue(minSizeInDefaultView),
         maxWidth: optionalDefaultValue(maxSizeInDefaultView)

package/dist/data-grid/Table/utils/getTableColumnIds.d.ts

@@ -0,0 +1,3 @@
+import type { Table } from '@tanstack/react-table';
+import type { WithRowClickLink } from '../types';
+export declare const getTableColumnIds: <T extends WithRowClickLink>(table: Table<T>) => string[];

package/dist/data-grid/Table/utils/getTableColumnIds.js

@@ -0,0 +1,5 @@
+const getTableColumnIds = (table)=>{
+    const flatColumns = table.getAllFlatColumns();
+    return flatColumns.map(({ id })=>id);
+};
+export { getTableColumnIds };

package/dist/data-grid/Table/utils/index.d.ts

@@ -1,2 +1,4 @@
+export * from './compareColumnIds';
 export * from './getColumnWidthStyles';
+export * from './getTableColumnIds';
 export * from './withDnD';

package/dist/data-grid/Table/utils/index.js

@@ -1,2 +1,4 @@
+export * from "./compareColumnIds.js";
 export * from "./getColumnWidthStyles.js";
+export * from "./getTableColumnIds.js";
 export * from "./withDnD.js";

package/dist/data-grid/Table/utils/withDnD.js

@@ -20,7 +20,7 @@ const withDnD = (TableComponent)=>(props)=>{
             if (active && over && active.id !== over.id) {
                 const oldIndex = dndConfig.dataIds.indexOf(String(active.id));
                 const newIndex = dndConfig.dataIds.indexOf(String(over.id));
-                dndConfig.onDragEnd(oldIndex, newIndex);
+                dndConfig.onDragEnd(oldIndex, newIndex, String(active.id));
             }
         }, [
             dndConfig,

package/dist/data-grid/base/DropdownItem/DropdownItem.d.ts

@@ -1,11 +1,11 @@
-import type { FC, MouseEvent, PropsWithChildren } from 'react';
+import type { FC, HTMLAttributes, MouseEvent, PropsWithChildren } from 'react';
+import { type IHasTestId } from '../../../common';
 type Props = {
     onClick: (event: MouseEvent<HTMLDivElement>) => void;
     disabled?: boolean;
     colorHex?: string;
     className?: string;
-    testId?: string;
     isFocused?: boolean;
-};
+} & IHasTestId & HTMLAttributes<HTMLDivElement>;
 export declare const DropdownItem: FC<PropsWithChildren<Props>>;
 export {};

package/dist/data-grid/base/DropdownItem/DropdownItem.js

@@ -1,9 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "../../../common/css/cn.js";
+import { cn } from "../../../common/index.js";
 import DropdownItem_module from "./DropdownItem.module.js";
-const DropdownItem = ({ children, onClick, disabled, isFocused, colorHex, className, testId })=>/*#__PURE__*/ jsxs("div", {
+const DropdownItem = ({ children, onClick, disabled, isFocused, colorHex, className, testId, ...restProps })=>/*#__PURE__*/ jsxs("div", {
         onClick: disabled ? void 0 : onClick,
         className: cn(DropdownItem_module.item, isFocused && DropdownItem_module.focused, disabled && DropdownItem_module.disabledItem, className),
+        ...restProps,
         children: [
             /*#__PURE__*/ jsx("div", {
                 className: cn(disabled && DropdownItem_module.overlay)

package/dist/data-grid/base/OverflowHint/OverflowHint.d.ts

@@ -6,5 +6,6 @@ export interface HintProps {
     overflowElement: MutableRefObject<HTMLElement | null>;
     parent?: MutableRefObject<HTMLElement | null>;
     forceShowTooltip?: boolean;
+    forceHideTooltip?: boolean;
 }
 export declare const OverflowHint: FC<PropsWithChildren<HintProps>>;

package/dist/data-grid/base/OverflowHint/OverflowHint.js

@@ -4,7 +4,8 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { Hint } from "../../../components/Hint/Hint.js";
 import { Text, TextColor } from "../../../components/Text/Text.js";
 import { isFullyVisibleX, isOverflowed } from "../../utils/index.js";
-const OverflowHint = ({ children, hintText, hintZIndex = 6, overflowElement, parent, forceShowTooltip })=>{
+import { getHintTextBasedOnElement } from "./utils.js";
+const OverflowHint = ({ children, hintText: hintTextProp, hintZIndex = 6, overflowElement, parent, forceShowTooltip, forceHideTooltip })=>{
     const DEBOUNCE_TIMEOUT = 500;
     const timeoutRef = useRef(null);
     const overlayRef = useRef(null);
@@ -21,7 +22,7 @@ const OverflowHint = ({ children, hintText, hintZIndex = 6, overflowElement, par
         }
     }, [
         overflowElement,
-        contentRef
+        forceShowTooltip
     ]);
     const handleMouseLeave = useCallback(()=>{
         setIsHiddenRender(true);
@@ -54,6 +55,7 @@ const OverflowHint = ({ children, hintText, hintZIndex = 6, overflowElement, par
         overflowElement,
         parent
     ]);
+    const hintText = hintTextProp || getHintTextBasedOnElement(overflowElement.current);
     return /*#__PURE__*/ jsx("div", {
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
@@ -64,7 +66,7 @@ const OverflowHint = ({ children, hintText, hintZIndex = 6, overflowElement, par
                 children: hintText
             }),
             zIndex: hintZIndex,
-            visible: isVisible,
+            visible: isVisible && !forceHideTooltip,
             overlayStyle: {
                 visibility: isHiddenRender ? 'hidden' : 'visible'
             },

package/dist/data-grid/base/OverflowHint/utils.d.ts

@@ -0,0 +1 @@
+export declare const getHintTextBasedOnElement: (element: HTMLElement | null) => string;

package/dist/data-grid/base/OverflowHint/utils.js

@@ -0,0 +1,7 @@
+const isHTMLInputElement = (element)=>'value' in element;
+const getHintTextBasedOnElement = (element)=>{
+    if (!element) return '';
+    const hintText = isHTMLInputElement(element) ? element.value : element.textContent;
+    return hintText ?? '';
+};
+export { getHintTextBasedOnElement };

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

@@ -1,9 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, useCallback, useEffect, useState } from "react";
-import { cn } from "../../../common/index.js";
 import { AutoComplete } from "../../../components/AutoComplete/AutoComplete.js";
+import { EditableCellWrapper } from "../components/EditableCellWrapper/EditableCellWrapper.js";
 import { TableInput } from "../components/index.js";
-import AutoCompleteCell_module from "./AutoCompleteCell.module.js";
 const AutoCompleteCellComponent = ({ cellContext, value, name, options, onBlur, onChange: onChangeProp, onSelectOption, cellClassName, style, ...restProps })=>{
     const { column, row, table } = cellContext;
     const [innerValue, setInnerValue] = useState(value ?? '');
@@ -27,9 +26,9 @@ const AutoCompleteCellComponent = ({ cellContext, value, name, options, onBlur,
     }, [
         onSelectOption
     ]);
-    return /*#__PURE__*/ jsx("div", {
+    return /*#__PURE__*/ jsx(EditableCellWrapper, {
         style: style,
-        className: cn(AutoCompleteCell_module.wrapper, cellClassName),
+        className: cellClassName,
         children: /*#__PURE__*/ jsx(AutoComplete, {
             ...restProps,
             name: name ?? `${cellContext.column.id}-${cellContext.row.index}`,

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

@@ -1,6 +1,6 @@
 .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);
+  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;
 }

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

@@ -1,6 +1,6 @@
 .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);
+  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;
   align-items: center;
   gap: 10px;

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

@@ -8,5 +8,6 @@ export interface ImageCellProps extends ImageMiniatureProps {
     carouselLoadingLabel?: CarouselProps['loadingLabel'];
     carouselErrorLabel?: CarouselProps['errorLabel'];
     carouselToolbarLabel?: CarouselProps['toolbarLabel'];
+    onCloseCarousel?: () => void;
 }
 export declare const ImageCell: FC<ImageCellProps>;

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

@@ -5,14 +5,17 @@ import { Carousel } from "../../../components/Carousel/Carousel.js";
 import { ImagePreview } from "../../../components/ImagePreview/ImagePreview.js";
 import { ImageMiniature } from "./ImageMiniature/ImageMiniature.js";
 import ImageCell_module from "./ImageCell.module.js";
-const ImageCell = ({ cellClassName, previewSrc, sources, testId, alt, onClick, carouselErrorLabel, carouselLoadingLabel, carouselToolbarLabel, ...rest })=>{
+const ImageCell = ({ cellClassName, previewSrc, sources, testId, alt, onClick, onCloseCarousel, carouselErrorLabel, carouselLoadingLabel, carouselToolbarLabel, ...rest })=>{
     const [isVisibleCarousel, setIsVisibleCarousel] = useState(false);
     const handleShowCarousel = (e)=>{
         if (sources) setIsVisibleCarousel(true);
         onClick?.(e);
         e.stopPropagation();
     };
-    const handleCloseCarousel = ()=>setIsVisibleCarousel(false);
+    const handleCloseCarousel = ()=>{
+        setIsVisibleCarousel(false);
+        onCloseCarousel?.();
+    };
     const content = /*#__PURE__*/ jsx(ImageMiniature, {
         alt: alt,
         onClick: handleShowCarousel,

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

@@ -1,13 +1,18 @@
 import type { Row, Table } from '@tanstack/react-table';
 import { type IHasTestId } from '../../../common/types';
-export interface IndexCheckboxDndCellProps<T> extends IHasTestId {
+export interface IndexCheckboxDndCellProps<T, K> extends IHasTestId {
     row: Row<T>;
     table: Table<T>;
     wrapperClassName?: string;
     numberClassName?: string;
     dotsClassName?: string;
+    data?: K[];
 }
 export declare const IndexCheckboxDndCell: {
-    <T>({ row, table, testId, wrapperClassName, numberClassName, dotsClassName, }: IndexCheckboxDndCellProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T, K extends {
+        id: string;
+    } = {
+        id: string;
+    }>({ row, table, testId, wrapperClassName, numberClassName, dotsClassName, data, }: IndexCheckboxDndCellProps<T, K>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -7,8 +7,8 @@ import { Text, TextTag } from "../../../components/Text/Text.js";
 import { DragNDrop12Icon } from "../../../icon/index.js";
 import { useMassRowSelection } from "../../hooks/index.js";
 import IndexCheckboxDndCell_module from "./IndexCheckboxDndCell.module.js";
-const IndexCheckboxDndCell = ({ row, table, testId, wrapperClassName, numberClassName, dotsClassName })=>{
-    const { toggleSelected, getIsSelected, index } = row;
+const IndexCheckboxDndCell = ({ row, table, testId, wrapperClassName, numberClassName, dotsClassName, data })=>{
+    const { toggleSelected, getIsSelected, index, id } = row;
     const { rows } = table.getRowModel();
     const onCheckboxClick = useMassRowSelection({
         rowIdx: index,
@@ -16,9 +16,11 @@ const IndexCheckboxDndCell = ({ row, table, testId, wrapperClassName, numberClas
         toggleSelected
     });
     const { attributes, listeners } = useSortable({
-        id: row.id
+        id
     });
-    const formattedRowIndex = useMemo(()=>Intl.NumberFormat('ru').format(index + 1), [
+    const formattedRowIndex = useMemo(()=>Intl.NumberFormat('ru').format(data ? data.findIndex((el)=>el.id === id) + 1 : index + 1), [
+        data,
+        id,
         index
     ]);
     return /*#__PURE__*/ jsxs("div", {

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

@@ -1,8 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, useEffect, useState } from "react";
-import { cn } from "../../../common/index.js";
+import { EditableCellWrapper } from "../components/EditableCellWrapper/EditableCellWrapper.js";
 import { TableInput } from "../components/TableInput/TableInput.js";
-import InputCell_module from "./InputCell.module.js";
 const InputCellComponent = ({ cellContext, value, onBlur, onChange, cellClassName, style, ...inputProps })=>{
     const { column, row, table } = cellContext;
     const [innerValue, setInnerValue] = useState(value);
@@ -19,9 +18,9 @@ const InputCellComponent = ({ cellContext, value, onBlur, onChange, cellClassNam
         setInnerValue(e.target.value);
         onChange?.(e, row.index, column.id);
     };
-    return /*#__PURE__*/ jsx("div", {
+    return /*#__PURE__*/ jsx(EditableCellWrapper, {
         style: style,
-        className: cn(InputCell_module.wrapper, cellClassName),
+        className: cellClassName,
         children: /*#__PURE__*/ jsx(TableInput, {
             value: innerValue,
             onChange: handleChange,

package/dist/data-grid/cells/IntegerCell/IntegerCell_module.css

@@ -1,6 +1,6 @@
 .wrapper-NvSmS6 {
   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);
+  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;
 }

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

@@ -1,6 +1,6 @@
 .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);
+  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 auto;
   justify-content: space-between;
   align-items: center;

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

@@ -64,6 +64,7 @@ const NameCell = /*#__PURE__*/ memo(({ code, label, testId, isArchived, isDisabl
         isDisabled,
         isTextCollapsible,
         label,
+        labelVariant,
         linkProps,
         nameClassName,
         testId,
@@ -93,8 +94,10 @@ const NameCell = /*#__PURE__*/ memo(({ code, label, testId, isArchived, isDisabl
             }),
             menuProps?.showMenu && /*#__PURE__*/ jsx("div", {
                 className: NameCell_module.box,
+                onClick: (e)=>e.stopPropagation(),
                 children: /*#__PURE__*/ jsx(RowActionsMenu, {
                     menuItems: menuProps.menuItems,
+                    disabled: menuProps.disabled,
                     renderDropDownContent: menuProps.renderDropDownContent,
                     buttonIcon: menuProps.buttonIcon,
                     dropdownClassName: menuProps.dropdownClassName,

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

@@ -68,11 +68,11 @@
   overflow: visible;
 }
 
-tr:hover > td > .wrapper-svgw8n .titleWrapper-S4Tgos .label-cqqVn5, tr:hover > td > .wrapper-svgw8n .titleWrapper-S4Tgos .label-cqqVn5 .disabled-MSSU6e {
+tr:hover > td > .wrapper-svgw8n .label-cqqVn5, tr:focus-within > td > .wrapper-svgw8n .label-cqqVn5, tr:hover > td > .wrapper-svgw8n .label-cqqVn5 .disabled-MSSU6e, tr:focus-within > td > .wrapper-svgw8n .label-cqqVn5 .disabled-MSSU6e {
   color: var(--button-primary-hover, #0b7cff);
 }
 
-tr:hover > td > .wrapper-svgw8n .titleWrapper-S4Tgos .label-cqqVn5.archived-fkYGc8 {
+tr:hover > td > .wrapper-svgw8n .label-cqqVn5.archived-fkYGc8, tr:focus-within > td > .wrapper-svgw8n .label-cqqVn5.archived-fkYGc8 {
   color: var(--text-tertiary, #9fa7af);
 }
 

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

@@ -1,9 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { memo, useContext, useEffect, useState } from "react";
-import { cn } from "../../../common/index.js";
+import { memo, useContext, useEffect, useMemo, useState } from "react";
 import { LocaleContext } from "../../../context/index.js";
+import { EditableCellWrapper } from "../components/EditableCellWrapper/EditableCellWrapper.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);
@@ -13,29 +12,32 @@ const NumberInputCellComponent = ({ cellContext, value, onBlur, onChange, cellCl
     }, [
         value
     ]);
-    const handleBlur = (e)=>{
-        if (innerValue !== value) table.options.meta?.updateData?.(row.index, column.id, innerValue);
-        onBlur?.(e, innerValue, row.index, column.id);
+    const handleBlur = (e, newValue)=>{
+        if (innerValue !== value) table.options.meta?.updateData?.(row.index, column.id, newValue);
+        onBlur?.(e, newValue, row.index, column.id);
     };
     const handleChange = (newValue)=>{
         setInnerValue(newValue);
         onChange?.(newValue, row.index, column.id);
     };
-    const finalDefaultFormatterOptions = defaultFormatterOptions ? {
-        ...defaultFormatterOptions,
-        locale: defaultFormatterOptions.locale ?? locale
-    } : {
+    const finalDefaultFormatterOptions = useMemo(()=>defaultFormatterOptions ? {
+            ...defaultFormatterOptions,
+            locale: defaultFormatterOptions.locale ?? locale
+        } : {
+            locale
+        }, [
+        defaultFormatterOptions,
         locale
-    };
-    return /*#__PURE__*/ jsx("div", {
+    ]);
+    return /*#__PURE__*/ jsx(EditableCellWrapper, {
         style: style,
-        className: cn(NumberInputCell_module.wrapper, cellClassName),
+        className: cellClassName,
         children: /*#__PURE__*/ jsx(TableNumberInput, {
-            value: innerValue,
-            onChange: handleChange,
+            ...inputProps,
+            value: value ?? null,
             onBlur: handleBlur,
-            defaultFormatterOptions: finalDefaultFormatterOptions,
-            ...inputProps
+            onChange: handleChange,
+            defaultFormatterOptions: finalDefaultFormatterOptions
         })
     });
 };

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

@@ -1,8 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, useEffect, useState } from "react";
-import { cn } from "../../../common/index.js";
+import { EditableCellWrapper } from "../components/EditableCellWrapper/EditableCellWrapper.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 })=>{
@@ -23,9 +22,9 @@ const SelectCellComponent = ({ context, dropdownStyle = {
         table.options.meta?.updateData?.(row.index, column.id, void 0);
         onClear?.(row.index, column.id);
     };
-    return /*#__PURE__*/ jsx("div", {
+    return /*#__PURE__*/ jsx(EditableCellWrapper, {
         style: style,
-        className: cn(SelectCell_module.wrapper, cellClassName),
+        className: cellClassName,
         children: /*#__PURE__*/ jsx(TableSelect, {
             value: innerValue,
             options: options,

package/dist/data-grid/cells/TextCell/TextCell_module.css

@@ -1,6 +1,6 @@
 .wrapper-cEE6lz {
   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);
+  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 auto;
   align-items: center;
   gap: 10px;

package/dist/data-grid/cells/ToggleCell/ToggleCell_module.css

@@ -1,6 +1,6 @@
 .wrapper-nABIS9 {
   align-items: center;
-  padding: 6px 12px 6px 4px;
+  padding: 6px 4px;
   display: flex;
 }
 

package/dist/data-grid/cells/components/EditableCellWrapper/EditableCellWrapper.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentPropsWithoutRef, PropsWithChildren } from 'react';
+export type EditableCellWrapperProps = PropsWithChildren<Pick<ComponentPropsWithoutRef<'div'>, 'style' | 'className'>>;
+export declare const EditableCellWrapper: (props: EditableCellWrapperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/data-grid/cells/components/EditableCellWrapper/EditableCellWrapper.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../../common/index.js";
+import EditableCellWrapper_module from "./EditableCellWrapper.module.js";
+const EditableCellWrapper = (props)=>/*#__PURE__*/ jsx("div", {
+        className: cn(props.className, EditableCellWrapper_module.wrapper),
+        style: props.style,
+        children: props.children
+    });
+export { EditableCellWrapper };

package/dist/data-grid/cells/components/EditableCellWrapper/EditableCellWrapper.module.js

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

package/dist/data-grid/cells/{NumberInputCell/NumberInputCell_module.css → components/EditableCellWrapper/EditableCellWrapper_module.css}

@@ -1,6 +1,6 @@
-.wrapper-FLz9ol {
+.wrapper-D0vYd3 {
   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);
+  padding: var(--cell-padding-top, 4px) var(--cell-padding-right, 4px) var(--cell-padding-bottom, 4px) var(--cell-padding-left, 4px);
   align-items: center;
   width: 100%;
   display: flex;

package/dist/data-grid/cells/components/EditableCellWrapper/index.d.ts

@@ -0,0 +1 @@
+export { EditableCellWrapper, type EditableCellWrapperProps, } from './EditableCellWrapper';

package/dist/data-grid/cells/components/EditableCellWrapper/index.js

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

package/dist/data-grid/cells/components/RowActionsMenu/RowActionsMenu.d.ts

@@ -1,10 +1,10 @@
-import { type MutableRefObject, type ReactNode, type RefObject } from 'react';
+import { type HTMLAttributes, type MutableRefObject, type ReactNode, type RefObject } from 'react';
 import { type IHasTestId } from '../../../../common';
 export type RowActionsMenuItem = {
     label: string;
     onClick: () => void;
     disabled?: boolean;
-} & IHasTestId;
+} & IHasTestId & HTMLAttributes<HTMLDivElement>;
 type RenderDropdownContentOptions = {
     dropdown: ReactNode;
     triggerRef: MutableRefObject<HTMLElement | null>;
@@ -17,6 +17,7 @@ export type RowActionsMenuProps = {
     buttonIcon?: ReactNode;
     buttonClassName?: string;
     dropdownClassName?: string;
+    disabled?: boolean;
 } & IHasTestId;
-export declare const RowActionsMenu: import("react").MemoExoticComponent<({ menuItems, renderDropDownContent, buttonIcon, buttonClassName, dropdownClassName, testId, }: RowActionsMenuProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const RowActionsMenu: import("react").MemoExoticComponent<({ menuItems, renderDropDownContent, buttonIcon, buttonClassName, dropdownClassName, testId, disabled, }: RowActionsMenuProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

package/dist/data-grid/cells/components/RowActionsMenu/RowActionsMenu.js

@@ -6,7 +6,7 @@ import { DropdownItem } from "../../../base/DropdownItem/DropdownItem.js";
 import { Still20Icon } from "../../../../icon/index.js";
 import { KEY_CODES, KEY_CODES_TO_CLOSE, KEY_CODES_TO_OPEN } from "./consts.js";
 import RowActionsMenu_module from "./RowActionsMenu.module.js";
-const RowActionsMenu = /*#__PURE__*/ memo(({ menuItems, renderDropDownContent, buttonIcon, buttonClassName, dropdownClassName, testId })=>{
+const RowActionsMenu = /*#__PURE__*/ memo(({ menuItems, renderDropDownContent, buttonIcon, buttonClassName, dropdownClassName, testId, disabled })=>{
     const { open, triggerRef, triggerAriaProps, dropdownAriaProps, handleToggle, handleClose: closeDropdown, handleOpen, dropdownRef } = useDropdown();
     const [cursor, setCursor] = useState(null);
     const handleClose = useCallback(()=>{
@@ -17,17 +17,17 @@ const RowActionsMenu = /*#__PURE__*/ memo(({ menuItems, renderDropDownContent, b
     ]);
     const menuItemNodes = useMemo(()=>{
         if (0 === menuItems.length) return null;
-        return menuItems.map((item, index)=>/*#__PURE__*/ jsx(DropdownItem, {
-                disabled: item.disabled,
-                testId: item.testId ?? `${testId}-row-menu-option`,
+        return menuItems.map(({ label, testId: menuItemTestId, onClick, ...restMenuItemProps }, index)=>/*#__PURE__*/ jsx(DropdownItem, {
+                testId: menuItemTestId ?? `${testId}-row-menu-option`,
                 isFocused: index === cursor,
                 onClick: (e)=>{
-                    item.onClick();
+                    onClick();
                     handleClose();
                     e.stopPropagation();
                 },
-                children: item.label
-            }, item.label));
+                ...restMenuItemProps,
+                children: label
+            }, label));
     }, [
         menuItems,
         testId,
@@ -48,7 +48,10 @@ const RowActionsMenu = /*#__PURE__*/ memo(({ menuItems, renderDropDownContent, b
             }
         }
         if (open) {
-            if (KEY_CODES_TO_CLOSE.includes(e.code)) handleClose();
+            if (KEY_CODES_TO_CLOSE.includes(e.code)) {
+                e.preventDefault();
+                handleClose();
+            }
             if ((e.code === KEY_CODES.ENTER || e.code === KEY_CODES.SPACE) && null !== cursor) {
                 e.preventDefault();
                 const { onClick, disabled } = menuItems[cursor];
@@ -94,11 +97,8 @@ const RowActionsMenu = /*#__PURE__*/ memo(({ menuItems, renderDropDownContent, b
                 tabIndex: 0,
                 "data-test-id": `${testId}-row-menu-button`,
                 "data-active": open,
-                onKeyDown: handleKeyDown,
-                onClick: (e)=>{
-                    handleToggle();
-                    e.stopPropagation();
-                },
+                onKeyDown: disabled ? void 0 : handleKeyDown,
+                onClick: disabled ? void 0 : handleToggle,
                 ref: (element)=>{
                     if (element) triggerRef.current = element;
                 },

package/dist/data-grid/cells/components/TableInput/TableInput.js

@@ -1,13 +1,26 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef } from "react";
+import { forwardRef, useCallback, useRef, useState } from "react";
 import { cn } from "../../../../common/index.js";
 import { OverflowHint } from "../../../base/OverflowHint/OverflowHint.js";
 import { useId } from "../../../../hooks/index.js";
 import TableInput_module from "./TableInput.module.js";
-const TableInput = /*#__PURE__*/ forwardRef(({ actions, className, disabled, error, inputClassName, inputRef: inputRefProp, tabIndex, testId, value, ...inputProps }, ref)=>{
+const TableInput = /*#__PURE__*/ forwardRef(({ actions, className, disabled, error, inputClassName, inputRef: inputRefProp, tabIndex, testId, value, onFocus, onBlur, ...inputProps }, ref)=>{
     const inputId = useId(inputProps.id);
     const inputRef = useRef(null);
     const wrapperRef = useRef(null);
+    const [isFocused, setIsFocused] = useState(false);
+    const handleFocus = useCallback((e)=>{
+        setIsFocused(true);
+        if (onFocus) onFocus(e);
+    }, [
+        onFocus
+    ]);
+    const handleBlur = useCallback((e)=>{
+        setIsFocused(false);
+        if (onBlur) onBlur(e);
+    }, [
+        onBlur
+    ]);
     return /*#__PURE__*/ jsx("div", {
         className: TableInput_module.wrapper,
         ref: wrapperRef,
@@ -16,6 +29,7 @@ const TableInput = /*#__PURE__*/ forwardRef(({ actions, className, disabled, err
             hintZIndex: 6,
             overflowElement: inputRef,
             parent: wrapperRef,
+            forceHideTooltip: isFocused,
             children: /*#__PURE__*/ jsxs("div", {
                 "data-disabled": disabled,
                 "data-error": error,
@@ -39,7 +53,9 @@ const TableInput = /*#__PURE__*/ forwardRef(({ actions, className, disabled, err
                         },
                         tabIndex: tabIndex,
                         type: "text",
-                        value: value
+                        value: value,
+                        onFocus: handleFocus,
+                        onBlur: handleBlur
                     }),
                     actions ? /*#__PURE__*/ jsx("div", {
                         className: TableInput_module.actionsContainer,

package/dist/data-grid/cells/components/TableInput/TableInput_module.css

@@ -10,7 +10,7 @@
   place-content: center;
   align-items: center;
   width: 100%;
-  padding: 1px 4px;
+  padding: 1px 3px;
   display: inline-flex;
 }