@skbkontur/react-ui 0.0.0-0b8a8f7a39 → 0.0.0-0fe669bb2d

package/cjs/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Button.tsx"],"names":["Button","state","focusedByTab","theme","node","handleFocus","e","props","disabled","disableFocus","process","nextTick","tabListener","isTabPressed","setState","onFocus","handleBlur","onBlur","_ref","componentDidMount","autoFocus","focus","blur","render","renderMain","corners","sizeClass","getSizeClassName","isError","error","isWarning","warning","isFocused","visuallyFocused","isLink","use","rootProps","type","className","jsStyles","root","default","active","narrow","noPadding","_noPadding","noRightPadding","_noRightPadding","borderless","checked","loading","fallback","isIE11","isEdge","style","borderTopLeftRadius","Corners","TOP_LEFT","undefined","borderTopRightRadius","TOP_RIGHT","borderBottomRightRadius","BOTTOM_RIGHT","borderBottomLeftRadius","BOTTOM_LEFT","textAlign","align","onClick","onKeyDown","onMouseEnter","onMouseLeave","onMouseOver","tabIndex","wrapProps","wrap","wrapArrow","arrow","wrapArrowLeft","width","icon","getLoadingSpinner","getSizeIconClassName","iconNoRightPadding","children","iconLink","arrowWarning","arrowError","arrowFocus","arrowLeft","arrowHelper","arrowHelperTop","arrowHelperBottom","link","Object","assign","wrapLink","caption","visibilityHidden","size","sizeLarge","sizeMedium","sizeSmall","iconLarge","iconMedium","iconSmall","React","Component","__KONTUR_REACT_UI__","__BUTTON__","defaultProps","isButton","child","isValidElement","prototype","hasOwnProperty","call"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { isIE11, isEdge } from '../../lib/client';\r\nimport { tabListener } from '../../lib/events/tabListener';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Spinner } from '../Spinner';\r\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './Button.styles';\r\nimport { Corners } from './Corners';\r\n\r\nexport type ButtonSize = 'small' | 'medium' | 'large';\r\nexport type ButtonType = 'button' | 'submit' | 'reset';\r\nexport type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link';\r\n\r\nexport interface ButtonProps extends CommonProps {\r\n  /** @ignore */\r\n  _noPadding?: boolean;\r\n\r\n  /** @ignore */\r\n  _noRightPadding?: boolean;\r\n\r\n  /**\r\n   * Визуально нажатое состояние.\r\n   */\r\n  active?: boolean;\r\n\r\n  /** `type TextAlignProperty = \"inherit\" | \"initial\" | \"unset\" | \"center\" | \"end\" | \"justify\" | \"left\" | \"match-parent\" | \"right\" | \"start\"` */\r\n  align?: React.CSSProperties['textAlign'];\r\n\r\n  /**\r\n   * Кнопка со стрелкой.\r\n   *\r\n   * `type ButtonArrow = boolean | \"left\"`\r\n   */\r\n  arrow?: boolean | 'left';\r\n\r\n  autoFocus?: boolean;\r\n\r\n  borderless?: boolean;\r\n\r\n  checked?: boolean;\r\n\r\n  children?: React.ReactNode;\r\n\r\n  /** @ignore */\r\n  corners?: number;\r\n\r\n  disabled?: boolean;\r\n\r\n  /** @ignore */\r\n  disableFocus?: boolean;\r\n\r\n  error?: boolean;\r\n\r\n  focused?: boolean;\r\n\r\n  /**\r\n   * Иконка слева от текста кнопки.\r\n   */\r\n  icon?: React.ReactElement<any>;\r\n\r\n  loading?: boolean;\r\n\r\n  narrow?: boolean;\r\n\r\n  onBlur?: React.FocusEventHandler<HTMLButtonElement>;\r\n\r\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\r\n\r\n  onFocus?: React.FocusEventHandler<HTMLButtonElement>;\r\n\r\n  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\r\n\r\n  onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;\r\n\r\n  onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;\r\n\r\n  onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;\r\n\r\n  /** `type ButtonSize = \"small\" | \"medium\" | \"large\"` */\r\n  size?: ButtonSize;\r\n\r\n  /** `type ButtonType = \"button\" | \"submit\" | \"reset\"` */\r\n  type?: ButtonType;\r\n\r\n  /**\r\n   * Вариант использования. Влияет на цвет кнопки.\r\n   *\r\n   * `type ButtonUse = \"default\" | \"primary\" | \"success\" | \"danger\" | \"pay\" | \"link\"`\r\n   */\r\n  use?: ButtonUse;\r\n\r\n  /** @ignore */\r\n  visuallyFocused?: boolean;\r\n\r\n  warning?: boolean;\r\n\r\n  width?: number | string;\r\n}\r\n\r\nexport interface ButtonState {\r\n  focusedByTab: boolean;\r\n}\r\n\r\nexport class Button extends React.Component<ButtonProps, ButtonState> {\r\n  public static __KONTUR_REACT_UI__ = 'Button';\r\n  public static __BUTTON__ = true;\r\n  public static TOP_LEFT = Corners.TOP_LEFT;\r\n  public static TOP_RIGHT = Corners.TOP_RIGHT;\r\n  public static BOTTOM_RIGHT = Corners.BOTTOM_RIGHT;\r\n  public static BOTTOM_LEFT = Corners.BOTTOM_LEFT;\r\n\r\n  public static defaultProps = {\r\n    use: 'default',\r\n    size: 'small',\r\n    type: 'button',\r\n  };\r\n\r\n  public state = {\r\n    focusedByTab: false,\r\n  };\r\n\r\n  private theme!: Theme;\r\n  private node: HTMLButtonElement | null = null;\r\n\r\n  public componentDidMount() {\r\n    if (this.props.autoFocus) {\r\n      tabListener.isTabPressed = true;\r\n      this.focus();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @public\r\n   */\r\n  public focus() {\r\n    this.node?.focus();\r\n  }\r\n\r\n  /**\r\n   * @public\r\n   */\r\n  public blur() {\r\n    this.node?.blur();\r\n  }\r\n\r\n  public render(): JSX.Element {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return this.renderMain();\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain() {\r\n    const { corners = 0 } = this.props;\r\n    const sizeClass = this.getSizeClassName();\r\n\r\n    const isError = !!this.props.error;\r\n    const isWarning = !!this.props.warning;\r\n    const isFocused = this.state.focusedByTab || !!this.props.visuallyFocused;\r\n    const isLink = this.props.use === 'link';\r\n    const rootProps = {\r\n      // By default the type attribute is 'submit'. IE8 will fire a click event\r\n      // on this button if somewhere on the page user presses Enter while some\r\n      // input is focused. So we set type to 'button' by default.\r\n      type: this.props.type,\r\n      className: cn({\r\n        [jsStyles.root(this.theme)]: true,\r\n        [(jsStyles[this.props.use!] && jsStyles[this.props.use!](this.theme)) || jsStyles.default(this.theme)]: true,\r\n        [jsStyles.active(this.theme)]: !!this.props.active,\r\n        [jsStyles.narrow()]: !!this.props.narrow,\r\n        [jsStyles.noPadding()]: !!this.props._noPadding,\r\n        [jsStyles.noRightPadding()]: !!this.props._noRightPadding,\r\n        [sizeClass]: true,\r\n        [jsStyles.borderless(this.theme)]: !!this.props.borderless,\r\n        [jsStyles.focus(this.theme)]: isFocused,\r\n        [jsStyles.checked(this.theme)]: !!this.props.checked,\r\n        [jsStyles.disabled(this.theme)]: !!this.props.disabled || !!this.props.loading,\r\n        [jsStyles.fallback(this.theme)]: isIE11 || isEdge,\r\n      }),\r\n      style: {\r\n        borderTopLeftRadius: corners & Corners.TOP_LEFT ? 0 : undefined,\r\n        borderTopRightRadius: corners & Corners.TOP_RIGHT ? 0 : undefined,\r\n        borderBottomRightRadius: corners & Corners.BOTTOM_RIGHT ? 0 : undefined,\r\n        borderBottomLeftRadius: corners & Corners.BOTTOM_LEFT ? 0 : undefined,\r\n        textAlign: this.props.align,\r\n      },\r\n      disabled: this.props.disabled || this.props.loading,\r\n      onClick: this.props.onClick,\r\n      onFocus: this.handleFocus,\r\n      onBlur: this.handleBlur,\r\n      onKeyDown: this.props.onKeyDown,\r\n      onMouseEnter: this.props.onMouseEnter,\r\n      onMouseLeave: this.props.onMouseLeave,\r\n      onMouseOver: this.props.onMouseOver,\r\n      tabIndex: this.props.disableFocus ? -1 : 0,\r\n    };\r\n\r\n    const wrapProps = {\r\n      className: cn({\r\n        [jsStyles.wrap(this.theme)]: true,\r\n        [jsStyles.wrapArrow()]: this.props.arrow === true,\r\n        [jsStyles.wrapArrowLeft()]: this.props.arrow === 'left',\r\n      }),\r\n      style: {\r\n        width: this.props.width,\r\n      },\r\n    };\r\n\r\n    let error = null;\r\n    if (!isFocused || isLink) {\r\n      if (isError) {\r\n        error = <div className={jsStyles.error(this.theme)} />;\r\n      } else if (isWarning) {\r\n        error = <div className={jsStyles.warning(this.theme)} />;\r\n      }\r\n    }\r\n\r\n    let loading = null;\r\n    if (this.props.loading && !this.props.icon) {\r\n      loading = <div className={jsStyles.loading()}>{this.getLoadingSpinner()}</div>;\r\n    }\r\n\r\n    let icon = this.props.icon;\r\n    if (this.props.icon) {\r\n      icon = (\r\n        <span\r\n          className={cn(jsStyles.icon(), this.getSizeIconClassName(), {\r\n            [jsStyles.iconNoRightPadding()]: !this.props.children,\r\n            [jsStyles.iconLink(this.theme)]: isLink,\r\n          })}\r\n        >\r\n          {this.props.loading ? this.getLoadingSpinner() : this.props.icon}\r\n        </span>\r\n      );\r\n    }\r\n\r\n    let arrow = null;\r\n    if (this.props.arrow) {\r\n      arrow = (\r\n        <div\r\n          className={cn({\r\n            [jsStyles.arrow()]: true,\r\n            [jsStyles.arrowWarning(this.theme)]: isWarning && !isFocused,\r\n            [jsStyles.arrowError(this.theme)]: isError && !isFocused,\r\n            [jsStyles.arrowFocus(this.theme)]: isFocused,\r\n            [jsStyles.arrowLeft()]: this.props.arrow === 'left',\r\n          })}\r\n        >\r\n          <div className={cn(jsStyles.arrowHelper(), jsStyles.arrowHelperTop())} />\r\n          <div className={cn(jsStyles.arrowHelper(), jsStyles.arrowHelperBottom())} />\r\n        </div>\r\n      );\r\n    }\r\n\r\n    // Force disable all props and features, that cannot be use with Link\r\n    if (isLink) {\r\n      rootProps.className = cn({\r\n        [jsStyles.root(this.theme)]: true,\r\n        [sizeClass]: true,\r\n        [jsStyles.focus(this.theme)]: this.state.focusedByTab || !!this.props.visuallyFocused,\r\n        [jsStyles.link(this.theme)]: true,\r\n        [jsStyles.disabled(this.theme)]: !!this.props.disabled || !!this.props.loading,\r\n      });\r\n      Object.assign(wrapProps, {\r\n        className: cn(jsStyles.wrap(this.theme), jsStyles.wrapLink(this.theme)),\r\n        style: { width: wrapProps.style.width },\r\n      });\r\n      rootProps.style.textAlign = undefined;\r\n      arrow = null;\r\n    }\r\n\r\n    return (\r\n      <CommonWrapper {...this.props}>\r\n        <span {...wrapProps}>\r\n          <button ref={this._ref} {...rootProps}>\r\n            {error}\r\n            {loading}\r\n            {arrow}\r\n            <div className={jsStyles.caption()}>\r\n              {icon}\r\n              <span className={cn({ [jsStyles.visibilityHidden()]: loading })}>{this.props.children}</span>\r\n            </div>\r\n          </button>\r\n        </span>\r\n      </CommonWrapper>\r\n    );\r\n  }\r\n\r\n  private getLoadingSpinner() {\r\n    return <Spinner caption={null} dimmed type=\"mini\" />;\r\n  }\r\n\r\n  private getSizeClassName() {\r\n    switch (this.props.size) {\r\n      case 'large':\r\n        return cn(jsStyles.sizeLarge(this.theme));\r\n      case 'medium':\r\n        return cn(jsStyles.sizeMedium(this.theme));\r\n      case 'small':\r\n      default:\r\n        return cn(jsStyles.sizeSmall(this.theme));\r\n    }\r\n  }\r\n\r\n  private getSizeIconClassName() {\r\n    switch (this.props.size) {\r\n      case 'large':\r\n        return jsStyles.iconLarge(this.theme);\r\n      case 'medium':\r\n        return jsStyles.iconMedium(this.theme);\r\n      case 'small':\r\n      default:\r\n        return jsStyles.iconSmall(this.theme);\r\n    }\r\n  }\r\n\r\n  private handleFocus = (e: React.FocusEvent<HTMLButtonElement>) => {\r\n    if (!this.props.disabled && !this.props.disableFocus) {\r\n      // focus event fires before keyDown eventlistener\r\n      // so we should check tabPressed in async way\r\n      process.nextTick(() => {\r\n        if (tabListener.isTabPressed) {\r\n          this.setState({ focusedByTab: true });\r\n        }\r\n      });\r\n      this.props.onFocus?.(e);\r\n    }\r\n  };\r\n\r\n  private handleBlur = (e: React.FocusEvent<HTMLButtonElement>) => {\r\n    this.setState({ focusedByTab: false });\r\n    if (!this.props.disabled && !this.props.disableFocus) {\r\n      this.props.onBlur?.(e);\r\n    }\r\n  };\r\n\r\n  private _ref = (node: HTMLButtonElement | null) => {\r\n    this.node = node;\r\n  };\r\n}\r\n\r\nexport const isButton = (child: React.ReactChild): child is React.ReactElement<ButtonProps> => {\r\n  return React.isValidElement<ButtonProps>(child)\r\n    ? Object.prototype.hasOwnProperty.call(child.type, '__BUTTON__')\r\n    : false;\r\n};\r\n"]}
+{"version":3,"sources":["Button.tsx"],"names":["ButtonDataTids","root","Button","rootNode","getProps","defaultProps","state","focusedByTab","node","handleFocus","e","props","disabled","disableFocus","requestAnimationFrame","keyListener","isTabPressed","setState","onFocus","handleBlur","onBlur","_ref","componentDidMount","autoFocus","focus","getDerivedStateFromProps","loading","blur","render","theme","renderMain","corners","active","borderless","checked","error","warning","arrow","narrow","icon","_noPadding","_noRightPadding","visuallyFocused","align","onMouseEnter","onMouseLeave","onMouseOver","onKeyDown","onClick","width","children","use","type","sizeClass","getSizeClassName","isFocused","isLink","rootProps","className","styles","activeStyles","checkedFocused","checkedDisabled","noPadding","noRightPadding","style","textAlign","tabIndex","title","wrapProps","wrap","wrapArrow","wrapArrowLeft","getSizeWrapClassName","innerShadowNode","globalClasses","innerShadow","outlineNode","outline","outlineWarning","outlineError","outlineLink","outlineLinkWarning","outlineLinkError","loadingNode","getLoadingSpinner","iconNode","getSizeIconClassName","iconNoRightMargin","iconLink","arrowNode","arrowWarning","arrowError","arrowFocus","arrowLeft","arrowHelper","arrowHelperTop","arrowHelperBottom","link","linkFocus","linkDisabled","Object","assign","wrapLink","undefined","setRootNode","caption","captionTranslated","captionLink","captionDisabled","visibilityHidden","size","sizeLarge","sizeLargeIE11","isIE11","isEdge","sizeMedium","sizeMediumIE11","sizeSmall","sizeSmallIE11","iconLarge","iconMedium","iconSmall","wrapLarge","wrapMedium","wrapSmall","React","Component","__KONTUR_REACT_UI__","__BUTTON__","isButton"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { isReactUIComponent } from '../../lib/utils';\nimport { isIE11, isEdge } from '../../lib/client';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Spinner } from '../Spinner';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles, activeStyles, globalClasses } from './Button.styles';\n\nexport type ButtonSize = 'small' | 'medium' | 'large';\nexport type ButtonType = 'button' | 'submit' | 'reset';\nexport type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link';\n\nexport interface ButtonProps extends CommonProps {\n  /** @ignore */\n  _noPadding?: boolean;\n\n  /** @ignore */\n  _noRightPadding?: boolean;\n\n  /**\n   * Применяет к кнопке стили псевдокласса `:active`.\n   */\n  active?: boolean;\n\n  /**\n   * CSS-свойство `text-align`.\n   */\n  align?: React.CSSProperties['textAlign'];\n\n  /**\n   * Превращает обычную кнопку в кнопку со стрелкой.\n   */\n  arrow?: boolean | 'left';\n\n  /**\n   * Даёт кнопке фокус после окончания загрузки страницы.\n   */\n  autoFocus?: boolean;\n\n  /**\n   * Убирает обводку у кнопки.\n   */\n  borderless?: boolean;\n\n  /**\n   * @ignore\n   */\n  checked?: boolean;\n\n  children?: React.ReactNode;\n\n  /** @ignore */\n  corners?: React.CSSProperties;\n\n  /**\n   * Отключенное состояние кнопки.\n   */\n  disabled?: boolean;\n\n  /** @ignore */\n  disableFocus?: boolean;\n\n  /**\n   * Состояние валидации при ошибке.\n   */\n  error?: boolean;\n\n  /**\n   * Иконка слева от текста кнопки.\n   */\n  icon?: React.ReactElement<any>;\n\n  /**\n   * Переводит кнопку в состояние загрузки.\n   */\n  loading?: boolean;\n\n  /**\n   * Сужает кнопку.\n   */\n  narrow?: boolean;\n\n  /**\n   * HTML-событие `onblur`.\n   */\n  onBlur?: React.FocusEventHandler<HTMLButtonElement>;\n\n  /**\n   * HTML-событие `onclick`.\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n\n  /**\n   * HTML-событие `onfocus`.\n   */\n  onFocus?: React.FocusEventHandler<HTMLButtonElement>;\n\n  /**\n   * HTML-событие `keydown`.\n   */\n  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n\n  /**\n   * HTML-событие `onmouseenter`.\n   */\n  onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;\n\n  /**\n   * HTML-событие `mouseleave`.\n   */\n  onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;\n\n  /**\n   * HTML-событие `onmouseover`.\n   */\n  onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;\n\n  /**\n   * Задаёт размер кнопки.\n   *\n   * **Допустимые значения**: `\"small\"`, `\"medium\"`, `\"large\"`.\n   */\n  size?: ButtonSize;\n\n  /**\n   * HTML-атрибут `type`.\n   */\n  type?: ButtonType;\n\n  /**\n   * HTML-атрибут `title`.\n   */\n  title?: string;\n\n  /**\n   * Стиль кнопки.\n   *\n   * **Допустимые значения**: `\"default\"`, `\"primary\"`, `\"success\"`, `\"danger\"`, `\"pay\"`, `\"link\"`.\n   */\n  use?: ButtonUse;\n\n  /** @ignore */\n  visuallyFocused?: boolean;\n\n  /**\n   * Состояние валидации при предупреждении.\n   */\n  warning?: boolean;\n\n  /**\n   * CSS-свойство `width`.\n   */\n  width?: number | string;\n}\n\nexport interface ButtonState {\n  focusedByTab: boolean;\n}\n\nexport const ButtonDataTids = {\n  root: 'Button__root',\n} as const;\n\ntype DefaultProps = Required<Pick<ButtonProps, 'use' | 'size' | 'type'>>;\n\n@rootNode\nexport class Button extends React.Component<ButtonProps, ButtonState> {\n  public static __KONTUR_REACT_UI__ = 'Button';\n  public static __BUTTON__ = true;\n\n  public static defaultProps: DefaultProps = {\n    use: 'default',\n    size: 'small',\n    type: 'button',\n  };\n\n  private getProps = createPropsGetter(Button.defaultProps);\n\n  public state = {\n    focusedByTab: false,\n  };\n\n  private theme!: Theme;\n  private node: HTMLButtonElement | null = null;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    if (this.props.autoFocus) {\n      keyListener.isTabPressed = true;\n      this.focus();\n    }\n  }\n\n  public static getDerivedStateFromProps(props: ButtonProps) {\n    if (props.loading || props.disabled) {\n      return { focusedByTab: false };\n    }\n    return null;\n  }\n\n  /**\n   * @public\n   */\n  public focus() {\n    this.node?.focus();\n  }\n\n  /**\n   * @public\n   */\n  public blur() {\n    this.node?.blur();\n  }\n\n  public render(): JSX.Element {\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 {\n      corners,\n      active,\n      disabled,\n      borderless,\n      checked,\n      error,\n      warning,\n      loading,\n      arrow,\n      narrow,\n      icon,\n      _noPadding,\n      _noRightPadding,\n      visuallyFocused,\n      align,\n      disableFocus,\n      onMouseEnter,\n      onMouseLeave,\n      onMouseOver,\n      onKeyDown,\n      onClick,\n      width,\n      children,\n    } = this.props;\n    const { use, type } = this.getProps();\n    const sizeClass = this.getSizeClassName();\n\n    const isFocused = this.state.focusedByTab || visuallyFocused;\n    const isLink = use === 'link';\n    const rootProps = {\n      // By default the type attribute is 'submit'. IE8 will fire a click event\n      // on this button if somewhere on the page user presses Enter while some\n      // input is focused. So we set type to 'button' by default.\n      type,\n      className: cx({\n        [styles.root(this.theme)]: true,\n        [styles[use](this.theme)]: true,\n        [activeStyles[use](this.theme)]: active,\n        [sizeClass]: true,\n        [styles.focus(this.theme)]: isFocused,\n        [styles.checked(this.theme)]: checked,\n        [styles.checkedFocused(this.theme)]: checked && isFocused,\n        [styles.disabled(this.theme)]: disabled || loading,\n        [styles.checkedDisabled(this.theme)]: checked && disabled,\n        [styles.borderless()]: borderless && !disabled && !loading && !checked && !isFocused && !active,\n        [styles.narrow()]: narrow,\n        [styles.noPadding()]: _noPadding,\n        [styles.noRightPadding()]: _noRightPadding,\n      }),\n      style: {\n        textAlign: align,\n        ...corners,\n      },\n      disabled: disabled || loading,\n      onClick,\n      onFocus: this.handleFocus,\n      onBlur: this.handleBlur,\n      onKeyDown,\n      onMouseEnter,\n      onMouseLeave,\n      onMouseOver,\n      tabIndex: disableFocus ? -1 : 0,\n      title: this.props.title,\n    };\n\n    const wrapProps = {\n      className: cx({\n        [styles.wrap(this.theme)]: true,\n        [styles.wrapArrow()]: arrow === true,\n        [styles.wrapArrowLeft()]: arrow === 'left',\n        [this.getSizeWrapClassName()]: true,\n      }),\n      style: {\n        width,\n      },\n    };\n\n    const innerShadowNode = <div className={globalClasses.innerShadow} />;\n\n    let outlineNode = null;\n    if (!isFocused || isLink) {\n      outlineNode = (\n        <div\n          className={cx(styles.outline(), {\n            [styles.outlineWarning(this.theme)]: warning,\n            [styles.outlineError(this.theme)]: error,\n            [styles.outlineLink()]: isLink,\n            [styles.outlineLinkWarning(this.theme)]: isLink && warning,\n            [styles.outlineLinkError(this.theme)]: isLink && error,\n          })}\n        />\n      );\n    }\n\n    let loadingNode = null;\n    if (loading && !icon) {\n      loadingNode = <div className={styles.loading()}>{this.getLoadingSpinner()}</div>;\n    }\n\n    let iconNode = null;\n    if (icon) {\n      iconNode = (\n        <span\n          className={cx(styles.icon(), this.getSizeIconClassName(), {\n            [styles.iconNoRightMargin()]: !children,\n            [styles.iconLink(this.theme)]: isLink,\n          })}\n        >\n          {loading ? this.getLoadingSpinner() : icon}\n        </span>\n      );\n    }\n\n    let arrowNode = null;\n    if (arrow) {\n      arrowNode = (\n        <div\n          className={cx({\n            [styles.arrow()]: true,\n            [styles.arrowWarning(this.theme)]: !checked && warning,\n            [styles.arrowError(this.theme)]: !checked && error,\n            [styles.arrowFocus(this.theme)]: !checked && isFocused,\n            [styles.arrowLeft()]: arrow === 'left',\n          })}\n        >\n          <div className={cx(globalClasses.arrowHelper, globalClasses.arrowHelperTop)} />\n          <div className={cx(globalClasses.arrowHelper, globalClasses.arrowHelperBottom)} />\n        </div>\n      );\n    }\n\n    // Force disable all props and features, that cannot be use with Link\n    if (isLink) {\n      rootProps.className = cx({\n        [styles.root(this.theme)]: true,\n        [sizeClass]: true,\n        [styles.link(this.theme)]: true,\n        [styles.linkFocus(this.theme)]: isFocused,\n        [styles.linkDisabled(this.theme)]: disabled || loading,\n      });\n      Object.assign(wrapProps, {\n        className: cx(styles.wrap(this.theme), styles.wrapLink()),\n        style: { width: wrapProps.style.width },\n      });\n      rootProps.style.textAlign = undefined;\n      arrowNode = null;\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <span {...wrapProps}>\n          <button data-tid={ButtonDataTids.root} ref={this._ref} {...rootProps}>\n            {innerShadowNode}\n            {outlineNode}\n            {loadingNode}\n            {arrowNode}\n            <div\n              className={cx(styles.caption(), globalClasses.caption, {\n                [styles.captionTranslated()]: active || checked,\n                [styles.captionLink()]: isLink,\n                [styles.captionDisabled()]: !checked && disabled,\n              })}\n            >\n              {iconNode}\n              <span className={cx({ [styles.visibilityHidden()]: !!loadingNode })}>{children}</span>\n            </div>\n          </button>\n        </span>\n      </CommonWrapper>\n    );\n  }\n\n  private getLoadingSpinner() {\n    return <Spinner caption={null} dimmed type=\"mini\" />;\n  }\n\n  private getSizeClassName() {\n    switch (this.getProps().size) {\n      case 'large':\n        return cx(styles.sizeLarge(this.theme), { [styles.sizeLargeIE11(this.theme)]: isIE11 || isEdge });\n      case 'medium':\n        return cx(styles.sizeMedium(this.theme), { [styles.sizeMediumIE11(this.theme)]: isIE11 || isEdge });\n      case 'small':\n      default:\n        return cx(styles.sizeSmall(this.theme), { [styles.sizeSmallIE11(this.theme)]: isIE11 || isEdge });\n    }\n  }\n\n  private getSizeIconClassName() {\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.iconLarge(this.theme);\n      case 'medium':\n        return styles.iconMedium(this.theme);\n      case 'small':\n      default:\n        return styles.iconSmall(this.theme);\n    }\n  }\n\n  private getSizeWrapClassName() {\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.wrapLarge(this.theme);\n      case 'medium':\n        return styles.wrapMedium(this.theme);\n      case 'small':\n      default:\n        return styles.wrapSmall(this.theme);\n    }\n  }\n\n  private handleFocus = (e: React.FocusEvent<HTMLButtonElement>) => {\n    if (!this.props.disabled && !this.props.disableFocus) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      requestAnimationFrame(() => {\n        if (keyListener.isTabPressed) {\n          this.setState({ focusedByTab: true });\n        }\n      });\n      this.props.onFocus?.(e);\n    }\n  };\n\n  private handleBlur = (e: React.FocusEvent<HTMLButtonElement>) => {\n    this.setState({ focusedByTab: false });\n    if (!this.props.disabled && !this.props.disableFocus) {\n      this.props.onBlur?.(e);\n    }\n  };\n\n  private _ref = (node: HTMLButtonElement | null) => {\n    this.node = node;\n  };\n}\n\nexport const isButton = isReactUIComponent<ButtonProps>('Button');\n"]}

package/cjs/components/Button/Button.md

@@ -1,92 +1,104 @@
-Button example
-
-```jsx harmony
-import OkIcon from '@skbkontur/react-icons/Ok';
-import { Button } from '@skbkontur/react-ui';
-
-<Button icon={<OkIcon />}>Ok</Button>;
-```
-
-Button has different use styles
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-<Gapped>
-  <Button use="default">Default</Button>
-  <Button use="primary">Primary</Button>
-  <Button use="success">Success</Button>
-  <Button use="danger">Danger</Button>
-  <Button use="pay">Pay</Button>
-  <Button use="link">Link</Button>
-</Gapped>;
-```
-
-Button can have different sizes
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-<Gapped>
-  <Button size="small">Small</Button>
-  <Button size="medium">Medium</Button>
-  <Button size="large">Large</Button>
-</Gapped>;
-```
-
-Кнопки-стрелки
-
-```jsx harmony
-import { Gapped, Button } from '@skbkontur/react-ui';
-
-<Gapped gap={25}>
-  <Gapped gap={5}>
-    <Button arrow="left" size="medium">
-      Назад
-    </Button>
-    <Button arrow size="medium">
-      Далее
-    </Button>
-  </Gapped>
-  <Gapped gap={5}>
-    <Button arrow="left" size="large">
-      Назад
-    </Button>
-    <Button arrow size="large">
-      Далее
-    </Button>
-  </Gapped>
-</Gapped>;
-```
-
-Кнопка в сочетании со спиннером
-
-```jsx harmony
-import OkIcon from '@skbkontur/react-icons/Ok';
-import { Button, Spinner } from '@skbkontur/react-ui';
-
-const [loading, setLoading] = React.useState(false);
-const [success, setSuccess] = React.useState(false);
-
-const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
-
-const handleLoadingStart = () => {
-  delay(2000)()
-    .then(() => {
-      setLoading(false);
-      setSuccess(true);
-    })
-    .then(delay(1000))
-    .then(() => setSuccess(false));
-};
-
-const handleClick = () => {
-  setLoading(true);
-  setSuccess(false);
-  handleLoadingStart();
-};
-
-<Button width={150} onClick={handleClick} disabled={loading}>
-  {loading ? <Spinner type="mini" caption={null} /> : success ? <OkIcon /> : 'Сохранить'}
-</Button>;
-```
+Базовый пример кнопки.
+
+```jsx harmony
+import { Button } from '@skbkontur/react-ui';
+
+<Button>Создать отчёт</Button>;
+```
+
+У кнопки есть различные стили.
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped>
+  <Button use="default">Default</Button>
+  <Button use="primary">Primary</Button>
+  <Button use="success">Success</Button>
+  <Button use="danger">Danger</Button>
+  <Button use="pay">Pay</Button>
+  <Button use="link">Link</Button>
+</Gapped>;
+```
+
+Пример кнопки с иконкой.
+
+```jsx harmony
+import PrintIcon from '@skbkontur/react-icons/Print';
+import { Button } from '@skbkontur/react-ui';
+
+<Button icon={<PrintIcon />}>Напечатать</Button>;
+```
+
+У кнопки есть 3 стандартных размера.
+
+```jsx harmony
+<div
+  style={{
+    display: "flex",
+    alignItems: "end",
+    justifyContent: "space-between",
+    width: "330px"
+  }}>
+  <Button size="small">Маленькая</Button>
+  <Button size="medium">Средняя</Button>
+  <Button size="large">Большая</Button>
+</div>
+```
+
+Кнопки в виде стрелок.
+
+```jsx harmony
+import { Gapped, Button } from '@skbkontur/react-ui';
+
+<Gapped gap={25}>
+  <Gapped gap={5}>
+    <Button arrow="left" size="medium">
+      Назад
+    </Button>
+    <Button arrow size="medium">
+      Далее
+    </Button>
+  </Gapped>
+</Gapped>;
+```
+
+Кнопка в состоянии загрузки.
+
+**Поведение:**
+
+Кнопка на время нахождения в состоянии загрузки отключается.
+
+Если в кнопке есть иконка, на время загрузки иконка заменяется на спиннер, если иконки нет - весь контент кнопки заменяется на спиннер.
+
+```jsx harmony
+import { Button, Gapped } from '@skbkontur/react-ui';
+import OkIcon from '@skbkontur/react-icons/Ok';
+import BookmarkIcon from '@skbkontur/react-icons/Bookmark';
+
+const [loading, setLoading] = React.useState(false);
+
+const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
+
+const handleLoadingStart = () => {
+  delay(2000)()
+    .then(() => {
+      setLoading(false);
+    })
+};
+
+const handleClick = () => {
+  setLoading(true);
+  handleLoadingStart();
+};
+
+<Gapped>
+  <Button width={150} onClick={handleClick} loading={loading}>
+    Сохранить
+  </Button>
+  <Button icon={<BookmarkIcon />} width={150} onClick={handleClick} loading={loading}>
+    Сохранить
+  </Button>
+</Gapped>
+
+```

package/cjs/components/Button/Button.mixins.d.ts

@@ -1,5 +1,6 @@
-export declare const buttonUseMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, color: string, borderColor: string, borderBottomColor: string, borderWidth: string, selectorChecked: string, selectorArrow: string) => string;
-export declare const buttonHoverMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, borderColor: string, borderBottomColor: string, borderWidth: string, selectorArrow: string) => string;
-export declare const buttonActiveMixin: (btnBackground: string, btnShadow: string, borderColor: string, borderTopColor: string, borderWidth: string, selectorActive: string, selectorArrow: string, selectorArrowTop: string, arrowBgImage: string) => string;
-export declare const buttonSizeMixin: (fontSize: string, height: string, lineHeight: string, paddingX: string, paddingY: string, fontFamilyCompensation: string, selectorLink: string, selectorFallback: string) => string;
-export declare const arrowOutlineMixin: (insetWidth: string, outlineColor: string, outlineWidth: string, insetColor: string, selectorArrow: string, selectorArrowTop: string, selectorArrowBottom: string) => string;
+export declare const buttonUseMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, color: string, borderColor: string, borderBottomColor: string, borderWidth: string) => string;
+export declare const buttonHoverMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, borderColor: string, borderBottomColor: string, borderWidth: string) => string;
+export declare const buttonActiveMixin: (btnBackground: string, btnShadow: string, borderColor: string, borderTopColor: string, borderWidth: string, arrowBgImage: string) => string;
+export declare const buttonSizeMixin: (fontSize: string, lineHeight: string, paddingX: string, paddingY: string, fontFamilyCompensation: string) => string;
+export declare const buttonSizeMixinIE11: (fontSize: string, paddingX: string, paddingY: string, fontFamilyCompensation: string) => string;
+export declare const arrowOutlineMixin: (insetWidth: string, outlineColor: string, outlineWidth: string, insetColor: string) => string;

package/cjs/components/Button/Button.mixins.js

@@ -1,5 +1,7 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.arrowOutlineMixin = exports.buttonSizeMixin = exports.buttonActiveMixin = exports.buttonHoverMixin = exports.buttonUseMixin = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
-var _DimensionFunctions = require("../../lib/styles/DimensionFunctions");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.buttonUseMixin = exports.buttonSizeMixinIE11 = exports.buttonSizeMixin = exports.buttonHoverMixin = exports.buttonActiveMixin = exports.arrowOutlineMixin = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
+var _DimensionFunctions = require("../../lib/styles/DimensionFunctions");
+
+var _Button = require("./Button.styles");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 var getBtnPadding = function getBtnPadding(
 fontSize,
@@ -19,7 +21,7 @@ additionalOffset)
   if (fontSize === '16px' && offset) {var _shiftUp =
     shiftUp(paddingTop, paddingBottom, offset);paddingTop = _shiftUp[0];paddingBottom = _shiftUp[1];
   }
-  if (additionalOffset) {var _shiftUp2 =
+  if (additionalOffset && offset) {var _shiftUp2 =
     shiftUp(paddingTop, paddingBottom, additionalOffset);paddingTop = _shiftUp2[0];paddingBottom = _shiftUp2[1];
   }
 
@@ -33,19 +35,16 @@ btnBackgroundEnd,
 color,
 borderColor,
 borderBottomColor,
-borderWidth,
-selectorChecked,
-selectorArrow)
+borderWidth)
 {
   var hasGradient = btnBackgroundStart !== btnBackgroundEnd;
-  return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n    background-color: ", ";\n    background-image: ", ";\n    color: ", ";\n    border-color: ", ";\n    border-bottom-color: ", ";\n\n    &:not(", ") ", " {\n      box-shadow: ", " 0 0 0 ", ";\n    }\n  "])),
+  return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n    background-color: ", ";\n    background-image: ", ";\n    color: ", ";\n    box-shadow: 0 0 0 ", " ", "", ";\n\n    .", " {\n      box-shadow: ", " 0 0 0 ", ";\n    }\n  "])),
   hasGradient ? "initial" : btnBackground,
   hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none",
   color,
-  borderColor,
-  borderBottomColor,
+  borderWidth, borderColor, borderBottomColor ? ", 0 " + borderWidth + " 0 0 " + borderBottomColor : "",
 
-  selectorChecked, selectorArrow,
+  _Button.globalClasses.arrowHelper,
   borderWidth, borderColor);
 
 
@@ -57,18 +56,16 @@ btnBackgroundStart,
 btnBackgroundEnd,
 borderColor,
 borderBottomColor,
-borderWidth,
-selectorArrow)
+borderWidth)
 {
   var hasGradient = btnBackgroundStart !== btnBackgroundEnd;
-  return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n    &:hover {\n      background-color: ", ";\n      background-image: ", ";\n      border-color: ", ";\n      border-bottom-color: ", ";\n\n      ", " {\n        box-shadow: ", " 0 0 ", ";\n      }\n    }\n  "])),
+  return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n    &:hover:enabled {\n      background-color: ", ";\n      background-image: ", ";\n      box-shadow: 0 0 0 ", " ", "", ";\n\n      .", " {\n        box-shadow: ", " 0 0 ", ";\n      }\n    }\n  "])),
 
   hasGradient ? "initial" : btnBackground,
   hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none",
-  borderColor,
-  borderBottomColor,
+  borderWidth, borderColor, borderBottomColor ? ", 0 " + borderWidth + " 0 0 " + borderBottomColor : "",
 
-  selectorArrow,
+  _Button.globalClasses.arrowHelper,
   borderWidth, borderColor);
 
 
@@ -81,73 +78,67 @@ btnShadow,
 borderColor,
 borderTopColor,
 borderWidth,
-selectorActive,
-selectorArrow,
-selectorArrowTop,
 arrowBgImage)
 {
-  return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n    &:active,\n    &", " {\n      background-image: none;\n      background-color: ", ";\n      box-shadow: ", ";\n      border-color: ", ";\n      border-top-color: ", ";\n\n      ", " {\n        box-shadow: ", " 0 0 ", ";\n\n        &", " {\n          background-image: ", " !important;\n        }\n      }\n    }\n  "])),
-
-  selectorActive,
+  return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n    background-image: none;\n    background-color: ", ";\n    box-shadow: 0 0 0 ", " ", "", ";\n\n    .", " {\n      box-shadow: ", ";\n    }\n\n    .", " {\n      box-shadow: ", " 0 0 ", ";\n\n      &.", " {\n        background-image: ", ";\n      }\n    }\n  "])),
 
   btnBackground,
+  borderWidth, borderColor, borderTopColor ? ", 0 -" + borderWidth + " 0 0 " + borderTopColor : "",
+
+  _Button.globalClasses.innerShadow,
   btnShadow,
-  borderColor,
-  borderTopColor,
 
-  selectorArrow,
+
+  _Button.globalClasses.arrowHelper,
   borderWidth, borderColor,
 
-  selectorArrowTop,
+  _Button.globalClasses.arrowHelperTop,
   arrowBgImage);
 
 
 
-
 };exports.buttonActiveMixin = buttonActiveMixin;
 
 var buttonSizeMixin = function buttonSizeMixin(
 fontSize,
-height,
 lineHeight,
 paddingX,
 paddingY,
-fontFamilyCompensation,
-selectorLink,
-selectorFallback)
+fontFamilyCompensation)
 {
-  return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n    font-size: ", " !important;\n\n    &:not(", ") {\n      box-sizing: border-box;\n      height: ", ";\n      padding: ", ";\n      line-height: ", ";\n\n      &", " {\n        padding: ", ";\n      }\n    }\n  "])),
+  return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n    font-size: ", ";\n    box-sizing: border-box;\n    padding: ", ";\n    line-height: ", ";\n  "])),
   fontSize,
 
-  selectorLink,
-
-  height,
   getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation),
-  lineHeight,
+  lineHeight);
 
-  selectorFallback,
-  getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation, 1));
+};exports.buttonSizeMixin = buttonSizeMixin;
 
+var buttonSizeMixinIE11 = function buttonSizeMixinIE11(
+fontSize,
+paddingX,
+paddingY,
+fontFamilyCompensation)
+{
+  return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n    padding: ", ";\n    line-height: normal;\n  "])),
+  getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation, 1));
 
 
-};exports.buttonSizeMixin = buttonSizeMixin;
+};exports.buttonSizeMixinIE11 = buttonSizeMixinIE11;
 
 var arrowOutlineMixin = function arrowOutlineMixin(
 insetWidth,
 outlineColor,
 outlineWidth,
-insetColor,
-selectorArrow,
-selectorArrowTop,
-selectorArrowBottom)
+insetColor)
 {
-  return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n    ", " {\n      &", " {\n        box-shadow: inset -", " ", " 0 0 ", ", ", " 0 0 0 ", " !important;\n      }\n\n      &", " {\n        box-shadow: inset -", " -", " 0 0 ", ", ", " 0 0 0 ", " !important;\n      }\n\n      // don't hide inner outline\n      // and keep the middle-line fix\n      &:before {\n        top: ", ";\n        right: ", ";\n        left: ", ";\n      }\n      &", ":before {\n        bottom: ", ";\n      }\n    }\n  "])),
-  selectorArrow,
-  selectorArrowTop,
+  return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n    .", " {\n      &.", " {\n        box-shadow: inset -", " ", " 0 0 ", ", ", " 0 0 0 ", " !important; // override :active styles\n      }\n\n      &.", " {\n        box-shadow: inset -", " -", " 0 0 ", ", ", " 0 0 0 ", " !important; // override :active styles\n      }\n\n      // don't hide inner outline\n      // and keep the middle-line fix\n      &:before {\n        top: ", ";\n        right: ", ";\n        left: ", ";\n      }\n      &.", ":before {\n        bottom: ", ";\n      }\n    }\n  "])),
+  _Button.globalClasses.arrowHelper,
+  _Button.globalClasses.arrowHelperTop,
   insetWidth, insetWidth, insetColor, outlineWidth, outlineColor,
 
 
-  selectorArrowBottom,
+  _Button.globalClasses.arrowHelperBottom,
   insetWidth, insetWidth, insetColor, outlineWidth, outlineColor,
 
 
@@ -158,7 +149,7 @@ selectorArrowBottom)
   insetWidth,
   insetWidth,
 
-  selectorArrowBottom,
+  _Button.globalClasses.arrowHelperBottom,
   insetWidth);
 
 

package/cjs/components/Button/Button.mixins.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Button.mixins.ts"],"names":["getBtnPadding","fontSize","paddingY","paddingX","fontFamilyCompensation","additionalOffset","paddingTop","paddingBottom","offset","parseInt","shiftUp","top","bottom","buttonUseMixin","btnBackground","btnBackgroundStart","btnBackgroundEnd","color","borderColor","borderBottomColor","borderWidth","selectorChecked","selectorArrow","hasGradient","css","buttonHoverMixin","buttonActiveMixin","btnShadow","borderTopColor","selectorActive","selectorArrowTop","arrowBgImage","buttonSizeMixin","height","lineHeight","selectorLink","selectorFallback","arrowOutlineMixin","insetWidth","outlineColor","outlineWidth","insetColor","selectorArrowBottom"],"mappings":"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","sourcesContent":["import { css } from '../../lib/theming/Emotion';\r\nimport { shift } from '../../lib/styles/DimensionFunctions';\r\n\r\nconst getBtnPadding = (\r\n  fontSize: string,\r\n  paddingY: string,\r\n  paddingX: string,\r\n  fontFamilyCompensation: string,\r\n  additionalOffset = 0,\r\n): string => {\r\n  let paddingTop = paddingY;\r\n  let paddingBottom = paddingY;\r\n  const offset = parseInt(fontFamilyCompensation) || 0;\r\n\r\n  const shiftUp = (top: string, bottom: string, offset: number) => {\r\n    return [shift(top, `${-offset}`), shift(bottom, `${offset}`)];\r\n  };\r\n\r\n  if (fontSize === '16px' && offset) {\r\n    [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, offset);\r\n  }\r\n  if (additionalOffset) {\r\n    [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, additionalOffset);\r\n  }\r\n\r\n  return `${paddingTop} ${paddingX} ${paddingBottom}`;\r\n};\r\n\r\nexport const buttonUseMixin = (\r\n  btnBackground: string,\r\n  btnBackgroundStart: string,\r\n  btnBackgroundEnd: string,\r\n  color: string,\r\n  borderColor: string,\r\n  borderBottomColor: string,\r\n  borderWidth: string,\r\n  selectorChecked: string,\r\n  selectorArrow: string,\r\n) => {\r\n  const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\r\n  return css`\r\n    background-color: ${hasGradient ? `initial` : btnBackground};\r\n    background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\r\n    color: ${color};\r\n    border-color: ${borderColor};\r\n    border-bottom-color: ${borderBottomColor};\r\n\r\n    &:not(${selectorChecked}) ${selectorArrow} {\r\n      box-shadow: ${borderWidth} 0 0 0 ${borderColor};\r\n    }\r\n  `;\r\n};\r\n\r\nexport const buttonHoverMixin = (\r\n  btnBackground: string,\r\n  btnBackgroundStart: string,\r\n  btnBackgroundEnd: string,\r\n  borderColor: string,\r\n  borderBottomColor: string,\r\n  borderWidth: string,\r\n  selectorArrow: string,\r\n) => {\r\n  const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\r\n  return css`\r\n    &:hover {\r\n      background-color: ${hasGradient ? `initial` : btnBackground};\r\n      background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\r\n      border-color: ${borderColor};\r\n      border-bottom-color: ${borderBottomColor};\r\n\r\n      ${selectorArrow} {\r\n        box-shadow: ${borderWidth} 0 0 ${borderColor};\r\n      }\r\n    }\r\n  `;\r\n};\r\n\r\nexport const buttonActiveMixin = (\r\n  btnBackground: string,\r\n  btnShadow: string,\r\n  borderColor: string,\r\n  borderTopColor: string,\r\n  borderWidth: string,\r\n  selectorActive: string,\r\n  selectorArrow: string,\r\n  selectorArrowTop: string,\r\n  arrowBgImage: string,\r\n) => {\r\n  return css`\r\n    &:active,\r\n    &${selectorActive} {\r\n      background-image: none;\r\n      background-color: ${btnBackground};\r\n      box-shadow: ${btnShadow};\r\n      border-color: ${borderColor};\r\n      border-top-color: ${borderTopColor};\r\n\r\n      ${selectorArrow} {\r\n        box-shadow: ${borderWidth} 0 0 ${borderColor};\r\n\r\n        &${selectorArrowTop} {\r\n          background-image: ${arrowBgImage} !important;\r\n        }\r\n      }\r\n    }\r\n  `;\r\n};\r\n\r\nexport const buttonSizeMixin = (\r\n  fontSize: string,\r\n  height: string, // todo: remove, in IE broke screenshots without height\r\n  lineHeight: string,\r\n  paddingX: string,\r\n  paddingY: string,\r\n  fontFamilyCompensation: string,\r\n  selectorLink: string,\r\n  selectorFallback: string,\r\n) => {\r\n  return css`\r\n    font-size: ${fontSize} !important;\r\n\r\n    &:not(${selectorLink}) {\r\n      box-sizing: border-box;\r\n      height: ${height};\r\n      padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation)};\r\n      line-height: ${lineHeight};\r\n\r\n      &${selectorFallback} {\r\n        padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation, 1)};\r\n      }\r\n    }\r\n  `;\r\n};\r\n\r\nexport const arrowOutlineMixin = (\r\n  insetWidth: string,\r\n  outlineColor: string,\r\n  outlineWidth: string,\r\n  insetColor: string,\r\n  selectorArrow: string,\r\n  selectorArrowTop: string,\r\n  selectorArrowBottom: string,\r\n) => {\r\n  return css`\r\n    ${selectorArrow} {\r\n      &${selectorArrowTop} {\r\n        box-shadow: inset -${insetWidth} ${insetWidth} 0 0 ${insetColor}, ${outlineWidth} 0 0 0 ${outlineColor} !important;\r\n      }\r\n\r\n      &${selectorArrowBottom} {\r\n        box-shadow: inset -${insetWidth} -${insetWidth} 0 0 ${insetColor}, ${outlineWidth} 0 0 0 ${outlineColor} !important;\r\n      }\r\n\r\n      // don't hide inner outline\r\n      // and keep the middle-line fix\r\n      &:before {\r\n        top: ${insetWidth};\r\n        right: ${insetWidth};\r\n        left: ${insetWidth};\r\n      }\r\n      &${selectorArrowBottom}:before {\r\n        bottom: ${insetWidth};\r\n      }\r\n    }\r\n  `;\r\n};\r\n"]}
+{"version":3,"sources":["Button.mixins.ts"],"names":["getBtnPadding","fontSize","paddingY","paddingX","fontFamilyCompensation","additionalOffset","paddingTop","paddingBottom","offset","parseInt","shiftUp","top","bottom","buttonUseMixin","btnBackground","btnBackgroundStart","btnBackgroundEnd","color","borderColor","borderBottomColor","borderWidth","hasGradient","css","globalClasses","arrowHelper","buttonHoverMixin","buttonActiveMixin","btnShadow","borderTopColor","arrowBgImage","innerShadow","arrowHelperTop","buttonSizeMixin","lineHeight","buttonSizeMixinIE11","arrowOutlineMixin","insetWidth","outlineColor","outlineWidth","insetColor","arrowHelperBottom"],"mappings":"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","sourcesContent":["import { css } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\n\nimport { globalClasses } from './Button.styles';\n\nconst getBtnPadding = (\n  fontSize: string,\n  paddingY: string,\n  paddingX: string,\n  fontFamilyCompensation: string,\n  additionalOffset = 0,\n): string => {\n  let paddingTop = paddingY;\n  let paddingBottom = paddingY;\n  const offset = parseInt(fontFamilyCompensation) || 0;\n\n  const shiftUp = (top: string, bottom: string, offset: number) => {\n    return [shift(top, `${-offset}`), shift(bottom, `${offset}`)];\n  };\n\n  if (fontSize === '16px' && offset) {\n    [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, offset);\n  }\n  if (additionalOffset && offset) {\n    [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, additionalOffset);\n  }\n\n  return `${paddingTop} ${paddingX} ${paddingBottom}`;\n};\n\nexport const buttonUseMixin = (\n  btnBackground: string,\n  btnBackgroundStart: string,\n  btnBackgroundEnd: string,\n  color: string,\n  borderColor: string,\n  borderBottomColor: string,\n  borderWidth: string,\n) => {\n  const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n  return css`\n    background-color: ${hasGradient ? `initial` : btnBackground};\n    background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\n    color: ${color};\n    box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderBottomColor ? `, 0 ${borderWidth} 0 0 ${borderBottomColor}` : ``};\n\n    .${globalClasses.arrowHelper} {\n      box-shadow: ${borderWidth} 0 0 0 ${borderColor};\n    }\n  `;\n};\n\nexport const buttonHoverMixin = (\n  btnBackground: string,\n  btnBackgroundStart: string,\n  btnBackgroundEnd: string,\n  borderColor: string,\n  borderBottomColor: string,\n  borderWidth: string,\n) => {\n  const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n  return css`\n    &:hover:enabled {\n      background-color: ${hasGradient ? `initial` : btnBackground};\n      background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\n      box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderBottomColor ? `, 0 ${borderWidth} 0 0 ${borderBottomColor}` : ``};\n\n      .${globalClasses.arrowHelper} {\n        box-shadow: ${borderWidth} 0 0 ${borderColor};\n      }\n    }\n  `;\n};\n\nexport const buttonActiveMixin = (\n  btnBackground: string,\n  btnShadow: string,\n  borderColor: string,\n  borderTopColor: string,\n  borderWidth: string,\n  arrowBgImage: string,\n) => {\n  return css`\n    background-image: none;\n    background-color: ${btnBackground};\n    box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderTopColor ? `, 0 -${borderWidth} 0 0 ${borderTopColor}` : ``};\n\n    .${globalClasses.innerShadow} {\n      box-shadow: ${btnShadow};\n    }\n\n    .${globalClasses.arrowHelper} {\n      box-shadow: ${borderWidth} 0 0 ${borderColor};\n\n      &.${globalClasses.arrowHelperTop} {\n        background-image: ${arrowBgImage};\n      }\n    }\n  `;\n};\n\nexport const buttonSizeMixin = (\n  fontSize: string,\n  lineHeight: string,\n  paddingX: string,\n  paddingY: string,\n  fontFamilyCompensation: string,\n) => {\n  return css`\n    font-size: ${fontSize};\n    box-sizing: border-box;\n    padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation)};\n    line-height: ${lineHeight};\n  `;\n};\n\nexport const buttonSizeMixinIE11 = (\n  fontSize: string,\n  paddingX: string,\n  paddingY: string,\n  fontFamilyCompensation: string,\n) => {\n  return css`\n    padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation, 1)};\n    line-height: normal;\n  `;\n};\n\nexport const arrowOutlineMixin = (\n  insetWidth: string,\n  outlineColor: string,\n  outlineWidth: string,\n  insetColor: string,\n) => {\n  return css`\n    .${globalClasses.arrowHelper} {\n      &.${globalClasses.arrowHelperTop} {\n        box-shadow: inset -${insetWidth} ${insetWidth} 0 0 ${insetColor}, ${outlineWidth} 0 0 0 ${outlineColor} !important; // override :active styles\n      }\n\n      &.${globalClasses.arrowHelperBottom} {\n        box-shadow: inset -${insetWidth} -${insetWidth} 0 0 ${insetColor}, ${outlineWidth} 0 0 0 ${outlineColor} !important; // override :active styles\n      }\n\n      // don't hide inner outline\n      // and keep the middle-line fix\n      &:before {\n        top: ${insetWidth};\n        right: ${insetWidth};\n        left: ${insetWidth};\n      }\n      &.${globalClasses.arrowHelperBottom}:before {\n        bottom: ${insetWidth};\n      }\n    }\n  `;\n};\n"]}