@skbkontur/react-ui 0.0.0-2ac4c133dd → 0.0.0-2dd5039746

package/internal/Calendar/Month/Month.js

@@ -1,6 +1,7 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { themeConfig } from "../config";
 import * as CDS from "../CalendarDateShape";
 import { MonthView } from "../MonthView";
@@ -132,7 +133,15 @@ var MonthDayGrid = /*#__PURE__*/function (_React$Component2) {
   _inheritsLoose(MonthDayGrid, _React$Component2);
 
   function MonthDayGrid() {
-    return _React$Component2.apply(this, arguments) || this;
+    var _this3;
+
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    _this3 = _React$Component2.call.apply(_React$Component2, [this].concat(args)) || this;
+    _this3.getProps = createPropsGetter(MonthDayGrid.defaultProps);
+    return _this3;
   }
 
   var _proto2 = MonthDayGrid.prototype;
@@ -158,16 +167,16 @@ var MonthDayGrid = /*#__PURE__*/function (_React$Component2) {
   };
 
   _proto2.render = function render() {
-    var _this3 = this;
+    var _this4 = this;
 
     return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this3.theme = theme;
-      return _this3.renderMain();
+      _this4.theme = theme;
+      return _this4.renderMain();
     });
   };
 
   _proto2.renderMain = function renderMain() {
-    var _this4 = this;
+    var _this5 = this;
 
     return /*#__PURE__*/React.createElement("div", {
       className: styles.monthDayGrid(this.theme)
@@ -177,17 +186,17 @@ var MonthDayGrid = /*#__PURE__*/function (_React$Component2) {
         display: 'inline-block'
       }
     }), this.props.days.map(function (day) {
-      var isWeekend = _this4.props.isHoliday(day);
+      var isWeekend = _this5.getProps().isHoliday(day);
 
       return /*#__PURE__*/React.createElement(DayCellView, {
         date: day,
         key: day.date + "." + day.month + "." + day.year,
-        minDate: _this4.props.minDate,
-        maxDate: _this4.props.maxDate,
-        today: _this4.props.today,
-        value: _this4.props.value,
+        minDate: _this5.props.minDate,
+        maxDate: _this5.props.maxDate,
+        today: _this5.props.today,
+        value: _this5.props.value,
         isWeekend: isWeekend,
-        onDateClick: _this4.props.onDateClick
+        onDateClick: _this5.props.onDateClick
       });
     }));
   };

package/internal/Calendar/Month/Month.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Month.tsx"],"names":["React","ThemeContext","themeConfig","CDS","MonthView","DayCellView","CalendarScrollEvents","styles","Month","monthSelect","yearSelect","closeSelects","close","monthRef","yearRef","handleMonthSelect","month","props","onMonthYearChange","year","handleYearSelect","shouldComponentUpdate","nextProps","top","isEqual","value","today","minDate","maxDate","componentDidMount","addListener","render","theme","renderMain","offset","getHeight","isFirstInYear","isLastInYear","renderCells","days","onDateClick","isHoliday","Component","MonthDayGrid","monthDayGrid","width","DAY_SIZE","display","map","day","isWeekend","date","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { DateSelect } from '../DateSelect';\nimport { Nullable } from '../../typings/utility-types';\n\nimport { themeConfig } from './config';\nimport * as CDS from './CalendarDateShape';\nimport { MonthViewModel } from './MonthViewModel';\nimport { DayCellViewModel } from './DayCellViewModel';\nimport { MonthView } from './MonthView';\nimport { DayCellView } from './DayCellView';\nimport * as CalendarScrollEvents from './CalendarScrollEvents';\nimport { styles } from './MonthView.styles';\n\ninterface MonthProps {\n  top: number;\n  month: MonthViewModel;\n  maxDate?: CDS.CalendarDateShape;\n  minDate?: CDS.CalendarDateShape;\n  today?: CDS.CalendarDateShape;\n  value?: Nullable<CDS.CalendarDateShape>;\n  onDateClick?: (date: CDS.CalendarDateShape) => void;\n  onMonthYearChange: (month: number, year: number) => void;\n  isHoliday?: (day: CDS.CalendarDateShape & { isWeekend: boolean }) => boolean;\n}\n\nexport class Month extends React.Component<MonthProps> {\n  private theme!: Theme;\n\n  private monthSelect: DateSelect | null = null;\n  private yearSelect: DateSelect | null = null;\n\n  public shouldComponentUpdate(nextProps: MonthProps) {\n    if (this.props.top !== nextProps.top) {\n      return true;\n    }\n    if (!CDS.isEqual(nextProps.value, this.props.value)) {\n      return true;\n    }\n    if (!CDS.isEqual(nextProps.today, this.props.today)) {\n      return true;\n    }\n    if (!CDS.isEqual(nextProps.minDate, this.props.minDate)) {\n      return true;\n    }\n    if (!CDS.isEqual(nextProps.maxDate, this.props.maxDate)) {\n      return true;\n    }\n    return this.props.month !== nextProps.month;\n  }\n\n  public componentDidMount() {\n    CalendarScrollEvents.addListener(this.closeSelects);\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    const { month, maxDate, minDate, top } = this.props;\n    return (\n      <MonthView\n        firstDayOffset={month.offset}\n        height={month.getHeight(this.theme)}\n        isFirstInYear={month.isFirstInYear}\n        isLastInYear={month.isLastInYear}\n        maxDate={maxDate}\n        minDate={minDate}\n        month={month.month}\n        top={top}\n        year={month.year}\n        onMonthSelect={this.handleMonthSelect}\n        onYearSelect={this.handleYearSelect}\n        monthSelectRef={this.monthRef}\n        yearSelectRef={this.yearRef}\n      >\n        {this.renderCells()}\n      </MonthView>\n    );\n  }\n\n  private renderCells() {\n    return (\n      <MonthDayGrid\n        days={this.props.month.days}\n        offset={this.props.month.offset}\n        minDate={this.props.minDate}\n        maxDate={this.props.maxDate}\n        today={this.props.today}\n        value={this.props.value}\n        onDateClick={this.props.onDateClick}\n        isHoliday={this.props.isHoliday}\n      />\n    );\n  }\n\n  private closeSelects = () => {\n    if (this.monthSelect) {\n      this.monthSelect.close();\n    }\n    if (this.yearSelect) {\n      this.yearSelect.close();\n    }\n  };\n\n  private monthRef = (monthSelect: DateSelect | null) => {\n    this.monthSelect = monthSelect;\n  };\n\n  private yearRef = (yearSelect: DateSelect | null) => {\n    this.yearSelect = yearSelect;\n  };\n\n  private handleMonthSelect = (month: number) => {\n    this.props.onMonthYearChange(month, this.props.month.year);\n  };\n\n  private handleYearSelect = (year: number) => {\n    this.props.onMonthYearChange(this.props.month.month, year);\n  };\n}\n\ninterface MonthDayGridProps {\n  days: DayCellViewModel[];\n  offset: number;\n  minDate?: CDS.CalendarDateShape;\n  maxDate?: CDS.CalendarDateShape;\n  today?: CDS.CalendarDateShape;\n  value?: Nullable<CDS.CalendarDateShape>;\n  onDateClick?: (x0: CDS.CalendarDateShape) => void;\n  isHoliday: (day: CDS.CalendarDateShape & { isWeekend: boolean }) => boolean;\n}\n\nclass MonthDayGrid extends React.Component<MonthDayGridProps> {\n  private theme!: Theme;\n\n  public static defaultProps = {\n    isHoliday: (day: CDS.CalendarDateShape & { isWeekend: boolean }) => day.isWeekend,\n  };\n\n  public shouldComponentUpdate(nextProps: MonthDayGridProps) {\n    if (!CDS.isEqual(nextProps.value, this.props.value)) {\n      return true;\n    }\n    if (!CDS.isEqual(nextProps.today, this.props.today)) {\n      return true;\n    }\n    if (!CDS.isEqual(nextProps.minDate, this.props.minDate)) {\n      return true;\n    }\n    if (!CDS.isEqual(nextProps.maxDate, this.props.maxDate)) {\n      return true;\n    }\n    return this.props.days !== nextProps.days;\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    return (\n      <div className={styles.monthDayGrid(this.theme)}>\n        <div\n          style={{\n            width: this.props.offset * themeConfig(this.theme).DAY_SIZE,\n            display: 'inline-block',\n          }}\n        />\n        {this.props.days.map((day) => {\n          const isWeekend = this.props.isHoliday(day);\n\n          return (\n            <DayCellView\n              date={day}\n              key={`${day.date}.${day.month}.${day.year}`}\n              minDate={this.props.minDate}\n              maxDate={this.props.maxDate}\n              today={this.props.today}\n              value={this.props.value}\n              isWeekend={isWeekend}\n              onDateClick={this.props.onDateClick}\n            />\n          );\n        })}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["Month.tsx"],"names":["React","ThemeContext","createPropsGetter","themeConfig","CDS","MonthView","DayCellView","CalendarScrollEvents","styles","Month","monthSelect","yearSelect","closeSelects","close","monthRef","yearRef","handleMonthSelect","month","props","onMonthYearChange","year","handleYearSelect","shouldComponentUpdate","nextProps","top","isEqual","value","today","minDate","maxDate","componentDidMount","addListener","render","theme","renderMain","offset","getHeight","isFirstInYear","isLastInYear","renderCells","days","onDateClick","isHoliday","Component","MonthDayGrid","getProps","defaultProps","monthDayGrid","width","DAY_SIZE","display","map","day","isWeekend","date"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { DateSelect } from '../DateSelect';\nimport { Nullable } from '../../typings/utility-types';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { themeConfig } from './config';\nimport * as CDS from './CalendarDateShape';\nimport { MonthViewModel } from './MonthViewModel';\nimport { DayCellViewModel } from './DayCellViewModel';\nimport { MonthView } from './MonthView';\nimport { DayCellView } from './DayCellView';\nimport * as CalendarScrollEvents from './CalendarScrollEvents';\nimport { styles } from './MonthView.styles';\n\ninterface MonthProps {\n  top: number;\n  month: MonthViewModel;\n  maxDate?: CDS.CalendarDateShape;\n  minDate?: CDS.CalendarDateShape;\n  today?: CDS.CalendarDateShape;\n  value?: Nullable<CDS.CalendarDateShape>;\n  onDateClick?: (date: CDS.CalendarDateShape) => void;\n  onMonthYearChange: (month: number, year: number) => void;\n  isHoliday?: (day: CDS.CalendarDateShape & { isWeekend: boolean }) => boolean;\n}\n\ntype DefaultProps = Required<Pick<MonthDayGridProps, 'isHoliday'>>;\n\nexport class Month extends React.Component<MonthProps> {\n  private theme!: Theme;\n\n  private monthSelect: DateSelect | null = null;\n  private yearSelect: DateSelect | null = null;\n\n  public shouldComponentUpdate(nextProps: MonthProps) {\n    if (this.props.top !== nextProps.top) {\n      return true;\n    }\n    if (!CDS.isEqual(nextProps.value, this.props.value)) {\n      return true;\n    }\n    if (!CDS.isEqual(nextProps.today, this.props.today)) {\n      return true;\n    }\n    if (!CDS.isEqual(nextProps.minDate, this.props.minDate)) {\n      return true;\n    }\n    if (!CDS.isEqual(nextProps.maxDate, this.props.maxDate)) {\n      return true;\n    }\n    return this.props.month !== nextProps.month;\n  }\n\n  public componentDidMount() {\n    CalendarScrollEvents.addListener(this.closeSelects);\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    const { month, maxDate, minDate, top } = this.props;\n    return (\n      <MonthView\n        firstDayOffset={month.offset}\n        height={month.getHeight(this.theme)}\n        isFirstInYear={month.isFirstInYear}\n        isLastInYear={month.isLastInYear}\n        maxDate={maxDate}\n        minDate={minDate}\n        month={month.month}\n        top={top}\n        year={month.year}\n        onMonthSelect={this.handleMonthSelect}\n        onYearSelect={this.handleYearSelect}\n        monthSelectRef={this.monthRef}\n        yearSelectRef={this.yearRef}\n      >\n        {this.renderCells()}\n      </MonthView>\n    );\n  }\n\n  private renderCells() {\n    return (\n      <MonthDayGrid\n        days={this.props.month.days}\n        offset={this.props.month.offset}\n        minDate={this.props.minDate}\n        maxDate={this.props.maxDate}\n        today={this.props.today}\n        value={this.props.value}\n        onDateClick={this.props.onDateClick}\n        isHoliday={this.props.isHoliday}\n      />\n    );\n  }\n\n  private closeSelects = () => {\n    if (this.monthSelect) {\n      this.monthSelect.close();\n    }\n    if (this.yearSelect) {\n      this.yearSelect.close();\n    }\n  };\n\n  private monthRef = (monthSelect: DateSelect | null) => {\n    this.monthSelect = monthSelect;\n  };\n\n  private yearRef = (yearSelect: DateSelect | null) => {\n    this.yearSelect = yearSelect;\n  };\n\n  private handleMonthSelect = (month: number) => {\n    this.props.onMonthYearChange(month, this.props.month.year);\n  };\n\n  private handleYearSelect = (year: number) => {\n    this.props.onMonthYearChange(this.props.month.month, year);\n  };\n}\n\ninterface MonthDayGridProps {\n  days: DayCellViewModel[];\n  offset: number;\n  minDate?: CDS.CalendarDateShape;\n  maxDate?: CDS.CalendarDateShape;\n  today?: CDS.CalendarDateShape;\n  value?: Nullable<CDS.CalendarDateShape>;\n  onDateClick?: (x0: CDS.CalendarDateShape) => void;\n  isHoliday?: (day: CDS.CalendarDateShape & { isWeekend: boolean }) => boolean;\n}\n\nclass MonthDayGrid extends React.Component<MonthDayGridProps> {\n  private theme!: Theme;\n\n  public static defaultProps: DefaultProps = {\n    isHoliday: (day: CDS.CalendarDateShape & { isWeekend: boolean }) => day.isWeekend,\n  };\n\n  private getProps = createPropsGetter(MonthDayGrid.defaultProps);\n\n  public shouldComponentUpdate(nextProps: MonthDayGridProps) {\n    if (!CDS.isEqual(nextProps.value, this.props.value)) {\n      return true;\n    }\n    if (!CDS.isEqual(nextProps.today, this.props.today)) {\n      return true;\n    }\n    if (!CDS.isEqual(nextProps.minDate, this.props.minDate)) {\n      return true;\n    }\n    if (!CDS.isEqual(nextProps.maxDate, this.props.maxDate)) {\n      return true;\n    }\n    return this.props.days !== nextProps.days;\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    return (\n      <div className={styles.monthDayGrid(this.theme)}>\n        <div\n          style={{\n            width: this.props.offset * themeConfig(this.theme).DAY_SIZE,\n            display: 'inline-block',\n          }}\n        />\n        {this.props.days.map((day) => {\n          const isWeekend = this.getProps().isHoliday(day);\n\n          return (\n            <DayCellView\n              date={day}\n              key={`${day.date}.${day.month}.${day.year}`}\n              minDate={this.props.minDate}\n              maxDate={this.props.maxDate}\n              today={this.props.today}\n              value={this.props.value}\n              isWeekend={isWeekend}\n              onDateClick={this.props.onDateClick}\n            />\n          );\n        })}\n      </div>\n    );\n  }\n}\n"]}

package/internal/Calendar/MonthViewModel.d.ts

@@ -1,7 +1,7 @@
 import { Theme } from '../../lib/theming/Theme';
 import { DayCellViewModel } from './DayCellViewModel';
 export declare class MonthViewModel {
-    static create: (month: number, year: number) => MonthViewModel;
+    static create: (...args: number[]) => any;
     readonly daysCount: number;
     readonly offset: number;
     readonly month: number;

package/internal/Calendar/config.d.ts

@@ -1,9 +1,2 @@
 import { Theme } from '../../lib/theming/Theme';
-export declare const themeConfig: (t: Theme) => {
-    DAY_SIZE: number;
-    MONTH_TITLE_HEIGHT: number;
-    MONTH_TITLE_OFFSET_HEIGHT: number;
-    WRAPPER_HEIGHT: number;
-    MONTH_BOTTOM_MARGIN: number;
-    MAX_MONTHS_TO_APPEND_ON_SCROLL: number;
-};
+export declare const themeConfig: (t: Theme) => any;

package/internal/CommonWrapper/CommonWrapper/CommonWrapper.js

@@ -52,6 +52,7 @@ export var CommonWrapper = rootNode(_class = /*#__PURE__*/function (_React$Compo
   var _proto = CommonWrapper.prototype;
 
   _proto.render = function render() {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     var _extractCommonProps = extractCommonProps(this.props),
         _extractCommonProps$ = _extractCommonProps[0],
         className = _extractCommonProps$.className,
@@ -78,10 +79,10 @@ var extractCommonProps = function extractCommonProps(props) {
 
   for (var key in props) {
     if (isCommonProp(key)) {
-      // @ts-ignore
+      // @ts-expect-error: See: https://github.com/skbkontur/retail-ui/pull/2257#discussion_r565275843 and https://github.com/skbkontur/retail-ui/pull/2257#discussion_r569542736.
       common[key] = props[key];
     } else {
-      // @ts-ignore
+      // @ts-expect-error: Read the comment above.
       rest[key] = props[key];
     }
   }

package/internal/CommonWrapper/CommonWrapper/CommonWrapper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CommonWrapper.tsx"],"names":["React","isFunction","isRefableElement","cx","getRootNode","rootNode","isInstanceWithRootNode","callChildRef","CommonWrapper","rootNodeSubscription","ref","instance","setRootNode","props","rootNodeRef","remove","addRootNodeChangeListener","node","originalRef","child","render","extractCommonProps","className","style","children","dataProps","rest","isValidElement","cloneElement","Component","common","key","isCommonProp","name","indexOf"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { isFunction, isRefableElement } from '../../lib/utils';\nimport { cx } from '../../lib/theming/Emotion';\nimport { Nullable } from '../../typings/utility-types';\nimport { getRootNode, rootNode, TSetRootNode, TRootNodeSubscription, isInstanceWithRootNode } from '../../lib/rootNode';\nimport { callChildRef } from '../../lib/callChildRef/callChildRef';\n\nexport interface CommonProps {\n  /**\n   * HTML-атрибут `class`.\n   */\n  className?: React.HTMLAttributes<HTMLElement>['className'];\n  /**\n   * HTML-атрибут `style`.\n   */\n  style?: React.HTMLAttributes<HTMLElement>['style'];\n  /**\n   * На равне с data-tid транслируются любые data-атрибуты. Они попадают на корневой элемент.\n   */\n  'data-tid'?: string;\n  children?: React.ReactNode;\n}\n\ninterface CommonPropsRootNodeRef {\n  rootNodeRef?: (instance: Nullable<HTMLElement>) => void;\n}\n\nexport type NotCommonProps<P> = Omit<P, keyof CommonProps>;\n\nexport type CommonWrapperProps<P> = P & {\n  children: React.ReactNode | ((rest: CommonWrapperRestProps<P>) => React.ReactNode);\n};\nexport type CommonWrapperRestProps<P> = Omit<NotCommonProps<P>, 'children'>;\n\n@rootNode\nexport class CommonWrapper<P extends CommonProps & CommonPropsRootNodeRef> extends React.Component<\n  CommonWrapperProps<P> & CommonPropsRootNodeRef\n> {\n  private child: React.ReactNode;\n  private setRootNode!: TSetRootNode;\n  private rootNodeSubscription: Nullable<TRootNodeSubscription> = null;\n\n  render() {\n    const [{ className, style, children, rootNodeRef, ...dataProps }, { ...rest }] = extractCommonProps(this.props);\n    this.child = isFunction(children) ? children(rest) : children;\n    return React.isValidElement<CommonProps & React.RefAttributes<any>>(this.child)\n      ? React.cloneElement(this.child, {\n          ref: isRefableElement(this.child) ? this.ref : null,\n          className: cx(this.child.props.className, className),\n          style: {\n            ...this.child.props.style,\n            ...style,\n          },\n          ...dataProps,\n        })\n      : this.child;\n  }\n\n  private ref = (instance: Nullable<React.ReactInstance>) => {\n    this.setRootNode(instance);\n    this.props.rootNodeRef?.(getRootNode(instance));\n\n    // refs are called when instances change\n    // so we have to renew or remove old subscription\n    this.rootNodeSubscription?.remove();\n    this.rootNodeSubscription = null;\n\n    if (instance && isInstanceWithRootNode(instance)) {\n      this.rootNodeSubscription = instance.addRootNodeChangeListener?.((node) => {\n        this.setRootNode(node);\n        this.props.rootNodeRef?.(node);\n      });\n    }\n\n    const originalRef = (this.child as React.RefAttributes<any>)?.ref;\n    originalRef && callChildRef(originalRef, instance);\n  };\n}\n\nconst extractCommonProps = <P extends CommonProps & CommonPropsRootNodeRef>(\n  props: P,\n): [CommonProps & CommonPropsRootNodeRef, NotCommonProps<P>] => {\n  const common = {} as CommonProps & CommonPropsRootNodeRef;\n  const rest = {} as NotCommonProps<P>;\n\n  for (const key in props) {\n    if (isCommonProp(key)) {\n      // @ts-ignore\n      common[key] = props[key];\n    } else {\n      // @ts-ignore\n      rest[key] = props[key];\n    }\n  }\n\n  return [common, rest];\n};\n\nconst isCommonProp = (name: string) => {\n  switch (true) {\n    case name === 'className':\n    case name === 'style':\n    case name === 'rootNodeRef':\n    case name === 'children':\n    case name.indexOf('data-') === 0: // все data-атрибуты\n      return true;\n    default:\n      return false;\n  }\n};\n"]}
+{"version":3,"sources":["CommonWrapper.tsx"],"names":["React","isFunction","isRefableElement","cx","getRootNode","rootNode","isInstanceWithRootNode","callChildRef","CommonWrapper","rootNodeSubscription","ref","instance","setRootNode","props","rootNodeRef","remove","addRootNodeChangeListener","node","originalRef","child","render","extractCommonProps","className","style","children","dataProps","rest","isValidElement","cloneElement","Component","common","key","isCommonProp","name","indexOf"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { isFunction, isRefableElement } from '../../lib/utils';\nimport { cx } from '../../lib/theming/Emotion';\nimport { Nullable } from '../../typings/utility-types';\nimport { getRootNode, rootNode, TSetRootNode, TRootNodeSubscription, isInstanceWithRootNode } from '../../lib/rootNode';\nimport { callChildRef } from '../../lib/callChildRef/callChildRef';\n\nexport interface CommonProps {\n  /**\n   * HTML-атрибут `class`.\n   */\n  className?: React.HTMLAttributes<HTMLElement>['className'];\n  /**\n   * HTML-атрибут `style`.\n   */\n  style?: React.HTMLAttributes<HTMLElement>['style'];\n  /**\n   * На равне с data-tid транслируются любые data-атрибуты. Они попадают на корневой элемент.\n   */\n  'data-tid'?: string;\n  children?: React.ReactNode;\n}\n\ninterface CommonPropsRootNodeRef {\n  rootNodeRef?: (instance: Nullable<Element>) => void;\n}\n\nexport type NotCommonProps<P> = Omit<P, keyof CommonProps>;\n\nexport type CommonWrapperProps<P> = P & {\n  children: React.ReactNode | ((rest: CommonWrapperRestProps<P>) => React.ReactNode);\n};\nexport type CommonWrapperRestProps<P> = Omit<NotCommonProps<P>, 'children'>;\n\n@rootNode\nexport class CommonWrapper<P extends CommonProps & CommonPropsRootNodeRef> extends React.Component<\n  CommonWrapperProps<P> & CommonPropsRootNodeRef\n> {\n  private child: React.ReactNode;\n  private setRootNode!: TSetRootNode;\n  private rootNodeSubscription: Nullable<TRootNodeSubscription> = null;\n\n  render() {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const [{ className, style, children, rootNodeRef, ...dataProps }, { ...rest }] = extractCommonProps(this.props);\n    this.child = isFunction(children) ? children(rest) : children;\n    return React.isValidElement<CommonProps & React.RefAttributes<any>>(this.child)\n      ? React.cloneElement(this.child, {\n          ref: isRefableElement(this.child) ? this.ref : null,\n          className: cx(this.child.props.className, className),\n          style: {\n            ...this.child.props.style,\n            ...style,\n          },\n          ...dataProps,\n        })\n      : this.child;\n  }\n\n  private ref = (instance: Nullable<React.ReactInstance>) => {\n    this.setRootNode(instance);\n    this.props.rootNodeRef?.(getRootNode(instance));\n\n    // refs are called when instances change\n    // so we have to renew or remove old subscription\n    this.rootNodeSubscription?.remove();\n    this.rootNodeSubscription = null;\n\n    if (instance && isInstanceWithRootNode(instance)) {\n      this.rootNodeSubscription = instance.addRootNodeChangeListener?.((node) => {\n        this.setRootNode(node);\n        this.props.rootNodeRef?.(node);\n      });\n    }\n\n    const originalRef = (this.child as React.RefAttributes<any>)?.ref;\n    originalRef && callChildRef(originalRef, instance);\n  };\n}\n\nconst extractCommonProps = <P extends CommonProps & CommonPropsRootNodeRef>(\n  props: P,\n): [CommonProps & CommonPropsRootNodeRef, NotCommonProps<P>] => {\n  const common = {} as CommonProps & CommonPropsRootNodeRef;\n  const rest = {} as NotCommonProps<P>;\n\n  for (const key in props) {\n    if (isCommonProp(key)) {\n      // @ts-expect-error: See: https://github.com/skbkontur/retail-ui/pull/2257#discussion_r565275843 and https://github.com/skbkontur/retail-ui/pull/2257#discussion_r569542736.\n      common[key] = props[key];\n    } else {\n      // @ts-expect-error: Read the comment above.\n      rest[key] = props[key];\n    }\n  }\n\n  return [common, rest];\n};\n\nconst isCommonProp = (name: string) => {\n  switch (true) {\n    case name === 'className':\n    case name === 'style':\n    case name === 'rootNodeRef':\n    case name === 'children':\n    case name.indexOf('data-') === 0: // все data-атрибуты\n      return true;\n    default:\n      return false;\n  }\n};\n"]}

package/internal/CommonWrapper/CommonWrapper.d.ts

@@ -16,7 +16,7 @@ export interface CommonProps {
     children?: React.ReactNode;
 }
 interface CommonPropsRootNodeRef {
-    rootNodeRef?: (instance: Nullable<HTMLElement>) => void;
+    rootNodeRef?: (instance: Nullable<Element>) => void;
 }
 export declare type NotCommonProps<P> = Omit<P, keyof CommonProps>;
 export declare type CommonWrapperProps<P> = P & {

package/internal/ComponentCombinator/ComponentCombinator.js

@@ -1,5 +1,6 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
+import { createPropsGetter } from "../../lib/createPropsGetter";
 import { ComponentTable } from "../ComponentTable";
 export var ComponentCombinator = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(ComponentCombinator, _React$Component);
@@ -12,6 +13,7 @@ export var ComponentCombinator = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(ComponentCombinator.defaultProps);
     _this.state = {
       page: 0
     };
@@ -45,9 +47,12 @@ export var ComponentCombinator = /*#__PURE__*/function (_React$Component) {
     var page = this.state.page;
     var _this$props = this.props,
         combinations = _this$props.combinations,
-        Component = _this$props.Component,
-        presetProps = _this$props.presetProps,
-        presetState = _this$props.presetState;
+        Component = _this$props.Component;
+
+    var _this$getProps = this.getProps(),
+        presetProps = _this$getProps.presetProps,
+        presetState = _this$getProps.presetState;
+
     var pages = [];
     var row = 0;
     var sizes = combinations.map(function (c) {
@@ -90,8 +95,6 @@ export var ComponentCombinator = /*#__PURE__*/function (_React$Component) {
   return ComponentCombinator;
 }(React.Component);
 ComponentCombinator.defaultProps = {
-  props: [],
-  states: [],
   presetProps: {},
   presetState: {}
 };

package/internal/ComponentCombinator/ComponentCombinator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ComponentCombinator.tsx"],"names":["React","ComponentTable","ComponentCombinator","state","page","prevPage","setState","nextPage","render","props","combinations","Component","presetProps","presetState","pages","row","sizes","map","c","length","flatCombinations","concat","j","push","offsetX","offsetY","pageOffsets","marginBottom","slice","defaultProps","states"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;;;AAIA,SAASC,cAAT,QAAkE,kBAAlE;;;;;;;;;AASA,WAAaC,mBAAb;;;;;;;;;;;;;;;AAeSC,IAAAA,KAfT,GAeiB;AACbC,MAAAA,IAAI,EAAE,CADO,EAfjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DUC,IAAAA,QA9DV,GA8DqB,YAAM;AACvB,YAAKC,QAAL,CAAc,qBAAGF,IAAH,QAAGA,IAAH,QAAe;AAC3BA,UAAAA,IAAI,EAAEA,IAAI,GAAG,CADc,EAAf,EAAd;;AAGD,KAlEH;;AAoEUG,IAAAA,QApEV,GAoEqB,YAAM;AACvB,YAAKD,QAAL,CAAc,sBAAGF,IAAH,SAAGA,IAAH,QAAe;AAC3BA,UAAAA,IAAI,EAAEA,IAAI,GAAG,CADc,EAAf,EAAd;;AAGD,KAxEH,iEAmBSI,MAnBT,GAmBE,kBAAgB,WACd,IAAQJ,IAAR,GAAiB,KAAKD,KAAtB,CAAQC,IAAR,CACA,kBAA8D,KAAKK,KAAnE,CAAQC,YAAR,eAAQA,YAAR,CAAsBC,SAAtB,eAAsBA,SAAtB,CAAiCC,WAAjC,eAAiCA,WAAjC,CAA8CC,WAA9C,eAA8CA,WAA9C,CACA,IAAMC,KAAK,GAAG,EAAd,CACA,IAAIC,GAAG,GAAG,CAAV,CACA,IAAMC,KAAK,GAAGN,YAAY,CAACO,GAAb,CAAiB,UAACC,CAAD,UAAOA,CAAC,CAACC,MAAT,EAAjB,CAAd,CACA,IAAMC,gBAAgB,GAAG,SAAC,EAAD,EAA+BC,MAA/B,cAAyCX,YAAzC,CAAzB,CAEA,KAAK,IAAIY,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGN,KAAK,CAACG,MAAN,GAAe,CAAnC,EAAsCG,CAAC,EAAvC,EAA2C,CACzCR,KAAK,CAACS,IAAN,CAAW,EACTC,OAAO,EAAET,GADA,EAETU,OAAO,EAAGV,GAAG,IAAIC,KAAK,CAACM,CAAD,CAFb,EAAX,EAID,CAED,IAAMI,WAAW,GAAGZ,KAAK,CAACV,IAAD,CAAzB,CACA,oBACE,8CACE,6BAAK,EAAE,EAAC,WAAR,EAAoB,KAAK,EAAE,EAAEuB,YAAY,EAAE,CAAhB,EAA3B,iBACE,gCAAQ,QAAQ,EAAEvB,IAAI,KAAK,CAA3B,EAA8B,EAAE,EAAC,WAAjC,EAA6C,OAAO,EAAE,KAAKC,QAA3D,WADF,EAGY,GAHZ,eAIE,mCAAWD,IAAI,GAAG,CAAlB,WAAyBU,KAAK,CAACK,MAA/B,CAJF,EAImD,GAJnD,eAKE,gCAAQ,QAAQ,EAAEf,IAAI,GAAG,CAAP,IAAYU,KAAK,CAACK,MAApC,EAA4C,EAAE,EAAC,WAA/C,EAA2D,OAAO,EAAE,KAAKZ,QAAzE,WALF,CADF,eAUE,iCACGmB,WAAW,iBACV,oBAAC,cAAD,IACE,GAAG,EAAEtB,IADP,EAEE,SAAS,EAAEO,SAFb,EAGE,WAAW,EAAEC,WAHf,EAIE,WAAW,EAAEC,WAJf,EAKE,IAAI,EAAEO,gBAAgB,CAACQ,KAAjB,CAAuBF,WAAW,CAACD,OAAnC,EAA4CL,gBAAgB,CAACD,MAA7D,CALR,EAME,IAAI,EAAEC,gBAAgB,CAACQ,KAAjB,CAAuBF,WAAW,CAACF,OAAnC,EAA4CE,WAAW,CAACD,OAAxD,CANR,GAFJ,CAVF,CADF,CAyBD,CA5DH,8BAIUzB,KAAK,CAACW,SAJhB,EAAaT,mB,CAQG2B,Y,GAAe,EAC3BpB,KAAK,EAAE,EADoB,EAE3BqB,MAAM,EAAE,EAFmB,EAG3BlB,WAAW,EAAE,EAHc,EAI3BC,WAAW,EAAE,EAJc,E","sourcesContent":["import React from 'react';\n\nimport { DefaultizeProps } from '../lib/utils';\n\nimport { ComponentTable, StatePropsCombinations, StateType } from './ComponentTable';\n\nexport interface ComponentCombinatorProps<C, P, S> {\n  combinations: Array<StatePropsCombinations<P, S>>;\n  Component: C;\n  presetProps: DefaultizeProps<C, P>;\n  presetState: Partial<S>;\n}\n\nexport class ComponentCombinator<\n  T extends React.Component<any, any, any>,\n  C extends React.ComponentType<any>,\n  P extends React.ComponentProps<C>,\n> extends React.Component<\n  ComponentCombinatorProps<C extends React.ComponentClass<P, any> ? React.ClassType<P, T, C> : C, P, StateType<C>>,\n  { page: number }\n> {\n  public static defaultProps = {\n    props: [],\n    states: [],\n    presetProps: {},\n    presetState: {},\n  };\n\n  public state = {\n    page: 0,\n  };\n\n  public render() {\n    const { page } = this.state;\n    const { combinations, Component, presetProps, presetState } = this.props;\n    const pages = [];\n    let row = 0;\n    const sizes = combinations.map((c) => c.length);\n    const flatCombinations = ([] as typeof combinations[0]).concat(...combinations);\n\n    for (let j = 0; j < sizes.length - 1; j++) {\n      pages.push({\n        offsetX: row,\n        offsetY: (row += sizes[j]),\n      });\n    }\n\n    const pageOffsets = pages[page];\n    return (\n      <div>\n        <div id=\"paginator\" style={{ marginBottom: 5 }}>\n          <button disabled={page === 0} id=\"prev-page\" onClick={this.prevPage}>\n            Prev\n          </button>{' '}\n          <small>{`${page + 1} / ${pages.length}`}</small>{' '}\n          <button disabled={page + 1 >= pages.length} id=\"next-page\" onClick={this.nextPage}>\n            Next\n          </button>\n        </div>\n        <div>\n          {pageOffsets && (\n            <ComponentTable\n              key={page}\n              Component={Component}\n              presetProps={presetProps}\n              presetState={presetState}\n              rows={flatCombinations.slice(pageOffsets.offsetY, flatCombinations.length)}\n              cols={flatCombinations.slice(pageOffsets.offsetX, pageOffsets.offsetY)}\n            />\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  private prevPage = () => {\n    this.setState(({ page }) => ({\n      page: page - 1,\n    }));\n  };\n\n  private nextPage = () => {\n    this.setState(({ page }) => ({\n      page: page + 1,\n    }));\n  };\n}\n"]}
+{"version":3,"sources":["ComponentCombinator.tsx"],"names":["React","createPropsGetter","ComponentTable","ComponentCombinator","getProps","defaultProps","state","page","prevPage","setState","nextPage","render","props","combinations","Component","presetProps","presetState","pages","row","sizes","map","c","length","flatCombinations","concat","j","push","offsetX","offsetY","pageOffsets","marginBottom","slice"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { DefaultizeProps } from '../lib/utils';\nimport { createPropsGetter } from '../lib/createPropsGetter';\n\nimport { ComponentTable, StatePropsCombinations, StateType } from './ComponentTable';\n\nexport interface ComponentCombinatorProps<C, P, S> {\n  combinations: Array<StatePropsCombinations<P, S>>;\n  Component: C;\n  presetProps?: DefaultizeProps<C, P>;\n  presetState?: Partial<S>;\n}\n\ntype DefaultProps<T, C, P> = Required<Pick<ComponentCombinatorProps<T, C, P>, 'presetProps' | 'presetState'>>;\n\nexport class ComponentCombinator<\n  T extends React.Component<any, any, any>,\n  C extends React.ComponentType<any>,\n  P extends React.ComponentProps<C>,\n> extends React.Component<\n  ComponentCombinatorProps<C extends React.ComponentClass<P, any> ? React.ClassType<P, T, C> : C, P, StateType<C>>,\n  { page: number }\n> {\n  public static defaultProps: DefaultProps<unknown, unknown, unknown> = {\n    presetProps: {},\n    presetState: {},\n  };\n\n  private getProps = createPropsGetter(ComponentCombinator.defaultProps);\n\n  public state = {\n    page: 0,\n  };\n\n  public render() {\n    const { page } = this.state;\n    const { combinations, Component } = this.props;\n    const { presetProps, presetState } = this.getProps();\n    const pages = [];\n    let row = 0;\n    const sizes = combinations.map((c) => c.length);\n    const flatCombinations = ([] as typeof combinations[0]).concat(...combinations);\n\n    for (let j = 0; j < sizes.length - 1; j++) {\n      pages.push({\n        offsetX: row,\n        offsetY: (row += sizes[j]),\n      });\n    }\n\n    const pageOffsets = pages[page];\n    return (\n      <div>\n        <div id=\"paginator\" style={{ marginBottom: 5 }}>\n          <button disabled={page === 0} id=\"prev-page\" onClick={this.prevPage}>\n            Prev\n          </button>{' '}\n          <small>{`${page + 1} / ${pages.length}`}</small>{' '}\n          <button disabled={page + 1 >= pages.length} id=\"next-page\" onClick={this.nextPage}>\n            Next\n          </button>\n        </div>\n        <div>\n          {pageOffsets && (\n            <ComponentTable\n              key={page}\n              Component={Component}\n              presetProps={presetProps as DefaultizeProps<C, P>}\n              presetState={presetState}\n              rows={flatCombinations.slice(pageOffsets.offsetY, flatCombinations.length)}\n              cols={flatCombinations.slice(pageOffsets.offsetX, pageOffsets.offsetY)}\n            />\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  private prevPage = () => {\n    this.setState(({ page }) => ({\n      page: page - 1,\n    }));\n  };\n\n  private nextPage = () => {\n    this.setState(({ page }) => ({\n      page: page + 1,\n    }));\n  };\n}\n"]}

package/internal/ComponentCombinator.d.ts

@@ -4,18 +4,15 @@ import { StatePropsCombinations, StateType } from './ComponentTable';
 export interface ComponentCombinatorProps<C, P, S> {
     combinations: Array<StatePropsCombinations<P, S>>;
     Component: C;
-    presetProps: DefaultizeProps<C, P>;
-    presetState: Partial<S>;
+    presetProps?: DefaultizeProps<C, P>;
+    presetState?: Partial<S>;
 }
+declare type DefaultProps<T, C, P> = Required<Pick<ComponentCombinatorProps<T, C, P>, 'presetProps' | 'presetState'>>;
 export declare class ComponentCombinator<T extends React.Component<any, any, any>, C extends React.ComponentType<any>, P extends React.ComponentProps<C>> extends React.Component<ComponentCombinatorProps<C extends React.ComponentClass<P, any> ? React.ClassType<P, T, C> : C, P, StateType<C>>, {
     page: number;
 }> {
-    static defaultProps: {
-        props: never[];
-        states: never[];
-        presetProps: {};
-        presetState: {};
-    };
+    static defaultProps: DefaultProps<unknown, unknown, unknown>;
+    private getProps;
     state: {
         page: number;
     };
@@ -23,3 +20,4 @@ export declare class ComponentCombinator<T extends React.Component<any, any, any
     private prevPage;
     private nextPage;
 }
+export {};

package/internal/ComponentTable/ComponentTable.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
-import { isFunctionalComponent } from "../../lib/utils"; // TODO We should output state too
+import { isFunctionalComponent } from "../../lib/utils";
+import { createPropsGetter } from "../../lib/createPropsGetter"; // TODO We should output state too
 
 var renderPropsDesc = function renderPropsDesc(props) {
   return Object.keys(props).map(function (key) {
@@ -36,7 +37,15 @@ export var ComponentTable = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(ComponentTable, _React$Component);
 
   function ComponentTable() {
-    return _React$Component.apply(this, arguments) || this;
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(ComponentTable.defaultProps);
+    return _this;
   }
 
   var _proto = ComponentTable.prototype;
@@ -47,9 +56,12 @@ export var ComponentTable = /*#__PURE__*/function (_React$Component) {
         rows = _this$props$rows === void 0 ? [] : _this$props$rows,
         _this$props$cols = _this$props.cols,
         cols = _this$props$cols === void 0 ? [] : _this$props$cols,
-        presetProps = _this$props.presetProps,
-        presetState = _this$props.presetState,
         Component = _this$props.Component;
+
+    var _this$getProps = this.getProps(),
+        presetProps = _this$getProps.presetProps,
+        presetState = _this$getProps.presetState;
+
     return /*#__PURE__*/React.createElement("table", {
       style: {
         borderSpacing: 10,

package/internal/ComponentTable/ComponentTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ComponentTable.tsx"],"names":["React","isFunctionalComponent","renderPropsDesc","props","Object","keys","map","key","value","isValidElement","createElement","JSON","stringify","node","index","nodes","length","ComponentTable","render","rows","cols","presetProps","presetState","Component","borderSpacing","marginBottom","captionSide","i","colProps","whiteSpace","rowIndex","rowProps","state","rowState","colIndex","colState","undefined","el","setState","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { isFunctionalComponent, DefaultizeProps } from '../lib/utils';\n\n// TODO We should output state too\nconst renderPropsDesc = <P extends Record<string, any>>(props: P): React.ReactNode => {\n  return Object.keys(props)\n    .map((key) => {\n      const value = props[key];\n      switch (typeof value) {\n        case 'boolean':\n          return value ? key : `${key}: false`;\n        case 'string':\n          return `${key}: \"${value}\"`;\n        case 'object':\n          if (React.isValidElement(value)) {\n            return React.createElement('span', {}, [`${key}: `, value]);\n          }\n          return `${key}: ${JSON.stringify(value)}`;\n        default:\n          return `${key}: ${value}`;\n      }\n    })\n    .map((node, index, nodes) => (\n      <span key={index}>\n        {node} {index + 1 < nodes.length ? ', ' : null}\n      </span>\n    ));\n};\n\ntype StatePropsObject<P, S> = { props?: Partial<P>; state?: Partial<S> };\nexport type StatePropsCombinations<P, S> = Array<StatePropsObject<P, S>>;\n\nexport type StateType<C> = C extends React.Component<any, infer S> | React.ComponentClass<any, infer S> ? S : never;\n\nexport interface ComponentTableProps<C, P, S> {\n  rows?: StatePropsCombinations<P, S>;\n  cols?: StatePropsCombinations<P, S>;\n  presetProps: DefaultizeProps<C, P>;\n  presetState: Partial<S>;\n  Component: C;\n}\n\n// Known limitation: Don't work when component have `propTypes` static field\nexport class ComponentTable<\n  T extends React.Component<any, any, any>,\n  C extends React.ComponentType<any>,\n  P extends React.ComponentProps<C>,\n> extends React.Component<\n  ComponentTableProps<C extends React.ComponentClass<P, any> ? React.ClassType<P, T, C> : C, P, StateType<C>>\n> {\n  public static defaultProps = { presetProps: {}, presetState: {} };\n\n  public render() {\n    const { rows = [], cols = [], presetProps, presetState, Component } = this.props;\n    return (\n      <table style={{ borderSpacing: 10, marginBottom: 20 }}>\n        <caption style={{ captionSide: 'bottom' }}>{renderPropsDesc(presetProps)}</caption>\n        <thead>\n          <tr>\n            <th />\n            {cols.map(({ props: colProps = {} }, i) => (\n              <th style={{ whiteSpace: 'nowrap' }} key={i}>\n                {renderPropsDesc(colProps)}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map(({ props: rowProps = {}, state: rowState = {} }, rowIndex) => (\n            <tr key={rowIndex}>\n              <td style={{ whiteSpace: 'nowrap' }}>{renderPropsDesc(rowProps)}</td>\n              {cols.map(({ props: colProps = {}, state: colState = {} }, colIndex) => (\n                <td key={colIndex}>\n                  {/* Defaultized props incompatible with JSX.LibraryManagedAttributes so just ignore it\n                  // @ts-ignore */}\n                  <Component\n                    {...presetProps}\n                    {...rowProps}\n                    {...colProps}\n                    ref={\n                      // NOTE Call setState from outside is bad practice, but here it needed for test state combinations\n                      isFunctionalComponent(Component)\n                        ? undefined\n                        : (el: React.Component<P, StateType<C>>) =>\n                            el &&\n                            el.setState((state: StateType<C>) => ({\n                              ...state,\n                              ...presetState,\n                              ...rowState,\n                              ...colState,\n                            }))\n                    }\n                  />\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["ComponentTable.tsx"],"names":["React","isFunctionalComponent","createPropsGetter","renderPropsDesc","props","Object","keys","map","key","value","isValidElement","createElement","JSON","stringify","node","index","nodes","length","ComponentTable","getProps","defaultProps","render","rows","cols","Component","presetProps","presetState","borderSpacing","marginBottom","captionSide","i","colProps","whiteSpace","rowIndex","rowProps","state","rowState","colIndex","colState","undefined","el","setState"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { isFunctionalComponent, DefaultizeProps } from '../lib/utils';\nimport { createPropsGetter } from '../lib/createPropsGetter';\n\n// TODO We should output state too\nconst renderPropsDesc = <P extends Record<string, any>>(props: P): React.ReactNode => {\n  return Object.keys(props)\n    .map((key) => {\n      const value = props[key];\n      switch (typeof value) {\n        case 'boolean':\n          return value ? key : `${key}: false`;\n        case 'string':\n          return `${key}: \"${value}\"`;\n        case 'object':\n          if (React.isValidElement(value)) {\n            return React.createElement('span', {}, [`${key}: `, value]);\n          }\n          return `${key}: ${JSON.stringify(value)}`;\n        default:\n          return `${key}: ${value}`;\n      }\n    })\n    .map((node, index, nodes) => (\n      <span key={index}>\n        {node} {index + 1 < nodes.length ? ', ' : null}\n      </span>\n    ));\n};\n\ninterface StatePropsObject<P, S> {\n  props?: Partial<P>;\n  state?: Partial<S>;\n}\nexport type StatePropsCombinations<P, S> = Array<StatePropsObject<P, S>>;\n\nexport type StateType<C> = C extends React.Component<any, infer S> | React.ComponentClass<any, infer S> ? S : never;\n\nexport interface ComponentTableProps<C, P, S> {\n  rows?: StatePropsCombinations<P, S>;\n  cols?: StatePropsCombinations<P, S>;\n  presetProps?: DefaultizeProps<C, P>;\n  presetState?: Partial<S>;\n  Component: C;\n}\n\ntype DefaultProps<C, P, S> = Required<Pick<ComponentTableProps<C, P, S>, 'presetProps' | 'presetState'>>;\n\n// Known limitation: Don't work when component have `propTypes` static field\nexport class ComponentTable<\n  T extends React.Component<any, any, any>,\n  C extends React.ComponentType<any>,\n  P extends React.ComponentProps<C>,\n> extends React.Component<\n  ComponentTableProps<C extends React.ComponentClass<P, any> ? React.ClassType<P, T, C> : C, P, StateType<C>>\n> {\n  public static defaultProps: DefaultProps<unknown, Record<string | number | symbol, unknown>, unknown> = {\n    presetProps: {},\n    presetState: {},\n  };\n\n  private getProps = createPropsGetter(ComponentTable.defaultProps);\n\n  public render() {\n    const { rows = [], cols = [], Component } = this.props;\n    const { presetProps, presetState } = this.getProps();\n    return (\n      <table style={{ borderSpacing: 10, marginBottom: 20 }}>\n        <caption style={{ captionSide: 'bottom' }}>{renderPropsDesc(presetProps)}</caption>\n        <thead>\n          <tr>\n            <th />\n            {cols.map(({ props: colProps = {} }, i) => (\n              <th style={{ whiteSpace: 'nowrap' }} key={i}>\n                {renderPropsDesc(colProps)}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map(({ props: rowProps = {}, state: rowState = {} }, rowIndex) => (\n            <tr key={rowIndex}>\n              <td style={{ whiteSpace: 'nowrap' }}>{renderPropsDesc(rowProps)}</td>\n              {cols.map(({ props: colProps = {}, state: colState = {} }, colIndex) => (\n                <td key={colIndex}>\n                  {/* @ts-expect-error: Defaultized props incompatible with JSX.LibraryManagedAttributes so just ignore it */}\n                  <Component\n                    {...presetProps}\n                    {...rowProps}\n                    {...colProps}\n                    ref={\n                      // NOTE Call setState from outside is bad practice, but here it needed for test state combinations\n                      isFunctionalComponent(Component)\n                        ? undefined\n                        : (el: React.Component<P, StateType<C>>) =>\n                            el &&\n                            el.setState((state: StateType<C>) => ({\n                              ...state,\n                              ...presetState,\n                              ...rowState,\n                              ...colState,\n                            }))\n                    }\n                  />\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    );\n  }\n}\n"]}

package/internal/ComponentTable.d.ts

@@ -1,23 +1,22 @@
 import React from 'react';
 import { DefaultizeProps } from '../lib/utils';
-declare type StatePropsObject<P, S> = {
+interface StatePropsObject<P, S> {
     props?: Partial<P>;
     state?: Partial<S>;
-};
+}
 export declare type StatePropsCombinations<P, S> = Array<StatePropsObject<P, S>>;
 export declare type StateType<C> = C extends React.Component<any, infer S> | React.ComponentClass<any, infer S> ? S : never;
 export interface ComponentTableProps<C, P, S> {
     rows?: StatePropsCombinations<P, S>;
     cols?: StatePropsCombinations<P, S>;
-    presetProps: DefaultizeProps<C, P>;
-    presetState: Partial<S>;
+    presetProps?: DefaultizeProps<C, P>;
+    presetState?: Partial<S>;
     Component: C;
 }
+declare type DefaultProps<C, P, S> = Required<Pick<ComponentTableProps<C, P, S>, 'presetProps' | 'presetState'>>;
 export declare class ComponentTable<T extends React.Component<any, any, any>, C extends React.ComponentType<any>, P extends React.ComponentProps<C>> extends React.Component<ComponentTableProps<C extends React.ComponentClass<P, any> ? React.ClassType<P, T, C> : C, P, StateType<C>>> {
-    static defaultProps: {
-        presetProps: {};
-        presetState: {};
-    };
+    static defaultProps: DefaultProps<unknown, Record<string | number | symbol, unknown>, unknown>;
+    private getProps;
     render(): JSX.Element;
 }
 export {};

package/internal/CustomComboBox/ComboBoxMenu/ComboBoxMenu.js

@@ -2,13 +2,15 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 
 var _dec, _class, _class2, _temp;
 
-import React, { Component } from 'react';
-import { isNullable } from "../../../lib/utils";
+import React from 'react';
+import { isFunction, isNullable } from "../../../lib/utils";
 import { locale } from "../../../lib/locale/decorators";
 import { Menu } from "../../Menu";
-import { MenuItem } from "../../../components/MenuItem";
+import { isMenuItem, MenuItem } from "../../../components/MenuItem";
 import { Spinner } from "../../../components/Spinner";
 import { MenuSeparator } from "../../../components/MenuSeparator";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { MenuMessage } from "../../MenuMessage";
 import { ComboBoxRequestStatus } from "../CustomComboBoxTypes";
 import { CustomComboBoxLocaleHelper } from "../locale";
 export var ComboBoxMenuDataTids = {
@@ -18,8 +20,8 @@ export var ComboBoxMenuDataTids = {
   items: 'ComboBoxMenu__items',
   item: 'ComboBoxMenu__item'
 };
-export var ComboBoxMenu = (_dec = locale('ComboBox', CustomComboBoxLocaleHelper), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(ComboBoxMenu, _Component);
+export var ComboBoxMenu = (_dec = locale('ComboBox', CustomComboBoxLocaleHelper), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(ComboBoxMenu, _React$Component);
 
   function ComboBoxMenu() {
     var _this;
@@ -28,18 +30,19 @@ export var ComboBoxMenu = (_dec = locale('ComboBox', CustomComboBoxLocaleHelper)
       args[_key] = arguments[_key];
     }
 
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(ComboBoxMenu.defaultProps);
 
     _this.renderItem = function (item, index) {
       // NOTE this is undesireable feature, better
       // to remove it from further versions
       var _this$props = _this.props,
           renderItem = _this$props.renderItem,
-          onValueChange = _this$props.onValueChange;
+          onValueChange = _this$props.onValueChange,
+          itemWrapper = _this$props.itemWrapper;
 
-      if (typeof item === 'function' || /*#__PURE__*/React.isValidElement(item)) {
-        // @ts-ignore
-        var element = typeof item === 'function' ? item() : item;
+      if (isFunction(item) || /*#__PURE__*/React.isValidElement(item)) {
+        var element = isFunction(item) ? item() : item;
         var props = Object.assign({
           key: index,
           onClick: function onClick() {
@@ -50,6 +53,7 @@ export var ComboBoxMenu = (_dec = locale('ComboBox', CustomComboBoxLocaleHelper)
       }
 
       return /*#__PURE__*/React.createElement(MenuItem, {
+        component: itemWrapper == null ? void 0 : itemWrapper(item),
         "data-tid": ComboBoxMenuDataTids.item,
         onClick: function onClick() {
           return onValueChange(item);
@@ -79,8 +83,8 @@ export var ComboBoxMenu = (_dec = locale('ComboBox', CustomComboBoxLocaleHelper)
     } : _this$props2$renderNo,
         renderTotalCount = _this$props2.renderTotalCount,
         maxMenuHeight = _this$props2.maxMenuHeight,
-        requestStatus = _this$props2.requestStatus,
         isMobile = _this$props2.isMobile;
+    var requestStatus = this.getProps().requestStatus;
     var _this$locale = this.locale,
         notFound = _this$locale.notFound,
         errorNetworkButton = _this$locale.errorNetworkButton,
@@ -104,9 +108,8 @@ export var ComboBoxMenu = (_dec = locale('ComboBox', CustomComboBoxLocaleHelper)
         ref: refMenu,
         disableScrollContainer: isMobile,
         "data-tid": ComboBoxMenuDataTids.loading
-      }, /*#__PURE__*/React.createElement(MenuItem, {
-        disabled: true,
-        isMobile: isMobile
+      }, /*#__PURE__*/React.createElement(MenuMessage, {
+        as: "div"
       }, /*#__PURE__*/React.createElement(Spinner, {
         type: "mini",
         dimmed: true
@@ -119,10 +122,8 @@ export var ComboBoxMenu = (_dec = locale('ComboBox', CustomComboBoxLocaleHelper)
         maxHeight: maxHeight,
         disableScrollContainer: isMobile,
         "data-tid": ComboBoxMenuDataTids.failed
-      }, /*#__PURE__*/React.createElement(MenuItem, {
-        disabled: true,
-        key: "message",
-        isMobile: isMobile
+      }, /*#__PURE__*/React.createElement(MenuMessage, {
+        key: "message"
       }, /*#__PURE__*/React.createElement("div", {
         style: {
           maxWidth: 300,
@@ -130,7 +131,7 @@ export var ComboBoxMenu = (_dec = locale('ComboBox', CustomComboBoxLocaleHelper)
         }
       }, errorNetworkMessage)), /*#__PURE__*/React.createElement(MenuItem, {
         link: true,
-        onClick: this.props.repeatRequest,
+        onClick: this.getProps().repeatRequest,
         key: "retry",
         isMobile: isMobile
       }, errorNetworkButton));
@@ -152,10 +153,8 @@ export var ComboBoxMenu = (_dec = locale('ComboBox', CustomComboBoxLocaleHelper)
           maxHeight: maxHeight,
           ref: refMenu,
           disableScrollContainer: isMobile
-        }, /*#__PURE__*/React.createElement(MenuItem, {
-          "data-tid": ComboBoxMenuDataTids.notFound,
-          disabled: true,
-          isMobile: isMobile
+        }, /*#__PURE__*/React.createElement(MenuMessage, {
+          "data-tid": ComboBoxMenuDataTids.notFound
         }, notFoundValue));
       }
 
@@ -163,19 +162,15 @@ export var ComboBoxMenu = (_dec = locale('ComboBox', CustomComboBoxLocaleHelper)
     }
 
     var total = null;
-    var renderedItems = items && items.map(this.renderItem); // @ts-ignore // todo fix checking
-
-    var countItems = renderedItems == null ? void 0 : renderedItems.filter(function (item) {
-      var _item$type;
-
-      return (item == null ? void 0 : (_item$type = item.type) == null ? void 0 : _item$type.__KONTUR_REACT_UI__) === 'MenuItem';
-    }).length;
+    var renderedItems = items && items.map(this.renderItem);
+    var menuItems = renderedItems == null ? void 0 : renderedItems.filter(function (item) {
+      return isMenuItem(item);
+    });
+    var countItems = menuItems == null ? void 0 : menuItems.length;
 
     if (countItems && renderTotalCount && totalCount && countItems < totalCount) {
-      total = /*#__PURE__*/React.createElement(MenuItem, {
-        disabled: true,
-        key: "total",
-        isMobile: isMobile
+      total = /*#__PURE__*/React.createElement(MenuMessage, {
+        key: "total"
       }, /*#__PURE__*/React.createElement("div", {
         style: {
           fontSize: 12
@@ -194,7 +189,7 @@ export var ComboBoxMenu = (_dec = locale('ComboBox', CustomComboBoxLocaleHelper)
   };
 
   return ComboBoxMenu;
-}(Component), _class2.__KONTUR_REACT_UI__ = 'ComboBoxMenu', _class2.defaultProps = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'ComboBoxMenu', _class2.defaultProps = {
   repeatRequest: function repeatRequest() {
     return undefined;
   },