@skbkontur/react-ui 0.0.0-444dd4e7b3 → 0.0.0-48840c3b9c

package/components/GlobalLoader/GlobalLoader/GlobalLoader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["GlobalLoader.tsx"],"names":["React","debounce","isTestEnv","CommonWrapper","rootNode","createPropsGetter","GlobalLoaderView","GlobalLoaderDataTids","root","currentGlobalLoader","GlobalLoader","props","getProps","defaultProps","startTask","setState","visible","onStart","delayBeforeShow","stopTask","successAnimationInProgress","started","onDone","delayBeforeHide","resumeTaskAfterSuccessAnimation","setActive","cancel","state","done","rejected","accept","setReject","setDone","reject","active","onReject","onAccept","kill","dead","expectedResponseTime","componentDidMount","componentDidUpdate","prevProps","render","status","disableAnimations","setRootNode","updateExpectedResponseTime","Component","start"],"mappings":"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","sourcesContent":["import React from 'react';\nimport debounce from 'lodash.debounce';\n\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { GlobalLoaderView, GlobalLoaderViewProps } from './GlobalLoaderView';\n\nexport interface GlobalLoaderProps {\n  /**\n   * Время(ms) до появления лоадера\n   */\n  delayBeforeShow?: number;\n  /**\n   * Время(ms) до исчезновения лоадера\n   */\n  delayBeforeHide?: number;\n  /**\n   * Ожидаемое время(ms) ответа сервера\n   */\n  expectedResponseTime?: number;\n  /**\n   * Анимация лоадера в виде спиннера\n   */\n  rejected?: boolean;\n  /**\n   * Показывать лоадер\n   */\n  active?: boolean;\n  /**\n   * Не показывать анимацию\n   */\n  disableAnimations?: boolean;\n  /**\n   * Коллбек, вызывающийся после появления лоадера\n   */\n  onStart?(): void;\n  /**\n   * Коллбек, вызывающийся после исчезновения лоадера\n   */\n  onDone?(): void;\n  /**\n   * Коллбек, вызывающийся после вызова `GlobalLoader.reject()`.\n   * Или после установки пропа `rejected = true`\n   */\n  onReject?(): void;\n  /**\n   * Коллбек, вызывающийся после вызова `GlobalLoader.accept()`.\n   * Или после установки пропа `rejected = false`\n   */\n  onAccept?(): void;\n}\nexport interface GlobalLoaderState {\n  visible: boolean;\n  done: boolean;\n  rejected: boolean;\n  accept: boolean;\n  dead: boolean;\n  successAnimationInProgress: boolean;\n  expectedResponseTime: number;\n  started: boolean;\n}\n\nexport const GlobalLoaderDataTids = {\n  root: 'GlobalLoader',\n} as const;\n\ntype DefaultProps = Required<\n  Pick<\n    GlobalLoaderProps,\n    'expectedResponseTime' | 'delayBeforeShow' | 'delayBeforeHide' | 'rejected' | 'active' | 'disableAnimations'\n  >\n>;\n\nlet currentGlobalLoader: GlobalLoader;\n@rootNode\nexport class GlobalLoader extends React.Component<GlobalLoaderProps, GlobalLoaderState> {\n  private setRootNode!: TSetRootNode;\n  private getProps = createPropsGetter(GlobalLoader.defaultProps);\n\n  private readonly startTask = debounce(() => {\n    this.setState({ visible: true });\n    this.props.onStart?.();\n  }, this.getProps().delayBeforeShow);\n\n  private readonly stopTask = debounce(() => {\n    this.setState({ visible: false, successAnimationInProgress: false, started: false });\n    this.props.onDone?.();\n  }, this.getProps().delayBeforeHide);\n\n  private readonly resumeTaskAfterSuccessAnimation = debounce(() => {\n    this.setActive();\n  }, this.getProps().delayBeforeHide);\n\n  public static defaultProps: DefaultProps = {\n    expectedResponseTime: 1000,\n    delayBeforeShow: 1000,\n    delayBeforeHide: 1000,\n    rejected: false,\n    active: false,\n    disableAnimations: isTestEnv,\n  };\n\n  constructor(props: GlobalLoaderProps) {\n    super(props);\n    this.state = {\n      started: false,\n      visible: false,\n      done: false,\n      rejected: false,\n      accept: false,\n      dead: false,\n      successAnimationInProgress: false,\n      expectedResponseTime: this.getProps().expectedResponseTime,\n    };\n  }\n  componentDidMount() {\n    currentGlobalLoader?.kill();\n    currentGlobalLoader = this;\n    const { active, rejected } = this.getProps();\n    if (active) {\n      this.setActive();\n    }\n    if (rejected) {\n      this.setReject(true);\n    }\n  }\n\n  componentDidUpdate(prevProps: Readonly<GlobalLoaderProps>) {\n    const { expectedResponseTime, rejected, active } = this.getProps();\n    if (expectedResponseTime !== prevProps.expectedResponseTime) {\n      this.setState({ expectedResponseTime });\n    }\n    if (rejected !== prevProps.rejected) {\n      this.setReject(rejected);\n    }\n    if (active !== prevProps.active) {\n      if (active) {\n        this.setActive();\n      } else {\n        this.setDone();\n      }\n    }\n  }\n\n  public render() {\n    let status: GlobalLoaderViewProps['status'] = 'standard';\n\n    if (this.state.done) {\n      status = 'success';\n    } else if (this.state.rejected) {\n      status = 'error';\n    } else if (this.state.accept) {\n      status = 'accept';\n    }\n    const { delayBeforeHide, disableAnimations } = this.getProps();\n    return (\n      !this.state.dead &&\n      this.state.visible && (\n        <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n          <GlobalLoaderView\n            expectedResponseTime={this.state.expectedResponseTime}\n            delayBeforeHide={delayBeforeHide}\n            status={status}\n            data-tid={GlobalLoaderDataTids.root}\n            disableAnimations={disableAnimations}\n          />\n        </CommonWrapper>\n      )\n    );\n  }\n\n  /**\n   * Запускает анимацию лоадера <br />\n   * Равносильно установке пропа `active = true`\n   *\n   * @public\n   */\n  public static start = (expectedResponseTime?: number) => {\n    currentGlobalLoader.setActive();\n    if (typeof expectedResponseTime === 'number') {\n      currentGlobalLoader.updateExpectedResponseTime(expectedResponseTime);\n    }\n  };\n\n  /**\n   * Показывает анимацию успешного завершения загрузки <br />\n   * Равносильно установке пропа `active = false`\n   *\n   * @public\n   */\n  public static done = () => {\n    currentGlobalLoader.setDone();\n  };\n\n  /**\n   * Переключает анимацию лоадера в состояние спиннера <br />\n   * Равносильно установке пропа `rejected = true`\n   *\n   * @public\n   */\n  public static reject = () => {\n    currentGlobalLoader.setReject(true);\n  };\n\n  /**\n   * Возвращает лоадер из состояния спиннера в обычное и продолжает анимацию с того места, на котором она была прерван <br />\n   * Равносильно установке пропа `rejected = false`\n   *\n   * @public\n   */\n  public static accept = () => {\n    currentGlobalLoader.setReject(false);\n  };\n\n  public setActive = () => {\n    this.startTask.cancel();\n    if (this.state.successAnimationInProgress) {\n      this.resumeTaskAfterSuccessAnimation();\n    } else {\n      this.setState({ visible: false, done: false, rejected: false, accept: false, started: true });\n      if (this.getProps().rejected) {\n        this.setReject(true);\n      } else {\n        this.stopTask.cancel();\n        this.startTask();\n      }\n    }\n  };\n\n  public setDone = () => {\n    if (!this.state.started) {\n      return;\n    }\n    this.setState({ done: true, successAnimationInProgress: true });\n    this.startTask.cancel();\n    this.resumeTaskAfterSuccessAnimation.cancel();\n    this.stopTask();\n  };\n\n  public setReject = (reject: boolean) => {\n    if (!this.state.visible && (this.state.started || this.getProps().active)) {\n      this.setState({ visible: true });\n    }\n    this.startTask.cancel();\n    this.stopTask.cancel();\n    if (reject) {\n      this.props.onReject?.();\n    } else if (this.state.rejected) {\n      this.setState({ accept: true });\n      this.props.onAccept?.();\n    }\n    this.setState({ rejected: reject });\n  };\n\n  public updateExpectedResponseTime(expectedResponseTime: number) {\n    this.setState({ expectedResponseTime });\n  }\n\n  public kill = () => {\n    this.stopTask.cancel();\n    this.startTask.cancel();\n    this.resumeTaskAfterSuccessAnimation.cancel();\n    this.setState({\n      dead: true,\n    });\n  };\n}\n"]}
+{"version":3,"sources":["GlobalLoader.tsx"],"names":["React","debounce","isTestEnv","CommonWrapper","rootNode","createPropsGetter","GlobalLoaderView","GlobalLoaderDataTids","root","currentGlobalLoader","GlobalLoader","props","getProps","defaultProps","startTask","setState","visible","onStart","delayBeforeShow","stopTask","successAnimationInProgress","started","onDone","delayBeforeHide","resumeTaskAfterSuccessAnimation","setActive","cancel","state","done","rejected","accept","setReject","setDone","reject","active","onReject","onAccept","kill","dead","expectedResponseTime","componentDidMount","componentDidUpdate","prevProps","render","status","disableAnimations","setRootNode","updateExpectedResponseTime","Component","__KONTUR_REACT_UI__","displayName","start"],"mappings":"2JAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,MAAqB,iBAArB;;AAEA,SAASC,SAAT,QAA0B,8BAA1B;AACA,SAASC,aAAT,QAA8B,8BAA9B;AACA,SAASC,QAAT,QAAuC,oBAAvC;AACA,SAASC,iBAAT,QAAkC,6BAAlC;;AAEA,SAASC,gBAAT,QAAwD,oBAAxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,OAAO,IAAMC,oBAAoB,GAAG;AAClCC,EAAAA,IAAI,EAAE,cAD4B,EAA7B;;;;;;;;;;AAWP,IAAIC,mBAAJ;;AAEA,WAAaC,YAAb,GADCN,QACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BE,wBAAYO,KAAZ,EAAsC;AACpC,wCAAMA,KAAN,UADoC,MAzB9BC,QAyB8B,GAzBnBP,iBAAiB,CAACK,YAAY,CAACG,YAAd,CAyBE,OAvBrBC,SAuBqB,GAvBTb,QAAQ,CAAC,YAAM,CAC1C,MAAKc,QAAL,CAAc,EAAEC,OAAO,EAAE,IAAX,EAAd,EACA,MAAKL,KAAL,CAAWM,OAAX,0BAAKN,KAAL,CAAWM,OAAX,GACD,CAHoC,EAGlC,MAAKL,QAAL,GAAgBM,eAHkB,CAuBC,OAlBrBC,QAkBqB,GAlBVlB,QAAQ,CAAC,YAAM,CACzC,MAAKc,QAAL,CAAc,EAAEC,OAAO,EAAE,KAAX,EAAkBI,0BAA0B,EAAE,KAA9C,EAAqDC,OAAO,EAAE,KAA9D,EAAd,EACA,MAAKV,KAAL,CAAWW,MAAX,0BAAKX,KAAL,CAAWW,MAAX,GACD,CAHmC,EAGjC,MAAKV,QAAL,GAAgBW,eAHiB,CAkBE,OAbrBC,+BAaqB,GAbavB,QAAQ,CAAC,YAAM,CAChE,MAAKwB,SAAL,GACD,CAF0D,EAExD,MAAKb,QAAL,GAAgBW,eAFwC,CAarB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgH/BE,IAAAA,SAhH+B,GAgHnB,YAAM;AACvB,YAAKX,SAAL,CAAeY,MAAf;AACA,UAAI,MAAKC,KAAL,CAAWP,0BAAf,EAA2C;AACzC,cAAKI,+BAAL;AACD,OAFD,MAEO;AACL,cAAKT,QAAL,CAAc,EAAEC,OAAO,EAAE,KAAX,EAAkBY,IAAI,EAAE,KAAxB,EAA+BC,QAAQ,EAAE,KAAzC,EAAgDC,MAAM,EAAE,KAAxD,EAA+DT,OAAO,EAAE,IAAxE,EAAd;AACA,YAAI,MAAKT,QAAL,GAAgBiB,QAApB,EAA8B;AAC5B,gBAAKE,SAAL,CAAe,IAAf;AACD,SAFD,MAEO;AACL,gBAAKZ,QAAL,CAAcO,MAAd;AACA,gBAAKZ,SAAL;AACD;AACF;AACF,KA7HqC;;AA+H/BkB,IAAAA,OA/H+B,GA+HrB,YAAM;AACrB,UAAI,CAAC,MAAKL,KAAL,CAAWN,OAAhB,EAAyB;AACvB;AACD;AACD,YAAKN,QAAL,CAAc,EAAEa,IAAI,EAAE,IAAR,EAAcR,0BAA0B,EAAE,IAA1C,EAAd;AACA,YAAKN,SAAL,CAAeY,MAAf;AACA,YAAKF,+BAAL,CAAqCE,MAArC;AACA,YAAKP,QAAL;AACD,KAvIqC;;AAyI/BY,IAAAA,SAzI+B,GAyInB,UAACE,MAAD,EAAqB;AACtC,UAAI,CAAC,MAAKN,KAAL,CAAWX,OAAZ,KAAwB,MAAKW,KAAL,CAAWN,OAAX,IAAsB,MAAKT,QAAL,GAAgBsB,MAA9D,CAAJ,EAA2E;AACzE,cAAKnB,QAAL,CAAc,EAAEC,OAAO,EAAE,IAAX,EAAd;AACD;AACD,YAAKF,SAAL,CAAeY,MAAf;AACA,YAAKP,QAAL,CAAcO,MAAd;AACA,UAAIO,MAAJ,EAAY;AACV,cAAKtB,KAAL,CAAWwB,QAAX,0BAAKxB,KAAL,CAAWwB,QAAX;AACD,OAFD,MAEO,IAAI,MAAKR,KAAL,CAAWE,QAAf,EAAyB;AAC9B,cAAKd,QAAL,CAAc,EAAEe,MAAM,EAAE,IAAV,EAAd;AACA,cAAKnB,KAAL,CAAWyB,QAAX,0BAAKzB,KAAL,CAAWyB,QAAX;AACD;AACD,YAAKrB,QAAL,CAAc,EAAEc,QAAQ,EAAEI,MAAZ,EAAd;AACD,KAtJqC;;;;;;AA4J/BI,IAAAA,IA5J+B,GA4JxB,YAAM;AAClB,YAAKlB,QAAL,CAAcO,MAAd;AACA,YAAKZ,SAAL,CAAeY,MAAf;AACA,YAAKF,+BAAL,CAAqCE,MAArC;AACA,YAAKX,QAAL,CAAc;AACZuB,QAAAA,IAAI,EAAE,IADM,EAAd;;AAGD,KAnKqC,CAEpC,MAAKX,KAAL,GAAa,EACXN,OAAO,EAAE,KADE,EAEXL,OAAO,EAAE,KAFE,EAGXY,IAAI,EAAE,KAHK,EAIXC,QAAQ,EAAE,KAJC,EAKXC,MAAM,EAAE,KALG,EAMXQ,IAAI,EAAE,KANK,EAOXlB,0BAA0B,EAAE,KAPjB,EAQXmB,oBAAoB,EAAE,MAAK3B,QAAL,GAAgB2B,oBAR3B,EAAb,CAFoC,aAYrC,CA1CH,2CA2CEC,iBA3CF,GA2CE,6BAAoB,0BAClB,wBAAA/B,mBAAmB,SAAnB,iCAAqB4B,IAArB,GACA5B,mBAAmB,GAAG,IAAtB,CACA,qBAA6B,KAAKG,QAAL,EAA7B,CAAQsB,MAAR,kBAAQA,MAAR,CAAgBL,QAAhB,kBAAgBA,QAAhB,CACA,IAAIK,MAAJ,EAAY,CACV,KAAKT,SAAL,GACD,CACD,IAAII,QAAJ,EAAc,CACZ,KAAKE,SAAL,CAAe,IAAf,EACD,CACF,CArDH,QAuDEU,kBAvDF,GAuDE,4BAAmBC,SAAnB,EAA2D,CACzD,sBAAmD,KAAK9B,QAAL,EAAnD,CAAQ2B,oBAAR,mBAAQA,oBAAR,CAA8BV,QAA9B,mBAA8BA,QAA9B,CAAwCK,MAAxC,mBAAwCA,MAAxC,CACA,IAAIK,oBAAoB,KAAKG,SAAS,CAACH,oBAAvC,EAA6D,CAC3D,KAAKxB,QAAL,CAAc,EAAEwB,oBAAoB,EAApBA,oBAAF,EAAd,EACD,CACD,IAAIV,QAAQ,KAAKa,SAAS,CAACb,QAA3B,EAAqC,CACnC,KAAKE,SAAL,CAAeF,QAAf,EACD,CACD,IAAIK,MAAM,KAAKQ,SAAS,CAACR,MAAzB,EAAiC,CAC/B,IAAIA,MAAJ,EAAY,CACV,KAAKT,SAAL,GACD,CAFD,MAEO,CACL,KAAKO,OAAL,GACD,CACF,CACF,CAtEH,QAwESW,MAxET,GAwEE,kBAAgB,CACd,IAAIC,MAAuC,GAAG,UAA9C,CAEA,IAAI,KAAKjB,KAAL,CAAWC,IAAf,EAAqB,CACnBgB,MAAM,GAAG,SAAT,CACD,CAFD,MAEO,IAAI,KAAKjB,KAAL,CAAWE,QAAf,EAAyB,CAC9Be,MAAM,GAAG,OAAT,CACD,CAFM,MAEA,IAAI,KAAKjB,KAAL,CAAWG,MAAf,EAAuB,CAC5Bc,MAAM,GAAG,QAAT,CACD,CACD,sBAA+C,KAAKhC,QAAL,EAA/C,CAAQW,eAAR,mBAAQA,eAAR,CAAyBsB,iBAAzB,mBAAyBA,iBAAzB,CACA,OACE,CAAC,KAAKlB,KAAL,CAAWW,IAAZ,IACA,KAAKX,KAAL,CAAWX,OADX,iBAEE,oBAAC,aAAD,aAAe,WAAW,EAAE,KAAK8B,WAAjC,IAAkD,KAAKnC,KAAvD,gBACE,oBAAC,gBAAD,IACE,oBAAoB,EAAE,KAAKgB,KAAL,CAAWY,oBADnC,EAEE,eAAe,EAAEhB,eAFnB,EAGE,MAAM,EAAEqB,MAHV,EAIE,YAAUrC,oBAAoB,CAACC,IAJjC,EAKE,iBAAiB,EAAEqC,iBALrB,GADF,CAHJ,CAcD,CAjGH,CAmGE;AACF;AACA;AACA;AACA;AACA,KAxGA,QAsLSE,0BAtLT,GAsLE,oCAAkCR,oBAAlC,EAAgE,CAC9D,KAAKxB,QAAL,CAAc,EAAEwB,oBAAoB,EAApBA,oBAAF,EAAd,EACD,CAxLH,uBAAkCvC,KAAK,CAACgD,SAAxC,WACgBC,mBADhB,GACsC,cADtC,UAEgBC,WAFhB,GAE8B,cAF9B,UAqBgBrC,YArBhB,GAqB6C,EACzC0B,oBAAoB,EAAE,IADmB,EAEzCrB,eAAe,EAAE,IAFwB,EAGzCK,eAAe,EAAE,IAHwB,EAIzCM,QAAQ,EAAE,KAJ+B,EAKzCK,MAAM,EAAE,KALiC,EAMzCW,iBAAiB,EAAE3C,SANsB,EArB7C,UAyGgBiD,KAzGhB,GAyGwB,UAACZ,oBAAD,EAAmC,CACvD9B,mBAAmB,CAACgB,SAApB,GACA,IAAI,OAAOc,oBAAP,KAAgC,QAApC,EAA8C,CAC5C9B,mBAAmB,CAACsC,0BAApB,CAA+CR,oBAA/C,EACD,CACF,CA9GH,UAsHgBX,IAtHhB,GAsHuB,YAAM,CACzBnB,mBAAmB,CAACuB,OAApB,GACD,CAxHH,UAgIgBC,MAhIhB,GAgIyB,YAAM,CAC3BxB,mBAAmB,CAACsB,SAApB,CAA8B,IAA9B,EACD,CAlIH,UA0IgBD,MA1IhB,GA0IyB,YAAM,CAC3BrB,mBAAmB,CAACsB,SAApB,CAA8B,KAA9B,EACD,CA5IH","sourcesContent":["import React from 'react';\nimport debounce from 'lodash.debounce';\n\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { GlobalLoaderView, GlobalLoaderViewProps } from './GlobalLoaderView';\n\nexport interface GlobalLoaderProps {\n  /**\n   * Время(ms) до появления лоадера\n   */\n  delayBeforeShow?: number;\n  /**\n   * Время(ms) до исчезновения лоадера\n   */\n  delayBeforeHide?: number;\n  /**\n   * Ожидаемое время(ms) ответа сервера\n   */\n  expectedResponseTime?: number;\n  /**\n   * Анимация лоадера в виде спиннера\n   */\n  rejected?: boolean;\n  /**\n   * Показывать лоадер\n   */\n  active?: boolean;\n  /**\n   * Не показывать анимацию\n   */\n  disableAnimations?: boolean;\n  /**\n   * Коллбек, вызывающийся после появления лоадера\n   */\n  onStart?(): void;\n  /**\n   * Коллбек, вызывающийся после исчезновения лоадера\n   */\n  onDone?(): void;\n  /**\n   * Коллбек, вызывающийся после вызова `GlobalLoader.reject()`.\n   * Или после установки пропа `rejected = true`\n   */\n  onReject?(): void;\n  /**\n   * Коллбек, вызывающийся после вызова `GlobalLoader.accept()`.\n   * Или после установки пропа `rejected = false`\n   */\n  onAccept?(): void;\n}\nexport interface GlobalLoaderState {\n  visible: boolean;\n  done: boolean;\n  rejected: boolean;\n  accept: boolean;\n  dead: boolean;\n  successAnimationInProgress: boolean;\n  expectedResponseTime: number;\n  started: boolean;\n}\n\nexport const GlobalLoaderDataTids = {\n  root: 'GlobalLoader',\n} as const;\n\ntype DefaultProps = Required<\n  Pick<\n    GlobalLoaderProps,\n    'expectedResponseTime' | 'delayBeforeShow' | 'delayBeforeHide' | 'rejected' | 'active' | 'disableAnimations'\n  >\n>;\n\nlet currentGlobalLoader: GlobalLoader;\n@rootNode\nexport class GlobalLoader extends React.Component<GlobalLoaderProps, GlobalLoaderState> {\n  public static __KONTUR_REACT_UI__ = 'GlobalLoader';\n  public static displayName = 'GlobalLoader';\n\n  private setRootNode!: TSetRootNode;\n  private getProps = createPropsGetter(GlobalLoader.defaultProps);\n\n  private readonly startTask = debounce(() => {\n    this.setState({ visible: true });\n    this.props.onStart?.();\n  }, this.getProps().delayBeforeShow);\n\n  private readonly stopTask = debounce(() => {\n    this.setState({ visible: false, successAnimationInProgress: false, started: false });\n    this.props.onDone?.();\n  }, this.getProps().delayBeforeHide);\n\n  private readonly resumeTaskAfterSuccessAnimation = debounce(() => {\n    this.setActive();\n  }, this.getProps().delayBeforeHide);\n\n  public static defaultProps: DefaultProps = {\n    expectedResponseTime: 1000,\n    delayBeforeShow: 1000,\n    delayBeforeHide: 1000,\n    rejected: false,\n    active: false,\n    disableAnimations: isTestEnv,\n  };\n\n  constructor(props: GlobalLoaderProps) {\n    super(props);\n    this.state = {\n      started: false,\n      visible: false,\n      done: false,\n      rejected: false,\n      accept: false,\n      dead: false,\n      successAnimationInProgress: false,\n      expectedResponseTime: this.getProps().expectedResponseTime,\n    };\n  }\n  componentDidMount() {\n    currentGlobalLoader?.kill();\n    currentGlobalLoader = this;\n    const { active, rejected } = this.getProps();\n    if (active) {\n      this.setActive();\n    }\n    if (rejected) {\n      this.setReject(true);\n    }\n  }\n\n  componentDidUpdate(prevProps: Readonly<GlobalLoaderProps>) {\n    const { expectedResponseTime, rejected, active } = this.getProps();\n    if (expectedResponseTime !== prevProps.expectedResponseTime) {\n      this.setState({ expectedResponseTime });\n    }\n    if (rejected !== prevProps.rejected) {\n      this.setReject(rejected);\n    }\n    if (active !== prevProps.active) {\n      if (active) {\n        this.setActive();\n      } else {\n        this.setDone();\n      }\n    }\n  }\n\n  public render() {\n    let status: GlobalLoaderViewProps['status'] = 'standard';\n\n    if (this.state.done) {\n      status = 'success';\n    } else if (this.state.rejected) {\n      status = 'error';\n    } else if (this.state.accept) {\n      status = 'accept';\n    }\n    const { delayBeforeHide, disableAnimations } = this.getProps();\n    return (\n      !this.state.dead &&\n      this.state.visible && (\n        <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n          <GlobalLoaderView\n            expectedResponseTime={this.state.expectedResponseTime}\n            delayBeforeHide={delayBeforeHide}\n            status={status}\n            data-tid={GlobalLoaderDataTids.root}\n            disableAnimations={disableAnimations}\n          />\n        </CommonWrapper>\n      )\n    );\n  }\n\n  /**\n   * Запускает анимацию лоадера <br />\n   * Равносильно установке пропа `active = true`\n   *\n   * @public\n   */\n  public static start = (expectedResponseTime?: number) => {\n    currentGlobalLoader.setActive();\n    if (typeof expectedResponseTime === 'number') {\n      currentGlobalLoader.updateExpectedResponseTime(expectedResponseTime);\n    }\n  };\n\n  /**\n   * Показывает анимацию успешного завершения загрузки <br />\n   * Равносильно установке пропа `active = false`\n   *\n   * @public\n   */\n  public static done = () => {\n    currentGlobalLoader.setDone();\n  };\n\n  /**\n   * Переключает анимацию лоадера в состояние спиннера <br />\n   * Равносильно установке пропа `rejected = true`\n   *\n   * @public\n   */\n  public static reject = () => {\n    currentGlobalLoader.setReject(true);\n  };\n\n  /**\n   * Возвращает лоадер из состояния спиннера в обычное и продолжает анимацию с того места, на котором она была прерван <br />\n   * Равносильно установке пропа `rejected = false`\n   *\n   * @public\n   */\n  public static accept = () => {\n    currentGlobalLoader.setReject(false);\n  };\n\n  public setActive = () => {\n    this.startTask.cancel();\n    if (this.state.successAnimationInProgress) {\n      this.resumeTaskAfterSuccessAnimation();\n    } else {\n      this.setState({ visible: false, done: false, rejected: false, accept: false, started: true });\n      if (this.getProps().rejected) {\n        this.setReject(true);\n      } else {\n        this.stopTask.cancel();\n        this.startTask();\n      }\n    }\n  };\n\n  public setDone = () => {\n    if (!this.state.started) {\n      return;\n    }\n    this.setState({ done: true, successAnimationInProgress: true });\n    this.startTask.cancel();\n    this.resumeTaskAfterSuccessAnimation.cancel();\n    this.stopTask();\n  };\n\n  public setReject = (reject: boolean) => {\n    if (!this.state.visible && (this.state.started || this.getProps().active)) {\n      this.setState({ visible: true });\n    }\n    this.startTask.cancel();\n    this.stopTask.cancel();\n    if (reject) {\n      this.props.onReject?.();\n    } else if (this.state.rejected) {\n      this.setState({ accept: true });\n      this.props.onAccept?.();\n    }\n    this.setState({ rejected: reject });\n  };\n\n  public updateExpectedResponseTime(expectedResponseTime: number) {\n    this.setState({ expectedResponseTime });\n  }\n\n  public kill = () => {\n    this.stopTask.cancel();\n    this.startTask.cancel();\n    this.resumeTaskAfterSuccessAnimation.cancel();\n    this.setState({\n      dead: true,\n    });\n  };\n}\n"]}

package/components/GlobalLoader/GlobalLoader.d.ts

@@ -58,6 +58,8 @@ export declare const GlobalLoaderDataTids: {
 };
 declare type DefaultProps = Required<Pick<GlobalLoaderProps, 'expectedResponseTime' | 'delayBeforeShow' | 'delayBeforeHide' | 'rejected' | 'active' | 'disableAnimations'>>;
 export declare class GlobalLoader extends React.Component<GlobalLoaderProps, GlobalLoaderState> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     private setRootNode;
     private getProps;
     private readonly startTask;

package/components/GlobalLoader/GlobalLoaderView/GlobalLoaderView.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["expectedResponseTime", "delayBeforeHide", "status", "disableAnimations"];
-import React, { useContext, useRef } from 'react';
-import { cx } from "../../../lib/theming/Emotion";
+import React, { useRef } from 'react';
+import { useEmotion } from "../../../lib/theming/Emotion";
 import { ZIndex } from "../../../internal/ZIndex";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { animations, styles } from "../GlobalLoaderView.styles";
+import { useTheme } from "../../../lib/theming/useTheme";
+import { getAnimations, getStyles } from "../GlobalLoaderView.styles";
 import { useGlobalLoaderPosition, useGlobalLoaderWidth } from "../useParams";
 export var GlobalLoaderView = function GlobalLoaderView(_ref) {
   var expectedResponseTime = _ref.expectedResponseTime,
@@ -16,7 +16,8 @@ export var GlobalLoaderView = function GlobalLoaderView(_ref) {
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var ref = useRef(null);
-  var theme = useContext(ThemeContext);
+  var theme = useTheme();
+  var emotion = useEmotion();
 
   var _useGlobalLoaderWidth = useGlobalLoaderWidth(status, ref),
       width = _useGlobalLoaderWidth.width,
@@ -26,6 +27,9 @@ export var GlobalLoaderView = function GlobalLoaderView(_ref) {
   var _useGlobalLoaderPosit = useGlobalLoaderPosition(ref),
       left = _useGlobalLoaderPosit.left;
 
+  var animations = getAnimations(emotion);
+  var styles = getStyles(emotion);
+
   var getAnimationClass = function getAnimationClass(status) {
     if (!disableAnimations) {
       switch (status) {
@@ -71,6 +75,6 @@ export var GlobalLoaderView = function GlobalLoaderView(_ref) {
     className: styles.outer(theme)
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    className: cx(styles.inner(theme), getAnimationClass(status))
+    className: emotion.cx(styles.inner(theme), getAnimationClass(status))
   })));
 };

package/components/GlobalLoader/GlobalLoaderView/GlobalLoaderView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["GlobalLoaderView.tsx"],"names":["React","useContext","useRef","cx","ZIndex","ThemeContext","CommonWrapper","animations","styles","useGlobalLoaderPosition","useGlobalLoaderWidth","GlobalLoaderView","expectedResponseTime","delayBeforeHide","status","disableAnimations","rest","ref","theme","width","startWidth","fullWidth","left","getAnimationClass","successAnimation","acceptAnimation","slowAcceptAnimation","errorAnimation","standardAnimation","successWithoutAnimation","acceptWithoutAnimation","errorWithoutAnimation","standardWithoutAnimation","outer","inner"],"mappings":"yPAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,MAA5B,QAA0C,OAA1C;;AAEA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,aAAT,QAA2C,8BAA3C;;AAEA,SAASC,UAAT,EAAqBC,MAArB,QAAmC,2BAAnC;AACA,SAASC,uBAAT,EAAkCC,oBAAlC,QAA8D,aAA9D;;;;;;;;;;;;;;AAcA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB;;;;;;AAMH,KAL3BC,oBAK2B,QAL3BA,oBAK2B,CAJ3BC,eAI2B,QAJ3BA,eAI2B,CAH3BC,MAG2B,QAH3BA,MAG2B,CAF3BC,iBAE2B,QAF3BA,iBAE2B,CADxBC,IACwB;AAC3B,MAAMC,GAAG,GAAGf,MAAM,CAAiC,IAAjC,CAAlB;AACA,MAAMgB,KAAK,GAAGjB,UAAU,CAACI,YAAD,CAAxB;AACA,8BAAyCK,oBAAoB,CAACI,MAAD,EAASG,GAAT,CAA7D,CAAQE,KAAR,yBAAQA,KAAR,CAAeC,UAAf,yBAAeA,UAAf,CAA2BC,SAA3B,yBAA2BA,SAA3B;AACA,8BAAiBZ,uBAAuB,CAACQ,GAAD,CAAxC,CAAQK,IAAR,yBAAQA,IAAR;;AAEA,MAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACT,MAAD,EAA6C;AACrE,QAAI,CAACC,iBAAL,EAAwB;AACtB,cAAQD,MAAR;AACE,aAAK,SAAL;AACE,iBAAOP,UAAU,CAACiB,gBAAX,CAA4BX,eAA5B,EAA6CM,KAA7C,EAAoDG,IAApD,CAAP;AACF,aAAK,QAAL;AACE,cAAIF,UAAU,GAAGC,SAAS,GAAG,GAA7B,EAAkC;AAChC,mBAAOd,UAAU,CAACkB,eAAX,CAA2BP,KAA3B,EAAkCE,UAAlC,EAA8CR,oBAA9C,EAAoEO,KAApE,EAA2EG,IAA3E,CAAP;AACD;AACD,iBAAOf,UAAU,CAACmB,mBAAX,CAA+BR,KAA/B,EAAsCE,UAAtC,EAAkDD,KAAlD,EAAyDG,IAAzD,CAAP;AACF,aAAK,OAAL;AACE,iBAAOf,UAAU,CAACoB,cAAX,CAA0BT,KAA1B,CAAP;AACF,aAAK,UAAL;AACE,iBAAOX,UAAU,CAACqB,iBAAX,CAA6BV,KAA7B,EAAoCN,oBAApC,CAAP,CAXJ;;AAaD;;AAED,QAAIG,iBAAJ,EAAuB;AACrB,cAAQD,MAAR;AACE,aAAK,SAAL;AACE,iBAAON,MAAM,CAACqB,uBAAP,EAAP;AACF,aAAK,QAAL;AACE,iBAAOtB,UAAU,CAACuB,sBAAX,CAAkCV,UAAlC,CAAP;AACF,aAAK,OAAL;AACE,iBAAOZ,MAAM,CAACuB,qBAAP,EAAP;AACF,aAAK,UAAL;AACE,iBAAOvB,MAAM,CAACwB,wBAAP,EAAP,CARJ;;AAUD;AACF,GA7BD;;AA+BA;AACE,wBAAC,aAAD,eAAmBhB,IAAnB,IAAyB,eAAaF,MAAtC;AACE,wBAAC,MAAD,IAAQ,QAAQ,EAAC,cAAjB,EAAgC,SAAS,EAAEN,MAAM,CAACyB,KAAP,CAAaf,KAAb,CAA3C;AACE,iCAAK,GAAG,EAAED,GAAV,EAAe,SAAS,EAAEd,EAAE,CAACK,MAAM,CAAC0B,KAAP,CAAahB,KAAb,CAAD,EAAsBK,iBAAiB,CAACT,MAAD,CAAvC,CAA5B,GADF,CADF,CADF;;;;AAOD,CAlDM","sourcesContent":["import React, { useContext, useRef } from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\n\nimport { animations, styles } from './GlobalLoaderView.styles';\nimport { useGlobalLoaderPosition, useGlobalLoaderWidth } from './useParams';\n\nexport interface GlobalLoaderViewProps extends Pick<CommonProps, 'data-tid'> {\n  expectedResponseTime: number;\n  delayBeforeHide: number;\n  status?: 'success' | 'error' | 'standard' | 'accept';\n  disableAnimations: boolean;\n}\n\nexport interface GlobalLoaderViewRef {\n  element: HTMLDivElement;\n  refObject: React.RefObject<GlobalLoaderViewRef['element']>;\n}\n\nexport const GlobalLoaderView = ({\n  expectedResponseTime,\n  delayBeforeHide,\n  status,\n  disableAnimations,\n  ...rest\n}: GlobalLoaderViewProps) => {\n  const ref = useRef<GlobalLoaderViewRef['element']>(null);\n  const theme = useContext(ThemeContext);\n  const { width, startWidth, fullWidth } = useGlobalLoaderWidth(status, ref);\n  const { left } = useGlobalLoaderPosition(ref);\n\n  const getAnimationClass = (status: GlobalLoaderViewProps['status']) => {\n    if (!disableAnimations) {\n      switch (status) {\n        case 'success':\n          return animations.successAnimation(delayBeforeHide, width, left);\n        case 'accept':\n          if (startWidth < fullWidth * 0.8) {\n            return animations.acceptAnimation(theme, startWidth, expectedResponseTime, width, left);\n          }\n          return animations.slowAcceptAnimation(theme, startWidth, width, left);\n        case 'error':\n          return animations.errorAnimation(theme);\n        case 'standard':\n          return animations.standardAnimation(theme, expectedResponseTime);\n      }\n    }\n\n    if (disableAnimations) {\n      switch (status) {\n        case 'success':\n          return styles.successWithoutAnimation();\n        case 'accept':\n          return animations.acceptWithoutAnimation(startWidth);\n        case 'error':\n          return styles.errorWithoutAnimation();\n        case 'standard':\n          return styles.standardWithoutAnimation();\n      }\n    }\n  };\n\n  return (\n    <CommonWrapper {...rest} data-status={status}>\n      <ZIndex priority=\"GlobalLoader\" className={styles.outer(theme)}>\n        <div ref={ref} className={cx(styles.inner(theme), getAnimationClass(status))} />\n      </ZIndex>\n    </CommonWrapper>\n  );\n};\n"]}
+{"version":3,"sources":["GlobalLoaderView.tsx"],"names":["React","useRef","useEmotion","ZIndex","CommonWrapper","useTheme","getAnimations","getStyles","useGlobalLoaderPosition","useGlobalLoaderWidth","GlobalLoaderView","expectedResponseTime","delayBeforeHide","status","disableAnimations","rest","ref","theme","emotion","width","startWidth","fullWidth","left","animations","styles","getAnimationClass","successAnimation","acceptAnimation","slowAcceptAnimation","errorAnimation","standardAnimation","successWithoutAnimation","acceptWithoutAnimation","errorWithoutAnimation","standardWithoutAnimation","outer","cx","inner"],"mappings":"yPAAA,OAAOA,KAAP,IAAgBC,MAAhB,QAA8B,OAA9B;;AAEA,SAASC,UAAT,QAA2B,2BAA3B;AACA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,QAAT,QAAyB,4BAAzB;;AAEA,SAASC,aAAT,EAAwBC,SAAxB,QAAyC,2BAAzC;AACA,SAASC,uBAAT,EAAkCC,oBAAlC,QAA8D,aAA9D;;;;;;;;;;;;;;AAcA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB;;;;;;AAMH,KAL3BC,oBAK2B,QAL3BA,oBAK2B,CAJ3BC,eAI2B,QAJ3BA,eAI2B,CAH3BC,MAG2B,QAH3BA,MAG2B,CAF3BC,iBAE2B,QAF3BA,iBAE2B,CADxBC,IACwB;AAC3B,MAAMC,GAAG,GAAGf,MAAM,CAAiC,IAAjC,CAAlB;AACA,MAAMgB,KAAK,GAAGZ,QAAQ,EAAtB;AACA,MAAMa,OAAO,GAAGhB,UAAU,EAA1B;;AAEA,8BAAyCO,oBAAoB,CAACI,MAAD,EAASG,GAAT,CAA7D,CAAQG,KAAR,yBAAQA,KAAR,CAAeC,UAAf,yBAAeA,UAAf,CAA2BC,SAA3B,yBAA2BA,SAA3B;AACA,8BAAiBb,uBAAuB,CAACQ,GAAD,CAAxC,CAAQM,IAAR,yBAAQA,IAAR;AACA,MAAMC,UAAU,GAAGjB,aAAa,CAACY,OAAD,CAAhC;AACA,MAAMM,MAAM,GAAGjB,SAAS,CAACW,OAAD,CAAxB;;AAEA,MAAMO,iBAAiB,GAAG,SAApBA,iBAAoB,CAACZ,MAAD,EAA6C;AACrE,QAAI,CAACC,iBAAL,EAAwB;AACtB,cAAQD,MAAR;AACE,aAAK,SAAL;AACE,iBAAOU,UAAU,CAACG,gBAAX,CAA4Bd,eAA5B,EAA6CO,KAA7C,EAAoDG,IAApD,CAAP;AACF,aAAK,QAAL;AACE,cAAIF,UAAU,GAAGC,SAAS,GAAG,GAA7B,EAAkC;AAChC,mBAAOE,UAAU,CAACI,eAAX,CAA2BV,KAA3B,EAAkCG,UAAlC,EAA8CT,oBAA9C,EAAoEQ,KAApE,EAA2EG,IAA3E,CAAP;AACD;AACD,iBAAOC,UAAU,CAACK,mBAAX,CAA+BX,KAA/B,EAAsCG,UAAtC,EAAkDD,KAAlD,EAAyDG,IAAzD,CAAP;AACF,aAAK,OAAL;AACE,iBAAOC,UAAU,CAACM,cAAX,CAA0BZ,KAA1B,CAAP;AACF,aAAK,UAAL;AACE,iBAAOM,UAAU,CAACO,iBAAX,CAA6Bb,KAA7B,EAAoCN,oBAApC,CAAP,CAXJ;;AAaD;;AAED,QAAIG,iBAAJ,EAAuB;AACrB,cAAQD,MAAR;AACE,aAAK,SAAL;AACE,iBAAOW,MAAM,CAACO,uBAAP,EAAP;AACF,aAAK,QAAL;AACE,iBAAOR,UAAU,CAACS,sBAAX,CAAkCZ,UAAlC,CAAP;AACF,aAAK,OAAL;AACE,iBAAOI,MAAM,CAACS,qBAAP,EAAP;AACF,aAAK,UAAL;AACE,iBAAOT,MAAM,CAACU,wBAAP,EAAP,CARJ;;AAUD;AACF,GA7BD;;AA+BA;AACE,wBAAC,aAAD,eAAmBnB,IAAnB,IAAyB,eAAaF,MAAtC;AACE,wBAAC,MAAD,IAAQ,QAAQ,EAAC,cAAjB,EAAgC,SAAS,EAAEW,MAAM,CAACW,KAAP,CAAalB,KAAb,CAA3C;AACE,iCAAK,GAAG,EAAED,GAAV,EAAe,SAAS,EAAEE,OAAO,CAACkB,EAAR,CAAWZ,MAAM,CAACa,KAAP,CAAapB,KAAb,CAAX,EAAgCQ,iBAAiB,CAACZ,MAAD,CAAjD,CAA1B,GADF,CADF,CADF;;;;AAOD,CAtDM","sourcesContent":["import React, { useRef } from 'react';\n\nimport { useEmotion } from '../../lib/theming/Emotion';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { useTheme } from '../../lib/theming/useTheme';\n\nimport { getAnimations, getStyles } from './GlobalLoaderView.styles';\nimport { useGlobalLoaderPosition, useGlobalLoaderWidth } from './useParams';\n\nexport interface GlobalLoaderViewProps extends Pick<CommonProps, 'data-tid'> {\n  expectedResponseTime: number;\n  delayBeforeHide: number;\n  status?: 'success' | 'error' | 'standard' | 'accept';\n  disableAnimations: boolean;\n}\n\nexport interface GlobalLoaderViewRef {\n  element: HTMLDivElement;\n  refObject: React.RefObject<GlobalLoaderViewRef['element']>;\n}\n\nexport const GlobalLoaderView = ({\n  expectedResponseTime,\n  delayBeforeHide,\n  status,\n  disableAnimations,\n  ...rest\n}: GlobalLoaderViewProps) => {\n  const ref = useRef<GlobalLoaderViewRef['element']>(null);\n  const theme = useTheme();\n  const emotion = useEmotion();\n\n  const { width, startWidth, fullWidth } = useGlobalLoaderWidth(status, ref);\n  const { left } = useGlobalLoaderPosition(ref);\n  const animations = getAnimations(emotion);\n  const styles = getStyles(emotion);\n\n  const getAnimationClass = (status: GlobalLoaderViewProps['status']) => {\n    if (!disableAnimations) {\n      switch (status) {\n        case 'success':\n          return animations.successAnimation(delayBeforeHide, width, left);\n        case 'accept':\n          if (startWidth < fullWidth * 0.8) {\n            return animations.acceptAnimation(theme, startWidth, expectedResponseTime, width, left);\n          }\n          return animations.slowAcceptAnimation(theme, startWidth, width, left);\n        case 'error':\n          return animations.errorAnimation(theme);\n        case 'standard':\n          return animations.standardAnimation(theme, expectedResponseTime);\n      }\n    }\n\n    if (disableAnimations) {\n      switch (status) {\n        case 'success':\n          return styles.successWithoutAnimation();\n        case 'accept':\n          return animations.acceptWithoutAnimation(startWidth);\n        case 'error':\n          return styles.errorWithoutAnimation();\n        case 'standard':\n          return styles.standardWithoutAnimation();\n      }\n    }\n  };\n\n  return (\n    <CommonWrapper {...rest} data-status={status}>\n      <ZIndex priority=\"GlobalLoader\" className={styles.outer(theme)}>\n        <div ref={ref} className={emotion.cx(styles.inner(theme), getAnimationClass(status))} />\n      </ZIndex>\n    </CommonWrapper>\n  );\n};\n"]}

package/components/GlobalLoader/GlobalLoaderView.styles/GlobalLoaderView.styles.js

@@ -2,52 +2,56 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
 
-import { css, memoizeStyle, keyframes } from "../../../lib/theming/Emotion";
-export var styles = memoizeStyle({
-  outer: function outer(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      height: ", ";\n      background-color: ", ";\n      position: ", ";\n      left: ", ";\n      top: ", ";\n      right: ", ";\n      bottom: ", ";\n      overflow: hidden;\n    "])), t.globalLoaderWidth, t.globalLoaderHeight, t.globalLoaderBackgroundColor, t.globalLoaderPosition, t.globalLoaderLeft, t.globalLoaderTop, t.globalLoaderRight, t.globalLoaderBottom);
-  },
-  inner: function inner(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      width: 0;\n      height: ", ";\n      position: absolute;\n      left: 0;\n      overflow: hidden;\n    "])), t.globalLoaderColor, t.globalLoaderHeight);
-  },
-  standardWithoutAnimation: function standardWithoutAnimation() {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      left: 0;\n      width: 90%;\n    "])));
-  },
-  successWithoutAnimation: function successWithoutAnimation() {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      left: 0;\n      width: 100%;\n    "])));
-  },
-  errorWithoutAnimation: function errorWithoutAnimation() {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      left: 40%;\n      width: 20%;\n    "])));
-  }
-});
-var moveToRightAnimation = keyframes(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  0% {\n    left: 0;\n    width: 100%;\n  }\n  50% {\n    left: 50%;\n    width: 50%;\n  }\n  100% {\n    left: 99%;\n    width: 1%\n  }\n"])));
-var spinnerAnimation = keyframes(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  0% {\n    transform: translateX(50%) scaleX(.005);\n    animation-timing-function: cubic-bezier(.895,.03,.685,.22);\n  }\n  50% {\n    transform: translateX(0) scaleX(.35);\n    animation-timing-function: cubic-bezier(.165,.84,.44,1);\n  }\n  100% {\n    transform: translateX(-50%) scaleX(.005);\n  }\n"])));
-var linearProgressAnimation = keyframes(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  from { width: 0; }\n  to { width: 80% }\n"])));
-var slowProgressAnimation = keyframes(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  from { width: 80%; }\n  to { width: 90% }\n"])));
-export var animations = {
-  successAnimation: function successAnimation(delayBeforeHide, width, left) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      animation: successAnimation;\n      animation-duration: ", "ms;\n      @keyframes successAnimation {\n        0% {\n          width: ", "px;\n          left: ", "px;\n          opacity: 1;\n        }\n        20% {\n          width: 100%;\n          left: 0;\n          opacity: 1;\n        }\n        80% {\n          width: 100%;\n          left: 0;\n          opacity: 1;\n        }\n        100% {\n          width: 100%;\n          opacity: 0;\n        }\n      }\n    "])), delayBeforeHide, width, left);
-  },
-  errorAnimation: function errorAnimation(t) {
-    var transitionDuration = parseInt(t.globalLoaderTransitionToSpinnerDuration);
-    var spinnerAnimationDuration = parseInt(t.globalLoaderSpinnerAnimationDuration);
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      left: 0;\n      width: 100%;\n      animation: ", " ", "ms linear,\n        ", "ms ", " ", "ms infinite alternate;\n    "])), moveToRightAnimation, transitionDuration, spinnerAnimationDuration, spinnerAnimation, transitionDuration);
-  },
-  standardAnimation: function standardAnimation(t, expectedTime) {
-    var slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      width: 90%;\n      animation: ", " ", "ms cubic-bezier(0, 0.4, 0.4, 1),\n        ", "ms ", " ", "ms linear;\n    "])), linearProgressAnimation, expectedTime, slowProgressAnimationTime, slowProgressAnimation, expectedTime);
-  },
-  acceptAnimation: function acceptAnimation(t, startWidth, expectedTime, width, left) {
-    var transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);
-    var slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);
-    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      width: 90%;\n      animation: transitionAnimation ", "ms linear,\n        ", "ms acceptAnimation ", "ms cubic-bezier(0, 0.4, 0.4, 1),\n        ", "ms ", " ", "ms linear;\n      @keyframes transitionAnimation {\n        from {\n          width: ", "px;\n          left: ", "px;\n        }\n        to {\n          width: ", "px;\n          left: 0;\n        }\n      }\n      @keyframes acceptAnimation {\n        from {\n          width: ", "px;\n        }\n        to {\n          width: 80%;\n        }\n      }\n    "])), transitionTime, expectedTime, transitionTime, slowProgressAnimationTime, slowProgressAnimation, expectedTime + transitionTime, width, left, startWidth, startWidth);
-  },
-  slowAcceptAnimation: function slowAcceptAnimation(t, startWidth, width, left) {
-    var transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);
-    var slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);
-    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      width: 90%;\n      animation: transitionAnimation ", "ms linear,\n        ", "ms acceptAnimation ", "ms linear;\n      @keyframes transitionAnimation {\n        from {\n          width: ", "px;\n          left: ", "px;\n        }\n        to {\n          width: ", "px;\n          left: 0;\n        }\n      }\n      @keyframes acceptAnimation {\n        from {\n          width: ", "px;\n        }\n        to {\n          width: 90%;\n        }\n      }\n    "])), transitionTime, slowProgressAnimationTime, transitionTime, width, left, startWidth, startWidth);
-  },
-  acceptWithoutAnimation: function acceptWithoutAnimation(startWidth) {
-    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      width: ", "px;\n    "])), startWidth);
-  }
+import { memoizeStyle } from "../../../lib/theming/Emotion";
+export var getStyles = function getStyles(emotion) {
+  return memoizeStyle({
+    outer: function outer(t) {
+      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        width: ", ";\n        height: ", ";\n        background-color: ", ";\n        position: ", ";\n        left: ", ";\n        top: ", ";\n        right: ", ";\n        bottom: ", ";\n        overflow: hidden;\n      "])), t.globalLoaderWidth, t.globalLoaderHeight, t.globalLoaderBackgroundColor, t.globalLoaderPosition, t.globalLoaderLeft, t.globalLoaderTop, t.globalLoaderRight, t.globalLoaderBottom);
+    },
+    inner: function inner(t) {
+      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        width: 0;\n        height: ", ";\n        position: absolute;\n        left: 0;\n        overflow: hidden;\n      "])), t.globalLoaderColor, t.globalLoaderHeight);
+    },
+    standardWithoutAnimation: function standardWithoutAnimation() {
+      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        left: 0;\n        width: 90%;\n      "])));
+    },
+    successWithoutAnimation: function successWithoutAnimation() {
+      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        left: 0;\n        width: 100%;\n      "])));
+    },
+    errorWithoutAnimation: function errorWithoutAnimation() {
+      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        left: 40%;\n        width: 20%;\n      "])));
+    }
+  });
+};
+export var getAnimations = function getAnimations(emotion) {
+  var moveToRightAnimation = emotion.keyframes(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  0% {\n    left: 0;\n    width: 100%;\n  }\n  50% {\n    left: 50%;\n    width: 50%;\n  }\n  100% {\n    left: 99%;\n    width: 1%\n  }\n"])));
+  var spinnerAnimation = emotion.keyframes(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  0% {\n    transform: translateX(50%) scaleX(.005);\n    animation-timing-function: cubic-bezier(.895,.03,.685,.22);\n  }\n  50% {\n    transform: translateX(0) scaleX(.35);\n    animation-timing-function: cubic-bezier(.165,.84,.44,1);\n  }\n  100% {\n    transform: translateX(-50%) scaleX(.005);\n  }\n"])));
+  var linearProgressAnimation = emotion.keyframes(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  from { width: 0; }\n  to { width: 80% }\n"])));
+  var slowProgressAnimation = emotion.keyframes(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  from { width: 80%; }\n  to { width: 90% }\n"])));
+  return {
+    successAnimation: function successAnimation(delayBeforeHide, width, left) {
+      return emotion.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n        animation: successAnimation;\n        animation-duration: ", "ms;\n        @keyframes successAnimation {\n          0% {\n            width: ", "px;\n            left: ", "px;\n            opacity: 1;\n          }\n          20% {\n            width: 100%;\n            left: 0;\n            opacity: 1;\n          }\n          80% {\n            width: 100%;\n            left: 0;\n            opacity: 1;\n          }\n          100% {\n            width: 100%;\n            opacity: 0;\n          }\n        }\n      "])), delayBeforeHide, width, left);
+    },
+    errorAnimation: function errorAnimation(t) {
+      var transitionDuration = parseInt(t.globalLoaderTransitionToSpinnerDuration);
+      var spinnerAnimationDuration = parseInt(t.globalLoaderSpinnerAnimationDuration);
+      return emotion.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n        left: 0;\n        width: 100%;\n        animation: ", " ", "ms linear,\n          ", "ms ", " ", "ms infinite alternate;\n      "])), moveToRightAnimation, transitionDuration, spinnerAnimationDuration, spinnerAnimation, transitionDuration);
+    },
+    standardAnimation: function standardAnimation(t, expectedTime) {
+      var slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);
+      return emotion.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n        width: 90%;\n        animation: ", " ", "ms cubic-bezier(0, 0.4, 0.4, 1),\n          ", "ms ", " ", "ms linear;\n      "])), linearProgressAnimation, expectedTime, slowProgressAnimationTime, slowProgressAnimation, expectedTime);
+    },
+    acceptAnimation: function acceptAnimation(t, startWidth, expectedTime, width, left) {
+      var transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);
+      var slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);
+      return emotion.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n        width: 90%;\n        animation: transitionAnimation ", "ms linear,\n          ", "ms acceptAnimation ", "ms cubic-bezier(0, 0.4, 0.4, 1),\n          ", "ms ", " ", "ms linear;\n        @keyframes transitionAnimation {\n          from {\n            width: ", "px;\n            left: ", "px;\n          }\n          to {\n            width: ", "px;\n            left: 0;\n          }\n        }\n        @keyframes acceptAnimation {\n          from {\n            width: ", "px;\n          }\n          to {\n            width: 80%;\n          }\n        }\n      "])), transitionTime, expectedTime, transitionTime, slowProgressAnimationTime, slowProgressAnimation, expectedTime + transitionTime, width, left, startWidth, startWidth);
+    },
+    slowAcceptAnimation: function slowAcceptAnimation(t, startWidth, width, left) {
+      var transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);
+      var slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);
+      return emotion.css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n        width: 90%;\n        animation: transitionAnimation ", "ms linear,\n          ", "ms acceptAnimation ", "ms linear;\n        @keyframes transitionAnimation {\n          from {\n            width: ", "px;\n            left: ", "px;\n          }\n          to {\n            width: ", "px;\n            left: 0;\n          }\n        }\n        @keyframes acceptAnimation {\n          from {\n            width: ", "px;\n          }\n          to {\n            width: 90%;\n          }\n        }\n      "])), transitionTime, slowProgressAnimationTime, transitionTime, width, left, startWidth, startWidth);
+    },
+    acceptWithoutAnimation: function acceptWithoutAnimation(startWidth) {
+      return emotion.css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n        width: ", "px;\n      "])), startWidth);
+    }
+  };
 };

package/components/GlobalLoader/GlobalLoaderView.styles/GlobalLoaderView.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["GlobalLoaderView.styles.ts"],"names":["css","memoizeStyle","keyframes","styles","outer","t","globalLoaderWidth","globalLoaderHeight","globalLoaderBackgroundColor","globalLoaderPosition","globalLoaderLeft","globalLoaderTop","globalLoaderRight","globalLoaderBottom","inner","globalLoaderColor","standardWithoutAnimation","successWithoutAnimation","errorWithoutAnimation","moveToRightAnimation","spinnerAnimation","linearProgressAnimation","slowProgressAnimation","animations","successAnimation","delayBeforeHide","width","left","errorAnimation","transitionDuration","parseInt","globalLoaderTransitionToSpinnerDuration","spinnerAnimationDuration","globalLoaderSpinnerAnimationDuration","standardAnimation","expectedTime","slowProgressAnimationTime","globalLoaderSlowAnimationDuration","acceptAnimation","startWidth","transitionTime","globalLoaderTransitionFromSpinnerDuration","slowAcceptAnimation","acceptWithoutAnimation"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, keyframes } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  outer(t: Theme) {\n    return css`\n      width: ${t.globalLoaderWidth};\n      height: ${t.globalLoaderHeight};\n      background-color: ${t.globalLoaderBackgroundColor};\n      position: ${t.globalLoaderPosition};\n      left: ${t.globalLoaderLeft};\n      top: ${t.globalLoaderTop};\n      right: ${t.globalLoaderRight};\n      bottom: ${t.globalLoaderBottom};\n      overflow: hidden;\n    `;\n  },\n  inner(t: Theme) {\n    return css`\n      background-color: ${t.globalLoaderColor};\n      width: 0;\n      height: ${t.globalLoaderHeight};\n      position: absolute;\n      left: 0;\n      overflow: hidden;\n    `;\n  },\n  standardWithoutAnimation() {\n    return css`\n      left: 0;\n      width: 90%;\n    `;\n  },\n  successWithoutAnimation() {\n    return css`\n      left: 0;\n      width: 100%;\n    `;\n  },\n  errorWithoutAnimation() {\n    return css`\n      left: 40%;\n      width: 20%;\n    `;\n  },\n});\n\nconst moveToRightAnimation = keyframes`\n  0% {\n    left: 0;\n    width: 100%;\n  }\n  50% {\n    left: 50%;\n    width: 50%;\n  }\n  100% {\n    left: 99%;\n    width: 1%\n  }\n`;\nconst spinnerAnimation = keyframes`\n  0% {\n    transform: translateX(50%) scaleX(.005);\n    animation-timing-function: cubic-bezier(.895,.03,.685,.22);\n  }\n  50% {\n    transform: translateX(0) scaleX(.35);\n    animation-timing-function: cubic-bezier(.165,.84,.44,1);\n  }\n  100% {\n    transform: translateX(-50%) scaleX(.005);\n  }\n`;\nconst linearProgressAnimation = keyframes`\n  from { width: 0; }\n  to { width: 80% }\n`;\nconst slowProgressAnimation = keyframes`\n  from { width: 80%; }\n  to { width: 90% }\n`;\n\nexport const animations = {\n  successAnimation(delayBeforeHide: number, width: number, left: number) {\n    return css`\n      animation: successAnimation;\n      animation-duration: ${delayBeforeHide}ms;\n      @keyframes successAnimation {\n        0% {\n          width: ${width}px;\n          left: ${left}px;\n          opacity: 1;\n        }\n        20% {\n          width: 100%;\n          left: 0;\n          opacity: 1;\n        }\n        80% {\n          width: 100%;\n          left: 0;\n          opacity: 1;\n        }\n        100% {\n          width: 100%;\n          opacity: 0;\n        }\n      }\n    `;\n  },\n  errorAnimation(t: Theme) {\n    const transitionDuration = parseInt(t.globalLoaderTransitionToSpinnerDuration);\n    const spinnerAnimationDuration = parseInt(t.globalLoaderSpinnerAnimationDuration);\n\n    return css`\n      left: 0;\n      width: 100%;\n      animation: ${moveToRightAnimation} ${transitionDuration}ms linear,\n        ${spinnerAnimationDuration}ms ${spinnerAnimation} ${transitionDuration}ms infinite alternate;\n    `;\n  },\n  standardAnimation(t: Theme, expectedTime: number) {\n    const slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);\n    return css`\n      width: 90%;\n      animation: ${linearProgressAnimation} ${expectedTime}ms cubic-bezier(0, 0.4, 0.4, 1),\n        ${slowProgressAnimationTime}ms ${slowProgressAnimation} ${expectedTime}ms linear;\n    `;\n  },\n  acceptAnimation(t: Theme, startWidth: number, expectedTime: number, width: number, left: number) {\n    const transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);\n    const slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);\n    return css`\n      width: 90%;\n      animation: transitionAnimation ${transitionTime}ms linear,\n        ${expectedTime}ms acceptAnimation ${transitionTime}ms cubic-bezier(0, 0.4, 0.4, 1),\n        ${slowProgressAnimationTime}ms ${slowProgressAnimation} ${expectedTime + transitionTime}ms linear;\n      @keyframes transitionAnimation {\n        from {\n          width: ${width}px;\n          left: ${left}px;\n        }\n        to {\n          width: ${startWidth}px;\n          left: 0;\n        }\n      }\n      @keyframes acceptAnimation {\n        from {\n          width: ${startWidth}px;\n        }\n        to {\n          width: 80%;\n        }\n      }\n    `;\n  },\n  slowAcceptAnimation(t: Theme, startWidth: number, width: number, left: number) {\n    const transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);\n    const slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);\n    return css`\n      width: 90%;\n      animation: transitionAnimation ${transitionTime}ms linear,\n        ${slowProgressAnimationTime}ms acceptAnimation ${transitionTime}ms linear;\n      @keyframes transitionAnimation {\n        from {\n          width: ${width}px;\n          left: ${left}px;\n        }\n        to {\n          width: ${startWidth}px;\n          left: 0;\n        }\n      }\n      @keyframes acceptAnimation {\n        from {\n          width: ${startWidth}px;\n        }\n        to {\n          width: 90%;\n        }\n      }\n    `;\n  },\n  acceptWithoutAnimation(startWidth: number) {\n    return css`\n      width: ${startWidth}px;\n    `;\n  },\n};\n"]}
+{"version":3,"sources":["GlobalLoaderView.styles.ts"],"names":["memoizeStyle","getStyles","emotion","outer","t","css","globalLoaderWidth","globalLoaderHeight","globalLoaderBackgroundColor","globalLoaderPosition","globalLoaderLeft","globalLoaderTop","globalLoaderRight","globalLoaderBottom","inner","globalLoaderColor","standardWithoutAnimation","successWithoutAnimation","errorWithoutAnimation","getAnimations","moveToRightAnimation","keyframes","spinnerAnimation","linearProgressAnimation","slowProgressAnimation","successAnimation","delayBeforeHide","width","left","errorAnimation","transitionDuration","parseInt","globalLoaderTransitionToSpinnerDuration","spinnerAnimationDuration","globalLoaderSpinnerAnimationDuration","standardAnimation","expectedTime","slowProgressAnimationTime","globalLoaderSlowAnimationDuration","acceptAnimation","startWidth","transitionTime","globalLoaderTransitionFromSpinnerDuration","slowAcceptAnimation","acceptWithoutAnimation"],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    outer(t: Theme) {\n      return emotion.css`\n        width: ${t.globalLoaderWidth};\n        height: ${t.globalLoaderHeight};\n        background-color: ${t.globalLoaderBackgroundColor};\n        position: ${t.globalLoaderPosition};\n        left: ${t.globalLoaderLeft};\n        top: ${t.globalLoaderTop};\n        right: ${t.globalLoaderRight};\n        bottom: ${t.globalLoaderBottom};\n        overflow: hidden;\n      `;\n    },\n    inner(t: Theme) {\n      return emotion.css`\n        background-color: ${t.globalLoaderColor};\n        width: 0;\n        height: ${t.globalLoaderHeight};\n        position: absolute;\n        left: 0;\n        overflow: hidden;\n      `;\n    },\n    standardWithoutAnimation() {\n      return emotion.css`\n        left: 0;\n        width: 90%;\n      `;\n    },\n    successWithoutAnimation() {\n      return emotion.css`\n        left: 0;\n        width: 100%;\n      `;\n    },\n    errorWithoutAnimation() {\n      return emotion.css`\n        left: 40%;\n        width: 20%;\n      `;\n    },\n  });\n\nexport const getAnimations = (emotion: Emotion) => {\n  const moveToRightAnimation = emotion.keyframes`\n  0% {\n    left: 0;\n    width: 100%;\n  }\n  50% {\n    left: 50%;\n    width: 50%;\n  }\n  100% {\n    left: 99%;\n    width: 1%\n  }\n`;\n  const spinnerAnimation = emotion.keyframes`\n  0% {\n    transform: translateX(50%) scaleX(.005);\n    animation-timing-function: cubic-bezier(.895,.03,.685,.22);\n  }\n  50% {\n    transform: translateX(0) scaleX(.35);\n    animation-timing-function: cubic-bezier(.165,.84,.44,1);\n  }\n  100% {\n    transform: translateX(-50%) scaleX(.005);\n  }\n`;\n  const linearProgressAnimation = emotion.keyframes`\n  from { width: 0; }\n  to { width: 80% }\n`;\n  const slowProgressAnimation = emotion.keyframes`\n  from { width: 80%; }\n  to { width: 90% }\n`;\n\n  return {\n    successAnimation(delayBeforeHide: number, width: number, left: number) {\n      return emotion.css`\n        animation: successAnimation;\n        animation-duration: ${delayBeforeHide}ms;\n        @keyframes successAnimation {\n          0% {\n            width: ${width}px;\n            left: ${left}px;\n            opacity: 1;\n          }\n          20% {\n            width: 100%;\n            left: 0;\n            opacity: 1;\n          }\n          80% {\n            width: 100%;\n            left: 0;\n            opacity: 1;\n          }\n          100% {\n            width: 100%;\n            opacity: 0;\n          }\n        }\n      `;\n    },\n    errorAnimation(t: Theme) {\n      const transitionDuration = parseInt(t.globalLoaderTransitionToSpinnerDuration);\n      const spinnerAnimationDuration = parseInt(t.globalLoaderSpinnerAnimationDuration);\n\n      return emotion.css`\n        left: 0;\n        width: 100%;\n        animation: ${moveToRightAnimation} ${transitionDuration}ms linear,\n          ${spinnerAnimationDuration}ms ${spinnerAnimation} ${transitionDuration}ms infinite alternate;\n      `;\n    },\n    standardAnimation(t: Theme, expectedTime: number) {\n      const slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);\n      return emotion.css`\n        width: 90%;\n        animation: ${linearProgressAnimation} ${expectedTime}ms cubic-bezier(0, 0.4, 0.4, 1),\n          ${slowProgressAnimationTime}ms ${slowProgressAnimation} ${expectedTime}ms linear;\n      `;\n    },\n    acceptAnimation(t: Theme, startWidth: number, expectedTime: number, width: number, left: number) {\n      const transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);\n      const slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);\n      return emotion.css`\n        width: 90%;\n        animation: transitionAnimation ${transitionTime}ms linear,\n          ${expectedTime}ms acceptAnimation ${transitionTime}ms cubic-bezier(0, 0.4, 0.4, 1),\n          ${slowProgressAnimationTime}ms ${slowProgressAnimation} ${expectedTime + transitionTime}ms linear;\n        @keyframes transitionAnimation {\n          from {\n            width: ${width}px;\n            left: ${left}px;\n          }\n          to {\n            width: ${startWidth}px;\n            left: 0;\n          }\n        }\n        @keyframes acceptAnimation {\n          from {\n            width: ${startWidth}px;\n          }\n          to {\n            width: 80%;\n          }\n        }\n      `;\n    },\n    slowAcceptAnimation(t: Theme, startWidth: number, width: number, left: number) {\n      const transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);\n      const slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);\n      return emotion.css`\n        width: 90%;\n        animation: transitionAnimation ${transitionTime}ms linear,\n          ${slowProgressAnimationTime}ms acceptAnimation ${transitionTime}ms linear;\n        @keyframes transitionAnimation {\n          from {\n            width: ${width}px;\n            left: ${left}px;\n          }\n          to {\n            width: ${startWidth}px;\n            left: 0;\n          }\n        }\n        @keyframes acceptAnimation {\n          from {\n            width: ${startWidth}px;\n          }\n          to {\n            width: 90%;\n          }\n        }\n      `;\n    },\n    acceptWithoutAnimation(startWidth: number) {\n      return emotion.css`\n        width: ${startWidth}px;\n      `;\n    },\n  };\n};\n"]}

package/components/GlobalLoader/GlobalLoaderView.styles.d.ts

@@ -1,12 +1,13 @@
+import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
-export declare const styles: {
+export declare const getStyles: (emotion: Emotion) => {
     outer(t: Theme): string;
     inner(t: Theme): string;
     standardWithoutAnimation(): string;
     successWithoutAnimation(): string;
     errorWithoutAnimation(): string;
 };
-export declare const animations: {
+export declare const getAnimations: (emotion: Emotion) => {
     successAnimation(delayBeforeHide: number, width: number, left: number): string;
     errorAnimation(t: Theme): string;
     standardAnimation(t: Theme, expectedTime: number): string;

package/components/Group/Group/Group.js

@@ -5,16 +5,15 @@ var _class, _class2, _temp;
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { isIE11, isEdge } from "../../../lib/client";
+import { isEdge, isIE11 } from "../../../lib/client";
 import { isButton } from "../../Button";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { cx } from "../../../lib/theming/Emotion";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
 import { isInputLike } from "../../../lib/utils";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
-import { isClickable } from "../../Clickable";
-import { styles } from "../Group.styles";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { getStyles } from "../Group.styles";
 
 var getFirstChild = function getFirstChild(children) {
   if (!Array.isArray(children)) {
@@ -57,12 +56,6 @@ export var getButtonCorners = function getButtonCorners(isFirstChild, isLastChil
   };
 };
 
-var passCorners = function passCorners(child, corners) {
-  return /*#__PURE__*/React.cloneElement(child, {
-    corners: _extends({}, corners, child.props.corners)
-  });
-};
-
 var passCornersIfButton = function passCornersIfButton(child, firstChild, lastChild, isInputLikeToo) {
   if (isInputLikeToo === void 0) {
     isInputLikeToo = false;
@@ -70,8 +63,16 @@ var passCornersIfButton = function passCornersIfButton(child, firstChild, lastCh
 
   var corners = getButtonCorners(child === firstChild, child === lastChild);
 
-  if (isButton(child) || isClickable(child) || isInputLikeToo && isInputLike(child)) {
-    return passCorners(child, corners);
+  if (isButton(child)) {
+    return /*#__PURE__*/React.cloneElement(child, {
+      corners: _extends({}, corners, child.props.corners)
+    });
+  }
+
+  if (isInputLikeToo && isInputLike(child)) {
+    return /*#__PURE__*/React.cloneElement(child, {
+      corners: _extends({}, corners, child.props.corners)
+    });
   }
 
   return child;
@@ -92,9 +93,12 @@ export var Group = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
   _proto.render = function render() {
     var _this = this;
 
-    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this.theme = theme;
-      return _this.renderMain();
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      _this.emotion = emotion;
+      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+        _this.theme = theme;
+        return _this.renderMain();
+      });
     });
   };
 
@@ -107,6 +111,7 @@ export var Group = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
     var childrenArray = React.Children.toArray(this.props.children);
     var firstChild = getFirstChild(childrenArray);
     var lastChild = getLastChild(childrenArray);
+    var styles = getStyles(this.emotion);
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
       rootNodeRef: this.setRootNode
     }, this.props), /*#__PURE__*/React.createElement("span", {
@@ -114,7 +119,7 @@ export var Group = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
       className: styles.root(),
       style: style
     }, React.Children.map(childrenArray, function (child) {
-      var _cx, _cx2;
+      var _this2$emotion$cx, _this2$emotion$cx2;
 
       if (!child || ! /*#__PURE__*/React.isValidElement(child)) {
         return null;
@@ -124,14 +129,14 @@ export var Group = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
       var modifiedChild = passCornersIfButton(child, firstChild, lastChild, isTheme2022(_this2.theme));
       var isFirstChild = child === firstChild;
       return /*#__PURE__*/React.createElement("div", {
-        className: cx((_cx = {}, _cx[styles.fixed()] = !isWidthInPercent, _cx[styles.stretch()] = isWidthInPercent, _cx[styles.stretchFallback()] = Boolean(isWidthInPercent && _this2.props.width && (isIE11 || isEdge)), _cx))
+        className: _this2.emotion.cx((_this2$emotion$cx = {}, _this2$emotion$cx[styles.fixed()] = !isWidthInPercent, _this2$emotion$cx[styles.stretch()] = isWidthInPercent, _this2$emotion$cx[styles.stretchFallback()] = Boolean(isWidthInPercent && _this2.props.width && (isIE11 || isEdge)), _this2$emotion$cx))
       }, /*#__PURE__*/React.createElement("div", {
-        className: cx((_cx2 = {}, _cx2[styles.item()] = true, _cx2[styles.itemFirst()] = isFirstChild, _cx2))
+        className: _this2.emotion.cx((_this2$emotion$cx2 = {}, _this2$emotion$cx2[styles.item()] = true, _this2$emotion$cx2[styles.itemFirst()] = isFirstChild, _this2$emotion$cx2))
       }, modifiedChild));
     })));
   };
 
   return Group;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Group', _class2.propTypes = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Group', _class2.displayName = 'Group', _class2.propTypes = {
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 }, _temp)) || _class;

package/components/Group/Group/Group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Group.tsx"],"names":["React","PropTypes","isIE11","isEdge","isButton","CommonWrapper","cx","rootNode","isInputLike","ThemeContext","isTheme2022","isClickable","styles","getFirstChild","children","Array","isArray","getLastChild","numberOfChildren","Children","count","getButtonCorners","isFirstChild","isLastChild","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","borderRadius","passCorners","child","corners","cloneElement","props","passCornersIfButton","firstChild","lastChild","isInputLikeToo","GroupDataTids","root","Group","render","theme","renderMain","style","width","childrenArray","toArray","setRootNode","map","isValidElement","isWidthInPercent","Boolean","toString","includes","modifiedChild","fixed","stretch","stretchFallback","item","itemFirst","Component","__KONTUR_REACT_UI__","propTypes","oneOfType","number","string"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isIE11, isEdge } from '../../lib/client';\nimport { isButton } from '../Button';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isInputLike } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { isClickable } from '../Clickable';\n\nimport { styles } from './Group.styles';\n\nexport interface GroupProps extends CommonProps {\n  width?: React.CSSProperties['width'];\n}\n\ninterface GroupChildProps {\n  width?: React.CSSProperties['width'];\n  corners?: number;\n}\n\nconst getFirstChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  return children?.[0] as React.ReactNode;\n};\n\nconst getLastChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  const numberOfChildren = React.Children.count(children);\n\n  return children?.[numberOfChildren - 1] as React.ReactNode;\n};\n\nexport const getButtonCorners = (isFirstChild: boolean, isLastChild: boolean): React.CSSProperties => {\n  if (isFirstChild && isLastChild) {\n    return {};\n  }\n\n  if (isFirstChild) {\n    return {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    };\n  }\n\n  if (isLastChild) {\n    return {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    };\n  }\n\n  return {\n    borderRadius: 0,\n  };\n};\n\nconst passCorners = (child: React.ReactElement, corners: React.CSSProperties) => {\n  return React.cloneElement(child, { corners: { ...corners, ...child.props.corners } });\n};\n\nconst passCornersIfButton = (\n  child: React.ReactNode,\n  firstChild: React.ReactNode,\n  lastChild: React.ReactNode,\n  isInputLikeToo = false,\n) => {\n  const corners = getButtonCorners(child === firstChild, child === lastChild);\n  if (isButton(child) || isClickable(child) || (isInputLikeToo && isInputLike(child))) {\n    return passCorners(child, corners);\n  }\n\n  return child;\n};\n\nexport const GroupDataTids = {\n  root: 'Group__root',\n} as const;\n\n@rootNode\nexport class Group extends React.Component<GroupProps> {\n  public static __KONTUR_REACT_UI__ = 'Group';\n  private setRootNode!: TSetRootNode;\n  private theme!: Theme;\n\n  public static propTypes = {\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  };\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    const style: React.CSSProperties = {\n      width: this.props.width,\n    };\n\n    const childrenArray = React.Children.toArray(this.props.children);\n    const firstChild = getFirstChild(childrenArray);\n    const lastChild = getLastChild(childrenArray);\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <span data-tid={GroupDataTids.root} className={styles.root()} style={style}>\n          {React.Children.map(childrenArray, (child) => {\n            if (!child || !React.isValidElement<GroupChildProps>(child)) {\n              return null;\n            }\n\n            const isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));\n\n            const modifiedChild = passCornersIfButton(child, firstChild, lastChild, isTheme2022(this.theme));\n\n            const isFirstChild = child === firstChild;\n\n            return (\n              <div\n                className={cx({\n                  [styles.fixed()]: !isWidthInPercent,\n                  [styles.stretch()]: isWidthInPercent,\n                  [styles.stretchFallback()]: Boolean(isWidthInPercent && this.props.width && (isIE11 || isEdge)),\n                })}\n              >\n                <div\n                  className={cx({\n                    [styles.item()]: true,\n                    [styles.itemFirst()]: isFirstChild,\n                  })}\n                >\n                  {modifiedChild}\n                </div>\n              </div>\n            );\n          })}\n        </span>\n      </CommonWrapper>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["Group.tsx"],"names":["React","PropTypes","isEdge","isIE11","isButton","CommonWrapper","EmotionConsumer","rootNode","isInputLike","isTheme2022","ThemeContext","getStyles","getFirstChild","children","Array","isArray","getLastChild","numberOfChildren","Children","count","getButtonCorners","isFirstChild","isLastChild","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","borderRadius","passCornersIfButton","child","firstChild","lastChild","isInputLikeToo","corners","cloneElement","props","GroupDataTids","root","Group","render","emotion","theme","renderMain","style","width","childrenArray","toArray","styles","setRootNode","map","isValidElement","isWidthInPercent","Boolean","toString","includes","modifiedChild","cx","fixed","stretch","stretchFallback","item","itemFirst","Component","__KONTUR_REACT_UI__","displayName","propTypes","oneOfType","number","string"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { isEdge, isIE11 } from '../../lib/client';\nimport { isButton } from '../Button';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isInputLike } from '../../lib/utils';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { getStyles } from './Group.styles';\n\nexport interface GroupProps extends CommonProps {\n  width?: React.CSSProperties['width'];\n}\n\ninterface GroupChildProps {\n  width?: React.CSSProperties['width'];\n  corners?: number;\n}\n\nconst getFirstChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  return children?.[0] as React.ReactNode;\n};\n\nconst getLastChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  const numberOfChildren = React.Children.count(children);\n\n  return children?.[numberOfChildren - 1] as React.ReactNode;\n};\n\nexport const getButtonCorners = (isFirstChild: boolean, isLastChild: boolean): React.CSSProperties => {\n  if (isFirstChild && isLastChild) {\n    return {};\n  }\n\n  if (isFirstChild) {\n    return {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    };\n  }\n\n  if (isLastChild) {\n    return {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    };\n  }\n\n  return {\n    borderRadius: 0,\n  };\n};\n\nconst passCornersIfButton = (\n  child: React.ReactNode,\n  firstChild: React.ReactNode,\n  lastChild: React.ReactNode,\n  isInputLikeToo = false,\n) => {\n  const corners = getButtonCorners(child === firstChild, child === lastChild);\n  if (isButton(child)) {\n    return React.cloneElement(child, { corners: { ...corners, ...child.props.corners } });\n  }\n  if (isInputLikeToo && isInputLike(child)) {\n    return React.cloneElement(child, { corners: { ...corners, ...child.props.corners } });\n  }\n\n  return child;\n};\n\nexport const GroupDataTids = {\n  root: 'Group__root',\n} as const;\n\n@rootNode\nexport class Group extends React.Component<GroupProps> {\n  public static __KONTUR_REACT_UI__ = 'Group';\n  public static displayName = 'Group';\n\n  private setRootNode!: TSetRootNode;\n  private theme!: Theme;\n  private emotion!: Emotion;\n\n  public static propTypes = {\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  };\n\n  public render() {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  public renderMain() {\n    const style: React.CSSProperties = {\n      width: this.props.width,\n    };\n\n    const childrenArray = React.Children.toArray(this.props.children);\n    const firstChild = getFirstChild(childrenArray);\n    const lastChild = getLastChild(childrenArray);\n    const styles = getStyles(this.emotion);\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <span data-tid={GroupDataTids.root} className={styles.root()} style={style}>\n          {React.Children.map(childrenArray, (child) => {\n            if (!child || !React.isValidElement<GroupChildProps>(child)) {\n              return null;\n            }\n\n            const isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));\n\n            const modifiedChild = passCornersIfButton(child, firstChild, lastChild, isTheme2022(this.theme));\n\n            const isFirstChild = child === firstChild;\n\n            return (\n              <div\n                className={this.emotion.cx({\n                  [styles.fixed()]: !isWidthInPercent,\n                  [styles.stretch()]: isWidthInPercent,\n                  [styles.stretchFallback()]: Boolean(isWidthInPercent && this.props.width && (isIE11 || isEdge)),\n                })}\n              >\n                <div\n                  className={this.emotion.cx({\n                    [styles.item()]: true,\n                    [styles.itemFirst()]: isFirstChild,\n                  })}\n                >\n                  {modifiedChild}\n                </div>\n              </div>\n            );\n          })}\n        </span>\n      </CommonWrapper>\n    );\n  }\n}\n"]}

package/components/Group/Group.d.ts

@@ -10,8 +10,10 @@ export declare const GroupDataTids: {
 };
 export declare class Group extends React.Component<GroupProps> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     private setRootNode;
     private theme;
+    private emotion;
     static propTypes: {
         width: PropTypes.Requireable<string | number>;
     };

package/components/Group/Group.md

@@ -1,5 +1,3 @@
-Контрол `<Group>` умеет работать как с `<Button>`...
-
 ```jsx harmony
 import FunctionIcon from '@skbkontur/react-icons/Function';
 import SearchIcon from '@skbkontur/react-icons/Search';
@@ -18,25 +16,3 @@ const [value, setValue] = React.useState('Foo');
   <Button>Bar</Button>
 </Group>;
 ```
-
-...так и с `<Clickable>`
-
-```jsx harmony
-import FunctionIcon from '@skbkontur/react-icons/Function';
-import SearchIcon from '@skbkontur/react-icons/Search';
-import { Clickable, Input } from '@skbkontur/react-ui';
-
-
-const [value, setValue] = React.useState('Foo');
-
-<Group width={300}>
-  <Clickable>
-    <FunctionIcon />
-  </Clickable>
-  <Input value={value} width="100%" onValueChange={setValue} />
-  <Clickable>
-    <SearchIcon />
-  </Clickable>
-  <Clickable>Bar</Clickable>
-</Group>
-```