@skbkontur/react-ui 4.2.2 → 4.3.0

package/components/Toggle/Toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Toggle.tsx"],"names":["React","PropTypes","warning","keyListener","ThemeContext","CommonWrapper","cx","rootNode","styles","globalClasses","colorWarningShown","ToggleDataTids","root","Toggle","props","input","focus","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","handleBlur","onBlur","state","defaultChecked","componentDidMount","autoFocus","render","theme","renderMain","children","captionPosition","error","loading","color","id","disabled","containerClassNames","container","containerDisabled","containerLoading","labelClassNames","rootLeft","caption","captionClass","captionLeft","disabledCaption","setRootNode","button","buttonRight","isWarning","isError","focused","backgroundColor","boxShadow","undefined","activeBackground","background","activeBackgroundLoading","disabledBackground","handle","handleDisabled","Component","__KONTUR_REACT_UI__","propTypes","bool","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport warning from 'warning';\n\nimport { keyListener } from '../../lib/events/keyListener';\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';\n\nimport { styles, globalClasses } from './Toggle.styles';\n\nlet colorWarningShown = false;\n\nexport interface ToggleProps extends CommonProps {\n  children?: React.ReactNode;\n  /**\n   * Положение `children` относительно переключателя.\n   * @default 'right'\n   */\n  captionPosition: 'left' | 'right';\n  /**\n   * Состояние `тогла`, если `true` - `тогл` будет включён, иначе выключен.\n   * @default false\n   */\n  checked?: boolean;\n  /**\n   * Делает `тогл` включенным по умолчанию.\n   */\n  defaultChecked?: boolean;\n  /**\n   * Отключает `тогл`.\n   */\n  disabled?: boolean;\n  /**\n   * Событие вызывающееся, когда значение `тогла` меняется, передаёт текущее значение тогла в переданную функцию.\n   */\n  onValueChange?: (value: boolean) => void;\n  /**\n   * Событие вызывающееся при клике на `тогл`.\n   */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Состояние валидации при предупреждении.\n   * @default false\n   */\n  warning?: boolean;\n  /**\n   * Состояние валидации при ошибке.\n   * @default false\n   */\n  error?: boolean;\n  /**\n   * Добавляет стили для состояния `loading` и отключает `тогл`.\n   */\n  loading?: boolean;\n  /**\n   * Если true, выставляет фокус на `тогле` после загрузки страницы.\n   */\n  autoFocus?: boolean;\n  /**\n   * Событие вызывающееся, когда `тогл` получает фокус.\n   */\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  /**\n   * Событие вызывающееся, когда `тогл` теряет фокус.\n   */\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  /**\n   * @deprecated используйте переменную темы `toggleBgChecked` вместо этого пропа.\n   */\n  color?: React.CSSProperties['color'];\n  /**\n   * HTML-атрибут `id` для передачи во внутренний `<input />`.\n   */\n  id?: string;\n}\n\nexport interface ToggleState {\n  checked?: boolean;\n  focusByTab?: boolean;\n}\n\nexport const ToggleDataTids = {\n  root: 'Toggle__root',\n} as const;\n\n/**\n * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.\n */\n@rootNode\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\n  public static __KONTUR_REACT_UI__ = 'Toggle';\n\n  public static propTypes = {\n    checked: PropTypes.bool,\n    defaultChecked: PropTypes.bool,\n    disabled: PropTypes.bool,\n    error: PropTypes.bool,\n    loading: PropTypes.bool,\n    warning: PropTypes.bool,\n    onValueChange: PropTypes.func,\n    color: (props: ToggleProps) => {\n      if (props.color && !colorWarningShown) {\n        warning(false, `[Toggle]: prop 'color' is deprecated. Please, use theme variable 'toggleBgChecked' instead. `);\n        colorWarningShown = true;\n      }\n    },\n  };\n\n  public static defaultProps = {\n    disabled: false,\n    loading: false,\n    captionPosition: 'right',\n  };\n\n  private theme!: Theme;\n  private input: HTMLInputElement | null = null;\n  private setRootNode!: TSetRootNode;\n\n  constructor(props: ToggleProps) {\n    super(props);\n\n    this.state = {\n      focusByTab: false,\n      checked: props.defaultChecked,\n    };\n  }\n\n  public componentDidMount() {\n    if (this.props.autoFocus) {\n      keyListener.isTabPressed = true;\n      this.focus();\n    }\n  }\n\n  /**\n   * @public\n   */\n  public focus = () => {\n    if (this.input) {\n      keyListener.isTabPressed = true;\n      this.input.focus();\n    }\n  };\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { children, captionPosition, warning, error, loading, color, id } = this.props;\n    const disabled = this.props.disabled || loading;\n    const checked = this.isUncontrolled() ? this.state.checked : this.props.checked;\n\n    const containerClassNames = cx(styles.container(this.theme), {\n      [styles.containerDisabled(this.theme)]: !!disabled,\n      [globalClasses.container]: true,\n      [globalClasses.containerDisabled]: !!disabled,\n      [globalClasses.containerLoading]: loading,\n    });\n\n    const labelClassNames = cx(styles.root(this.theme), {\n      [styles.rootLeft()]: captionPosition === 'left',\n      [styles.disabled()]: !!disabled,\n      [globalClasses.disabled]: !!disabled,\n    });\n\n    let caption = null;\n    if (children) {\n      const captionClass = cx(styles.caption(this.theme), {\n        [styles.captionLeft(this.theme)]: captionPosition === 'left',\n        [styles.disabledCaption(this.theme)]: !!disabled,\n      });\n      caption = <span className={captionClass}>{children}</span>;\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <label data-tid={ToggleDataTids.root} className={labelClassNames}>\n          <div\n            className={cx(styles.button(this.theme), {\n              [styles.buttonRight()]: captionPosition === 'left',\n              [styles.isWarning(this.theme)]: !!warning,\n              [styles.isError(this.theme)]: !!error,\n              [styles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\n            })}\n          >\n            <input\n              type=\"checkbox\"\n              checked={checked}\n              onChange={this.handleChange}\n              className={styles.input(this.theme)}\n              onFocus={this.handleFocus}\n              onBlur={this.handleBlur}\n              ref={this.inputRef}\n              disabled={disabled}\n              id={id}\n            />\n            <div\n              className={containerClassNames}\n              style={\n                checked && color && !disabled\n                  ? {\n                      backgroundColor: color,\n                      boxShadow: `inset 0 0 0 1px ${color}`,\n                    }\n                  : undefined\n              }\n            >\n              <div\n                className={cx(styles.activeBackground(), globalClasses.background, {\n                  [styles.activeBackgroundLoading(this.theme)]: loading,\n                  [styles.disabledBackground(this.theme)]: disabled,\n                })}\n                style={\n                  checked && color && !disabled\n                    ? {\n                        backgroundColor: color,\n                        boxShadow: `inset 0 0 0 1px ${color}`,\n                      }\n                    : undefined\n                }\n              />\n            </div>\n            <div\n              className={cx(styles.handle(this.theme), globalClasses.handle, {\n                [styles.handleDisabled(this.theme)]: disabled,\n              })}\n            />\n          </div>\n          {caption}\n        </label>\n      </CommonWrapper>\n    );\n  }\n\n  private inputRef = (element: HTMLInputElement) => {\n    this.input = element;\n  };\n\n  private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (this.props.onValueChange) {\n      this.props.onValueChange(event.target.checked);\n    }\n\n    if (this.isUncontrolled()) {\n      this.setState({\n        checked: event.target.checked,\n      });\n    }\n\n    if (this.props.onChange) {\n      this.props.onChange(event);\n    }\n  };\n\n  private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (this.props.onFocus) {\n      this.props.onFocus(event);\n    }\n\n    if (keyListener.isTabPressed) {\n      this.setState({ focusByTab: true });\n    }\n  };\n\n  private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (this.props.onBlur) {\n      this.props.onBlur(event);\n    }\n    this.setState({\n      focusByTab: false,\n    });\n  };\n\n  private isUncontrolled() {\n    return this.props.checked === undefined;\n  }\n}\n"]}
+{"version":3,"sources":["Toggle.tsx"],"names":["React","PropTypes","warning","keyListener","ThemeContext","CommonWrapper","cx","rootNode","createPropsGetter","styles","globalClasses","colorWarningShown","ToggleDataTids","root","Toggle","props","getProps","defaultProps","input","focus","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","handleBlur","onBlur","state","defaultChecked","componentDidMount","autoFocus","render","theme","renderMain","children","error","color","id","loading","captionPosition","disabled","containerClassNames","container","containerDisabled","containerLoading","labelClassNames","rootLeft","caption","captionClass","captionLeft","disabledCaption","setRootNode","button","buttonRight","isWarning","isError","focused","backgroundColor","boxShadow","undefined","activeBackground","background","activeBackgroundLoading","disabledBackground","handle","handleDisabled","Component","__KONTUR_REACT_UI__","propTypes","bool","func"],"mappings":"2JAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,OAAP,MAAoB,SAApB;;AAEA,SAASC,WAAT,QAA4B,8BAA5B;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,QAAT,QAAuC,oBAAvC;AACA,SAASC,iBAAT,QAAkC,6BAAlC;;AAEA,SAASC,MAAT,EAAiBC,aAAjB,QAAsC,iBAAtC;;AAEA,IAAIC,iBAAiB,GAAG,KAAxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA,OAAO,IAAMC,cAAc,GAAG;AAC5BC,EAAAA,IAAI,EAAE,cADsB,EAAvB;;;;;;;;;AAUP,OAJA;AACA;AACA,GAEA,IAAaC,MAAb,GADCP,QACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BE,kBAAYQ,KAAZ,EAAgC;AAC9B,wCAAMA,KAAN,UAD8B,MANxBC,QAMwB,GANbR,iBAAiB,CAACM,MAAM,CAACG,YAAR,CAMJ,OAHxBC,KAGwB,GAHS,IAGT;;;;;;;;;;;;;;;;;;AAmBzBC,IAAAA,KAnByB,GAmBjB,YAAM;AACnB,UAAI,MAAKD,KAAT,EAAgB;AACdf,QAAAA,WAAW,CAACiB,YAAZ,GAA2B,IAA3B;AACA,cAAKF,KAAL,CAAWC,KAAX;AACD;AACF,KAxB+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6HxBE,IAAAA,QA7HwB,GA6Hb,UAACC,OAAD,EAA+B;AAChD,YAAKJ,KAAL,GAAaI,OAAb;AACD,KA/H+B;;AAiIxBC,IAAAA,YAjIwB,GAiIT,UAACC,KAAD,EAAgD;AACrE,UAAI,MAAKT,KAAL,CAAWU,aAAf,EAA8B;AAC5B,cAAKV,KAAL,CAAWU,aAAX,CAAyBD,KAAK,CAACE,MAAN,CAAaC,OAAtC;AACD;;AAED,UAAI,MAAKC,cAAL,EAAJ,EAA2B;AACzB,cAAKC,QAAL,CAAc;AACZF,UAAAA,OAAO,EAAEH,KAAK,CAACE,MAAN,CAAaC,OADV,EAAd;;AAGD;;AAED,UAAI,MAAKZ,KAAL,CAAWe,QAAf,EAAyB;AACvB,cAAKf,KAAL,CAAWe,QAAX,CAAoBN,KAApB;AACD;AACF,KA/I+B;;AAiJxBO,IAAAA,WAjJwB,GAiJV,UAACP,KAAD,EAA+C;AACnE,UAAI,MAAKT,KAAL,CAAWiB,OAAf,EAAwB;AACtB,cAAKjB,KAAL,CAAWiB,OAAX,CAAmBR,KAAnB;AACD;;AAED,UAAIrB,WAAW,CAACiB,YAAhB,EAA8B;AAC5B,cAAKS,QAAL,CAAc,EAAEI,UAAU,EAAE,IAAd,EAAd;AACD;AACF,KAzJ+B;;AA2JxBC,IAAAA,UA3JwB,GA2JX,UAACV,KAAD,EAA+C;AAClE,UAAI,MAAKT,KAAL,CAAWoB,MAAf,EAAuB;AACrB,cAAKpB,KAAL,CAAWoB,MAAX,CAAkBX,KAAlB;AACD;AACD,YAAKK,QAAL,CAAc;AACZI,QAAAA,UAAU,EAAE,KADA,EAAd;;AAGD,KAlK+B,CAG9B,MAAKG,KAAL,GAAa,EACXH,UAAU,EAAE,KADD,EAEXN,OAAO,EAAEZ,KAAK,CAACsB,cAFJ,EAAb,CAH8B,aAO/B,CAtCH,qCAwCSC,iBAxCT,GAwCE,6BAA2B,CACzB,IAAI,KAAKvB,KAAL,CAAWwB,SAAf,EAA0B,CACxBpC,WAAW,CAACiB,YAAZ,GAA2B,IAA3B,CACA,KAAKD,KAAL,GACD,CACF,CA7CH,CA+CE;AACF;AACA,KAjDA,QAyDSqB,MAzDT,GAyDE,kBAAgB,mBACd,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,CAlEH,QAoEUA,UApEV,GAoEE,sBAAqB,iCACnB,kBAAgD,KAAK3B,KAArD,CAAQ4B,QAAR,eAAQA,QAAR,CAAkBzC,OAAlB,eAAkBA,OAAlB,CAA2B0C,KAA3B,eAA2BA,KAA3B,CAAkCC,KAAlC,eAAkCA,KAAlC,CAAyCC,EAAzC,eAAyCA,EAAzC,CACA,qBAAqC,KAAK9B,QAAL,EAArC,CAAQ+B,OAAR,kBAAQA,OAAR,CAAiBC,eAAjB,kBAAiBA,eAAjB,CACA,IAAMC,QAAQ,GAAG,KAAKjC,QAAL,GAAgBiC,QAAhB,IAA4BF,OAA7C,CACA,IAAMpB,OAAO,GAAG,KAAKC,cAAL,KAAwB,KAAKQ,KAAL,CAAWT,OAAnC,GAA6C,KAAKZ,KAAL,CAAWY,OAAxE,CAEA,IAAMuB,mBAAmB,GAAG5C,EAAE,CAACG,MAAM,CAAC0C,SAAP,CAAiB,KAAKV,KAAtB,CAAD,iBAC3BhC,MAAM,CAAC2C,iBAAP,CAAyB,KAAKX,KAA9B,CAD2B,IACY,CAAC,CAACQ,QADd,MAE3BvC,aAAa,CAACyC,SAFa,IAED,IAFC,MAG3BzC,aAAa,CAAC0C,iBAHa,IAGO,CAAC,CAACH,QAHT,MAI3BvC,aAAa,CAAC2C,gBAJa,IAIMN,OAJN,OAA9B,CAOA,IAAMO,eAAe,GAAGhD,EAAE,CAACG,MAAM,CAACI,IAAP,CAAY,KAAK4B,KAAjB,CAAD,mBACvBhC,MAAM,CAAC8C,QAAP,EADuB,IACHP,eAAe,KAAK,MADjB,OAEvBvC,MAAM,CAACwC,QAAP,EAFuB,IAEH,CAAC,CAACA,QAFC,OAGvBvC,aAAa,CAACuC,QAHS,IAGE,CAAC,CAACA,QAHJ,QAA1B,CAMA,IAAIO,OAAO,GAAG,IAAd,CACA,IAAIb,QAAJ,EAAc,UACZ,IAAMc,YAAY,GAAGnD,EAAE,CAACG,MAAM,CAAC+C,OAAP,CAAe,KAAKf,KAApB,CAAD,mBACpBhC,MAAM,CAACiD,WAAP,CAAmB,KAAKjB,KAAxB,CADoB,IACaO,eAAe,KAAK,MADjC,OAEpBvC,MAAM,CAACkD,eAAP,CAAuB,KAAKlB,KAA5B,CAFoB,IAEiB,CAAC,CAACQ,QAFnB,QAAvB,CAIAO,OAAO,gBAAG,8BAAM,SAAS,EAAEC,YAAjB,IAAgCd,QAAhC,CAAV,CACD,CAED,oBACE,oBAAC,aAAD,aAAe,WAAW,EAAE,KAAKiB,WAAjC,IAAkD,KAAK7C,KAAvD,gBACE,+BAAO,YAAUH,cAAc,CAACC,IAAhC,EAAsC,SAAS,EAAEyC,eAAjD,iBACE,6BACE,SAAS,EAAEhD,EAAE,CAACG,MAAM,CAACoD,MAAP,CAAc,KAAKpB,KAAnB,CAAD,mBACVhC,MAAM,CAACqD,WAAP,EADU,IACad,eAAe,KAAK,MADjC,OAEVvC,MAAM,CAACsD,SAAP,CAAiB,KAAKtB,KAAtB,CAFU,IAEqB,CAAC,CAACvC,OAFvB,OAGVO,MAAM,CAACuD,OAAP,CAAe,KAAKvB,KAApB,CAHU,IAGmB,CAAC,CAACG,KAHrB,OAIVnC,MAAM,CAACwD,OAAP,CAAe,KAAKxB,KAApB,CAJU,IAImB,CAACQ,QAAD,IAAa,CAAC,CAAC,KAAKb,KAAL,CAAWH,UAJ7C,QADf,iBAQE,+BACE,IAAI,EAAC,UADP,EAEE,OAAO,EAAEN,OAFX,EAGE,QAAQ,EAAE,KAAKJ,YAHjB,EAIE,SAAS,EAAEd,MAAM,CAACS,KAAP,CAAa,KAAKuB,KAAlB,CAJb,EAKE,OAAO,EAAE,KAAKV,WALhB,EAME,MAAM,EAAE,KAAKG,UANf,EAOE,GAAG,EAAE,KAAKb,QAPZ,EAQE,QAAQ,EAAE4B,QARZ,EASE,EAAE,EAAEH,EATN,GARF,eAmBE,6BACE,SAAS,EAAEI,mBADb,EAEE,KAAK,EACHvB,OAAO,IAAIkB,KAAX,IAAoB,CAACI,QAArB,GACI,EACEiB,eAAe,EAAErB,KADnB,EAEEsB,SAAS,uBAAqBtB,KAFhC,EADJ,GAKIuB,SARR,iBAWE,6BACE,SAAS,EAAE9D,EAAE,CAACG,MAAM,CAAC4D,gBAAP,EAAD,EAA4B3D,aAAa,CAAC4D,UAA1C,mBACV7D,MAAM,CAAC8D,uBAAP,CAA+B,KAAK9B,KAApC,CADU,IACmCM,OADnC,OAEVtC,MAAM,CAAC+D,kBAAP,CAA0B,KAAK/B,KAA/B,CAFU,IAE8BQ,QAF9B,QADf,EAKE,KAAK,EACHtB,OAAO,IAAIkB,KAAX,IAAoB,CAACI,QAArB,GACI,EACEiB,eAAe,EAAErB,KADnB,EAEEsB,SAAS,uBAAqBtB,KAFhC,EADJ,GAKIuB,SAXR,GAXF,CAnBF,eA6CE,6BACE,SAAS,EAAE9D,EAAE,CAACG,MAAM,CAACgE,MAAP,CAAc,KAAKhC,KAAnB,CAAD,EAA4B/B,aAAa,CAAC+D,MAA1C,mBACVhE,MAAM,CAACiE,cAAP,CAAsB,KAAKjC,KAA3B,CADU,IAC0BQ,QAD1B,QADf,GA7CF,CADF,EAoDGO,OApDH,CADF,CADF,CA0DD,CA1JH,QAmMU5B,cAnMV,GAmME,0BAAyB;AACvB,WAAO,KAAKb,KAAL,CAAWY,OAAX,KAAuByC,SAA9B;AACD,GArMH,iBAA4BpE,KAAK,CAAC2E,SAAlC,WACgBC,mBADhB,GACsC,QADtC,UAGgBC,SAHhB,GAG4B,EACxBlD,OAAO,EAAE1B,SAAS,CAAC6E,IADK,EAExBzC,cAAc,EAAEpC,SAAS,CAAC6E,IAFF,EAGxB7B,QAAQ,EAAEhD,SAAS,CAAC6E,IAHI,EAIxBlC,KAAK,EAAE3C,SAAS,CAAC6E,IAJO,EAKxB/B,OAAO,EAAE9C,SAAS,CAAC6E,IALK,EAMxB5E,OAAO,EAAED,SAAS,CAAC6E,IANK,EAOxBrD,aAAa,EAAExB,SAAS,CAAC8E,IAPD,EAQxBlC,KAAK,EAAE,eAAC9B,KAAD,EAAwB,CAC7B,IAAIA,KAAK,CAAC8B,KAAN,IAAe,CAAClC,iBAApB,EAAuC,CACrCT,OAAO,CAAC,KAAD,iGAAP,CACAS,iBAAiB,GAAG,IAApB,CACD,CACF,CAbuB,EAH5B,UAmBgBM,YAnBhB,GAmB6C,EACzCgC,QAAQ,EAAE,KAD+B,EAEzCF,OAAO,EAAE,KAFgC,EAGzCC,eAAe,EAAE,OAHwB,EAnB7C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport warning from 'warning';\n\nimport { keyListener } from '../../lib/events/keyListener';\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 { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles, globalClasses } from './Toggle.styles';\n\nlet colorWarningShown = false;\n\nexport interface ToggleProps extends CommonProps {\n  children?: React.ReactNode;\n  /**\n   * Положение `children` относительно переключателя.\n   * @default 'right'\n   */\n  captionPosition?: 'left' | 'right';\n  /**\n   * Состояние `тогла`, если `true` - `тогл` будет включён, иначе выключен.\n   * @default false\n   */\n  checked?: boolean;\n  /**\n   * Делает `тогл` включенным по умолчанию.\n   */\n  defaultChecked?: boolean;\n  /**\n   * Отключает `тогл`.\n   */\n  disabled?: boolean;\n  /**\n   * Событие вызывающееся, когда значение `тогла` меняется, передаёт текущее значение тогла в переданную функцию.\n   */\n  onValueChange?: (value: boolean) => void;\n  /**\n   * Событие вызывающееся при клике на `тогл`.\n   */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Состояние валидации при предупреждении.\n   * @default false\n   */\n  warning?: boolean;\n  /**\n   * Состояние валидации при ошибке.\n   * @default false\n   */\n  error?: boolean;\n  /**\n   * Добавляет стили для состояния `loading` и отключает `тогл`.\n   */\n  loading?: boolean;\n  /**\n   * Если true, выставляет фокус на `тогле` после загрузки страницы.\n   */\n  autoFocus?: boolean;\n  /**\n   * Событие вызывающееся, когда `тогл` получает фокус.\n   */\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  /**\n   * Событие вызывающееся, когда `тогл` теряет фокус.\n   */\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  /**\n   * @deprecated используйте переменную темы `toggleBgChecked` вместо этого пропа.\n   */\n  color?: React.CSSProperties['color'];\n  /**\n   * HTML-атрибут `id` для передачи во внутренний `<input />`.\n   */\n  id?: string;\n}\n\nexport interface ToggleState {\n  checked?: boolean;\n  focusByTab?: boolean;\n}\n\nexport const ToggleDataTids = {\n  root: 'Toggle__root',\n} as const;\n\ntype DefaultProps = Required<Pick<ToggleProps, 'disabled' | 'loading' | 'captionPosition'>>;\n\n/**\n * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.\n */\n@rootNode\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\n  public static __KONTUR_REACT_UI__ = 'Toggle';\n\n  public static propTypes = {\n    checked: PropTypes.bool,\n    defaultChecked: PropTypes.bool,\n    disabled: PropTypes.bool,\n    error: PropTypes.bool,\n    loading: PropTypes.bool,\n    warning: PropTypes.bool,\n    onValueChange: PropTypes.func,\n    color: (props: ToggleProps) => {\n      if (props.color && !colorWarningShown) {\n        warning(false, `[Toggle]: prop 'color' is deprecated. Please, use theme variable 'toggleBgChecked' instead. `);\n        colorWarningShown = true;\n      }\n    },\n  };\n\n  public static defaultProps: DefaultProps = {\n    disabled: false,\n    loading: false,\n    captionPosition: 'right',\n  };\n\n  private getProps = createPropsGetter(Toggle.defaultProps);\n\n  private theme!: Theme;\n  private input: HTMLInputElement | null = null;\n  private setRootNode!: TSetRootNode;\n\n  constructor(props: ToggleProps) {\n    super(props);\n\n    this.state = {\n      focusByTab: false,\n      checked: props.defaultChecked,\n    };\n  }\n\n  public componentDidMount() {\n    if (this.props.autoFocus) {\n      keyListener.isTabPressed = true;\n      this.focus();\n    }\n  }\n\n  /**\n   * @public\n   */\n  public focus = () => {\n    if (this.input) {\n      keyListener.isTabPressed = true;\n      this.input.focus();\n    }\n  };\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { children, warning, error, color, id } = this.props;\n    const { loading, captionPosition } = this.getProps();\n    const disabled = this.getProps().disabled || loading;\n    const checked = this.isUncontrolled() ? this.state.checked : this.props.checked;\n\n    const containerClassNames = cx(styles.container(this.theme), {\n      [styles.containerDisabled(this.theme)]: !!disabled,\n      [globalClasses.container]: true,\n      [globalClasses.containerDisabled]: !!disabled,\n      [globalClasses.containerLoading]: loading,\n    });\n\n    const labelClassNames = cx(styles.root(this.theme), {\n      [styles.rootLeft()]: captionPosition === 'left',\n      [styles.disabled()]: !!disabled,\n      [globalClasses.disabled]: !!disabled,\n    });\n\n    let caption = null;\n    if (children) {\n      const captionClass = cx(styles.caption(this.theme), {\n        [styles.captionLeft(this.theme)]: captionPosition === 'left',\n        [styles.disabledCaption(this.theme)]: !!disabled,\n      });\n      caption = <span className={captionClass}>{children}</span>;\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <label data-tid={ToggleDataTids.root} className={labelClassNames}>\n          <div\n            className={cx(styles.button(this.theme), {\n              [styles.buttonRight()]: captionPosition === 'left',\n              [styles.isWarning(this.theme)]: !!warning,\n              [styles.isError(this.theme)]: !!error,\n              [styles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\n            })}\n          >\n            <input\n              type=\"checkbox\"\n              checked={checked}\n              onChange={this.handleChange}\n              className={styles.input(this.theme)}\n              onFocus={this.handleFocus}\n              onBlur={this.handleBlur}\n              ref={this.inputRef}\n              disabled={disabled}\n              id={id}\n            />\n            <div\n              className={containerClassNames}\n              style={\n                checked && color && !disabled\n                  ? {\n                      backgroundColor: color,\n                      boxShadow: `inset 0 0 0 1px ${color}`,\n                    }\n                  : undefined\n              }\n            >\n              <div\n                className={cx(styles.activeBackground(), globalClasses.background, {\n                  [styles.activeBackgroundLoading(this.theme)]: loading,\n                  [styles.disabledBackground(this.theme)]: disabled,\n                })}\n                style={\n                  checked && color && !disabled\n                    ? {\n                        backgroundColor: color,\n                        boxShadow: `inset 0 0 0 1px ${color}`,\n                      }\n                    : undefined\n                }\n              />\n            </div>\n            <div\n              className={cx(styles.handle(this.theme), globalClasses.handle, {\n                [styles.handleDisabled(this.theme)]: disabled,\n              })}\n            />\n          </div>\n          {caption}\n        </label>\n      </CommonWrapper>\n    );\n  }\n\n  private inputRef = (element: HTMLInputElement) => {\n    this.input = element;\n  };\n\n  private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (this.props.onValueChange) {\n      this.props.onValueChange(event.target.checked);\n    }\n\n    if (this.isUncontrolled()) {\n      this.setState({\n        checked: event.target.checked,\n      });\n    }\n\n    if (this.props.onChange) {\n      this.props.onChange(event);\n    }\n  };\n\n  private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (this.props.onFocus) {\n      this.props.onFocus(event);\n    }\n\n    if (keyListener.isTabPressed) {\n      this.setState({ focusByTab: true });\n    }\n  };\n\n  private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (this.props.onBlur) {\n      this.props.onBlur(event);\n    }\n    this.setState({\n      focusByTab: false,\n    });\n  };\n\n  private isUncontrolled() {\n    return this.props.checked === undefined;\n  }\n}\n"]}

package/components/Toggle/Toggle.d.ts

@@ -7,7 +7,7 @@ export interface ToggleProps extends CommonProps {
      * Положение `children` относительно переключателя.
      * @default 'right'
      */
-    captionPosition: 'left' | 'right';
+    captionPosition?: 'left' | 'right';
     /**
      * Состояние `тогла`, если `true` - `тогл` будет включён, иначе выключен.
      * @default false
@@ -71,6 +71,7 @@ export interface ToggleState {
 export declare const ToggleDataTids: {
     readonly root: "Toggle__root";
 };
+declare type DefaultProps = Required<Pick<ToggleProps, 'disabled' | 'loading' | 'captionPosition'>>;
 /**
  * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.
  */
@@ -86,11 +87,8 @@ export declare class Toggle extends React.Component<ToggleProps, ToggleState> {
         onValueChange: PropTypes.Requireable<(...args: any[]) => any>;
         color: (props: ToggleProps) => void;
     };
-    static defaultProps: {
-        disabled: boolean;
-        loading: boolean;
-        captionPosition: string;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     private theme;
     private input;
     private setRootNode;
@@ -108,3 +106,4 @@ export declare class Toggle extends React.Component<ToggleProps, ToggleState> {
     private handleBlur;
     private isUncontrolled;
 }
+export {};

package/components/TokenInput/TokenInput/TokenInput.js

@@ -59,6 +59,7 @@ import { MenuItem } from "../../MenuItem/MenuItem";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { getRootNode, rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { TokenInputLocaleHelper } from "../locale";
 import { styles } from "../TokenInput.styles";
 import { tokenInputReducer } from "../TokenInputReducer";
@@ -124,6 +125,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     }
 
     _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(TokenInput.defaultProps);
     _this.state = DefaultState;
     _this.input = null;
     _this.tokensInputMenu = null;
@@ -168,9 +170,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         type: 'SET_FOCUS_IN'
       });
 
-      if (_this.props.onFocus) {
-        _this.props.onFocus(event);
-      }
+      _this.getProps().onFocus(event);
     };
 
     _this.handleInputBlur = function (event) {
@@ -202,7 +202,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
           type: 'BLUR'
         });
 
-        _this.props.onBlur == null ? void 0 : _this.props.onBlur(event);
+        _this.getProps().onBlur(event);
       }
     };
 
@@ -210,7 +210,6 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       var _this$state = _this.state,
           inputValue = _this$state.inputValue,
           autocompleteItems = _this$state.autocompleteItems;
-      var valueToString = _this.props.valueToString;
 
       if (inputValue === '') {
         // если стерли содержимое токена в режиме редактирования, то удаляем токен
@@ -232,7 +231,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       if (autocompleteItems && autocompleteItems.length === 1) {
         var _item = autocompleteItems[0];
 
-        if (valueToString(_item) === inputValue) {
+        if (_this.getProps().valueToString(_item) === inputValue) {
           _this.isEditingMode ? _this.finishTokenEdit() : _this.selectItem(_item);
           return;
         }
@@ -288,17 +287,23 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         return;
       }
 
-      event.preventDefault(); // упорядочивание токенов по индексу
+      event.preventDefault();
+
+      var _this$getProps = _this.getProps(),
+          selectedItems = _this$getProps.selectedItems,
+          valueToString = _this$getProps.valueToString,
+          delimiters = _this$getProps.delimiters; // упорядочивание токенов по индексу
+
 
       var tokens = _this.state.activeTokens.map(function (token) {
-        return _this.props.selectedItems.indexOf(token);
+        return selectedItems.indexOf(token);
       }).sort().map(function (index) {
-        return _this.props.selectedItems[index];
+        return selectedItems[index];
       }).map(function (item) {
-        return _this.props.valueToString(item);
+        return valueToString(item);
       });
 
-      event.clipboardData.setData('text/plain', tokens.join(_this.props.delimiters[0]));
+      event.clipboardData.setData('text/plain', tokens.join(delimiters[0]));
     };
 
     _this.handleInputPaste = function (event) {
@@ -307,7 +312,12 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       }
 
       var paste = event.clipboardData.getData('text');
-      var delimiters = _this.props.delimiters;
+
+      var _this$getProps2 = _this.getProps(),
+          delimiters = _this$getProps2.delimiters,
+          selectedItems = _this$getProps2.selectedItems,
+          valueToItem = _this$getProps2.valueToItem,
+          onValueChange = _this$getProps2.onValueChange;
 
       if (delimiters.some(function (delimiter) {
         return paste.includes(delimiter);
@@ -323,14 +333,13 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         var tokens = paste.split(delimiters[0]);
 
         var _items = tokens.map(function (token) {
-          return _this.props.valueToItem(token);
+          return valueToItem(token);
         }).filter(function (item) {
-          return !_this.hasValueInItems(_this.props.selectedItems, item);
+          return !_this.hasValueInItems(selectedItems, item);
         });
 
-        var newItems = _this.props.selectedItems.concat(_items);
-
-        _this.props.onValueChange(newItems);
+        var newItems = selectedItems.concat(_items);
+        onValueChange(newItems);
 
         _this.dispatch({
           type: 'SET_AUTOCOMPLETE_ITEMS',
@@ -343,7 +352,8 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
 
     _this.tryGetItems = /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(query) {
-        var autocompleteItems, isSelectedItem, isEditingItem, autocompleteItemsUnique, editingItem, selectItemIndex;
+        var autocompleteItems, _this$getProps3, selectedItems, valueToItem, valueToString, isSelectedItem, isEditingItem, autocompleteItemsUnique, editingItem, selectItemIndex;
+
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
@@ -353,7 +363,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
                 }
 
                 if (!(_this.props.getItems && (_this.state.inputValue !== '' || !_this.props.hideMenuIfEmptyInputValue))) {
-                  _context.next = 14;
+                  _context.next = 15;
                   break;
                 }
 
@@ -373,12 +383,14 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
                   payload: false
                 });
 
+                _this$getProps3 = _this.getProps(), selectedItems = _this$getProps3.selectedItems, valueToItem = _this$getProps3.valueToItem, valueToString = _this$getProps3.valueToString;
+
                 isSelectedItem = function isSelectedItem(item) {
-                  return _this.hasValueInItems(_this.props.selectedItems, item);
+                  return _this.hasValueInItems(selectedItems, item);
                 };
 
                 isEditingItem = function isEditingItem(item) {
-                  var editingItem = _this.props.selectedItems[_this.state.editingTokenIndex];
+                  var editingItem = selectedItems[_this.state.editingTokenIndex];
                   return !!editingItem && isEqual(item, editingItem);
                 };
 
@@ -387,9 +399,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
                 });
 
                 if (_this.isEditingMode) {
-                  editingItem = _this.props.selectedItems[_this.state.editingTokenIndex];
+                  editingItem = selectedItems[_this.state.editingTokenIndex];
 
-                  if (isEqual(editingItem, _this.props.valueToItem(_this.state.inputValue)) && !_this.hasValueInItems(autocompleteItemsUnique, editingItem)) {
+                  if (isEqual(editingItem, valueToItem(_this.state.inputValue)) && !_this.hasValueInItems(autocompleteItemsUnique, editingItem)) {
                     autocompleteItemsUnique.unshift(editingItem);
                   }
                 }
@@ -406,14 +418,14 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
                 }
 
                 selectItemIndex = autocompleteItemsUnique.findIndex(function (item) {
-                  return _this.props.valueToString(item).toLowerCase() === _this.state.inputValue.toLowerCase();
+                  return valueToString(item).toLowerCase() === _this.state.inputValue.toLowerCase();
                 });
 
                 if (_this.menuRef) {
                   _this.menuRef.highlightItem(selectItemIndex < 0 ? 0 : selectItemIndex);
                 }
 
-              case 14:
+              case 15:
               case "end":
                 return _context.stop();
             }
@@ -439,7 +451,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
 
       e.stopPropagation();
 
-      if (_this.type !== TokenInputType.WithReference && _this.props.delimiters.some(function (key) {
+      if (_this.type !== TokenInputType.WithReference && _this.getProps().delimiters.some(function (key) {
         return key === e.key || key === ',' && isKeyComma(e);
       }) || isKeyEnter(e) && _this.type === TokenInputType.WithoutReference) {
         e.preventDefault();
@@ -515,16 +527,19 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     _this.handleWrapperKeyDown = function (e) {
       var _this$wrapper2;
 
+      var _this$getProps4 = _this.getProps(),
+          selectedItems = _this$getProps4.selectedItems,
+          onValueChange = _this$getProps4.onValueChange;
+
       switch (true) {
         case isKeyBackspace(e):
         case isKeyDelete(e):
           {
             if (!_this.isEditingMode) {
-              var itemsNew = _this.props.selectedItems.filter(function (item) {
+              var itemsNew = selectedItems.filter(function (item) {
                 return !_this.hasValueInItems(_this.state.activeTokens, item);
               });
-
-              _this.props.onValueChange(itemsNew);
+              onValueChange(itemsNew);
 
               _this.dispatch({
                 type: 'REMOVE_ALL_ACTIVE_TOKENS'
@@ -562,7 +577,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
 
           _this.dispatch({
             type: 'SET_ACTIVE_TOKENS',
-            payload: _this.props.selectedItems
+            payload: selectedItems
           });
 
           break;
@@ -571,13 +586,14 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
 
     _this.handleWrapperArrows = function (e) {
       e.preventDefault();
-      var activeTokens = _this.state.activeTokens;
 
-      var activeItemIndex = _this.props.selectedItems.indexOf(activeTokens[0]);
+      var selectedItems = _this.getProps().selectedItems;
 
+      var activeTokens = _this.state.activeTokens;
+      var activeItemIndex = selectedItems.indexOf(activeTokens[0]);
       var newItemIndex = activeItemIndex + (isKeyArrowLeft(e) ? -1 : +1);
       var isLeftEdge = activeItemIndex === 0 && isKeyArrowLeft(e);
-      var isRightEdge = activeItemIndex === _this.props.selectedItems.length - 1 && isKeyArrowRight(e);
+      var isRightEdge = activeItemIndex === selectedItems.length - 1 && isKeyArrowRight(e);
 
       if (!e.shiftKey && activeTokens.length === 1) {
         _this.handleWrapperArrowsWithoutShift(isLeftEdge, isRightEdge, newItemIndex);
@@ -598,14 +614,15 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       } else if (!isLeftEdge) {
         _this.dispatch({
           type: 'SET_ACTIVE_TOKENS',
-          payload: [_this.props.selectedItems[newItemIndex]]
+          payload: [_this.getProps().selectedItems[newItemIndex]]
         });
       }
     };
 
     _this.handleWrapperArrowsWithShift = function (isLeftEdge, isRightEdge, newItemIndex) {
       if (!isLeftEdge && !isRightEdge) {
-        var itemNew = _this.props.selectedItems[newItemIndex];
+        var itemNew = _this.getProps().selectedItems[newItemIndex];
+
         var itemsNew = [itemNew].concat(_this.state.activeTokens.filter(function (item) {
           return !isEqual(item, itemNew);
         }));
@@ -618,11 +635,11 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     };
 
     _this.handleValueChange = function (items) {
-      _this.props.onValueChange(items);
+      _this.getProps().onValueChange(items);
     };
 
     _this.handleAddItem = function () {
-      var item = _this.props.valueToItem(_this.state.inputValue);
+      var item = _this.getProps().valueToItem(_this.state.inputValue);
 
       if (item) {
         _this.selectItem(item);
@@ -630,12 +647,14 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     };
 
     _this.selectItem = function (item) {
-      var selectedItems = _this.props.selectedItems;
+      var _this$getProps5 = _this.getProps(),
+          selectedItems = _this$getProps5.selectedItems,
+          valueToString = _this$getProps5.valueToString;
 
       if (_this.isEditingMode) {
         _this.dispatch({
           type: 'UPDATE_QUERY',
-          payload: _this.props.valueToString(item)
+          payload: valueToString(item)
         }, _this.finishTokenEdit);
       } else if (!_this.hasValueInItems(selectedItems, item)) {
         _this.handleValueChange(selectedItems.concat([item]));
@@ -649,7 +668,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     };
 
     _this.handleRemoveToken = function (item) {
-      _this.props.onValueChange(_this.props.selectedItems.filter(function (_) {
+      _this.props.onValueChange == null ? void 0 : _this.props.onValueChange(_this.getProps().selectedItems.filter(function (_) {
         return !isEqual(_, item);
       }));
 
@@ -692,7 +711,11 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     };
 
     _this.handleTokenEdit = function (itemNew) {
-      var editingTokenIndex = _this.props.selectedItems.findIndex(function (item) {
+      var _this$getProps6 = _this.getProps(),
+          selectedItems = _this$getProps6.selectedItems,
+          valueToString = _this$getProps6.valueToString;
+
+      var editingTokenIndex = selectedItems.findIndex(function (item) {
         return item === itemNew;
       });
 
@@ -712,7 +735,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
 
       _this.dispatch({
         type: 'UPDATE_QUERY',
-        payload: _this.props.valueToString(itemNew)
+        payload: valueToString(itemNew)
       }, _this.selectInputText);
 
       _this.dispatch({
@@ -723,14 +746,15 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     };
 
     _this.finishTokenEdit = function () {
+      var selectedItems = _this.getProps().selectedItems;
+
       var _this$state2 = _this.state,
           editingTokenIndex = _this$state2.editingTokenIndex,
           inputValue = _this$state2.inputValue,
           reservedInputValue = _this$state2.reservedInputValue;
-      var _this$props = _this.props,
-          selectedItems = _this$props.selectedItems,
-          valueToItem = _this$props.valueToItem;
-      var editedItem = valueToItem(inputValue);
+
+      var editedItem = _this.getProps().valueToItem(inputValue);
+
       var newItems = selectedItems.concat([]);
 
       if (!_this.hasValueInItems(selectedItems, editedItem)) {
@@ -834,22 +858,24 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
 
     _this.renderTokensStart = function () {
       var editingTokenIndex = _this.state.editingTokenIndex;
-      var selectedItems = _this.props.selectedItems;
+
+      var selectedItems = _this.getProps().selectedItems;
+
       var delimiter = editingTokenIndex >= 0 ? editingTokenIndex : selectedItems.length;
       return selectedItems.slice(0, delimiter).map(_this.renderToken);
     };
 
     _this.renderTokensEnd = function () {
       if (_this.state.editingTokenIndex >= 0) {
-        return _this.props.selectedItems.slice(_this.state.editingTokenIndex + 1).map(_this.renderToken);
+        return _this.getProps().selectedItems.slice(_this.state.editingTokenIndex + 1).map(_this.renderToken);
       }
     };
 
     _this.renderToken = function (item) {
-      var _this$props2 = _this.props,
-          _this$props2$renderTo = _this$props2.renderToken,
-          renderToken = _this$props2$renderTo === void 0 ? defaultRenderToken : _this$props2$renderTo,
-          disabled = _this$props2.disabled;
+      var _this$props = _this.props,
+          _this$props$renderTok = _this$props.renderToken,
+          renderToken = _this$props$renderTok === void 0 ? defaultRenderToken : _this$props$renderTok,
+          disabled = _this$props.disabled;
 
       var isActive = _this.state.activeTokens.includes(item); // TODO useCallback
 
@@ -937,7 +963,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       });
     }
 
-    if (prevProps.selectedItems.length !== this.props.selectedItems.length) {
+    if (prevProps.selectedItems.length !== this.getProps().selectedItems.length) {
       LayoutEvents.emit();
     }
 
@@ -986,24 +1012,27 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       throw Error('Missed getItems for type ' + this.type);
     }
 
-    var _this$props3 = this.props,
-        selectedItems = _this$props3.selectedItems,
-        width = _this$props3.width,
-        maxMenuHeight = _this$props3.maxMenuHeight,
-        error = _this$props3.error,
-        warning = _this$props3.warning,
-        disabled = _this$props3.disabled,
-        placeholder = _this$props3.placeholder,
-        renderItem = _this$props3.renderItem,
-        renderNotFound = _this$props3.renderNotFound,
-        hideMenuIfEmptyInputValue = _this$props3.hideMenuIfEmptyInputValue,
-        onMouseEnter = _this$props3.onMouseEnter,
-        onMouseLeave = _this$props3.onMouseLeave,
-        inputMode = _this$props3.inputMode,
-        menuWidth = _this$props3.menuWidth,
-        menuAlign = _this$props3.menuAlign,
-        renderTotalCount = _this$props3.renderTotalCount,
-        totalCount = _this$props3.totalCount;
+    var _this$props2 = this.props,
+        maxMenuHeight = _this$props2.maxMenuHeight,
+        error = _this$props2.error,
+        warning = _this$props2.warning,
+        disabled = _this$props2.disabled,
+        placeholder = _this$props2.placeholder,
+        renderNotFound = _this$props2.renderNotFound,
+        hideMenuIfEmptyInputValue = _this$props2.hideMenuIfEmptyInputValue,
+        inputMode = _this$props2.inputMode,
+        renderTotalCount = _this$props2.renderTotalCount,
+        totalCount = _this$props2.totalCount;
+
+    var _this$getProps7 = this.getProps(),
+        selectedItems = _this$getProps7.selectedItems,
+        width = _this$getProps7.width,
+        onMouseEnter = _this$getProps7.onMouseEnter,
+        onMouseLeave = _this$getProps7.onMouseLeave,
+        menuWidth = _this$getProps7.menuWidth,
+        menuAlign = _this$getProps7.menuAlign,
+        renderItem = _this$getProps7.renderItem;
+
     var _this$state3 = this.state,
         activeTokens = _this$state3.activeTokens,
         inFocus = _this$state3.inFocus,
@@ -1113,7 +1142,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
   };
 
   _proto.moveFocusToLastToken = function moveFocusToLastToken() {
-    var items = this.props.selectedItems;
+    var items = this.getProps().selectedItems;
 
     if (this.state.inputValue === '' && items && items.length > 0) {
       this.dispatch({
@@ -1127,13 +1156,13 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     key: "showAddItemHint",
     get: function get() {
       var items = this.state.autocompleteItems;
-      var value = this.props.valueToItem(this.state.inputValue);
+      var value = this.getProps().valueToItem(this.state.inputValue);
 
       if (items && this.hasValueInItems(items, value)) {
         return false;
       }
 
-      var selectedItems = this.props.selectedItems;
+      var selectedItems = this.getProps().selectedItems;
 
       if (selectedItems && this.hasValueInItems(selectedItems, value)) {
         return false;
@@ -1184,9 +1213,10 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       var _this$state4 = this.state,
           inputValue = _this$state4.inputValue,
           editingTokenIndex = _this$state4.editingTokenIndex;
-      var _this$props4 = this.props,
-          selectedItems = _this$props4.selectedItems,
-          valueToString = _this$props4.valueToString;
+
+      var _this$getProps8 = this.getProps(),
+          valueToString = _this$getProps8.valueToString,
+          selectedItems = _this$getProps8.selectedItems;
 
       if (this.isEditingMode) {
         return valueToString(selectedItems[editingTokenIndex]) !== inputValue;