@skbkontur/react-ui 0.0.0-bcbd5e6112 → 0.0.0-c13bb5f4ca

package/cjs/components/DateRangePicker/DateRangePicker.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_Emotion","require","_Calendar","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","getStyles","exports","emotion","memoizeStyle","root","t","css","_taggedTemplateLiteralLoose2","default","textColorDefault","inputWrapperWidth","parseInt","calendarCellWidth","calendarPaddingX","inputWrapperWidthFull","inputVisuallyFocus","inputFocusShadow","calendarWrapper","pickerShadow","calendarWidthAuto","rangeCalendarDay","rangeCalendarDayEnd","rangeCalendarCellEndBg","calendarCellBorderRadius","CalendarDataTids","dayCell","rangeCalendarCellEndColor","rangeCalendarDayInHoveredPeriod","rangeCalendarCellBg","rangeCalendarDayHoverInPeriod","rangeCalendarCellHoverBg","buttonWrap","getFontSize","size","fontSizeLarge","fontSizeMedium","fontSizeSmall"],"sources":["DateRangePicker.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/types/create-instance';\n\nimport type { SizeProp } from '../../lib/types/props';\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\nimport { CalendarDataTids } from '../Calendar';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root(t: Theme) {\n      return emotion.css`\n        display: inline-flex;\n        align-items: center;\n        color: ${t.textColorDefault};\n\n        & > * {\n          flex: 1 1 50%;\n        }\n      `;\n    },\n    inputWrapperWidth(t: Theme) {\n      return emotion.css`\n        min-width: ${parseInt(t.calendarCellWidth) * 7 + parseInt(t.calendarPaddingX) * 2}px;\n      `;\n    },\n    inputWrapperWidthFull() {\n      return emotion.css`\n        width: 100%;\n      `;\n    },\n    inputVisuallyFocus(t: Theme) {\n      return emotion.css`\n        box-shadow: ${t.inputFocusShadow};\n      `;\n    },\n    calendarWrapper(t: Theme) {\n      return emotion.css`\n        box-shadow: ${t.pickerShadow};\n        display: inline-block;\n        font-size: 0;\n        z-index: 1000;\n        touch-action: none;\n      `;\n    },\n    calendarWidthAuto() {\n      return emotion.css`\n        width: auto;\n      `;\n    },\n    rangeCalendarDay() {\n      return emotion.css`\n        width: 100%;\n        height: 100%;\n      `;\n    },\n    rangeCalendarDayEnd(t: Theme) {\n      return emotion.css`\n        position: relative;\n\n        &:before {\n          content: '';\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          background: ${t.rangeCalendarCellEndBg};\n          border-radius: ${t.calendarCellBorderRadius};\n        }\n\n        [data-tid=${CalendarDataTids.dayCell}] {\n          color: ${t.rangeCalendarCellEndColor};\n\n          @media (hover: hover) {\n            &:hover {\n              color: ${t.rangeCalendarCellEndColor};\n              background: none;\n            }\n          }\n        }\n      `;\n    },\n    rangeCalendarDayInHoveredPeriod(t: Theme) {\n      return emotion.css`\n        background: ${t.rangeCalendarCellBg};\n      `;\n    },\n    rangeCalendarDayHoverInPeriod(t: Theme) {\n      return emotion.css`\n        @media (hover: hover) {\n          &:hover [data-tid=${CalendarDataTids.dayCell}] {\n            background: ${t.rangeCalendarCellHoverBg};\n          }\n        }\n      `;\n    },\n    buttonWrap() {\n      return emotion.css`\n        display: flex;\n        margin: 8px;\n\n        > * {\n          flex-grow: 1;\n        }\n\n        > *:not(:first-child) {\n          margin-left: 8px;\n        }\n      `;\n    },\n  });\n\nexport function getFontSize(t: Theme, size?: SizeProp) {\n  switch (size) {\n    case 'large':\n      return t.fontSizeLarge;\n    case 'medium':\n      return t.fontSizeMedium;\n    case 'small':\n    default:\n      return t.fontSizeSmall;\n  }\n}\n"],"mappings":";;;AAGA,IAAAA,QAAA,GAAAC,OAAA;;AAEA,IAAAC,SAAA,GAAAD,OAAA,gBAA+C,IAAAE,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,iBAAA,EAAAC,iBAAA;;AAExC,IAAMC,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,SAAZA,SAASA,CAAIE,OAAgB;IACxC,IAAAC,qBAAY,EAAC;MACXC,IAAI,WAAAA,KAACC,CAAQ,EAAE;QACb,OAAOH,OAAO,CAACI,GAAG,CAAAjB,eAAA,KAAAA,eAAA,OAAAkB,4BAAA,CAAAC,OAAA;;;QAGPH,CAAC,CAACI,gBAAgB;;;;;;MAM/B,CAAC;MACDC,iBAAiB,WAAAA,kBAACL,CAAQ,EAAE;QAC1B,OAAOH,OAAO,CAACI,GAAG,CAAAhB,gBAAA,KAAAA,gBAAA,OAAAiB,4BAAA,CAAAC,OAAA;QACHG,QAAQ,CAACN,CAAC,CAACO,iBAAiB,CAAC,GAAG,CAAC,GAAGD,QAAQ,CAACN,CAAC,CAACQ,gBAAgB,CAAC,GAAG,CAAC;;MAErF,CAAC;MACDC,qBAAqB,WAAAA,sBAAA,EAAG;QACtB,OAAOZ,OAAO,CAACI,GAAG,CAAAf,gBAAA,KAAAA,gBAAA,OAAAgB,4BAAA,CAAAC,OAAA;;;MAGpB,CAAC;MACDO,kBAAkB,WAAAA,mBAACV,CAAQ,EAAE;QAC3B,OAAOH,OAAO,CAACI,GAAG,CAAAd,gBAAA,KAAAA,gBAAA,OAAAe,4BAAA,CAAAC,OAAA;QACFH,CAAC,CAACW,gBAAgB;;MAEpC,CAAC;MACDC,eAAe,WAAAA,gBAACZ,CAAQ,EAAE;QACxB,OAAOH,OAAO,CAACI,GAAG,CAAAb,gBAAA,KAAAA,gBAAA,OAAAc,4BAAA,CAAAC,OAAA;QACFH,CAAC,CAACa,YAAY;;;;;;MAMhC,CAAC;MACDC,iBAAiB,WAAAA,kBAAA,EAAG;QAClB,OAAOjB,OAAO,CAACI,GAAG,CAAAZ,gBAAA,KAAAA,gBAAA,OAAAa,4BAAA,CAAAC,OAAA;;;MAGpB,CAAC;MACDY,gBAAgB,WAAAA,iBAAA,EAAG;QACjB,OAAOlB,OAAO,CAACI,GAAG,CAAAX,gBAAA,KAAAA,gBAAA,OAAAY,4BAAA,CAAAC,OAAA;;;;MAIpB,CAAC;MACDa,mBAAmB,WAAAA,oBAAChB,CAAQ,EAAE;QAC5B,OAAOH,OAAO,CAACI,GAAG,CAAAV,gBAAA,KAAAA,gBAAA,OAAAW,4BAAA,CAAAC,OAAA;;;;;;;;;;QAUAH,CAAC,CAACiB,sBAAsB;QACrBjB,CAAC,CAACkB,wBAAwB;;;QAGjCC,0BAAgB,CAACC,OAAO;QACzBpB,CAAC,CAACqB,yBAAyB;;;;QAIvBrB,CAAC,CAACqB,yBAAyB;;;;;;MAM9C,CAAC;MACDC,+BAA+B,WAAAA,gCAACtB,CAAQ,EAAE;QACxC,OAAOH,OAAO,CAACI,GAAG,CAAAT,gBAAA,KAAAA,gBAAA,OAAAU,4BAAA,CAAAC,OAAA;QACFH,CAAC,CAACuB,mBAAmB;;MAEvC,CAAC;MACDC,6BAA6B,WAAAA,8BAACxB,CAAQ,EAAE;QACtC,OAAOH,OAAO,CAACI,GAAG,CAAAR,iBAAA,KAAAA,iBAAA,OAAAS,4BAAA,CAAAC,OAAA;;QAEMgB,0BAAgB,CAACC,OAAO;QAC5BpB,CAAC,CAACyB,wBAAwB;;;;MAIhD,CAAC;MACDC,UAAU,WAAAA,WAAA,EAAG;QACX,OAAO7B,OAAO,CAACI,GAAG,CAAAP,iBAAA,KAAAA,iBAAA,OAAAQ,4BAAA,CAAAC,OAAA;;;;;;;;;;;;MAYpB;IACF,CAAC,CAAC;;AAEG,SAASwB,WAAWA,CAAC3B,CAAQ,EAAE4B,IAAe,EAAE;EACrD,QAAQA,IAAI;IACV,KAAK,OAAO;MACV,OAAO5B,CAAC,CAAC6B,aAAa;IACxB,KAAK,QAAQ;MACX,OAAO7B,CAAC,CAAC8B,cAAc;IACzB,KAAK,OAAO;IACZ;MACE,OAAO9B,CAAC,CAAC+B,aAAa;EAC1B;AACF","ignoreList":[]}
+{"version":3,"names":["_Emotion","require","_Calendar","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","styles","exports","memoizeStyle","root","t","css","_taggedTemplateLiteralLoose2","default","textColorDefault","inputWrapperWidth","parseInt","calendarCellWidth","calendarPaddingX","inputWrapperWidthFull","inputVisuallyFocus","inputFocusShadow","calendarWrapper","pickerShadow","calendarWidthAuto","rangeCalendarDay","rangeCalendarDayEnd","rangeCalendarCellEndBg","calendarCellBorderRadius","CalendarDataTids","dayCell","rangeCalendarCellEndColor","rangeCalendarDayInHoveredPeriod","rangeCalendarCellBg","rangeCalendarDayHoverInPeriod","rangeCalendarCellHoverBg","buttonWrap","getFontSize","size","fontSizeLarge","fontSizeMedium","fontSizeSmall"],"sources":["DateRangePicker.styles.ts"],"sourcesContent":["import type { SizeProp } from '../../lib/types/props';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\nimport { CalendarDataTids } from '../Calendar';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      display: inline-flex;\n      align-items: center;\n      color: ${t.textColorDefault};\n\n      & > * {\n        flex: 1 1 50%;\n      }\n    `;\n  },\n  inputWrapperWidth(t: Theme) {\n    return css`\n      min-width: ${parseInt(t.calendarCellWidth) * 7 + parseInt(t.calendarPaddingX) * 2}px;\n    `;\n  },\n  inputWrapperWidthFull() {\n    return css`\n      width: 100%;\n    `;\n  },\n  inputVisuallyFocus(t: Theme) {\n    return css`\n      box-shadow: ${t.inputFocusShadow};\n    `;\n  },\n  calendarWrapper(t: Theme) {\n    return css`\n      box-shadow: ${t.pickerShadow};\n      display: inline-block;\n      font-size: 0;\n      z-index: 1000;\n      touch-action: none;\n    `;\n  },\n  calendarWidthAuto() {\n    return css`\n      width: auto;\n    `;\n  },\n  rangeCalendarDay() {\n    return css`\n      width: 100%;\n      height: 100%;\n    `;\n  },\n  rangeCalendarDayEnd(t: Theme) {\n    return css`\n      position: relative;\n\n      &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: ${t.rangeCalendarCellEndBg};\n        border-radius: ${t.calendarCellBorderRadius};\n      }\n\n      [data-tid=${CalendarDataTids.dayCell}] {\n        color: ${t.rangeCalendarCellEndColor};\n\n        @media (hover: hover) {\n          &:hover {\n            color: ${t.rangeCalendarCellEndColor};\n            background: none;\n          }\n        }\n      }\n    `;\n  },\n  rangeCalendarDayInHoveredPeriod(t: Theme) {\n    return css`\n      background: ${t.rangeCalendarCellBg};\n    `;\n  },\n  rangeCalendarDayHoverInPeriod(t: Theme) {\n    return css`\n      @media (hover: hover) {\n        &:hover [data-tid=${CalendarDataTids.dayCell}] {\n          background: ${t.rangeCalendarCellHoverBg};\n        }\n      }\n    `;\n  },\n  buttonWrap() {\n    return css`\n      display: flex;\n      margin: 8px;\n\n      > * {\n        flex-grow: 1;\n      }\n\n      > *:not(:first-child) {\n        margin-left: 8px;\n      }\n    `;\n  },\n});\n\nexport function getFontSize(t: Theme, size?: SizeProp) {\n  switch (size) {\n    case 'large':\n      return t.fontSizeLarge;\n    case 'medium':\n      return t.fontSizeMedium;\n    case 'small':\n    default:\n      return t.fontSizeSmall;\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/cjs/components/Dropdown/Dropdown.md

@@ -0,0 +1,45 @@
+### Базовый пример
+```jsx harmony
+import { Dropdown, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+<Dropdown caption="Click">
+  <MenuItem onClick={() => alert('Clack')}>Clack</MenuItem>
+  <MenuSeparator />
+  <MenuHeader>Here goes the header</MenuHeader>
+  <MenuItem onClick={() => alert('Pow')} comment="With comment.">
+    Pow
+  </MenuItem>
+</Dropdown>;
+```
+
+### Размер
+
+```jsx harmony
+import { Gapped, MenuItem, MenuSeparator, MenuHeader } from '@skbkontur/react-ui';
+
+<Gapped vertical>
+  <Dropdown caption="Маленький" size={'small'}>
+    <MenuItem onClick={() => alert('Clack')}>Clack</MenuItem>
+    <MenuSeparator />
+    <MenuHeader>Here goes the header</MenuHeader>
+    <MenuItem onClick={() => alert('Pow')} comment="With comment.">
+      Pow
+    </MenuItem>
+  </Dropdown>
+  <Dropdown caption="Средний" size={'medium'}>
+    <MenuItem onClick={() => alert('Clack')}>Clack</MenuItem>
+    <MenuSeparator />
+    <MenuHeader>Here goes the header</MenuHeader>
+    <MenuItem onClick={() => alert('Pow')} comment="With comment.">
+      Pow
+    </MenuItem>
+  </Dropdown>
+  <Dropdown caption="Большой" size={'large'}>
+    <MenuItem onClick={() => alert('Clack')}>Clack</MenuItem>
+    <MenuSeparator />
+    <MenuHeader>Here goes the header</MenuHeader>
+    <MenuItem onClick={() => alert('Pow')} comment="With comment.">
+      Pow
+    </MenuItem>
+  </Dropdown>
+</Gapped>
+```

package/cjs/components/DropdownMenu/DropdownMenu.md

@@ -0,0 +1,290 @@
+### Базовый пример меню
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<DropdownMenu caption={<Button use="primary">Открыть меню</Button>}>
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</DropdownMenu>;
+```
+
+В проп `caption` помимо компонента можно передать функцию, возвращающую компонент, с помощью которой можно управлять текущим состоянием меню.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<DropdownMenu caption={({ opened, openMenu, closeMenu, toggleMenu }) => {
+    return (
+      <>
+        <p>Сейчас меню { opened ? 'окрыто' : 'закрыто' }</p>
+        <Button onClick={toggleMenu}>Переключить меню</Button>
+        <Button onClick={openMenu}>Открыть меню</Button>
+        <Button onClick={closeMenu}>Закрыть меню</Button>
+      </>
+    )
+  }}>
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</DropdownMenu>;
+```
+
+### Ширина
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<DropdownMenu caption={<Button use="primary">Открыть меню c заданной шириной</Button>} menuWidth={350}>
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</DropdownMenu>;
+```
+
+### Максимальная высота
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<DropdownMenu caption={<Button use="primary">Открыть меню c заданной высотой</Button>} menuMaxHeight={150}>
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</DropdownMenu>;
+```
+
+### Выпадашка слева по центру
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<DropdownMenu positions={["left middle"]} caption={<Button use="primary">Открыть меню</Button>}>
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</DropdownMenu>;
+```
+
+### Меню c шапкой и подвалом
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  header={<p>Это шапка в виде обычного текста</p>}
+  footer={<Button>А это подвал в виде кнопки</Button>}
+  caption={<Button use="primary">Открыть меню</Button>}
+  >
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</DropdownMenu>;
+```
+
+### Иконка и автовыравнивание текста
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator, DropdownMenu } from '@skbkontur/react-ui';
+import { CheckAIcon16Regular } from '@skbkontur/icons/icons/CheckAIcon/CheckAIcon16Regular';;
+
+<DropdownMenu caption={<Button use="primary">Открыть меню</Button>}>
+  <MenuHeader>MenuHeader</MenuHeader>
+  <MenuItem icon={<CheckAIcon16Regular />}>MenuItem1</MenuItem>
+  <MenuItem icon={<CheckAIcon16Regular />}>MenuItem2</MenuItem>
+  <MenuItem>MenuItem3</MenuItem>
+</DropdownMenu>;
+```
+
+### Иконка и отключенное автовыравнивание текста
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator, DropdownMenu } from '@skbkontur/react-ui';
+import { CheckAIcon16Regular } from '@skbkontur/icons/icons/CheckAIcon/CheckAIcon16Regular';;
+
+<DropdownMenu preventIconsOffset caption={<Button use="primary">Открыть меню</Button>}>
+  <MenuHeader>MenuHeader</MenuHeader>
+  <MenuItem icon={<CheckAIcon16Regular />}>MenuItem1</MenuItem>
+  <MenuItem icon={<CheckAIcon16Regular />}>MenuItem2</MenuItem>
+  <MenuItem>MenuItem3</MenuItem>
+</DropdownMenu>
+```
+
+### Отключенная анимация
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  disableAnimations
+  caption={<Button use="primary">Открыть меню без анимации</Button>}
+  >
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</DropdownMenu>;
+```
+
+### Подпись
+В `caption` можно передать любой элемент.
+
+```jsx harmony
+import { UiMenuBars3HIcon16Regular } from '@skbkontur/icons/icons/UiMenuBars3HIcon/UiMenuBars3HIcon16Regular';
+import { MenuItem } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  caption={
+    <span style={{ display: 'inline-block' }} tabIndex="0">
+      <UiMenuBars3HIcon16Regular size={32} />
+    </span>
+  }
+  menuWidth="300px"
+>
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</DropdownMenu>;
+```
+
+### Чекбокс внутри MenuItem
+
+```jsx harmony
+import { MenuItem, Checkbox, Button, ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
+
+const [checked, setChecked] = React.useState(false);
+
+let close;
+
+const renderCaption = ({ openMenu, closeMenu }) => {
+  close = closeMenu;
+  return (
+    <Button onClick={openMenu} use="primary">
+      Открыть меню
+    </Button>
+  );
+};
+
+<DropdownMenu caption={renderCaption}>
+  <MenuItem onClick={(e) => e.preventDefault()}>Просто пункт</MenuItem>
+  <ThemeContext.Provider value={ThemeFactory.create({ menuItemHoverBg: 'initial' })}>
+    <MenuItem
+      onClick={(e) => {
+        e.preventDefault();
+        setChecked(!checked);
+      }}
+    >
+      <Checkbox checked={checked}>с чекбоксом</Checkbox>
+    </MenuItem>
+  </ThemeContext.Provider>
+  <MenuItem
+    onClick={(e) => {
+      e.preventDefault();
+      close();
+    }}
+  >
+    Закрыть
+  </MenuItem>
+</DropdownMenu>
+```
+
+### Условный рендер элементов меню
+(с сохранением поведения [MenuItem](#/Components/MenuItem))
+
+```jsx harmony
+import {Button, MenuItem, Gapped, MenuSeparator} from '@skbkontur/react-ui';
+
+const [showItems, setShowItems] = React.useState(false);
+
+const hiddenItems = [
+  <MenuSeparator />,
+  <MenuItem>А я скрываюсь</MenuItem>,
+  <MenuItem>И я</MenuItem>,
+  <MenuItem>Я с вами</MenuItem>,
+];
+
+
+<Gapped>
+  <Button onClick={() => setShowItems(!showItems)}>
+    {showItems ? 'Спрятать' : 'Показать'} элементы
+  </Button>
+
+  <DropdownMenu caption={<Button use="primary">Открыть меню</Button>}>
+    <MenuItem>Меня видно всегда</MenuItem>
+    <MenuItem>Меня тоже</MenuItem>
+    <MenuItem>Ага, и меня!</MenuItem>
+    {showItems && hiddenItems}
+  </DropdownMenu>
+</Gapped>
+```
+
+С использованием фиче-флага menuItemsAtAnyLevel. Mожно использовать различные обертки для пунктов меню.
+
+```jsx harmony
+import {
+    DropdownMenu,
+    Button,
+    MenuHeader,
+    MenuItem,
+    MenuSeparator,
+    ReactUIFeatureFlagsContext,
+    Gapped
+} from '@skbkontur/react-ui';
+
+const groupedMenuItems = (
+  <div>
+    <MenuItem>MenuItem1</MenuItem>
+    <MenuItem>MenuItem2</MenuItem>
+    <MenuItem isNotSelectable>Not Selectable</MenuItem>
+  </div>
+);
+
+<Gapped>
+  <ReactUIFeatureFlagsContext.Provider value={{ menuItemsAtAnyLevel: true }}>
+    <DropdownMenu caption={<Button use="primary">Открыть меню</Button>}>
+      <>
+        <MenuHeader>Заголовок меню</MenuHeader>
+        <MenuSeparator />
+        <div>
+          {groupedMenuItems}
+        </div>
+      </>
+      <MenuItem>MenuItem3</MenuItem>
+    </DropdownMenu>
+  </ReactUIFeatureFlagsContext.Provider>
+</Gapped>;
+```
+
+

package/cjs/components/FileUploader/FileUploader.js

@@ -1,9 +1,9 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.FileUploaderDataTids = exports.FileUploader = void 0;var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireWildcard(require("react"));
+var _globalObject = require("@skbkontur/global-object");
 
-var _RenderEnvironmentContext = require("../../lib/theming/RenderEnvironmentContext");
-var _globalObject = require("../../lib/globalObject");
 
 var _fileUtils = require("../../internal/FileUploaderControl/fileUtils");
+var _Emotion = require("../../lib/theming/Emotion");
 
 var _useMemoObject = require("../../hooks/useMemoObject");
 var _FileUploaderControlContext = require("../../internal/FileUploaderControl/FileUploaderControlContext");
@@ -89,11 +89,6 @@ var defaultRenderFile = function defaultRenderFile(file, fileNode) {return fileN
 
 var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', function (props, ref) {var _cx;
   var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
-  var globalObject = (0, _RenderEnvironmentContext.useGlobal)();
-  var emotion = (0, _RenderEnvironmentContext.useEmotion)();
-  var cx = emotion.cx;
-  var jsStyles = (0, _FileUploader2.getStyles)(emotion);
-  var keyListener = new _keyListener.KeyListener(globalObject);
 
   var
     initialFiles =
@@ -145,21 +140,21 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
   );
 
   var sizeClassName = (0, _useFileUploaderSize.useFileUploaderSize)(size, {
-    small: jsStyles.sizeSmall(theme),
-    medium: jsStyles.sizeMedium(theme),
-    large: jsStyles.sizeLarge(theme)
+    small: _FileUploader2.jsStyles.sizeSmall(theme),
+    medium: _FileUploader2.jsStyles.sizeMedium(theme),
+    large: _FileUploader2.jsStyles.sizeLarge(theme)
   });
 
   var sizeIconClass = (0, _useFileUploaderSize.useFileUploaderSize)(size, {
-    small: jsStyles.iconSmall(theme),
-    medium: jsStyles.iconMedium(theme),
-    large: jsStyles.iconLarge(theme)
+    small: _FileUploader2.jsStyles.iconSmall(theme),
+    medium: _FileUploader2.jsStyles.iconMedium(theme),
+    large: _FileUploader2.jsStyles.iconLarge(theme)
   });
 
   var contentInnerClass = (0, _useFileUploaderSize.useFileUploaderSize)(size, {
-    small: jsStyles.contentInnerSmall(theme),
-    medium: jsStyles.contentInnerMedium(theme),
-    large: jsStyles.contentInnerLarge(theme)
+    small: _FileUploader2.jsStyles.contentInnerSmall(theme),
+    medium: _FileUploader2.jsStyles.contentInnerMedium(theme),
+    large: _FileUploader2.jsStyles.contentInnerLarge(theme)
   });
 
   /** common part **/
@@ -208,12 +203,12 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
   var _useDrop = (0, _useDrop3.useDrop)({ onDrop: handleDrop }),isDraggable = _useDrop.isDraggable,labelRef = _useDrop.ref;
   var _useDrop2 = (0, _useDrop3.useDrop)(),isWindowDraggable = _useDrop2.isDraggable,windowRef = _useDrop2.ref;
 
-  if ((0, _globalObject.isBrowser)(globalObject)) {
-    windowRef.current = globalObject.document;
+  if ((0, _globalObject.isBrowser)(_globalObject.globalObject)) {
+    windowRef.current = _globalObject.globalObject.document;
   }
 
   var focus = (0, _react.useCallback)(function () {var _inputRef$current;
-    keyListener.isTabPressed = true;
+    _keyListener.keyListener.isTabPressed = true;
     (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
   }, []);
 
@@ -270,8 +265,8 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
     if (!disabled) {
       // focus event fires before keyDown eventlistener
       // so we should check tabPressed in async way
-      globalObject.requestAnimationFrame == null || globalObject.requestAnimationFrame(function () {
-        if (keyListener.isTabPressed) {
+      _globalObject.globalObject.requestAnimationFrame == null || _globalObject.globalObject.requestAnimationFrame(function () {
+        if (_keyListener.keyListener.isTabPressed) {
           setFocusedByTab(true);
         }
       });
@@ -288,31 +283,31 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
 
   var _useState3 = (0, _react.useState)(false),hovered = _useState3[0],setHovered = _useState3[1];
 
-  var uploadButtonClassNames = cx(
-    jsStyles.uploadButton(theme),
+  var uploadButtonClassNames = (0, _Emotion.cx)(
+    _FileUploader2.jsStyles.uploadButton(theme),
     sizeClassName,
-    focusedByTab && jsStyles.uploadButtonFocus(theme),
-    disabled && jsStyles.disabled(theme),
-    !disabled && hovered && jsStyles.hovered(theme),
-    !!warning && jsStyles.warning(theme),
-    !!error && jsStyles.error(theme),
-    isDraggable && !disabled && jsStyles.dragOver(theme)
+    focusedByTab && _FileUploader2.jsStyles.uploadButtonFocus(theme),
+    disabled && _FileUploader2.jsStyles.disabled(theme),
+    !disabled && hovered && _FileUploader2.jsStyles.hovered(theme),
+    !!warning && _FileUploader2.jsStyles.warning(theme),
+    !!error && _FileUploader2.jsStyles.error(theme),
+    isDraggable && !disabled && _FileUploader2.jsStyles.dragOver(theme)
   );
 
   var canDrop = isWindowDraggable && !disabled;
-  var uploadButtonWrapperClassNames = cx(canDrop && jsStyles.windowDragOver(theme));
+  var uploadButtonWrapperClassNames = (0, _Emotion.cx)(canDrop && _FileUploader2.jsStyles.windowDragOver(theme));
 
-  var uploadButtonIconClassNames = cx(jsStyles.icon(theme), sizeIconClass, disabled && jsStyles.iconDisabled(theme));
+  var uploadButtonIconClassNames = (0, _Emotion.cx)(_FileUploader2.jsStyles.icon(theme), sizeIconClass, disabled && _FileUploader2.jsStyles.iconDisabled(theme));
 
   var hasOneFile = files.length === 1;
   var hasOneFileForSingle = isSingleMode && hasOneFile && !hideFiles;
 
-  var contentClassNames = cx(jsStyles.content(), hasOneFileForSingle && jsStyles.contentWithFiles());
+  var contentClassNames = (0, _Emotion.cx)(_FileUploader2.jsStyles.content(), hasOneFileForSingle && _FileUploader2.jsStyles.contentWithFiles());
 
-  var linkClassNames = cx(
-    jsStyles.link(theme),
-    !disabled && hovered && jsStyles.linkHovered(theme),
-    disabled && jsStyles.linkDisabled(theme)
+  var linkClassNames = (0, _Emotion.cx)(
+    _FileUploader2.jsStyles.link(theme),
+    !disabled && hovered && _FileUploader2.jsStyles.linkHovered(theme),
+    disabled && _FileUploader2.jsStyles.linkDisabled(theme)
   );
 
   (0, _react.useEffect)(function () {
@@ -342,7 +337,7 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
     _react.default.createElement(_CommonWrapper.CommonWrapper, props, /*#__PURE__*/
     _react.default.createElement("div", {
       "data-tid": FileUploaderDataTids.root,
-      className: jsStyles.root(theme),
+      className: _FileUploader2.jsStyles.root(theme),
       style: (0, _useMemoObject.useMemoObject)({ width: width }),
       ref: rootNodeRef },
 
@@ -358,7 +353,7 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
 
     _react.default.createElement("div", {
       "data-tid": FileUploaderDataTids.content,
-      className: cx(contentClassNames, (_cx = {}, _cx[contentInnerClass] = !files.length || !isSingleMode, _cx)) },
+      className: (0, _Emotion.cx)(contentClassNames, (_cx = {}, _cx[contentInnerClass] = !files.length || !isSingleMode, _cx)) },
 
     isLinkVisible && /*#__PURE__*/
     _react.default.createElement("span", { "data-tid": FileUploaderDataTids.link, className: linkClassNames },
@@ -367,13 +362,13 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
 
     isLinkVisible && String.fromCharCode(0xa0) /*   */, /*#__PURE__*/
     _react.default.createElement("div", {
-      className: cx(
+      className: (0, _Emotion.cx)(
         _FileUploader2.globalClasses.afterLinkText,
-        hasOneFileForSingle ? jsStyles.afterLinkText_HasFiles(theme) : jsStyles.afterLinkText(theme)
+        hasOneFileForSingle ? _FileUploader2.jsStyles.afterLinkText_HasFiles(theme) : _FileUploader2.jsStyles.afterLinkText(theme)
       ) },
 
     hasOneFileForSingle ? /*#__PURE__*/
-    _react.default.createElement("div", { ref: fileDivRef, className: jsStyles.singleFile() },
+    _react.default.createElement("div", { ref: fileDivRef, className: _FileUploader2.jsStyles.singleFile() },
     renderFile(files[0], /*#__PURE__*/_react.default.createElement(_FileUploaderFile.FileUploaderFile, { file: files[0], size: size, onRemove: handleRemoveFile }))
     ) : /*#__PURE__*/
 
@@ -393,7 +388,7 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
       type: "file",
       disabled: disabled,
       multiple: multiple,
-      className: jsStyles.visuallyHidden(),
+      className: _FileUploader2.jsStyles.visuallyHidden(),
       onClick: stopPropagation,
       onChange: handleInputChange,
       onFocus: handleFocus,