@moysklad/uikit 30.4.0 → 31.20.0

package/dist/data-grid/Filters/DateRangeFilter/types.d.ts

@@ -29,68 +29,80 @@ export interface DateRangeFilterNoDateValue extends DateRangeFilterValue {
     value: null;
 }
 export interface DateRangeFilterLocale {
-    radiobuttons: {
-        period: string;
-        day: string;
-        week: string;
-        month: string;
-        anyDate: string;
-        noDate: string;
-    };
-    dayQuickFilters: {
-        yesterday: string;
-        today: string;
-    };
-    footer: {
-        timeSelectionToggle: string;
-        timeSelectionToggleHint: string;
-        clearFilterButton: string;
-    };
-    slider: {
-        day: {
-            title: string;
-            placeholder: string;
-            dateFormat: string;
+    translate: {
+        radiobuttons: {
+            period: string;
+            day: string;
+            week: string;
+            month: string;
+            anyDate: string;
+            noDate: string;
         };
-        week: {
-            title: string;
-            placeholder: string;
-            dateFormat: {
-                sameMonth: {
-                    firstDate: string;
-                    endDate: string;
-                };
-                differentMonth: {
-                    firstDate: string;
-                    endDate: string;
-                };
+        dayQuickFilters: {
+            yesterday: string;
+            today: string;
+        };
+        footer: {
+            timeSelectionToggle: string;
+            timeSelectionToggleHint: string;
+            clearFilterButton: string;
+        };
+        slider: {
+            day: {
+                title: string;
+                placeholder: string;
+            };
+            week: {
+                title: string;
+                placeholder: string;
             };
-            tooltipDateFormat: {
-                sameMonth: {
-                    firstDate: string;
-                    endDate: string;
+            month: {
+                title: string;
+                placeholder: string;
+            };
+        };
+    };
+    format: {
+        slider: {
+            day: {
+                dateFormat: string;
+            };
+            week: {
+                dateFormat: {
+                    sameMonth: {
+                        firstDate: string;
+                        endDate: string;
+                    };
+                    differentMonth: {
+                        firstDate: string;
+                        endDate: string;
+                    };
                 };
-                differentMonth: {
-                    firstDate: string;
-                    endDate: string;
+                tooltipDateFormat: {
+                    sameMonth: {
+                        firstDate: string;
+                        endDate: string;
+                    };
+                    differentMonth: {
+                        firstDate: string;
+                        endDate: string;
+                    };
                 };
             };
+            month: {
+                dateFormat: string;
+            };
         };
-        month: {
-            title: string;
-            placeholder: string;
-            dateFormat: string;
+        inputMask: {
+            withTime: string;
+            withoutTime: string;
         };
+        emptyDate: {
+            withTime: string;
+            withoutTime: string;
+        };
+        dateFormat: string;
+        dateWithTimeFormat: string;
+        monthCalendarFormat: string;
     };
-    inputMask: {
-        withTime: string;
-        withoutTime: string;
-    };
-    emptyDate: {
-        withTime: string;
-        withoutTime: string;
-    };
-    dateFormat: string;
-    dateWithTimeFormat: string;
-    monthCalendarFormat: string;
 }

package/dist/data-grid/Filters/FiltersContainer/FiltersContainer.js

@@ -24,7 +24,8 @@ const FiltersContainer = (props)=>{
     });
     const { getRenderParams, getFilterValue, getFilterContainOption, filtersState, changeFiltersState } = useRenderParams({
         initialState: filters,
-        values: props.values
+        values: props.values,
+        onChange: props.onChange
     });
     const getInitialValue = (filter)=>{
         if (filter.initialValue) return filter.initialValue;

package/dist/data-grid/Filters/FiltersContainer/utils/useRenderParams.d.ts

@@ -3,6 +3,7 @@ import type { Filter, FilterContainerValues, FilterProps, FilterValue, RenderVal
 interface UseRenderParamsArgs {
     initialState: Filter[];
     values?: Map<string, FilterContainerValues>;
+    onChange?: (values: Map<string, FilterContainerValues>) => void;
 }
 export declare const useRenderParams: (args: UseRenderParamsArgs) => {
     getRenderParams: (filter: Filter) => RenderValueParams<FilterProps>;

package/dist/data-grid/Filters/FiltersContainer/utils/useRenderParams.js

@@ -12,6 +12,13 @@ const getInitialFiltersState = (initialState)=>{
 };
 const useRenderParams = (args)=>{
     const [filtersState, setFiltersState] = useState(()=>args.values ?? getInitialFiltersState(args.initialState));
+    const modifyFiltersState = (modifier)=>{
+        setFiltersState((filtersState)=>{
+            const modifiedState = modifier(filtersState);
+            args.onChange?.(modifiedState);
+            return modifiedState;
+        });
+    };
     useEffect(()=>{
         if (args.values) setFiltersState(args.values);
     }, [
@@ -34,7 +41,7 @@ const useRenderParams = (args)=>{
     const getSelectFilterRenderParams = (filter)=>({
             value: getFilterValue(filter),
             onChange: (value)=>{
-                setFiltersState((state)=>{
+                modifyFiltersState((state)=>{
                     const newState = new Map(state);
                     const prevFilterState = state.get(filter.id);
                     newState.set(filter.id, {
@@ -48,7 +55,7 @@ const useRenderParams = (args)=>{
     const getInputFilterRenderParams = (filter)=>({
             value: getFilterValue(filter) ?? '',
             onChange: (value)=>{
-                setFiltersState((state)=>{
+                modifyFiltersState((state)=>{
                     const newState = new Map(state);
                     const prevFilterState = state.get(filter.id);
                     newState.set(filter.id, {
@@ -62,7 +69,7 @@ const useRenderParams = (args)=>{
     const getMultiselectFilterRenderParams = (filter)=>({
             value: getFilterValue(filter) ?? [],
             onChange: (value)=>{
-                setFiltersState((state)=>{
+                modifyFiltersState((state)=>{
                     const newState = new Map(state);
                     const prevFilterState = state.get(filter.id);
                     newState.set(filter.id, {
@@ -76,7 +83,7 @@ const useRenderParams = (args)=>{
     const getDateRangeFilterRenderParams = (filter)=>({
             value: getFilterValue(filter),
             onChange: (value)=>{
-                setFiltersState((state)=>{
+                modifyFiltersState((state)=>{
                     const newState = new Map(state);
                     const prevFilterState = state.get(filter.id);
                     newState.set(filter.id, {
@@ -90,7 +97,7 @@ const useRenderParams = (args)=>{
     const getRangeFilterRenderParams = (filter)=>({
             value: getFilterValue(filter),
             onChange: (value)=>{
-                setFiltersState((state)=>{
+                modifyFiltersState((state)=>{
                     const newState = new Map(state);
                     const prevFilterState = state.get(filter.id);
                     newState.set(filter.id, {
@@ -104,7 +111,7 @@ const useRenderParams = (args)=>{
     const getContainOptionRenderParams = (filter, defaultValue)=>({
             selectedContainOption: filtersState.get(filter.id)?.selectedContainOption,
             onChangeContainOption: (selectedContainOption)=>{
-                setFiltersState((state)=>{
+                modifyFiltersState((state)=>{
                     const newState = new Map(state);
                     const prevFilterState = state.get(filter.id);
                     newState.set(filter.id, {
@@ -148,6 +155,7 @@ const useRenderParams = (args)=>{
     const getFilterContainOption = (filter, values)=>(values ?? filtersState).get(filter.id)?.selectedContainOption;
     const changeFiltersState = (filtersState)=>{
         setFiltersState(filtersState);
+        args.onChange?.(filtersState);
     };
     return {
         getRenderParams,

package/dist/data-grid/Filters/MultiselectFilter/MultiselectFilter.js

@@ -10,7 +10,7 @@ import { ContainOptionsList } from "../ContainOptionsList/index.js";
 import { OutlineInput } from "../OutlineInput/index.js";
 import { InputContent } from "./InputContent/index.js";
 import MultiselectFilter_module from "./MultiselectFilter.module.js";
-const MultiselectFilter = /*#__PURE__*/ forwardRef(({ items, values, containOptions, selectedContainOption, showSelectAllCheckbox, selectAllCheckboxText, closeDropdownOnCreateButtonClick, getManyItemsChipText, getNotFoundText, showCreateButton, getCreateButtonText, onCreateButtonClick, createButtonIcon, limit, getLimitText, loadingText, onSearch, tooltipDelay, dropdownZIndex, renderItem, optionsClassName, inputText, hideOptions, onChangeContainOption, onChange, onDropdownVisibleChange, ...props }, ref)=>{
+const MultiselectFilter = /*#__PURE__*/ forwardRef(({ items, values, containOptions, selectedContainOption, showSelectAllCheckbox, selectAllCheckboxText, closeDropdownOnCreateButtonClick, getManyItemsChipText, getOtherText, getNotFoundText, showCreateButton, getCreateButtonText, onCreateButtonClick, createButtonIcon, limit, getLimitText, loadingText, onSearch, tooltipDelay, dropdownZIndex, renderItem, optionsClassName, inputText, hideOptions, onChangeContainOption, onChange, onDropdownVisibleChange, ...props }, ref)=>{
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
     const dropdownId = useId();
     const outlineInputRef = useRef(null);
@@ -115,7 +115,7 @@ const MultiselectFilter = /*#__PURE__*/ forwardRef(({ items, values, containOpti
                     chipRefs: chipRefs,
                     onItemDelete: handleDeleteItemFromInputContent,
                     onDeleteFirstItem: handleDeleteFirstItemFromInputContent,
-                    getOtherText: getManyItemsChipText
+                    getOtherText: getOtherText
                 }),
                 staticActions: /*#__PURE__*/ jsx("div", {
                     onFocus: (e)=>e.preventDefault(),

package/dist/data-grid/Filters/OutlineInput/OutlineInput.js

@@ -5,7 +5,7 @@ import { Text, TextTag } from "../../../components/Text/Text.js";
 import { useId } from "../../../hooks/useId/index.js";
 import OutlineInput_module from "./OutlineInput.module.js";
 const DEFAULT_FOCUSED_WIDTH = 256;
-const OutlineInput = /*#__PURE__*/ forwardRef(({ id, className, value, label, name, testId, error, disabled, actions, focusedWidth, style, tabIndex, inputRef: inputRefProp, inputContent, focusedState, onClick, renderCustomInput, staticActions, ...props }, ref)=>{
+const OutlineInput = /*#__PURE__*/ forwardRef(({ id, className, value, label, name, testId, error, disabled, actions, focusedWidth, style, tabIndex, inputRef: inputRefProp, inputContent, focusedState, onClick, renderCustomInput, onChange, staticActions, ...props }, ref)=>{
     const containerRef = useRef(null);
     const inputRef = useRef(null);
     const inputId = useId(id);
@@ -82,7 +82,7 @@ const OutlineInput = /*#__PURE__*/ forwardRef(({ id, className, value, label, na
                                 onKeyUp: props.onKeyUp,
                                 ref: assignInputRef,
                                 value,
-                                onChange: props.onChange
+                                onChange
                             }),
                             actions ? /*#__PURE__*/ jsx("div", {
                                 className: OutlineInput_module.actionsContainer,

package/dist/data-grid/Filters/OutlineInput/OutlineInput_module.css

@@ -86,7 +86,7 @@
 }
 
 .wrapper-rrsJYW:focus-within, .wrapper-rrsJYW.focused-czIkxi {
-  --input-filter-border: var(--elements-hover, #091739);
+  --input-filter-border: var(--border-focused, #091739);
   --input-filter-label: var(--text-primary, #9fa7af);
   outline: none;
 }

package/dist/data-grid/Table/Table_module.css

@@ -87,7 +87,6 @@
   margin-top: -32px;
   display: flex;
   position: absolute;
-  bottom: 0;
   overflow: visible;
 }
 

package/dist/data-grid/cells/ImageCell/ImageMiniature/ImageMiniature_module.css

@@ -36,7 +36,7 @@
 }
 
 .emptyImageIcon-fnM99W {
-  color: var(--elements-disabled, #9fa7af);
+  color: var(--elements-inactive, #9fa7af);
   overflow: visible;
 }
 

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

@@ -13,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.MemoExoticComponent<React.ForwardRefExoticComponent<TableNumberInputProps & React.RefAttributes<HTMLDivElement>>>;
 export {};

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

@@ -5,7 +5,7 @@ import { REGEX_COPY_PASTE_KEYS, RESERVED_CODES, RESERVED_KEYS } from "../../../.
 import { TableInput } from "../TableInput/TableInput.js";
 import { getRegex, numberFormatter, parser, sanitize } from "./utils.js";
 import TableNumberInput_module from "./TableNumberInput.module.js";
-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 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 timeoutRef = useRef();
     const getFormattedValue = useCallback((value)=>formatter ? formatter(value) : numberFormatter({
@@ -43,16 +43,20 @@ const TableNumberInput = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(({ value, a
         maximumFractionDigits,
         suffix
     ]);
+    const formattedValue = getFormattedValue(value);
     const handleBlur = useCallback((e)=>{
         const sanitizedValue = getSanitizedValue(e.target.value);
         const parsedValue = getParsedValue(sanitizedValue);
         const formatted = getFormattedValue(parsedValue);
-        onBlur?.(e, parsedValue);
+        if (!allowBlurWhenValueNotChange && formattedValue === formatted) return;
         if (inputRef.current) inputRef.current.value = formatted;
+        onBlur?.(e, parsedValue);
     }, [
-        getFormattedValue,
         getSanitizedValue,
         getParsedValue,
+        getFormattedValue,
+        formattedValue,
+        allowBlurWhenValueNotChange,
         onBlur
     ]);
     const handleChange = useCallback((e)=>{
@@ -89,15 +93,23 @@ const TableNumberInput = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(({ value, a
         const currentValue = input.value;
         const newValue = currentValue.substring(0, start) + pasteData + currentValue.substring(end);
         const sanitizedValue = getSanitizedValue(newValue);
-        inputRef.current.value = sanitizedValue;
+        input.value = sanitizedValue;
         const newCursorPos = start + sanitizedValue.length;
         clearTimeout(timeoutRef.current);
         timeoutRef.current = setTimeout(()=>{
             input.setSelectionRange(newCursorPos, newCursorPos);
         }, 0);
+        const changeEvent = {
+            target: input,
+            currentTarget: input
+        };
+        handleChange(changeEvent);
+        onInput?.(changeEvent);
         onPaste?.(e);
     }, [
         getSanitizedValue,
+        handleChange,
+        onInput,
         onPaste
     ]);
     useEffect(()=>{
@@ -109,7 +121,6 @@ const TableNumberInput = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(({ value, a
     useEffect(()=>()=>{
             clearTimeout(timeoutRef.current);
         }, []);
-    const formattedValue = getFormattedValue(value);
     return /*#__PURE__*/ jsx(TableInput, {
         ref: ref,
         inputRef: mergeRefs([
@@ -122,6 +133,7 @@ const TableNumberInput = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(({ value, a
         onBlur: handleBlur,
         onKeyDown: handleKeyDown,
         onPaste: handlePaste,
+        onInput: onInput,
         ...rest
     });
 }));

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, customOnArrowBtnClick, ...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,
@@ -95,6 +95,7 @@ const TableSelectComponent = ({ inputProps, name, renderActions, customOnArrowBt
         searchable: true,
         renderInput: inputRenderer,
         ref: ref,
+        clearable: clearable,
         ...selectProps
     });
 };

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/HeaderBuilder/HeaderBuilder.js

@@ -115,6 +115,7 @@ const HeaderBuilder = /*#__PURE__*/ memo(({ children, sortDirection, btnClass, i
             }),
             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/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'
         }
     }
 };