@skbkontur/react-ui 6.0.4 → 6.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (78) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/components/ComboBox/ComboBox.d.ts +2 -0
  3. package/components/ComboBox/ComboBox.js.map +1 -1
  4. package/components/Dropdown/Dropdown.d.ts +2 -0
  5. package/components/Dropdown/Dropdown.js +1 -0
  6. package/components/Dropdown/Dropdown.js.map +1 -1
  7. package/components/DropdownMenu/DropdownMenu.d.ts +16 -15
  8. package/components/DropdownMenu/DropdownMenu.js +3 -1
  9. package/components/DropdownMenu/DropdownMenu.js.map +1 -1
  10. package/components/FileUploader/FileUploader.d.ts +28 -30
  11. package/components/FileUploader/FileUploader.js.map +1 -1
  12. package/components/FileUploader/FileUploader.styles.d.ts +0 -1
  13. package/components/FileUploader/FileUploader.styles.js +4 -4
  14. package/components/FileUploader/FileUploader.styles.js.map +1 -1
  15. package/components/FileUploader/FileUploaderControlProvider.d.ts +4 -0
  16. package/components/FileUploader/FileUploaderControlProvider.js.map +1 -1
  17. package/components/FileUploader/FileUploaderFile.d.ts +19 -11
  18. package/components/FileUploader/FileUploaderFile.js +1 -1
  19. package/components/FileUploader/FileUploaderFile.js.map +1 -1
  20. package/components/Group/Group.d.ts +2 -4
  21. package/components/Group/Group.js +1 -3
  22. package/components/Group/Group.js.map +1 -1
  23. package/components/MenuFooter/MenuFooter.d.ts +4 -8
  24. package/components/MenuFooter/MenuFooter.js +1 -5
  25. package/components/MenuFooter/MenuFooter.js.map +1 -1
  26. package/components/MenuHeader/MenuHeader.d.ts +4 -8
  27. package/components/MenuHeader/MenuHeader.js +1 -5
  28. package/components/MenuHeader/MenuHeader.js.map +1 -1
  29. package/components/MenuItem/MenuItem.d.ts +11 -13
  30. package/components/MenuItem/MenuItem.js +1 -3
  31. package/components/MenuItem/MenuItem.js.map +1 -1
  32. package/components/MenuSeparator/MenuSeparator.d.ts +1 -3
  33. package/components/MenuSeparator/MenuSeparator.js +1 -3
  34. package/components/MenuSeparator/MenuSeparator.js.map +1 -1
  35. package/components/Modal/ModalFooter.d.ts +1 -1
  36. package/components/Modal/ModalFooter.js.map +1 -1
  37. package/components/ResponsiveLayout/ResponsiveLayout.d.ts +2 -2
  38. package/components/ResponsiveLayout/ResponsiveLayout.js +1 -1
  39. package/components/ResponsiveLayout/ResponsiveLayout.js.map +1 -1
  40. package/components/ScrollContainer/ScrollBar.d.ts +4 -4
  41. package/components/ScrollContainer/ScrollBar.js.map +1 -1
  42. package/components/ScrollContainer/ScrollContainer.d.ts +17 -12
  43. package/components/ScrollContainer/ScrollContainer.js +6 -1
  44. package/components/ScrollContainer/ScrollContainer.js.map +1 -1
  45. package/components/Select/Select.d.ts +2 -0
  46. package/components/Select/Select.js +2 -2
  47. package/components/Select/Select.js.map +1 -1
  48. package/components/SidePage/SidePage.d.ts +19 -20
  49. package/components/SidePage/SidePage.js +5 -6
  50. package/components/SidePage/SidePage.js.map +1 -1
  51. package/components/SidePage/SidePageBody.d.ts +1 -1
  52. package/components/SidePage/SidePageBody.js +1 -1
  53. package/components/SidePage/SidePageBody.js.map +1 -1
  54. package/components/SidePage/SidePageContainer.d.ts +1 -1
  55. package/components/SidePage/SidePageContainer.js +1 -1
  56. package/components/SidePage/SidePageContainer.js.map +1 -1
  57. package/components/SidePage/SidePageFooter.d.ts +4 -4
  58. package/components/SidePage/SidePageFooter.js +1 -1
  59. package/components/SidePage/SidePageFooter.js.map +1 -1
  60. package/components/SidePage/SidePageHeader.d.ts +5 -4
  61. package/components/SidePage/SidePageHeader.js +1 -1
  62. package/components/SidePage/SidePageHeader.js.map +1 -1
  63. package/components/Sticky/Sticky.d.ts +8 -4
  64. package/components/Sticky/Sticky.js +5 -1
  65. package/components/Sticky/Sticky.js.map +1 -1
  66. package/components/TooltipMenu/TooltipMenu.d.ts +13 -19
  67. package/components/TooltipMenu/TooltipMenu.js +2 -8
  68. package/components/TooltipMenu/TooltipMenu.js.map +1 -1
  69. package/internal/CustomComboBox/ComboBoxMenu.d.ts +1 -0
  70. package/internal/CustomComboBox/ComboBoxMenu.js +2 -2
  71. package/internal/CustomComboBox/ComboBoxMenu.js.map +1 -1
  72. package/internal/CustomComboBox/ComboBoxView.d.ts +1 -0
  73. package/internal/CustomComboBox/ComboBoxView.js +2 -2
  74. package/internal/CustomComboBox/ComboBoxView.js.map +1 -1
  75. package/internal/CustomComboBox/CustomComboBox.d.ts +1 -0
  76. package/internal/CustomComboBox/CustomComboBox.js +1 -0
  77. package/internal/CustomComboBox/CustomComboBox.js.map +1 -1
  78. package/package.json +3 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,28 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [6.0.6](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@6.0.5...@skbkontur/react-ui@6.0.6) (2026-05-19)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **ComboBox, Select, Dropdown:** add `preventIconsOffset` prop ([2ff25d3](https://github.com/skbkontur/retail-ui/commit/2ff25d3d19f2886715f65718db095cc2ed641f07))
12
+
13
+
14
+
15
+
16
+
17
+ ## [6.0.5](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@6.0.4...@skbkontur/react-ui@6.0.5) (2026-05-13)
18
+
19
+
20
+ ### Bug Fixes
21
+
22
+ * **FileUploader:** restore drag and drop animation ([c9c411e](https://github.com/skbkontur/retail-ui/commit/c9c411eb27f8f34772c3e2fd54411bae87c63462))
23
+
24
+
25
+
26
+
27
+
6
28
  ## [6.0.4](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@6.0.3...@skbkontur/react-ui@6.0.4) (2026-05-07)
7
29
 
8
30
 
@@ -133,6 +133,8 @@ export interface ComboBoxProps<T> extends Pick<AriaAttributes, 'aria-describedby
133
133
  viewMode?: ComboBoxViewMode;
134
134
  /** Максимальное количество отображаемых строк, если для поля добавлен проп многострочного режима — `"multiline"` или `"multiline-editing"`. */
135
135
  maxRows?: number;
136
+ /** Отключает выравнивание текста пунктов списка относительно иконок в других пунктах. */
137
+ preventIconsOffset?: boolean;
136
138
  }
137
139
  export interface ComboBoxItem {
138
140
  value: string;
@@ -1 +1 @@
1
- {"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../../../components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes, HTMLAttributes } from 'react';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/types.js';\nimport { CustomComboBox } from '../../internal/CustomComboBox/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode//rootNodeDecorator.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport type { InputIconType, ShowClearIcon } from '../Input/Input.js';\nimport type { MaskedInputOnBeforePasteValue, MaskedInputProps } from '../MaskedInput/MaskedInput.js';\nimport type { MenuItemState } from '../MenuItem/MenuItem.js';\n\nexport type ComboBoxViewMode = 'singleline' | 'multiline' | 'multiline-editing';\n\nexport interface ComboBoxProps<T>\n extends\n Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>,\n Pick<HTMLAttributes<HTMLElement>, 'id'>,\n Partial<Pick<MaskedInputProps, 'mask' | 'maskChar' | 'formatChars'>>,\n CommonProps {\n /** Показывает иконку очистки значения в заполненном поле.\n * @default never */\n showClearIcon?: ShowClearIcon;\n\n /** Ввыравнивание текста в поле. */\n align?: 'left' | 'center' | 'right';\n\n /** Вызывает функцию поиска `getItems` при фокусе и очистке поля ввода. */\n searchOnFocus?: boolean;\n\n /** Отображает справа иконку в виде стрелки. */\n drawArrow?: boolean;\n\n /** Устанавливает фокус на комбобоксе после окончания загрузки страницы. */\n autoFocus?: boolean;\n\n /** Убирает обводку поля. */\n borderless?: boolean;\n\n /** По умолчанию выпадающий список рендерится через [паттерн Portal](https://react.dev/reference/react-dom/createPortal). Проп отключает использование Portal и список рендерится как обычный блок с абсолютным позиционированием внутри компонента. */\n disablePortal?: boolean;\n\n /** Поле становится недоступно для редактирования. */\n disabled?: boolean;\n\n /** Меняет визуальное отображение поля на состояние «ошибка». */\n error?: boolean;\n\n /** Добавляет иконку слева.\n При использовании `ReactNode` применяются дефолтные стили для иконки.\n При использовании `() => ReactNode` применяются только стили для позиционирования. */\n leftIcon?: InputIconType;\n\n /** Добавляет иконку справа.\n При использовании `ReactNode` применяются дефолтные стили для иконки.\n При использовании `() => ReactNode` применяются только стили для позиционирования. */\n rightIcon?: InputIconType;\n\n /** Задаёт функцию поиска элементов, которая должна возвращать Promise с массивом значений.\n * По умолчанию ожидаются объекты с типом `{ value: string, label: string }`.\n * Элементы могут быть любого типа. В этом случае необходимо определить свойства `itemToId`, `renderValue`, `renderItem`, `valueToString`. */\n getItems: (query: string) => Promise<Array<ComboBoxExtendedItem<T>>>;\n\n /** Сравнивает полученные результаты с `value`. */\n itemToId?: (item: T) => string | number;\n\n /** Mаксимальная длина значения, которое пользователь может ввести в поле. */\n maxLength?: number;\n\n /** Расположение выпадающего списка — над или под полем.\n */\n menuPos?: 'top' | 'bottom';\n\n /** Выравнивание выпадающего меню. */\n menuAlign?: 'left' | 'right';\n\n /** Событие потери комбобоксом фокуса. */\n onBlur?: () => void;\n\n /** Событие изменения значения (`value`) в поле. */\n onValueChange?: (value: T) => void;\n\n /** Событие получения комбобоксом фокуса. */\n onFocus?: () => void;\n\n /** Событие, которое вызывается при изменении текста в поле ввода, если результатом функции будет строка, то она станет следующим состоянием полем ввода.\n *\n * **Не рекомендуется менять значение, передаваемое в проп `value`, внутри этой функции. Используйте для этих целей `onValueChange` или `onUnexpectedInput`. Иначе возможно неожиданное поведение компонента.**\n */\n onInputValueChange?: (value: string) => Nullable<string> | void;\n\n /** Событие обработки ввода строки в поле ввода и последующей потерей фокуса компонентом.\n * Функция срабатывает с аргументом поля строки.\n * Если при потере фокуса в выпадающем списке будет только один элемент и результат `valueToString` с этим элементом будет совпадать со значение в текстовом поле, то сработает `onValueChange` со значением данного элемента.\n * Сама функция также может вернуть значение, не равное undefined, с которым будет вызван `onValueChange`. Если возвращаемое значение будет равно null, то сработает очистка текущего значения поля, а в режиме редактирования токен будет удален. */\n onUnexpectedInput?: (value: string) => void | null | T;\n\n /** Текст, который отображается если не введено никакое значение. */\n placeholder?: string;\n\n /** Отрисовывает элементы результата поиска.\n * Не применяется, если элемент является функцией или React-элементом.\n * @default item => item.label\n * @param {T} item - элемент из результата поиска.\n * @param {MenuItemState} state? - состояние элемента.\n * @returns {React.ReactNode} React-элемент. */\n renderItem?: (item: T, state?: MenuItemState) => React.ReactNode;\n\n /** Устанавливает компонент, заменяющий собой обёртку элементов результата поиска.\n * По умолчанию все элементы результата поиска оборачиваются в тег <button />.\n * @example\n * itemWrapper={(item) => {\n * if (item.value === 3) {\n * return (props) => {\n * return <a {...props} />\n * }\n * }\n * }}\n */\n itemWrapper?: (item: T) => React.ComponentType;\n\n /** Отображает сообщение о пустом результате поиска. При `renderAddButton` не работает. */\n renderNotFound?: () => React.ReactNode;\n\n /** Отображает сообщение об общем количестве элементов.\n * @param {number} found - количество элементов по результатам поиска. Учитывает только компонент MenuItem. Им \"оборачиваются\" элементы, возвращаемые `getItems()`.\n * @param {number} total - количество всех элементов. */\n renderTotalCount?: (found: number, total: number) => React.ReactNode;\n\n /** Отображает выбранное значение.\n * @default item => item.label */\n renderValue?: (item: T) => React.ReactNode;\n\n /** Отрисовывает кнопку добавления в выпадающем списке. */\n renderAddButton?: (query?: string) => React.ReactNode;\n\n /** Определяет общее количество элементов. Необходим для работы renderTotalCount. */\n totalCount?: number;\n\n /** Устанавливает выбранное в комбобоксе значение. Тип `value` совпадает с типом элементов в массиве, возвращаемом в `getItems`. */\n value?: Nullable<T>;\n\n /** Возвращает строковое представление `value`. Необходимо при фокусировке. */\n valueToString?: (item: T) => string;\n\n /** Размер комбобокса. */\n size?: SizeProp;\n\n /** Меняет визуальное отображение поля на состояние «предупреждение». */\n warning?: boolean;\n\n /** Ширина комбобокса. */\n width?: string | number;\n\n /** Максимальная высота выпадающего списка. */\n maxMenuHeight?: number | string;\n\n /** Событие наведения мышкой (событие `onmouseenter`). Смотрите разницу с `onMouseOver` в [документации](https://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave) */\n onMouseEnter?: (e: React.MouseEvent) => void;\n\n /** Событие наведения мышкой (событие `onmouseover`). */\n onMouseOver?: (e: React.MouseEvent) => void;\n\n /** Событие ухода мышки с объекта (событие `onmouseleave`). */\n onMouseLeave?: (e: React.MouseEvent) => void;\n\n /** Событие нажатия кнопки на клавиатуре. */\n onInputKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;\n\n /** Задаёт типы вводимых данных. */\n inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];\n\n /** Событие вставки значения в поле с маской. */\n onBeforePasteInMask?: MaskedInputOnBeforePasteValue;\n\n /** Режим отображения комбобокса:\n * - `\"singleline\"` — однострочное поле;\n * - `\"multiline\"` — многострочное поле;\n * - `\"multiline-editing\"` — поле становится многострочным только при редактировании.\n *\n * Многострочные режимы не работают, если указан проп `mask`. В таком случае будет отображаться однострочное поле.\n * @default singleline */\n viewMode?: ComboBoxViewMode;\n\n /** Максимальное количество отображаемых строк, если для поля добавлен проп многострочного режима — `\"multiline\"` или `\"multiline-editing\"`. */\n maxRows?: number;\n}\n\nexport interface ComboBoxItem {\n value: string;\n label: string;\n}\n\nexport type ComboBoxExtendedItem<T> = T | (() => React.ReactElement<T>) | React.ReactElement<T>;\n\ntype DefaultProps<T> = Required<\n Pick<\n ComboBoxProps<T>,\n | 'itemToId'\n | 'valueToString'\n | 'renderValue'\n | 'renderItem'\n | 'menuAlign'\n | 'searchOnFocus'\n | 'drawArrow'\n | 'showClearIcon'\n | 'viewMode'\n >\n>;\n\n/**\n * Комбобокс — поле ввода с выпадающим списком подсказок, из которых пользователь может выбрать нужное. Открыть выпадающий список можно ещё до начала ввода значения, нажав на поле. */\n@rootNode\nexport class ComboBox<T = ComboBoxItem> extends React.Component<ComboBoxProps<T>> {\n public static __KONTUR_REACT_UI__ = 'ComboBox';\n public static displayName = 'ComboBox';\n\n public static defaultProps: DefaultProps<any> = {\n itemToId: (item: ComboBoxItem) => item.value,\n valueToString: (item: ComboBoxItem) => item.label,\n renderValue: (item: ComboBoxItem) => item.label,\n renderItem: (item: ComboBoxItem) => item.label,\n menuAlign: 'left',\n searchOnFocus: true,\n drawArrow: true,\n showClearIcon: 'never',\n viewMode: 'singleline',\n };\n\n private getProps = createPropsGetter(ComboBox.defaultProps);\n\n private comboboxElement: Nullable<CustomComboBox<T>> = null;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n /** Программно устанавливает фокус на комбобокс.\n * @public\n */\n public focus(opts?: { withoutOpenDropdown?: boolean }): void {\n if (this.comboboxElement) {\n this.comboboxElement.focus(opts);\n }\n }\n\n /** Программно снимает фокус с комбобокса.\n * @public\n */\n public blur(): void {\n if (this.comboboxElement) {\n this.comboboxElement.blur();\n }\n }\n\n /** Открывает список значений и запускает поиск.\n *\n * По умолчанию для поиска используется введенное в поле значение или результат `valueToString(value)`.\n *\n * @public\n * @param {string} [query] Текст поиска.`\n */\n public search(query?: string): void {\n if (this.comboboxElement) {\n this.comboboxElement.search(query);\n }\n }\n\n /** Отменяет текущий поиск — останавливает фильтрацию и очищает результаты поиска.\n * @public\n */\n public cancelSearch(): void {\n if (this.comboboxElement) {\n this.comboboxElement.cancelSearch();\n }\n }\n\n /** Открывает выпадающий список.\n * @public\n */\n public open(): void {\n if (this.comboboxElement) {\n this.comboboxElement.open();\n }\n }\n\n /** Закрывает выпадающий список.\n * @public\n */\n public close(): void {\n if (this.comboboxElement) {\n this.comboboxElement.close();\n }\n }\n\n /**\n * Переводит фокус в поле, если ещё не в фокусе, и выделяет весь текст в нём.\n * @public\n */\n public selectInputText(): void {\n if (this.comboboxElement) {\n this.comboboxElement.selectInputText();\n }\n }\n\n /**\n * Сбрасывает введённое пользователем значение без изменения `value`.\n * @public\n */\n public reset(): void {\n if (this.comboboxElement) {\n this.comboboxElement.reset();\n }\n }\n\n public render(): React.JSX.Element {\n return <CustomComboBox {...this.getProps()} size={this.props.size} ref={this.customComboBoxRef} />;\n }\n\n private customComboBoxRef = (element: Nullable<CustomComboBox<T>>) => {\n this.setRootNode(element);\n this.comboboxElement = element;\n };\n}\n"]}
1
+ {"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../../../components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes, HTMLAttributes } from 'react';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/types.js';\nimport { CustomComboBox } from '../../internal/CustomComboBox/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode//rootNodeDecorator.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport type { InputIconType, ShowClearIcon } from '../Input/Input.js';\nimport type { MaskedInputOnBeforePasteValue, MaskedInputProps } from '../MaskedInput/MaskedInput.js';\nimport type { MenuItemState } from '../MenuItem/MenuItem.js';\n\nexport type ComboBoxViewMode = 'singleline' | 'multiline' | 'multiline-editing';\n\nexport interface ComboBoxProps<T>\n extends\n Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>,\n Pick<HTMLAttributes<HTMLElement>, 'id'>,\n Partial<Pick<MaskedInputProps, 'mask' | 'maskChar' | 'formatChars'>>,\n CommonProps {\n /** Показывает иконку очистки значения в заполненном поле.\n * @default never */\n showClearIcon?: ShowClearIcon;\n\n /** Ввыравнивание текста в поле. */\n align?: 'left' | 'center' | 'right';\n\n /** Вызывает функцию поиска `getItems` при фокусе и очистке поля ввода. */\n searchOnFocus?: boolean;\n\n /** Отображает справа иконку в виде стрелки. */\n drawArrow?: boolean;\n\n /** Устанавливает фокус на комбобоксе после окончания загрузки страницы. */\n autoFocus?: boolean;\n\n /** Убирает обводку поля. */\n borderless?: boolean;\n\n /** По умолчанию выпадающий список рендерится через [паттерн Portal](https://react.dev/reference/react-dom/createPortal). Проп отключает использование Portal и список рендерится как обычный блок с абсолютным позиционированием внутри компонента. */\n disablePortal?: boolean;\n\n /** Поле становится недоступно для редактирования. */\n disabled?: boolean;\n\n /** Меняет визуальное отображение поля на состояние «ошибка». */\n error?: boolean;\n\n /** Добавляет иконку слева.\n При использовании `ReactNode` применяются дефолтные стили для иконки.\n При использовании `() => ReactNode` применяются только стили для позиционирования. */\n leftIcon?: InputIconType;\n\n /** Добавляет иконку справа.\n При использовании `ReactNode` применяются дефолтные стили для иконки.\n При использовании `() => ReactNode` применяются только стили для позиционирования. */\n rightIcon?: InputIconType;\n\n /** Задаёт функцию поиска элементов, которая должна возвращать Promise с массивом значений.\n * По умолчанию ожидаются объекты с типом `{ value: string, label: string }`.\n * Элементы могут быть любого типа. В этом случае необходимо определить свойства `itemToId`, `renderValue`, `renderItem`, `valueToString`. */\n getItems: (query: string) => Promise<Array<ComboBoxExtendedItem<T>>>;\n\n /** Сравнивает полученные результаты с `value`. */\n itemToId?: (item: T) => string | number;\n\n /** Mаксимальная длина значения, которое пользователь может ввести в поле. */\n maxLength?: number;\n\n /** Расположение выпадающего списка — над или под полем.\n */\n menuPos?: 'top' | 'bottom';\n\n /** Выравнивание выпадающего меню. */\n menuAlign?: 'left' | 'right';\n\n /** Событие потери комбобоксом фокуса. */\n onBlur?: () => void;\n\n /** Событие изменения значения (`value`) в поле. */\n onValueChange?: (value: T) => void;\n\n /** Событие получения комбобоксом фокуса. */\n onFocus?: () => void;\n\n /** Событие, которое вызывается при изменении текста в поле ввода, если результатом функции будет строка, то она станет следующим состоянием полем ввода.\n *\n * **Не рекомендуется менять значение, передаваемое в проп `value`, внутри этой функции. Используйте для этих целей `onValueChange` или `onUnexpectedInput`. Иначе возможно неожиданное поведение компонента.**\n */\n onInputValueChange?: (value: string) => Nullable<string> | void;\n\n /** Событие обработки ввода строки в поле ввода и последующей потерей фокуса компонентом.\n * Функция срабатывает с аргументом поля строки.\n * Если при потере фокуса в выпадающем списке будет только один элемент и результат `valueToString` с этим элементом будет совпадать со значение в текстовом поле, то сработает `onValueChange` со значением данного элемента.\n * Сама функция также может вернуть значение, не равное undefined, с которым будет вызван `onValueChange`. Если возвращаемое значение будет равно null, то сработает очистка текущего значения поля, а в режиме редактирования токен будет удален. */\n onUnexpectedInput?: (value: string) => void | null | T;\n\n /** Текст, который отображается если не введено никакое значение. */\n placeholder?: string;\n\n /** Отрисовывает элементы результата поиска.\n * Не применяется, если элемент является функцией или React-элементом.\n * @default item => item.label\n * @param {T} item - элемент из результата поиска.\n * @param {MenuItemState} state? - состояние элемента.\n * @returns {React.ReactNode} React-элемент. */\n renderItem?: (item: T, state?: MenuItemState) => React.ReactNode;\n\n /** Устанавливает компонент, заменяющий собой обёртку элементов результата поиска.\n * По умолчанию все элементы результата поиска оборачиваются в тег <button />.\n * @example\n * itemWrapper={(item) => {\n * if (item.value === 3) {\n * return (props) => {\n * return <a {...props} />\n * }\n * }\n * }}\n */\n itemWrapper?: (item: T) => React.ComponentType;\n\n /** Отображает сообщение о пустом результате поиска. При `renderAddButton` не работает. */\n renderNotFound?: () => React.ReactNode;\n\n /** Отображает сообщение об общем количестве элементов.\n * @param {number} found - количество элементов по результатам поиска. Учитывает только компонент MenuItem. Им \"оборачиваются\" элементы, возвращаемые `getItems()`.\n * @param {number} total - количество всех элементов. */\n renderTotalCount?: (found: number, total: number) => React.ReactNode;\n\n /** Отображает выбранное значение.\n * @default item => item.label */\n renderValue?: (item: T) => React.ReactNode;\n\n /** Отрисовывает кнопку добавления в выпадающем списке. */\n renderAddButton?: (query?: string) => React.ReactNode;\n\n /** Определяет общее количество элементов. Необходим для работы renderTotalCount. */\n totalCount?: number;\n\n /** Устанавливает выбранное в комбобоксе значение. Тип `value` совпадает с типом элементов в массиве, возвращаемом в `getItems`. */\n value?: Nullable<T>;\n\n /** Возвращает строковое представление `value`. Необходимо при фокусировке. */\n valueToString?: (item: T) => string;\n\n /** Размер комбобокса. */\n size?: SizeProp;\n\n /** Меняет визуальное отображение поля на состояние «предупреждение». */\n warning?: boolean;\n\n /** Ширина комбобокса. */\n width?: string | number;\n\n /** Максимальная высота выпадающего списка. */\n maxMenuHeight?: number | string;\n\n /** Событие наведения мышкой (событие `onmouseenter`). Смотрите разницу с `onMouseOver` в [документации](https://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave) */\n onMouseEnter?: (e: React.MouseEvent) => void;\n\n /** Событие наведения мышкой (событие `onmouseover`). */\n onMouseOver?: (e: React.MouseEvent) => void;\n\n /** Событие ухода мышки с объекта (событие `onmouseleave`). */\n onMouseLeave?: (e: React.MouseEvent) => void;\n\n /** Событие нажатия кнопки на клавиатуре. */\n onInputKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;\n\n /** Задаёт типы вводимых данных. */\n inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];\n\n /** Событие вставки значения в поле с маской. */\n onBeforePasteInMask?: MaskedInputOnBeforePasteValue;\n\n /** Режим отображения комбобокса:\n * - `\"singleline\"` — однострочное поле;\n * - `\"multiline\"` — многострочное поле;\n * - `\"multiline-editing\"` — поле становится многострочным только при редактировании.\n *\n * Многострочные режимы не работают, если указан проп `mask`. В таком случае будет отображаться однострочное поле.\n * @default singleline */\n viewMode?: ComboBoxViewMode;\n\n /** Максимальное количество отображаемых строк, если для поля добавлен проп многострочного режима — `\"multiline\"` или `\"multiline-editing\"`. */\n maxRows?: number;\n\n /** Отключает выравнивание текста пунктов списка относительно иконок в других пунктах. */\n preventIconsOffset?: boolean;\n}\n\nexport interface ComboBoxItem {\n value: string;\n label: string;\n}\n\nexport type ComboBoxExtendedItem<T> = T | (() => React.ReactElement<T>) | React.ReactElement<T>;\n\ntype DefaultProps<T> = Required<\n Pick<\n ComboBoxProps<T>,\n | 'itemToId'\n | 'valueToString'\n | 'renderValue'\n | 'renderItem'\n | 'menuAlign'\n | 'searchOnFocus'\n | 'drawArrow'\n | 'showClearIcon'\n | 'viewMode'\n >\n>;\n\n/**\n * Комбобокс — поле ввода с выпадающим списком подсказок, из которых пользователь может выбрать нужное. Открыть выпадающий список можно ещё до начала ввода значения, нажав на поле. */\n@rootNode\nexport class ComboBox<T = ComboBoxItem> extends React.Component<ComboBoxProps<T>> {\n public static __KONTUR_REACT_UI__ = 'ComboBox';\n public static displayName = 'ComboBox';\n\n public static defaultProps: DefaultProps<any> = {\n itemToId: (item: ComboBoxItem) => item.value,\n valueToString: (item: ComboBoxItem) => item.label,\n renderValue: (item: ComboBoxItem) => item.label,\n renderItem: (item: ComboBoxItem) => item.label,\n menuAlign: 'left',\n searchOnFocus: true,\n drawArrow: true,\n showClearIcon: 'never',\n viewMode: 'singleline',\n };\n\n private getProps = createPropsGetter(ComboBox.defaultProps);\n\n private comboboxElement: Nullable<CustomComboBox<T>> = null;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n /** Программно устанавливает фокус на комбобокс.\n * @public\n */\n public focus(opts?: { withoutOpenDropdown?: boolean }): void {\n if (this.comboboxElement) {\n this.comboboxElement.focus(opts);\n }\n }\n\n /** Программно снимает фокус с комбобокса.\n * @public\n */\n public blur(): void {\n if (this.comboboxElement) {\n this.comboboxElement.blur();\n }\n }\n\n /** Открывает список значений и запускает поиск.\n *\n * По умолчанию для поиска используется введенное в поле значение или результат `valueToString(value)`.\n *\n * @public\n * @param {string} [query] Текст поиска.`\n */\n public search(query?: string): void {\n if (this.comboboxElement) {\n this.comboboxElement.search(query);\n }\n }\n\n /** Отменяет текущий поиск — останавливает фильтрацию и очищает результаты поиска.\n * @public\n */\n public cancelSearch(): void {\n if (this.comboboxElement) {\n this.comboboxElement.cancelSearch();\n }\n }\n\n /** Открывает выпадающий список.\n * @public\n */\n public open(): void {\n if (this.comboboxElement) {\n this.comboboxElement.open();\n }\n }\n\n /** Закрывает выпадающий список.\n * @public\n */\n public close(): void {\n if (this.comboboxElement) {\n this.comboboxElement.close();\n }\n }\n\n /**\n * Переводит фокус в поле, если ещё не в фокусе, и выделяет весь текст в нём.\n * @public\n */\n public selectInputText(): void {\n if (this.comboboxElement) {\n this.comboboxElement.selectInputText();\n }\n }\n\n /**\n * Сбрасывает введённое пользователем значение без изменения `value`.\n * @public\n */\n public reset(): void {\n if (this.comboboxElement) {\n this.comboboxElement.reset();\n }\n }\n\n public render(): React.JSX.Element {\n return <CustomComboBox {...this.getProps()} size={this.props.size} ref={this.customComboBoxRef} />;\n }\n\n private customComboBoxRef = (element: Nullable<CustomComboBox<T>>) => {\n this.setRootNode(element);\n this.comboboxElement = element;\n };\n}\n"]}
@@ -46,6 +46,8 @@ export interface DropdownProps extends Pick<AriaAttributes, 'aria-label' | 'aria
46
46
  onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void;
47
47
  /** Вызывается при движении курсора над элементом (событие `onmouseover`). */
48
48
  onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;
49
+ /** Отключает выравнивание текста пунктов меню относительно иконок в других пунктах. */
50
+ preventIconsOffset?: boolean;
49
51
  }
50
52
  export declare const DropdownDataTids: {
51
53
  readonly root: "Dropdown__root";
@@ -71,6 +71,7 @@ var PASS_PROPS = {
71
71
  menuPos: true,
72
72
  corners: true,
73
73
  id: true,
74
+ preventIconsOffset: true,
74
75
  'aria-describedby': true,
75
76
  'aria-label': true,
76
77
  };
@@ -1 +1 @@
1
- {"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes, HTMLAttributes, JSX } from 'react';\nimport React from 'react';\n\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport type { CommonProps } from '../../internal/CommonWrapper/types.js';\nimport { filterProps } from '../../lib/filterProps.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode//rootNodeDecorator.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport type { ButtonUse } from '../Button/index.js';\nimport { MenuHeader } from '../MenuHeader/index.js';\nimport { MenuItem } from '../MenuItem/index.js';\nimport { MenuSeparator } from '../MenuSeparator/index.js';\nimport { Select } from '../Select/index.js';\nimport { getDropdownTheme } from './getDropdownTheme.js';\n\nconst PASS_PROPS = {\n _renderButton: true,\n error: true,\n disabled: true,\n disablePortal: true,\n menuAlign: true,\n menuWidth: true,\n maxMenuHeight: true,\n use: true,\n size: true,\n warning: true,\n width: true,\n onOpen: true,\n onClose: true,\n onMouseEnter: true,\n onMouseLeave: true,\n onMouseOver: true,\n menuPos: true,\n corners: true,\n id: true,\n 'aria-describedby': true,\n 'aria-label': true,\n};\n\nexport interface DropdownProps\n extends\n Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>,\n Pick<HTMLAttributes<HTMLElement>, 'id'>,\n CommonProps {\n /** Текст кнопки-меню. */\n caption: React.ReactNode;\n\n /** Добавляет иконку слева от текста кнопки. */\n icon?: React.ReactElement;\n\n /** Ширина кнопки-меню. Если `menuWidth` не задан, такая же минимальная ширина применяется к раскрывающемуся меню. */\n width?: React.CSSProperties['width'];\n\n /** @ignore */\n _renderButton?: (params: any) => JSX.Element;\n\n /** Отключает использование портала. */\n disablePortal?: boolean;\n\n /** Блокирует компонент. */\n disabled?: boolean;\n\n /** Показывает состояние ошибки. */\n error?: boolean;\n\n /** Показывает состояние предупреждения. */\n warning?: boolean;\n\n /** Ограничивает максимальную высоту раскрывающегося меню. */\n maxMenuHeight?: number;\n\n /** Фиксирует положение раскрывающегося меню относительно кнопки-меню. */\n menuPos?: 'top' | 'bottom';\n\n /** Выравнивает раскрывающееся меню относительно кнопки-меню. */\n menuAlign?: 'left' | 'right';\n\n /** Ширина раскрывающегося меню. */\n menuWidth?: number | string;\n\n /** Размер кнопки-меню. */\n size?: SizeProp;\n\n /** Визуальный стиль кнопки-меню. */\n use?: ButtonUse;\n\n /** @ignore */\n corners?: React.CSSProperties;\n\n /** Вызывается при закрытии раскрывающегося меню. */\n onClose?: () => void;\n\n /** Вызывается при открытии раскрывающегося меню. */\n onOpen?: () => void;\n\n /** Вызывается при наведении курсора (событие `onmouseenter`). Разницу с `onMouseOver` смотрите в [документации](https://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave). */\n onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void;\n\n /** Вызывается при уходе курсора с элемента (событие `onmouseleave`). */\n onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void;\n\n /** Вызывается при движении курсора над элементом (событие `onmouseover`). */\n onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;\n}\n\ntype DropdownSelectType = Select<React.ReactNode, React.ReactNode>;\n\nexport const DropdownDataTids = {\n root: 'Dropdown__root',\n} as const;\n\n/**\n * Кнопка-меню `Dropdown` открывает раскрывающееся меню с командами, объединенными по смыслу.\n *\n * Используйте кнопку-меню:\n * * когда не хватает места для нескольких кнопок.\n * * когда названия действий очень длинные.\n * * когда действия редко используются или объединены по смыслу.\n *\n * Не используйте `Dropdown` для выбора значения из набора вариантов. В таком случае воспользуйтесь компонентом `Select`.\n */\n@rootNode\nexport class Dropdown extends React.Component<DropdownProps> {\n public static __KONTUR_REACT_UI__ = 'Dropdown';\n public static displayName = 'Dropdown';\n\n public static Header = MenuHeader;\n public static MenuItem = MenuItem;\n public static Separator = MenuSeparator;\n\n private _select: Nullable<DropdownSelectType>;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n private theme!: Theme;\n\n public render(): React.JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = getDropdownTheme(theme);\n return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public renderMain = (): React.JSX.Element => {\n const { caption, icon, ...rest } = this.props;\n const items = React.Children.map(this.props.children, (item) => item) || [];\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...rest}>\n <Select<React.ReactNode, React.ReactNode>\n data-tid={DropdownDataTids.root}\n ref={this._refSelect}\n {...filterProps(rest, PASS_PROPS)}\n value={caption}\n items={items}\n _icon={icon}\n renderValue={renderValue}\n />\n </CommonWrapper>\n );\n };\n\n /**\n * @public\n */\n public open(): void {\n if (this._select) {\n this._select.open();\n }\n }\n\n /**\n * @public\n */\n public close(): void {\n if (this._select) {\n this._select.close();\n }\n }\n\n private _refSelect = (element: DropdownSelectType): void => {\n this._select = element;\n };\n}\n\nfunction renderValue(value: any) {\n return value;\n}\n"]}
1
+ {"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes, HTMLAttributes, JSX } from 'react';\nimport React from 'react';\n\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport type { CommonProps } from '../../internal/CommonWrapper/types.js';\nimport { filterProps } from '../../lib/filterProps.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode//rootNodeDecorator.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport type { ButtonUse } from '../Button/index.js';\nimport { MenuHeader } from '../MenuHeader/index.js';\nimport { MenuItem } from '../MenuItem/index.js';\nimport { MenuSeparator } from '../MenuSeparator/index.js';\nimport { Select } from '../Select/index.js';\nimport { getDropdownTheme } from './getDropdownTheme.js';\n\nconst PASS_PROPS = {\n _renderButton: true,\n error: true,\n disabled: true,\n disablePortal: true,\n menuAlign: true,\n menuWidth: true,\n maxMenuHeight: true,\n use: true,\n size: true,\n warning: true,\n width: true,\n onOpen: true,\n onClose: true,\n onMouseEnter: true,\n onMouseLeave: true,\n onMouseOver: true,\n menuPos: true,\n corners: true,\n id: true,\n preventIconsOffset: true,\n 'aria-describedby': true,\n 'aria-label': true,\n};\n\nexport interface DropdownProps\n extends\n Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>,\n Pick<HTMLAttributes<HTMLElement>, 'id'>,\n CommonProps {\n /** Текст кнопки-меню. */\n caption: React.ReactNode;\n\n /** Добавляет иконку слева от текста кнопки. */\n icon?: React.ReactElement;\n\n /** Ширина кнопки-меню. Если `menuWidth` не задан, такая же минимальная ширина применяется к раскрывающемуся меню. */\n width?: React.CSSProperties['width'];\n\n /** @ignore */\n _renderButton?: (params: any) => JSX.Element;\n\n /** Отключает использование портала. */\n disablePortal?: boolean;\n\n /** Блокирует компонент. */\n disabled?: boolean;\n\n /** Показывает состояние ошибки. */\n error?: boolean;\n\n /** Показывает состояние предупреждения. */\n warning?: boolean;\n\n /** Ограничивает максимальную высоту раскрывающегося меню. */\n maxMenuHeight?: number;\n\n /** Фиксирует положение раскрывающегося меню относительно кнопки-меню. */\n menuPos?: 'top' | 'bottom';\n\n /** Выравнивает раскрывающееся меню относительно кнопки-меню. */\n menuAlign?: 'left' | 'right';\n\n /** Ширина раскрывающегося меню. */\n menuWidth?: number | string;\n\n /** Размер кнопки-меню. */\n size?: SizeProp;\n\n /** Визуальный стиль кнопки-меню. */\n use?: ButtonUse;\n\n /** @ignore */\n corners?: React.CSSProperties;\n\n /** Вызывается при закрытии раскрывающегося меню. */\n onClose?: () => void;\n\n /** Вызывается при открытии раскрывающегося меню. */\n onOpen?: () => void;\n\n /** Вызывается при наведении курсора (событие `onmouseenter`). Разницу с `onMouseOver` смотрите в [документации](https://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave). */\n onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void;\n\n /** Вызывается при уходе курсора с элемента (событие `onmouseleave`). */\n onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void;\n\n /** Вызывается при движении курсора над элементом (событие `onmouseover`). */\n onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;\n\n /** Отключает выравнивание текста пунктов меню относительно иконок в других пунктах. */\n preventIconsOffset?: boolean;\n}\n\ntype DropdownSelectType = Select<React.ReactNode, React.ReactNode>;\n\nexport const DropdownDataTids = {\n root: 'Dropdown__root',\n} as const;\n\n/**\n * Кнопка-меню `Dropdown` открывает раскрывающееся меню с командами, объединенными по смыслу.\n *\n * Используйте кнопку-меню:\n * * когда не хватает места для нескольких кнопок.\n * * когда названия действий очень длинные.\n * * когда действия редко используются или объединены по смыслу.\n *\n * Не используйте `Dropdown` для выбора значения из набора вариантов. В таком случае воспользуйтесь компонентом `Select`.\n */\n@rootNode\nexport class Dropdown extends React.Component<DropdownProps> {\n public static __KONTUR_REACT_UI__ = 'Dropdown';\n public static displayName = 'Dropdown';\n\n public static Header = MenuHeader;\n public static MenuItem = MenuItem;\n public static Separator = MenuSeparator;\n\n private _select: Nullable<DropdownSelectType>;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n private theme!: Theme;\n\n public render(): React.JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = getDropdownTheme(theme);\n return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public renderMain = (): React.JSX.Element => {\n const { caption, icon, ...rest } = this.props;\n const items = React.Children.map(this.props.children, (item) => item) || [];\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...rest}>\n <Select<React.ReactNode, React.ReactNode>\n data-tid={DropdownDataTids.root}\n ref={this._refSelect}\n {...filterProps(rest, PASS_PROPS)}\n value={caption}\n items={items}\n _icon={icon}\n renderValue={renderValue}\n />\n </CommonWrapper>\n );\n };\n\n /**\n * @public\n */\n public open(): void {\n if (this._select) {\n this._select.open();\n }\n }\n\n /**\n * @public\n */\n public close(): void {\n if (this._select) {\n this._select.close();\n }\n }\n\n private _refSelect = (element: DropdownSelectType): void => {\n this._select = element;\n };\n}\n\nfunction renderValue(value: any) {\n return value;\n}\n"]}
@@ -5,42 +5,41 @@ import type { PopupPositionsType } from '../../internal/Popup/index.js';
5
5
  import type { PopupMenuProps } from '../../internal/PopupMenu/index.js';
6
6
  import type { TGetRootNode } from '../../lib/rootNode//rootNodeDecorator.js';
7
7
  export interface DropdownMenuProps extends Pick<AriaAttributes, 'aria-label'>, Pick<HTMLAttributes<HTMLElement>, 'id'>, Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId' | 'preventIconsOffset'>, CommonProps {
8
- /** Максимальная высота меню */
8
+ /** Максимальная высота меню. */
9
9
  menuMaxHeight?: React.CSSProperties['maxWidth'];
10
- /** Ширина меню */
10
+ /** Ширина раскрывающегося меню. */
11
11
  menuWidth?: React.CSSProperties['width'];
12
- /** Ширина caption */
12
+ /** Ширина контейнера с `caption`. */
13
13
  width?: React.CSSProperties['width'];
14
14
  /**
15
- * Элемент или функция возвращающая элемент,
16
- * если передана, используется вместо `caption`,
17
- * в таком случае управлять открытием и закрытием меню
18
- * придется в этой функции
15
+ * Элемент или render-функция, по которым открывается меню.
16
+ *
17
+ * Если передать функцию, ей нужно самостоятельно вызвать `openMenu`, `closeMenu` или `toggleMenu`.
19
18
  */
20
19
  caption: PopupMenuProps['caption'];
21
20
  /**
22
- * Произвольный элемент, который будет отрендерен в шапке меню.
21
+ * Рендерит произвольный элемент в шапке меню.
23
22
  *
24
- * _Примечание_: контрол MenuHeader передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.
23
+ * _Примечание_: `MenuHeader` передается только в `children` меню-контролов. Не передавайте `MenuHeader` в `header`.
25
24
  */
26
25
  header?: React.ReactNode;
27
26
  /**
28
- * Произвольный элемент, который будет отрендерен в подвале меню.
27
+ * Рендерит произвольный элемент в подвале меню.
29
28
  *
30
- * Перед элементом переданным в `footer` будет отрендерен MenuSeparator.
29
+ * Перед элементом из `footer` автоматически добавляется `MenuSeparator`.
31
30
  */
32
31
  footer?: React.ReactNode;
33
32
  /**
34
- * Список позиций доступных для расположения выпадашки относительно `caption`.
33
+ * Список допустимых положений раскрывающегося меню относительно `caption`.
35
34
  *
36
- * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.
35
+ * Если меню выходит за пределы `viewport` во всех положениях, будет использовано первое положение из списка.
37
36
  *
38
37
  * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`
39
38
  * @default ['bottom left', 'bottom right', 'top left', 'top right']
40
39
  */
41
40
  positions?: PopupPositionsType[];
42
41
  /**
43
- * Не показывать анимацию
42
+ * Отключает анимацию раскрывающегося меню.
44
43
  */
45
44
  disableAnimations?: boolean;
46
45
  /** @ignore */
@@ -48,7 +47,9 @@ export interface DropdownMenuProps extends Pick<AriaAttributes, 'aria-label'>, P
48
47
  }
49
48
  type DefaultProps = Required<Pick<DropdownMenuProps, 'disableAnimations' | 'positions'>>;
50
49
  /**
51
- * Выпадающее меню `DropdownMenu` раскрывается по клику на переданный в `caption` элемент.
50
+ * Выпадающее меню `DropdownMenu`. Раскрывается по клику на переданный в `caption` элемент.
51
+ *
52
+ * Поддерживает настройку `header`, `footer`, позиций открытия `positions` и другие настройки внешнего вида.
52
53
  */
53
54
  export declare class DropdownMenu extends React.Component<DropdownMenuProps> {
54
55
  static __KONTUR_REACT_UI__: string;
@@ -40,7 +40,9 @@ import { rootNode } from '../../lib/rootNode/index.js';
40
40
  import { ThemeContext } from '../../lib/theming/ThemeContext.js';
41
41
  import { getDropdownMenuTheme } from './getDropdownMenuTheme.js';
42
42
  /**
43
- * Выпадающее меню `DropdownMenu` раскрывается по клику на переданный в `caption` элемент.
43
+ * Выпадающее меню `DropdownMenu`. Раскрывается по клику на переданный в `caption` элемент.
44
+ *
45
+ * Поддерживает настройку `header`, `footer`, позиций открытия `positions` и другие настройки внешнего вида.
44
46
  */
45
47
  var DropdownMenu = /** @class */ (function (_super) {
46
48
  __extends(DropdownMenu, _super);
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownMenu.js","sourceRoot":"","sources":["../../../components/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes, HTMLAttributes } from 'react';\nimport React from 'react';\nimport warning from 'warning';\n\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport type { CommonProps } from '../../internal/CommonWrapper/types.js';\nimport type { PopupPositionsType } from '../../internal/Popup/index.js';\nimport { PopupMenu } from '../../internal/PopupMenu/index.js';\nimport type { PopupMenuProps } from '../../internal/PopupMenu/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isTestEnv } from '../../lib/currentEnvironment.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode//rootNodeDecorator.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { getDropdownMenuTheme } from './getDropdownMenuTheme.js';\n\nexport interface DropdownMenuProps\n extends\n Pick<AriaAttributes, 'aria-label'>,\n Pick<HTMLAttributes<HTMLElement>, 'id'>,\n Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId' | 'preventIconsOffset'>,\n CommonProps {\n /** Максимальная высота меню */\n menuMaxHeight?: React.CSSProperties['maxWidth'];\n /** Ширина меню */\n menuWidth?: React.CSSProperties['width'];\n /** Ширина caption */\n width?: React.CSSProperties['width'];\n\n /**\n * Элемент или функция возвращающая элемент,\n * если передана, используется вместо `caption`,\n * в таком случае управлять открытием и закрытием меню\n * придется в этой функции\n */\n caption: PopupMenuProps['caption'];\n\n /**\n * Произвольный элемент, который будет отрендерен в шапке меню.\n *\n * _Примечание_: контрол MenuHeader передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.\n */\n header?: React.ReactNode;\n /**\n * Произвольный элемент, который будет отрендерен в подвале меню.\n *\n * Перед элементом переданным в `footer` будет отрендерен MenuSeparator.\n */\n footer?: React.ReactNode;\n /**\n * Список позиций доступных для расположения выпадашки относительно `caption`.\n *\n * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.\n *\n * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`\n * @default ['bottom left', 'bottom right', 'top left', 'top right']\n */\n positions?: PopupPositionsType[];\n\n /**\n * Не показывать анимацию\n */\n disableAnimations?: boolean;\n\n /** @ignore */\n corners?: React.CSSProperties;\n}\n\ntype DefaultProps = Required<Pick<DropdownMenuProps, 'disableAnimations' | 'positions'>>;\n\n/**\n * Выпадающее меню `DropdownMenu` раскрывается по клику на переданный в `caption` элемент.\n */\n@rootNode\nexport class DropdownMenu extends React.Component<DropdownMenuProps> {\n public static __KONTUR_REACT_UI__ = 'DropdownMenu';\n public static displayName = 'DropdownMenu';\n\n public static defaultProps: DefaultProps = {\n disableAnimations: isTestEnv,\n positions: ['bottom left', 'bottom right', 'top left', 'top right'],\n };\n\n private getProps = createPropsGetter(DropdownMenu.defaultProps);\n\n private popupMenu: Nullable<PopupMenu> = null;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n constructor(props: DropdownMenuProps) {\n super(props);\n\n if (!props.caption) {\n warning(false, 'Prop \"caption\" is required!!!');\n }\n }\n\n public render(): React.JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n return <ThemeContext.Provider value={getDropdownMenuTheme(theme)}>{this.renderMain()}</ThemeContext.Provider>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public renderMain(): React.JSX.Element | null {\n if (!this.props.caption) {\n return null;\n }\n const { positions, disableAnimations } = this.getProps();\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <PopupMenu\n id={this.props.id}\n aria-label={this.props['aria-label']}\n ref={this.refPopupMenu}\n caption={this.props.caption}\n menuMaxHeight={this.props.menuMaxHeight}\n menuWidth={this.props.menuWidth}\n preventIconsOffset={this.props.preventIconsOffset}\n popupHasPin={false}\n positions={positions}\n disableAnimations={disableAnimations}\n header={this.props.header}\n footer={this.props.footer}\n width={this.props.width}\n corners={this.props.corners}\n onClose={this.props.onClose}\n onOpen={this.props.onOpen}\n popupMenuId={this.props.popupMenuId}\n >\n {this.props.children}\n </PopupMenu>\n </CommonWrapper>\n );\n }\n\n public open = (): void => {\n if (this.popupMenu) {\n this.popupMenu.open();\n }\n };\n\n public close = (): void => {\n if (this.popupMenu) {\n this.popupMenu.close();\n }\n };\n\n private refPopupMenu = (ref: Nullable<PopupMenu>) => {\n this.popupMenu = ref;\n };\n}\n"]}
1
+ {"version":3,"file":"DropdownMenu.js","sourceRoot":"","sources":["../../../components/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes, HTMLAttributes } from 'react';\nimport React from 'react';\nimport warning from 'warning';\n\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport type { CommonProps } from '../../internal/CommonWrapper/types.js';\nimport type { PopupPositionsType } from '../../internal/Popup/index.js';\nimport { PopupMenu } from '../../internal/PopupMenu/index.js';\nimport type { PopupMenuProps } from '../../internal/PopupMenu/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isTestEnv } from '../../lib/currentEnvironment.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode//rootNodeDecorator.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { getDropdownMenuTheme } from './getDropdownMenuTheme.js';\n\nexport interface DropdownMenuProps\n extends\n Pick<AriaAttributes, 'aria-label'>,\n Pick<HTMLAttributes<HTMLElement>, 'id'>,\n Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId' | 'preventIconsOffset'>,\n CommonProps {\n /** Максимальная высота меню. */\n menuMaxHeight?: React.CSSProperties['maxWidth'];\n /** Ширина раскрывающегося меню. */\n menuWidth?: React.CSSProperties['width'];\n /** Ширина контейнера с `caption`. */\n width?: React.CSSProperties['width'];\n\n /**\n * Элемент или render-функция, по которым открывается меню.\n *\n * Если передать функцию, ей нужно самостоятельно вызвать `openMenu`, `closeMenu` или `toggleMenu`.\n */\n caption: PopupMenuProps['caption'];\n\n /**\n * Рендерит произвольный элемент в шапке меню.\n *\n * _Примечание_: `MenuHeader` передается только в `children` меню-контролов. Не передавайте `MenuHeader` в `header`.\n */\n header?: React.ReactNode;\n /**\n * Рендерит произвольный элемент в подвале меню.\n *\n * Перед элементом из `footer` автоматически добавляется `MenuSeparator`.\n */\n footer?: React.ReactNode;\n /**\n * Список допустимых положений раскрывающегося меню относительно `caption`.\n *\n * Если меню выходит за пределы `viewport` во всех положениях, будет использовано первое положение из списка.\n *\n * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`\n * @default ['bottom left', 'bottom right', 'top left', 'top right']\n */\n positions?: PopupPositionsType[];\n\n /**\n * Отключает анимацию раскрывающегося меню.\n */\n disableAnimations?: boolean;\n\n /** @ignore */\n corners?: React.CSSProperties;\n}\n\ntype DefaultProps = Required<Pick<DropdownMenuProps, 'disableAnimations' | 'positions'>>;\n\n/**\n * Выпадающее меню `DropdownMenu`. Раскрывается по клику на переданный в `caption` элемент.\n *\n * Поддерживает настройку `header`, `footer`, позиций открытия `positions` и другие настройки внешнего вида.\n */\n@rootNode\nexport class DropdownMenu extends React.Component<DropdownMenuProps> {\n public static __KONTUR_REACT_UI__ = 'DropdownMenu';\n public static displayName = 'DropdownMenu';\n\n public static defaultProps: DefaultProps = {\n disableAnimations: isTestEnv,\n positions: ['bottom left', 'bottom right', 'top left', 'top right'],\n };\n\n private getProps = createPropsGetter(DropdownMenu.defaultProps);\n\n private popupMenu: Nullable<PopupMenu> = null;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n constructor(props: DropdownMenuProps) {\n super(props);\n\n if (!props.caption) {\n warning(false, 'Prop \"caption\" is required!!!');\n }\n }\n\n public render(): React.JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n return <ThemeContext.Provider value={getDropdownMenuTheme(theme)}>{this.renderMain()}</ThemeContext.Provider>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public renderMain(): React.JSX.Element | null {\n if (!this.props.caption) {\n return null;\n }\n const { positions, disableAnimations } = this.getProps();\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <PopupMenu\n id={this.props.id}\n aria-label={this.props['aria-label']}\n ref={this.refPopupMenu}\n caption={this.props.caption}\n menuMaxHeight={this.props.menuMaxHeight}\n menuWidth={this.props.menuWidth}\n preventIconsOffset={this.props.preventIconsOffset}\n popupHasPin={false}\n positions={positions}\n disableAnimations={disableAnimations}\n header={this.props.header}\n footer={this.props.footer}\n width={this.props.width}\n corners={this.props.corners}\n onClose={this.props.onClose}\n onOpen={this.props.onOpen}\n popupMenuId={this.props.popupMenuId}\n >\n {this.props.children}\n </PopupMenu>\n </CommonWrapper>\n );\n }\n\n public open = (): void => {\n if (this.popupMenu) {\n this.popupMenu.open();\n }\n };\n\n public close = (): void => {\n if (this.popupMenu) {\n this.popupMenu.close();\n }\n };\n\n private refPopupMenu = (ref: Nullable<PopupMenu>) => {\n this.popupMenu = ref;\n };\n}\n"]}
@@ -14,78 +14,76 @@ interface _FileUploaderProps extends CommonProps, Omit<React.InputHTMLAttributes
14
14
  /** Состояние ошибки всего контрола */
15
15
  error?: boolean;
16
16
  /** Переводит контрол в состояние валидации "предупреждение" */
17
+ /** Состояние предупреждения всего контрола */
17
18
  warning?: boolean;
18
- /** Задает приоритетное расположение подсказки относительно контрола
19
+ /** Расположение тултипа с текстом валидации файла.
19
20
  * @default 'top left' */
20
21
  validationTooltipPosition?: ShortPopupPositionsType | PopupPositionsType;
21
- /** Использовать тултип для отображения валидации
22
+ /** Включает отображение текста валидации файла во всплывающей подсказке вместо строки рядом с именем.
22
23
  * @default false */
23
24
  withValidationTooltip?: boolean;
24
- /** Использовать иконку для ворнинга (восклицательный знак)
25
+ /** Включает отображение иконки предупреждения (восклицательный знак) при статусе предупреждения у файла.
25
26
  * @default false */
26
27
  withWarningIcon?: boolean;
27
- /** Задает длину компонента. */
28
+ /** Ширина контрола. */
28
29
  width?: React.CSSProperties['width'];
29
- /** Задаёт размер контрола.
30
+ /** Размер контрола и вложенных элементов.
30
31
  * @default small */
31
32
  size?: SizeProp;
32
- /** Скрывает отображение файлов.
33
+ /** Скрывает встроенный список файлов.
33
34
  * @default false */
34
35
  hideFiles?: boolean;
35
- /** Пользовательский текст для загрузки файла
36
- * @default 'Загрузить файл'
36
+ /** Текст ссылки выбора файла.
37
+ * @default "Выберите файл"
37
38
  */
38
39
  uploaderText?: string;
39
- /** Пользовательская иконка для загрузки файла
40
- * @default UploadIcon
40
+ /** Иконка в кнопке загрузки.
41
41
  */
42
42
  uploaderIcon?: React.ReactNode;
43
- /** Вид компонента
44
- * - `row` — строчный вид
45
- * - `tile` — плиточный вид
43
+ /** Режим отображения списка файлов: строка (`row`) или плитка (`tile`).
46
44
  * @default row
47
45
  */
48
46
  view?: FileUploaderView;
49
- /** Отображать ли саммари с детализацией ошибок. Работает с версией темы >= 5_5.
50
- * - `auto` — саммари отображается, если количество загруженных файлов >= validationSummaryStart
51
- * - `enabled` — всегда включено
52
- * - `disabled` — всегда отключено
47
+ /** Режим блока-саммари по ошибкам и предупреждениям:
48
+ * - `auto` — от порога `validationSummaryStart`,
49
+ * - `enabled` / `disabled` — всегда или никогда.
53
50
  * @default auto
54
51
  */
55
52
  validationSummary?: FileUploaderValidationSummary;
56
- /** Количество файлов, от которого показываем саммари (при validationSummary = `auto`)
53
+ /** Порог числа файлов для показа саммари при `validationSummary="auto"`.
57
54
  * @default 5 */
58
55
  validationSummaryStart?: number;
59
- /** Позиционирование области загрузки файла
56
+ /** Расположение кнопки загрузки относительно списка: в начале или в конце.
60
57
  * @default start */
61
58
  uploadButtonPosition?: FileUploaderUploadButtonPosition;
62
- /** Задает функцию, через которую отправляются файлы. Используется для отслеживания статуса загрузки файла.
63
- * @param {FileUploaderAttachedFile} file - файл, статус загрузки которого необходимо отследить. */
59
+ /** Включает асинхронный режим загрузки файлов.
60
+ * Отклонённый промис помечает файл(ы) ошибкой загрузки.
61
+ */
64
62
  request?: (file: FileUploaderAttachedFile) => Promise<void>;
65
- /** Задает функцию, которая вызывается при удачной попытке отправки через request. */
63
+ /** Колбэк после успешного завершения `request` для файла. */
66
64
  onRequestSuccess?: (fileId: string) => void;
67
- /** Задает функцию, которая вызывается при неудачной попытке отправки через request. */
65
+ /** Колбэк после ошибки `request` для файла. */
68
66
  onRequestError?: (fileId: string) => void;
69
- /** Определяет функцию валидации каждого файла. Срабатывает после выбора файлов и перед попыткой отправить в request.
70
- * Чтобы вывести валидацию ошибки, промис должен вернуть строку или объект с ошибкой.
71
- * @returns {Promise<Nullable<string | { message: string; status: FileUploaderFileStatus }>>} */
67
+ /** Проверка файла после выбора и до `request`: строка или `{ message, status }` ошибка/предупреждение. Пустой результат — файл проходит.
68
+ */
72
69
  validateBeforeUpload?: (file: FileUploaderAttachedFile) => Promise<Nullable<string | {
73
70
  message: string;
74
71
  status: FileUploaderFileStatus;
75
72
  }>>;
76
73
  /**
77
- * Задает функцию, которая позволяет кастомизировать файлы. Через нее можно вешать кастомные валидации на каждый файл.
74
+ * Задаёт метод отрисовки файлов.
78
75
  * @default (props: FileUploaderFileProps) => <FileUploaderFile {...props} />
79
- * @param {FileUploaderFileProps} props - пропсы компонента `FileUploaderFile`, смотри примеры использования в документации.
80
- * @returns {ReactNode} элемент, который отрисовывает контент файла.
81
76
  */
82
77
  renderFile?: (props: FileUploaderFileProps) => React.ReactNode;
83
78
  }
84
79
  export interface FileUploaderRef extends InstanceWithRootNode {
80
+ /** Устанавливает фокус на скрытом `input` выбора файла. */
85
81
  focus: () => void;
82
+ /** Снимает фокус с `input` выбора файла. */
86
83
  blur: () => void;
87
- /** Сбрасывает выбранные файлы */
84
+ /** Очищает список файлов и значения `input`. */
88
85
  reset: () => void;
86
+ /** Удаляет файл по id с вызовом `onRemove` и `onValueChange`. */
89
87
  removeFile: (fileId: string) => void;
90
88
  }
91
89
  export type FileUploader = FileUploaderRef;