@moysklad/uikit 28.1.0 → 30.4.0

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;
@@ -13,5 +14,5 @@ export interface TableNumberInputProps extends Omit<TableInputProps, OmittedTabl
     formatter?: (value: number | null) => string;
     suffix?: string;
 }
-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, inputRef: inputRefProp, ...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,27 @@ 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 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);
+        onBlur?.(e, parsedValue);
+        if (inputRef.current) inputRef.current.value = formatted;
     }, [
-        handleFormat,
-        handleSanitize,
-        handlerParse,
-        onBlur,
-        onChange,
-        value
+        getFormattedValue,
+        getSanitizedValue,
+        getParsedValue,
+        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 +88,42 @@ 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);
+        inputRef.current.value = sanitizedValue;
         const newCursorPos = start + sanitizedValue.length;
-        setTimeout(()=>{
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(()=>{
             input.setSelectionRange(newCursorPos, newCursorPos);
         }, 0);
         onPaste?.(e);
     }, [
-        handleSanitize,
-        handlerParse,
-        onChange,
+        getSanitizedValue,
         onPaste
     ]);
+    useEffect(()=>{
+        if (inputRef.current) inputRef.current.value = getFormattedValue(value);
+    }, [
+        getFormattedValue,
+        value
+    ]);
+    useEffect(()=>()=>{
+            clearTimeout(timeoutRef.current);
+        }, []);
+    const formattedValue = getFormattedValue(value);
     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,
         ...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,7 +6,7 @@ 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, ...selectProps }, ref)=>{
     const inputRef = useRef(null);
     const actionsRenderer = ({ clearHandler, toggleHandler })=>/*#__PURE__*/ jsxs(Fragment, {
             children: [
@@ -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,7 @@ const TableSelectComponent = ({ inputProps, name, renderActions, ...selectProps
     return /*#__PURE__*/ jsx(Select, {
         searchable: true,
         renderInput: inputRenderer,
+        ref: ref,
         ...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/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>> & {

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

@@ -3,8 +3,8 @@ import { forwardRef } from "react";
 import { cn } from "../../../../../common/css/cn.js";
 import Option_module from "./Option.module.js";
 const OptionComponent = ({ children, className, value, onSelect, ...rest }, ref)=>{
-    const handleSelectOption = ()=>{
-        onSelect?.(value);
+    const handleSelectOption = (e)=>{
+        if (0 === e.button) onSelect?.(value);
     };
     return /*#__PURE__*/ jsx("div", {
         className: cn(Option_module.option, className),

package/dist/data-grid/headers/components/Dropdown/Option/Option_module.css

@@ -5,11 +5,19 @@
   color: var(--dark-grey-dark-900);
   white-space: nowrap;
   background: none;
-  padding: 0 12px;
+  border-radius: 8px;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
   font-size: 14px;
+  display: flex;
 }
 
 .option-oFVuH3:hover {
-  background: var(--light-grey-200);
+  background: var(--light-grey-100);
+}
+
+.option-oFVuH3:active {
+  background-color: #f1f4f8;
 }
 

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

@@ -1,5 +1,11 @@
-import React, { type FC, type PropsWithChildren } from 'react';
-type Props = {
+import React, { type FC, type PropsWithChildren, type ReactNode } from 'react';
+type RenderDropdownContentOptions = {
+    closeDropdown: () => void;
+};
+type CustomOnClickArgs = {
+    defaultOnClick: () => void;
+};
+export type HeaderBuilderProps = {
     sortDirection: false | 'asc' | 'desc';
     btnClass?: string;
     isFiltered?: boolean;
@@ -14,7 +20,11 @@ type Props = {
     testId?: string;
     textOnly?: boolean;
     className?: string;
+    /** @deprecated удалён т.к. функционал не работал */
     isScrollToDropdownDisabled?: boolean;
+    isDisabled?: boolean;
+    renderDropdownContent?: (options: RenderDropdownContentOptions) => ReactNode;
+    customOnClick?: (options: CustomOnClickArgs) => () => void;
 };
-export declare const HeaderBuilder: FC<PropsWithChildren<Props>>;
+export declare const HeaderBuilder: FC<PropsWithChildren<HeaderBuilderProps>>;
 export {};

package/dist/data-grid/headers/components/HeaderBuilder/HeaderBuilder.js

@@ -1,116 +1,91 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef } from "react";
 import { cn } from "../../../../common/css/cn.js";
-import { useClickOutside } from "../../../../hooks/useClickOutside/index.js";
-import { useId } from "../../../../hooks/useId/index.js";
+import { Dropdown, useDropdown } from "../../../../components/Dropdown/Dropdown.js";
 import { OverflowHint } from "../../../base/index.js";
-import { isFullyVisibleX } from "../../../utils/index.js";
 import { DATEPICKER_PORTAL_ID } from "../../constants/index.js";
-import { Dropdown } from "../Dropdown/Dropdown.js";
 import { DropdownArrowBtn } from "../Dropdown/DropdownArrowBtn/DropdownArrowBtn.js";
 import { EllipsisText } from "../EllipsisText/EllipsisText.js";
 import { ArrowIcon } from "./ArrowIcon.js";
 import HeaderBuilder_module from "./HeaderBuilder.module.js";
 const HeaderBuilder = /*#__PURE__*/ memo(({ children, sortDirection, btnClass, isFiltered, displayName, displayNamePosition = 'left', isNeedHint = true, dropdownStyle = {
     width: 260
-}, portalSelector, customHintText, hintZIndex, forceShowTooltip, testId, textOnly = false, className, isScrollToDropdownDisabled })=>{
-    const [dropdownAlignment, setDropdownAlignment] = useState('left');
-    const [showDropdown, setShowDropdown] = useState(false);
-    const dropdownRef = useRef(null);
+}, portalSelector, customHintText, hintZIndex, forceShowTooltip, testId, textOnly = false, className, isDisabled, renderDropdownContent, customOnClick })=>{
     const buttonRef = useRef(null);
     const displayNameRef = useRef(null);
     const parentRef = useRef(null);
-    const dropdownId = useId();
-    const hideDropdown = ()=>{
-        setShowDropdown(false);
-        setDropdownAlignment(null);
-    };
-    const handleClickOutside = (e)=>{
-        if (buttonRef.current?.contains(e.target) || document.querySelector(`#${DATEPICKER_PORTAL_ID}`)?.contains(e.target) || !showDropdown) return;
-        hideDropdown();
-    };
-    useClickOutside(handleClickOutside, dropdownRef);
+    const { open, handleClose, handleToggle, triggerAriaProps, dropdownAriaProps, dropdownRef } = useDropdown();
     useEffect(()=>{
-        const close = ()=>{
-            setShowDropdown(false);
-            setDropdownAlignment(null);
-        };
-        window.addEventListener('resize', close);
+        window.addEventListener('resize', handleClose);
         return ()=>{
-            window.removeEventListener('resize', close);
+            window.removeEventListener('resize', handleClose);
         };
-    }, []);
+    }, [
+        handleClose
+    ]);
     const dataSortDirection = useMemo(()=>sortDirection && {
             'data-sort-direction': sortDirection
         }, [
         sortDirection
     ]);
-    const handleToggleDropdown = useCallback(()=>{
-        setShowDropdown((p)=>{
-            const willBeOpened = !p;
-            queueMicrotask(()=>{
-                if (willBeOpened && dropdownRef.current) {
-                    if (dropdownRef?.current?.getBoundingClientRect) {
-                        const dropdownRect = dropdownRef.current.getBoundingClientRect();
-                        const viewportWidth = window.innerWidth;
-                        const dropdownRightBorderCord = dropdownRect.x + dropdownRect.width;
-                        const alignmentByDropdownCord = dropdownRightBorderCord < viewportWidth ? 'left' : 'right';
-                        if (isFullyVisibleX(parentRef.current)) setDropdownAlignment(alignmentByDropdownCord);
-                        else {
-                            if (!isScrollToDropdownDisabled) parentRef.current.scrollIntoView({
-                                behavior: 'smooth'
-                            });
-                            const headerRect = parentRef.current.getBoundingClientRect();
-                            headerRect.width < dropdownRect.width ? setDropdownAlignment(alignmentByDropdownCord) : setDropdownAlignment('left');
-                        }
-                    }
-                }
-            });
-            if (!willBeOpened) setDropdownAlignment('left');
-            return willBeOpened;
+    const handleOnClick = useMemo(()=>customOnClick ? customOnClick({
+            defaultOnClick: handleToggle
+        }) : handleToggle, [
+        customOnClick,
+        handleToggle
+    ]);
+    const component = useMemo(()=>{
+        const label = /*#__PURE__*/ jsx(EllipsisText, {
+            ref: displayNameRef,
+            "data-test-id": testId ? `${testId}-header-text` : 'header-text',
+            title: "",
+            children: displayName
         });
-    }, []);
-    const component = useMemo(()=>/*#__PURE__*/ jsx("div", {
+        const containerClassName = cn(HeaderBuilder_module.header, 'right' === displayNamePosition && HeaderBuilder_module.right, textOnly ? HeaderBuilder_module.plainText : btnClass, className);
+        return /*#__PURE__*/ jsx("div", {
             ref: parentRef,
             "data-test-id": testId ? `${testId}-header` : 'header',
             children: textOnly ? /*#__PURE__*/ jsx("div", {
-                className: cn(HeaderBuilder_module.header, HeaderBuilder_module.plainText, className),
-                children: /*#__PURE__*/ jsx(EllipsisText, {
-                    ref: displayNameRef,
-                    title: "",
-                    children: displayName
-                })
+                className: containerClassName,
+                children: label
             }) : /*#__PURE__*/ jsx(DropdownArrowBtn, {
                 ...dataSortDirection,
-                className: cn(HeaderBuilder_module.header, 'right' === displayNamePosition && HeaderBuilder_module.right, btnClass, className),
+                ...triggerAriaProps,
+                className: containerClassName,
+                disabled: isDisabled,
                 isFiltered: isFiltered,
                 ref: buttonRef,
                 testId: testId,
-                name: /*#__PURE__*/ jsx(EllipsisText, {
-                    ref: displayNameRef,
-                    title: "",
-                    "data-test-id": testId ? `${testId}-header-text` : 'header-text',
-                    children: displayName
-                }),
-                onClick: handleToggleDropdown,
-                "aria-controls": dropdownId,
-                "aria-expanded": showDropdown,
-                "aria-haspopup": "menu",
+                name: label,
+                onClick: handleOnClick,
                 iconContainerClassName: HeaderBuilder_module.iconContainerClassName
             })
-        }), [
-        dataSortDirection,
-        displayNamePosition,
-        className,
+        });
+    }, [
         btnClass,
+        className,
+        dataSortDirection,
         displayName,
-        displayNameRef,
-        dropdownId,
-        handleToggleDropdown,
+        displayNamePosition,
+        handleOnClick,
+        isDisabled,
         isFiltered,
-        showDropdown,
         testId,
-        textOnly
+        textOnly,
+        triggerAriaProps
+    ]);
+    const portalElement = useMemo(()=>document.querySelector(portalSelector ?? 'body'), [
+        portalSelector
+    ]);
+    const shouldIgnoreOutsideInteraction = useCallback((target)=>{
+        const targetElement = target instanceof Element ? target : target.parentElement;
+        return Boolean(targetElement?.closest(`#${DATEPICKER_PORTAL_ID}`));
+    }, []);
+    const zIndex = useMemo(()=>{
+        const zIndexNumber = Number(dropdownStyle?.zIndex);
+        return isNaN(zIndexNumber) ? void 0 : zIndexNumber;
+    }, [
+        dropdownStyle?.zIndex
     ]);
     return /*#__PURE__*/ jsxs("div", {
         children: [
@@ -122,15 +97,21 @@ const HeaderBuilder = /*#__PURE__*/ memo(({ children, sortDirection, btnClass, i
                 forceShowTooltip: forceShowTooltip,
                 children: component
             }) : component,
-            showDropdown && /*#__PURE__*/ jsx(Dropdown, {
-                id: dropdownId,
+            /*#__PURE__*/ jsx(Dropdown, {
+                ...dropdownAriaProps,
                 ref: dropdownRef,
-                buttonRef: buttonRef,
-                align: dropdownAlignment ?? void 0,
                 style: dropdownStyle,
-                portalSelector: portalSelector ?? 'body',
+                zIndex: zIndex,
                 testId: testId,
-                children: children
+                open: open,
+                triggerRef: buttonRef,
+                portalElement: portalElement,
+                onClose: handleClose,
+                className: HeaderBuilder_module.dropdownContainer,
+                shouldIgnoreOutsideInteraction: shouldIgnoreOutsideInteraction,
+                children: renderDropdownContent ? renderDropdownContent({
+                    closeDropdown: handleClose
+                }) : children
             }),
             Boolean(sortDirection) && /*#__PURE__*/ jsx("div", {
                 className: HeaderBuilder_module.wrapper,