@moysklad/uikit 28.1.0 → 31.20.0

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,18 +97,25 @@ 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,
+                "data-test-id": testId ? `${testId}-header-sort-icon` : 'header-sort-icon',
                 children: /*#__PURE__*/ jsx(ArrowIcon, {
                     className: cn(HeaderBuilder_module.arrow, 'asc' === sortDirection && HeaderBuilder_module.rotated)
                 })

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

@@ -6,6 +6,7 @@ const HeaderBuilder_module = {
     iconContainerClassName: "iconContainerClassName-imS1yx",
     wrapper: "wrapper-tYoNBG",
     arrow: "arrow-WYLP8q",
-    rotated: "rotated-yMd59y"
+    rotated: "rotated-yMd59y",
+    dropdownContainer: "dropdownContainer-G8K0DA"
 };
 export default HeaderBuilder_module;

package/dist/data-grid/headers/components/HeaderBuilder/HeaderBuilder_module.css

@@ -68,3 +68,24 @@
   transform: rotate(180deg);
 }
 
+.dropdownContainer-G8K0DA {
+  background: var(--light-white);
+  flex-direction: column;
+  padding: 4px;
+  display: flex;
+}
+
+.dropdownContainer-G8K0DA ::-webkit-scrollbar {
+  width: 15px;
+}
+
+.dropdownContainer-G8K0DA ::-webkit-scrollbar-track {
+  background: var(--light-white);
+}
+
+.dropdownContainer-G8K0DA ::-webkit-scrollbar-thumb {
+  border: 4px solid var(--light-white);
+  background-color: var(--light-grey-400);
+  border-radius: 8px;
+}
+

package/dist/data-grid/headers/components/HeaderSortGroups/components/SortByOption/SortByOption.js

@@ -2,22 +2,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { memo } from "react";
 import { Text } from "../../../../../../components/Text/Text.js";
 import { Option } from "../../../Dropdown/Option/Option.js";
-import SortByOption_module from "./SortByOption.module.js";
-const SortByOption = /*#__PURE__*/ memo(({ onSelect, icon, label })=>/*#__PURE__*/ jsx(Option, {
-        className: SortByOption_module.option,
+const SortByOption = /*#__PURE__*/ memo(({ onSelect, icon, label })=>/*#__PURE__*/ jsxs(Option, {
         onSelect: onSelect,
-        children: /*#__PURE__*/ jsxs("div", {
-            className: SortByOption_module.sortItem,
-            children: [
-                icon,
-                /*#__PURE__*/ jsx("div", {
-                    className: SortByOption_module.sortItemTextWrapper,
-                    children: /*#__PURE__*/ jsx(Text.Body, {
-                        children: label
-                    })
-                })
-            ]
-        })
+        children: [
+            icon,
+            /*#__PURE__*/ jsx(Text.Body, {
+                children: label
+            })
+        ]
     }));
 SortByOption.displayName = 'SortByOption';
 export { SortByOption };

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

@@ -1,28 +1,23 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo } from "react";
 import { Text } from "../../../../components/Text/Text.js";
-import { Divider } from "../../../base/index.js";
+import { Divider } from "../../../base/Divider/Divider.js";
 import { EyeEyeballHide16Icon } from "../../../../icon/index.js";
 import { useLocale } from "../../../locale/useLocale.js";
 import { Option } from "../Dropdown/Option/Option.js";
-import HideColumn_module from "./HideColumn.module.js";
 const HideColumn = /*#__PURE__*/ memo(({ onVisibleChange, isShowDivider = false })=>{
     const { hideColumnLabel } = useLocale('Headers');
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             isShowDivider && /*#__PURE__*/ jsx(Divider, {}),
-            /*#__PURE__*/ jsx(Option, {
+            /*#__PURE__*/ jsxs(Option, {
                 onSelect: onVisibleChange,
-                className: HideColumn_module.option,
-                children: /*#__PURE__*/ jsxs("div", {
-                    className: HideColumn_module.hideColumn,
-                    children: [
-                        /*#__PURE__*/ jsx(EyeEyeballHide16Icon, {}),
-                        /*#__PURE__*/ jsx(Text.Body, {
-                            children: hideColumnLabel
-                        })
-                    ]
-                })
+                children: [
+                    /*#__PURE__*/ jsx(EyeEyeballHide16Icon, {}),
+                    /*#__PURE__*/ jsx(Text.Body, {
+                        children: hideColumnLabel
+                    })
+                ]
             })
         ]
     });

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

@@ -10,19 +10,16 @@ const ResetFilter = ({ onFilterReset })=>{
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(Divider, {}),
-            /*#__PURE__*/ jsx(Option, {
+            /*#__PURE__*/ jsxs(Option, {
                 "data-test-id": "filter-reset-btn",
                 onClick: onFilterReset,
                 className: ResetFilter_module.option,
-                children: /*#__PURE__*/ jsxs("div", {
-                    className: ResetFilter_module.resetFilter,
-                    children: [
-                        /*#__PURE__*/ jsx(ClearFilter20Icon, {}),
-                        /*#__PURE__*/ jsx(Text.Body, {
-                            children: resetFilterLabel
-                        })
-                    ]
-                })
+                children: [
+                    /*#__PURE__*/ jsx(ClearFilter20Icon, {}),
+                    /*#__PURE__*/ jsx(Text.Body, {
+                        children: resetFilterLabel
+                    })
+                ]
             })
         ]
     });

package/dist/data-grid/headers/components/ResetFilter/ResetFilter.module.js

@@ -1,6 +1,5 @@
 import "./ResetFilter_module.css";
 const ResetFilter_module = {
-    resetFilter: "resetFilter-n7veAz",
     option: "option-gv3fnL"
 };
 export default ResetFilter_module;

package/dist/data-grid/headers/components/ResetFilter/ResetFilter_module.css

@@ -1,25 +1,5 @@
-.resetFilter-n7veAz {
-  align-items: center;
-  gap: 8px;
-  padding-left: 0;
-  display: flex;
-}
-
-.resetFilter-n7veAz svg {
+.option-gv3fnL svg {
   width: 16px;
   height: 16px;
 }
 
-.option-gv3fnL {
-  border-radius: 8px;
-  padding: 6px 12px;
-}
-
-.option-gv3fnL:hover {
-  background: var(--light-grey-100);
-}
-
-.option-gv3fnL:active {
-  background-color: #f1f4f8;
-}
-

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

@@ -1,7 +1,7 @@
 export { Dash } from './Dash/Dash';
 export * from './Dropdown';
 export { DropdownTitle } from './DropdownTitle/DropdownTitle';
-export { HeaderBuilder } from './HeaderBuilder/HeaderBuilder';
+export { HeaderBuilder, type HeaderBuilderProps, } from './HeaderBuilder/HeaderBuilder';
 export { AccountSelect } from './HeaderFilters/AccountSelect/AccountSelect';
 export { Dater } from './HeaderFilters/Dater/Dater';
 export { MultiSelect } from './HeaderFilters/MultiSelect/MultiSelect';

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

@@ -1,7 +1,7 @@
 export { AccountHeader } from './AccountHeader';
 export { BooleanHeader } from './BooleanHeader';
 export { CheckboxHeader } from './CheckboxHeader';
-export { AccountSelect, AlphabeticallySort, CheckboxOption, Dash, Dater, Dropdown, DropdownArrowBtn, DropdownTitle, DuoDirectionSort, HeaderBuilder, HideColumn, MultiSelect, Option, Range, ResetFilter, Search, Select, WarningMsg, } from './components';
+export { AccountSelect, AlphabeticallySort, CheckboxOption, Dash, Dater, Dropdown, DropdownArrowBtn, DropdownTitle, DuoDirectionSort, HeaderBuilder, type HeaderBuilderProps, HideColumn, MultiSelect, Option, Range, ResetFilter, Search, Select, WarningMsg, } from './components';
 export { DateHeader } from './DateHeader';
 export { DictHeader } from './DictHeader';
 export { LinkHeader } from './LinkHeader';

package/dist/data-grid/headers/types/types.d.ts

@@ -17,6 +17,7 @@ export type DefaultHeaderMeta = {
     btnClassName?: string;
     onColumnToggle?: (columnId: string, isVisible: boolean) => void;
     isScrollToDropdownDisabled?: boolean;
+    isHidden?: boolean;
     maxSizeInDefaultView?: number;
     minSizeInDefaultView?: number;
 };

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

@@ -1,12 +1,8 @@
 export * from './base';
-export * from './base';
-export * from './cells';
 export * from './cells';
 export * from './ColumnSettings';
 export * from './Filters';
 export * from './headers';
-export * from './headers';
-export * from './hooks';
 export * from './hooks';
 export * from './Pagination';
 export * from './SavedFilters';

package/dist/data-grid/locale/en-US.js

@@ -48,69 +48,81 @@ const enLocaleValues = {
         selectedOrdersLabel: (count)=>1 === count ? `${count} order` : `${count} orders`
     },
     DateRangeFilter: {
-        radiobuttons: {
-            period: 'Period',
-            day: 'Day',
-            week: 'Week',
-            month: 'Month',
-            anyDate: 'Any date specified',
-            noDate: 'No date specified'
-        },
-        dayQuickFilters: {
-            yesterday: 'Yesterday',
-            today: 'Today'
-        },
-        footer: {
-            timeSelectionToggle: 'Set time',
-            timeSelectionToggleHint: 'Setting time is available only in period mode',
-            clearFilterButton: 'Clear filter'
-        },
-        slider: {
-            day: {
-                title: 'Day',
-                placeholder: 'Select day',
-                dateFormat: 'MMMM d, yyyy'
+        translate: {
+            radiobuttons: {
+                period: 'Period',
+                day: 'Day',
+                week: 'Week',
+                month: 'Month',
+                anyDate: 'Any date specified',
+                noDate: 'No date specified'
             },
-            week: {
-                title: 'Week',
-                placeholder: 'Select week',
-                dateFormat: {
-                    sameMonth: {
-                        firstDate: 'MMMM d',
-                        endDate: 'd, yyyy'
-                    },
-                    differentMonth: {
-                        firstDate: 'MMM d',
-                        endDate: 'MMM d, yyyy'
-                    }
+            dayQuickFilters: {
+                yesterday: 'Yesterday',
+                today: 'Today'
+            },
+            footer: {
+                timeSelectionToggle: 'Set time',
+                timeSelectionToggleHint: 'Setting time is available only in period mode',
+                clearFilterButton: 'Clear filter'
+            },
+            slider: {
+                day: {
+                    title: 'Day',
+                    placeholder: 'Select day'
+                },
+                week: {
+                    title: 'Week',
+                    placeholder: 'Select week'
                 },
-                tooltipDateFormat: {
-                    sameMonth: {
-                        firstDate: 'MMMM d',
-                        endDate: 'd, yyyy'
+                month: {
+                    title: 'Month',
+                    placeholder: 'Select month'
+                }
+            }
+        },
+        format: {
+            slider: {
+                day: {
+                    dateFormat: 'MMMM d, yyyy'
+                },
+                week: {
+                    dateFormat: {
+                        sameMonth: {
+                            firstDate: 'MMMM d',
+                            endDate: 'd, yyyy'
+                        },
+                        differentMonth: {
+                            firstDate: 'MMM d',
+                            endDate: 'MMM d, yyyy'
+                        }
                     },
-                    differentMonth: {
-                        firstDate: 'MMM d',
-                        endDate: 'MMM d, yyyy'
+                    tooltipDateFormat: {
+                        sameMonth: {
+                            firstDate: 'MMMM d',
+                            endDate: 'd, yyyy'
+                        },
+                        differentMonth: {
+                            firstDate: 'MMM d',
+                            endDate: 'MMM d, yyyy'
+                        }
                     }
+                },
+                month: {
+                    dateFormat: 'LLLL yyyy'
                 }
             },
-            month: {
-                title: 'Month',
-                placeholder: 'Select month',
-                dateFormat: 'LLLL yyyy'
+            dateFormat: 'MM/dd/yyyy',
+            monthCalendarFormat: 'LLL',
+            dateWithTimeFormat: 'MM/dd/yyyy HH:mm',
+            emptyDate: {
+                withTime: '__/__/____ __:__',
+                withoutTime: '__/__/____'
+            },
+            inputMask: {
+                withTime: '99/99/9999 99:99',
+                withoutTime: '99/99/9999'
             }
-        },
-        dateFormat: 'MM/dd/yyyy',
-        monthCalendarFormat: 'LLL',
-        dateWithTimeFormat: 'MM/dd/yyyy HH:mm',
-        emptyDate: {
-            withTime: '__/__/____ __:__',
-            withoutTime: '__/__/____'
-        },
-        inputMask: {
-            withTime: '99/99/9999 99:99',
-            withoutTime: '99/99/9999'
         }
     }
 };