@ozen-ui/kit 0.40.0 → 0.42.0

package/__inner__/cjs/locale/locale.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.enUS = exports.kkKZ = exports.ruRU = void 0;
+var constants_1 = require("../components/Pagination/constants");
 exports.ruRU = {
     defaultProps: {
         Autocomplete: {
@@ -31,6 +32,25 @@ exports.ruRU = {
             incrementButtonText: 'Увеличить',
             decrementButtonText: 'Уменьшить',
         },
+        Pagination: {
+            'aria-label': 'Навигация по страницам',
+            getItemAriaLabel: function (_a) {
+                var page = _a.page, type = _a.type, selected = _a.selected;
+                if (type === constants_1.NEXT) {
+                    return 'Перейти на следующую страницу';
+                }
+                if (type === constants_1.PREVIOUS) {
+                    return 'Перейти на предыдущую страницу';
+                }
+                if (selected) {
+                    return "\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430 ".concat(page);
+                }
+                if (type === constants_1.PAGE) {
+                    return "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043D\u0430 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443 ".concat(page);
+                }
+                return '';
+            },
+        },
     },
 };
 exports.kkKZ = {
@@ -63,6 +83,25 @@ exports.kkKZ = {
             incrementButtonText: 'Үлкейту',
             decrementButtonText: 'Азайту',
         },
+        Pagination: {
+            'aria-label': 'Беттерді шарлау',
+            getItemAriaLabel: function (_a) {
+                var page = _a.page, type = _a.type, selected = _a.selected;
+                if (type === constants_1.NEXT) {
+                    return 'Келесі бетке өтіңіз';
+                }
+                if (type === constants_1.PREVIOUS) {
+                    return 'Алдыңғы бетке өтіңіз';
+                }
+                if (selected) {
+                    return "".concat(page, " \u0431\u0435\u0442");
+                }
+                if (type === constants_1.PAGE) {
+                    return "".concat(page, "-\u0431\u0435\u0442\u043A\u0435 \u04E9\u0442\u0456\u04A3\u0456\u0437");
+                }
+                return '';
+            },
+        },
     },
 };
 exports.enUS = {
@@ -95,5 +134,24 @@ exports.enUS = {
             incrementButtonText: 'Increment',
             decrementButtonText: 'Decrement',
         },
+        Pagination: {
+            'aria-label': 'Pagination navigation',
+            getItemAriaLabel: function (_a) {
+                var page = _a.page, type = _a.type, selected = _a.selected;
+                if (type === constants_1.NEXT) {
+                    return 'Go to next page';
+                }
+                if (type === constants_1.PREVIOUS) {
+                    return 'Go to previous page';
+                }
+                if (selected) {
+                    return "Page ".concat(page);
+                }
+                if (type === constants_1.PAGE) {
+                    return "Go to page ".concat(page);
+                }
+                return '';
+            },
+        },
     },
 };

package/__inner__/esm/components/Autocomplete/Autocomplete.js

@@ -1,6 +1,6 @@
 import { __assign, __read, __rest, __spreadArray } from "tslib";
 import './Autocomplete.css';
-import React, { useEffect, useRef, forwardRef, useState } from 'react';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { useControlled } from '../../hooks/useControlled';
 import { useMutableRef } from '../../hooks/useMutableRef';
 import { useThemeProps } from '../../hooks/useThemeProps';
@@ -9,7 +9,7 @@ import { isKeys } from '../../utils/isKeys';
 import { DataList, DataListOption } from '../DataList';
 import { Input } from '../Input';
 import { AutocompleteLoading, AutocompleteNoOptions, AutocompleteRenderRight, } from './components';
-import { AUTOCOMPLETE_DEFAULT_SIZE, AUTOCOMPLETE_DEFAULT_DISABLED, AUTOCOMPLETE_DEFAULT_REQUIRED, AUTOCOMPLETE_DEFAULT_FULLWIDTH, AUTOCOMPLETE_DEFAULT_AUTOFOCUS, AUTOCOMPLETE_DEFAULT_ALLOW_CUSTOM_VALUE, AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_CHEVRON, AUTOCOMPLETE_DEFAULT_DISABLE_CLEAR_BUTTON, AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST, AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT, } from './constants';
+import { AUTOCOMPLETE_DEFAULT_ALLOW_CUSTOM_VALUE, AUTOCOMPLETE_DEFAULT_AUTOFOCUS, AUTOCOMPLETE_DEFAULT_DISABLE_CLEAR_BUTTON, AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT, AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_CHEVRON, AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST, AUTOCOMPLETE_DEFAULT_DISABLED, AUTOCOMPLETE_DEFAULT_FULLWIDTH, AUTOCOMPLETE_DEFAULT_REQUIRED, AUTOCOMPLETE_DEFAULT_SIZE, } from './constants';
 import { withDefaultGetters } from './helper';
 export var cnAutocomplete = cn('Autocomplete');
 function AutocompleteRender(inProps, ref) {

package/__inner__/esm/components/Autocomplete/helper.d.ts

@@ -80,6 +80,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     } & {
         'data-testid'?: string | undefined;
     }) | undefined;
+    hintProps?: Omit<import("../FieldHint").FieldHintProps, "children"> | undefined;
 } & {
     open?: boolean | undefined;
     defaultOpen?: undefined;
@@ -176,6 +177,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     } & {
         'data-testid'?: string | undefined;
     }) | undefined;
+    hintProps?: Omit<import("../FieldHint").FieldHintProps, "children"> | undefined;
 } & {
     open?: undefined;
     defaultOpen?: boolean | undefined;

package/__inner__/esm/components/Autocomplete/types.d.ts

@@ -1,4 +1,4 @@
-import type { SyntheticEvent, ChangeEvent, ReactElement, ReactNode } from 'react';
+import type { ChangeEvent, ReactElement, ReactNode, SyntheticEvent } from 'react';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { DataListProps } from '../DataList';
 import type { InputProps } from '../Input';
@@ -31,7 +31,7 @@ type AutocompleteOpenUncontrolledProps = {
     /** Состояние открытие по умолчанию (неконтролируемый компонент) */
     defaultOpen?: boolean;
 };
-type AutocompleteInputProps = Pick<InputProps, 'placeholder' | 'autoFocus' | 'fullWidth' | 'disabled' | 'label' | 'required' | 'style' | 'error' | 'hint' | 'renderLeft' | 'renderRight' | 'className' | 'inputProps' | 'onKeyDown'>;
+type AutocompleteInputProps = Pick<InputProps, 'placeholder' | 'autoFocus' | 'fullWidth' | 'disabled' | 'label' | 'required' | 'style' | 'error' | 'hint' | 'renderLeft' | 'renderRight' | 'className' | 'inputProps' | 'hintProps' | 'onKeyDown'>;
 type AutocompleteDataListProps = Partial<Omit<DataListProps, 'onClose' | 'open' | 'anchorRef' | 'multiple' | 'selected' | 'onSelect'>>;
 export type AutocompleteProps<OPTION = AutocompleteDefaultOption> = {
     /** Список вариантов выбора (опции) */

package/__inner__/esm/components/FieldControl/FieldControl.css

@@ -1,22 +1,24 @@
 /* stylelint-disable */
 .FieldControl {
   --textfield-color: var(--color-content-primary);
-  --textfield-background-color: var(--color-background-primary);
   --textfield-border-width: var(--border-width-s);
   --textfield-border-color: var(--color-border-main);
+  --textfield-placeholder-color: var(--color-content-tertiary);
+  --textfield-background-color: var(--color-background-primary);
   cursor: text;
-  display: inline-flex;
   vertical-align: top;
+  display: inline-flex;
   flex-direction: column;
 }
 .FieldControl > * {
     cursor: text;
   }
 .FieldControl_size_2xs {
-      --textfield-gutter-x: 12px;
-      --textfield-input-height: 32px;
       --textfield-input-padding: 8px 0;
       --textfield-input-gap: var(--spacing-2xs);
+      --textfield-gutter-x: var(--control-padding-xs);
+      --textfield-border-radius: var(--border-radius-xs);
+      --textfield-input-height: var(--control-height-2xs);
 
       font: var(--typography-text-2xs-font);
 
@@ -25,10 +27,11 @@
       text-transform: var(--typography-text-2xs-text_transform, none);
     }
 .FieldControl_size_xs {
-      --textfield-gutter-x: 12px;
-      --textfield-input-height: 40px;
       --textfield-input-padding: 12px 0;
       --textfield-input-gap: var(--spacing-2xs);
+      --textfield-gutter-x: var(--control-padding-xs);
+      --textfield-border-radius: var(--border-radius-xs);
+      --textfield-input-height: var(--control-height-xs);
 
       font: var(--typography-text-xs-font);
 
@@ -37,10 +40,11 @@
       text-transform: var(--typography-text-xs-text_transform, none);
     }
 .FieldControl_size_s {
-      --textfield-gutter-x: 16px;
-      --textfield-input-height: 48px;
       --textfield-input-padding: 14px 0;
       --textfield-input-gap: var(--spacing-xs);
+      --textfield-gutter-x: var(--control-padding-s);
+      --textfield-border-radius: var(--border-radius-xs);
+      --textfield-input-height: var(--control-height-s);
 
       font: var(--typography-text-s-font);
 
@@ -49,10 +53,11 @@
       text-transform: var(--typography-text-s-text_transform, none);
     }
 .FieldControl_size_m {
-      --textfield-gutter-x: 20px;
-      --textfield-input-height: 56px;
       --textfield-input-padding: 16px 0;
       --textfield-input-gap: var(--spacing-xs);
+      --textfield-gutter-x: var(--control-padding-m);
+      --textfield-border-radius: var(--border-radius-xs);
+      --textfield-input-height: var(--control-height-m);
 
       font: var(--typography-text-m-font);
 
@@ -61,10 +66,11 @@
       text-transform: var(--typography-text-m-text_transform, none);
     }
 .FieldControl_size_l {
-      --textfield-gutter-x: 24px;
-      --textfield-input-height: 64px;
       --textfield-input-padding: 18px 0;
       --textfield-input-gap: var(--spacing-s);
+      --textfield-gutter-x: var(--control-padding-l);
+      --textfield-border-radius: var(--border-radius-xs);
+      --textfield-input-height: var(--control-height-l);
 
       font: var(--typography-text-l-font);
 
@@ -76,16 +82,16 @@
         --textfield-input-padding: 8px 0 8px;
       }
 .FieldControl_hasLabel.FieldControl_size_xs {
-        --textfield-input-padding: 19px 0 4px;
+        --textfield-input-padding: 20px 0 4px;
       }
 .FieldControl_hasLabel.FieldControl_size_s {
-        --textfield-input-padding: 21px 0 6px;
+        --textfield-input-padding: 22px 0 6px;
       }
 .FieldControl_hasLabel.FieldControl_size_m {
-        --textfield-input-padding: 24px 0 6px;
+        --textfield-input-padding: 24px 0 8px;
       }
 .FieldControl_hasLabel.FieldControl_size_l {
-        --textfield-input-padding: 26px 0 6px;
+        --textfield-input-padding: 28px 0 8px;
       }
 .FieldControl_hasLabel .FieldInput::placeholder {
         opacity: 0;
@@ -102,8 +108,8 @@
 .FieldControl_focused,
   .FieldControl_focused:hover {
     --textfield-border-width: var(--border-width-m);
-    --textfield-background-color: var(--color-background-main);
     --textfield-border-color: var(--color-border-action);
+    --textfield-background-color: var(--color-background-main);
   }
 .FieldControl_error,
   .FieldControl_error.FieldControl:hover,
@@ -112,9 +118,9 @@
     --textfield-border-color: var(--color-border-error);
   }
 .FieldControl_disabled {
+    --textfield-color: var(--color-content-secondary);
     --textfield-border-color: var(--color-border-disabled);
     --textfield-background-color: var(--color-background-disabled);
-    --textfield-color: var(--color-content-secondary);
-    pointer-events: none;
     cursor: default;
+    pointer-events: none;
   }

package/__inner__/esm/components/FieldLabel/FieldLabel.css

@@ -48,22 +48,22 @@
   .FieldLabel_size_s {
       --field-label-font: var(--typography-text-s-font);
       --field-label-scaled: var(--typography-text-3xs-font);
-      --field-label-translate_y: -9px;
+      --field-label-translate_y: -8px;
       --field-label-top: 14px;
     }
 
   .FieldLabel_size_m {
       --field-label-font: var(--typography-text-m-font);
-      --field-label-scaled: var(--typography-text-s-font);
-      --field-label-translate_y: -10px;
-      --field-label-top: 15px;
+      --field-label-scaled: var(--typography-text-xs-font);
+      --field-label-translate_y: -8px;
+      --field-label-top: 16px;
     }
 
   .FieldLabel_size_l {
       --field-label-font: var(--typography-text-l-font);
       --field-label-scaled: var(--typography-text-s-font);
-      --field-label-translate_y: -9px;
-      --field-label-top: 17px;
+      --field-label-translate_y: -10px;
+      --field-label-top: 18px;
     }
 
   .FieldLabel_disabled {

package/__inner__/esm/components/Fieldset/Fieldset.css

@@ -4,7 +4,7 @@
   margin: 0;
   padding: 0;
   pointer-events: none;
-  border-radius: var(--border-radius-xs);
+  border-radius: var(--textfield-border-radius);
   border: var(--textfield-border-width) solid var(--textfield-border-color);
   transition: border var(--transition-default);
 }

package/__inner__/esm/components/FilePicker/FilePicker.css

@@ -1,130 +1,70 @@
-/* stylelint-disable */
-.FilePicker {
-  --textfield-color: var(--color-content-tertiary);
-  --textfield-background-color: var(--color-background-primary);
-  --textfield-border-width: var(--border-width-s);
-  --textfield-border-color: var(--color-border-main);
-  font: var(--textfield-input-font);
-  display: inline-flex;
-  vertical-align: top;
-  flex-direction: column;
-}
 .FilePicker-Body {
-    position: relative;
     display: flex;
-    -moz-column-gap: var(--textfield-input-gap);
-         column-gap: var(--textfield-input-gap);
+    cursor: pointer;
+    position: relative;
     align-items: center;
     box-sizing: border-box;
+    color: var(--textfield-color);
     padding: 0 var(--textfield-gutter-x);
+    -moz-column-gap: var(--textfield-input-gap);
+         column-gap: var(--textfield-input-gap);
+    border-radius: var(--textfield-border-radius);
     background-color: var(--textfield-background-color);
     transition: background-color var(--transition-slow);
-    color: var(--textfield-color);
-    border-radius: var(--border-radius-xs);
-    cursor: pointer;
   }
-.FilePicker-FieldContainer {
+  .FilePicker-FieldContainer {
+    overflow: hidden;
     inline-size: 100%;
     min-inline-size: 0;
     position: relative;
-    overflow: hidden;
   }
-.FilePicker-FileName,
+  .FilePicker-FileName,
   .FilePicker-Placeholder {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
+    padding: 0;
     border: none;
-    outline: none;
-    position: relative;
     display: flex;
-    align-items: center;
+    outline: none;
+    overflow: hidden;
     inline-size: 100%;
-    padding: 0;
     background: none;
+    position: relative;
+    align-items: center;
+    white-space: nowrap;
     box-sizing: border-box;
-    color: var(--textfield-color);
+    text-overflow: ellipsis;
     block-size: var(--textfield-input-height);
   }
-.FilePicker-Input {
+  .FilePicker-Placeholder {
+    color: var(--textfield-placeholder-color);
+  }
+  .FilePicker-Input {
+    opacity: 0;
+    inline-size: 100%;
     inset-block-end: 0;
-    inset-inline-start: 0;
     position: absolute;
-    opacity: 0;
     pointer-events: none;
-    inline-size: 100%;
+    inset-inline-start: 0;
   }
-.FilePicker-Input:focus + .FilePicker-Placeholder {
+  .FilePicker-Input:focus + .FilePicker-Placeholder {
       opacity: 1;
     }
-.FilePicker_size_2xs {
-      --textfield-gutter-x: 12px;
-      --textfield-input-height: 32px;
-      --textfield-input-font: var(--typography-text-2xs-font);
-      --textfield-input-padding: 8px 0 8px;
-      --textfield-input-gap: var(--spacing-2xs);
-    }
-.FilePicker_size_xs {
-      --textfield-gutter-x: 12px;
-      --textfield-input-height: 40px;
-      --textfield-input-font: var(--typography-text-xs-font);
-      --textfield-input-padding: 19px 0 4px;
-      --textfield-input-gap: var(--spacing-2xs);
-    }
-.FilePicker_size_s {
-      --textfield-gutter-x: 16px;
-      --textfield-input-height: 48px;
-      --textfield-input-font: var(--typography-text-s-font);
-      --textfield-input-padding: 21px 0 6px;
-      --textfield-input-gap: var(--spacing-xs);
-    }
-.FilePicker_size_m {
-      --textfield-gutter-x: 20px;
-      --textfield-input-height: 56px;
-      --textfield-input-font: var(--typography-text-m-font);
-      --textfield-input-padding: 24px 0 6px;
-      --textfield-input-gap: var(--spacing-xs);
-    }
-.FilePicker_size_l {
-      --textfield-gutter-x: 24px;
-      --textfield-input-height: 64px;
-      --textfield-input-font: var(--typography-text-l-font);
-      --textfield-input-padding: 26px 0 6px;
-      --textfield-input-gap: var(--spacing-s);
-    }
-.FilePicker_fullWidth {
-    inline-size: 100%;
+  .FilePicker-ClearButton {
+    visibility: hidden;
+    transition: visibility var(--transition-default);
   }
-.FilePicker_hasValue {
-    --textfield-color: var(--color-content-primary);
+  .FilePicker-ClearButton_visibility {
+      visibility: visible;
+    }
+  .FilePicker-RenderRight {
+    display: flex;
+    gap: var(--spacing-2xs);
   }
-.FilePicker_hasLabel .FilePicker-Placeholder {
+
+.FieldControl_hasLabel .FilePicker-Placeholder {
       opacity: 0;
     }
-.FilePicker_hasLabel .FilePicker-FileName,
-    .FilePicker_hasLabel .FilePicker-Placeholder {
+
+.FieldControl_hasLabel .FilePicker-FileName,
+    .FieldControl_hasLabel .FilePicker-Placeholder {
       padding: var(--textfield-input-padding);
-      font: var(--textfield-input-font);
     }
-.FilePicker:hover {
-    --textfield-border-color: var(--color-border-main-hover);
-  }
-.FilePicker_focused,
-  .FilePicker_focused:hover {
-    --textfield-border-width: var(--border-width-m);
-    --textfield-background-color: var(--color-background-main);
-    --textfield-border-color: var(--color-border-action);
-  }
-.FilePicker_error,
-  .FilePicker_error.FilePicker:hover,
-  .FilePicker_error.FilePicker_focused,
-  .FilePicker_error.FilePicker_focused:hover {
-    --textfield-border-color: var(--color-border-error);
-  }
-.FilePicker_disabled {
-    --textfield-border-color: var(--color-border-disabled);
-    --textfield-background-color: var(--color-background-disabled);
-    --textfield-color: var(--color-content-secondary);
-    pointer-events: none;
-    cursor: default;
-  }

package/__inner__/esm/components/FilePicker/FilePicker.d.ts

@@ -1,4 +1,74 @@
 import './FilePicker.css';
+import type { KeyboardEvent, MouseEvent } from 'react';
 import React from 'react';
 export declare const cnFilePicker: import("@bem-react/classname").ClassNameFormatter;
-export declare const FilePicker: React.ForwardRefExoticComponent<import("./types").FilePickerBaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, keyof import("./types").FilePickerBaseProps> & React.RefAttributes<HTMLDivElement>>;
+export declare const FilePicker: React.ForwardRefExoticComponent<{
+    id?: string | undefined;
+    name?: string | undefined;
+    size?: "s" | "m" | "l" | "2xs" | "xs" | undefined;
+    label?: string | undefined;
+    accept?: string | undefined;
+    placeholder?: string | undefined;
+    onChange?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    multiple?: boolean | undefined;
+    fileList?: File[] | undefined;
+    fullWidth?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    inputProps?: (Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+        ref?: ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
+    } & {
+        'data-testid'?: string | undefined;
+    }) | undefined;
+    disableTruncate?: boolean | undefined;
+    required?: boolean | undefined;
+    renderLeft?: string | number | React.FC<React.SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: React.Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }> | React.ReactElement<React.SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: React.Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }, string | React.JSXElementConstructor<any>> | (() => React.ReactElement<React.SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: React.Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }, string | React.JSXElementConstructor<any>>) | undefined;
+    renderRight?: string | number | React.FC<React.SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: React.Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }> | React.ReactElement<React.SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: React.Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }, string | React.JSXElementConstructor<any>> | (() => React.ReactElement<React.SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: React.Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }, string | React.JSXElementConstructor<any>>) | undefined;
+    hint?: string | null | undefined;
+    error?: boolean | undefined;
+    disabled?: boolean | undefined;
+    labelProps?: import("../FieldLabel").FieldLabelProps | undefined;
+    hintProps?: Omit<import("../FieldHint").FieldHintProps, "children"> | undefined;
+    renderValue?: import("./types").FilePickerRenderValue | undefined;
+    clearText?: string | undefined;
+    onClear?: ((e: KeyboardEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, payload: {
+        name?: string | undefined;
+    }) => void) | undefined;
+    className?: string | undefined;
+    'data-testid'?: string | undefined;
+} & {
+    labelRef?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
+    inputRef?: React.Ref<HTMLInputElement> | undefined;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "name" | "label" | "className" | "id" | "onChange" | "autoFocus" | "disabled" | "accept" | "multiple" | "placeholder" | "required" | "size" | "error" | "fullWidth" | "labelProps" | "data-testid" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps" | "clearText" | "onClear" | "fileList" | "disableTruncate" | "renderValue" | keyof {
+    labelRef?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
+    inputRef?: React.Ref<HTMLInputElement> | undefined;
+}> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/FilePicker/FilePicker.js

@@ -1,27 +1,34 @@
 import { __assign, __read, __rest } from "tslib";
 import './FilePicker.css';
-import React, { forwardRef, useState, useRef } from 'react';
+import React, { forwardRef, useRef, useState } from 'react';
 import { AttachmentIcon, CrossIcon } from '@ozen-ui/icons';
+import { deprecate } from '@ozen-ui/logger';
 import { useMultiRef } from '../../hooks/useMultiRef';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { isKey } from '../../utils/isKey';
+import { FieldControl } from '../FieldControl';
 import { FieldHint } from '../FieldHint';
 import { FieldIcon } from '../FieldIcon';
 import { FieldLabel } from '../FieldLabel';
 import { Fieldset } from '../Fieldset';
-import { IconButton } from '../IconButton';
-import { FILE_PICKER_DEFAULT_SIZE, FILE_PICKER_DEFAULT_DISABLED, FILE_PICKER_DEFAULT_REQUIRED, FILE_PICKER_DEFAULT_FULL_WIDTH, FILE_PICKER_DEFAULT_DISABLE_TRUNCATE, FILE_PICKER_DEFAULT_VALUE_RENDERER, FILE_PICKER_DEFAULT_MULTIPLE, } from './constants';
+import { IconButton } from '../IconButtonNext';
+import { FILE_PICKER_DEFAULT_DISABLE_TRUNCATE, FILE_PICKER_DEFAULT_DISABLED, FILE_PICKER_DEFAULT_FULL_WIDTH, FILE_PICKER_DEFAULT_MULTIPLE, FILE_PICKER_DEFAULT_REQUIRED, FILE_PICKER_DEFAULT_SIZE, FILE_PICKER_DEFAULT_VALUE_RENDERER, } from './constants';
 export var cnFilePicker = cn('FilePicker');
 export var FilePicker = forwardRef(function (inProps, ref) {
     var _a = useThemeProps({
         props: inProps,
         name: 'FilePicker',
-    }), _b = _a.size, size = _b === void 0 ? FILE_PICKER_DEFAULT_SIZE : _b, _c = _a.disabled, disabled = _c === void 0 ? FILE_PICKER_DEFAULT_DISABLED : _c, _d = _a.required, required = _d === void 0 ? FILE_PICKER_DEFAULT_REQUIRED : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? FILE_PICKER_DEFAULT_FULL_WIDTH : _e, _f = _a.disableTruncate, disableTruncate = _f === void 0 ? FILE_PICKER_DEFAULT_DISABLE_TRUNCATE : _f, _g = _a.multiple, multiple = _g === void 0 ? FILE_PICKER_DEFAULT_MULTIPLE : _g, placeholder = _a.placeholder, clearText = _a.clearText, _h = _a.renderRight, renderRight = _h === void 0 ? AttachmentIcon : _h, renderValueProp = _a.renderValue, onChangeProp = _a.onChange, onClearProp = _a.onClear, inputRefProp = _a.inputRef, fileList = _a.fileList, accept = _a.accept, id = _a.id, name = _a.name, label = _a.label, autoFocus = _a.autoFocus, error = _a.error, hint = _a.hint, renderLeft = _a.renderLeft, labelProps = _a.labelProps, inputProps = _a.inputProps, labelRef = _a.labelRef, className = _a.className, other = __rest(_a, ["size", "disabled", "required", "fullWidth", "disableTruncate", "multiple", "placeholder", "clearText", "renderRight", "renderValue", "onChange", "onClear", "inputRef", "fileList", "accept", "id", "name", "label", "autoFocus", "error", "hint", "renderLeft", "labelProps", "inputProps", "labelRef", "className"]);
-    var fieldRef = useRef(null);
-    var inputRef = useRef(null);
-    var clearRef = useRef(null);
+    }), _b = _a.size, size = _b === void 0 ? FILE_PICKER_DEFAULT_SIZE : _b, _c = _a.disabled, disabled = _c === void 0 ? FILE_PICKER_DEFAULT_DISABLED : _c, _d = _a.required, required = _d === void 0 ? FILE_PICKER_DEFAULT_REQUIRED : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? FILE_PICKER_DEFAULT_FULL_WIDTH : _e, _f = _a.disableTruncate, disableTruncate = _f === void 0 ? FILE_PICKER_DEFAULT_DISABLE_TRUNCATE : _f, _g = _a.multiple, multiple = _g === void 0 ? FILE_PICKER_DEFAULT_MULTIPLE : _g, placeholder = _a.placeholder, clearText = _a.clearText, _h = _a.renderRight, renderRight = _h === void 0 ? AttachmentIcon : _h, renderValueProp = _a.renderValue, onChangeProp = _a.onChange, onClearProp = _a.onClear, inputRef = _a.inputRef, fileList = _a.fileList, accept = _a.accept, id = _a.id, name = _a.name, label = _a.label, autoFocus = _a.autoFocus, error = _a.error, hint = _a.hint, renderLeft = _a.renderLeft, labelProps = _a.labelProps, inputProps = _a.inputProps, hintProps = _a.hintProps, labelRef = _a.labelRef, className = _a.className, other = __rest(_a, ["size", "disabled", "required", "fullWidth", "disableTruncate", "multiple", "placeholder", "clearText", "renderRight", "renderValue", "onChange", "onClear", "inputRef", "fileList", "accept", "id", "name", "label", "autoFocus", "error", "hint", "renderLeft", "labelProps", "inputProps", "hintProps", "labelRef", "className"]);
+    if (process.env.NODE_ENV !== 'production' && labelRef) {
+        deprecate('Свойство «labelRef» устарело. Для замены используйте «labelProps.ref».');
+    }
+    if (process.env.NODE_ENV !== 'production' && inputRef) {
+        deprecate('Свойство «inputRef» устарело. Для замены используйте «inputProps.ref».');
+    }
+    var inputInnerRef = useRef(null);
     var _j = __read(useState(false), 2), focused = _j[0], setFocused = _j[1];
+    var hasFiles = !!(fileList === null || fileList === void 0 ? void 0 : fileList.length);
     var handleFocus = function (e) {
         var _a;
         (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
@@ -34,8 +41,8 @@ export var FilePicker = forwardRef(function (inProps, ref) {
     };
     var onChange = function (e) {
         onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e);
-        if (inputRef.current) {
-            inputRef.current.value = '';
+        if (inputInnerRef.current) {
+            inputInnerRef.current.value = '';
         }
     };
     var onClear = function (e) {
@@ -52,25 +59,19 @@ export var FilePicker = forwardRef(function (inProps, ref) {
             ? renderValueProp(file)
             : FILE_PICKER_DEFAULT_VALUE_RENDERER(file, disableTruncate);
     };
-    return (React.createElement("div", __assign({}, other, { className: cnFilePicker('', {
-            hasLabel: !!label,
-            hasValue: !!(fileList === null || fileList === void 0 ? void 0 : fileList.length),
-            size: size,
-            error: error,
-            focused: focused,
-            disabled: disabled,
-            required: required,
-            fullWidth: fullWidth,
-        }, [className]), ref: useMultiRef([fieldRef, ref]) }),
+    return (React.createElement(FieldControl, __assign({ size: size, error: error, focused: focused, disabled: disabled, required: required, fullWidth: fullWidth, filled: hasFiles }, other, { className: cnFilePicker('', [className]), ref: ref }),
         React.createElement("label", { className: cnFilePicker('Body') },
-            React.createElement(FieldIcon, { className: cnFilePicker('RenderLeft'), icon: renderLeft, size: size }),
+            React.createElement(FieldIcon, { icon: renderLeft }),
             React.createElement("div", { className: cnFilePicker('FieldContainer') },
-                label && (React.createElement(FieldLabel, __assign({ filled: !!(fileList === null || fileList === void 0 ? void 0 : fileList.length), focused: focused, required: required, disabled: disabled, size: size }, labelProps, { className: cnFilePicker('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelRef }), label)),
-                React.createElement("input", __assign({ id: id, name: name, autoFocus: autoFocus, onFocus: handleFocus, onBlur: handleBlur, className: cnFilePicker('Input'), required: required, disabled: disabled, accept: accept, multiple: multiple }, inputProps, { onChange: onChange, onKeyDown: onKeyDown, ref: useMultiRef([inputRef, inputRefProp]), type: "file" })),
-                (fileList === null || fileList === void 0 ? void 0 : fileList.length) ? (React.createElement("span", { className: cnFilePicker('FileName') }, renderValue(fileList, disableTruncate))) : (React.createElement("span", { "aria-placeholder": placeholder, className: cnFilePicker('Placeholder') }, placeholder))),
-            !!(fileList === null || fileList === void 0 ? void 0 : fileList.length) && onClearProp && (React.createElement(IconButton, { tabIndex: -1, variant: "function", "aria-label": clearText, ref: clearRef, onClick: onClear, size: size, icon: CrossIcon })),
-            React.createElement(FieldIcon, { className: cnFilePicker('RenderRight'), icon: renderRight, size: size }),
-            React.createElement(Fieldset, { className: cnFilePicker('Fieldset') })),
-        React.createElement(FieldHint, { size: size, error: error, disabled: disabled }, hint)));
+                React.createElement(FieldLabel, __assign({}, labelProps, { ref: labelRef || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref), className: cnFilePicker('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]) }), label),
+                React.createElement("input", __assign({ id: id, name: name, accept: accept, multiple: multiple, onBlur: handleBlur, required: required, disabled: disabled, autoFocus: autoFocus, onFocus: handleFocus, className: cnFilePicker('Input') }, inputProps, { type: "file", onChange: onChange, onKeyDown: onKeyDown, ref: useMultiRef([inputRef || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref), inputInnerRef]) })),
+                hasFiles ? (React.createElement("span", { className: cnFilePicker('FileName') }, renderValue(fileList, disableTruncate))) : (React.createElement("span", { "aria-placeholder": placeholder, className: cnFilePicker('Placeholder') }, placeholder))),
+            React.createElement("div", { className: cnFilePicker('RenderRight') },
+                onClearProp && (React.createElement(IconButton, { size: size, tabIndex: -1, icon: CrossIcon, onClick: onClear, variant: "function", "aria-label": clearText, className: cnFilePicker('ClearButton', {
+                        visibility: hasFiles,
+                    }) })),
+                React.createElement(FieldIcon, { icon: renderRight })),
+            React.createElement(Fieldset, null)),
+        React.createElement(FieldHint, __assign({}, hintProps), hint)));
 });
 FilePicker.displayName = 'FilePicker';