@skbkontur/react-ui 4.19.0 → 4.20.0-next.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -62,6 +62,7 @@ export declare class Spinner extends React.Component<SpinnerProps> {
62
62
  private theme;
63
63
  private readonly locale;
64
64
  private setRootNode;
65
+ private featureFlags;
65
66
  render(): JSX.Element;
66
67
  private renderMain;
67
68
  private renderSpinner;
@@ -9,6 +9,11 @@ var _CommonWrapper = require("../../internal/CommonWrapper");
9
9
  var _Emotion = require("../../lib/theming/Emotion");
10
10
  var _rootNode = require("../../lib/rootNode");
11
11
  var _createPropsGetter = require("../../lib/createPropsGetter");
12
+ var _featureFlagsContext = require("../../lib/featureFlagsContext");
13
+
14
+
15
+
16
+
12
17
 
13
18
  var _Spinner = require("./Spinner.styles");
14
19
  var _locale = require("./locale");var _dec, _class, _class2, _temp;
@@ -105,6 +110,16 @@ Spinner = (_dec = (0, _decorators.locale)('Spinner', _locale.SpinnerLocaleHelper
105
110
 
106
111
 
107
112
 
113
+
114
+
115
+
116
+
117
+
118
+
119
+
120
+
121
+
122
+
108
123
 
109
124
 
110
125
 
@@ -134,7 +149,7 @@ Spinner = (_dec = (0, _decorators.locale)('Spinner', _locale.SpinnerLocaleHelper
134
149
  };_this.
135
150
 
136
151
  renderCaption = function (type, caption) {return /*#__PURE__*/(
137
- _react.default.createElement("span", { className: (0, _Emotion.cx)(_Spinner.styles[type](_this.theme), _Spinner.styles.captionColor(_this.theme)) }, caption));};return _this;}var _proto = Spinner.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _this$props = this.props,_this$props$caption = _this$props.caption,caption = _this$props$caption === void 0 ? this.locale.loading : _this$props$caption,dimmed = _this$props.dimmed,inline = _this$props.inline;var type = this.getProps().type;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": SpinnerDataTids.root, className: _Spinner.styles.spinner() }, /*#__PURE__*/_react.default.createElement("span", { className: _Spinner.styles.inner() }, this.renderSpinner(type, dimmed, inline)), caption && this.renderCaption(type, caption)));};return Spinner;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Spinner', _class2.propTypes = { /**
152
+ _react.default.createElement("span", { className: (0, _Emotion.cx)(_Spinner.styles[type](_this.theme), _Spinner.styles.captionColor(_this.theme)) }, caption));};return _this;}var _proto = Spinner.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_featureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {_this2.featureFlags = (0, _featureFlagsContext.getFullReactUIFlagsContext)(flags);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});});};_proto.renderMain = function renderMain() {var canDefaultCaptionBeRemoved = this.featureFlags.spinnerLoaderRemoveDefaultCaption;var defaultCaption = canDefaultCaptionBeRemoved ? null : this.locale.loading;var _this$props = this.props,_this$props$caption = _this$props.caption,caption = _this$props$caption === void 0 ? defaultCaption : _this$props$caption,dimmed = _this$props.dimmed,inline = _this$props.inline;var type = this.getProps().type;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": SpinnerDataTids.root, className: _Spinner.styles.spinner() }, /*#__PURE__*/_react.default.createElement("span", { className: _Spinner.styles.inner() }, this.renderSpinner(type, dimmed, inline)), caption && this.renderCaption(type, caption)));};return Spinner;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Spinner', _class2.propTypes = { /**
138
153
  * Текст рядом с мини-лоадером.
139
154
  *
140
155
  * 'Загрузка' - значение по-умолчанию
@@ -1 +1 @@
1
- {"version":3,"sources":["Spinner.tsx"],"names":["types","SpinnerDataTids","root","Spinner","SpinnerLocaleHelper","rootNode","getProps","defaultProps","renderSpinner","type","dimmed","inline","styles","circle","theme","props","color","circleDimmedColor","circleWithoutColorAnimation","width","renderCaption","caption","captionColor","render","renderMain","locale","loading","setRootNode","spinner","inner","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","node","bool","oneOf","Types","Object","assign","map"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { SpinnerIcon } from '../../internal/icons/SpinnerIcon';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Spinner.styles';\nimport { SpinnerLocale, SpinnerLocaleHelper } from './locale';\n\nconst types = ['big', 'mini', 'normal'] as const;\n\nexport type SpinnerType = typeof types[number];\n\nexport interface SpinnerProps extends CommonProps {\n /**\n * Подпись под спиннером\n */\n caption?: React.ReactNode;\n /**\n * Переводит спиннер в \"затемнённый режим\"\n *\n * Цвет спиннера в \"затемнённом режиме\" определяется переменной `spinnerDimmedColor`\n */\n dimmed?: boolean;\n /**\n * Размер спиннера и текста\n *\n * @default normal\n */\n type?: SpinnerType;\n inline?: boolean;\n /**\n * Толщина спиннера\n */\n width?: number;\n /**\n * Цвет спиннера\n */\n color?: React.CSSProperties['color'];\n}\n\nexport const SpinnerDataTids = {\n root: 'Spinner__root',\n} as const;\n\ntype DefaultProps = Required<Pick<SpinnerProps, 'type'>>;\n\n/**\n * Используйте компонент `Spinner`, если вам нужен спиннер, без дополнительного функционала, который предоставляет компонент [Loader](https://tech.skbkontur.ru/react-ui/#/Components/Loader)\n */\n\n@rootNode\n@locale('Spinner', SpinnerLocaleHelper)\nexport class Spinner extends React.Component<SpinnerProps> {\n public static __KONTUR_REACT_UI__ = 'Spinner';\n\n public static propTypes = {\n /**\n * Текст рядом с мини-лоадером.\n *\n * 'Загрузка' - значение по-умолчанию\n */\n caption: PropTypes.node,\n\n dimmed: PropTypes.bool,\n\n /**\n * Тип спиннера: mini, normal, big\n *\n * Значение по-умолчанию - normal\n *\n * Spinner.types - все доступные типы\n */\n type: PropTypes.oneOf(types),\n };\n\n public static defaultProps: DefaultProps = {\n type: 'normal',\n };\n\n private getProps = createPropsGetter(Spinner.defaultProps);\n\n public static Types: Record<SpinnerType, SpinnerType> = Object.assign({}, ...types.map((type) => ({ [type]: type })));\n private theme!: Theme;\n private readonly locale!: SpinnerLocale;\n private setRootNode!: TSetRootNode;\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 private renderMain() {\n const { caption = this.locale.loading, dimmed, inline } = this.props;\n const type = this.getProps().type;\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div data-tid={SpinnerDataTids.root} className={styles.spinner()}>\n <span className={styles.inner()}>{this.renderSpinner(type, dimmed, inline)}</span>\n {caption && this.renderCaption(type, caption)}\n </div>\n </CommonWrapper>\n );\n }\n\n private renderSpinner = (type: SpinnerType, dimmed?: boolean, inline?: boolean) => {\n return (\n <SpinnerIcon\n size={type}\n className={cx({\n [styles.circle(this.theme)]: !dimmed && !this.props.color,\n [styles.circleDimmedColor(this.theme)]: dimmed,\n [styles.circleWithoutColorAnimation()]: dimmed || !!this.props.color,\n })}\n dimmed={dimmed}\n width={this.props.width}\n color={this.props.color}\n inline={inline}\n />\n );\n };\n\n private renderCaption = (type: SpinnerType, caption: React.ReactNode) => (\n <span className={cx(styles[type](this.theme), styles.captionColor(this.theme))}>{caption}</span>\n );\n}\n"]}
1
+ {"version":3,"sources":["Spinner.tsx"],"names":["types","SpinnerDataTids","root","Spinner","SpinnerLocaleHelper","rootNode","getProps","defaultProps","renderSpinner","type","dimmed","inline","styles","circle","theme","props","color","circleDimmedColor","circleWithoutColorAnimation","width","renderCaption","caption","captionColor","render","flags","featureFlags","renderMain","canDefaultCaptionBeRemoved","spinnerLoaderRemoveDefaultCaption","defaultCaption","locale","loading","setRootNode","spinner","inner","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","node","bool","oneOf","Types","Object","assign","map"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { SpinnerIcon } from '../../internal/icons/SpinnerIcon';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport {\n ReactUIFeatureFlags,\n ReactUIFeatureFlagsContext,\n getFullReactUIFlagsContext,\n} from '../../lib/featureFlagsContext';\n\nimport { styles } from './Spinner.styles';\nimport { SpinnerLocale, SpinnerLocaleHelper } from './locale';\n\nconst types = ['big', 'mini', 'normal'] as const;\n\nexport type SpinnerType = typeof types[number];\n\nexport interface SpinnerProps extends CommonProps {\n /**\n * Подпись под спиннером\n */\n caption?: React.ReactNode;\n /**\n * Переводит спиннер в \"затемнённый режим\"\n *\n * Цвет спиннера в \"затемнённом режиме\" определяется переменной `spinnerDimmedColor`\n */\n dimmed?: boolean;\n /**\n * Размер спиннера и текста\n *\n * @default normal\n */\n type?: SpinnerType;\n inline?: boolean;\n /**\n * Толщина спиннера\n */\n width?: number;\n /**\n * Цвет спиннера\n */\n color?: React.CSSProperties['color'];\n}\n\nexport const SpinnerDataTids = {\n root: 'Spinner__root',\n} as const;\n\ntype DefaultProps = Required<Pick<SpinnerProps, 'type'>>;\n\n/**\n * Используйте компонент `Spinner`, если вам нужен спиннер, без дополнительного функционала, который предоставляет компонент [Loader](https://tech.skbkontur.ru/react-ui/#/Components/Loader)\n */\n\n@rootNode\n@locale('Spinner', SpinnerLocaleHelper)\nexport class Spinner extends React.Component<SpinnerProps> {\n public static __KONTUR_REACT_UI__ = 'Spinner';\n\n public static propTypes = {\n /**\n * Текст рядом с мини-лоадером.\n *\n * 'Загрузка' - значение по-умолчанию\n */\n caption: PropTypes.node,\n\n dimmed: PropTypes.bool,\n\n /**\n * Тип спиннера: mini, normal, big\n *\n * Значение по-умолчанию - normal\n *\n * Spinner.types - все доступные типы\n */\n type: PropTypes.oneOf(types),\n };\n\n public static defaultProps: DefaultProps = {\n type: 'normal',\n };\n\n private getProps = createPropsGetter(Spinner.defaultProps);\n\n public static Types: Record<SpinnerType, SpinnerType> = Object.assign({}, ...types.map((type) => ({ [type]: type })));\n private theme!: Theme;\n private readonly locale!: SpinnerLocale;\n private setRootNode!: TSetRootNode;\n private featureFlags!: ReactUIFeatureFlags;\n\n public render() {\n return (\n <ReactUIFeatureFlagsContext.Consumer>\n {(flags) => {\n this.featureFlags = getFullReactUIFlagsContext(flags);\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }}\n </ReactUIFeatureFlagsContext.Consumer>\n );\n }\n\n private renderMain() {\n const canDefaultCaptionBeRemoved = this.featureFlags.spinnerLoaderRemoveDefaultCaption;\n const defaultCaption = canDefaultCaptionBeRemoved ? null : this.locale.loading;\n const { caption = defaultCaption, dimmed, inline } = this.props;\n const type = this.getProps().type;\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div data-tid={SpinnerDataTids.root} className={styles.spinner()}>\n <span className={styles.inner()}>{this.renderSpinner(type, dimmed, inline)}</span>\n {caption && this.renderCaption(type, caption)}\n </div>\n </CommonWrapper>\n );\n }\n\n private renderSpinner = (type: SpinnerType, dimmed?: boolean, inline?: boolean) => {\n return (\n <SpinnerIcon\n size={type}\n className={cx({\n [styles.circle(this.theme)]: !dimmed && !this.props.color,\n [styles.circleDimmedColor(this.theme)]: dimmed,\n [styles.circleWithoutColorAnimation()]: dimmed || !!this.props.color,\n })}\n dimmed={dimmed}\n width={this.props.width}\n color={this.props.color}\n inline={inline}\n />\n );\n };\n\n private renderCaption = (type: SpinnerType, caption: React.ReactNode) => (\n <span className={cx(styles[type](this.theme), styles.captionColor(this.theme))}>{caption}</span>\n );\n}\n"]}
@@ -8,7 +8,7 @@ import { SizeProp } from '../../lib/types/props';
8
8
  * @deprecated use SizeProp
9
9
  */
10
10
  export declare type SwitcherSize = SizeProp;
11
- declare type SwitcherItems = string | SwitcherItem;
11
+ export declare type SwitcherItems = string | SwitcherItem;
12
12
  export declare const SwitcherDataTids: {
13
13
  readonly root: "Switcher__root";
14
14
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["Switcher.tsx"],"names":["SwitcherDataTids","root","Switcher","rootNode","state","focusedIndex","selectItem","value","props","onValueChange","_extractPropsFromItem","item","label","_extractValuesFromItems","items","map","_focus","index","setState","handleKey","e","buttonProps","disabled","preventDefault","move","left","selectedIndex","newFocusedIndex","_getNextFocusedIndex","i","length","_handleFocus","currentIndex","indexOf","_handleBlur","_renderItems","size","role","renderItem","ariaLabel","itemValue","customButtonProps","isChecked","commonButtonProps","checked","visuallyFocused","onClick","disableFocus","corners","renderDefault","renderDefaultItem","getLabelSizeClassName","styles","captionLarge","theme","captionMedium","captionSmall","render","renderMain","listClassName","error","inputProps","type","onKeyDown","onFocus","onBlur","className","input","captionClassName","caption","setRootNode","wrap","React","Component","__KONTUR_REACT_UI__","defaultProps","propTypes","PropTypes","bool","oneOfType","arrayOf","string","shape","isRequired","func"],"mappings":"iWAAA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;;AAGA;AACA;AACA,oC;;;;;;;;AAQO,IAAMA,gBAAgB,GAAG;AAC9BC,EAAAA,IAAI,EAAE,gBADwB,EAAzB,C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDMC,Q,OADZC,kB;;;;;;;;;;;;;;;;;;;;;;;;;AA0BQC,IAAAA,K,GAAuB;AAC5BC,MAAAA,YAAY,EAAE,IADc,E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDtBC,IAAAA,U,GAAa,UAACC,KAAD,EAAmB;AACtC,UAAI,MAAKC,KAAL,CAAWC,aAAf,EAA8B;AAC5B,cAAKD,KAAL,CAAWC,aAAX,CAAyBF,KAAzB;AACD;AACF,K;;AAEOG,IAAAA,qB,GAAwB,UAACC,IAAD,EAA+C;AAC7E,aAAO,OAAOA,IAAP,KAAgB,QAAhB,GAA2BA,IAA3B,GAAkC,EAAEC,KAAK,EAAED,IAAT,EAAeJ,KAAK,EAAEI,IAAtB,EAAzC;AACD,K;;AAEOE,IAAAA,uB,GAA0B,YAAgB;AAChD,aAAO,MAAKL,KAAL,CAAWM,KAAX,CAAiBC,GAAjB,CAAqB,UAACJ,IAAD,EAAU;AACpC,oCAAkB,MAAKD,qBAAL,CAA2BC,IAA3B,CAAlB,CAAQJ,KAAR,yBAAQA,KAAR;AACA,eAAOA,KAAP;AACD,OAHM,CAAP;AAID,K;;AAEOS,IAAAA,M,GAAS,UAACC,KAAD,EAAmB;AAClC,YAAKC,QAAL,CAAc,EAAEb,YAAY,EAAEY,KAAhB,EAAd;AACD,K;;AAEOE,IAAAA,S,GAAY,UAACC,CAAD,EAA8C;AAChE,UAAMf,YAAY,GAAG,MAAKD,KAAL,CAAWC,YAAhC;AACA,UAAI,OAAOA,YAAP,KAAwB,QAA5B,EAAsC;AACpC;AACD;;AAED,UAAI,6BAAWe,CAAX,CAAJ,EAAmB;AACjB,YAAI,MAAKZ,KAAL,CAAWC,aAAf,EAA8B;AAC5B,uCAA+B,MAAKC,qBAAL,CAA2B,MAAKF,KAAL,CAAWM,KAAX,CAAiBT,YAAjB,CAA3B,CAA/B,CAAQE,MAAR,0BAAQA,KAAR,CAAec,YAAf,0BAAeA,WAAf;AACA,cAAI,EAACA,YAAD,YAACA,YAAW,CAAEC,QAAd,CAAJ,EAA4B;AAC1B,kBAAKhB,UAAL,CAAgBC,MAAhB;AACD;AACF;AACD;AACD;;AAED,UAAI,uCAAqBa,CAArB,CAAJ,EAA6B;AAC3BA,QAAAA,CAAC,CAACG,cAAF;AACA,cAAKC,IAAL,CAAU,iCAAeJ,CAAf,CAAV;AACD;AACF,K;;AAEOI,IAAAA,I,GAAO,UAACC,IAAD,EAAmB;AAChC,UAAMC,aAAa,GAAG,MAAKtB,KAAL,CAAWC,YAAjC;;AAEA,UAAI,OAAOqB,aAAP,KAAyB,QAA7B,EAAuC;AACrC;AACD;AACD,UAAMC,eAAe,GAAG,MAAKC,oBAAL,CAA0BH,IAA1B,EAAgCC,aAAhC,CAAxB;AACA,YAAKV,MAAL,CAAYW,eAAZ;AACD,K;;AAEOC,IAAAA,oB,GAAuB,UAACH,IAAD,EAAgBpB,YAAhB,EAAiD;AAC9E,wBAA4B,MAAKG,KAAjC,CAAQM,KAAR,eAAQA,KAAR,CAAeQ,QAAf,eAAeA,QAAf;AACA,UAAIA,QAAJ,EAAc;AACZ,eAAOjB,YAAP;AACD;;AAED,WAAK,IAAIwB,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGf,KAAK,CAACgB,MAA1B,EAAkCD,CAAC,EAAnC,EAAuC;AACrC,YAAMZ,KAAK,GAAG,kBAAIZ,YAAY,IAAIoB,IAAI,GAAG,CAACI,CAAJ,GAAQA,CAAhB,CAAhB,EAAoCf,KAAK,CAACgB,MAA1C,CAAd;AACA,qCAAwB,MAAKpB,qBAAL,CAA2BI,KAAK,CAACG,KAAD,CAAhC,CAAxB,CAAQI,aAAR,0BAAQA,WAAR;AACA,YAAI,EAACA,aAAD,YAACA,aAAW,CAAEC,QAAd,CAAJ,EAA4B;AAC1B,iBAAOL,KAAP;AACD;AACF;AACD,aAAOZ,YAAP;AACD,K;;AAEO0B,IAAAA,Y,GAAe,YAAM;AAC3B,UAAQxB,KAAR,GAAkB,MAAKC,KAAvB,CAAQD,KAAR;;AAEA,UAAMO,KAAK,GAAG,MAAKD,uBAAL,EAAd;AACA,UAAMmB,YAAY,GAAG,UAAIlB,KAAJ,EAAWmB,OAAX,CAAmB1B,KAAnB,CAArB;AACA,UAAMU,KAAK,GAAGe,YAAY,GAAG,CAAC,CAAhB,GAAoBA,YAApB,GAAmC,CAAjD;;AAEA,YAAKd,QAAL,CAAc,EAAEb,YAAY,EAAEY,KAAhB,EAAd;AACD,K;;AAEOiB,IAAAA,W,GAAc,YAAM;AAC1B,YAAKhB,QAAL,CAAc,EAAEb,YAAY,EAAE,IAAhB,EAAd;AACD,K;;AAEO8B,IAAAA,Y,GAAe,YAAM;AAC3B,yBAA2D,MAAK3B,KAAhE,CAAQM,KAAR,gBAAQA,KAAR,CAAeP,KAAf,gBAAeA,KAAf,CAAsB6B,IAAtB,gBAAsBA,IAAtB,CAA4Bd,QAA5B,gBAA4BA,QAA5B,CAAsCe,IAAtC,gBAAsCA,IAAtC,CAA4CC,UAA5C,gBAA4CA,UAA5C;AACA,aAAOxB,KAAK,CAACC,GAAN,CAAU,UAACJ,IAAD,EAAOkB,CAAP,EAAa;AAC5B;;;;;AAKI,cAAKnB,qBAAL,CAA2BC,IAA3B,CALJ,CACgB4B,SADhB,0BACE,YADF,EAEE3B,KAFF,0BAEEA,KAFF,CAGS4B,SAHT,0BAGEjC,KAHF,CAIekC,iBAJf,0BAIEpB,WAJF;;AAOA,YAAMqB,SAAS,GAAGnC,KAAK,KAAKiC,SAA5B;AACA,YAAMG,iBAAiB,GAAG;AACxB,0BAAgBD,SADQ;AAExBL,UAAAA,IAAI,EAAJA,IAFwB;AAGxBO,UAAAA,OAAO,EAAEF,SAHe;AAIxBG,UAAAA,eAAe,EAAE,MAAKzC,KAAL,CAAWC,YAAX,KAA4BwB,CAJrB;AAKxBiB,UAAAA,OAAO,EAAE,mBAAM;AACb,kBAAKxC,UAAL,CAAgBkC,SAAhB;AACD,WAPuB;AAQxBO,UAAAA,YAAY,EAAE,IARU;AASxBX,UAAAA,IAAI,EAAJA,IATwB;AAUxBd,UAAAA,QAAQ,EAARA,QAVwB;AAWxB0B,UAAAA,OAAO,EAAE,6BAAiBnB,CAAC,KAAK,CAAvB,EAA0BA,CAAC,KAAKf,KAAK,CAACgB,MAAN,GAAe,CAA/C,CAXe,EAA1B;;;AAcA,YAAMT,WAAW;AACZsB,QAAAA,iBADY;AAEZF,QAAAA,iBAFY,CAAjB;;;AAKA,YAAMQ,aAAa,GAAG,SAAhBA,aAAgB,WAAM,MAAKC,iBAAL,CAAuBtC,KAAvB,EAA8B4B,SAA9B,EAAyCnB,WAAzC,EAAsDkB,SAAtD,CAAN,EAAtB;;AAEA,eAAOD,UAAU,GAAGA,UAAU,CAAC1B,KAAD,EAAQ4B,SAAR,EAAmBnB,WAAnB,EAAgC4B,aAAhC,EAA+CV,SAA/C,CAAb,GAAyEU,aAAa,EAAvG;AACD,OA/BM,CAAP;AAgCD,K;;AAEOC,IAAAA,iB,GAAoB,UAACtC,KAAD,EAAgBL,KAAhB,EAA+Bc,WAA/B,EAAyDkB,SAAzD;AAC1B,qCAAC,cAAD,2BAAQ,cAAYA,SAApB,EAA+B,GAAG,EAAEhC,KAApC,IAA+Cc,WAA/C;AACGT,QAAAA,KADH,CAD0B,G;;;;AAMpBuC,IAAAA,qB,GAAwB,YAAc;AAC5C,cAAQ,MAAK3C,KAAL,CAAW4B,IAAnB;AACE,aAAK,OAAL;AACE,iBAAOgB,iBAAOC,YAAP,CAAoB,MAAKC,KAAzB,CAAP;AACF,aAAK,QAAL;AACE,iBAAOF,iBAAOG,aAAP,CAAqB,MAAKD,KAA1B,CAAP;AACF,aAAK,OAAL;AACA;AACE,iBAAOF,iBAAOI,YAAP,CAAoB,MAAKF,KAAzB,CAAP,CAPJ;;AASD,K,sDAhLMG,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACH,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAa,qCAAiBA,KAAjB,CAAb,CACA,oBAAO,6BAAC,0BAAD,CAAc,QAAd,IAAuB,KAAK,EAAE,MAAI,CAACA,KAAnC,IAA2C,MAAI,CAACI,UAAL,EAA3C,CAAP,CACD,CAJH,CADF,CAQD,C,QAEOA,U,GAAR,sBAAqB,SACnB,IAAMC,aAAa,GAAG,gCACnBP,iBAAOQ,KAAP,CAAa,KAAKN,KAAlB,CADmB,IACQ,CAAC,CAAC,KAAK9C,KAAL,CAAWoD,KADrB,OAAtB,CAIA,IAAMC,UAAU,GAAG,EACjBC,IAAI,EAAE,UADW,EAEjBC,SAAS,EAAE,KAAK5C,SAFC,EAGjB6C,OAAO,EAAE,KAAKjC,YAHG,EAIjBkC,MAAM,EAAE,KAAK/B,WAJI,EAKjBgC,SAAS,EAAEd,iBAAOe,KAAP,EALM,EAAnB,CAQA,IAAMC,gBAAgB,GAAG,iBAAGhB,iBAAOiB,OAAP,CAAe,KAAKf,KAApB,CAAH,EAA+B,KAAKH,qBAAL,EAA/B,CAAzB,CAEA,oBACE,6BAAC,4BAAD,2BAAe,WAAW,EAAE,KAAKmB,WAAjC,IAAkD,KAAK9D,KAAvD,gBACE,sCAAK,YAAUR,gBAAgB,CAACC,IAAhC,EAAsC,SAAS,EAAEmD,iBAAOnD,IAAP,EAAjD,IACG,KAAKO,KAAL,CAAW6D,OAAX,gBAAqB,sCAAK,SAAS,EAAED,gBAAhB,IAAmC,KAAK5D,KAAL,CAAW6D,OAA9C,CAArB,GAAoF,IADvF,eAEE,sCAAK,SAAS,EAAEjB,iBAAOmB,IAAP,EAAhB,iBACE,sCAAWV,UAAX,CADF,eAEE,sCAAK,SAAS,EAAEF,aAAhB,iBACE,6BAAC,YAAD,QAAQ,KAAKxB,YAAL,EAAR,CADF,CAFF,CAFF,CADF,CADF,CAaD,C,mBAvE2BqC,eAAMC,S,WACpBC,mB,GAAsB,U,UAEtBC,Y,GAA6B,EACzCtC,IAAI,EAAE,QADmC,E,UAI7BuC,S,GAAY,EACxBhB,KAAK,EAAEiB,mBAAUC,IADO,EAExBxD,QAAQ,EAAEuD,mBAAUC,IAFI,EAGxBhE,KAAK,EAAE+D,mBAAUE,SAAV,CAAoB,CACzBF,mBAAUG,OAAV,CAAkBH,mBAAUI,MAA5B,CADyB,EAEzBJ,mBAAUG,OAAV,CACEH,mBAAUK,KAAV,CAAgB,EACdtE,KAAK,EAAEiE,mBAAUI,MADH,EAEd1E,KAAK,EAAEsE,mBAAUI,MAFH,EAAhB,CADF,CAFyB,CAApB,EAQJE,UAXqB,EAYxBd,OAAO,EAAEQ,mBAAUI,MAZK,EAaxB1E,KAAK,EAAEsE,mBAAUI,MAbO,EAcxBxE,aAAa,EAAEoE,mBAAUO,IAdD,EAexB9C,UAAU,EAAEuC,mBAAUO,IAfE,E","sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers';\nimport { getButtonCorners, Group } from '../Group';\nimport { Button, ButtonProps } from '../Button';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { styles } from './Switcher.styles';\nimport { getSwitcherTheme } from './switcherTheme';\nimport { mod } from './helpers';\n\n/**\n * @deprecated use SizeProp\n */\nexport type SwitcherSize = SizeProp;\ntype SwitcherItems = string | SwitcherItem;\n\nexport const SwitcherDataTids = {\n root: 'Switcher__root',\n} as const;\n\nexport interface SwitcherProps extends Pick<HTMLAttributes<unknown>, 'role'>, CommonProps {\n /**\n * Список строк или список элементов типа `{ label: string, value: string, buttonProps?: Partial<ButtonProps> }`\n */\n items: SwitcherItems[];\n\n value?: string;\n\n onValueChange?: (value: string) => void;\n\n caption?: string;\n\n error?: boolean;\n\n /** Размер */\n size?: SizeProp;\n\n disabled?: boolean;\n\n /**\n * Функция для отрисовки элемента. Аргументы — `label`,\n * `value`, `buttonProps`, `renderDefault`, `ariaLabel`\n */\n renderItem?: (\n label: string,\n value: string,\n buttonProps: ButtonProps,\n renderDefault: () => React.ReactNode,\n ariaLabel?: string,\n ) => React.ReactNode;\n}\n\ntype DefaultProps = Required<Pick<SwitcherProps, 'role'>>;\n\nexport interface SwitcherState {\n focusedIndex: Nullable<number>;\n}\n\ninterface SwitcherItem {\n value: string;\n label: string;\n 'aria-label'?: string;\n buttonProps?: Partial<ButtonProps>;\n}\n\n@rootNode\nexport class Switcher extends React.Component<SwitcherProps, SwitcherState> {\n public static __KONTUR_REACT_UI__ = 'Switcher';\n\n public static defaultProps: DefaultProps = {\n role: 'switch',\n };\n\n public static propTypes = {\n error: PropTypes.bool,\n disabled: PropTypes.bool,\n items: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.string),\n PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.string,\n }),\n ),\n ]).isRequired,\n caption: PropTypes.string,\n value: PropTypes.string,\n onValueChange: PropTypes.func,\n renderItem: PropTypes.func,\n };\n\n public state: SwitcherState = {\n focusedIndex: null,\n };\n\n private theme!: Theme;\n private setRootNode!: TSetRootNode;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = getSwitcherTheme(theme);\n return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const listClassName = cx({\n [styles.error(this.theme)]: !!this.props.error,\n });\n\n const inputProps = {\n type: 'checkbox',\n onKeyDown: this.handleKey,\n onFocus: this._handleFocus,\n onBlur: this._handleBlur,\n className: styles.input(),\n };\n\n const captionClassName = cx(styles.caption(this.theme), this.getLabelSizeClassName());\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div data-tid={SwitcherDataTids.root} className={styles.root()}>\n {this.props.caption ? <div className={captionClassName}>{this.props.caption}</div> : null}\n <div className={styles.wrap()}>\n <input {...inputProps} />\n <div className={listClassName}>\n <Group>{this._renderItems()}</Group>\n </div>\n </div>\n </div>\n </CommonWrapper>\n );\n }\n\n private selectItem = (value: string) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(value);\n }\n };\n\n private _extractPropsFromItem = (item: string | SwitcherItem): SwitcherItem => {\n return typeof item === 'object' ? item : { label: item, value: item };\n };\n\n private _extractValuesFromItems = (): string[] => {\n return this.props.items.map((item) => {\n const { value } = this._extractPropsFromItem(item);\n return value;\n });\n };\n\n private _focus = (index: number) => {\n this.setState({ focusedIndex: index });\n };\n\n private handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\n const focusedIndex = this.state.focusedIndex;\n if (typeof focusedIndex !== 'number') {\n return;\n }\n\n if (isKeyEnter(e)) {\n if (this.props.onValueChange) {\n const { value, buttonProps } = this._extractPropsFromItem(this.props.items[focusedIndex]);\n if (!buttonProps?.disabled) {\n this.selectItem(value);\n }\n }\n return;\n }\n\n if (isKeyArrowHorizontal(e)) {\n e.preventDefault();\n this.move(isKeyArrowLeft(e));\n }\n };\n\n private move = (left: boolean) => {\n const selectedIndex = this.state.focusedIndex;\n\n if (typeof selectedIndex !== 'number') {\n return;\n }\n const newFocusedIndex = this._getNextFocusedIndex(left, selectedIndex);\n this._focus(newFocusedIndex);\n };\n\n private _getNextFocusedIndex = (left: boolean, focusedIndex: number): number => {\n const { items, disabled } = this.props;\n if (disabled) {\n return focusedIndex;\n }\n\n for (let i = 1; i < items.length; i++) {\n const index = mod(focusedIndex + (left ? -i : i), items.length);\n const { buttonProps } = this._extractPropsFromItem(items[index]);\n if (!buttonProps?.disabled) {\n return index;\n }\n }\n return focusedIndex;\n };\n\n private _handleFocus = () => {\n const { value } = this.props;\n\n const items = this._extractValuesFromItems();\n const currentIndex = [...items].indexOf(value as string);\n const index = currentIndex > -1 ? currentIndex : 0;\n\n this.setState({ focusedIndex: index });\n };\n\n private _handleBlur = () => {\n this.setState({ focusedIndex: null });\n };\n\n private _renderItems = () => {\n const { items, value, size, disabled, role, renderItem } = this.props;\n return items.map((item, i) => {\n const {\n 'aria-label': ariaLabel,\n label,\n value: itemValue,\n buttonProps: customButtonProps,\n } = this._extractPropsFromItem(item);\n\n const isChecked = value === itemValue;\n const commonButtonProps = {\n 'aria-checked': isChecked,\n role,\n checked: isChecked,\n visuallyFocused: this.state.focusedIndex === i,\n onClick: () => {\n this.selectItem(itemValue);\n },\n disableFocus: true,\n size,\n disabled,\n corners: getButtonCorners(i === 0, i === items.length - 1),\n };\n\n const buttonProps = {\n ...commonButtonProps,\n ...customButtonProps,\n };\n\n const renderDefault = () => this.renderDefaultItem(label, itemValue, buttonProps, ariaLabel);\n\n return renderItem ? renderItem(label, itemValue, buttonProps, renderDefault, ariaLabel) : renderDefault();\n });\n };\n\n private renderDefaultItem = (label: string, value: string, buttonProps: ButtonProps, ariaLabel?: string) => (\n <Button aria-label={ariaLabel} key={value} {...buttonProps}>\n {label}\n </Button>\n );\n\n private getLabelSizeClassName = (): string => {\n switch (this.props.size) {\n case 'large':\n return styles.captionLarge(this.theme);\n case 'medium':\n return styles.captionMedium(this.theme);\n case 'small':\n default:\n return styles.captionSmall(this.theme);\n }\n };\n}\n"]}
1
+ {"version":3,"sources":["Switcher.tsx"],"names":["SwitcherDataTids","root","Switcher","rootNode","state","focusedIndex","selectItem","value","props","onValueChange","_extractPropsFromItem","item","label","_extractValuesFromItems","items","map","_focus","index","setState","handleKey","e","buttonProps","disabled","preventDefault","move","left","selectedIndex","newFocusedIndex","_getNextFocusedIndex","i","length","_handleFocus","currentIndex","indexOf","_handleBlur","_renderItems","size","role","renderItem","ariaLabel","itemValue","customButtonProps","isChecked","commonButtonProps","checked","visuallyFocused","onClick","disableFocus","corners","renderDefault","renderDefaultItem","getLabelSizeClassName","styles","captionLarge","theme","captionMedium","captionSmall","render","renderMain","listClassName","error","inputProps","type","onKeyDown","onFocus","onBlur","className","input","captionClassName","caption","setRootNode","wrap","React","Component","__KONTUR_REACT_UI__","defaultProps","propTypes","PropTypes","bool","oneOfType","arrayOf","string","shape","isRequired","func"],"mappings":"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","sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers';\nimport { getButtonCorners, Group } from '../Group';\nimport { Button, ButtonProps } from '../Button';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { styles } from './Switcher.styles';\nimport { getSwitcherTheme } from './switcherTheme';\nimport { mod } from './helpers';\n\n/**\n * @deprecated use SizeProp\n */\nexport type SwitcherSize = SizeProp;\nexport type SwitcherItems = string | SwitcherItem;\n\nexport const SwitcherDataTids = {\n root: 'Switcher__root',\n} as const;\n\nexport interface SwitcherProps extends Pick<HTMLAttributes<unknown>, 'role'>, CommonProps {\n /**\n * Список строк или список элементов типа `{ label: string, value: string, buttonProps?: Partial<ButtonProps> }`\n */\n items: SwitcherItems[];\n\n value?: string;\n\n onValueChange?: (value: string) => void;\n\n caption?: string;\n\n error?: boolean;\n\n /** Размер */\n size?: SizeProp;\n\n disabled?: boolean;\n\n /**\n * Функция для отрисовки элемента. Аргументы — `label`,\n * `value`, `buttonProps`, `renderDefault`, `ariaLabel`\n */\n renderItem?: (\n label: string,\n value: string,\n buttonProps: ButtonProps,\n renderDefault: () => React.ReactNode,\n ariaLabel?: string,\n ) => React.ReactNode;\n}\n\ntype DefaultProps = Required<Pick<SwitcherProps, 'role'>>;\n\nexport interface SwitcherState {\n focusedIndex: Nullable<number>;\n}\n\ninterface SwitcherItem {\n value: string;\n label: string;\n 'aria-label'?: string;\n buttonProps?: Partial<ButtonProps>;\n}\n\n@rootNode\nexport class Switcher extends React.Component<SwitcherProps, SwitcherState> {\n public static __KONTUR_REACT_UI__ = 'Switcher';\n\n public static defaultProps: DefaultProps = {\n role: 'switch',\n };\n\n public static propTypes = {\n error: PropTypes.bool,\n disabled: PropTypes.bool,\n items: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.string),\n PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.string,\n }),\n ),\n ]).isRequired,\n caption: PropTypes.string,\n value: PropTypes.string,\n onValueChange: PropTypes.func,\n renderItem: PropTypes.func,\n };\n\n public state: SwitcherState = {\n focusedIndex: null,\n };\n\n private theme!: Theme;\n private setRootNode!: TSetRootNode;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = getSwitcherTheme(theme);\n return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const listClassName = cx({\n [styles.error(this.theme)]: !!this.props.error,\n });\n\n const inputProps = {\n type: 'checkbox',\n onKeyDown: this.handleKey,\n onFocus: this._handleFocus,\n onBlur: this._handleBlur,\n className: styles.input(),\n };\n\n const captionClassName = cx(styles.caption(this.theme), this.getLabelSizeClassName());\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div data-tid={SwitcherDataTids.root} className={styles.root()}>\n {this.props.caption ? <div className={captionClassName}>{this.props.caption}</div> : null}\n <div className={styles.wrap()}>\n <input {...inputProps} />\n <div className={listClassName}>\n <Group>{this._renderItems()}</Group>\n </div>\n </div>\n </div>\n </CommonWrapper>\n );\n }\n\n private selectItem = (value: string) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(value);\n }\n };\n\n private _extractPropsFromItem = (item: string | SwitcherItem): SwitcherItem => {\n return typeof item === 'object' ? item : { label: item, value: item };\n };\n\n private _extractValuesFromItems = (): string[] => {\n return this.props.items.map((item) => {\n const { value } = this._extractPropsFromItem(item);\n return value;\n });\n };\n\n private _focus = (index: number) => {\n this.setState({ focusedIndex: index });\n };\n\n private handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\n const focusedIndex = this.state.focusedIndex;\n if (typeof focusedIndex !== 'number') {\n return;\n }\n\n if (isKeyEnter(e)) {\n if (this.props.onValueChange) {\n const { value, buttonProps } = this._extractPropsFromItem(this.props.items[focusedIndex]);\n if (!buttonProps?.disabled) {\n this.selectItem(value);\n }\n }\n return;\n }\n\n if (isKeyArrowHorizontal(e)) {\n e.preventDefault();\n this.move(isKeyArrowLeft(e));\n }\n };\n\n private move = (left: boolean) => {\n const selectedIndex = this.state.focusedIndex;\n\n if (typeof selectedIndex !== 'number') {\n return;\n }\n const newFocusedIndex = this._getNextFocusedIndex(left, selectedIndex);\n this._focus(newFocusedIndex);\n };\n\n private _getNextFocusedIndex = (left: boolean, focusedIndex: number): number => {\n const { items, disabled } = this.props;\n if (disabled) {\n return focusedIndex;\n }\n\n for (let i = 1; i < items.length; i++) {\n const index = mod(focusedIndex + (left ? -i : i), items.length);\n const { buttonProps } = this._extractPropsFromItem(items[index]);\n if (!buttonProps?.disabled) {\n return index;\n }\n }\n return focusedIndex;\n };\n\n private _handleFocus = () => {\n const { value } = this.props;\n\n const items = this._extractValuesFromItems();\n const currentIndex = [...items].indexOf(value as string);\n const index = currentIndex > -1 ? currentIndex : 0;\n\n this.setState({ focusedIndex: index });\n };\n\n private _handleBlur = () => {\n this.setState({ focusedIndex: null });\n };\n\n private _renderItems = () => {\n const { items, value, size, disabled, role, renderItem } = this.props;\n return items.map((item, i) => {\n const {\n 'aria-label': ariaLabel,\n label,\n value: itemValue,\n buttonProps: customButtonProps,\n } = this._extractPropsFromItem(item);\n\n const isChecked = value === itemValue;\n const commonButtonProps = {\n 'aria-checked': isChecked,\n role,\n checked: isChecked,\n visuallyFocused: this.state.focusedIndex === i,\n onClick: () => {\n this.selectItem(itemValue);\n },\n disableFocus: true,\n size,\n disabled,\n corners: getButtonCorners(i === 0, i === items.length - 1),\n };\n\n const buttonProps = {\n ...commonButtonProps,\n ...customButtonProps,\n };\n\n const renderDefault = () => this.renderDefaultItem(label, itemValue, buttonProps, ariaLabel);\n\n return renderItem ? renderItem(label, itemValue, buttonProps, renderDefault, ariaLabel) : renderDefault();\n });\n };\n\n private renderDefaultItem = (label: string, value: string, buttonProps: ButtonProps, ariaLabel?: string) => (\n <Button aria-label={ariaLabel} key={value} {...buttonProps}>\n {label}\n </Button>\n );\n\n private getLabelSizeClassName = (): string => {\n switch (this.props.size) {\n case 'large':\n return styles.captionLarge(this.theme);\n case 'medium':\n return styles.captionMedium(this.theme);\n case 'small':\n default:\n return styles.captionSmall(this.theme);\n }\n };\n}\n"]}
@@ -176,6 +176,77 @@ const getModelItems = async (query) => {
176
176
  </div>;
177
177
  ```
178
178
 
179
+ #### Пример с дебаунсом функции getItems
180
+
181
+ Функция debounce из lodash некорректно работает с async/promise, поэтому лучше использовать кастомную функцию, как в примере ниже.
182
+
183
+ ```jsx harmony
184
+ import { TokenInput } from "@skbkontur/react-ui";
185
+ import { TokenInputType } from "@skbkontur/react-ui/components/TokenInput";
186
+
187
+ const [value, setValue] = React.useState([]);
188
+
189
+ function debounceAsync(callback, wait) {
190
+ let timeoutId = null;
191
+
192
+ return (...args) => {
193
+ if (timeoutId) {
194
+ clearTimeout(timeoutId);
195
+ }
196
+
197
+ return new Promise((resolve) => {
198
+ const timeoutPromise = new Promise((resolve) => {
199
+ timeoutId = setTimeout(resolve, wait);
200
+ });
201
+ timeoutPromise.then(async () => {
202
+ resolve(await callback(...args));
203
+ });
204
+ });
205
+ };
206
+ }
207
+
208
+ const items = ["kon", "kod", "kof", "kor", "kos"];
209
+
210
+ const getItems = async (query) => {
211
+ console.log("query: ", query);
212
+ return items.filter((item) => item.includes(query));
213
+ };
214
+
215
+ <TokenInput
216
+ style={{ width: "300px" }}
217
+ type={TokenInputType.Combined}
218
+ selectedItems={value}
219
+ onValueChange={setValue}
220
+ getItems={debounceAsync(getItems, 300)}
221
+ placeholder="Начните вводить название"
222
+ />
223
+ ```
224
+ Типизированная версия функции
225
+
226
+ ```typescript static
227
+ function debounceAsync<T, Callback extends (...args: any[]) => Promise<T>>(
228
+ callback: Callback,
229
+ wait: number,
230
+ ): (...args: Parameters<Callback>) => Promise<T> {
231
+ let timeoutId: number | null = null;
232
+
233
+ return (...args: any[]) => {
234
+ if (timeoutId) {
235
+ clearTimeout(timeoutId);
236
+ }
237
+
238
+ return new Promise<T>((resolve) => {
239
+ const timeoutPromise = new Promise<void>((resolve) => {
240
+ timeoutId = setTimeout(resolve, wait);
241
+ });
242
+ timeoutPromise.then(async () => {
243
+ resolve(await callback(...args));
244
+ });
245
+ });
246
+ };
247
+ }
248
+ ```
249
+
179
250
  #### Локали по умолчанию
180
251
 
181
252
  ```typescript static
@@ -5,6 +5,7 @@
5
5
  ```typescript static
6
6
  export interface ReactUIFeatureFlags {
7
7
  tokenInputRemoveWhitespaceFromDefaultDelimiters?: boolean;
8
+ spinnerLoaderRemoveDefaultCaption?: boolean;
8
9
  }
9
10
  ```
10
11
 
@@ -41,6 +42,34 @@ const getItems = () => {};
41
42
  </ReactUIFeatureFlagsContext.Provider>
42
43
  ```
43
44
 
45
+ ### spinnerLoaderRemoveDefaultCaption
46
+
47
+ В Spinner и Loader убран дефолтный caption.
48
+ В React UI 5.0 фича будет применена по умолчанию.
49
+
50
+ ```jsx harmony
51
+ import { Loader, ReactUIFeatureFlagsContext } from '@skbkontur/react-ui';
52
+
53
+ <ReactUIFeatureFlagsContext.Provider value={{ spinnerLoaderRemoveDefaultCaption: true }}>
54
+ <Loader active>
55
+ <div style={{ padding: '16px' }}>
56
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
57
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
58
+ consequat.
59
+ </div>
60
+ </Loader>
61
+ </ReactUIFeatureFlagsContext.Provider>
62
+ ```
63
+
64
+ ```jsx harmony
65
+ import { Spinner, ReactUIFeatureFlagsContext } from '@skbkontur/react-ui';
66
+
67
+
68
+ <ReactUIFeatureFlagsContext.Provider value={{ spinnerLoaderRemoveDefaultCaption: true }}>
69
+ <Spinner/>
70
+ </ReactUIFeatureFlagsContext.Provider>
71
+ ```
72
+
44
73
  ## Объект со всеми флагами
45
74
 
46
75
  Чтобы получить объект со всеми флагами, необходимо применить вспомогательную функцию getFullValidationsFlagsContext к объекту заданных флагов:
@@ -1,4 +1,5 @@
1
1
  import { ReactUIFeatureFlags } from './ReactUIFeatureFlagsContext';
2
2
  export declare const getFullReactUIFlagsContext: (flags: ReactUIFeatureFlags) => {
3
3
  tokenInputRemoveWhitespaceFromDefaultDelimiters?: boolean | undefined;
4
+ spinnerLoaderRemoveDefaultCaption?: boolean | undefined;
4
5
  };
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  export interface ReactUIFeatureFlags {
3
3
  tokenInputRemoveWhitespaceFromDefaultDelimiters?: boolean;
4
+ spinnerLoaderRemoveDefaultCaption?: boolean;
4
5
  }
5
6
  export declare const reactUIFeatureFlagsDefault: ReactUIFeatureFlags;
6
7
  export declare const ReactUIFeatureFlagsContext: React.Context<ReactUIFeatureFlags>;
@@ -4,8 +4,10 @@
4
4
 
5
5
 
6
6
 
7
+
7
8
  var reactUIFeatureFlagsDefault = {
8
- tokenInputRemoveWhitespaceFromDefaultDelimiters: false };exports.reactUIFeatureFlagsDefault = reactUIFeatureFlagsDefault;
9
+ tokenInputRemoveWhitespaceFromDefaultDelimiters: false,
10
+ spinnerLoaderRemoveDefaultCaption: false };exports.reactUIFeatureFlagsDefault = reactUIFeatureFlagsDefault;
9
11
 
10
12
 
11
13
  var ReactUIFeatureFlagsContext = /*#__PURE__*/_react.default.createContext(reactUIFeatureFlagsDefault);exports.ReactUIFeatureFlagsContext = ReactUIFeatureFlagsContext;
@@ -1 +1 @@
1
- {"version":3,"sources":["ReactUIFeatureFlagsContext.tsx"],"names":["reactUIFeatureFlagsDefault","tokenInputRemoveWhitespaceFromDefaultDelimiters","ReactUIFeatureFlagsContext","React","createContext","displayName"],"mappings":"6MAAA;;;;;;AAMO,IAAMA,0BAA+C,GAAG;AAC7DC,EAAAA,+CAA+C,EAAE,KADY,EAAxD,C;;;AAIA,IAAMC,0BAA0B,gBAAGC,eAAMC,aAAN,CAAyCJ,0BAAzC,CAAnC,C;AACPE,0BAA0B,CAACG,WAA3B,GAAyC,4BAAzC","sourcesContent":["import React from 'react';\n\nexport interface ReactUIFeatureFlags {\n tokenInputRemoveWhitespaceFromDefaultDelimiters?: boolean;\n}\n\nexport const reactUIFeatureFlagsDefault: ReactUIFeatureFlags = {\n tokenInputRemoveWhitespaceFromDefaultDelimiters: false,\n};\n\nexport const ReactUIFeatureFlagsContext = React.createContext<ReactUIFeatureFlags>(reactUIFeatureFlagsDefault);\nReactUIFeatureFlagsContext.displayName = 'ReactUIFeatureFlagsContext';\n"]}
1
+ {"version":3,"sources":["ReactUIFeatureFlagsContext.tsx"],"names":["reactUIFeatureFlagsDefault","tokenInputRemoveWhitespaceFromDefaultDelimiters","spinnerLoaderRemoveDefaultCaption","ReactUIFeatureFlagsContext","React","createContext","displayName"],"mappings":"6MAAA;;;;;;;AAOO,IAAMA,0BAA+C,GAAG;AAC7DC,EAAAA,+CAA+C,EAAE,KADY;AAE7DC,EAAAA,iCAAiC,EAAE,KAF0B,EAAxD,C;;;AAKA,IAAMC,0BAA0B,gBAAGC,eAAMC,aAAN,CAAyCL,0BAAzC,CAAnC,C;AACPG,0BAA0B,CAACG,WAA3B,GAAyC,4BAAzC","sourcesContent":["import React from 'react';\n\nexport interface ReactUIFeatureFlags {\n tokenInputRemoveWhitespaceFromDefaultDelimiters?: boolean;\n spinnerLoaderRemoveDefaultCaption?: boolean;\n}\n\nexport const reactUIFeatureFlagsDefault: ReactUIFeatureFlags = {\n tokenInputRemoveWhitespaceFromDefaultDelimiters: false,\n spinnerLoaderRemoveDefaultCaption: false,\n};\n\nexport const ReactUIFeatureFlagsContext = React.createContext<ReactUIFeatureFlags>(reactUIFeatureFlagsDefault);\nReactUIFeatureFlagsContext.displayName = 'ReactUIFeatureFlagsContext';\n"]}
@@ -12,6 +12,7 @@ import { CommonWrapper } from "../../../internal/CommonWrapper";
12
12
  import { cx } from "../../../lib/theming/Emotion";
13
13
  import { rootNode } from "../../../lib/rootNode";
14
14
  import { createPropsGetter } from "../../../lib/createPropsGetter";
15
+ import { ReactUIFeatureFlagsContext, getFullReactUIFlagsContext } from "../../../lib/featureFlagsContext";
15
16
  import { styles } from "../Spinner.styles";
16
17
  import { SpinnerLocaleHelper } from "../locale";
17
18
  var types = ['big', 'mini', 'normal'];
@@ -62,16 +63,21 @@ var Spinner = (_dec = locale('Spinner', SpinnerLocaleHelper), rootNode(_class =
62
63
  _proto.render = function render() {
63
64
  var _this2 = this;
64
65
 
65
- return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
66
- _this2.theme = theme;
67
- return _this2.renderMain();
66
+ return /*#__PURE__*/React.createElement(ReactUIFeatureFlagsContext.Consumer, null, function (flags) {
67
+ _this2.featureFlags = getFullReactUIFlagsContext(flags);
68
+ return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
69
+ _this2.theme = theme;
70
+ return _this2.renderMain();
71
+ });
68
72
  });
69
73
  };
70
74
 
71
75
  _proto.renderMain = function renderMain() {
76
+ var canDefaultCaptionBeRemoved = this.featureFlags.spinnerLoaderRemoveDefaultCaption;
77
+ var defaultCaption = canDefaultCaptionBeRemoved ? null : this.locale.loading;
72
78
  var _this$props = this.props,
73
79
  _this$props$caption = _this$props.caption,
74
- caption = _this$props$caption === void 0 ? this.locale.loading : _this$props$caption,
80
+ caption = _this$props$caption === void 0 ? defaultCaption : _this$props$caption,
75
81
  dimmed = _this$props.dimmed,
76
82
  inline = _this$props.inline;
77
83
  var type = this.getProps().type;
@@ -1 +1 @@
1
- {"version":3,"sources":["Spinner.tsx"],"names":["React","PropTypes","locale","ThemeContext","SpinnerIcon","CommonWrapper","cx","rootNode","createPropsGetter","styles","SpinnerLocaleHelper","types","SpinnerDataTids","root","Spinner","getProps","defaultProps","renderSpinner","type","dimmed","inline","circle","theme","props","color","circleDimmedColor","circleWithoutColorAnimation","width","renderCaption","caption","captionColor","render","renderMain","loading","setRootNode","spinner","inner","Component","__KONTUR_REACT_UI__","propTypes","node","bool","oneOf","Types","Object","assign","map"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { SpinnerIcon } from '../../internal/icons/SpinnerIcon';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Spinner.styles';\nimport { SpinnerLocale, SpinnerLocaleHelper } from './locale';\n\nconst types = ['big', 'mini', 'normal'] as const;\n\nexport type SpinnerType = typeof types[number];\n\nexport interface SpinnerProps extends CommonProps {\n /**\n * Подпись под спиннером\n */\n caption?: React.ReactNode;\n /**\n * Переводит спиннер в \"затемнённый режим\"\n *\n * Цвет спиннера в \"затемнённом режиме\" определяется переменной `spinnerDimmedColor`\n */\n dimmed?: boolean;\n /**\n * Размер спиннера и текста\n *\n * @default normal\n */\n type?: SpinnerType;\n inline?: boolean;\n /**\n * Толщина спиннера\n */\n width?: number;\n /**\n * Цвет спиннера\n */\n color?: React.CSSProperties['color'];\n}\n\nexport const SpinnerDataTids = {\n root: 'Spinner__root',\n} as const;\n\ntype DefaultProps = Required<Pick<SpinnerProps, 'type'>>;\n\n/**\n * Используйте компонент `Spinner`, если вам нужен спиннер, без дополнительного функционала, который предоставляет компонент [Loader](https://tech.skbkontur.ru/react-ui/#/Components/Loader)\n */\n\n@rootNode\n@locale('Spinner', SpinnerLocaleHelper)\nexport class Spinner extends React.Component<SpinnerProps> {\n public static __KONTUR_REACT_UI__ = 'Spinner';\n\n public static propTypes = {\n /**\n * Текст рядом с мини-лоадером.\n *\n * 'Загрузка' - значение по-умолчанию\n */\n caption: PropTypes.node,\n\n dimmed: PropTypes.bool,\n\n /**\n * Тип спиннера: mini, normal, big\n *\n * Значение по-умолчанию - normal\n *\n * Spinner.types - все доступные типы\n */\n type: PropTypes.oneOf(types),\n };\n\n public static defaultProps: DefaultProps = {\n type: 'normal',\n };\n\n private getProps = createPropsGetter(Spinner.defaultProps);\n\n public static Types: Record<SpinnerType, SpinnerType> = Object.assign({}, ...types.map((type) => ({ [type]: type })));\n private theme!: Theme;\n private readonly locale!: SpinnerLocale;\n private setRootNode!: TSetRootNode;\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 private renderMain() {\n const { caption = this.locale.loading, dimmed, inline } = this.props;\n const type = this.getProps().type;\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div data-tid={SpinnerDataTids.root} className={styles.spinner()}>\n <span className={styles.inner()}>{this.renderSpinner(type, dimmed, inline)}</span>\n {caption && this.renderCaption(type, caption)}\n </div>\n </CommonWrapper>\n );\n }\n\n private renderSpinner = (type: SpinnerType, dimmed?: boolean, inline?: boolean) => {\n return (\n <SpinnerIcon\n size={type}\n className={cx({\n [styles.circle(this.theme)]: !dimmed && !this.props.color,\n [styles.circleDimmedColor(this.theme)]: dimmed,\n [styles.circleWithoutColorAnimation()]: dimmed || !!this.props.color,\n })}\n dimmed={dimmed}\n width={this.props.width}\n color={this.props.color}\n inline={inline}\n />\n );\n };\n\n private renderCaption = (type: SpinnerType, caption: React.ReactNode) => (\n <span className={cx(styles[type](this.theme), styles.captionColor(this.theme))}>{caption}</span>\n );\n}\n"]}
1
+ {"version":3,"sources":["Spinner.tsx"],"names":["React","PropTypes","locale","ThemeContext","SpinnerIcon","CommonWrapper","cx","rootNode","createPropsGetter","ReactUIFeatureFlagsContext","getFullReactUIFlagsContext","styles","SpinnerLocaleHelper","types","SpinnerDataTids","root","Spinner","getProps","defaultProps","renderSpinner","type","dimmed","inline","circle","theme","props","color","circleDimmedColor","circleWithoutColorAnimation","width","renderCaption","caption","captionColor","render","flags","featureFlags","renderMain","canDefaultCaptionBeRemoved","spinnerLoaderRemoveDefaultCaption","defaultCaption","loading","setRootNode","spinner","inner","Component","__KONTUR_REACT_UI__","propTypes","node","bool","oneOf","Types","Object","assign","map"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { SpinnerIcon } from '../../internal/icons/SpinnerIcon';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport {\n ReactUIFeatureFlags,\n ReactUIFeatureFlagsContext,\n getFullReactUIFlagsContext,\n} from '../../lib/featureFlagsContext';\n\nimport { styles } from './Spinner.styles';\nimport { SpinnerLocale, SpinnerLocaleHelper } from './locale';\n\nconst types = ['big', 'mini', 'normal'] as const;\n\nexport type SpinnerType = typeof types[number];\n\nexport interface SpinnerProps extends CommonProps {\n /**\n * Подпись под спиннером\n */\n caption?: React.ReactNode;\n /**\n * Переводит спиннер в \"затемнённый режим\"\n *\n * Цвет спиннера в \"затемнённом режиме\" определяется переменной `spinnerDimmedColor`\n */\n dimmed?: boolean;\n /**\n * Размер спиннера и текста\n *\n * @default normal\n */\n type?: SpinnerType;\n inline?: boolean;\n /**\n * Толщина спиннера\n */\n width?: number;\n /**\n * Цвет спиннера\n */\n color?: React.CSSProperties['color'];\n}\n\nexport const SpinnerDataTids = {\n root: 'Spinner__root',\n} as const;\n\ntype DefaultProps = Required<Pick<SpinnerProps, 'type'>>;\n\n/**\n * Используйте компонент `Spinner`, если вам нужен спиннер, без дополнительного функционала, который предоставляет компонент [Loader](https://tech.skbkontur.ru/react-ui/#/Components/Loader)\n */\n\n@rootNode\n@locale('Spinner', SpinnerLocaleHelper)\nexport class Spinner extends React.Component<SpinnerProps> {\n public static __KONTUR_REACT_UI__ = 'Spinner';\n\n public static propTypes = {\n /**\n * Текст рядом с мини-лоадером.\n *\n * 'Загрузка' - значение по-умолчанию\n */\n caption: PropTypes.node,\n\n dimmed: PropTypes.bool,\n\n /**\n * Тип спиннера: mini, normal, big\n *\n * Значение по-умолчанию - normal\n *\n * Spinner.types - все доступные типы\n */\n type: PropTypes.oneOf(types),\n };\n\n public static defaultProps: DefaultProps = {\n type: 'normal',\n };\n\n private getProps = createPropsGetter(Spinner.defaultProps);\n\n public static Types: Record<SpinnerType, SpinnerType> = Object.assign({}, ...types.map((type) => ({ [type]: type })));\n private theme!: Theme;\n private readonly locale!: SpinnerLocale;\n private setRootNode!: TSetRootNode;\n private featureFlags!: ReactUIFeatureFlags;\n\n public render() {\n return (\n <ReactUIFeatureFlagsContext.Consumer>\n {(flags) => {\n this.featureFlags = getFullReactUIFlagsContext(flags);\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }}\n </ReactUIFeatureFlagsContext.Consumer>\n );\n }\n\n private renderMain() {\n const canDefaultCaptionBeRemoved = this.featureFlags.spinnerLoaderRemoveDefaultCaption;\n const defaultCaption = canDefaultCaptionBeRemoved ? null : this.locale.loading;\n const { caption = defaultCaption, dimmed, inline } = this.props;\n const type = this.getProps().type;\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div data-tid={SpinnerDataTids.root} className={styles.spinner()}>\n <span className={styles.inner()}>{this.renderSpinner(type, dimmed, inline)}</span>\n {caption && this.renderCaption(type, caption)}\n </div>\n </CommonWrapper>\n );\n }\n\n private renderSpinner = (type: SpinnerType, dimmed?: boolean, inline?: boolean) => {\n return (\n <SpinnerIcon\n size={type}\n className={cx({\n [styles.circle(this.theme)]: !dimmed && !this.props.color,\n [styles.circleDimmedColor(this.theme)]: dimmed,\n [styles.circleWithoutColorAnimation()]: dimmed || !!this.props.color,\n })}\n dimmed={dimmed}\n width={this.props.width}\n color={this.props.color}\n inline={inline}\n />\n );\n };\n\n private renderCaption = (type: SpinnerType, caption: React.ReactNode) => (\n <span className={cx(styles[type](this.theme), styles.captionColor(this.theme))}>{caption}</span>\n );\n}\n"]}
@@ -62,6 +62,7 @@ export declare class Spinner extends React.Component<SpinnerProps> {
62
62
  private theme;
63
63
  private readonly locale;
64
64
  private setRootNode;
65
+ private featureFlags;
65
66
  render(): JSX.Element;
66
67
  private renderMain;
67
68
  private renderSpinner;
@@ -1 +1 @@
1
- {"version":3,"sources":["Switcher.tsx"],"names":["React","PropTypes","isKeyArrowHorizontal","isKeyArrowLeft","isKeyEnter","getButtonCorners","Group","Button","ThemeContext","CommonWrapper","cx","rootNode","styles","getSwitcherTheme","mod","SwitcherDataTids","root","Switcher","state","focusedIndex","selectItem","value","props","onValueChange","_extractPropsFromItem","item","label","_extractValuesFromItems","items","map","_focus","index","setState","handleKey","e","buttonProps","disabled","preventDefault","move","left","selectedIndex","newFocusedIndex","_getNextFocusedIndex","i","length","_handleFocus","currentIndex","indexOf","_handleBlur","_renderItems","size","role","renderItem","ariaLabel","itemValue","customButtonProps","isChecked","commonButtonProps","checked","visuallyFocused","onClick","disableFocus","corners","renderDefault","renderDefaultItem","getLabelSizeClassName","captionLarge","theme","captionMedium","captionSmall","render","renderMain","listClassName","error","inputProps","type","onKeyDown","onFocus","onBlur","className","input","captionClassName","caption","setRootNode","wrap","Component","__KONTUR_REACT_UI__","defaultProps","propTypes","bool","oneOfType","arrayOf","string","shape","isRequired","func"],"mappings":"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","sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers';\nimport { getButtonCorners, Group } from '../Group';\nimport { Button, ButtonProps } from '../Button';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { styles } from './Switcher.styles';\nimport { getSwitcherTheme } from './switcherTheme';\nimport { mod } from './helpers';\n\n/**\n * @deprecated use SizeProp\n */\nexport type SwitcherSize = SizeProp;\ntype SwitcherItems = string | SwitcherItem;\n\nexport const SwitcherDataTids = {\n root: 'Switcher__root',\n} as const;\n\nexport interface SwitcherProps extends Pick<HTMLAttributes<unknown>, 'role'>, CommonProps {\n /**\n * Список строк или список элементов типа `{ label: string, value: string, buttonProps?: Partial<ButtonProps> }`\n */\n items: SwitcherItems[];\n\n value?: string;\n\n onValueChange?: (value: string) => void;\n\n caption?: string;\n\n error?: boolean;\n\n /** Размер */\n size?: SizeProp;\n\n disabled?: boolean;\n\n /**\n * Функция для отрисовки элемента. Аргументы — `label`,\n * `value`, `buttonProps`, `renderDefault`, `ariaLabel`\n */\n renderItem?: (\n label: string,\n value: string,\n buttonProps: ButtonProps,\n renderDefault: () => React.ReactNode,\n ariaLabel?: string,\n ) => React.ReactNode;\n}\n\ntype DefaultProps = Required<Pick<SwitcherProps, 'role'>>;\n\nexport interface SwitcherState {\n focusedIndex: Nullable<number>;\n}\n\ninterface SwitcherItem {\n value: string;\n label: string;\n 'aria-label'?: string;\n buttonProps?: Partial<ButtonProps>;\n}\n\n@rootNode\nexport class Switcher extends React.Component<SwitcherProps, SwitcherState> {\n public static __KONTUR_REACT_UI__ = 'Switcher';\n\n public static defaultProps: DefaultProps = {\n role: 'switch',\n };\n\n public static propTypes = {\n error: PropTypes.bool,\n disabled: PropTypes.bool,\n items: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.string),\n PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.string,\n }),\n ),\n ]).isRequired,\n caption: PropTypes.string,\n value: PropTypes.string,\n onValueChange: PropTypes.func,\n renderItem: PropTypes.func,\n };\n\n public state: SwitcherState = {\n focusedIndex: null,\n };\n\n private theme!: Theme;\n private setRootNode!: TSetRootNode;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = getSwitcherTheme(theme);\n return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const listClassName = cx({\n [styles.error(this.theme)]: !!this.props.error,\n });\n\n const inputProps = {\n type: 'checkbox',\n onKeyDown: this.handleKey,\n onFocus: this._handleFocus,\n onBlur: this._handleBlur,\n className: styles.input(),\n };\n\n const captionClassName = cx(styles.caption(this.theme), this.getLabelSizeClassName());\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div data-tid={SwitcherDataTids.root} className={styles.root()}>\n {this.props.caption ? <div className={captionClassName}>{this.props.caption}</div> : null}\n <div className={styles.wrap()}>\n <input {...inputProps} />\n <div className={listClassName}>\n <Group>{this._renderItems()}</Group>\n </div>\n </div>\n </div>\n </CommonWrapper>\n );\n }\n\n private selectItem = (value: string) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(value);\n }\n };\n\n private _extractPropsFromItem = (item: string | SwitcherItem): SwitcherItem => {\n return typeof item === 'object' ? item : { label: item, value: item };\n };\n\n private _extractValuesFromItems = (): string[] => {\n return this.props.items.map((item) => {\n const { value } = this._extractPropsFromItem(item);\n return value;\n });\n };\n\n private _focus = (index: number) => {\n this.setState({ focusedIndex: index });\n };\n\n private handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\n const focusedIndex = this.state.focusedIndex;\n if (typeof focusedIndex !== 'number') {\n return;\n }\n\n if (isKeyEnter(e)) {\n if (this.props.onValueChange) {\n const { value, buttonProps } = this._extractPropsFromItem(this.props.items[focusedIndex]);\n if (!buttonProps?.disabled) {\n this.selectItem(value);\n }\n }\n return;\n }\n\n if (isKeyArrowHorizontal(e)) {\n e.preventDefault();\n this.move(isKeyArrowLeft(e));\n }\n };\n\n private move = (left: boolean) => {\n const selectedIndex = this.state.focusedIndex;\n\n if (typeof selectedIndex !== 'number') {\n return;\n }\n const newFocusedIndex = this._getNextFocusedIndex(left, selectedIndex);\n this._focus(newFocusedIndex);\n };\n\n private _getNextFocusedIndex = (left: boolean, focusedIndex: number): number => {\n const { items, disabled } = this.props;\n if (disabled) {\n return focusedIndex;\n }\n\n for (let i = 1; i < items.length; i++) {\n const index = mod(focusedIndex + (left ? -i : i), items.length);\n const { buttonProps } = this._extractPropsFromItem(items[index]);\n if (!buttonProps?.disabled) {\n return index;\n }\n }\n return focusedIndex;\n };\n\n private _handleFocus = () => {\n const { value } = this.props;\n\n const items = this._extractValuesFromItems();\n const currentIndex = [...items].indexOf(value as string);\n const index = currentIndex > -1 ? currentIndex : 0;\n\n this.setState({ focusedIndex: index });\n };\n\n private _handleBlur = () => {\n this.setState({ focusedIndex: null });\n };\n\n private _renderItems = () => {\n const { items, value, size, disabled, role, renderItem } = this.props;\n return items.map((item, i) => {\n const {\n 'aria-label': ariaLabel,\n label,\n value: itemValue,\n buttonProps: customButtonProps,\n } = this._extractPropsFromItem(item);\n\n const isChecked = value === itemValue;\n const commonButtonProps = {\n 'aria-checked': isChecked,\n role,\n checked: isChecked,\n visuallyFocused: this.state.focusedIndex === i,\n onClick: () => {\n this.selectItem(itemValue);\n },\n disableFocus: true,\n size,\n disabled,\n corners: getButtonCorners(i === 0, i === items.length - 1),\n };\n\n const buttonProps = {\n ...commonButtonProps,\n ...customButtonProps,\n };\n\n const renderDefault = () => this.renderDefaultItem(label, itemValue, buttonProps, ariaLabel);\n\n return renderItem ? renderItem(label, itemValue, buttonProps, renderDefault, ariaLabel) : renderDefault();\n });\n };\n\n private renderDefaultItem = (label: string, value: string, buttonProps: ButtonProps, ariaLabel?: string) => (\n <Button aria-label={ariaLabel} key={value} {...buttonProps}>\n {label}\n </Button>\n );\n\n private getLabelSizeClassName = (): string => {\n switch (this.props.size) {\n case 'large':\n return styles.captionLarge(this.theme);\n case 'medium':\n return styles.captionMedium(this.theme);\n case 'small':\n default:\n return styles.captionSmall(this.theme);\n }\n };\n}\n"]}
1
+ {"version":3,"sources":["Switcher.tsx"],"names":["React","PropTypes","isKeyArrowHorizontal","isKeyArrowLeft","isKeyEnter","getButtonCorners","Group","Button","ThemeContext","CommonWrapper","cx","rootNode","styles","getSwitcherTheme","mod","SwitcherDataTids","root","Switcher","state","focusedIndex","selectItem","value","props","onValueChange","_extractPropsFromItem","item","label","_extractValuesFromItems","items","map","_focus","index","setState","handleKey","e","buttonProps","disabled","preventDefault","move","left","selectedIndex","newFocusedIndex","_getNextFocusedIndex","i","length","_handleFocus","currentIndex","indexOf","_handleBlur","_renderItems","size","role","renderItem","ariaLabel","itemValue","customButtonProps","isChecked","commonButtonProps","checked","visuallyFocused","onClick","disableFocus","corners","renderDefault","renderDefaultItem","getLabelSizeClassName","captionLarge","theme","captionMedium","captionSmall","render","renderMain","listClassName","error","inputProps","type","onKeyDown","onFocus","onBlur","className","input","captionClassName","caption","setRootNode","wrap","Component","__KONTUR_REACT_UI__","defaultProps","propTypes","bool","oneOfType","arrayOf","string","shape","isRequired","func"],"mappings":"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","sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers';\nimport { getButtonCorners, Group } from '../Group';\nimport { Button, ButtonProps } from '../Button';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { styles } from './Switcher.styles';\nimport { getSwitcherTheme } from './switcherTheme';\nimport { mod } from './helpers';\n\n/**\n * @deprecated use SizeProp\n */\nexport type SwitcherSize = SizeProp;\nexport type SwitcherItems = string | SwitcherItem;\n\nexport const SwitcherDataTids = {\n root: 'Switcher__root',\n} as const;\n\nexport interface SwitcherProps extends Pick<HTMLAttributes<unknown>, 'role'>, CommonProps {\n /**\n * Список строк или список элементов типа `{ label: string, value: string, buttonProps?: Partial<ButtonProps> }`\n */\n items: SwitcherItems[];\n\n value?: string;\n\n onValueChange?: (value: string) => void;\n\n caption?: string;\n\n error?: boolean;\n\n /** Размер */\n size?: SizeProp;\n\n disabled?: boolean;\n\n /**\n * Функция для отрисовки элемента. Аргументы — `label`,\n * `value`, `buttonProps`, `renderDefault`, `ariaLabel`\n */\n renderItem?: (\n label: string,\n value: string,\n buttonProps: ButtonProps,\n renderDefault: () => React.ReactNode,\n ariaLabel?: string,\n ) => React.ReactNode;\n}\n\ntype DefaultProps = Required<Pick<SwitcherProps, 'role'>>;\n\nexport interface SwitcherState {\n focusedIndex: Nullable<number>;\n}\n\ninterface SwitcherItem {\n value: string;\n label: string;\n 'aria-label'?: string;\n buttonProps?: Partial<ButtonProps>;\n}\n\n@rootNode\nexport class Switcher extends React.Component<SwitcherProps, SwitcherState> {\n public static __KONTUR_REACT_UI__ = 'Switcher';\n\n public static defaultProps: DefaultProps = {\n role: 'switch',\n };\n\n public static propTypes = {\n error: PropTypes.bool,\n disabled: PropTypes.bool,\n items: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.string),\n PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.string,\n }),\n ),\n ]).isRequired,\n caption: PropTypes.string,\n value: PropTypes.string,\n onValueChange: PropTypes.func,\n renderItem: PropTypes.func,\n };\n\n public state: SwitcherState = {\n focusedIndex: null,\n };\n\n private theme!: Theme;\n private setRootNode!: TSetRootNode;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = getSwitcherTheme(theme);\n return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const listClassName = cx({\n [styles.error(this.theme)]: !!this.props.error,\n });\n\n const inputProps = {\n type: 'checkbox',\n onKeyDown: this.handleKey,\n onFocus: this._handleFocus,\n onBlur: this._handleBlur,\n className: styles.input(),\n };\n\n const captionClassName = cx(styles.caption(this.theme), this.getLabelSizeClassName());\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div data-tid={SwitcherDataTids.root} className={styles.root()}>\n {this.props.caption ? <div className={captionClassName}>{this.props.caption}</div> : null}\n <div className={styles.wrap()}>\n <input {...inputProps} />\n <div className={listClassName}>\n <Group>{this._renderItems()}</Group>\n </div>\n </div>\n </div>\n </CommonWrapper>\n );\n }\n\n private selectItem = (value: string) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(value);\n }\n };\n\n private _extractPropsFromItem = (item: string | SwitcherItem): SwitcherItem => {\n return typeof item === 'object' ? item : { label: item, value: item };\n };\n\n private _extractValuesFromItems = (): string[] => {\n return this.props.items.map((item) => {\n const { value } = this._extractPropsFromItem(item);\n return value;\n });\n };\n\n private _focus = (index: number) => {\n this.setState({ focusedIndex: index });\n };\n\n private handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\n const focusedIndex = this.state.focusedIndex;\n if (typeof focusedIndex !== 'number') {\n return;\n }\n\n if (isKeyEnter(e)) {\n if (this.props.onValueChange) {\n const { value, buttonProps } = this._extractPropsFromItem(this.props.items[focusedIndex]);\n if (!buttonProps?.disabled) {\n this.selectItem(value);\n }\n }\n return;\n }\n\n if (isKeyArrowHorizontal(e)) {\n e.preventDefault();\n this.move(isKeyArrowLeft(e));\n }\n };\n\n private move = (left: boolean) => {\n const selectedIndex = this.state.focusedIndex;\n\n if (typeof selectedIndex !== 'number') {\n return;\n }\n const newFocusedIndex = this._getNextFocusedIndex(left, selectedIndex);\n this._focus(newFocusedIndex);\n };\n\n private _getNextFocusedIndex = (left: boolean, focusedIndex: number): number => {\n const { items, disabled } = this.props;\n if (disabled) {\n return focusedIndex;\n }\n\n for (let i = 1; i < items.length; i++) {\n const index = mod(focusedIndex + (left ? -i : i), items.length);\n const { buttonProps } = this._extractPropsFromItem(items[index]);\n if (!buttonProps?.disabled) {\n return index;\n }\n }\n return focusedIndex;\n };\n\n private _handleFocus = () => {\n const { value } = this.props;\n\n const items = this._extractValuesFromItems();\n const currentIndex = [...items].indexOf(value as string);\n const index = currentIndex > -1 ? currentIndex : 0;\n\n this.setState({ focusedIndex: index });\n };\n\n private _handleBlur = () => {\n this.setState({ focusedIndex: null });\n };\n\n private _renderItems = () => {\n const { items, value, size, disabled, role, renderItem } = this.props;\n return items.map((item, i) => {\n const {\n 'aria-label': ariaLabel,\n label,\n value: itemValue,\n buttonProps: customButtonProps,\n } = this._extractPropsFromItem(item);\n\n const isChecked = value === itemValue;\n const commonButtonProps = {\n 'aria-checked': isChecked,\n role,\n checked: isChecked,\n visuallyFocused: this.state.focusedIndex === i,\n onClick: () => {\n this.selectItem(itemValue);\n },\n disableFocus: true,\n size,\n disabled,\n corners: getButtonCorners(i === 0, i === items.length - 1),\n };\n\n const buttonProps = {\n ...commonButtonProps,\n ...customButtonProps,\n };\n\n const renderDefault = () => this.renderDefaultItem(label, itemValue, buttonProps, ariaLabel);\n\n return renderItem ? renderItem(label, itemValue, buttonProps, renderDefault, ariaLabel) : renderDefault();\n });\n };\n\n private renderDefaultItem = (label: string, value: string, buttonProps: ButtonProps, ariaLabel?: string) => (\n <Button aria-label={ariaLabel} key={value} {...buttonProps}>\n {label}\n </Button>\n );\n\n private getLabelSizeClassName = (): string => {\n switch (this.props.size) {\n case 'large':\n return styles.captionLarge(this.theme);\n case 'medium':\n return styles.captionMedium(this.theme);\n case 'small':\n default:\n return styles.captionSmall(this.theme);\n }\n };\n}\n"]}
@@ -8,7 +8,7 @@ import { SizeProp } from '../../lib/types/props';
8
8
  * @deprecated use SizeProp
9
9
  */
10
10
  export declare type SwitcherSize = SizeProp;
11
- declare type SwitcherItems = string | SwitcherItem;
11
+ export declare type SwitcherItems = string | SwitcherItem;
12
12
  export declare const SwitcherDataTids: {
13
13
  readonly root: "Switcher__root";
14
14
  };
@@ -176,6 +176,77 @@ const getModelItems = async (query) => {
176
176
  </div>;
177
177
  ```
178
178
 
179
+ #### Пример с дебаунсом функции getItems
180
+
181
+ Функция debounce из lodash некорректно работает с async/promise, поэтому лучше использовать кастомную функцию, как в примере ниже.
182
+
183
+ ```jsx harmony
184
+ import { TokenInput } from "@skbkontur/react-ui";
185
+ import { TokenInputType } from "@skbkontur/react-ui/components/TokenInput";
186
+
187
+ const [value, setValue] = React.useState([]);
188
+
189
+ function debounceAsync(callback, wait) {
190
+ let timeoutId = null;
191
+
192
+ return (...args) => {
193
+ if (timeoutId) {
194
+ clearTimeout(timeoutId);
195
+ }
196
+
197
+ return new Promise((resolve) => {
198
+ const timeoutPromise = new Promise((resolve) => {
199
+ timeoutId = setTimeout(resolve, wait);
200
+ });
201
+ timeoutPromise.then(async () => {
202
+ resolve(await callback(...args));
203
+ });
204
+ });
205
+ };
206
+ }
207
+
208
+ const items = ["kon", "kod", "kof", "kor", "kos"];
209
+
210
+ const getItems = async (query) => {
211
+ console.log("query: ", query);
212
+ return items.filter((item) => item.includes(query));
213
+ };
214
+
215
+ <TokenInput
216
+ style={{ width: "300px" }}
217
+ type={TokenInputType.Combined}
218
+ selectedItems={value}
219
+ onValueChange={setValue}
220
+ getItems={debounceAsync(getItems, 300)}
221
+ placeholder="Начните вводить название"
222
+ />
223
+ ```
224
+ Типизированная версия функции
225
+
226
+ ```typescript static
227
+ function debounceAsync<T, Callback extends (...args: any[]) => Promise<T>>(
228
+ callback: Callback,
229
+ wait: number,
230
+ ): (...args: Parameters<Callback>) => Promise<T> {
231
+ let timeoutId: number | null = null;
232
+
233
+ return (...args: any[]) => {
234
+ if (timeoutId) {
235
+ clearTimeout(timeoutId);
236
+ }
237
+
238
+ return new Promise<T>((resolve) => {
239
+ const timeoutPromise = new Promise<void>((resolve) => {
240
+ timeoutId = setTimeout(resolve, wait);
241
+ });
242
+ timeoutPromise.then(async () => {
243
+ resolve(await callback(...args));
244
+ });
245
+ });
246
+ };
247
+ }
248
+ ```
249
+
179
250
  #### Локали по умолчанию
180
251
 
181
252
  ```typescript static
@@ -5,6 +5,7 @@
5
5
  ```typescript static
6
6
  export interface ReactUIFeatureFlags {
7
7
  tokenInputRemoveWhitespaceFromDefaultDelimiters?: boolean;
8
+ spinnerLoaderRemoveDefaultCaption?: boolean;
8
9
  }
9
10
  ```
10
11
 
@@ -41,6 +42,34 @@ const getItems = () => {};
41
42
  </ReactUIFeatureFlagsContext.Provider>
42
43
  ```
43
44
 
45
+ ### spinnerLoaderRemoveDefaultCaption
46
+
47
+ В Spinner и Loader убран дефолтный caption.
48
+ В React UI 5.0 фича будет применена по умолчанию.
49
+
50
+ ```jsx harmony
51
+ import { Loader, ReactUIFeatureFlagsContext } from '@skbkontur/react-ui';
52
+
53
+ <ReactUIFeatureFlagsContext.Provider value={{ spinnerLoaderRemoveDefaultCaption: true }}>
54
+ <Loader active>
55
+ <div style={{ padding: '16px' }}>
56
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
57
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
58
+ consequat.
59
+ </div>
60
+ </Loader>
61
+ </ReactUIFeatureFlagsContext.Provider>
62
+ ```
63
+
64
+ ```jsx harmony
65
+ import { Spinner, ReactUIFeatureFlagsContext } from '@skbkontur/react-ui';
66
+
67
+
68
+ <ReactUIFeatureFlagsContext.Provider value={{ spinnerLoaderRemoveDefaultCaption: true }}>
69
+ <Spinner/>
70
+ </ReactUIFeatureFlagsContext.Provider>
71
+ ```
72
+
44
73
  ## Объект со всеми флагами
45
74
 
46
75
  Чтобы получить объект со всеми флагами, необходимо применить вспомогательную функцию getFullValidationsFlagsContext к объекту заданных флагов:
@@ -1,4 +1,5 @@
1
1
  import { ReactUIFeatureFlags } from './ReactUIFeatureFlagsContext';
2
2
  export declare const getFullReactUIFlagsContext: (flags: ReactUIFeatureFlags) => {
3
3
  tokenInputRemoveWhitespaceFromDefaultDelimiters?: boolean | undefined;
4
+ spinnerLoaderRemoveDefaultCaption?: boolean | undefined;
4
5
  };
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  export var reactUIFeatureFlagsDefault = {
3
- tokenInputRemoveWhitespaceFromDefaultDelimiters: false
3
+ tokenInputRemoveWhitespaceFromDefaultDelimiters: false,
4
+ spinnerLoaderRemoveDefaultCaption: false
4
5
  };
5
6
  export var ReactUIFeatureFlagsContext = /*#__PURE__*/React.createContext(reactUIFeatureFlagsDefault);
6
7
  ReactUIFeatureFlagsContext.displayName = 'ReactUIFeatureFlagsContext';
@@ -1 +1 @@
1
- {"version":3,"sources":["ReactUIFeatureFlagsContext.tsx"],"names":["React","reactUIFeatureFlagsDefault","tokenInputRemoveWhitespaceFromDefaultDelimiters","ReactUIFeatureFlagsContext","createContext","displayName"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;;;;;AAMA,OAAO,IAAMC,0BAA+C,GAAG;AAC7DC,EAAAA,+CAA+C,EAAE,KADY,EAAxD;;;AAIP,OAAO,IAAMC,0BAA0B,gBAAGH,KAAK,CAACI,aAAN,CAAyCH,0BAAzC,CAAnC;AACPE,0BAA0B,CAACE,WAA3B,GAAyC,4BAAzC","sourcesContent":["import React from 'react';\n\nexport interface ReactUIFeatureFlags {\n tokenInputRemoveWhitespaceFromDefaultDelimiters?: boolean;\n}\n\nexport const reactUIFeatureFlagsDefault: ReactUIFeatureFlags = {\n tokenInputRemoveWhitespaceFromDefaultDelimiters: false,\n};\n\nexport const ReactUIFeatureFlagsContext = React.createContext<ReactUIFeatureFlags>(reactUIFeatureFlagsDefault);\nReactUIFeatureFlagsContext.displayName = 'ReactUIFeatureFlagsContext';\n"]}
1
+ {"version":3,"sources":["ReactUIFeatureFlagsContext.tsx"],"names":["React","reactUIFeatureFlagsDefault","tokenInputRemoveWhitespaceFromDefaultDelimiters","spinnerLoaderRemoveDefaultCaption","ReactUIFeatureFlagsContext","createContext","displayName"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;;;;;;AAOA,OAAO,IAAMC,0BAA+C,GAAG;AAC7DC,EAAAA,+CAA+C,EAAE,KADY;AAE7DC,EAAAA,iCAAiC,EAAE,KAF0B,EAAxD;;;AAKP,OAAO,IAAMC,0BAA0B,gBAAGJ,KAAK,CAACK,aAAN,CAAyCJ,0BAAzC,CAAnC;AACPG,0BAA0B,CAACE,WAA3B,GAAyC,4BAAzC","sourcesContent":["import React from 'react';\n\nexport interface ReactUIFeatureFlags {\n tokenInputRemoveWhitespaceFromDefaultDelimiters?: boolean;\n spinnerLoaderRemoveDefaultCaption?: boolean;\n}\n\nexport const reactUIFeatureFlagsDefault: ReactUIFeatureFlags = {\n tokenInputRemoveWhitespaceFromDefaultDelimiters: false,\n spinnerLoaderRemoveDefaultCaption: false,\n};\n\nexport const ReactUIFeatureFlagsContext = React.createContext<ReactUIFeatureFlags>(reactUIFeatureFlagsDefault);\nReactUIFeatureFlagsContext.displayName = 'ReactUIFeatureFlagsContext';\n"]}
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  export interface ReactUIFeatureFlags {
3
3
  tokenInputRemoveWhitespaceFromDefaultDelimiters?: boolean;
4
+ spinnerLoaderRemoveDefaultCaption?: boolean;
4
5
  }
5
6
  export declare const reactUIFeatureFlagsDefault: ReactUIFeatureFlags;
6
7
  export declare const ReactUIFeatureFlagsContext: React.Context<ReactUIFeatureFlags>;
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@skbkontur/react-ui",
3
- "version": "4.19.0",
3
+ "version": "4.20.0-next.1",
4
4
  "description": "UI Components",
5
5
  "main": "cjs/index.js",
6
6
  "module": "index.js",
7
7
  "sideEffects": false,
8
- "homepage": "https://tech.skbkontur.ru/react-ui/4.19.0/",
8
+ "homepage": "https://tech.skbkontur.ru/react-ui/4.20.0-next.1/",
9
9
  "repository": {
10
10
  "type": "git",
11
11
  "url": "git@github.com:skbkontur/retail-ui.git"
@@ -153,6 +153,6 @@
153
153
  "react-dom": ">=16.9"
154
154
  },
155
155
  "publishConfig": {
156
- "tag": "latest"
156
+ "tag": "next"
157
157
  }
158
158
  }