@skbkontur/react-ui 0.0.0-e55f22da73 → 0.0.0-ea6161656e

package/cjs/internal/CloseButtonIcon/CloseButtonIcon.d.ts

@@ -0,0 +1,35 @@
+import React, { AriaAttributes, CSSProperties } from 'react';
+import { CommonProps } from '../CommonWrapper';
+export interface CloseButtonIconProps extends Pick<AriaAttributes, 'aria-label'>, React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
+    /**
+     * Ширина и высота иконки крестика
+     *
+     * @default 16
+     */
+    size?: number;
+    /**
+     * Ширина и высота всей кнопки
+     *
+     * @default 16
+     */
+    side?: number;
+    /**
+     * Цвет иконки
+     *
+     * Переменная темы: `closeBtnIconColor`
+     */
+    color?: CSSProperties['color'];
+    /**
+     * Цвет иконки при наведении мышью и при фокусе
+     *
+     * Переменная темы: `closeBtnIconHoverColor`
+     */
+    colorHover?: CSSProperties['color'];
+    /**
+     * Возможность сфокусироваться на кнопке клавишей TAB
+     *
+     * @default true
+     * */
+    tabbable?: boolean;
+}
+export declare const CloseButtonIcon: React.FunctionComponent<CloseButtonIconProps>;

package/cjs/internal/CloseButtonIcon/CloseButtonIcon.js

@@ -0,0 +1,107 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.CloseButtonIcon = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireDefault(require("react"));
+var _globalObject = require("@skbkontur/global-object");
+
+var _Emotion = require("../../lib/theming/Emotion");
+var _keyListener = require("../../lib/events/keyListener");
+var _iconConstants = require("../icons2022/iconConstants");
+var _ThemeFactory = require("../../lib/theming/ThemeFactory");
+var _CommonWrapper = require("../CommonWrapper");
+var _useTheme = require("../../lib/theming/useTheme");
+
+var _CloseButtonIcon = require("./CloseButtonIcon.styles");
+var _CrossIcon = require("./CrossIcon");var _excluded = ["side", "size", "color", "colorHover", "tabbable", "style"];
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var CloseButtonIcon = function CloseButtonIcon(_ref)
+
+
+
+
+
+
+
+{var _ref$side = _ref.side,side = _ref$side === void 0 ? _iconConstants.DEFAULT_ICON_SIZE : _ref$side,_ref$size = _ref.size,size = _ref$size === void 0 ? _iconConstants.DEFAULT_ICON_SIZE : _ref$size,color = _ref.color,colorHover = _ref.colorHover,_ref$tabbable = _ref.tabbable,tabbable = _ref$tabbable === void 0 ? true : _ref$tabbable,style = _ref.style,rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  var emotion = (0, _Emotion.useEmotion)();
+  var _theme = (0, _useTheme.useTheme)();
+  var theme = _ThemeFactory.ThemeFactory.create(
+  {
+    closeBtnIconColor: color != null ? color : _theme.closeBtnIconColor,
+    closeBtnIconHoverColor: colorHover != null ? colorHover : _theme.closeBtnIconHoverColor },
+
+  _theme);
+
+  var _React$useState = _react.default.useState(false),focusedByTab = _React$useState[0],setFocusedByTab = _React$useState[1];
+
+  var handleFocus = function handleFocus() {
+    // focus event fires before keyDown eventlistener
+    // so we should check tabPressed in async way
+    _globalObject.globalObject.requestAnimationFrame == null ? void 0 : _globalObject.globalObject.requestAnimationFrame(function () {
+      if (_keyListener.keyListener.isTabPressed) {
+        setFocusedByTab(true);
+      }
+    });
+  };
+  var handleBlur = function handleBlur() {return setFocusedByTab(false);};
+
+  var tabIndex = !tabbable || rest.disabled ? -1 : 0;
+  var styles = (0, _CloseButtonIcon.getStyles)(emotion);
+
+  return /*#__PURE__*/(
+    _react.default.createElement(_CommonWrapper.CommonWrapper, rest, /*#__PURE__*/
+    _react.default.createElement("button", (0, _extends2.default)({
+      tabIndex: tabIndex,
+      className: emotion.cx(
+      styles.root(theme),
+      !rest.disabled && focusedByTab && styles.focus(theme),
+      rest.disabled && styles.rootDisabled(theme)),
+
+      style: (0, _extends2.default)({}, style, { width: side, height: side }),
+      onFocus: handleFocus,
+      onBlur: handleBlur },
+    rest), /*#__PURE__*/
+
+    _react.default.createElement("span", { className: styles.wrapper() }, /*#__PURE__*/
+    _react.default.createElement(_CrossIcon.CrossIcon, { size: side < size ? side : size, focusable: tabIndex >= 0 })))));
+
+
+
+
+};exports.CloseButtonIcon = CloseButtonIcon;
+
+CloseButtonIcon.__KONTUR_REACT_UI__ = 'CloseButtonIcon';
+CloseButtonIcon.displayName = 'CloseButtonIcon';

package/cjs/internal/CloseButtonIcon/CloseButtonIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CloseButtonIcon.tsx"],"names":["CloseButtonIcon","side","DEFAULT_ICON_SIZE","size","color","colorHover","tabbable","style","rest","emotion","_theme","theme","ThemeFactory","create","closeBtnIconColor","closeBtnIconHoverColor","React","useState","focusedByTab","setFocusedByTab","handleFocus","globalObject","requestAnimationFrame","keyListener","isTabPressed","handleBlur","tabIndex","disabled","styles","cx","root","focus","rootDisabled","width","height","wrapper","__KONTUR_REACT_UI__","displayName"],"mappings":"mXAAA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,wC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCO,IAAMA,eAA8D,GAAG,SAAjEA,eAAiE;;;;;;;;AAQxE,sBAPJC,IAOI,CAPJA,IAOI,0BAPGC,gCAOH,8BANJC,IAMI,CANJA,IAMI,0BANGD,gCAMH,aALJE,KAKI,QALJA,KAKI,CAJJC,UAII,QAJJA,UAII,sBAHJC,QAGI,CAHJA,QAGI,8BAHO,IAGP,iBAFJC,KAEI,QAFJA,KAEI,CADDC,IACC;AACJ,MAAMC,OAAO,GAAG,0BAAhB;AACA,MAAMC,MAAM,GAAG,yBAAf;AACA,MAAMC,KAAK,GAAGC,2BAAaC,MAAb;AACZ;AACEC,IAAAA,iBAAiB,EAAEV,KAAF,WAAEA,KAAF,GAAWM,MAAM,CAACI,iBADrC;AAEEC,IAAAA,sBAAsB,EAAEV,UAAF,WAAEA,UAAF,GAAgBK,MAAM,CAACK,sBAF/C,EADY;;AAKZL,EAAAA,MALY,CAAd;;AAOA,wBAAwCM,eAAMC,QAAN,CAAe,KAAf,CAAxC,CAAOC,YAAP,sBAAqBC,eAArB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB;AACA;AACAC,+BAAaC,qBAAb,+CAAaA,qBAAb,CAAqC,YAAM;AACzC,UAAIC,yBAAYC,YAAhB,EAA8B;AAC5BL,QAAAA,eAAe,CAAC,IAAD,CAAf;AACD;AACF,KAJD;AAKD,GARD;AASA,MAAMM,UAAU,GAAG,SAAbA,UAAa,WAAMN,eAAe,CAAC,KAAD,CAArB,EAAnB;;AAEA,MAAMO,QAAQ,GAAG,CAACpB,QAAD,IAAaE,IAAI,CAACmB,QAAlB,GAA6B,CAAC,CAA9B,GAAkC,CAAnD;AACA,MAAMC,MAAM,GAAG,gCAAUnB,OAAV,CAAf;;AAEA;AACE,iCAAC,4BAAD,EAAmBD,IAAnB;AACE;AACE,MAAA,QAAQ,EAAEkB,QADZ;AAEE,MAAA,SAAS,EAAEjB,OAAO,CAACoB,EAAR;AACTD,MAAAA,MAAM,CAACE,IAAP,CAAYnB,KAAZ,CADS;AAET,OAACH,IAAI,CAACmB,QAAN,IAAkBT,YAAlB,IAAkCU,MAAM,CAACG,KAAP,CAAapB,KAAb,CAFzB;AAGTH,MAAAA,IAAI,CAACmB,QAAL,IAAiBC,MAAM,CAACI,YAAP,CAAoBrB,KAApB,CAHR,CAFb;;AAOE,MAAA,KAAK,6BAAOJ,KAAP,IAAc0B,KAAK,EAAEhC,IAArB,EAA2BiC,MAAM,EAAEjC,IAAnC,GAPP;AAQE,MAAA,OAAO,EAAEmB,WARX;AASE,MAAA,MAAM,EAAEK,UATV;AAUMjB,IAAAA,IAVN;;AAYE,2CAAM,SAAS,EAAEoB,MAAM,CAACO,OAAP,EAAjB;AACE,iCAAC,oBAAD,IAAW,IAAI,EAAElC,IAAI,GAAGE,IAAP,GAAcF,IAAd,GAAqBE,IAAtC,EAA4C,SAAS,EAAEuB,QAAQ,IAAI,CAAnE,GADF,CAZF,CADF,CADF;;;;;AAoBD,CAtDM,C;;AAwDP1B,eAAe,CAACoC,mBAAhB,GAAsC,iBAAtC;AACApC,eAAe,CAACqC,WAAhB,GAA8B,iBAA9B","sourcesContent":["import React, { AriaAttributes, CSSProperties } from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { useEmotion } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { DEFAULT_ICON_SIZE } from '../icons2022/iconConstants';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { CommonProps, CommonWrapper } from '../CommonWrapper';\nimport { useTheme } from '../../lib/theming/useTheme';\n\nimport { getStyles } from './CloseButtonIcon.styles';\nimport { CrossIcon } from './CrossIcon';\n\nexport interface CloseButtonIconProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    CommonProps {\n  /**\n   * Ширина и высота иконки крестика\n   *\n   * @default 16\n   */\n  size?: number;\n  /**\n   * Ширина и высота всей кнопки\n   *\n   * @default 16\n   */\n  side?: number;\n  /**\n   * Цвет иконки\n   *\n   * Переменная темы: `closeBtnIconColor`\n   */\n  color?: CSSProperties['color'];\n  /**\n   * Цвет иконки при наведении мышью и при фокусе\n   *\n   * Переменная темы: `closeBtnIconHoverColor`\n   */\n  colorHover?: CSSProperties['color'];\n  /**\n   * Возможность сфокусироваться на кнопке клавишей TAB\n   *\n   * @default true\n   * */\n  tabbable?: boolean;\n}\n\nexport const CloseButtonIcon: React.FunctionComponent<CloseButtonIconProps> = ({\n  side = DEFAULT_ICON_SIZE,\n  size = DEFAULT_ICON_SIZE,\n  color,\n  colorHover,\n  tabbable = true,\n  style,\n  ...rest\n}) => {\n  const emotion = useEmotion();\n  const _theme = useTheme();\n  const theme = ThemeFactory.create(\n    {\n      closeBtnIconColor: color ?? _theme.closeBtnIconColor,\n      closeBtnIconHoverColor: colorHover ?? _theme.closeBtnIconHoverColor,\n    },\n    _theme,\n  );\n  const [focusedByTab, setFocusedByTab] = React.useState(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener\n    // so we should check tabPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n  const handleBlur = () => setFocusedByTab(false);\n\n  const tabIndex = !tabbable || rest.disabled ? -1 : 0;\n  const styles = getStyles(emotion);\n\n  return (\n    <CommonWrapper {...rest}>\n      <button\n        tabIndex={tabIndex}\n        className={emotion.cx(\n          styles.root(theme),\n          !rest.disabled && focusedByTab && styles.focus(theme),\n          rest.disabled && styles.rootDisabled(theme),\n        )}\n        style={{ ...style, width: side, height: side }}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...rest}\n      >\n        <span className={styles.wrapper()}>\n          <CrossIcon size={side < size ? side : size} focusable={tabIndex >= 0} />\n        </span>\n      </button>\n    </CommonWrapper>\n  );\n};\n\nCloseButtonIcon.__KONTUR_REACT_UI__ = 'CloseButtonIcon';\nCloseButtonIcon.displayName = 'CloseButtonIcon';\n"]}

package/cjs/internal/CloseButtonIcon/CloseButtonIcon.styles.d.ts

@@ -0,0 +1,8 @@
+import type { Emotion } from '@emotion/css/create-instance';
+import { Theme } from '../../lib/theming/Theme';
+export declare const getStyles: (emotion: Emotion) => {
+    root(t: Theme): string;
+    rootDisabled(t: Theme): string;
+    focus(t: Theme): string;
+    wrapper(): string;
+};

package/cjs/internal/CloseButtonIcon/CloseButtonIcon.styles.js

@@ -0,0 +1,45 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+
+var _Emotion = require("../../lib/theming/Emotion");
+
+var _Mixins = require("../../lib/styles/Mixins");var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var getStyles = function getStyles(emotion) {return (
+    (0, _Emotion.memoizeStyle)({
+      root: function root(t) {
+        return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n        ", "\n        display: inline-block;\n        position: relative;\n        border-radius: ", ";\n        color: ", ";\n        cursor: pointer;\n        transition: color ", " ", ";\n\n        &:enabled:focus,\n        &:enabled:hover {\n          color: ", ";\n        }\n      "])),
+        (0, _Mixins.resetButton)(emotion),
+
+
+        t.closeBtnIconBorderRadius,
+        t.closeBtnIconColor,
+
+        t.transitionDuration, t.transitionTimingFunction,
+
+
+
+        t.closeBtnIconHoverColor);
+
+
+      },
+      rootDisabled: function rootDisabled(t) {
+        return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n        color: ", ";\n      "])),
+        t.closeBtnIconDisabledColor);
+
+      },
+      focus: function focus(t) {
+        return emotion.css(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: ", ";\n      "])),
+        t.closeBtnIconFocusShadow);
+
+      },
+      wrapper: function wrapper() {
+        return emotion.css(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-sizing: content-box;\n        display: flex;\n        width: 100%;\n        height: 100%;\n        align-items: center;\n        justify-content: center;\n        pointer-events: none;\n      "])));
+
+
+
+
+
+
+
+
+      } }));};exports.getStyles = getStyles;

package/cjs/internal/CloseButtonIcon/CloseButtonIcon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CloseButtonIcon.styles.tsx"],"names":["getStyles","emotion","root","t","css","closeBtnIconBorderRadius","closeBtnIconColor","transitionDuration","transitionTimingFunction","closeBtnIconHoverColor","rootDisabled","closeBtnIconDisabledColor","focus","closeBtnIconFocusShadow","wrapper"],"mappings":";;AAEA;;AAEA,iD;;AAEO,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvB,+BAAa;AACXC,MAAAA,IADW,gBACNC,CADM,EACI;AACb,eAAOF,OAAO,CAACG,GAAf;AACI,iCAAYH,OAAZ,CADJ;;;AAImBE,QAAAA,CAAC,CAACE,wBAJrB;AAKWF,QAAAA,CAAC,CAACG,iBALb;;AAOsBH,QAAAA,CAAC,CAACI,kBAPxB,EAO8CJ,CAAC,CAACK,wBAPhD;;;;AAWaL,QAAAA,CAAC,CAACM,sBAXf;;;AAcD,OAhBU;AAiBXC,MAAAA,YAjBW,wBAiBEP,CAjBF,EAiBY;AACrB,eAAOF,OAAO,CAACG,GAAf;AACWD,QAAAA,CAAC,CAACQ,yBADb;;AAGD,OArBU;AAsBXC,MAAAA,KAtBW,iBAsBLT,CAtBK,EAsBK;AACd,eAAOF,OAAO,CAACG,GAAf;AACgBD,QAAAA,CAAC,CAACU,uBADlB;;AAGD,OA1BU;AA2BXC,MAAAA,OA3BW,qBA2BD;AACR,eAAOb,OAAO,CAACG,GAAf;;;;;;;;;AASD,OArCU,EAAb,CADuB,GAAlB,C","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root(t: Theme) {\n      return emotion.css`\n        ${resetButton(emotion)}\n        display: inline-block;\n        position: relative;\n        border-radius: ${t.closeBtnIconBorderRadius};\n        color: ${t.closeBtnIconColor};\n        cursor: pointer;\n        transition: color ${t.transitionDuration} ${t.transitionTimingFunction};\n\n        &:enabled:focus,\n        &:enabled:hover {\n          color: ${t.closeBtnIconHoverColor};\n        }\n      `;\n    },\n    rootDisabled(t: Theme) {\n      return emotion.css`\n        color: ${t.closeBtnIconDisabledColor};\n      `;\n    },\n    focus(t: Theme) {\n      return emotion.css`\n        box-shadow: ${t.closeBtnIconFocusShadow};\n      `;\n    },\n    wrapper() {\n      return emotion.css`\n        box-sizing: content-box;\n        display: flex;\n        width: 100%;\n        height: 100%;\n        align-items: center;\n        justify-content: center;\n        pointer-events: none;\n      `;\n    },\n  });\n"]}

package/cjs/internal/CloseButtonIcon/CrossIcon.d.ts

@@ -0,0 +1,3 @@
+export declare const CrossIcon: import("../../lib/forwardRefAndName").ReactUIIconWithRef<SVGSVGElement, Omit<import("../icons2022/BaseIcon").IconProps, "size"> & {
+    size?: number | "small" | "medium" | "large" | undefined;
+}>;

package/cjs/internal/CloseButtonIcon/CrossIcon.js

@@ -0,0 +1,14 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.CrossIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+
+var _iconSizer = require("../icons2022/iconSizer");
+var _XIcon20Light = require("../icons2022/XIcon/XIcon20Light");
+var _XIcon24Regular = require("../icons2022/XIcon/XIcon24Regular"); /* eslint-disable react/display-name */
+
+var CrossIcon = (0, _iconSizer.iconSizer)(
+{
+  small: function small() {return /*#__PURE__*/_react.default.createElement(_XIcon20Light.XIcon20Light, { size: 16, align: "none" });},
+  medium: function medium() {return /*#__PURE__*/_react.default.createElement(_XIcon20Light.XIcon20Light, { align: "none" });},
+  large: function large() {return /*#__PURE__*/_react.default.createElement(_XIcon24Regular.XIcon24Regular, { align: "none" });} },
+
+'CrossIcon');exports.CrossIcon = CrossIcon;

package/cjs/internal/CloseButtonIcon/CrossIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CrossIcon.tsx"],"names":["CrossIcon","small","medium","large"],"mappings":";AACA;;AAEA;AACA;AACA,mE,CALA;;AAOO,IAAMA,SAAS,GAAG;AACvB;AACEC,EAAAA,KAAK,EAAE,sCAAM,6BAAC,0BAAD,IAAc,IAAI,EAAE,EAApB,EAAwB,KAAK,EAAC,MAA9B,GAAN,EADT;AAEEC,EAAAA,MAAM,EAAE,uCAAM,6BAAC,0BAAD,IAAc,KAAK,EAAC,MAApB,GAAN,EAFV;AAGEC,EAAAA,KAAK,EAAE,sCAAM,6BAAC,8BAAD,IAAgB,KAAK,EAAC,MAAtB,GAAN,EAHT,EADuB;;AAMvB,WANuB,CAAlB,C","sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\n\nimport { iconSizer } from '../icons2022/iconSizer';\nimport { XIcon20Light } from '../icons2022/XIcon/XIcon20Light';\nimport { XIcon24Regular } from '../icons2022/XIcon/XIcon24Regular';\n\nexport const CrossIcon = iconSizer(\n  {\n    small: () => <XIcon20Light size={16} align=\"none\" />,\n    medium: () => <XIcon20Light align=\"none\" />,\n    large: () => <XIcon24Regular align=\"none\" />,\n  },\n  'CrossIcon',\n);\n"]}

package/cjs/internal/CommonWrapper/CommonWrapper.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { CommonProps, CommonPropsRootNodeRef, CommonWrapperProps } from './types';
+export declare type CommonPropsWithRootNodeRef = CommonProps & CommonPropsRootNodeRef;
+export declare class CommonWrapper<P extends CommonPropsWithRootNodeRef> extends React.Component<CommonWrapperProps<P> & CommonPropsRootNodeRef> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    private child;
+    private setRootNode;
+    private rootNodeSubscription;
+    private emotion;
+    render(): JSX.Element;
+    renderMain(): React.ReactNode;
+    private ref;
+}

package/cjs/internal/CommonWrapper/CommonWrapper.js

@@ -0,0 +1,83 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.CommonWrapper = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+
+
+var _utils = require("../../lib/utils");
+
+var _rootNode = require("../../lib/rootNode");
+var _callChildRef = require("../../lib/callChildRef/callChildRef");
+var _Emotion = require("../../lib/theming/Emotion");
+
+
+var _extractCommonProps2 = require("./extractCommonProps");
+var _getCommonVisualStateDataAttributes = require("./getCommonVisualStateDataAttributes");var _excluded = ["className", "style", "children", "rootNodeRef"];var _class, _class2, _temp;var
+
+
+
+
+CommonWrapper = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(CommonWrapper, _React$Component);function CommonWrapper() {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.
+
+
+
+
+
+
+
+    rootNodeSubscription = null;_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    ref = function (instance) {var _this$rootNodeSubscri, _this$child;
+      _this.setRootNode(instance);
+      _this.props.rootNodeRef == null ? void 0 : _this.props.rootNodeRef((0, _rootNode.getRootNode)(instance));
+
+      // refs are called when instances change,
+      // so we have to renew or remove old subscription
+      (_this$rootNodeSubscri = _this.rootNodeSubscription) == null ? void 0 : _this$rootNodeSubscri.remove();
+      _this.rootNodeSubscription = null;
+
+      if (instance && (0, _rootNode.isInstanceWithRootNode)(instance)) {
+        _this.rootNodeSubscription = instance.addRootNodeChangeListener == null ? void 0 : instance.addRootNodeChangeListener(function (node) {
+          _this.setRootNode(node);
+          _this.props.rootNodeRef == null ? void 0 : _this.props.rootNodeRef(node);
+        });
+      }
+
+      var originalRef = (_this$child = _this.child) == null ? void 0 : _this$child.ref;
+      originalRef && (0, _callChildRef.callChildRef)(originalRef, instance);
+    };return _this;}var _proto = CommonWrapper.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_Emotion.EmotionConsumer, null, function (emotion) {_this2.emotion = emotion;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _this3 = this;var _extractCommonProps = (0, _extractCommonProps2.extractCommonProps)(this.props),_extractCommonProps$ = _extractCommonProps[0],className = _extractCommonProps$.className,style = _extractCommonProps$.style,children = _extractCommonProps$.children,rootNodeRef = _extractCommonProps$.rootNodeRef,dataProps = (0, _objectWithoutPropertiesLoose2.default)(_extractCommonProps$, _excluded),rest = (0, _extends2.default)({}, _extractCommonProps[1]);this.child = (0, _utils.isFunction)(children) ? children(rest) : children;var getChildProps = function getChildProps(child) {var childProps = (0, _extends2.default)({}, (0, _getCommonVisualStateDataAttributes.getCommonVisualStateDataAttributes)(rest), dataProps);(0, _utils.isRefableElement)(child) && (childProps.ref = _this3.ref);var classNames = _this3.emotion.cx(child.props.className, className);classNames && (childProps.className = classNames);var styles = (0, _extends2.default)({}, child.props.style, style);Object.keys(styles).length && (childProps.style = styles);return childProps;};return /*#__PURE__*/_react.default.isValidElement(this.child) ? /*#__PURE__*/_react.default.cloneElement(this.child, getChildProps(this.child)) : this.child;};return CommonWrapper;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'CommonWrapper', _class2.displayName = 'CommonWrapper', _temp)) || _class;exports.CommonWrapper = CommonWrapper;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["CommonWrapper.tsx"],"names":["CommonWrapper","rootNode","rootNodeSubscription","ref","instance","setRootNode","props","rootNodeRef","remove","addRootNodeChangeListener","node","originalRef","child","render","emotion","renderMain","className","style","children","dataProps","rest","getChildProps","childProps","classNames","cx","styles","Object","keys","length","isValidElement","React","cloneElement","Component","__KONTUR_REACT_UI__","displayName"],"mappings":"+cAAA;;;AAGA;;AAEA;AACA;AACA;;;AAGA;AACA,0F;;;;;AAKaA,a,OADZC,kB;;;;;;;;AASSC,IAAAA,oB,GAAwD,I;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCxDC,IAAAA,G,GAAM,UAACC,QAAD,EAA6C;AACzD,YAAKC,WAAL,CAAiBD,QAAjB;AACA,YAAKE,KAAL,CAAWC,WAAX,0BAAKD,KAAL,CAAWC,WAAX,CAAyB,2BAAYH,QAAZ,CAAzB;;AAEA;AACA;AACA,qCAAKF,oBAAL,2CAA2BM,MAA3B;AACA,YAAKN,oBAAL,GAA4B,IAA5B;;AAEA,UAAIE,QAAQ,IAAI,sCAAuBA,QAAvB,CAAhB,EAAkD;AAChD,cAAKF,oBAAL,GAA4BE,QAAQ,CAACK,yBAArC,oBAA4BL,QAAQ,CAACK,yBAAT,CAAqC,UAACC,IAAD,EAAU;AACzE,gBAAKL,WAAL,CAAiBK,IAAjB;AACA,gBAAKJ,KAAL,CAAWC,WAAX,0BAAKD,KAAL,CAAWC,WAAX,CAAyBG,IAAzB;AACD,SAH2B,CAA5B;AAID;;AAED,UAAMC,WAAW,kBAAI,MAAKC,KAAT,qBAAG,YAA0CT,GAA9D;AACAQ,MAAAA,WAAW,IAAI,gCAAaA,WAAb,EAA0BP,QAA1B,CAAf;AACD,K,2DAvDDS,M,GAAA,kBAAS,mBACP,oBACE,6BAAC,wBAAD,QACG,UAACC,OAAD,EAAa,CACZ,MAAI,CAACA,OAAL,GAAeA,OAAf,CACA,OAAO,MAAI,CAACC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,C,QAEDA,U,GAAA,sBAAa,mBACX,0BAAiF,6CAAmB,KAAKT,KAAxB,CAAjF,+CAASU,SAAT,wBAASA,SAAT,CAAoBC,KAApB,wBAAoBA,KAApB,CAA2BC,QAA3B,wBAA2BA,QAA3B,CAAqCX,WAArC,wBAAqCA,WAArC,CAAqDY,SAArD,gFAAuEC,IAAvE,sDACA,KAAKR,KAAL,GAAa,uBAAWM,QAAX,IAAuBA,QAAQ,CAACE,IAAD,CAA/B,GAAwCF,QAArD,CAEA,IAAMG,aAAa,GAAG,SAAhBA,aAAgB,CAACT,KAAD,EAAuE,CAC3F,IAAMU,UAAmC,8BACpC,4EAAmCF,IAAnC,CADoC,EAEpCD,SAFoC,CAAzC,CAKA,6BAAiBP,KAAjB,MAA4BU,UAAU,CAACnB,GAAX,GAAiB,MAAI,CAACA,GAAlD,EAEA,IAAMoB,UAAkB,GAAG,MAAI,CAACT,OAAL,CAAaU,EAAb,CAAgBZ,KAAK,CAACN,KAAN,CAAYU,SAA5B,EAAuCA,SAAvC,CAA3B,CACAO,UAAU,KAAKD,UAAU,CAACN,SAAX,GAAuBO,UAA5B,CAAV,CAEA,IAAME,MAA2B,8BAAQb,KAAK,CAACN,KAAN,CAAYW,KAApB,EAA8BA,KAA9B,CAAjC,CACAS,MAAM,CAACC,IAAP,CAAYF,MAAZ,EAAoBG,MAApB,KAA+BN,UAAU,CAACL,KAAX,GAAmBQ,MAAlD,EAEA,OAAOH,UAAP,CACD,CAfD,CAiBA,OAAO,4BAAMO,cAAN,CAA6D,KAAKjB,KAAlE,iBACHkB,eAAMC,YAAN,CAAmB,KAAKnB,KAAxB,EAA+BS,aAAa,CAAC,KAAKT,KAAN,CAA5C,CADG,GAEH,KAAKA,KAFT,CAGD,C,wBA9CsEkB,eAAME,S,WAG/DC,mB,GAAsB,e,UACtBC,W,GAAc,e","sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { isFunction, isRefableElement } from '../../lib/utils';\nimport { Nullable } from '../../typings/utility-types';\nimport { getRootNode, isInstanceWithRootNode, rootNode, TRootNodeSubscription, TSetRootNode } from '../../lib/rootNode';\nimport { callChildRef } from '../../lib/callChildRef/callChildRef';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\n\nimport type { CommonProps, CommonPropsRootNodeRef, CommonWrapperProps } from './types';\nimport { extractCommonProps } from './extractCommonProps';\nimport { getCommonVisualStateDataAttributes } from './getCommonVisualStateDataAttributes';\n\nexport type CommonPropsWithRootNodeRef = CommonProps & CommonPropsRootNodeRef;\n\n@rootNode\nexport class CommonWrapper<P extends CommonPropsWithRootNodeRef> extends React.Component<\n  CommonWrapperProps<P> & CommonPropsRootNodeRef\n> {\n  public static __KONTUR_REACT_UI__ = 'CommonWrapper';\n  public static displayName = 'CommonWrapper';\n\n  private child: React.ReactNode;\n  private setRootNode!: TSetRootNode;\n  private rootNodeSubscription: Nullable<TRootNodeSubscription> = null;\n  private emotion!: Emotion;\n\n  render() {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return this.renderMain();\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  renderMain() {\n    const [{ className, style, children, rootNodeRef, ...dataProps }, { ...rest }] = extractCommonProps(this.props);\n    this.child = isFunction(children) ? children(rest) : children;\n\n    const getChildProps = (child: React.ReactElement<CommonProps & React.RefAttributes<any>>) => {\n      const childProps: Record<string, unknown> = {\n        ...getCommonVisualStateDataAttributes(rest),\n        ...dataProps,\n      };\n\n      isRefableElement(child) && (childProps.ref = this.ref);\n\n      const classNames: string = this.emotion.cx(child.props.className, className);\n      classNames && (childProps.className = classNames);\n\n      const styles: React.CSSProperties = { ...child.props.style, ...style };\n      Object.keys(styles).length && (childProps.style = styles);\n\n      return childProps;\n    };\n\n    return React.isValidElement<CommonProps & React.RefAttributes<any>>(this.child)\n      ? React.cloneElement(this.child, getChildProps(this.child))\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"]}

package/cjs/internal/CommonWrapper/extractCommonProps.d.ts

@@ -0,0 +1,3 @@
+import type { NotCommonProps } from './types';
+import type { CommonPropsWithRootNodeRef } from './CommonWrapper';
+export declare const extractCommonProps: <P extends CommonPropsWithRootNodeRef>(props: P) => [CommonPropsWithRootNodeRef, NotCommonProps<P>];

package/cjs/internal/CommonWrapper/extractCommonProps.js

@@ -0,0 +1,34 @@
+"use strict";exports.__esModule = true;exports.extractCommonProps = void 0;
+
+
+var extractCommonProps = function extractCommonProps(
+props)
+{
+  var common = {};
+  var rest = {};
+
+  for (var prop in props) {
+    if (isCommonProp(prop)) {
+      // @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[prop] = props[prop];
+    } else {
+      // @ts-expect-error: Read the comment above.
+      rest[prop] = props[prop];
+    }
+  }
+
+  return [common, rest];
+};exports.extractCommonProps = extractCommonProps;
+
+var isCommonProp = function isCommonProp(prop) {
+  switch (true) {
+    case prop === 'className':
+    case prop === 'style':
+    case prop === 'rootNodeRef':
+    case prop === 'children':
+    case prop.indexOf('data-') === 0: // все data-атрибуты
+      return true;
+    default:
+      return false;}
+
+};

package/cjs/internal/CommonWrapper/extractCommonProps.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["extractCommonProps.ts"],"names":["extractCommonProps","props","common","rest","prop","isCommonProp","indexOf"],"mappings":";;;AAGO,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB;AAChCC,KADgC;AAEoB;AACpD,MAAMC,MAAM,GAAG,EAAf;AACA,MAAMC,IAAI,GAAG,EAAb;;AAEA,OAAK,IAAMC,IAAX,IAAmBH,KAAnB,EAA0B;AACxB,QAAII,YAAY,CAACD,IAAD,CAAhB,EAA4D;AAC1D;AACAF,MAAAA,MAAM,CAACE,IAAD,CAAN,GAAeH,KAAK,CAACG,IAAD,CAApB;AACD,KAHD,MAGO;AACL;AACAD,MAAAA,IAAI,CAACC,IAAD,CAAJ,GAAaH,KAAK,CAACG,IAAD,CAAlB;AACD;AACF;;AAED,SAAO,CAACF,MAAD,EAASC,IAAT,CAAP;AACD,CAjBM,C;;AAmBP,IAAME,YAAY,GAAG,SAAfA,YAAe,CAACD,IAAD,EAA4C;AAC/D,UAAQ,IAAR;AACE,SAAKA,IAAI,KAAK,WAAd;AACA,SAAKA,IAAI,KAAK,OAAd;AACA,SAAKA,IAAI,KAAK,aAAd;AACA,SAAKA,IAAI,KAAK,UAAd;AACA,SAAKA,IAAI,CAACE,OAAL,CAAa,OAAb,MAA0B,CAA/B,EAAkC;AAChC,aAAO,IAAP;AACF;AACE,aAAO,KAAP,CARJ;;AAUD,CAXD","sourcesContent":["import type { NotCommonProps } from './types';\nimport type { CommonPropsWithRootNodeRef } from './CommonWrapper';\n\nexport const extractCommonProps = <P extends CommonPropsWithRootNodeRef>(\n  props: P,\n): [CommonPropsWithRootNodeRef, NotCommonProps<P>] => {\n  const common = {} as CommonPropsWithRootNodeRef;\n  const rest = {} as NotCommonProps<P>;\n\n  for (const prop in props) {\n    if (isCommonProp(prop as keyof CommonPropsWithRootNodeRef)) {\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[prop] = props[prop];\n    } else {\n      // @ts-expect-error: Read the comment above.\n      rest[prop] = props[prop];\n    }\n  }\n\n  return [common, rest];\n};\n\nconst isCommonProp = (prop: keyof CommonPropsWithRootNodeRef) => {\n  switch (true) {\n    case prop === 'className':\n    case prop === 'style':\n    case prop === 'rootNodeRef':\n    case prop === 'children':\n    case prop.indexOf('data-') === 0: // все data-атрибуты\n      return true;\n    default:\n      return false;\n  }\n};\n"]}

package/cjs/internal/CommonWrapper/getCommonVisualStateDataAttributes.d.ts

@@ -0,0 +1,2 @@
+import { VisualStateDataAttributesResultType } from './getVisualStateDataAttributes';
+export declare function getCommonVisualStateDataAttributes(componentProps: Record<string, unknown>): VisualStateDataAttributesResultType;

package/cjs/internal/CommonWrapper/getCommonVisualStateDataAttributes.js

@@ -0,0 +1,12 @@
+"use strict";exports.__esModule = true;exports.getCommonVisualStateDataAttributes = getCommonVisualStateDataAttributes;var _getVisualStateDataAttributes = require("./getVisualStateDataAttributes");
+
+var tryGetBoolean = function tryGetBoolean(value) {return typeof value === 'boolean' ? value : undefined;};
+
+function getCommonVisualStateDataAttributes(
+componentProps)
+{
+  return (0, _getVisualStateDataAttributes.getVisualStateDataAttributes)({
+    error: tryGetBoolean(componentProps['error']),
+    warning: tryGetBoolean(componentProps['warning']) });
+
+}

package/cjs/internal/CommonWrapper/getCommonVisualStateDataAttributes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["getCommonVisualStateDataAttributes.ts"],"names":["tryGetBoolean","value","undefined","getCommonVisualStateDataAttributes","componentProps","error","warning"],"mappings":"uHAAA;;AAEA,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,UAA0C,OAAOA,KAAP,KAAiB,SAAjB,GAA6BA,KAA7B,GAAqCC,SAA/E,EAAtB;;AAEO,SAASC,kCAAT;AACLC,cADK;AAEgC;AACrC,SAAO,gEAA6B;AAClCC,IAAAA,KAAK,EAAEL,aAAa,CAACI,cAAc,CAAC,OAAD,CAAf,CADc;AAElCE,IAAAA,OAAO,EAAEN,aAAa,CAACI,cAAc,CAAC,SAAD,CAAf,CAFY,EAA7B,CAAP;;AAID","sourcesContent":["import { getVisualStateDataAttributes, VisualStateDataAttributesResultType } from './getVisualStateDataAttributes';\n\nconst tryGetBoolean = (value: unknown): boolean | undefined => (typeof value === 'boolean' ? value : undefined);\n\nexport function getCommonVisualStateDataAttributes(\n  componentProps: Record<string, unknown>,\n): VisualStateDataAttributesResultType {\n  return getVisualStateDataAttributes({\n    error: tryGetBoolean(componentProps['error']),\n    warning: tryGetBoolean(componentProps['warning']),\n  });\n}\n"]}

package/cjs/internal/CommonWrapper/getVisualStateDataAttributes.d.ts

@@ -0,0 +1,3 @@
+import type { Nullable } from '../../typings/utility-types';
+export declare type VisualStateDataAttributesResultType = Record<string, string>;
+export declare function getVisualStateDataAttributes<T extends Record<string, Nullable<boolean>>>(attributes: T): VisualStateDataAttributesResultType;

package/cjs/internal/CommonWrapper/getVisualStateDataAttributes.js

@@ -0,0 +1,23 @@
+"use strict";exports.__esModule = true;exports.getVisualStateDataAttributes = getVisualStateDataAttributes;var _toKebabCase = require("../../lib/toKebabCase");
+
+
+
+
+var prefix = "data-visual-state-";
+
+function fillResult(result, key, value) {
+  if (value !== null && value !== undefined) {
+    result["" + prefix + (0, _toKebabCase.toKebabCase)(key)] = String(value);
+  }
+
+  return result;
+}
+
+function getVisualStateDataAttributes(
+attributes)
+{
+  return Object.entries(attributes).reduce(
+  function (previousValue, currentValue) {return fillResult(previousValue, currentValue[0], currentValue[1]);},
+  {});
+
+}

package/cjs/internal/CommonWrapper/getVisualStateDataAttributes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["getVisualStateDataAttributes.ts"],"names":["prefix","fillResult","result","key","value","undefined","String","getVisualStateDataAttributes","attributes","Object","entries","reduce","previousValue","currentValue"],"mappings":"2GAAA;;;;;AAKA,IAAMA,MAAM,uBAAZ;;AAEA,SAASC,UAAT,CAAoBC,MAApB,EAAiEC,GAAjE,EAA8EC,KAA9E,EAA8F;AAC5F,MAAIA,KAAK,KAAK,IAAV,IAAkBA,KAAK,KAAKC,SAAhC,EAA2C;AACzCH,IAAAA,MAAM,MAAIF,MAAJ,GAAa,8BAAYG,GAAZ,CAAb,CAAN,GAAyCG,MAAM,CAACF,KAAD,CAA/C;AACD;;AAED,SAAOF,MAAP;AACD;;AAEM,SAASK,4BAAT;AACLC,UADK;AAEgC;AACrC,SAAOC,MAAM,CAACC,OAAP,CAAeF,UAAf,EAA2BG,MAA3B;AACL,YAACC,aAAD,EAAgBC,YAAhB,UAAiCZ,UAAU,CAACW,aAAD,EAAgBC,YAAY,CAAC,CAAD,CAA5B,EAAiCA,YAAY,CAAC,CAAD,CAA7C,CAA3C,EADK;AAEL,IAFK,CAAP;;AAID","sourcesContent":["import { toKebabCase } from '../../lib/toKebabCase';\nimport type { Nullable } from '../../typings/utility-types';\n\nexport type VisualStateDataAttributesResultType = Record<string, string>;\n\nconst prefix = `data-visual-state-`;\n\nfunction fillResult(result: VisualStateDataAttributesResultType, key: string, value: unknown) {\n  if (value !== null && value !== undefined) {\n    result[`${prefix}${toKebabCase(key)}`] = String(value);\n  }\n\n  return result;\n}\n\nexport function getVisualStateDataAttributes<T extends Record<string, Nullable<boolean>>>(\n  attributes: T,\n): VisualStateDataAttributesResultType {\n  return Object.entries(attributes).reduce(\n    (previousValue, currentValue) => fillResult(previousValue, currentValue[0], currentValue[1]),\n    {},\n  );\n}\n"]}

package/cjs/internal/CommonWrapper/index.d.ts

@@ -0,0 +1,3 @@
+export * from './CommonWrapper';
+export type { CommonWrapperRestProps } from './types';
+export type { CommonProps } from './types';

package/cjs/internal/CommonWrapper/index.js

@@ -0,0 +1 @@
+"use strict";exports.__esModule = true;var _CommonWrapper = require("./CommonWrapper");Object.keys(_CommonWrapper).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _CommonWrapper[key]) return;exports[key] = _CommonWrapper[key];});

package/cjs/internal/CommonWrapper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './CommonWrapper';\nexport type { CommonWrapperRestProps } from './types';\nexport type { CommonProps } from './types';\n"]}

package/cjs/internal/CommonWrapper/types.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { Nullable } from '../../typings/utility-types';
+export interface CommonProps {
+    /**
+     * HTML-атрибут `class`.
+     */
+    className?: React.HTMLAttributes<HTMLElement>['className'];
+    /**
+     * HTML-атрибут `style`.
+     */
+    style?: React.HTMLAttributes<HTMLElement>['style'];
+    /**
+     * На равне с data-tid транслируются любые data-атрибуты. Они попадают на корневой элемент.
+     */
+    'data-tid'?: string;
+    children?: React.ReactNode;
+}
+export interface CommonPropsRootNodeRef {
+    rootNodeRef?: (instance: Nullable<Element>) => void;
+}
+export declare type NotCommonProps<P> = Omit<P, keyof CommonProps>;
+export declare type CommonWrapperProps<P> = P & {
+    children: React.ReactNode | ((rest: CommonWrapperRestProps<P>) => React.ReactNode);
+};
+export declare type CommonWrapperRestProps<P> = Omit<NotCommonProps<P>, 'children'>;

package/cjs/internal/CommonWrapper/types.js

@@ -0,0 +1 @@
+"use strict";exports.__esModule = true;

package/cjs/internal/CommonWrapper/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/cjs/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/cjs/internal/ComponentCombinator.js

@@ -1,6 +1,7 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ComponentCombinator = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.ComponentCombinator = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
 
+var _createPropsGetter = require("../lib/createPropsGetter");
 
 var _ComponentTable = require("./ComponentTable");var
 
@@ -11,9 +12,10 @@ var _ComponentTable = require("./ComponentTable");var
 
 
 
-ComponentCombinator = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(ComponentCombinator, _React$Component);function ComponentCombinator() {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.
 
 
+ComponentCombinator = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(ComponentCombinator, _React$Component);function ComponentCombinator() {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.
+
 
 
 
@@ -25,6 +27,7 @@ ComponentCombinator = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoo
 
 
 
+    getProps = (0, _createPropsGetter.createPropsGetter)(ComponentCombinator.defaultProps);_this.
 
     state = {
       page: 0 };_this.
@@ -71,6 +74,7 @@ ComponentCombinator = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoo
 
 
 
+
 
 
     prevPage = function () {
@@ -83,4 +87,4 @@ ComponentCombinator = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoo
       _this.setState(function (_ref2) {var page = _ref2.page;return {
           page: page + 1 };});
 
-    };return _this;}var _proto = ComponentCombinator.prototype;_proto.render = function render() {var _ref3;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;var pages = [];var row = 0;var sizes = combinations.map(function (c) {return c.length;});var flatCombinations = (_ref3 = []).concat.apply(_ref3, combinations);for (var j = 0; j < sizes.length - 1; j++) {pages.push({ offsetX: row, offsetY: row += sizes[j] });}var pageOffsets = pages[page];return _react.default.createElement("div", null, _react.default.createElement("div", { id: "paginator" }, _react.default.createElement("button", { disabled: page === 0, id: "prev-page", onClick: this.prevPage }, "Prev"), ' ', _react.default.createElement("small", null, page + 1 + " / " + pages.length), ' ', _react.default.createElement("button", { disabled: page + 1 >= pages.length, id: "next-page", onClick: this.nextPage }, "Next")), _react.default.createElement("div", null, pageOffsets && _react.default.createElement(_ComponentTable.ComponentTable, { key: page, Component: Component, presetProps: presetProps, presetState: presetState, rows: flatCombinations.slice(pageOffsets.offsetY, flatCombinations.length), cols: flatCombinations.slice(pageOffsets.offsetX, pageOffsets.offsetY) })));};return ComponentCombinator;}(_react.default.Component);exports.ComponentCombinator = ComponentCombinator;ComponentCombinator.defaultProps = { props: [], states: [], presetProps: {}, presetState: {} };
+    };return _this;}var _proto = ComponentCombinator.prototype;_proto.render = function render() {var _ref3;var page = this.state.page;var _this$props = this.props,combinations = _this$props.combinations,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) {return c.length;});var flatCombinations = (_ref3 = []).concat.apply(_ref3, combinations);for (var j = 0; j < sizes.length - 1; j++) {pages.push({ offsetX: row, offsetY: row += sizes[j] });}var pageOffsets = pages[page];return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", { id: "paginator", style: { marginBottom: 5 } }, /*#__PURE__*/_react.default.createElement("button", { disabled: page === 0, id: "prev-page", onClick: this.prevPage }, "Prev"), ' ', /*#__PURE__*/_react.default.createElement("small", null, page + 1 + " / " + pages.length), ' ', /*#__PURE__*/_react.default.createElement("button", { disabled: page + 1 >= pages.length, id: "next-page", onClick: this.nextPage }, "Next")), /*#__PURE__*/_react.default.createElement("div", null, pageOffsets && /*#__PURE__*/_react.default.createElement(_ComponentTable.ComponentTable, { key: page, Component: Component, presetProps: presetProps, presetState: presetState, rows: flatCombinations.slice(pageOffsets.offsetY, flatCombinations.length), cols: flatCombinations.slice(pageOffsets.offsetX, pageOffsets.offsetY) })));};return ComponentCombinator;}(_react.default.Component);exports.ComponentCombinator = ComponentCombinator;ComponentCombinator.defaultProps = { presetProps: {}, presetState: {} };

package/cjs/internal/ComponentCombinator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ComponentCombinator.tsx"],"names":["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","slice","React","defaultProps","states"],"mappings":"+PAAA;;;;AAIA,kD;;;;;;;;;AASaA,mB;;;;;;;;;;;;;;;AAeJC,IAAAA,K,GAAQ;AACbC,MAAAA,IAAI,EAAE,CADO,E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CPC,IAAAA,Q,GAAW,YAAM;AACvB,YAAKC,QAAL,CAAc,qBAAGF,IAAH,QAAGA,IAAH,QAAe;AAC3BA,UAAAA,IAAI,EAAEA,IAAI,GAAG,CADc,EAAf,EAAd;;AAGD,K;;AAEOG,IAAAA,Q,GAAW,YAAM;AACvB,YAAKD,QAAL,CAAc,sBAAGF,IAAH,SAAGA,IAAH,QAAe;AAC3BA,UAAAA,IAAI,EAAEA,IAAI,GAAG,CADc,EAAf,EAAd;;AAGD,K,iEArDMI,M,GAAP,kBAAgB,eACNJ,IADM,GACG,KAAKD,KADR,CACNC,IADM,mBAEgD,KAAKK,KAFrD,CAENC,YAFM,eAENA,YAFM,CAEQC,SAFR,eAEQA,SAFR,CAEmBC,WAFnB,eAEmBA,WAFnB,CAEgCC,WAFhC,eAEgCA,WAFhC,CAGd,IAAMC,KAAK,GAAG,EAAd,CACA,IAAIC,GAAG,GAAG,CAAV,CACA,IAAMC,KAAK,GAAGN,YAAY,CAACO,GAAb,CAAiB,UAAAC,CAAC,UAAIA,CAAC,CAACC,MAAN,EAAlB,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,OACE,0CACE,sCAAK,EAAE,EAAC,WAAR,IACE,yCAAQ,QAAQ,EAAEA,IAAI,KAAK,CAA3B,EAA8B,EAAE,EAAC,WAAjC,EAA6C,OAAO,EAAE,KAAKC,QAA3D,WADF,EAGY,GAHZ,EAIE,4CAAWD,IAAI,GAAG,CAAlB,WAAyBU,KAAK,CAACK,MAA/B,CAJF,EAImD,GAJnD,EAKE,yCAAQ,QAAQ,EAAEf,IAAI,GAAG,CAAP,IAAYU,KAAK,CAACK,MAApC,EAA4C,EAAE,EAAC,WAA/C,EAA2D,OAAO,EAAE,KAAKZ,QAAzE,WALF,CADF,EAUE,0CACGmB,WAAW,IACV,6BAAC,8BAAD,IACE,GAAG,EAAEtB,IADP,EAEE,SAAS,EAAEO,SAFb,EAGE,WAAW,EAAEC,WAHf,EAIE,WAAW,EAAEC,WAJf,EAKE,IAAI,EAAEO,gBAAgB,CAACO,KAAjB,CAAuBD,WAAW,CAACD,OAAnC,EAA4CL,gBAAgB,CAACD,MAA7D,CALR,EAME,IAAI,EAAEC,gBAAgB,CAACO,KAAjB,CAAuBD,WAAW,CAACF,OAAnC,EAA4CE,WAAW,CAACD,OAAxD,CANR,GAFJ,CAVF,CADF,CAyBD,C,8BAxDOG,eAAMjB,S,oDAJHT,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';\r\n\r\nimport { DefaultizeProps } from '../lib/utils';\r\n\r\nimport { ComponentTable, StatePropsCombinations, StateType } from './ComponentTable';\r\n\r\nexport interface ComponentCombinatorProps<C, P, S> {\r\n  combinations: Array<StatePropsCombinations<P, S>>;\r\n  Component: C;\r\n  presetProps: DefaultizeProps<C, P>;\r\n  presetState: Partial<S>;\r\n}\r\n\r\nexport class ComponentCombinator<\r\n  T extends React.Component<any, any, any>,\r\n  C extends React.ComponentType<any>,\r\n  P extends React.ComponentProps<C>\r\n> extends React.Component<\r\n  ComponentCombinatorProps<C extends React.ComponentClass<P, any> ? React.ClassType<P, T, C> : C, P, StateType<C>>,\r\n  { page: number }\r\n> {\r\n  public static defaultProps = {\r\n    props: [],\r\n    states: [],\r\n    presetProps: {},\r\n    presetState: {},\r\n  };\r\n\r\n  public state = {\r\n    page: 0,\r\n  };\r\n\r\n  public render() {\r\n    const { page } = this.state;\r\n    const { combinations, Component, presetProps, presetState } = this.props;\r\n    const pages = [];\r\n    let row = 0;\r\n    const sizes = combinations.map(c => c.length);\r\n    const flatCombinations = ([] as typeof combinations[0]).concat(...combinations);\r\n\r\n    for (let j = 0; j < sizes.length - 1; j++) {\r\n      pages.push({\r\n        offsetX: row,\r\n        offsetY: (row += sizes[j]),\r\n      });\r\n    }\r\n\r\n    const pageOffsets = pages[page];\r\n    return (\r\n      <div>\r\n        <div id=\"paginator\">\r\n          <button disabled={page === 0} id=\"prev-page\" onClick={this.prevPage}>\r\n            Prev\r\n          </button>{' '}\r\n          <small>{`${page + 1} / ${pages.length}`}</small>{' '}\r\n          <button disabled={page + 1 >= pages.length} id=\"next-page\" onClick={this.nextPage}>\r\n            Next\r\n          </button>\r\n        </div>\r\n        <div>\r\n          {pageOffsets && (\r\n            <ComponentTable\r\n              key={page}\r\n              Component={Component}\r\n              presetProps={presetProps}\r\n              presetState={presetState}\r\n              rows={flatCombinations.slice(pageOffsets.offsetY, flatCombinations.length)}\r\n              cols={flatCombinations.slice(pageOffsets.offsetX, pageOffsets.offsetY)}\r\n            />\r\n          )}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  private prevPage = () => {\r\n    this.setState(({ page }) => ({\r\n      page: page - 1,\r\n    }));\r\n  };\r\n\r\n  private nextPage = () => {\r\n    this.setState(({ page }) => ({\r\n      page: page + 1,\r\n    }));\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["ComponentCombinator.tsx"],"names":["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","React"],"mappings":"uQAAA;;;AAGA;;AAEA,kD;;;;;;;;;;;AAWaA,mB;;;;;;;;;;;;;AAaHC,IAAAA,Q,GAAW,0CAAkBD,mBAAmB,CAACE,YAAtC,C;;AAEZC,IAAAA,K,GAAQ;AACbC,MAAAA,IAAI,EAAE,CADO,E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDPC,IAAAA,Q,GAAW,YAAM;AACvB,YAAKC,QAAL,CAAc,qBAAGF,IAAH,QAAGA,IAAH,QAAe;AAC3BA,UAAAA,IAAI,EAAEA,IAAI,GAAG,CADc,EAAf,EAAd;;AAGD,K;;AAEOG,IAAAA,Q,GAAW,YAAM;AACvB,YAAKD,QAAL,CAAc,sBAAGF,IAAH,SAAGA,IAAH,QAAe;AAC3BA,UAAAA,IAAI,EAAEA,IAAI,GAAG,CADc,EAAf,EAAd;;AAGD,K,iEAtDMI,M,GAAP,kBAAgB,WACd,IAAQJ,IAAR,GAAiB,KAAKD,KAAtB,CAAQC,IAAR,CACA,kBAAoC,KAAKK,KAAzC,CAAQC,YAAR,eAAQA,YAAR,CAAsBC,SAAtB,eAAsBA,SAAtB,CACA,qBAAqC,KAAKV,QAAL,EAArC,CAAQW,WAAR,kBAAQA,WAAR,CAAqBC,WAArB,kBAAqBA,WAArB,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,uDACE,sCAAK,EAAE,EAAC,WAAR,EAAoB,KAAK,EAAE,EAAEuB,YAAY,EAAE,CAAhB,EAA3B,iBACE,yCAAQ,QAAQ,EAAEvB,IAAI,KAAK,CAA3B,EAA8B,EAAE,EAAC,WAAjC,EAA6C,OAAO,EAAE,KAAKC,QAA3D,WADF,EAGY,GAHZ,eAIE,4CAAWD,IAAI,GAAG,CAAlB,WAAyBU,KAAK,CAACK,MAA/B,CAJF,EAImD,GAJnD,eAKE,yCAAQ,QAAQ,EAAEf,IAAI,GAAG,CAAP,IAAYU,KAAK,CAACK,MAApC,EAA4C,EAAE,EAAC,WAA/C,EAA2D,OAAO,EAAE,KAAKZ,QAAzE,WALF,CADF,eAUE,0CACGmB,WAAW,iBACV,6BAAC,8BAAD,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,C,8BAzDOI,eAAMlB,S,oDAJHX,mB,CAQGE,Y,GAAwD,EACpEU,WAAW,EAAE,EADuD,EAEpEC,WAAW,EAAE,EAFuD,E","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"]}