@skbkontur/react-ui 6.0.5 → 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.
- package/CHANGELOG.md +11 -0
- package/components/ComboBox/ComboBox.d.ts +2 -0
- package/components/ComboBox/ComboBox.js.map +1 -1
- package/components/Dropdown/Dropdown.d.ts +2 -0
- package/components/Dropdown/Dropdown.js +1 -0
- package/components/Dropdown/Dropdown.js.map +1 -1
- package/components/DropdownMenu/DropdownMenu.d.ts +16 -15
- package/components/DropdownMenu/DropdownMenu.js +3 -1
- package/components/DropdownMenu/DropdownMenu.js.map +1 -1
- package/components/MenuFooter/MenuFooter.d.ts +4 -8
- package/components/MenuFooter/MenuFooter.js +1 -5
- package/components/MenuFooter/MenuFooter.js.map +1 -1
- package/components/MenuHeader/MenuHeader.d.ts +4 -8
- package/components/MenuHeader/MenuHeader.js +1 -5
- package/components/MenuHeader/MenuHeader.js.map +1 -1
- package/components/MenuItem/MenuItem.d.ts +11 -13
- package/components/MenuItem/MenuItem.js +1 -3
- package/components/MenuItem/MenuItem.js.map +1 -1
- package/components/MenuSeparator/MenuSeparator.d.ts +1 -3
- package/components/MenuSeparator/MenuSeparator.js +1 -3
- package/components/MenuSeparator/MenuSeparator.js.map +1 -1
- package/components/ResponsiveLayout/ResponsiveLayout.d.ts +2 -2
- package/components/ResponsiveLayout/ResponsiveLayout.js +1 -1
- package/components/ResponsiveLayout/ResponsiveLayout.js.map +1 -1
- package/components/ScrollContainer/ScrollBar.d.ts +4 -4
- package/components/ScrollContainer/ScrollBar.js.map +1 -1
- package/components/ScrollContainer/ScrollContainer.d.ts +17 -12
- package/components/ScrollContainer/ScrollContainer.js +6 -1
- package/components/ScrollContainer/ScrollContainer.js.map +1 -1
- package/components/Select/Select.d.ts +2 -0
- package/components/Select/Select.js +2 -2
- package/components/Select/Select.js.map +1 -1
- package/components/TooltipMenu/TooltipMenu.d.ts +13 -19
- package/components/TooltipMenu/TooltipMenu.js +2 -8
- package/components/TooltipMenu/TooltipMenu.js.map +1 -1
- package/internal/CustomComboBox/ComboBoxMenu.d.ts +1 -0
- package/internal/CustomComboBox/ComboBoxMenu.js +2 -2
- package/internal/CustomComboBox/ComboBoxMenu.js.map +1 -1
- package/internal/CustomComboBox/ComboBoxView.d.ts +1 -0
- package/internal/CustomComboBox/ComboBoxView.js +2 -2
- package/internal/CustomComboBox/ComboBoxView.js.map +1 -1
- package/internal/CustomComboBox/CustomComboBox.d.ts +1 -0
- package/internal/CustomComboBox/CustomComboBox.js +1 -0
- package/internal/CustomComboBox/CustomComboBox.js.map +1 -1
- package/package.json +3 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
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
|
+
|
|
6
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)
|
|
7
18
|
|
|
8
19
|
|
|
@@ -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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAgNvD;uLACuL;AAEvL;IAAgD,4BAAiC;IAAjF;;QAgBU,cAAQ,GAAG,iBAAiB,CAAC,UAAQ,CAAC,YAAY,CAAC,CAAC;QAEpD,qBAAe,GAAgC,IAAI,CAAC;QAsFpD,uBAAiB,GAAG,UAAC,OAAoC;YAC/D,KAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;YAC1B,KAAI,CAAC,eAAe,GAAG,OAAO,CAAC;QACjC,CAAC,CAAC;;IACJ,CAAC;iBA5GY,QAAQ;IAsBnB;;OAEG;IACI,wBAAK,GAAZ,UAAa,IAAwC;QACnD,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;IAED;;OAEG;IACI,uBAAI,GAAX;QACE,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC;IAED;;;;;;OAMG;IACI,yBAAM,GAAb,UAAc,KAAc;QAC1B,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;IAED;;OAEG;IACI,+BAAY,GAAnB;QACE,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE,CAAC;QACtC,CAAC;IACH,CAAC;IAED;;OAEG;IACI,uBAAI,GAAX;QACE,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC;IAED;;OAEG;IACI,wBAAK,GAAZ;QACE,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,CAAC;QAC/B,CAAC;IACH,CAAC;IAED;;;OAGG;IACI,kCAAe,GAAtB;QACE,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,CAAC,eAAe,CAAC,eAAe,EAAE,CAAC;QACzC,CAAC;IACH,CAAC;IAED;;;OAGG;IACI,wBAAK,GAAZ;QACE,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,CAAC;QAC/B,CAAC;IACH,CAAC;IAEM,yBAAM,GAAb;QACE,OAAO,oBAAC,cAAc,eAAK,IAAI,CAAC,QAAQ,EAAE,IAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,iBAAiB,IAAI,CAAC;IACrG,CAAC;;IArGa,4BAAmB,GAAG,UAAU,AAAb,CAAc;IACjC,oBAAW,GAAG,UAAU,AAAb,CAAc;IAEzB,qBAAY,GAAsB;QAC9C,QAAQ,EAAE,UAAC,IAAkB,IAAK,OAAA,IAAI,CAAC,KAAK,EAAV,CAAU;QAC5C,aAAa,EAAE,UAAC,IAAkB,IAAK,OAAA,IAAI,CAAC,KAAK,EAAV,CAAU;QACjD,WAAW,EAAE,UAAC,IAAkB,IAAK,OAAA,IAAI,CAAC,KAAK,EAAV,CAAU;QAC/C,UAAU,EAAE,UAAC,IAAkB,IAAK,OAAA,IAAI,CAAC,KAAK,EAAV,CAAU;QAC9C,SAAS,EAAE,MAAM;QACjB,aAAa,EAAE,IAAI;QACnB,SAAS,EAAE,IAAI;QACf,aAAa,EAAE,OAAO;QACtB,QAAQ,EAAE,YAAY;KACvB,AAVyB,CAUxB;IAdS,QAAQ;QADpB,QAAQ;OACI,QAAQ,CA4GpB;IAAD,eAAC;CAAA,AA5GD,CAAgD,KAAK,CAAC,SAAS,GA4G9D;SA5GY,QAAQ","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";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../components/Dropdown/Dropdown.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAEtE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAIjE,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,IAAM,UAAU,GAAG;IACjB,aAAa,EAAE,IAAI;IACnB,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,IAAI;IACnB,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,aAAa,EAAE,IAAI;IACnB,GAAG,EAAE,IAAI;IACT,IAAI,EAAE,IAAI;IACV,OAAO,EAAE,IAAI;IACb,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAI;IACZ,OAAO,EAAE,IAAI;IACb,YAAY,EAAE,IAAI;IAClB,YAAY,EAAE,IAAI;IAClB,WAAW,EAAE,IAAI;IACjB,OAAO,EAAE,IAAI;IACb,OAAO,EAAE,IAAI;IACb,EAAE,EAAE,IAAI;IACR,kBAAkB,EAAE,IAAI;IACxB,YAAY,EAAE,IAAI;CACnB,CAAC;
|
|
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
|
-
*
|
|
17
|
-
*
|
|
18
|
-
* придется в этой функции
|
|
15
|
+
* Элемент или render-функция, по которым открывается меню.
|
|
16
|
+
*
|
|
17
|
+
* Если передать функцию, ей нужно самостоятельно вызвать `openMenu`, `closeMenu` или `toggleMenu`.
|
|
19
18
|
*/
|
|
20
19
|
caption: PopupMenuProps['caption'];
|
|
21
20
|
/**
|
|
22
|
-
*
|
|
21
|
+
* Рендерит произвольный элемент в шапке меню.
|
|
23
22
|
*
|
|
24
|
-
* _Примечание_:
|
|
23
|
+
* _Примечание_: `MenuHeader` передается только в `children` меню-контролов. Не передавайте `MenuHeader` в `header`.
|
|
25
24
|
*/
|
|
26
25
|
header?: React.ReactNode;
|
|
27
26
|
/**
|
|
28
|
-
*
|
|
27
|
+
* Рендерит произвольный элемент в подвале меню.
|
|
29
28
|
*
|
|
30
|
-
* Перед элементом
|
|
29
|
+
* Перед элементом из `footer` автоматически добавляется `MenuSeparator`.
|
|
31
30
|
*/
|
|
32
31
|
footer?: React.ReactNode;
|
|
33
32
|
/**
|
|
34
|
-
*
|
|
33
|
+
* Список допустимых положений раскрывающегося меню относительно `caption`.
|
|
35
34
|
*
|
|
36
|
-
* Если
|
|
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
|
|
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
|
|
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,OAAO,MAAM,SAAS,CAAC;AAE9B,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAGtE,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAE9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAE5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;
|
|
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"]}
|
|
@@ -3,22 +3,18 @@ import React from 'react';
|
|
|
3
3
|
import type { CommonProps } from '../../internal/CommonWrapper/index.js';
|
|
4
4
|
import type { SizeProp } from '../../lib/types/props.js';
|
|
5
5
|
export interface MenuFooterProps extends CommonProps, Pick<HTMLAttributes<HTMLElement>, 'id'> {
|
|
6
|
-
/**
|
|
6
|
+
/** Размер надписи. */
|
|
7
|
+
size?: SizeProp;
|
|
8
|
+
/** Добавляет отступ слева для выравнивания текста по иконкам MenuItem */
|
|
7
9
|
_enableIconPadding?: boolean;
|
|
8
10
|
/** @ignore */
|
|
9
11
|
children: ReactNode;
|
|
10
|
-
/** Задает размер. */
|
|
11
|
-
size?: SizeProp;
|
|
12
12
|
}
|
|
13
13
|
export declare const MenuFooterDataTids: {
|
|
14
14
|
readonly root: "MenuFooter__root";
|
|
15
15
|
};
|
|
16
16
|
/**
|
|
17
|
-
* Футер меню `MenuFooter
|
|
18
|
-
*
|
|
19
|
-
* `MenuFooter`, в отличие от `MenuItem` нельзя затаргетить с клавиатуры.
|
|
20
|
-
*
|
|
21
|
-
* Сущности, в которых может быть использован `MenuFooter`: DropdownMenu, Kebab, TooltipMenu и Select.
|
|
17
|
+
* Футер меню `MenuFooter` — надпись в нижней части меню.
|
|
22
18
|
*/
|
|
23
19
|
declare const MenuFooter: import("../../lib/forwardRefAndName.js").ReactUIComponentWithRef<HTMLDivElement, MenuFooterProps> & Record<never, never>;
|
|
24
20
|
export { MenuFooter };
|
|
@@ -30,11 +30,7 @@ export var MenuFooterDataTids = {
|
|
|
30
30
|
root: 'MenuFooter__root',
|
|
31
31
|
};
|
|
32
32
|
/**
|
|
33
|
-
* Футер меню `MenuFooter
|
|
34
|
-
*
|
|
35
|
-
* `MenuFooter`, в отличие от `MenuItem` нельзя затаргетить с клавиатуры.
|
|
36
|
-
*
|
|
37
|
-
* Сущности, в которых может быть использован `MenuFooter`: DropdownMenu, Kebab, TooltipMenu и Select.
|
|
33
|
+
* Футер меню `MenuFooter` — надпись в нижней части меню.
|
|
38
34
|
*/
|
|
39
35
|
var MenuFooter = forwardRefAndName('MenuFooter', function MenuFooter(_a, ref) {
|
|
40
36
|
var _b;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuFooter.js","sourceRoot":"","sources":["../../../components/MenuFooter/MenuFooter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAanD,MAAM,CAAC,IAAM,kBAAkB,GAAG;IAChC,IAAI,EAAE,kBAAkB;CAChB,CAAC;AAEX
|
|
1
|
+
{"version":3,"file":"MenuFooter.js","sourceRoot":"","sources":["../../../components/MenuFooter/MenuFooter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAanD,MAAM,CAAC,IAAM,kBAAkB,GAAG;IAChC,IAAI,EAAE,kBAAkB;CAChB,CAAC;AAEX;;GAEG;AAEH,IAAM,UAAU,GAAG,iBAAiB,CAClC,YAAY,EACZ,SAAS,UAAU,CACjB,EAAsF,EACtF,GAA8B;;IAD5B,IAAA,EAAE,QAAA,EAAE,0BAA0B,EAA1B,kBAAkB,mBAAG,KAAK,KAAA,EAAE,QAAQ,cAAA,EAAE,YAAc,EAAd,IAAI,mBAAG,OAAO,KAAA,EAAK,IAAI,cAAnE,gDAAqE,CAAF;IAGnE,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAC/B,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAC5B,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,SAAS,oBAAoB;QAC3B,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,OAAO;gBACV,OAAO,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;YACjC,KAAK,QAAQ;gBACX,OAAO,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;YAClC,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;IACD,SAAS,+BAA+B;QACtC,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,OAAO;gBACV,OAAO,MAAM,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;YAC5C,KAAK,QAAQ;gBACX,OAAO,MAAM,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC;YAC7C,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,MAAM,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;IAED,OAAO,CACL,oBAAC,aAAa,eAAK,IAAI;QACrB,6BACE,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAAG,cACE,kBAAkB,CAAC,IAAI,EACjC,SAAS,EAAE,EAAE,CAAC,oBAAoB,EAAE;gBAClC,GAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,IAAI;gBAC1B,GAAC,+BAA+B,EAAE,IAAG,kBAAkB;oBACvD,IAED,QAAQ,CACL,CACQ,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAED,UAAkB,CAAC,eAAe,GAAG,IAAI,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,MAAM,CAAC,IAAM,YAAY,GAAG,UAAC,KAAsB;IACjD,OAAO,KAAK,CAAC,cAAc,CAAkB,KAAK,CAAC;QACjD,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,iBAAiB,CAAC;QACrE,CAAC,CAAC,KAAK,CAAC;AACZ,CAAC,CAAC","sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport React, { useContext } from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { getStyles } from './MenuFooter.styles.js';\n\nexport interface MenuFooterProps extends CommonProps, Pick<HTMLAttributes<HTMLElement>, 'id'> {\n /** Размер надписи. */\n size?: SizeProp;\n\n /** Добавляет отступ слева для выравнивания текста по иконкам MenuItem */\n _enableIconPadding?: boolean;\n\n /** @ignore */\n children: ReactNode;\n}\n\nexport const MenuFooterDataTids = {\n root: 'MenuFooter__root',\n} as const;\n\n/**\n * Футер меню `MenuFooter` — надпись в нижней части меню.\n */\n\nconst MenuFooter = forwardRefAndName(\n 'MenuFooter',\n function MenuFooter(\n { id, _enableIconPadding = false, children, size = 'small', ...rest }: MenuFooterProps,\n ref: React.Ref<HTMLDivElement>,\n ) {\n const theme = useContext(ThemeContext);\n const { cx } = useEmotion();\n const styles = useStyles(getStyles);\n function getRootSizeClassName() {\n switch (size) {\n case 'large':\n return styles.rootLarge(theme);\n case 'medium':\n return styles.rootMedium(theme);\n case 'small':\n default:\n return styles.rootSmall(theme);\n }\n }\n function getWithLeftPaddingSizeClassName() {\n switch (size) {\n case 'large':\n return styles.withLeftPaddingSmall(theme);\n case 'medium':\n return styles.withLeftPaddingMedium(theme);\n case 'small':\n default:\n return styles.withLeftPaddingSmall(theme);\n }\n }\n\n return (\n <CommonWrapper {...rest}>\n <div\n id={id}\n ref={ref}\n data-tid={MenuFooterDataTids.root}\n className={cx(getRootSizeClassName(), {\n [styles.root(theme)]: true,\n [getWithLeftPaddingSizeClassName()]: _enableIconPadding,\n })}\n >\n {children}\n </div>\n </CommonWrapper>\n );\n },\n);\n\n(MenuFooter as any).__MENU_FOOTER__ = true;\n\nexport { MenuFooter };\n\nexport const isMenuFooter = (child: React.ReactNode): child is React.ReactElement<MenuFooterProps> => {\n return React.isValidElement<MenuFooterProps>(child)\n ? Object.prototype.hasOwnProperty.call(child.type, '__MENU_FOOTER__')\n : false;\n};\n"]}
|
|
@@ -3,22 +3,18 @@ import React from 'react';
|
|
|
3
3
|
import type { CommonProps } from '../../internal/CommonWrapper/index.js';
|
|
4
4
|
import type { SizeProp } from '../../lib/types/props.js';
|
|
5
5
|
export interface MenuHeaderProps extends CommonProps, Pick<HTMLAttributes<HTMLElement>, 'id'> {
|
|
6
|
-
/**
|
|
6
|
+
/** Размер надписи. */
|
|
7
|
+
size?: SizeProp;
|
|
8
|
+
/** Добавляет отступ слева для выравнивания текста по иконкам MenuItem */
|
|
7
9
|
_enableIconPadding?: boolean;
|
|
8
10
|
/** @ignore */
|
|
9
11
|
children: ReactNode;
|
|
10
|
-
/** Задает размер. */
|
|
11
|
-
size?: SizeProp;
|
|
12
12
|
}
|
|
13
13
|
export declare const MenuHeaderDataTids: {
|
|
14
14
|
readonly root: "MenuHeader__root";
|
|
15
15
|
};
|
|
16
16
|
/**
|
|
17
|
-
* Заголовок меню `MenuHeader` используется для того, чтобы
|
|
18
|
-
*
|
|
19
|
-
* `MenuHeader`, в отличие от `MenuItem` нельзя затаргетить с клавиатуры.
|
|
20
|
-
*
|
|
21
|
-
* Сущности в которых может быть использован `MenuHeader`: DropdownMenu, Kebab, TooltipMenu и Select.
|
|
17
|
+
* Заголовок меню `MenuHeader` используется для того, чтобы разграничивать элементы меню на категории.
|
|
22
18
|
*/
|
|
23
19
|
declare const MenuHeader: import("../../lib/forwardRefAndName.js").ReactUIComponentWithRef<HTMLDivElement, MenuHeaderProps> & Record<never, never>;
|
|
24
20
|
export { MenuHeader };
|
|
@@ -31,11 +31,7 @@ export var MenuHeaderDataTids = {
|
|
|
31
31
|
root: 'MenuHeader__root',
|
|
32
32
|
};
|
|
33
33
|
/**
|
|
34
|
-
* Заголовок меню `MenuHeader` используется для того, чтобы
|
|
35
|
-
*
|
|
36
|
-
* `MenuHeader`, в отличие от `MenuItem` нельзя затаргетить с клавиатуры.
|
|
37
|
-
*
|
|
38
|
-
* Сущности в которых может быть использован `MenuHeader`: DropdownMenu, Kebab, TooltipMenu и Select.
|
|
34
|
+
* Заголовок меню `MenuHeader` используется для того, чтобы разграничивать элементы меню на категории.
|
|
39
35
|
*/
|
|
40
36
|
var MenuHeader = forwardRefAndName('MenuHeader', function MenuHeader(_a, ref) {
|
|
41
37
|
var _b;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuHeader.js","sourceRoot":"","sources":["../../../components/MenuHeader/MenuHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAanD,MAAM,CAAC,IAAM,kBAAkB,GAAG;IAChC,IAAI,EAAE,kBAAkB;CAChB,CAAC;AAEX
|
|
1
|
+
{"version":3,"file":"MenuHeader.js","sourceRoot":"","sources":["../../../components/MenuHeader/MenuHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAanD,MAAM,CAAC,IAAM,kBAAkB,GAAG;IAChC,IAAI,EAAE,kBAAkB;CAChB,CAAC;AAEX;;GAEG;AAEH,IAAM,UAAU,GAAG,iBAAiB,CAClC,YAAY,EACZ,SAAS,UAAU,CACjB,EAAsF,EACtF,GAA8B;;IAD5B,IAAA,EAAE,QAAA,EAAE,0BAA0B,EAA1B,kBAAkB,mBAAG,KAAK,KAAA,EAAE,QAAQ,cAAA,EAAE,YAAc,EAAd,IAAI,mBAAG,OAAO,KAAA,EAAK,IAAI,cAAnE,gDAAqE,CAAF;IAGnE,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAC/B,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAC5B,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,IAAM,WAAW,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAE5C,SAAS,oBAAoB;QAC3B,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,OAAO;gBACV,OAAO,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;YACjC,KAAK,QAAQ;gBACX,OAAO,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;YAClC,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;IACD,SAAS,+BAA+B;QACtC,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,OAAO;gBACV,OAAO,MAAM,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;YAC5C,KAAK,QAAQ;gBACX,OAAO,MAAM,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC;YAC7C,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,MAAM,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;IAED,OAAO,CACL,oBAAC,aAAa,eAAK,IAAI;QACrB,6BACE,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,EAAE,cACI,kBAAkB,CAAC,IAAI,EACjC,SAAS,EAAE,EAAE,CAAC,oBAAoB,EAAE;gBAClC,GAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,IAAI;gBAC1B,GAAC,+BAA+B,EAAE,IAAG,WAAW,CAAC,iBAAiB,IAAI,kBAAkB;oBACxF,IAED,QAAQ,CACL,CACQ,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAED,UAAkB,CAAC,eAAe,GAAG,IAAI,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,MAAM,CAAC,IAAM,YAAY,GAAG,UAAC,KAAsB;IACjD,OAAO,KAAK,CAAC,cAAc,CAAkB,KAAK,CAAC;QACjD,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,iBAAiB,CAAC;QACrE,CAAC,CAAC,KAAK,CAAC;AACZ,CAAC,CAAC","sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport React, { useContext } from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { MenuContext } from '../../internal/Menu/MenuContext.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { getStyles } from './MenuHeader.styles.js';\n\nexport interface MenuHeaderProps extends CommonProps, Pick<HTMLAttributes<HTMLElement>, 'id'> {\n /** Размер надписи. */\n size?: SizeProp;\n\n /** Добавляет отступ слева для выравнивания текста по иконкам MenuItem */\n _enableIconPadding?: boolean;\n\n /** @ignore */\n children: ReactNode;\n}\n\nexport const MenuHeaderDataTids = {\n root: 'MenuHeader__root',\n} as const;\n\n/**\n * Заголовок меню `MenuHeader` используется для того, чтобы разграничивать элементы меню на категории.\n */\n\nconst MenuHeader = forwardRefAndName(\n 'MenuHeader',\n function MenuHeader(\n { id, _enableIconPadding = false, children, size = 'small', ...rest }: MenuHeaderProps,\n ref: React.Ref<HTMLDivElement>,\n ) {\n const theme = useContext(ThemeContext);\n const { cx } = useEmotion();\n const styles = useStyles(getStyles);\n const menuContext = useContext(MenuContext);\n\n function getRootSizeClassName() {\n switch (size) {\n case 'large':\n return styles.rootLarge(theme);\n case 'medium':\n return styles.rootMedium(theme);\n case 'small':\n default:\n return styles.rootSmall(theme);\n }\n }\n function getWithLeftPaddingSizeClassName() {\n switch (size) {\n case 'large':\n return styles.withLeftPaddingSmall(theme);\n case 'medium':\n return styles.withLeftPaddingMedium(theme);\n case 'small':\n default:\n return styles.withLeftPaddingSmall(theme);\n }\n }\n\n return (\n <CommonWrapper {...rest}>\n <div\n ref={ref}\n id={id}\n data-tid={MenuHeaderDataTids.root}\n className={cx(getRootSizeClassName(), {\n [styles.root(theme)]: true,\n [getWithLeftPaddingSizeClassName()]: menuContext.enableIconPadding || _enableIconPadding,\n })}\n >\n {children}\n </div>\n </CommonWrapper>\n );\n },\n);\n\n(MenuHeader as any).__MENU_HEADER__ = true;\n\nexport { MenuHeader };\n\nexport const isMenuHeader = (child: React.ReactNode): child is React.ReactElement<MenuHeaderProps> => {\n return React.isValidElement<MenuHeaderProps>(child)\n ? Object.prototype.hasOwnProperty.call(child.type, '__MENU_HEADER__')\n : false;\n};\n"]}
|
|
@@ -9,24 +9,18 @@ export interface MenuItemProps extends Pick<AriaAttributes, 'aria-describedby' |
|
|
|
9
9
|
/** Добавляет отступ иконке.
|
|
10
10
|
* @ignore */
|
|
11
11
|
_enableIconPadding?: boolean;
|
|
12
|
-
/**
|
|
12
|
+
/** Описание пункта меню. */
|
|
13
13
|
comment?: React.ReactNode;
|
|
14
|
-
/**
|
|
14
|
+
/** Блокирует пункт и перекрашивает в серый. */
|
|
15
15
|
disabled?: boolean;
|
|
16
|
-
/** Добавляет иконку
|
|
16
|
+
/** Добавляет иконку слева от текста. */
|
|
17
17
|
icon?: React.ReactElement;
|
|
18
|
-
/**
|
|
18
|
+
/** Размер кнопки. */
|
|
19
19
|
size?: SizeProp;
|
|
20
20
|
/** @ignore */
|
|
21
21
|
loose?: boolean;
|
|
22
22
|
/** @ignore */
|
|
23
23
|
state?: MenuItemState;
|
|
24
|
-
/** Задает функцию, которая вызывается при клике. */
|
|
25
|
-
onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;
|
|
26
|
-
/** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). */
|
|
27
|
-
onMouseEnter?: React.MouseEventHandler;
|
|
28
|
-
/** Задает функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). */
|
|
29
|
-
onMouseLeave?: React.MouseEventHandler;
|
|
30
24
|
/** @ignore */
|
|
31
25
|
children?: React.ReactNode | ((state: MenuItemState) => React.ReactNode);
|
|
32
26
|
/** Задает HTML-атрибут `target`. */
|
|
@@ -46,6 +40,12 @@ export interface MenuItemProps extends Pick<AriaAttributes, 'aria-describedby' |
|
|
|
46
40
|
isMobile?: boolean;
|
|
47
41
|
/** @ignore */
|
|
48
42
|
scrollIntoView?: boolean;
|
|
43
|
+
/**`HTML`-событие `onclick`. */
|
|
44
|
+
onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;
|
|
45
|
+
/**`HTML`-событие `onmouseenter`. */
|
|
46
|
+
onMouseEnter?: React.MouseEventHandler;
|
|
47
|
+
/**`HTML`-событие `onmouseleave`. */
|
|
48
|
+
onMouseLeave?: React.MouseEventHandler;
|
|
49
49
|
}
|
|
50
50
|
export declare const MenuItemDataTids: {
|
|
51
51
|
readonly root: "MenuItem__root";
|
|
@@ -53,9 +53,7 @@ export declare const MenuItemDataTids: {
|
|
|
53
53
|
readonly comment: "MenuItem__comment";
|
|
54
54
|
};
|
|
55
55
|
/**
|
|
56
|
-
* `MenuItem`
|
|
57
|
-
*
|
|
58
|
-
* Сущности в которых может быть использован `MenuItem`: DropdownMenu, Kebab, TooltipMenu и Select.
|
|
56
|
+
* Пункт меню `MenuItem` — интерактивный элемент выполнения действий или навигации.
|
|
59
57
|
*/
|
|
60
58
|
export declare class MenuItem extends React.Component<MenuItemProps> {
|
|
61
59
|
static __KONTUR_REACT_UI__: string;
|
|
@@ -59,9 +59,7 @@ export var MenuItemDataTids = {
|
|
|
59
59
|
comment: 'MenuItem__comment',
|
|
60
60
|
};
|
|
61
61
|
/**
|
|
62
|
-
* `MenuItem`
|
|
63
|
-
*
|
|
64
|
-
* Сущности в которых может быть использован `MenuItem`: DropdownMenu, Kebab, TooltipMenu и Select.
|
|
62
|
+
* Пункт меню `MenuItem` — интерактивный элемент выполнения действий или навигации.
|
|
65
63
|
*/
|
|
66
64
|
var MenuItem = /** @class */ (function (_super) {
|
|
67
65
|
__extends(MenuItem, _super);
|