@moysklad/uikit 28.1.0 → 31.20.0

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/{InputCell/InputCell_module.css → components/EditableCellWrapper/EditableCellWrapper_module.css}

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

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

@@ -1,10 +1,11 @@
 import React from 'react';
 import { type TableInputProps } from '../TableInput/TableInput';
 import { type DefaultFormatterOptions } from './utils';
-type OmittedTableInputProps = 'value' | 'onChange';
+type OmittedTableInputProps = 'value' | 'onChange' | 'onBlur' | 'defaultValue';
 export interface TableNumberInputProps extends Omit<TableInputProps, OmittedTableInputProps> {
     value: number | null;
-    onChange: (value: number | null) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>, value: number | null) => void;
+    onChange?: (value: number | null) => void;
     allowNegative?: boolean;
     allowDecimal?: boolean;
     decimalSeparator?: string;
@@ -12,6 +13,7 @@ export interface TableNumberInputProps extends Omit<TableInputProps, OmittedTabl
     defaultFormatterOptions?: DefaultFormatterOptions;
     formatter?: (value: number | null) => string;
     suffix?: string;
+    allowBlurWhenValueNotChange?: boolean;
 }
-export declare const TableNumberInput: React.FC<TableNumberInputProps>;
+export declare const TableNumberInput: React.MemoExoticComponent<React.ForwardRefExoticComponent<TableNumberInputProps & React.RefAttributes<HTMLDivElement>>>;
 export {};

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

@@ -1,14 +1,14 @@
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { forwardRef, memo, useCallback, useEffect, useRef } from "react";
+import { mergeRefs } from "../../../../common/react/mergeRefs.js";
 import { REGEX_COPY_PASTE_KEYS, RESERVED_CODES, RESERVED_KEYS } from "../../../../utils/index.js";
 import { TableInput } from "../TableInput/TableInput.js";
 import { getRegex, numberFormatter, parser, sanitize } from "./utils.js";
 import TableNumberInput_module from "./TableNumberInput.module.js";
-const TableNumberInput = ({ value, allowNegative = true, allowDecimal = true, decimalSeparator, maximumFractionDigits = 2, defaultFormatterOptions, formatter, suffix, onBlur, onChange, onFocus, onKeyDown, onPaste, ...rest })=>{
+const TableNumberInput = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(({ value, allowNegative = true, allowDecimal = true, decimalSeparator, maximumFractionDigits = 2, defaultFormatterOptions, formatter, suffix, onBlur, onChange, onKeyDown, onPaste, onInput, inputRef: inputRefProp, allowBlurWhenValueNotChange = true, ...rest }, ref)=>{
     const inputRef = useRef(null);
-    const [displayValue, setDisplayValue] = useState('');
-    const [isFocused, setIsFocused] = useState(false);
-    const handleFormat = useCallback((value)=>formatter ? formatter(value) : numberFormatter({
+    const timeoutRef = useRef();
+    const getFormattedValue = useCallback((value)=>formatter ? formatter(value) : numberFormatter({
             value,
             allowDecimal,
             suffix,
@@ -19,7 +19,7 @@ const TableNumberInput = ({ value, allowNegative = true, allowDecimal = true, de
         formatter,
         suffix
     ]);
-    const handleSanitize = useCallback((input)=>sanitize({
+    const getSanitizedValue = useCallback((input)=>sanitize({
             input,
             allowNegative,
             allowDecimal,
@@ -29,7 +29,7 @@ const TableNumberInput = ({ value, allowNegative = true, allowDecimal = true, de
         allowNegative,
         suffix
     ]);
-    const handlerParse = useCallback((input)=>parser({
+    const getParsedValue = useCallback((input)=>parser({
             input,
             allowNegative,
             allowDecimal,
@@ -43,48 +43,31 @@ const TableNumberInput = ({ value, allowNegative = true, allowDecimal = true, de
         maximumFractionDigits,
         suffix
     ]);
-    useEffect(()=>{
-        if (!isFocused) {
-            const formatted = handleFormat(value);
-            setDisplayValue(formatted);
-        }
-    }, [
-        handleFormat,
-        isFocused,
-        value
-    ]);
-    const handleFocus = useCallback((e)=>{
-        setIsFocused(true);
-        onFocus?.(e);
-    }, [
-        onFocus
-    ]);
+    const formattedValue = getFormattedValue(value);
     const handleBlur = useCallback((e)=>{
-        setIsFocused(false);
-        const sanitizedValue = handleSanitize(e.target.value);
-        const parsedValue = handlerParse(sanitizedValue);
-        const formatted = handleFormat(parsedValue);
-        if (parsedValue !== value) onChange(parsedValue);
-        setDisplayValue(formatted);
-        onBlur?.(e);
+        const sanitizedValue = getSanitizedValue(e.target.value);
+        const parsedValue = getParsedValue(sanitizedValue);
+        const formatted = getFormattedValue(parsedValue);
+        if (!allowBlurWhenValueNotChange && formattedValue === formatted) return;
+        if (inputRef.current) inputRef.current.value = formatted;
+        onBlur?.(e, parsedValue);
     }, [
-        handleFormat,
-        handleSanitize,
-        handlerParse,
-        onBlur,
-        onChange,
-        value
+        getSanitizedValue,
+        getParsedValue,
+        getFormattedValue,
+        formattedValue,
+        allowBlurWhenValueNotChange,
+        onBlur
     ]);
     const handleChange = useCallback((e)=>{
         const rawInput = e.target.value;
-        const sanitizedValue = handleSanitize(rawInput);
-        const parsedValue = handlerParse(sanitizedValue);
-        setDisplayValue(rawInput);
-        onChange(parsedValue);
+        const sanitizedValue = getSanitizedValue(rawInput);
+        const parsedValue = getParsedValue(sanitizedValue);
+        onChange?.(parsedValue);
     }, [
-        onChange,
-        handleSanitize,
-        handlerParse
+        getParsedValue,
+        getSanitizedValue,
+        onChange
     ]);
     const handleKeyDown = useCallback((e)=>{
         const { key, ctrlKey, metaKey, code } = e;
@@ -109,32 +92,50 @@ const TableNumberInput = ({ value, allowNegative = true, allowDecimal = true, de
         const end = input.selectionEnd || 0;
         const currentValue = input.value;
         const newValue = currentValue.substring(0, start) + pasteData + currentValue.substring(end);
-        const sanitizedValue = handleSanitize(newValue);
-        const parsedValue = handlerParse(sanitizedValue);
-        setDisplayValue(sanitizedValue);
-        onChange(parsedValue);
+        const sanitizedValue = getSanitizedValue(newValue);
+        input.value = sanitizedValue;
         const newCursorPos = start + sanitizedValue.length;
-        setTimeout(()=>{
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(()=>{
             input.setSelectionRange(newCursorPos, newCursorPos);
         }, 0);
+        const changeEvent = {
+            target: input,
+            currentTarget: input
+        };
+        handleChange(changeEvent);
+        onInput?.(changeEvent);
         onPaste?.(e);
     }, [
-        handleSanitize,
-        handlerParse,
-        onChange,
+        getSanitizedValue,
+        handleChange,
+        onInput,
         onPaste
     ]);
+    useEffect(()=>{
+        if (inputRef.current) inputRef.current.value = getFormattedValue(value);
+    }, [
+        getFormattedValue,
+        value
+    ]);
+    useEffect(()=>()=>{
+            clearTimeout(timeoutRef.current);
+        }, []);
     return /*#__PURE__*/ jsx(TableInput, {
-        inputRef: inputRef,
+        ref: ref,
+        inputRef: mergeRefs([
+            inputRefProp ?? null,
+            inputRef
+        ]),
+        defaultValue: formattedValue,
         inputClassName: TableNumberInput_module.input,
-        value: displayValue,
         onChange: handleChange,
-        onFocus: handleFocus,
         onBlur: handleBlur,
         onKeyDown: handleKeyDown,
         onPaste: handlePaste,
+        onInput: onInput,
         ...rest
     });
-};
+}));
 TableNumberInput.displayName = 'TableNumberInput';
 export { TableNumberInput };

package/dist/data-grid/cells/components/TableSelect/ActionButton/ActionButton.d.ts

@@ -1,2 +1,5 @@
 import { type ButtonHTMLAttributes, type FC } from 'react';
-export declare const ActionButton: FC<ButtonHTMLAttributes<HTMLButtonElement>>;
+import { type IHasTestId } from '../../../../../common';
+type Props = ButtonHTMLAttributes<HTMLButtonElement> & IHasTestId;
+export declare const ActionButton: FC<Props>;
+export {};

package/dist/data-grid/cells/components/TableSelect/ActionButton/ActionButton.js

@@ -2,9 +2,10 @@ import { jsx } from "react/jsx-runtime";
 import { memo } from "react";
 import { cn } from "../../../../../common/index.js";
 import ActionButton_module from "./ActionButton.module.js";
-const ActionButton = /*#__PURE__*/ memo(({ className, ...otherProps })=>/*#__PURE__*/ jsx("button", {
-        ...otherProps,
-        className: cn(ActionButton_module.button, className)
+const ActionButton = /*#__PURE__*/ memo(({ className, testId, ...restProps })=>/*#__PURE__*/ jsx("button", {
+        ...restProps,
+        className: cn(ActionButton_module.button, className),
+        "data-test-id": testId
     }));
 ActionButton.displayName = 'ActionButton';
 export { ActionButton };

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

@@ -1,20 +1,25 @@
-import React, { type ForwardedRef, type ReactNode } from 'react';
-import { type SelectProps } from '../../../../components/Select/Select';
+import React, { type ForwardedRef, type MouseEventHandler, type MutableRefObject, type ReactNode } from 'react';
+import { type SelectProps as BaseSelectProps, type SelectRef } from '../../../../components/Select/Select';
 import { type TableInputProps } from '../TableInput/TableInput';
-type RenderInput<T = unknown> = NonNullable<SelectProps<T>['renderInput']>;
-type RenderActionsOptions<T> = Pick<Parameters<RenderInput>[0], 'clearHandler' | 'toggleHandler'> & Pick<SelectProps<T>, 'value'>;
+type RenderInput<T = unknown> = NonNullable<BaseSelectProps<T>['renderInput']>;
+type RenderActionsOptions<T> = Pick<Parameters<RenderInput>[0], 'clearHandler' | 'toggleHandler'> & Pick<BaseSelectProps<T>, 'value'>;
 type OmittedSelectProps = 'children' | 'fullWidth' | 'helpComponent' | 'info' | 'inputProps' | 'label' | 'renderActions' | 'renderInput' | 'required' | 'searchable' | 'variant';
-type PickedTableInputProps = 'className' | 'inputRef' | 'onChange' | 'onClick' | 'onKeyUp' | 'onKeyDown';
-export interface TableSelectProps<T = unknown> extends Omit<SelectProps<T>, OmittedSelectProps> {
+type SelectProps<T> = Omit<BaseSelectProps<T>, OmittedSelectProps>;
+type PickedTableInputProps = 'className' | 'inputRef' | 'onBlur' | 'onChange' | 'onClick' | 'onFocus' | 'onKeyDown' | 'onKeyUp';
+type InputProps = Pick<TableInputProps, PickedTableInputProps> & {
+    ref?: MutableRefObject<HTMLDivElement | null> | ((element: HTMLDivElement | null) => void);
+};
+export interface TableSelectProps<T = unknown> extends SelectProps<T> {
     name?: string;
-    inputProps?: Pick<TableInputProps, PickedTableInputProps>;
+    inputProps?: InputProps;
     renderActions?: (options: RenderActionsOptions<T>) => ReactNode;
+    customOnArrowBtnClick?: MouseEventHandler<HTMLDivElement>;
 }
-declare const TableSelectComponent: <T = unknown>(props: TableSelectProps<T>, ref: ForwardedRef<HTMLDivElement>) => JSX.Element;
+declare const TableSelectComponent: <T = unknown>(props: TableSelectProps<T>, ref: ForwardedRef<SelectRef<T>>) => JSX.Element;
 export declare const TableSelect: (<T>(props: TableSelectProps<T> & {
-    ref?: ForwardedRef<HTMLDivElement>;
+    ref?: ForwardedRef<SelectRef<T>>;
 }) => ReturnType<typeof TableSelectComponent>) & {
-    ActionButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>>;
+    ActionButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & import("../../../../common").IHasTestId>;
     displayName: string;
 };
 export {};

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

@@ -6,11 +6,11 @@ import { Down12Icon, RemoveClose12Icon } from "../../../../icon/index.js";
 import { TableInput } from "../TableInput/TableInput.js";
 import { ActionButton } from "./ActionButton/ActionButton.js";
 import TableSelect_module from "./TableSelect.module.js";
-const TableSelectComponent = ({ inputProps, name, renderActions, ...selectProps }, ref)=>{
+const TableSelectComponent = ({ inputProps, name, renderActions, customOnArrowBtnClick, clearable = true, ...selectProps }, ref)=>{
     const inputRef = useRef(null);
     const actionsRenderer = ({ clearHandler, toggleHandler })=>/*#__PURE__*/ jsxs(Fragment, {
             children: [
-                !!selectProps.value && !selectProps.disabled && /*#__PURE__*/ jsxs(Fragment, {
+                clearable && !!selectProps.value && !selectProps.disabled && /*#__PURE__*/ jsxs(Fragment, {
                     children: [
                         /*#__PURE__*/ jsx("button", {
                             "data-test-id": selectProps.testId ? `${selectProps.testId}-clear-button` : void 0,
@@ -37,6 +37,7 @@ const TableSelectComponent = ({ inputProps, name, renderActions, ...selectProps
                 !selectProps.disabled && /*#__PURE__*/ jsx("div", {
                     className: cn(TableSelect_module.actionButton, TableSelect_module.interactiveOnly),
                     onClick: (event)=>{
+                        if (customOnArrowBtnClick) return void customOnArrowBtnClick(event);
                         event.stopPropagation();
                         inputRef.current?.focus();
                         toggleHandler();
@@ -60,23 +61,25 @@ const TableSelectComponent = ({ inputProps, name, renderActions, ...selectProps
             name: name,
             placeholder: selectProps.placeholder,
             onChange: (event)=>{
-                inputProps?.onChange?.(event);
                 searchHandler(event.target.value);
+                inputProps?.onChange?.(event);
             },
             onClick: (event)=>{
-                inputProps?.onClick?.(event);
                 openHandler();
+                inputProps?.onClick?.(event);
             },
             onKeyUp: (event)=>{
-                inputProps?.onKeyUp?.(event);
                 inputKeyUpHandler(event);
+                inputProps?.onKeyUp?.(event);
             },
             onKeyDown: inputProps?.onKeyDown,
+            onBlur: inputProps?.onBlur,
+            onFocus: inputProps?.onFocus,
             ref: (element)=>{
                 triggerRef.current = element;
-                if (!ref) return;
-                if ('function' == typeof ref) return void ref(element);
-                ref.current = element;
+                if (!inputProps?.ref) return;
+                if ('function' == typeof inputProps.ref) return void inputProps.ref(element);
+                inputProps.ref.current = element;
             },
             inputRef: (element)=>{
                 inputRef.current = element;
@@ -91,6 +94,8 @@ const TableSelectComponent = ({ inputProps, name, renderActions, ...selectProps
     return /*#__PURE__*/ jsx(Select, {
         searchable: true,
         renderInput: inputRenderer,
+        ref: ref,
+        clearable: clearable,
         ...selectProps
     });
 };

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

@@ -1,3 +1,4 @@
+export { EditableCellWrapper, type EditableCellWrapperProps, } from './EditableCellWrapper';
 export { RowActionsMenu, type RowActionsMenuItem, type RowActionsMenuProps, } from './RowActionsMenu';
 export { TableInput, type TableInputProps } from './TableInput';
 export { numberFormatter, TableNumberInput, type TableNumberInputProps, } from './TableNumberInput';

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

@@ -1,3 +1,4 @@
+export { EditableCellWrapper } from "./EditableCellWrapper/index.js";
 export { RowActionsMenu } from "./RowActionsMenu/index.js";
 export { TableInput } from "./TableInput/index.js";
 export { TableNumberInput, numberFormatter } from "./TableNumberInput/index.js";

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

@@ -1,7 +1,7 @@
 export { AutoCompleteCell, type AutoCompleteCellProps, } from './AutoCompleteCell';
 export { BooleanCell } from './BooleanCell';
 export { CheckboxCell } from './CheckboxCell';
-export { numberFormatter, RowActionsMenu, type RowActionsMenuItem, type RowActionsMenuProps, TableInput, type TableInputProps, TableNumberInput, type TableNumberInputProps, TableSelect, type TableSelectProps, } from './components';
+export { EditableCellWrapper, type EditableCellWrapperProps, numberFormatter, RowActionsMenu, type RowActionsMenuItem, type RowActionsMenuProps, TableInput, type TableInputProps, TableNumberInput, type TableNumberInputProps, TableSelect, type TableSelectProps, } from './components';
 export { DateCell } from './DateCell';
 export { DecimalCell } from './DecimalCell';
 export { ETableFillCellValues, getBackgroundColorByFillState, getFillState, getTranslationPostfixByFillState, isFillStateWithTooltip, } from './DecimalCell/DecimalCell.helpers';

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

@@ -1,7 +1,7 @@
 export { AutoCompleteCell } from "./AutoCompleteCell/index.js";
 export { BooleanCell } from "./BooleanCell/index.js";
 export { CheckboxCell } from "./CheckboxCell/index.js";
-export { RowActionsMenu, TableInput, TableNumberInput, TableSelect, numberFormatter } from "./components/index.js";
+export { EditableCellWrapper, RowActionsMenu, TableInput, TableNumberInput, TableSelect, numberFormatter } from "./components/index.js";
 export { DateCell } from "./DateCell/index.js";
 export { DecimalCell } from "./DecimalCell/index.js";
 export { ETableFillCellValues, getBackgroundColorByFillState, getFillState, getTranslationPostfixByFillState, isFillStateWithTooltip } from "./DecimalCell/DecimalCell.helpers.js";

package/dist/data-grid/headers/PlainTextHeader.js

@@ -3,7 +3,7 @@ import { memo } from "react";
 import { HeaderBuilder } from "./components/index.js";
 import { getColumnDefMeta } from "./utils/index.js";
 const PlainTextHeaderComponent = ({ column })=>{
-    const { displayName, customHintText, hintZIndex, forceShowTooltip = false, className, testId, isScrollToDropdownDisabled, btnClassName } = getColumnDefMeta(column);
+    const { displayName, customHintText, hintZIndex, forceShowTooltip = false, className, testId, isScrollToDropdownDisabled, btnClassName, displayNamePosition = 'left' } = getColumnDefMeta(column);
     return /*#__PURE__*/ jsx(HeaderBuilder, {
         sortDirection: false,
         displayName: displayName,
@@ -15,7 +15,8 @@ const PlainTextHeaderComponent = ({ column })=>{
         className: className,
         textOnly: true,
         isScrollToDropdownDisabled: isScrollToDropdownDisabled,
-        btnClass: btnClassName
+        btnClass: btnClassName,
+        displayNamePosition: displayNamePosition
     });
 };
 const PlainTextHeader = /*#__PURE__*/ memo(PlainTextHeaderComponent);

package/dist/data-grid/headers/components/Dropdown/Dropdown.d.ts

@@ -1,4 +1,7 @@
 import { type HTMLAttributes, type RefObject } from 'react';
+/**
+ * @deprecated Use { Dropdown } from @lognex/uikit instead
+ */
 export declare const Dropdown: import("react").ForwardRefExoticComponent<{
     buttonRef: RefObject<HTMLElement>;
     align?: "left" | "right";

package/dist/data-grid/headers/components/Dropdown/DropdownArrowBtn/DropdownArrowBtn.js

@@ -4,16 +4,20 @@ import { cn } from "../../../../../common/css/cn.js";
 import { Down12Icon, Filter12Icon } from "../../../../../icon/index.js";
 import { EllipsisText } from "../../EllipsisText/EllipsisText.js";
 import DropdownArrowBtn_module from "./DropdownArrowBtn.module.js";
-const DropdownArrowBtn = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(({ name, isActive, isFiltered, disabled, onFocus, iconContainerClassName, className, testId, ...rest }, ref)=>{
+const DropdownArrowBtn = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(({ name, isActive, isFiltered, disabled, onFocus, iconContainerClassName, className, testId, onClick, ...rest }, ref)=>{
     const handleFocus = (e)=>{
         if (onFocus) onFocus(e);
     };
+    const handOnClick = (e)=>{
+        if (onClick && !disabled) onClick(e);
+    };
     return /*#__PURE__*/ jsxs("div", {
         ref: ref,
         "aria-disabled": disabled,
         onFocus: handleFocus,
         tabIndex: 0,
         className: cn(DropdownArrowBtn_module.buttonContainer, className),
+        onClick: handOnClick,
         ...rest,
         children: [
             /*#__PURE__*/ jsx(EllipsisText, {

package/dist/data-grid/headers/components/Dropdown/Option/Option.d.ts

@@ -1,7 +1,7 @@
 import { type HTMLAttributes, type MutableRefObject, type PropsWithChildren, type Ref } from 'react';
 interface Props<V> extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
     value?: V;
-    onSelect?: (value: V) => void;
+    onSelect?: (value?: V) => void;
 }
 export declare const OptionComponent: <V = undefined>({ children, className, value, onSelect, ...rest }: PropsWithChildren<Props<V>>, ref: MutableRefObject<HTMLDivElement> | null) => import("react/jsx-runtime").JSX.Element;
 type OptionWithRef = <V = undefined>(p: PropsWithChildren<Props<V>> & {