diff --git a/packages/react/src/components/SortingMenu/SortingMenu.tsx b/packages/react/src/components/SortingMenu/SortingMenu.tsx
index 95309a5e5..661d82298 100644
--- a/packages/react/src/components/SortingMenu/SortingMenu.tsx
+++ b/packages/react/src/components/SortingMenu/SortingMenu.tsx
@@ -12,11 +12,13 @@ import Popover from '@mui/material/Popover';
import { IconSortAscendingLineW200, IconSortDescendingLineW200 } from '../../icons';
import { Button } from '../Button';
import { Divider } from '../Divider';
+import { InformationIcon } from '../InformationIcon';
import { Kbd } from '../Kbd';
import { Link } from '../Link';
import { ListItemText } from '../ListItem';
import { MenuItem } from '../MenuItem';
import { Switch } from '../Switch';
+import { Tooltip } from '../Tooltip';
const isMacintosh = () => {
return navigator.userAgent.indexOf('Macintosh') > 0;
@@ -47,6 +49,8 @@ export const SortingMenu = memo(function SortingMenu(inProps: SortingMenuProps)
labelSortOrder,
labelSortTooltip,
labelMultisortTitle,
+ labelMultisortTooltip,
+ labelMultisortTooltipMacintosh,
labelMultisortLMB,
labelMultisortMobileOn,
labelMultisortMobileOff,
@@ -282,6 +286,12 @@ export const SortingMenu = memo(function SortingMenu(inProps: SortingMenuProps)
+
{labelMultisortLMB}
{labelMultisortTitle}
+
+
+
>
)}
diff --git a/packages/react/src/components/SortingMenu/SortingMenu.types.ts b/packages/react/src/components/SortingMenu/SortingMenu.types.ts
index 2cda8d9f9..175ec6c50 100644
--- a/packages/react/src/components/SortingMenu/SortingMenu.types.ts
+++ b/packages/react/src/components/SortingMenu/SortingMenu.types.ts
@@ -41,6 +41,10 @@ export type SortingMenuProps = {
labelSortTooltip?: string;
/** Text for the switch label. */
labelMultisortTitle?: string;
+ /** Text for the multisort tooltip. */
+ labelMultisortTooltip?: string;
+ /** Text for the multisort tooltip on macintosh. */
+ labelMultisortTooltipMacintosh?: string;
/** Text for the left mouse button. */
labelMultisortLMB?: string;
/** Text for the switch label. */
diff --git a/packages/react/src/components/locale/index.ts b/packages/react/src/components/locale/index.ts
index 1357d6104..2e4a8de8e 100644
--- a/packages/react/src/components/locale/index.ts
+++ b/packages/react/src/components/locale/index.ts
@@ -136,6 +136,8 @@ export interface Localization {
| 'labelSortOrder'
| 'labelSortTooltip'
| 'labelMultisortTitle'
+ | 'labelMultisortTooltip'
+ | 'labelMultisortTooltipMacintosh'
| 'labelMultisortLMB'
| 'labelMultisortMobileOn'
| 'labelMultisortMobileOff'
@@ -354,6 +356,10 @@ export const en: Localization = {
labelSortOrder: 'The sort order',
labelSortTooltip: 'Sort by properties',
labelMultisortTitle: 'Multisort',
+ labelMultisortTooltip:
+ 'Turn on the switch or hold down the "Ctrl" key and select multiple properties to sort by multiple criteria.',
+ labelMultisortTooltipMacintosh:
+ 'Turn on the switch or hold down the "⌘" key and select multiple properties to sort by multiple criteria.',
labelMultisortLMB: 'LMB',
labelMultisortMobileOn: 'Multisort enabled',
labelMultisortMobileOff: 'Hold to multisort',
@@ -578,6 +584,10 @@ export const ru: Localization = {
labelSortOrder: 'Порядок сортировки',
labelSortTooltip: 'Сортировка по свойствам',
labelMultisortTitle: 'Мультисортировка',
+ labelMultisortTooltip:
+ 'Включите переключатель или, удерживая клавишу "Ctrl", выберите несколько свойств для сортировки по нескольким критериям.',
+ labelMultisortTooltipMacintosh:
+ 'Включите переключатель или, удерживая клавишу "⌘", выберите несколько свойств для сортировки по нескольким критериям.',
labelMultisortLMB: 'ЛКМ',
labelMultisortMobileOn: 'Мультисортировка включена',
labelMultisortMobileOff: 'Удерживайте для мультисортировки',
diff --git a/packages/theme/lib/components/_sorting-menu.scss b/packages/theme/lib/components/_sorting-menu.scss
index b8e806b99..6953bf1a6 100644
--- a/packages/theme/lib/components/_sorting-menu.scss
+++ b/packages/theme/lib/components/_sorting-menu.scss
@@ -158,5 +158,9 @@
margin-top: 14px;
padding-left: 16px;
}
+
+ &__information-icon {
+ margin-left: 4px;
+ }
}
}