@skbkontur/react-ui 3.10.0 → 3.11.0-select-right

package/components/DatePicker/DatePicker.md

@@ -1,307 +1,307 @@
-Компонент `DatePicker` принимает в `value` строку формата `dd.mm.yyyy`.
-При вводе строки в поле ввода, возвращает строку без маски.
-
-Имеется статический метод `DatePicker.validate`, который проверяет,
-что введенная дата корректна
-
-```ts static
-DatePicker.validate: (value: string, range?: { minDate?: string; maxDate?: string }) => boolean
-```
-
-### Валидация
-
-Пример с обработкой ошибок, когда пользователь ввел невалидную дату.
-
-```jsx harmony
-import { Gapped, Tooltip } from '@skbkontur/react-ui';
-import { ViewDateInputValidateChecks } from '@skbkontur/react-ui/components/DateInput/ViewDateInputValidateChecks';
-
-const [value, setValue] = React.useState();
-const [error, setError] = React.useState(false);
-const [tooltip, setTooltip] = React.useState(false);
-
-const minDate = '22.12.2012';
-const maxDate = '02.05.2018';
-
-const unvalidate = () => {
-  setError(false);
-  setTooltip(false);
-};
-
-const validate = () => {
-  const errorNew = !!value && !DatePicker.validate(value, { minDate: minDate, maxDate: maxDate });
-  setError(errorNew);
-  setTooltip(errorNew);
-};
-
-let removeTooltip = () => setTooltip(false);
-
-<Gapped gap={10} vertical>
-  <ViewDateInputValidateChecks value={value} minDate={minDate} maxDate={maxDate} />
-  <pre>
-    minDate = {minDate}
-    <br />
-    maxDate = {maxDate}
-  </pre>
-
-  <Tooltip trigger={tooltip ? 'opened' : 'closed'} render={() => 'Невалидная дата'} onCloseClick={removeTooltip}>
-    <DatePicker
-      error={error}
-      value={value}
-      onValueChange={setValue}
-      onFocus={unvalidate}
-      onBlur={validate}
-      minDate={minDate}
-      maxDate={maxDate}
-      enableTodayLink
-    />
-  </Tooltip>
-</Gapped>;
-```
-
-### `isHoliday`
-
-В компонент можно передать функцию `isHoliday`, которая будет получать день строкой формата `dd.mm.yyyy` и флаг `isWeekend`, и должна вернуть `true` для выходного и `false` для рабочего дня.
-
-```jsx harmony
-import * as DatePickerHelpers from './DatePickerHelpers';
-
-const [value, setValue] = React.useState();
-
-const createRandomHolidays = () => {
-  const holidays = new Array(10);
-  const today = new Date();
-
-  for (let index = 0; index < holidays.length; index++) {
-    const day = new Date(today.setDate(today.getDate() + 1 + index).valueOf());
-
-    const holiday = {
-      date: day.getDate(),
-      month: day.getMonth(),
-      year: day.getFullYear(),
-    };
-
-    holidays[index] = DatePickerHelpers.formatDate(holiday);
-  }
-
-  return holidays;
-};
-const holidays = createRandomHolidays();
-
-const isHoliday = (day, isWeekend) => {
-  const today = new Date();
-  const holiday = {
-    date: today.getDate(),
-    month: today.getMonth(),
-    year: today.getFullYear(),
-  };
-
-  if (holidays.includes(day)) {
-    return !isWeekend;
-  }
-
-  return isWeekend;
-};
-
-<DatePicker isHoliday={isHoliday} value={value} onValueChange={setValue} enableTodayLink />;
-```
-
-### Производственный календарь
-
-Пример обработки производственного календаря от `data.gov.ru`
-
-<details><summary>`data.gov.ru`</summary>
-
-Docs:
-https://data.gov.ru/api-portala-otkrytyh-dannyh-rf-polnoe-rukovodstvo
-
-Request:
-
-```md
-https://data.gov.ru/api/json/dataset/7708660670-proizvcalendar/version/20151123T183036/content?search=2021&access_token=31de6d0b90f51a7aa3ee2d518d50f4e9
-```
-
-Response:
-
-```json
-[
-  {
-    "Год/Месяц": "2021",
-    "Январь": "1,2,3,4,5,6,7,8,9,10,16,17,23,24,30,31",
-    "Февраль": "6,7,13,14,20,21,22*,23,27,28",
-    "Март": "6,7,8*,13,14,20,21,27,28",
-    "Апрель": "3,4,10,11,17,18,24,25,30*",
-    "Май": "1,2,3+,8,9,10+,15,16,22,23,29,30",
-    "Июнь": "5,6,11*,12,13,14+,19,20,26,27",
-    "Июль": "3,4,10,11,17,18,24,25,31",
-    "Август": "1,7,8,14,15,21,22,28,29",
-    "Сентябрь": "4,5,11,12,18,19,25,26",
-    "Октябрь": "2,3,9,10,16,17,23,24,30,31",
-    "Ноябрь": "3*,4,6,7,13,14,20,21,27,28",
-    "Декабрь": "4,5,11,12,18,19,25,26,31*",
-    "Всего рабочих дней": "249",
-    "Всего праздничных и выходных дней": "116",
-    "Количество рабочих часов при 40-часовой рабочей неделе": "1987",
-    "Количество рабочих часов при 36-часовой рабочей неделе": "1787.8",
-    "Количество рабочих часов при 24-часовой рабочей неделе": "1190.2"
-  }
-]
-```
-
-</details>
-
-```jsx harmony
-const today = new Date();
-const year = today.getFullYear();
-const response = [
-  {
-    'Год/Месяц': '2021',
-    Январь: '1,2,3,4,5,6,7,8,9,10,16,17,23,24,30,31',
-    Февраль: '6,7,13,14,20,21,22*,23,27,28',
-    Март: '6,7,8*,13,14,20,21,27,28',
-    Апрель: '3,4,10,11,17,18,24,25,30*',
-    Май: '1,2,3+,8,9,10+,15,16,22,23,29,30',
-    Июнь: '5,6,11*,12,13,14+,19,20,26,27',
-    Июль: '3,4,10,11,17,18,24,25,31',
-    Август: '1,7,8,14,15,21,22,28,29',
-    Сентябрь: '4,5,11,12,18,19,25,26',
-    Октябрь: '2,3,9,10,16,17,23,24,30,31',
-    Ноябрь: '3*,4,6,7,13,14,20,21,27,28',
-    Декабрь: '4,5,11,12,18,19,25,26,31*',
-    'Всего рабочих дней': '249',
-    'Всего праздничных и выходных дней': '116',
-    'Количество рабочих часов при 40-часовой рабочей неделе': '1987',
-    'Количество рабочих часов при 36-часовой рабочей неделе': '1787.8',
-    'Количество рабочих часов при 24-часовой рабочей неделе': '1190.2',
-  },
-];
-let result = [];
-let holidays = [];
-
-if (response.length !== 0) {
-  result = Object.values(
-    response.length > 1 ? response.find(data => data['Год/Месяц'] === year.toString()) || response[0] : response[0],
-  ).slice(1, 13);
-}
-result.forEach((month, index) => {
-  month
-    .split(',')
-    .filter(item => /^\d*$/.test(item))
-    .forEach(day => {
-      holidays.push(`${day.padStart(2, 0)}.${(index + 1).toString().padStart(2, 0)}.${year}`);
-    });
-});
-
-const isHoliday = (date, isWeekend) => holidays.includes(date) || isWeekend;
-
-<DatePicker isHoliday={isHoliday} onValueChange={() => void 0} enableTodayLink />;
-```
-
-### Ручное форматирование даты
-
-```jsx harmony
-import { DateOrder, DateSeparator, Gapped, LocaleContext, Select, LangCodes } from '@skbkontur/react-ui';
-
-class DatePickerFormatting extends React.Component {
-  constructor() {
-    this.state = {
-      order: DateOrder.YMD,
-      separator: 'Dot',
-      value: '21.12.2012',
-    };
-  }
-
-  render() {
-    return (
-      <Gapped vertical gap={10}>
-        <div>
-          <span style={{ width: '300px', display: 'inline-block' }}>
-            Порядок компонентов (<tt>DateOrder</tt>)
-          </span>
-          <Select
-            value={this.state.order}
-            items={Object.keys(DateOrder)}
-            onValueChange={order => this.setState({ order })}
-          />
-        </div>
-        <div>
-          <span style={{ width: '300px', display: 'inline-block' }}>
-            Разделитель (<tt>DateSeparator</tt>)
-          </span>
-          <Select
-            value={this.state.separator}
-            items={Object.keys(DateSeparator)}
-            onValueChange={separator => this.setState({ separator })}
-          />
-        </div>
-        <LocaleContext.Provider
-          value={{
-            langCode: LangCodes.ru_RU,
-            locale: {
-              DatePicker: {
-                separator: DateSeparator[this.state.separator],
-                order: this.state.order,
-              },
-            },
-          }}
-        >
-          <DatePicker onValueChange={value => this.setState({ value })} value={this.state.value} />
-        </LocaleContext.Provider>
-      </Gapped>
-    );
-  }
-}
-
-<DatePickerFormatting />;
-```
-
-#### Локали по умолчанию
-
-```typescript static
-interface DatePickerLocale {
-  today?: string;
-  months?: string[];
-  order?: DateOrder;
-  separator?: DateSeparator;
-}
-
-const ru_RU = {
-  today: 'Сегодня',
-  months: [
-    'Январь',
-    'Февраль',
-    'Март',
-    'Апрель',
-    'Май',
-    'Июнь',
-    'Июль',
-    'Август',
-    'Сентябрь',
-    'Октябрь',
-    'Ноябрь',
-    'Декабрь',
-  ],
-  order: DateOrder.DMY,
-  separator: DateSeparator.Dot,
-};
-
-const en_GB = {
-  today: 'Today',
-  months: [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ],
-  order: DateOrder.MDY,
-  separator: DateSeparator.Slash,
-};
-```
+Компонент `DatePicker` принимает в `value` строку формата `dd.mm.yyyy`.
+При вводе строки в поле ввода, возвращает строку без маски.
+
+Имеется статический метод `DatePicker.validate`, который проверяет,
+что введенная дата корректна
+
+```ts static
+DatePicker.validate: (value: string, range?: { minDate?: string; maxDate?: string }) => boolean
+```
+
+### Валидация
+
+Пример с обработкой ошибок, когда пользователь ввел невалидную дату.
+
+```jsx harmony
+import { Gapped, Tooltip } from '@skbkontur/react-ui';
+import { ViewDateInputValidateChecks } from '@skbkontur/react-ui/components/DateInput/ViewDateInputValidateChecks';
+
+const [value, setValue] = React.useState();
+const [error, setError] = React.useState(false);
+const [tooltip, setTooltip] = React.useState(false);
+
+const minDate = '22.12.2012';
+const maxDate = '02.05.2018';
+
+const unvalidate = () => {
+  setError(false);
+  setTooltip(false);
+};
+
+const validate = () => {
+  const errorNew = !!value && !DatePicker.validate(value, { minDate: minDate, maxDate: maxDate });
+  setError(errorNew);
+  setTooltip(errorNew);
+};
+
+let removeTooltip = () => setTooltip(false);
+
+<Gapped gap={10} vertical>
+  <ViewDateInputValidateChecks value={value} minDate={minDate} maxDate={maxDate} />
+  <pre>
+    minDate = {minDate}
+    <br />
+    maxDate = {maxDate}
+  </pre>
+
+  <Tooltip trigger={tooltip ? 'opened' : 'closed'} render={() => 'Невалидная дата'} onCloseClick={removeTooltip}>
+    <DatePicker
+      error={error}
+      value={value}
+      onValueChange={setValue}
+      onFocus={unvalidate}
+      onBlur={validate}
+      minDate={minDate}
+      maxDate={maxDate}
+      enableTodayLink
+    />
+  </Tooltip>
+</Gapped>;
+```
+
+### `isHoliday`
+
+В компонент можно передать функцию `isHoliday`, которая будет получать день строкой формата `dd.mm.yyyy` и флаг `isWeekend`, и должна вернуть `true` для выходного и `false` для рабочего дня.
+
+```jsx harmony
+import * as DatePickerHelpers from './DatePickerHelpers';
+
+const [value, setValue] = React.useState();
+
+const createRandomHolidays = () => {
+  const holidays = new Array(10);
+  const today = new Date();
+
+  for (let index = 0; index < holidays.length; index++) {
+    const day = new Date(today.setDate(today.getDate() + 1 + index).valueOf());
+
+    const holiday = {
+      date: day.getDate(),
+      month: day.getMonth(),
+      year: day.getFullYear(),
+    };
+
+    holidays[index] = DatePickerHelpers.formatDate(holiday);
+  }
+
+  return holidays;
+};
+const holidays = createRandomHolidays();
+
+const isHoliday = (day, isWeekend) => {
+  const today = new Date();
+  const holiday = {
+    date: today.getDate(),
+    month: today.getMonth(),
+    year: today.getFullYear(),
+  };
+
+  if (holidays.includes(day)) {
+    return !isWeekend;
+  }
+
+  return isWeekend;
+};
+
+<DatePicker isHoliday={isHoliday} value={value} onValueChange={setValue} enableTodayLink />;
+```
+
+### Производственный календарь
+
+Пример обработки производственного календаря от `data.gov.ru`
+
+<details><summary>`data.gov.ru`</summary>
+
+Docs:
+https://data.gov.ru/api-portala-otkrytyh-dannyh-rf-polnoe-rukovodstvo
+
+Request:
+
+```md
+https://data.gov.ru/api/json/dataset/7708660670-proizvcalendar/version/20151123T183036/content?search=2021&access_token=31de6d0b90f51a7aa3ee2d518d50f4e9
+```
+
+Response:
+
+```json
+[
+  {
+    "Год/Месяц": "2021",
+    "Январь": "1,2,3,4,5,6,7,8,9,10,16,17,23,24,30,31",
+    "Февраль": "6,7,13,14,20,21,22*,23,27,28",
+    "Март": "6,7,8*,13,14,20,21,27,28",
+    "Апрель": "3,4,10,11,17,18,24,25,30*",
+    "Май": "1,2,3+,8,9,10+,15,16,22,23,29,30",
+    "Июнь": "5,6,11*,12,13,14+,19,20,26,27",
+    "Июль": "3,4,10,11,17,18,24,25,31",
+    "Август": "1,7,8,14,15,21,22,28,29",
+    "Сентябрь": "4,5,11,12,18,19,25,26",
+    "Октябрь": "2,3,9,10,16,17,23,24,30,31",
+    "Ноябрь": "3*,4,6,7,13,14,20,21,27,28",
+    "Декабрь": "4,5,11,12,18,19,25,26,31*",
+    "Всего рабочих дней": "249",
+    "Всего праздничных и выходных дней": "116",
+    "Количество рабочих часов при 40-часовой рабочей неделе": "1987",
+    "Количество рабочих часов при 36-часовой рабочей неделе": "1787.8",
+    "Количество рабочих часов при 24-часовой рабочей неделе": "1190.2"
+  }
+]
+```
+
+</details>
+
+```jsx harmony
+const today = new Date();
+const year = today.getFullYear();
+const response = [
+  {
+    'Год/Месяц': '2021',
+    Январь: '1,2,3,4,5,6,7,8,9,10,16,17,23,24,30,31',
+    Февраль: '6,7,13,14,20,21,22*,23,27,28',
+    Март: '6,7,8*,13,14,20,21,27,28',
+    Апрель: '3,4,10,11,17,18,24,25,30*',
+    Май: '1,2,3+,8,9,10+,15,16,22,23,29,30',
+    Июнь: '5,6,11*,12,13,14+,19,20,26,27',
+    Июль: '3,4,10,11,17,18,24,25,31',
+    Август: '1,7,8,14,15,21,22,28,29',
+    Сентябрь: '4,5,11,12,18,19,25,26',
+    Октябрь: '2,3,9,10,16,17,23,24,30,31',
+    Ноябрь: '3*,4,6,7,13,14,20,21,27,28',
+    Декабрь: '4,5,11,12,18,19,25,26,31*',
+    'Всего рабочих дней': '249',
+    'Всего праздничных и выходных дней': '116',
+    'Количество рабочих часов при 40-часовой рабочей неделе': '1987',
+    'Количество рабочих часов при 36-часовой рабочей неделе': '1787.8',
+    'Количество рабочих часов при 24-часовой рабочей неделе': '1190.2',
+  },
+];
+let result = [];
+let holidays = [];
+
+if (response.length !== 0) {
+  result = Object.values(
+    response.length > 1 ? response.find(data => data['Год/Месяц'] === year.toString()) || response[0] : response[0],
+  ).slice(1, 13);
+}
+result.forEach((month, index) => {
+  month
+    .split(',')
+    .filter(item => /^\d*$/.test(item))
+    .forEach(day => {
+      holidays.push(`${day.padStart(2, 0)}.${(index + 1).toString().padStart(2, 0)}.${year}`);
+    });
+});
+
+const isHoliday = (date, isWeekend) => holidays.includes(date) || isWeekend;
+
+<DatePicker isHoliday={isHoliday} onValueChange={() => void 0} enableTodayLink />;
+```
+
+### Ручное форматирование даты
+
+```jsx harmony
+import { DateOrder, DateSeparator, Gapped, LocaleContext, Select, LangCodes } from '@skbkontur/react-ui';
+
+class DatePickerFormatting extends React.Component {
+  constructor() {
+    this.state = {
+      order: DateOrder.YMD,
+      separator: 'Dot',
+      value: '21.12.2012',
+    };
+  }
+
+  render() {
+    return (
+      <Gapped vertical gap={10}>
+        <div>
+          <span style={{ width: '300px', display: 'inline-block' }}>
+            Порядок компонентов (<tt>DateOrder</tt>)
+          </span>
+          <Select
+            value={this.state.order}
+            items={Object.keys(DateOrder)}
+            onValueChange={order => this.setState({ order })}
+          />
+        </div>
+        <div>
+          <span style={{ width: '300px', display: 'inline-block' }}>
+            Разделитель (<tt>DateSeparator</tt>)
+          </span>
+          <Select
+            value={this.state.separator}
+            items={Object.keys(DateSeparator)}
+            onValueChange={separator => this.setState({ separator })}
+          />
+        </div>
+        <LocaleContext.Provider
+          value={{
+            langCode: LangCodes.ru_RU,
+            locale: {
+              DatePicker: {
+                separator: DateSeparator[this.state.separator],
+                order: this.state.order,
+              },
+            },
+          }}
+        >
+          <DatePicker onValueChange={value => this.setState({ value })} value={this.state.value} />
+        </LocaleContext.Provider>
+      </Gapped>
+    );
+  }
+}
+
+<DatePickerFormatting />;
+```
+
+#### Локали по умолчанию
+
+```typescript static
+interface DatePickerLocale {
+  today?: string;
+  months?: string[];
+  order?: DateOrder;
+  separator?: DateSeparator;
+}
+
+const ru_RU = {
+  today: 'Сегодня',
+  months: [
+    'Январь',
+    'Февраль',
+    'Март',
+    'Апрель',
+    'Май',
+    'Июнь',
+    'Июль',
+    'Август',
+    'Сентябрь',
+    'Октябрь',
+    'Ноябрь',
+    'Декабрь',
+  ],
+  order: DateOrder.DMY,
+  separator: DateSeparator.Dot,
+};
+
+const en_GB = {
+  today: 'Today',
+  months: [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ],
+  order: DateOrder.MDY,
+  separator: DateSeparator.Slash,
+};
+```

package/components/DropdownMenu/DropdownMenu/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DropdownMenu.tsx"],"names":["React","ThemeContext","ThemeFactory","PopupMenu","isProductionEnv","isTestEnv","CommonWrapper","rootNode","DropdownMenu","props","popupMenu","setRootNode","open","close","refPopupMenu","ref","handleChangeMenuState","menuVisible","onOpen","onClose","caption","Error","render","theme","create","popupMargin","renderMain","menuMaxHeight","menuWidth","positions","disableAnimations","header","footer","width","children","Component","__KONTUR_REACT_UI__","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Nullable } from '../../typings/utility-types';\nimport { PopupMenu, PopupMenuProps } from '../../internal/PopupMenu';\nimport { isProductionEnv, isTestEnv } from '../../lib/currentEnvironment';\nimport { PopupPosition } from '../../internal/Popup';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nexport interface DropdownMenuProps extends CommonProps {\n  /** Максимальная высота меню */\n  menuMaxHeight?: React.CSSProperties['maxWidth'];\n  /** Ширина меню */\n  menuWidth?: React.CSSProperties['width'];\n  /** Ширина caption */\n  width?: React.CSSProperties['width'];\n\n  /**\n   * Элемент или функция возвращающая элемент,\n   * если передана, используется вместо `caption`,\n   * в таком случае управлять открытием и закрытием меню\n   * придется в этой функции\n   */\n  caption: PopupMenuProps['caption'];\n\n  /**\n   * Произвольный элемент, который будет отрендерен в шапке меню.\n   *\n   * _Примечание_: контрол [`MenuHeader`](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Произвольный элемент, который будет отрендерен в подвале меню.\n   *\n   * Перед элементом переданным в `footer` будет отрендерен [`MenuSeparator`](#/Components/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?: PopupPosition[];\n\n  onOpen?: () => void;\n  onClose?: () => void;\n\n  /**\n   * Не показывать анимацию\n   */\n  disableAnimations: boolean;\n}\n\n/**\n * Меню, раскрывающееся по клику на переданный в `caption` элемент\n */\n@rootNode\nexport class DropdownMenu extends React.Component<DropdownMenuProps> {\n  public static __KONTUR_REACT_UI__ = 'DropdownMenu';\n\n  public static defaultProps = {\n    disableAnimations: isTestEnv,\n    positions: ['bottom left', 'bottom right', 'top left', 'top right'],\n  };\n\n  private popupMenu: Nullable<PopupMenu> = null;\n  private setRootNode!: TSetRootNode;\n\n  constructor(props: DropdownMenuProps) {\n    super(props);\n\n    if (!props.caption && !isProductionEnv) {\n      throw new Error('Prop \"caption\" is required!!!');\n    }\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupMargin: '0px',\n                },\n                theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    if (!this.props.caption) {\n      return null;\n    }\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <PopupMenu\n          ref={this.refPopupMenu}\n          caption={this.props.caption}\n          menuMaxHeight={this.props.menuMaxHeight}\n          menuWidth={this.props.menuWidth}\n          onChangeMenuState={this.handleChangeMenuState}\n          popupHasPin={false}\n          positions={this.props.positions}\n          disableAnimations={this.props.disableAnimations}\n          header={this.props.header}\n          footer={this.props.footer}\n          width={this.props.width}\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>) => (this.popupMenu = ref);\n\n  private handleChangeMenuState = (menuVisible: boolean) => {\n    if (menuVisible && this.props.onOpen) {\n      this.props.onOpen();\n      return;\n    }\n\n    if (!menuVisible && this.props.onClose) {\n      this.props.onClose();\n      return;\n    }\n  };\n}\n"]}
+{"version":3,"sources":["DropdownMenu.tsx"],"names":["React","ThemeContext","ThemeFactory","PopupMenu","isProductionEnv","isTestEnv","CommonWrapper","rootNode","DropdownMenu","props","popupMenu","setRootNode","open","close","refPopupMenu","ref","handleChangeMenuState","menuVisible","onOpen","onClose","caption","Error","render","theme","create","popupMargin","renderMain","menuMaxHeight","menuWidth","positions","disableAnimations","header","footer","width","children","Component","__KONTUR_REACT_UI__","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Nullable } from '../../typings/utility-types';\nimport { PopupMenu, PopupMenuProps } from '../../internal/PopupMenu';\nimport { isProductionEnv, isTestEnv } from '../../lib/currentEnvironment';\nimport { PopupPositionsType } from '../../internal/Popup';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nexport interface DropdownMenuProps extends CommonProps {\n  /** Максимальная высота меню */\n  menuMaxHeight?: React.CSSProperties['maxWidth'];\n  /** Ширина меню */\n  menuWidth?: React.CSSProperties['width'];\n  /** Ширина caption */\n  width?: React.CSSProperties['width'];\n\n  /**\n   * Элемент или функция возвращающая элемент,\n   * если передана, используется вместо `caption`,\n   * в таком случае управлять открытием и закрытием меню\n   * придется в этой функции\n   */\n  caption: PopupMenuProps['caption'];\n\n  /**\n   * Произвольный элемент, который будет отрендерен в шапке меню.\n   *\n   * _Примечание_: контрол [`MenuHeader`](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Произвольный элемент, который будет отрендерен в подвале меню.\n   *\n   * Перед элементом переданным в `footer` будет отрендерен [`MenuSeparator`](#/Components/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  onOpen?: () => void;\n  onClose?: () => void;\n\n  /**\n   * Не показывать анимацию\n   */\n  disableAnimations: boolean;\n}\n\n/**\n * Меню, раскрывающееся по клику на переданный в `caption` элемент\n */\n@rootNode\nexport class DropdownMenu extends React.Component<DropdownMenuProps> {\n  public static __KONTUR_REACT_UI__ = 'DropdownMenu';\n\n  public static defaultProps = {\n    disableAnimations: isTestEnv,\n    positions: ['bottom left', 'bottom right', 'top left', 'top right'],\n  };\n\n  private popupMenu: Nullable<PopupMenu> = null;\n  private setRootNode!: TSetRootNode;\n\n  constructor(props: DropdownMenuProps) {\n    super(props);\n\n    if (!props.caption && !isProductionEnv) {\n      throw new Error('Prop \"caption\" is required!!!');\n    }\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupMargin: '0px',\n                },\n                theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    if (!this.props.caption) {\n      return null;\n    }\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <PopupMenu\n          ref={this.refPopupMenu}\n          caption={this.props.caption}\n          menuMaxHeight={this.props.menuMaxHeight}\n          menuWidth={this.props.menuWidth}\n          onChangeMenuState={this.handleChangeMenuState}\n          popupHasPin={false}\n          positions={this.props.positions}\n          disableAnimations={this.props.disableAnimations}\n          header={this.props.header}\n          footer={this.props.footer}\n          width={this.props.width}\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>) => (this.popupMenu = ref);\n\n  private handleChangeMenuState = (menuVisible: boolean) => {\n    if (menuVisible && this.props.onOpen) {\n      this.props.onOpen();\n      return;\n    }\n\n    if (!menuVisible && this.props.onClose) {\n      this.props.onClose();\n      return;\n    }\n  };\n}\n"]}