@skbkontur/react-ui 4.2.1 → 4.3.1

package/cjs/internal/Popup/PopupHelper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["PopupHelper.tsx"],"names":["getPositionObject","position","x","split","direction","align","getElementAbsoluteRect","element","rect","_getElementRelativeRect","convertRectToAbsolute","isAbsoluteRectFullyVisible","coordinates","popupRect","windowRelativeRect","_getWindowRelativeRect","windowAbsoluteRect","absoluteRect","top","left","height","width","_rectContainsRect","canBecomeFullyVisible","positionName","availableScrollDistances","right","bottom","_getViewProperty","clientWidth","window","innerWidth","clientHeight","innerHeight","offset","_getAbsoluteOffset","scrollTop","pageYOffset","scrollLeft","pageXOffset","clientTop","clientLeft","outerRect","innerRect","getProperty","views","document","documentElement","body","map","find","Boolean","PopupHelper","isFullyVisible"],"mappings":"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","sourcesContent":["import { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { PopupPositionsType } from './Popup';\n\nexport interface Rect {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n}\n\nexport interface Offset {\n  top: number;\n  left: number;\n}\n\nexport interface PositionObject {\n  direction: string;\n  align: string;\n}\n\nfunction getPositionObject(position: string): PositionObject {\n  const x = position.split(' ');\n\n  return {\n    direction: x[0],\n    align: x[1],\n  };\n}\n\nfunction getElementAbsoluteRect(element: HTMLElement): Rect {\n  const rect = _getElementRelativeRect(element);\n  return convertRectToAbsolute(rect);\n}\n\nfunction isAbsoluteRectFullyVisible(coordinates: Offset, popupRect: Rect): boolean {\n  const windowRelativeRect = _getWindowRelativeRect();\n  const windowAbsoluteRect = convertRectToAbsolute(windowRelativeRect);\n  const absoluteRect = {\n    top: coordinates.top,\n    left: coordinates.left,\n    height: popupRect.height,\n    width: popupRect.width,\n  };\n\n  return _rectContainsRect(windowAbsoluteRect, absoluteRect);\n}\n\n// Can become fully visible by scrolling into viewport\nfunction canBecomeFullyVisible(positionName: PopupPositionsType, coordinates: Offset) {\n  const position = getPositionObject(positionName);\n\n  if (position.direction === 'top') {\n    const availableScrollDistances = convertRectToAbsolute(_getWindowRelativeRect());\n    return coordinates.top + availableScrollDistances.top >= 0;\n  }\n\n  if (position.direction === 'left') {\n    const availableScrollDistances = convertRectToAbsolute(_getWindowRelativeRect());\n    return coordinates.left + availableScrollDistances.left >= 0;\n  }\n\n  // NOTE: for bottom/right cases browser will always expand document size\n  return true;\n}\n\nfunction _getElementRelativeRect(element: HTMLElement) {\n  const rect = getDOMRect(element);\n\n  return {\n    top: rect.top,\n    left: rect.left,\n    width: rect.right - rect.left,\n    height: rect.bottom - rect.top,\n  };\n}\n\nfunction _getWindowRelativeRect(): Rect {\n  return {\n    top: 0,\n    left: 0,\n    width: _getViewProperty((x) => x.clientWidth) || window.innerWidth,\n    height: _getViewProperty((x) => x.clientHeight) || window.innerHeight,\n  };\n}\n\nfunction convertRectToAbsolute(rect: Rect): Rect {\n  const offset = _getAbsoluteOffset();\n\n  return {\n    top: rect.top + offset.top,\n    left: rect.left + offset.left,\n    width: rect.width,\n    height: rect.height,\n  };\n}\n\nfunction _getAbsoluteOffset(): Offset {\n  const scrollTop = window.pageYOffset || _getViewProperty((x) => x.scrollTop);\n  const scrollLeft = window.pageXOffset || _getViewProperty((x) => x.scrollLeft);\n\n  const clientTop = _getViewProperty((x) => x.clientTop);\n  const clientLeft = _getViewProperty((x) => x.clientLeft);\n\n  const top = scrollTop - clientTop;\n  const left = scrollLeft - clientLeft;\n\n  return {\n    top,\n    left,\n  };\n}\n\nfunction _rectContainsRect(outerRect: Rect, innerRect: Rect): boolean {\n  return (\n    innerRect.top > outerRect.top &&\n    innerRect.top + innerRect.height < outerRect.top + outerRect.height &&\n    innerRect.left > outerRect.left &&\n    innerRect.left + innerRect.width < outerRect.left + outerRect.width\n  );\n}\n\nfunction _getViewProperty(getProperty: (e: HTMLElement) => number): number {\n  const views = [document.documentElement, document.body];\n  return views.map((x) => x && getProperty(x)).find(Boolean) || 0;\n}\n\nexport const PopupHelper = {\n  getPositionObject,\n  getElementAbsoluteRect,\n  isFullyVisible: isAbsoluteRectFullyVisible,\n  canBecomeFullyVisible,\n};\n"]}
+{"version":3,"sources":["PopupHelper.tsx"],"names":["getPositionObject","position","x","split","direction","align","getElementAbsoluteRect","element","rect","_getElementRelativeRect","convertRectToAbsolute","isAbsoluteRectFullyVisible","coordinates","popupRect","windowRelativeRect","_getWindowRelativeRect","windowAbsoluteRect","absoluteRect","top","left","height","width","_rectContainsRect","canBecomeFullyVisible","positionName","availableScrollDistances","right","bottom","_getViewProperty","clientWidth","window","innerWidth","clientHeight","innerHeight","offset","_getAbsoluteOffset","scrollTop","pageYOffset","scrollLeft","pageXOffset","clientTop","clientLeft","outerRect","innerRect","getProperty","views","document","documentElement","body","map","find","Boolean","PopupHelper","isFullyVisible"],"mappings":"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","sourcesContent":["import { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { PopupPositionsType } from './Popup';\n\nexport interface Rect {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n}\n\nexport interface Offset {\n  top: number;\n  left: number;\n}\n\nexport interface PositionObject {\n  direction: string;\n  align: string;\n}\n\nfunction getPositionObject(position: string): PositionObject {\n  const x = position.split(' ');\n\n  return {\n    direction: x[0],\n    align: x[1],\n  };\n}\n\nfunction getElementAbsoluteRect(element: Element): Rect {\n  const rect = _getElementRelativeRect(element);\n  return convertRectToAbsolute(rect);\n}\n\nfunction isAbsoluteRectFullyVisible(coordinates: Offset, popupRect: Rect): boolean {\n  const windowRelativeRect = _getWindowRelativeRect();\n  const windowAbsoluteRect = convertRectToAbsolute(windowRelativeRect);\n  const absoluteRect = {\n    top: coordinates.top,\n    left: coordinates.left,\n    height: popupRect.height,\n    width: popupRect.width,\n  };\n\n  return _rectContainsRect(windowAbsoluteRect, absoluteRect);\n}\n\n// Can become fully visible by scrolling into viewport\nfunction canBecomeFullyVisible(positionName: PopupPositionsType, coordinates: Offset) {\n  const position = getPositionObject(positionName);\n\n  if (position.direction === 'top') {\n    const availableScrollDistances = convertRectToAbsolute(_getWindowRelativeRect());\n    return coordinates.top + availableScrollDistances.top >= 0;\n  }\n\n  if (position.direction === 'left') {\n    const availableScrollDistances = convertRectToAbsolute(_getWindowRelativeRect());\n    return coordinates.left + availableScrollDistances.left >= 0;\n  }\n\n  // NOTE: for bottom/right cases browser will always expand document size\n  return true;\n}\n\nfunction _getElementRelativeRect(element: Element) {\n  const rect = getDOMRect(element);\n\n  return {\n    top: rect.top,\n    left: rect.left,\n    width: rect.right - rect.left,\n    height: rect.bottom - rect.top,\n  };\n}\n\nfunction _getWindowRelativeRect(): Rect {\n  return {\n    top: 0,\n    left: 0,\n    width: _getViewProperty((x) => x.clientWidth) || window.innerWidth,\n    height: _getViewProperty((x) => x.clientHeight) || window.innerHeight,\n  };\n}\n\nfunction convertRectToAbsolute(rect: Rect): Rect {\n  const offset = _getAbsoluteOffset();\n\n  return {\n    top: rect.top + offset.top,\n    left: rect.left + offset.left,\n    width: rect.width,\n    height: rect.height,\n  };\n}\n\nfunction _getAbsoluteOffset(): Offset {\n  const scrollTop = window.pageYOffset || _getViewProperty((x) => x.scrollTop);\n  const scrollLeft = window.pageXOffset || _getViewProperty((x) => x.scrollLeft);\n\n  const clientTop = _getViewProperty((x) => x.clientTop);\n  const clientLeft = _getViewProperty((x) => x.clientLeft);\n\n  const top = scrollTop - clientTop;\n  const left = scrollLeft - clientLeft;\n\n  return {\n    top,\n    left,\n  };\n}\n\nfunction _rectContainsRect(outerRect: Rect, innerRect: Rect): boolean {\n  return (\n    innerRect.top > outerRect.top &&\n    innerRect.top + innerRect.height < outerRect.top + outerRect.height &&\n    innerRect.left > outerRect.left &&\n    innerRect.left + innerRect.width < outerRect.left + outerRect.width\n  );\n}\n\nfunction _getViewProperty(getProperty: (e: Element) => number): number {\n  const views = [document.documentElement, document.body];\n  return views.map((x) => x && getProperty(x)).find(Boolean) || 0;\n}\n\nexport const PopupHelper = {\n  getPositionObject,\n  getElementAbsoluteRect,\n  isFullyVisible: isAbsoluteRectFullyVisible,\n  canBecomeFullyVisible,\n};\n"]}

package/cjs/internal/Popup/PopupPin.d.ts

@@ -6,7 +6,7 @@ interface Props {
     borderColor: string;
     borderWidth: number;
     offset: number;
-    popupElement: Nullable<HTMLElement>;
+    popupElement: Nullable<Element>;
     popupPosition: string;
     size: number;
 }

package/cjs/internal/Popup/PopupPin.js.map

@@ -1 +1 @@
-{"version":3,"sources":["PopupPin.tsx"],"names":["borderStyles","position","borderStyle","borderTopColor","borderBottomColor","borderLeftColor","borderRightColor","PopupPin","render","props","popupElement","options","getPinOptions","PopupHelper","getElementAbsoluteRect","getPositionObject","popupPosition","size","offset","borderWidth","styleOuter","getOuterStyle","activeBorder","outerSize","borderColor","styleInner","getInnerStyle","backgroundColor","styleWrapper","getWrapperStyle","outerLeft","outerTop","PopupDataTids","popupPin","styles","wrapper","getPopupOppositeDirection","popupDirection","direction","TypeError","left","top","width","height","borderWitdth","popupRect","pinSize","pinOffset","bordersDelta","getPinLeftCoordinate","align","innerTop","innerLeft","getPinTopCoordinate","Error","pinHeight","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","string","number","any"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Nullable } from '../../typings/utility-types';\n\nimport { PopupHelper, PositionObject, Rect } from './PopupHelper';\nimport { styles } from './PopupPin.styles';\nimport { PopupDataTids } from './Popup';\n\nconst borderStyles = {\n  position: 'absolute',\n  borderStyle: 'solid',\n  borderTopColor: 'transparent',\n  borderBottomColor: 'transparent',\n  borderLeftColor: 'transparent',\n  borderRightColor: 'transparent',\n};\n\ninterface Props {\n  backgroundColor: string;\n  borderColor: string;\n  borderWidth: number;\n  offset: number;\n  popupElement: Nullable<HTMLElement>;\n  popupPosition: string;\n  size: number;\n}\n\nexport class PopupPin extends React.Component<Props> {\n  public static __KONTUR_REACT_UI__ = 'PopupPin';\n\n  public static propTypes = {\n    /**\n     * Цвет фон пина\n     */\n    backgroundColor: PropTypes.string,\n\n    /**\n     * Цвет границы пина\n     */\n    borderColor: PropTypes.string,\n\n    /**\n     * Ширина границы пина\n     */\n    borderWidth: PropTypes.number,\n\n    /**\n     * Смещение пина от края попапа. Край задаётся в пропе position вторым словом\n     */\n    offset: PropTypes.number,\n\n    /**\n     * Ссылка на попап\n     */\n    popupElement: PropTypes.any,\n\n    /**\n     * Позиция поапа, по которой будет вычеслено положение пина\n     */\n    popupPosition: PropTypes.string,\n\n    /**\n     * Сторона пина без учёта границы.\n     * Пин представляет собой равносторонний треугольник, высота от попапа\n     * до \"носика\" пина будет соответствовать формуле (size* √3)/2\n     */\n    size: PropTypes.number,\n  };\n\n  public render() {\n    if (!this.props.popupElement) {\n      return null;\n    }\n\n    const options = this.getPinOptions(\n      PopupHelper.getElementAbsoluteRect(this.props.popupElement),\n      PopupHelper.getPositionObject(this.props.popupPosition),\n      this.props.size,\n      this.props.offset,\n      this.props.borderWidth,\n    );\n\n    const styleOuter: React.CSSProperties = this.getOuterStyle(\n      options.activeBorder,\n      options.outerSize,\n      this.props.borderColor,\n    );\n\n    const styleInner: React.CSSProperties = this.getInnerStyle(\n      options.activeBorder,\n      this.props.size,\n      this.props.backgroundColor,\n    );\n\n    const styleWrapper = this.getWrapperStyle(options.outerLeft, options.outerTop, options.outerSize);\n\n    return (\n      <div data-tid={PopupDataTids.popupPin} className={styles.wrapper()} style={styleWrapper}>\n        <div style={styleOuter}>\n          <div style={styleInner} />\n        </div>\n      </div>\n    );\n  }\n\n  private getPopupOppositeDirection(): 'bottom' | 'top' | 'left' | 'right' {\n    const popupDirection = PopupHelper.getPositionObject(this.props.popupPosition).direction;\n    switch (popupDirection) {\n      case 'top':\n        return 'bottom';\n      case 'bottom':\n        return 'top';\n      case 'left':\n        return 'right';\n      case 'right':\n        return 'left';\n      default:\n        throw new TypeError('Unknown direction ' + popupDirection);\n    }\n  }\n\n  private getWrapperStyle(left: number, top: number, borderWidth: number) {\n    const direction = this.getPopupOppositeDirection();\n    switch (direction) {\n      case 'top':\n      case 'bottom':\n        return {\n          [direction]: -borderWidth + 'px',\n          left: left + 'px',\n          width: borderWidth * 2 + 'px',\n          height: borderWidth + 'px',\n        };\n      case 'left':\n      case 'right':\n        return {\n          [direction]: -borderWidth + 'px',\n          top: top + 'px',\n          height: borderWidth * 2 + 'px',\n          width: borderWidth + 'px',\n        };\n      default:\n        throw new TypeError('Unknown direction ' + direction);\n    }\n  }\n\n  private getOuterStyle(activeBorder: string, borderWitdth: number, borderColor: string): React.CSSProperties {\n    const direction = this.getPopupOppositeDirection();\n    switch (direction) {\n      case 'top':\n      case 'bottom':\n        return {\n          ...borderStyles,\n          [direction]: -borderWitdth + 'px',\n          left: '0px',\n          borderWidth: borderWitdth + 'px',\n          ['border' + activeBorder + 'Color']: borderColor,\n        } as React.CSSProperties;\n      case 'left':\n      case 'right':\n        return {\n          ...borderStyles,\n          [direction]: -borderWitdth + 'px',\n          top: '0px',\n          borderWidth: borderWitdth + 'px',\n          ['border' + activeBorder + 'Color']: borderColor,\n        } as React.CSSProperties;\n      default:\n        throw new TypeError('Unknown direction ' + direction);\n    }\n  }\n\n  private getInnerStyle(activeBorder: string, borderWitdth: number, borderColor: string): React.CSSProperties {\n    const direction = this.getPopupOppositeDirection();\n    switch (direction) {\n      case 'top':\n      case 'bottom':\n        return {\n          ...borderStyles,\n          [direction]: -borderWitdth + 2 + 'px',\n          left: -borderWitdth + 'px',\n          borderWidth: borderWitdth + 'px',\n          ['border' + activeBorder + 'Color']: borderColor,\n        } as React.CSSProperties;\n      case 'left':\n      case 'right':\n        return {\n          ...borderStyles,\n          [direction]: -borderWitdth + 2 + 'px',\n          top: -borderWitdth + 'px',\n          borderWidth: borderWitdth + 'px',\n          ['border' + activeBorder + 'Color']: borderColor,\n        } as React.CSSProperties;\n      default:\n        throw new TypeError('Unknown direction ' + direction);\n    }\n  }\n\n  private getPinOptions(\n    popupRect: Rect,\n    popupPosition: PositionObject,\n    pinSize: number,\n    pinOffset: number,\n    borderWidth: number,\n  ) {\n    const bordersDelta = 2 * borderWidth;\n    const outerSize = pinSize + bordersDelta;\n\n    switch (popupPosition.direction) {\n      case 'top':\n        return {\n          outerTop: popupRect.height,\n          outerLeft: this.getPinLeftCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) - bordersDelta,\n          innerTop: -outerSize,\n          innerLeft: -outerSize + bordersDelta,\n          activeBorder: 'Top',\n          outerSize,\n        };\n      case 'bottom':\n        return {\n          outerTop: -2 * outerSize,\n          outerLeft: this.getPinLeftCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) - bordersDelta,\n          innerTop: -outerSize + 2 * bordersDelta,\n          innerLeft: -outerSize + bordersDelta,\n          activeBorder: 'Bottom',\n          outerSize,\n        };\n      case 'left':\n        return {\n          outerTop: this.getPinTopCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) - bordersDelta,\n          outerLeft: popupRect.width,\n          innerTop: -outerSize + bordersDelta,\n          innerLeft: -outerSize,\n          activeBorder: 'Left',\n          outerSize,\n        };\n      case 'right':\n        return {\n          outerTop: this.getPinTopCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) - bordersDelta,\n          outerLeft: -2 * outerSize,\n          innerTop: -outerSize + bordersDelta,\n          innerLeft: -outerSize + 2 * bordersDelta,\n          activeBorder: 'Right',\n          outerSize,\n        };\n      default:\n        throw new Error('Direction must be one of top, right, bottom, left');\n    }\n  }\n\n  private getPinTopCoordinate(popupRect: Rect, align: string, pinHeight: number, pinOffset: number) {\n    switch (align) {\n      case 'top':\n        return pinOffset;\n      case 'middle':\n        return popupRect.height / 2 - pinHeight;\n      case 'bottom':\n        return popupRect.height - pinOffset - 2 * pinHeight;\n      default:\n        throw new Error(`Unexpected align '${align}'`);\n    }\n  }\n\n  private getPinLeftCoordinate(popupRect: Rect, align: string, pinHeight: number, pinOffset: number) {\n    switch (align) {\n      case 'left':\n        return pinOffset;\n      case 'center':\n        return popupRect.width / 2 - pinHeight;\n      case 'right':\n        return popupRect.width - pinOffset - 2 * pinHeight;\n      default:\n        throw new Error(`Unexpected align '${align}'`);\n    }\n  }\n}\n"]}
+{"version":3,"sources":["PopupPin.tsx"],"names":["borderStyles","position","borderStyle","borderTopColor","borderBottomColor","borderLeftColor","borderRightColor","PopupPin","render","props","popupElement","options","getPinOptions","PopupHelper","getElementAbsoluteRect","getPositionObject","popupPosition","size","offset","borderWidth","styleOuter","getOuterStyle","activeBorder","outerSize","borderColor","styleInner","getInnerStyle","backgroundColor","styleWrapper","getWrapperStyle","outerLeft","outerTop","PopupDataTids","popupPin","styles","wrapper","getPopupOppositeDirection","popupDirection","direction","TypeError","left","top","width","height","borderWitdth","popupRect","pinSize","pinOffset","bordersDelta","getPinLeftCoordinate","align","innerTop","innerLeft","getPinTopCoordinate","Error","pinHeight","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","string","number","any"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Nullable } from '../../typings/utility-types';\n\nimport { PopupHelper, PositionObject, Rect } from './PopupHelper';\nimport { styles } from './PopupPin.styles';\nimport { PopupDataTids } from './Popup';\n\nconst borderStyles = {\n  position: 'absolute',\n  borderStyle: 'solid',\n  borderTopColor: 'transparent',\n  borderBottomColor: 'transparent',\n  borderLeftColor: 'transparent',\n  borderRightColor: 'transparent',\n};\n\ninterface Props {\n  backgroundColor: string;\n  borderColor: string;\n  borderWidth: number;\n  offset: number;\n  popupElement: Nullable<Element>;\n  popupPosition: string;\n  size: number;\n}\n\nexport class PopupPin extends React.Component<Props> {\n  public static __KONTUR_REACT_UI__ = 'PopupPin';\n\n  public static propTypes = {\n    /**\n     * Цвет фон пина\n     */\n    backgroundColor: PropTypes.string,\n\n    /**\n     * Цвет границы пина\n     */\n    borderColor: PropTypes.string,\n\n    /**\n     * Ширина границы пина\n     */\n    borderWidth: PropTypes.number,\n\n    /**\n     * Смещение пина от края попапа. Край задаётся в пропе position вторым словом\n     */\n    offset: PropTypes.number,\n\n    /**\n     * Ссылка на попап\n     */\n    popupElement: PropTypes.any,\n\n    /**\n     * Позиция поапа, по которой будет вычеслено положение пина\n     */\n    popupPosition: PropTypes.string,\n\n    /**\n     * Сторона пина без учёта границы.\n     * Пин представляет собой равносторонний треугольник, высота от попапа\n     * до \"носика\" пина будет соответствовать формуле (size* √3)/2\n     */\n    size: PropTypes.number,\n  };\n\n  public render() {\n    if (!this.props.popupElement) {\n      return null;\n    }\n\n    const options = this.getPinOptions(\n      PopupHelper.getElementAbsoluteRect(this.props.popupElement),\n      PopupHelper.getPositionObject(this.props.popupPosition),\n      this.props.size,\n      this.props.offset,\n      this.props.borderWidth,\n    );\n\n    const styleOuter: React.CSSProperties = this.getOuterStyle(\n      options.activeBorder,\n      options.outerSize,\n      this.props.borderColor,\n    );\n\n    const styleInner: React.CSSProperties = this.getInnerStyle(\n      options.activeBorder,\n      this.props.size,\n      this.props.backgroundColor,\n    );\n\n    const styleWrapper = this.getWrapperStyle(options.outerLeft, options.outerTop, options.outerSize);\n\n    return (\n      <div data-tid={PopupDataTids.popupPin} className={styles.wrapper()} style={styleWrapper}>\n        <div style={styleOuter}>\n          <div style={styleInner} />\n        </div>\n      </div>\n    );\n  }\n\n  private getPopupOppositeDirection(): 'bottom' | 'top' | 'left' | 'right' {\n    const popupDirection = PopupHelper.getPositionObject(this.props.popupPosition).direction;\n    switch (popupDirection) {\n      case 'top':\n        return 'bottom';\n      case 'bottom':\n        return 'top';\n      case 'left':\n        return 'right';\n      case 'right':\n        return 'left';\n      default:\n        throw new TypeError('Unknown direction ' + popupDirection);\n    }\n  }\n\n  private getWrapperStyle(left: number, top: number, borderWidth: number) {\n    const direction = this.getPopupOppositeDirection();\n    switch (direction) {\n      case 'top':\n      case 'bottom':\n        return {\n          [direction]: -borderWidth + 'px',\n          left: left + 'px',\n          width: borderWidth * 2 + 'px',\n          height: borderWidth + 'px',\n        };\n      case 'left':\n      case 'right':\n        return {\n          [direction]: -borderWidth + 'px',\n          top: top + 'px',\n          height: borderWidth * 2 + 'px',\n          width: borderWidth + 'px',\n        };\n      default:\n        throw new TypeError('Unknown direction ' + direction);\n    }\n  }\n\n  private getOuterStyle(activeBorder: string, borderWitdth: number, borderColor: string): React.CSSProperties {\n    const direction = this.getPopupOppositeDirection();\n    switch (direction) {\n      case 'top':\n      case 'bottom':\n        return {\n          ...borderStyles,\n          [direction]: -borderWitdth + 'px',\n          left: '0px',\n          borderWidth: borderWitdth + 'px',\n          ['border' + activeBorder + 'Color']: borderColor,\n        } as React.CSSProperties;\n      case 'left':\n      case 'right':\n        return {\n          ...borderStyles,\n          [direction]: -borderWitdth + 'px',\n          top: '0px',\n          borderWidth: borderWitdth + 'px',\n          ['border' + activeBorder + 'Color']: borderColor,\n        } as React.CSSProperties;\n      default:\n        throw new TypeError('Unknown direction ' + direction);\n    }\n  }\n\n  private getInnerStyle(activeBorder: string, borderWitdth: number, borderColor: string): React.CSSProperties {\n    const direction = this.getPopupOppositeDirection();\n    switch (direction) {\n      case 'top':\n      case 'bottom':\n        return {\n          ...borderStyles,\n          [direction]: -borderWitdth + 2 + 'px',\n          left: -borderWitdth + 'px',\n          borderWidth: borderWitdth + 'px',\n          ['border' + activeBorder + 'Color']: borderColor,\n        } as React.CSSProperties;\n      case 'left':\n      case 'right':\n        return {\n          ...borderStyles,\n          [direction]: -borderWitdth + 2 + 'px',\n          top: -borderWitdth + 'px',\n          borderWidth: borderWitdth + 'px',\n          ['border' + activeBorder + 'Color']: borderColor,\n        } as React.CSSProperties;\n      default:\n        throw new TypeError('Unknown direction ' + direction);\n    }\n  }\n\n  private getPinOptions(\n    popupRect: Rect,\n    popupPosition: PositionObject,\n    pinSize: number,\n    pinOffset: number,\n    borderWidth: number,\n  ) {\n    const bordersDelta = 2 * borderWidth;\n    const outerSize = pinSize + bordersDelta;\n\n    switch (popupPosition.direction) {\n      case 'top':\n        return {\n          outerTop: popupRect.height,\n          outerLeft: this.getPinLeftCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) - bordersDelta,\n          innerTop: -outerSize,\n          innerLeft: -outerSize + bordersDelta,\n          activeBorder: 'Top',\n          outerSize,\n        };\n      case 'bottom':\n        return {\n          outerTop: -2 * outerSize,\n          outerLeft: this.getPinLeftCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) - bordersDelta,\n          innerTop: -outerSize + 2 * bordersDelta,\n          innerLeft: -outerSize + bordersDelta,\n          activeBorder: 'Bottom',\n          outerSize,\n        };\n      case 'left':\n        return {\n          outerTop: this.getPinTopCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) - bordersDelta,\n          outerLeft: popupRect.width,\n          innerTop: -outerSize + bordersDelta,\n          innerLeft: -outerSize,\n          activeBorder: 'Left',\n          outerSize,\n        };\n      case 'right':\n        return {\n          outerTop: this.getPinTopCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) - bordersDelta,\n          outerLeft: -2 * outerSize,\n          innerTop: -outerSize + bordersDelta,\n          innerLeft: -outerSize + 2 * bordersDelta,\n          activeBorder: 'Right',\n          outerSize,\n        };\n      default:\n        throw new Error('Direction must be one of top, right, bottom, left');\n    }\n  }\n\n  private getPinTopCoordinate(popupRect: Rect, align: string, pinHeight: number, pinOffset: number) {\n    switch (align) {\n      case 'top':\n        return pinOffset;\n      case 'middle':\n        return popupRect.height / 2 - pinHeight;\n      case 'bottom':\n        return popupRect.height - pinOffset - 2 * pinHeight;\n      default:\n        throw new Error(`Unexpected align '${align}'`);\n    }\n  }\n\n  private getPinLeftCoordinate(popupRect: Rect, align: string, pinHeight: number, pinOffset: number) {\n    switch (align) {\n      case 'left':\n        return pinOffset;\n      case 'center':\n        return popupRect.width / 2 - pinHeight;\n      case 'right':\n        return popupRect.width - pinOffset - 2 * pinHeight;\n      default:\n        throw new Error(`Unexpected align '${align}'`);\n    }\n  }\n}\n"]}

package/cjs/internal/PopupMenu/PopupMenu.d.ts

@@ -33,7 +33,7 @@ export interface PopupMenuProps extends CommonProps {
     popupMargin?: number;
     popupPinOffset?: number;
     type?: 'dropdown' | 'tooltip';
-    disableAnimations: boolean;
+    disableAnimations?: boolean;
     /** Действие при открытии меню */
     onOpen?: () => void;
     /** Действие при закрытии меню */
@@ -44,25 +44,22 @@ interface PopupMenuState {
     firstItemShouldBeSelected?: boolean;
 }
 export declare const PopupMenuType: {
-    Dropdown: string;
-    Tooltip: string;
+    readonly Dropdown: "dropdown";
+    readonly Tooltip: "tooltip";
 };
 export declare const PopupMenuDataTids: {
     readonly root: "PopupMenu__root";
     readonly caption: "PopupMenu__caption";
 };
+declare type DefaultProps = Required<Pick<PopupMenuProps, 'positions' | 'type' | 'popupHasPin' | 'disableAnimations'>>;
 export declare class PopupMenu extends React.Component<PopupMenuProps, PopupMenuState> {
     static __KONTUR_REACT_UI__: string;
     private isMobileLayout;
-    static defaultProps: {
-        positions: ("top left" | "top center" | "top right" | "right top" | "right middle" | "right bottom" | "bottom right" | "bottom center" | "bottom left" | "left bottom" | "left middle" | "left top")[];
-        type: string;
-        popupHasPin: boolean;
-        disableAnimations: boolean;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     static Type: {
-        Dropdown: string;
-        Tooltip: string;
+        readonly Dropdown: "dropdown";
+        readonly Tooltip: "tooltip";
     };
     state: {
         menuVisible: boolean;

package/cjs/internal/PopupMenu/PopupMenu.js

@@ -14,6 +14,7 @@ var _RenderLayer = require("../RenderLayer");
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _decorator = require("../../components/ResponsiveLayout/decorator");
 var _rootNode = require("../../lib/rootNode");
+var _createPropsGetter = require("../../lib/createPropsGetter");
 
 var _validatePositions = require("./validatePositions");
 var _PopupMenu = require("./PopupMenu.styles");var _class, _class2, _temp;
@@ -93,6 +94,8 @@ var Positions = [
 
 
 
+
+
 PopupMenu = (0, _rootNode.rootNode)(_class = (0, _decorator.responsiveLayout)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(PopupMenu, _React$Component);function PopupMenu() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
@@ -105,6 +108,8 @@ PopupMenu = (0, _rootNode.rootNode)(_class = (0, _decorator.responsiveLayout)(_c
 
 
 
+    getProps = (0, _createPropsGetter.createPropsGetter)(PopupMenu.defaultProps);_this.
+
 
 
     state = {
@@ -160,6 +165,7 @@ PopupMenu = (0, _rootNode.rootNode)(_class = (0, _decorator.responsiveLayout)(_c
 
 
 
+
 
 
     open = function () {return _this.showMenu();};_this.
@@ -216,6 +222,7 @@ PopupMenu = (0, _rootNode.rootNode)(_class = (0, _decorator.responsiveLayout)(_c
 
 
 
+
     showMenu = function (firstItemShouldBeSelected) {
       _this.saveFocus();
       _this.setState(
@@ -305,4 +312,4 @@ PopupMenu = (0, _rootNode.rootNode)(_class = (0, _decorator.responsiveLayout)(_c
 
       var restoreFocus = event.type === 'keydown';
       _this.hideMenu(restoreFocus);
-    };return _this;}var _proto = PopupMenu.prototype;_proto.render = function render() {return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: this.hideMenuWithoutFocusing, onFocusOutside: this.hideMenuWithoutFocusing, active: this.state.menuVisible }, /*#__PURE__*/_react.default.createElement("div", { "data-tid": PopupMenuDataTids.root, className: _PopupMenu.styles.container(), style: { width: this.props.width } }, this.renderCaption(), this.captionWrapper && this.props.children && /*#__PURE__*/_react.default.createElement(_Popup.Popup, { anchorElement: this.captionWrapper, opened: this.state.menuVisible, hasShadow: true, margin: this.props.popupMargin, hasPin: this.props.popupHasPin, pinOffset: this.props.popupPinOffset, positions: this.getPositions(), disableAnimations: this.props.disableAnimations, onOpen: this.handleOpen, mobileOnCloseRequest: this.hideMenu, width: this.isMobileLayout ? 'auto' : this.props.menuWidth || 'auto' }, /*#__PURE__*/_react.default.createElement(_InternalMenu.InternalMenu, { hasShadow: false, maxHeight: this.isMobileLayout ? 'none' : this.props.menuMaxHeight || 'none', onKeyDown: this.handleKeyDown, onItemClick: this.handleItemSelection, cyclicSelection: false, ref: this.refInternalMenu, initialSelectedItemIndex: this.state.firstItemShouldBeSelected ? 0 : -1, header: this.props.header, footer: this.props.footer }, this.props.children)))));};_proto.getPositions = function getPositions() {if (this.props.positions && (0, _validatePositions.isValidPositions)(this.props.positions)) {return this.props.positions;}return Positions;};return PopupMenu;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'PopupMenu', _class2.defaultProps = { positions: Positions, type: PopupMenuType.Tooltip, popupHasPin: true, disableAnimations: false }, _class2.Type = PopupMenuType, _temp)) || _class) || _class;exports.PopupMenu = PopupMenu;
+    };return _this;}var _proto = PopupMenu.prototype;_proto.render = function render() {var _this$getProps = this.getProps(),popupHasPin = _this$getProps.popupHasPin,disableAnimations = _this$getProps.disableAnimations;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: this.hideMenuWithoutFocusing, onFocusOutside: this.hideMenuWithoutFocusing, active: this.state.menuVisible }, /*#__PURE__*/_react.default.createElement("div", { "data-tid": PopupMenuDataTids.root, className: _PopupMenu.styles.container(), style: { width: this.props.width } }, this.renderCaption(), this.captionWrapper && this.props.children && /*#__PURE__*/_react.default.createElement(_Popup.Popup, { anchorElement: this.captionWrapper, opened: this.state.menuVisible, hasShadow: true, margin: this.props.popupMargin, hasPin: popupHasPin, pinOffset: this.props.popupPinOffset, positions: this.getPositions(), disableAnimations: disableAnimations, onOpen: this.handleOpen, mobileOnCloseRequest: this.hideMenu, width: this.isMobileLayout ? 'auto' : this.props.menuWidth || 'auto' }, /*#__PURE__*/_react.default.createElement(_InternalMenu.InternalMenu, { hasShadow: false, maxHeight: this.isMobileLayout ? 'none' : this.props.menuMaxHeight || 'none', onKeyDown: this.handleKeyDown, onItemClick: this.handleItemSelection, cyclicSelection: false, ref: this.refInternalMenu, initialSelectedItemIndex: this.state.firstItemShouldBeSelected ? 0 : -1, header: this.props.header, footer: this.props.footer }, this.props.children)))));};_proto.getPositions = function getPositions() {var positions = this.getProps().positions;if (positions && (0, _validatePositions.isValidPositions)(positions)) {return positions;}return Positions;};return PopupMenu;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'PopupMenu', _class2.defaultProps = { positions: Positions, type: PopupMenuType.Tooltip, popupHasPin: true, disableAnimations: false }, _class2.Type = PopupMenuType, _temp)) || _class) || _class;exports.PopupMenu = PopupMenu;

package/cjs/internal/PopupMenu/PopupMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["PopupMenu.tsx"],"names":["PopupMenuType","Dropdown","Tooltip","PopupMenuDataTids","root","caption","Positions","PopupMenu","rootNode","responsiveLayout","state","menuVisible","firstItemShouldBeSelected","captionWrapper","savedFocusableElement","menu","open","showMenu","close","hideMenu","refInternalMenu","element","handleOpen","focus","renderCaption","props","opened","openMenu","closeMenu","toggleMenu","styles","handleCaptionClick","handleCaptionKeyDown","hideMenuWithoutFocusing","saveFocus","setState","handleChangeMenuVisible","restoreFocus","e","isKeyEnter","isKeySpace","isKeyArrowVertical","preventDefault","handleKeyDown","document","activeElement","focusShouldBeRestored","onOpen","onClose","onChangeMenuState","handleItemSelection","event","isDefaultPrevented","type","render","setRootNode","container","width","children","popupMargin","popupHasPin","popupPinOffset","getPositions","disableAnimations","isMobileLayout","menuWidth","menuMaxHeight","header","footer","positions","React","Component","__KONTUR_REACT_UI__","defaultProps","Type"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {\n  isKeyArrowVertical,\n  isKeyEnter,\n  isKeyEscape,\n  isKeySpace,\n  someKeys,\n} from '../../lib/events/keyboard/identifiers';\nimport { InternalMenu } from '../InternalMenu';\nimport { Popup, PopupPositionsType } from '../Popup';\nimport { RenderLayer } from '../RenderLayer';\nimport { Nullable } from '../../typings/utility-types';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { responsiveLayout } from '../../components/ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { isValidPositions } from './validatePositions';\nimport { styles } from './PopupMenu.styles';\n\nexport interface PopupMenuCaptionProps {\n  opened: boolean;\n  openMenu: (firstItemShouldBeSelected?: boolean) => void;\n  closeMenu: (restoreFocus?: boolean) => void;\n  toggleMenu: () => void;\n}\n\nexport interface PopupMenuProps extends CommonProps {\n  children?: React.ReactNode;\n  /** Максимальная высота меню */\n  menuMaxHeight?: number | string;\n  /** Ширина меню */\n  menuWidth?: number | string;\n  /** Ширина контейнера и caption */\n  width?: React.CSSProperties['width'];\n\n  /**\n   * Элемент или функция возвращающая элемент,\n   * если передана, используется вместо ```caption```,\n   * в таком случае управлять открытием и закрытием меню\n   * придется в этой функции\n   */\n  caption: React.ReactNode | ((props: PopupMenuCaptionProps) => React.ReactNode);\n\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n\n  /**  Массив разрешенных положений меню относительно caption'а. */\n  positions?: PopupPositionsType[];\n  /** Колбэк, вызываемый после открытия/закрытия меню */\n  onChangeMenuState?: (isOpened: boolean, restoreFocus: boolean) => void;\n  /** Пропсы, передающиеся в Popup */\n  popupHasPin?: boolean;\n  popupMargin?: number;\n  popupPinOffset?: number;\n  type?: 'dropdown' | 'tooltip';\n  disableAnimations: boolean;\n  /** Действие при открытии меню */\n  onOpen?: () => void;\n  /** Действие при закрытии меню */\n  onClose?: () => void;\n}\n\ninterface PopupMenuState {\n  menuVisible: boolean;\n  firstItemShouldBeSelected?: boolean;\n}\n\nexport const PopupMenuType = {\n  Dropdown: 'dropdown',\n  Tooltip: 'tooltip',\n};\n\nexport const PopupMenuDataTids = {\n  root: 'PopupMenu__root',\n  caption: 'PopupMenu__caption',\n} as const;\n\nconst Positions: PopupPositionsType[] = [\n  'top left',\n  'top center',\n  'top right',\n  'right top',\n  'right middle',\n  'right bottom',\n  'bottom left',\n  'bottom center',\n  'bottom right',\n  'left top',\n  'left middle',\n  'left bottom',\n];\n\n@rootNode\n@responsiveLayout\nexport class PopupMenu extends React.Component<PopupMenuProps, PopupMenuState> {\n  public static __KONTUR_REACT_UI__ = 'PopupMenu';\n\n  private isMobileLayout!: boolean;\n\n  public static defaultProps = {\n    positions: Positions,\n    type: PopupMenuType.Tooltip,\n    popupHasPin: true,\n    disableAnimations: false,\n  };\n\n  public static Type = PopupMenuType;\n\n  public state = {\n    menuVisible: false,\n    firstItemShouldBeSelected: false,\n  };\n\n  private captionWrapper: HTMLSpanElement | null = null;\n  private savedFocusableElement: HTMLElement | null = null;\n  private menu: Nullable<InternalMenu> = null;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <RenderLayer\n          onClickOutside={this.hideMenuWithoutFocusing}\n          onFocusOutside={this.hideMenuWithoutFocusing}\n          active={this.state.menuVisible}\n        >\n          <div data-tid={PopupMenuDataTids.root} className={styles.container()} style={{ width: this.props.width }}>\n            {this.renderCaption()}\n            {this.captionWrapper && this.props.children && (\n              <Popup\n                anchorElement={this.captionWrapper}\n                opened={this.state.menuVisible}\n                hasShadow\n                margin={this.props.popupMargin}\n                hasPin={this.props.popupHasPin}\n                pinOffset={this.props.popupPinOffset}\n                positions={this.getPositions()}\n                disableAnimations={this.props.disableAnimations}\n                onOpen={this.handleOpen}\n                mobileOnCloseRequest={this.hideMenu}\n                width={this.isMobileLayout ? 'auto' : this.props.menuWidth || 'auto'}\n              >\n                <InternalMenu\n                  hasShadow={false}\n                  maxHeight={this.isMobileLayout ? 'none' : this.props.menuMaxHeight || 'none'}\n                  onKeyDown={this.handleKeyDown}\n                  onItemClick={this.handleItemSelection}\n                  cyclicSelection={false}\n                  ref={this.refInternalMenu}\n                  initialSelectedItemIndex={this.state.firstItemShouldBeSelected ? 0 : -1}\n                  header={this.props.header}\n                  footer={this.props.footer}\n                >\n                  {this.props.children}\n                </InternalMenu>\n              </Popup>\n            )}\n          </div>\n        </RenderLayer>\n      </CommonWrapper>\n    );\n  }\n\n  public open = (): void => this.showMenu();\n  public close = (): void => this.hideMenu();\n\n  private refInternalMenu = (element: Nullable<InternalMenu>) => (this.menu = element);\n\n  private handleOpen = () => {\n    if (this.menu) {\n      this.menu.focus();\n    }\n  };\n\n  private renderCaption = () => {\n    if (typeof this.props.caption === 'function') {\n      const caption = this.props.caption({\n        opened: this.state.menuVisible,\n        openMenu: this.showMenu,\n        closeMenu: this.hideMenu,\n        toggleMenu: this.toggleMenu,\n      });\n\n      return (\n        <span\n          data-tid={PopupMenuDataTids.caption}\n          className={styles.caption()}\n          ref={(element) => (this.captionWrapper = element)}\n        >\n          {caption}\n        </span>\n      );\n    }\n\n    return (\n      <span\n        data-tid={PopupMenuDataTids.caption}\n        onClick={this.handleCaptionClick}\n        onKeyDown={this.handleCaptionKeyDown}\n        ref={(element) => (this.captionWrapper = element)}\n        className={styles.caption()}\n      >\n        {this.props.caption}\n      </span>\n    );\n  };\n\n  private hideMenuWithoutFocusing = () => this.hideMenu();\n\n  private getPositions(): Readonly<PopupPositionsType[]> {\n    if (this.props.positions && isValidPositions(this.props.positions)) {\n      return this.props.positions;\n    }\n\n    return Positions;\n  }\n\n  private showMenu = (firstItemShouldBeSelected?: boolean): void => {\n    this.saveFocus();\n    this.setState(\n      {\n        menuVisible: true,\n        firstItemShouldBeSelected,\n      },\n      () => {\n        this.handleChangeMenuVisible(false);\n      },\n    );\n  };\n\n  private hideMenu = (restoreFocus?: boolean): void => {\n    this.setState(\n      {\n        menuVisible: false,\n        firstItemShouldBeSelected: false,\n      },\n      () => {\n        this.handleChangeMenuVisible(!!restoreFocus);\n      },\n    );\n  };\n\n  private toggleMenu = (): void => {\n    this.state.menuVisible ? this.hideMenu() : this.showMenu();\n  };\n\n  private handleCaptionClick = (): void => {\n    this.toggleMenu();\n  };\n\n  private handleCaptionKeyDown = (e: React.KeyboardEvent<HTMLElement>): void => {\n    if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {\n      e.preventDefault();\n      this.showMenu(true);\n    }\n  };\n\n  private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (isKeyEscape(e)) {\n      const restoreFocus = true;\n      this.hideMenu(restoreFocus);\n    }\n  };\n\n  private saveFocus = (): void => {\n    if (document) {\n      this.savedFocusableElement = document.activeElement as HTMLElement;\n    }\n  };\n\n  private restoreFocus = (): void => {\n    if (this.savedFocusableElement) {\n      this.savedFocusableElement.focus();\n      this.savedFocusableElement = null;\n    }\n  };\n\n  private handleChangeMenuVisible = (focusShouldBeRestored: boolean): void => {\n    if (focusShouldBeRestored) {\n      this.restoreFocus();\n    }\n\n    if (this.state.menuVisible && this.props.onOpen) {\n      this.props.onOpen();\n    }\n\n    if (!this.state.menuVisible && this.props.onClose) {\n      this.props.onClose();\n    }\n\n    if (typeof this.props.onChangeMenuState === 'function') {\n      this.props.onChangeMenuState(this.state.menuVisible, focusShouldBeRestored);\n    }\n  };\n\n  private handleItemSelection = (event: React.SyntheticEvent<HTMLElement>): void => {\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n\n    if (event.type === 'keydown') {\n      event.preventDefault();\n    }\n\n    const restoreFocus = event.type === 'keydown';\n    this.hideMenu(restoreFocus);\n  };\n}\n"]}
+{"version":3,"sources":["PopupMenu.tsx"],"names":["PopupMenuType","Dropdown","Tooltip","PopupMenuDataTids","root","caption","Positions","PopupMenu","rootNode","responsiveLayout","getProps","defaultProps","state","menuVisible","firstItemShouldBeSelected","captionWrapper","savedFocusableElement","menu","open","showMenu","close","hideMenu","refInternalMenu","element","handleOpen","focus","renderCaption","props","opened","openMenu","closeMenu","toggleMenu","styles","handleCaptionClick","handleCaptionKeyDown","hideMenuWithoutFocusing","saveFocus","setState","handleChangeMenuVisible","restoreFocus","e","isKeyEnter","isKeySpace","isKeyArrowVertical","preventDefault","handleKeyDown","document","activeElement","focusShouldBeRestored","onOpen","onClose","onChangeMenuState","handleItemSelection","event","isDefaultPrevented","type","render","popupHasPin","disableAnimations","setRootNode","container","width","children","popupMargin","popupPinOffset","getPositions","isMobileLayout","menuWidth","menuMaxHeight","header","footer","positions","React","Component","__KONTUR_REACT_UI__","Type"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {\n  isKeyArrowVertical,\n  isKeyEnter,\n  isKeyEscape,\n  isKeySpace,\n  someKeys,\n} from '../../lib/events/keyboard/identifiers';\nimport { InternalMenu } from '../InternalMenu';\nimport { Popup, PopupPositionsType } from '../Popup';\nimport { RenderLayer } from '../RenderLayer';\nimport { Nullable } from '../../typings/utility-types';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { responsiveLayout } from '../../components/ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { isValidPositions } from './validatePositions';\nimport { styles } from './PopupMenu.styles';\n\nexport interface PopupMenuCaptionProps {\n  opened: boolean;\n  openMenu: (firstItemShouldBeSelected?: boolean) => void;\n  closeMenu: (restoreFocus?: boolean) => void;\n  toggleMenu: () => void;\n}\n\nexport interface PopupMenuProps extends CommonProps {\n  children?: React.ReactNode;\n  /** Максимальная высота меню */\n  menuMaxHeight?: number | string;\n  /** Ширина меню */\n  menuWidth?: number | string;\n  /** Ширина контейнера и caption */\n  width?: React.CSSProperties['width'];\n\n  /**\n   * Элемент или функция возвращающая элемент,\n   * если передана, используется вместо ```caption```,\n   * в таком случае управлять открытием и закрытием меню\n   * придется в этой функции\n   */\n  caption: React.ReactNode | ((props: PopupMenuCaptionProps) => React.ReactNode);\n\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n\n  /**  Массив разрешенных положений меню относительно caption'а. */\n  positions?: PopupPositionsType[];\n  /** Колбэк, вызываемый после открытия/закрытия меню */\n  onChangeMenuState?: (isOpened: boolean, restoreFocus: boolean) => void;\n  /** Пропсы, передающиеся в Popup */\n  popupHasPin?: boolean;\n  popupMargin?: number;\n  popupPinOffset?: number;\n  type?: 'dropdown' | 'tooltip';\n  disableAnimations?: boolean;\n  /** Действие при открытии меню */\n  onOpen?: () => void;\n  /** Действие при закрытии меню */\n  onClose?: () => void;\n}\n\ninterface PopupMenuState {\n  menuVisible: boolean;\n  firstItemShouldBeSelected?: boolean;\n}\n\nexport const PopupMenuType = {\n  Dropdown: 'dropdown',\n  Tooltip: 'tooltip',\n} as const;\n\nexport const PopupMenuDataTids = {\n  root: 'PopupMenu__root',\n  caption: 'PopupMenu__caption',\n} as const;\n\nconst Positions: PopupPositionsType[] = [\n  'top left',\n  'top center',\n  'top right',\n  'right top',\n  'right middle',\n  'right bottom',\n  'bottom left',\n  'bottom center',\n  'bottom right',\n  'left top',\n  'left middle',\n  'left bottom',\n];\n\ntype DefaultProps = Required<Pick<PopupMenuProps, 'positions' | 'type' | 'popupHasPin' | 'disableAnimations'>>;\n\n@rootNode\n@responsiveLayout\nexport class PopupMenu extends React.Component<PopupMenuProps, PopupMenuState> {\n  public static __KONTUR_REACT_UI__ = 'PopupMenu';\n\n  private isMobileLayout!: boolean;\n\n  public static defaultProps: DefaultProps = {\n    positions: Positions,\n    type: PopupMenuType.Tooltip,\n    popupHasPin: true,\n    disableAnimations: false,\n  };\n\n  private getProps = createPropsGetter(PopupMenu.defaultProps);\n\n  public static Type = PopupMenuType;\n\n  public state = {\n    menuVisible: false,\n    firstItemShouldBeSelected: false,\n  };\n\n  private captionWrapper: HTMLSpanElement | null = null;\n  private savedFocusableElement: HTMLElement | null = null;\n  private menu: Nullable<InternalMenu> = null;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    const { popupHasPin, disableAnimations } = this.getProps();\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <RenderLayer\n          onClickOutside={this.hideMenuWithoutFocusing}\n          onFocusOutside={this.hideMenuWithoutFocusing}\n          active={this.state.menuVisible}\n        >\n          <div data-tid={PopupMenuDataTids.root} className={styles.container()} style={{ width: this.props.width }}>\n            {this.renderCaption()}\n            {this.captionWrapper && this.props.children && (\n              <Popup\n                anchorElement={this.captionWrapper}\n                opened={this.state.menuVisible}\n                hasShadow\n                margin={this.props.popupMargin}\n                hasPin={popupHasPin}\n                pinOffset={this.props.popupPinOffset}\n                positions={this.getPositions()}\n                disableAnimations={disableAnimations}\n                onOpen={this.handleOpen}\n                mobileOnCloseRequest={this.hideMenu}\n                width={this.isMobileLayout ? 'auto' : this.props.menuWidth || 'auto'}\n              >\n                <InternalMenu\n                  hasShadow={false}\n                  maxHeight={this.isMobileLayout ? 'none' : this.props.menuMaxHeight || 'none'}\n                  onKeyDown={this.handleKeyDown}\n                  onItemClick={this.handleItemSelection}\n                  cyclicSelection={false}\n                  ref={this.refInternalMenu}\n                  initialSelectedItemIndex={this.state.firstItemShouldBeSelected ? 0 : -1}\n                  header={this.props.header}\n                  footer={this.props.footer}\n                >\n                  {this.props.children}\n                </InternalMenu>\n              </Popup>\n            )}\n          </div>\n        </RenderLayer>\n      </CommonWrapper>\n    );\n  }\n\n  public open = (): void => this.showMenu();\n  public close = (): void => this.hideMenu();\n\n  private refInternalMenu = (element: Nullable<InternalMenu>) => (this.menu = element);\n\n  private handleOpen = () => {\n    if (this.menu) {\n      this.menu.focus();\n    }\n  };\n\n  private renderCaption = () => {\n    if (typeof this.props.caption === 'function') {\n      const caption = this.props.caption({\n        opened: this.state.menuVisible,\n        openMenu: this.showMenu,\n        closeMenu: this.hideMenu,\n        toggleMenu: this.toggleMenu,\n      });\n\n      return (\n        <span\n          data-tid={PopupMenuDataTids.caption}\n          className={styles.caption()}\n          ref={(element) => (this.captionWrapper = element)}\n        >\n          {caption}\n        </span>\n      );\n    }\n\n    return (\n      <span\n        data-tid={PopupMenuDataTids.caption}\n        onClick={this.handleCaptionClick}\n        onKeyDown={this.handleCaptionKeyDown}\n        ref={(element) => (this.captionWrapper = element)}\n        className={styles.caption()}\n      >\n        {this.props.caption}\n      </span>\n    );\n  };\n\n  private hideMenuWithoutFocusing = () => this.hideMenu();\n\n  private getPositions(): Readonly<PopupPositionsType[]> {\n    const positions = this.getProps().positions;\n    if (positions && isValidPositions(positions)) {\n      return positions;\n    }\n\n    return Positions;\n  }\n\n  private showMenu = (firstItemShouldBeSelected?: boolean): void => {\n    this.saveFocus();\n    this.setState(\n      {\n        menuVisible: true,\n        firstItemShouldBeSelected,\n      },\n      () => {\n        this.handleChangeMenuVisible(false);\n      },\n    );\n  };\n\n  private hideMenu = (restoreFocus?: boolean): void => {\n    this.setState(\n      {\n        menuVisible: false,\n        firstItemShouldBeSelected: false,\n      },\n      () => {\n        this.handleChangeMenuVisible(!!restoreFocus);\n      },\n    );\n  };\n\n  private toggleMenu = (): void => {\n    this.state.menuVisible ? this.hideMenu() : this.showMenu();\n  };\n\n  private handleCaptionClick = (): void => {\n    this.toggleMenu();\n  };\n\n  private handleCaptionKeyDown = (e: React.KeyboardEvent<HTMLElement>): void => {\n    if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {\n      e.preventDefault();\n      this.showMenu(true);\n    }\n  };\n\n  private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (isKeyEscape(e)) {\n      const restoreFocus = true;\n      this.hideMenu(restoreFocus);\n    }\n  };\n\n  private saveFocus = (): void => {\n    if (document) {\n      this.savedFocusableElement = document.activeElement as HTMLElement;\n    }\n  };\n\n  private restoreFocus = (): void => {\n    if (this.savedFocusableElement) {\n      this.savedFocusableElement.focus();\n      this.savedFocusableElement = null;\n    }\n  };\n\n  private handleChangeMenuVisible = (focusShouldBeRestored: boolean): void => {\n    if (focusShouldBeRestored) {\n      this.restoreFocus();\n    }\n\n    if (this.state.menuVisible && this.props.onOpen) {\n      this.props.onOpen();\n    }\n\n    if (!this.state.menuVisible && this.props.onClose) {\n      this.props.onClose();\n    }\n\n    if (typeof this.props.onChangeMenuState === 'function') {\n      this.props.onChangeMenuState(this.state.menuVisible, focusShouldBeRestored);\n    }\n  };\n\n  private handleItemSelection = (event: React.SyntheticEvent<HTMLElement>): void => {\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n\n    if (event.type === 'keydown') {\n      event.preventDefault();\n    }\n\n    const restoreFocus = event.type === 'keydown';\n    this.hideMenu(restoreFocus);\n  };\n}\n"]}

package/cjs/internal/RenderLayer/RenderLayer.d.ts

@@ -6,24 +6,26 @@ export interface RenderLayerProps extends CommonProps {
     onClickOutside?: (e: Event) => void;
     onFocusOutside?: (e: Event) => void;
     active?: boolean;
-    getAnchorElement?: () => Nullable<HTMLElement>;
+    getAnchorElement?: () => Nullable<Element>;
 }
+declare type DefaultProps = Required<Pick<RenderLayerProps, 'active'>>;
 export declare class RenderLayer extends React.Component<RenderLayerProps> {
     static __KONTUR_REACT_UI__: string;
     static propTypes: {
         active(props: RenderLayerProps, propName: keyof RenderLayerProps, componentName: string): Error | undefined;
     };
-    static defaultProps: {
-        active: boolean;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     private focusOutsideListenerToken;
     private setRootNode;
     componentDidMount(): void;
     componentDidUpdate(prevProps: RenderLayerProps): void;
     componentWillUnmount(): void;
     render(): JSX.Element;
+    private getAnchorNode;
     private attachListeners;
     private detachListeners;
     private handleFocusOutside;
     private handleNativeDocClick;
 }
+export {};

package/cjs/internal/RenderLayer/RenderLayer.js

@@ -1,8 +1,11 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.RenderLayer = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.RenderLayer = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
 var _listenFocusOutside = require("../../lib/listenFocusOutside");
 var _CommonWrapper = require("../CommonWrapper");
-var _rootNode = require("../../lib/rootNode");var _class, _class2, _temp;var
+var _rootNode = require("../../lib/rootNode");
+
+var _createPropsGetter = require("../../lib/createPropsGetter");var _class, _class2, _temp;var
+
 
 
 
@@ -32,6 +35,8 @@ RenderLayer = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/f
 
 
 
+    getProps = (0, _createPropsGetter.createPropsGetter)(RenderLayer.defaultProps);_this.
+
     focusOutsideListenerToken =
 
     null;_this.
@@ -86,6 +91,12 @@ RenderLayer = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/f
 
 
 
+
+
+
+
+
+
 
 
 
@@ -101,7 +112,7 @@ RenderLayer = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/f
 
     handleNativeDocClick = function (event) {
       var target = event.target || event.srcElement;
-      var node = (0, _rootNode.getRootNode)((0, _assertThisInitialized2.default)(_this)) || (0, _rootNode.getRootNode)(_this.props.getAnchorElement == null ? void 0 : _this.props.getAnchorElement());
+      var node = _this.getAnchorNode();
 
       if (!node || target instanceof Element && (0, _listenFocusOutside.containsTargetOrRenderContainer)(target)(node)) {
         return;
@@ -110,4 +121,4 @@ RenderLayer = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/f
       if (_this.props.onClickOutside) {
         _this.props.onClickOutside(event);
       }
-    };return _this;}var _proto = RenderLayer.prototype;_proto.componentDidMount = function componentDidMount() {if (this.props.active) {this.attachListeners();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {if (!prevProps.active && this.props.active) {this.attachListeners();}if (prevProps.active && !this.props.active) {this.detachListeners();}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.props.active) {this.detachListeners();}};_proto.render = function render() {return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), _react.default.Children.only(this.props.children));};_proto.attachListeners = function attachListeners() {var _this$props$getAnchor, _this$props;var rootNode = (0, _rootNode.getRootNode)(this) || ((_this$props$getAnchor = (_this$props = this.props).getAnchorElement) == null ? void 0 : _this$props$getAnchor.call(_this$props));if (!rootNode) {return;}this.focusOutsideListenerToken = (0, _listenFocusOutside.listen)(function () {return [rootNode];}, this.handleFocusOutside);window.addEventListener('blur', this.handleFocusOutside);document.addEventListener('ontouchstart' in document.documentElement ? 'touchstart' : 'mousedown', this.handleNativeDocClick);};_proto.detachListeners = function detachListeners() {if (this.focusOutsideListenerToken) {this.focusOutsideListenerToken.remove();this.focusOutsideListenerToken = null;}window.removeEventListener('blur', this.handleFocusOutside);document.removeEventListener('ontouchstart' in document.documentElement ? 'touchstart' : 'mousedown', this.handleNativeDocClick);};return RenderLayer;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'RenderLayer', _class2.propTypes = { active: function active(props, propName, componentName) {var active = props.active,onClickOutside = props.onClickOutside,onFocusOutside = props.onFocusOutside;if (active && !(onClickOutside || onFocusOutside)) {return new Error("[" + componentName + "]: using the component without either 'onClickOutside' or 'onFocusOutside' callback is pointless.");}} }, _class2.defaultProps = { active: true }, _temp)) || _class;exports.RenderLayer = RenderLayer;
+    };return _this;}var _proto = RenderLayer.prototype;_proto.componentDidMount = function componentDidMount() {if (this.getProps().active) {this.attachListeners();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var active = this.getProps().active;if (!prevProps.active && active) {this.attachListeners();}if (prevProps.active && !active) {this.detachListeners();}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.getProps().active) {this.detachListeners();}};_proto.render = function render() {return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), _react.default.Children.only(this.props.children));};_proto.getAnchorNode = function getAnchorNode() {var getAnchorElement = this.props.getAnchorElement;return getAnchorElement ? getAnchorElement() : (0, _rootNode.getRootNode)(this);};_proto.attachListeners = function attachListeners() {var node = this.getAnchorNode();if (!node) {return;}this.focusOutsideListenerToken = (0, _listenFocusOutside.listen)(function () {return [node];}, this.handleFocusOutside);window.addEventListener('blur', this.handleFocusOutside);document.addEventListener('ontouchstart' in document.documentElement ? 'touchstart' : 'mousedown', this.handleNativeDocClick);};_proto.detachListeners = function detachListeners() {if (this.focusOutsideListenerToken) {this.focusOutsideListenerToken.remove();this.focusOutsideListenerToken = null;}window.removeEventListener('blur', this.handleFocusOutside);document.removeEventListener('ontouchstart' in document.documentElement ? 'touchstart' : 'mousedown', this.handleNativeDocClick);};return RenderLayer;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'RenderLayer', _class2.propTypes = { active: function active(props, propName, componentName) {var active = props.active,onClickOutside = props.onClickOutside,onFocusOutside = props.onFocusOutside;if (active && !(onClickOutside || onFocusOutside)) {return new Error("[" + componentName + "]: using the component without either 'onClickOutside' or 'onFocusOutside' callback is pointless.");}} }, _class2.defaultProps = { active: true }, _temp)) || _class;exports.RenderLayer = RenderLayer;

package/cjs/internal/RenderLayer/RenderLayer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["RenderLayer.tsx"],"names":["RenderLayer","rootNode","focusOutsideListenerToken","handleFocusOutside","event","props","onFocusOutside","handleNativeDocClick","target","srcElement","node","getAnchorElement","Element","onClickOutside","componentDidMount","active","attachListeners","componentDidUpdate","prevProps","detachListeners","componentWillUnmount","render","setRootNode","React","Children","only","children","window","addEventListener","document","documentElement","remove","removeEventListener","Component","__KONTUR_REACT_UI__","propTypes","propName","componentName","Error","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { listen as listenFocusOutside, containsTargetOrRenderContainer } from '../../lib/listenFocusOutside';\nimport { CommonProps, CommonWrapper } from '../CommonWrapper';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { Nullable } from '../../typings/utility-types';\n\nexport interface RenderLayerProps extends CommonProps {\n  children: JSX.Element;\n  onClickOutside?: (e: Event) => void;\n  onFocusOutside?: (e: Event) => void;\n  active?: boolean;\n  getAnchorElement?: () => Nullable<HTMLElement>;\n}\n\n@rootNode\nexport class RenderLayer extends React.Component<RenderLayerProps> {\n  public static __KONTUR_REACT_UI__ = 'RenderLayer';\n\n  public static propTypes = {\n    active(props: RenderLayerProps, propName: keyof RenderLayerProps, componentName: string) {\n      const { active, onClickOutside, onFocusOutside } = props;\n      if (active && !(onClickOutside || onFocusOutside)) {\n        return new Error(\n          `[${componentName}]: using the component without either 'onClickOutside' or 'onFocusOutside' callback is pointless.`,\n        );\n      }\n    },\n  };\n\n  public static defaultProps = {\n    active: true,\n  };\n\n  private focusOutsideListenerToken: {\n    remove: () => void;\n  } | null = null;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    if (this.props.active) {\n      this.attachListeners();\n    }\n  }\n\n  public componentDidUpdate(prevProps: RenderLayerProps) {\n    if (!prevProps.active && this.props.active) {\n      this.attachListeners();\n    }\n    if (prevProps.active && !this.props.active) {\n      this.detachListeners();\n    }\n  }\n\n  public componentWillUnmount() {\n    if (this.props.active) {\n      this.detachListeners();\n    }\n  }\n\n  public render() {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        {React.Children.only(this.props.children)}\n      </CommonWrapper>\n    );\n  }\n\n  private attachListeners() {\n    const rootNode = getRootNode(this) || this.props.getAnchorElement?.();\n    if (!rootNode) {\n      return;\n    }\n\n    this.focusOutsideListenerToken = listenFocusOutside(() => [rootNode], this.handleFocusOutside);\n    window.addEventListener('blur', this.handleFocusOutside);\n    document.addEventListener(\n      'ontouchstart' in document.documentElement ? 'touchstart' : 'mousedown',\n      this.handleNativeDocClick,\n    );\n  }\n\n  private detachListeners() {\n    if (this.focusOutsideListenerToken) {\n      this.focusOutsideListenerToken.remove();\n      this.focusOutsideListenerToken = null;\n    }\n\n    window.removeEventListener('blur', this.handleFocusOutside);\n    document.removeEventListener(\n      'ontouchstart' in document.documentElement ? 'touchstart' : 'mousedown',\n      this.handleNativeDocClick,\n    );\n  }\n\n  private handleFocusOutside = (event: Event) => {\n    if (this.props.onFocusOutside) {\n      this.props.onFocusOutside(event);\n    }\n  };\n\n  private handleNativeDocClick = (event: Event) => {\n    const target = event.target || event.srcElement;\n    const node = getRootNode(this) || getRootNode(this.props.getAnchorElement?.());\n\n    if (!node || (target instanceof Element && containsTargetOrRenderContainer(target)(node))) {\n      return;\n    }\n\n    if (this.props.onClickOutside) {\n      this.props.onClickOutside(event);\n    }\n  };\n}\n"]}
+{"version":3,"sources":["RenderLayer.tsx"],"names":["RenderLayer","rootNode","getProps","defaultProps","focusOutsideListenerToken","handleFocusOutside","event","props","onFocusOutside","handleNativeDocClick","target","srcElement","node","getAnchorNode","Element","onClickOutside","componentDidMount","active","attachListeners","componentDidUpdate","prevProps","detachListeners","componentWillUnmount","render","setRootNode","React","Children","only","children","getAnchorElement","window","addEventListener","document","documentElement","remove","removeEventListener","Component","__KONTUR_REACT_UI__","propTypes","propName","componentName","Error"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { listen as listenFocusOutside, containsTargetOrRenderContainer } from '../../lib/listenFocusOutside';\nimport { CommonProps, CommonWrapper } from '../CommonWrapper';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { Nullable } from '../../typings/utility-types';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nexport interface RenderLayerProps extends CommonProps {\n  children: JSX.Element;\n  onClickOutside?: (e: Event) => void;\n  onFocusOutside?: (e: Event) => void;\n  active?: boolean;\n  getAnchorElement?: () => Nullable<Element>;\n}\n\ntype DefaultProps = Required<Pick<RenderLayerProps, 'active'>>;\n\n@rootNode\nexport class RenderLayer extends React.Component<RenderLayerProps> {\n  public static __KONTUR_REACT_UI__ = 'RenderLayer';\n\n  public static propTypes = {\n    active(props: RenderLayerProps, propName: keyof RenderLayerProps, componentName: string) {\n      const { active, onClickOutside, onFocusOutside } = props;\n      if (active && !(onClickOutside || onFocusOutside)) {\n        return new Error(\n          `[${componentName}]: using the component without either 'onClickOutside' or 'onFocusOutside' callback is pointless.`,\n        );\n      }\n    },\n  };\n\n  public static defaultProps: DefaultProps = {\n    active: true,\n  };\n\n  private getProps = createPropsGetter(RenderLayer.defaultProps);\n\n  private focusOutsideListenerToken: {\n    remove: () => void;\n  } | null = null;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    if (this.getProps().active) {\n      this.attachListeners();\n    }\n  }\n\n  public componentDidUpdate(prevProps: RenderLayerProps) {\n    const active = this.getProps().active;\n    if (!prevProps.active && active) {\n      this.attachListeners();\n    }\n    if (prevProps.active && !active) {\n      this.detachListeners();\n    }\n  }\n\n  public componentWillUnmount() {\n    if (this.getProps().active) {\n      this.detachListeners();\n    }\n  }\n\n  public render() {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        {React.Children.only(this.props.children)}\n      </CommonWrapper>\n    );\n  }\n\n  private getAnchorNode(): Nullable<Element> {\n    const { getAnchorElement } = this.props;\n    return getAnchorElement ? getAnchorElement() : getRootNode(this);\n  }\n\n  private attachListeners() {\n    const node = this.getAnchorNode();\n    if (!node) {\n      return;\n    }\n\n    this.focusOutsideListenerToken = listenFocusOutside(() => [node], this.handleFocusOutside);\n    window.addEventListener('blur', this.handleFocusOutside);\n    document.addEventListener(\n      'ontouchstart' in document.documentElement ? 'touchstart' : 'mousedown',\n      this.handleNativeDocClick,\n    );\n  }\n\n  private detachListeners() {\n    if (this.focusOutsideListenerToken) {\n      this.focusOutsideListenerToken.remove();\n      this.focusOutsideListenerToken = null;\n    }\n\n    window.removeEventListener('blur', this.handleFocusOutside);\n    document.removeEventListener(\n      'ontouchstart' in document.documentElement ? 'touchstart' : 'mousedown',\n      this.handleNativeDocClick,\n    );\n  }\n\n  private handleFocusOutside = (event: Event) => {\n    if (this.props.onFocusOutside) {\n      this.props.onFocusOutside(event);\n    }\n  };\n\n  private handleNativeDocClick = (event: Event) => {\n    const target = event.target || event.srcElement;\n    const node = this.getAnchorNode();\n\n    if (!node || (target instanceof Element && containsTargetOrRenderContainer(target)(node))) {\n      return;\n    }\n\n    if (this.props.onClickOutside) {\n      this.props.onClickOutside(event);\n    }\n  };\n}\n"]}

package/cjs/internal/ThemePlayground/VariableValue.d.ts

@@ -7,16 +7,16 @@ export interface VariableValueProps {
     variable: string;
     theme: Theme;
     baseVariables: Array<keyof Theme>;
-    deprecated: boolean;
+    deprecated?: boolean;
 }
 export interface VariableValueState {
     value: string;
     editing: boolean;
 }
+declare type DefaultProps = Required<Pick<VariableValueProps, 'deprecated'>>;
 export declare class VariableValue extends React.Component<VariableValueProps, VariableValueState> {
-    static defaultProps: {
-        deprecated: boolean;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     state: {
         value: string;
         editing: boolean;
@@ -43,3 +43,4 @@ export declare class VariableValue extends React.Component<VariableValueProps, V
     private handleBlur;
     private emitterEventHandler;
 }
+export {};

package/cjs/internal/ThemePlayground/VariableValue.js

@@ -11,6 +11,7 @@ var _Link = require("../../components/Link");
 var _Hint = require("../../components/Hint");
 var _utils = require("../../lib/utils");
 var _Emotion = require("../../lib/theming/Emotion");
+var _createPropsGetter = require("../../lib/createPropsGetter");
 
 var _Playground = require("./Playground.styles");
 
@@ -31,10 +32,13 @@ var emitter = new _eventemitter.default();var
 
 
 
+
+
 VariableValue = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(VariableValue, _React$Component);function VariableValue() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
+    getProps = (0, _createPropsGetter.createPropsGetter)(VariableValue.defaultProps);_this.
     state = {
       value: _this.props.value,
       editing: false };_this.
@@ -81,6 +85,7 @@ VariableValue = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.de
 
 
 
+
 
 
     renderBaseVariableLink = function () {
@@ -194,7 +199,7 @@ VariableValue = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.de
       if (name === _this.props.variable && _this.rootElement) {
         _this.rootElement.focus();
       }
-    };return _this;}var _proto = VariableValue.prototype;_proto.render = function render() {var _cx;var _this$props2 = this.props,variable = _this$props2.variable,theme = _this$props2.theme,baseVariables = _this$props2.baseVariables,deprecated = _this$props2.deprecated;return /*#__PURE__*/_react.default.createElement("div", { className: _Playground.styles.variable(theme), ref: this.rootRef, tabIndex: 0 }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Playground.styles.variableName(theme), (_cx = {}, _cx[_Playground.styles.deprecated()] = deprecated, _cx)), title: variable }, variable + ": "), baseVariables.length > 0 && !this.state.editing ? this.renderBaseVariableLink() : this.renderInputWrapper());};_proto.componentDidMount = function componentDidMount() {var _this2 = this;if (!this.subscription) {emitter.addListener('clicked', this.emitterEventHandler);this.subscription = { remove: function remove() {emitter.removeListener('clicked', _this2.emitterEventHandler);} };}};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {if (prevProps.value !== this.props.value) {this.setState({ value: this.props.value });}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.subscription) {this.subscription.remove();}if (this.debounceInterval !== undefined) {clearInterval(this.debounceInterval);}};_proto.renderInput = function renderInput() {return /*#__PURE__*/_react.default.createElement(_Input.Input, { leftIcon: isColorExtended(this.state.value) && this.colorIcon(), value: this.state.value, onValueChange: this.handleChange, onBlur: this.handleBlur, align: 'right', width: this.state.editing ? 225 : 250, error: this.props.isError });};_proto.renderRollbackIcon = function renderRollbackIcon() {return /*#__PURE__*/_react.default.createElement(_Hint.Hint, { text: 'Вернуться к базовой переменной' }, /*#__PURE__*/_react.default.createElement("div", { className: _Playground.styles.linkRoot() }, /*#__PURE__*/_react.default.createElement(_Link.Link, { icon: /*#__PURE__*/_react.default.createElement(_Delete.default, null), onClick: this.rollbackToBaseVariable })));};return VariableValue;}(_react.default.Component);exports.VariableValue = VariableValue;VariableValue.defaultProps = { deprecated: false };var
+    };return _this;}var _proto = VariableValue.prototype;_proto.render = function render() {var _cx;var _this$props2 = this.props,variable = _this$props2.variable,theme = _this$props2.theme,baseVariables = _this$props2.baseVariables;var deprecated = this.getProps().deprecated;return /*#__PURE__*/_react.default.createElement("div", { className: _Playground.styles.variable(theme), ref: this.rootRef, tabIndex: 0 }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Playground.styles.variableName(theme), (_cx = {}, _cx[_Playground.styles.deprecated()] = deprecated, _cx)), title: variable }, variable + ": "), baseVariables.length > 0 && !this.state.editing ? this.renderBaseVariableLink() : this.renderInputWrapper());};_proto.componentDidMount = function componentDidMount() {var _this2 = this;if (!this.subscription) {emitter.addListener('clicked', this.emitterEventHandler);this.subscription = { remove: function remove() {emitter.removeListener('clicked', _this2.emitterEventHandler);} };}};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {if (prevProps.value !== this.props.value) {this.setState({ value: this.props.value });}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.subscription) {this.subscription.remove();}if (this.debounceInterval !== undefined) {clearInterval(this.debounceInterval);}};_proto.renderInput = function renderInput() {return /*#__PURE__*/_react.default.createElement(_Input.Input, { leftIcon: isColorExtended(this.state.value) && this.colorIcon(), value: this.state.value, onValueChange: this.handleChange, onBlur: this.handleBlur, align: 'right', width: this.state.editing ? 225 : 250, error: this.props.isError });};_proto.renderRollbackIcon = function renderRollbackIcon() {return /*#__PURE__*/_react.default.createElement(_Hint.Hint, { text: 'Вернуться к базовой переменной' }, /*#__PURE__*/_react.default.createElement("div", { className: _Playground.styles.linkRoot() }, /*#__PURE__*/_react.default.createElement(_Link.Link, { icon: /*#__PURE__*/_react.default.createElement(_Delete.default, null), onClick: this.rollbackToBaseVariable })));};return VariableValue;}(_react.default.Component);exports.VariableValue = VariableValue;VariableValue.defaultProps = { deprecated: false };var
 
 
 

package/cjs/internal/ThemePlayground/VariableValue.js.map

@@ -1 +1 @@
-{"version":3,"sources":["VariableValue.tsx"],"names":["emitter","EventEmitter","VariableValue","state","value","props","editing","subscription","rootElement","debounceTimeout","debounceInterval","undefined","renderBaseVariableLink","baseVariables","styles","baseVariableRoot","colorIcon","baseLinkWrapper","textAlign","map","v","emitClickEvent","handleEditLinkClick","renderInputWrapper","renderInput","renderRollbackIcon","rootRef","instance","background","setState","rollbackToBaseVariable","variable","emit","handleChange","window","setInterval","debounceHandler","onChange","clearInterval","handleBlur","emitterEventHandler","name","focus","render","theme","deprecated","variableName","length","componentDidMount","addListener","remove","removeListener","componentDidUpdate","prevProps","componentWillUnmount","isColorExtended","isError","linkRoot","React","Component","defaultProps","BaseVariableLink","baseVariable","getColorValue","color","colorValue","style","Option"],"mappings":"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","sourcesContent":["import React from 'react';\nimport EditIcon from '@skbkontur/react-icons/Edit';\nimport DeleteIcon from '@skbkontur/react-icons/Delete';\nimport EventEmitter from 'eventemitter3';\n\nimport { isColor } from '../../lib/styles/ColorHelpers';\nimport { Input } from '../../components/Input';\nimport { Gapped } from '../../components/Gapped';\nimport { Theme } from '../../lib/theming/Theme';\nimport { Link } from '../../components/Link';\nimport { Hint } from '../../components/Hint';\nimport { isFunction } from '../../lib/utils';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './Playground.styles';\n\nconst emitter = new EventEmitter();\n\nexport interface VariableValueProps {\n  onChange: (variable: keyof Theme, value: string) => void;\n  value: string;\n  isError: boolean;\n  variable: string;\n  theme: Theme;\n  baseVariables: Array<keyof Theme>;\n  deprecated: boolean;\n}\n\nexport interface VariableValueState {\n  value: string;\n  editing: boolean;\n}\n\nexport class VariableValue extends React.Component<VariableValueProps, VariableValueState> {\n  public static defaultProps = {\n    deprecated: false,\n  };\n  public state = {\n    value: this.props.value,\n    editing: false,\n  };\n  private subscription: { remove: () => void } | null = null;\n  private rootElement: HTMLElement | null = null;\n  private readonly debounceTimeout = 500;\n  private debounceInterval: number | undefined = undefined;\n\n  public render() {\n    const { variable, theme, baseVariables, deprecated } = this.props;\n    return (\n      <div className={styles.variable(theme)} ref={this.rootRef} tabIndex={0}>\n        <div\n          className={cx(styles.variableName(theme), { [styles.deprecated()]: deprecated })}\n          title={variable}\n        >{`${variable}: `}</div>\n        {baseVariables.length > 0 && !this.state.editing ? this.renderBaseVariableLink() : this.renderInputWrapper()}\n      </div>\n    );\n  }\n\n  public componentDidMount(): void {\n    if (!this.subscription) {\n      emitter.addListener('clicked', this.emitterEventHandler);\n      this.subscription = {\n        remove: () => {\n          emitter.removeListener('clicked', this.emitterEventHandler);\n        },\n      };\n    }\n  }\n\n  public componentDidUpdate(prevProps: VariableValueProps) {\n    if (prevProps.value !== this.props.value) {\n      this.setState({ value: this.props.value });\n    }\n  }\n\n  public componentWillUnmount(): void {\n    if (this.subscription) {\n      this.subscription.remove();\n    }\n    if (this.debounceInterval !== undefined) {\n      clearInterval(this.debounceInterval);\n    }\n  }\n\n  private renderBaseVariableLink = () => {\n    const baseVariables = this.props.baseVariables;\n    return (\n      <div className={styles.baseVariableRoot()}>\n        {this.colorIcon()}\n        <div className={styles.baseLinkWrapper()}>\n          <Gapped>\n            <div style={{ textAlign: 'right' }}>\n              <Gapped vertical>\n                {baseVariables.map((v) => (\n                  <BaseVariableLink key={v} baseVariable={v} emitClickEvent={this.emitClickEvent} />\n                ))}\n              </Gapped>\n            </div>\n            <Hint text={'Изменить значение'}>\n              <Link icon={<EditIcon />} onClick={this.handleEditLinkClick} />\n            </Hint>\n          </Gapped>\n        </div>\n      </div>\n    );\n  };\n\n  private renderInputWrapper = () => {\n    return this.state.editing ? (\n      <Gapped>\n        {this.renderInput()}\n        {this.renderRollbackIcon()}\n      </Gapped>\n    ) : (\n      this.renderInput()\n    );\n  };\n\n  private renderInput() {\n    return (\n      <Input\n        leftIcon={isColorExtended(this.state.value) && this.colorIcon()}\n        value={this.state.value}\n        onValueChange={this.handleChange}\n        onBlur={this.handleBlur}\n        align={'right'}\n        width={this.state.editing ? 225 : 250}\n        error={this.props.isError}\n      />\n    );\n  }\n\n  private renderRollbackIcon() {\n    return (\n      <Hint text={'Вернуться к базовой переменной'}>\n        <div className={styles.linkRoot()}>\n          <Link icon={<DeleteIcon />} onClick={this.rollbackToBaseVariable} />\n        </div>\n      </Hint>\n    );\n  }\n\n  private rootRef = (instance: HTMLElement | null) => {\n    this.rootElement = instance;\n  };\n\n  private colorIcon = () => {\n    return <div className={styles.colorIcon()} style={{ background: this.state.value }} />;\n  };\n\n  private handleEditLinkClick = () => {\n    this.setState({\n      editing: true,\n    });\n  };\n\n  private rollbackToBaseVariable = () => {\n    this.setState({\n      editing: false,\n      value: this.props.value,\n    });\n  };\n\n  private emitClickEvent = (variable: string | number) => {\n    emitter.emit('clicked', variable);\n  };\n\n  private handleChange = (value: string) => {\n    this.setState({\n      value,\n    });\n\n    if (this.debounceInterval === undefined) {\n      this.debounceInterval = window.setInterval(this.debounceHandler, this.debounceTimeout);\n    }\n  };\n\n  private debounceHandler = () => {\n    const { variable, onChange } = this.props;\n\n    onChange(variable as keyof Theme, this.state.value);\n    clearInterval(this.debounceInterval);\n    this.debounceInterval = undefined;\n  };\n\n  private handleBlur = () => {\n    this.setState({\n      editing: false,\n    });\n  };\n\n  private emitterEventHandler = (name: keyof Theme) => {\n    if (name === this.props.variable && this.rootElement) {\n      this.rootElement.focus();\n    }\n  };\n}\n\ninterface BaseVariableLinkProps {\n  baseVariable: string | number;\n  emitClickEvent: (baseVariable: string | number) => void;\n}\nclass BaseVariableLink extends React.Component<BaseVariableLinkProps> {\n  public render() {\n    return <Link onClick={this.emitClickEvent}>{this.props.baseVariable}</Link>;\n  }\n  private emitClickEvent = () => {\n    this.props.emitClickEvent(this.props.baseVariable);\n  };\n}\n\ntype Color = string | (() => string);\n\nconst getColorValue = (color: Color) => {\n  if (isFunction(color)) {\n    return color();\n  }\n\n  return color;\n};\n\nfunction isColorExtended(color: Color) {\n  const colorValue = getColorValue(color);\n\n  const style = new Option().style;\n  style.color = colorValue;\n\n  if (colorValue) {\n    return isColor(colorValue) || style.color === colorValue;\n  }\n\n  return false;\n}\n"]}
+{"version":3,"sources":["VariableValue.tsx"],"names":["emitter","EventEmitter","VariableValue","getProps","defaultProps","state","value","props","editing","subscription","rootElement","debounceTimeout","debounceInterval","undefined","renderBaseVariableLink","baseVariables","styles","baseVariableRoot","colorIcon","baseLinkWrapper","textAlign","map","v","emitClickEvent","handleEditLinkClick","renderInputWrapper","renderInput","renderRollbackIcon","rootRef","instance","background","setState","rollbackToBaseVariable","variable","emit","handleChange","window","setInterval","debounceHandler","onChange","clearInterval","handleBlur","emitterEventHandler","name","focus","render","theme","deprecated","variableName","length","componentDidMount","addListener","remove","removeListener","componentDidUpdate","prevProps","componentWillUnmount","isColorExtended","isError","linkRoot","React","Component","BaseVariableLink","baseVariable","getColorValue","color","colorValue","style","Option"],"mappings":"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","sourcesContent":["import React from 'react';\nimport EditIcon from '@skbkontur/react-icons/Edit';\nimport DeleteIcon from '@skbkontur/react-icons/Delete';\nimport EventEmitter from 'eventemitter3';\n\nimport { isColor } from '../../lib/styles/ColorHelpers';\nimport { Input } from '../../components/Input';\nimport { Gapped } from '../../components/Gapped';\nimport { Theme } from '../../lib/theming/Theme';\nimport { Link } from '../../components/Link';\nimport { Hint } from '../../components/Hint';\nimport { isFunction } from '../../lib/utils';\nimport { cx } from '../../lib/theming/Emotion';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Playground.styles';\n\nconst emitter = new EventEmitter();\n\nexport interface VariableValueProps {\n  onChange: (variable: keyof Theme, value: string) => void;\n  value: string;\n  isError: boolean;\n  variable: string;\n  theme: Theme;\n  baseVariables: Array<keyof Theme>;\n  deprecated?: boolean;\n}\n\nexport interface VariableValueState {\n  value: string;\n  editing: boolean;\n}\n\ntype DefaultProps = Required<Pick<VariableValueProps, 'deprecated'>>;\n\nexport class VariableValue extends React.Component<VariableValueProps, VariableValueState> {\n  public static defaultProps: DefaultProps = {\n    deprecated: false,\n  };\n  private getProps = createPropsGetter(VariableValue.defaultProps);\n  public state = {\n    value: this.props.value,\n    editing: false,\n  };\n  private subscription: { remove: () => void } | null = null;\n  private rootElement: HTMLElement | null = null;\n  private readonly debounceTimeout = 500;\n  private debounceInterval: number | undefined = undefined;\n\n  public render() {\n    const { variable, theme, baseVariables } = this.props;\n    const deprecated = this.getProps().deprecated;\n    return (\n      <div className={styles.variable(theme)} ref={this.rootRef} tabIndex={0}>\n        <div\n          className={cx(styles.variableName(theme), { [styles.deprecated()]: deprecated })}\n          title={variable}\n        >{`${variable}: `}</div>\n        {baseVariables.length > 0 && !this.state.editing ? this.renderBaseVariableLink() : this.renderInputWrapper()}\n      </div>\n    );\n  }\n\n  public componentDidMount(): void {\n    if (!this.subscription) {\n      emitter.addListener('clicked', this.emitterEventHandler);\n      this.subscription = {\n        remove: () => {\n          emitter.removeListener('clicked', this.emitterEventHandler);\n        },\n      };\n    }\n  }\n\n  public componentDidUpdate(prevProps: VariableValueProps) {\n    if (prevProps.value !== this.props.value) {\n      this.setState({ value: this.props.value });\n    }\n  }\n\n  public componentWillUnmount(): void {\n    if (this.subscription) {\n      this.subscription.remove();\n    }\n    if (this.debounceInterval !== undefined) {\n      clearInterval(this.debounceInterval);\n    }\n  }\n\n  private renderBaseVariableLink = () => {\n    const baseVariables = this.props.baseVariables;\n    return (\n      <div className={styles.baseVariableRoot()}>\n        {this.colorIcon()}\n        <div className={styles.baseLinkWrapper()}>\n          <Gapped>\n            <div style={{ textAlign: 'right' }}>\n              <Gapped vertical>\n                {baseVariables.map((v) => (\n                  <BaseVariableLink key={v} baseVariable={v} emitClickEvent={this.emitClickEvent} />\n                ))}\n              </Gapped>\n            </div>\n            <Hint text={'Изменить значение'}>\n              <Link icon={<EditIcon />} onClick={this.handleEditLinkClick} />\n            </Hint>\n          </Gapped>\n        </div>\n      </div>\n    );\n  };\n\n  private renderInputWrapper = () => {\n    return this.state.editing ? (\n      <Gapped>\n        {this.renderInput()}\n        {this.renderRollbackIcon()}\n      </Gapped>\n    ) : (\n      this.renderInput()\n    );\n  };\n\n  private renderInput() {\n    return (\n      <Input\n        leftIcon={isColorExtended(this.state.value) && this.colorIcon()}\n        value={this.state.value}\n        onValueChange={this.handleChange}\n        onBlur={this.handleBlur}\n        align={'right'}\n        width={this.state.editing ? 225 : 250}\n        error={this.props.isError}\n      />\n    );\n  }\n\n  private renderRollbackIcon() {\n    return (\n      <Hint text={'Вернуться к базовой переменной'}>\n        <div className={styles.linkRoot()}>\n          <Link icon={<DeleteIcon />} onClick={this.rollbackToBaseVariable} />\n        </div>\n      </Hint>\n    );\n  }\n\n  private rootRef = (instance: HTMLElement | null) => {\n    this.rootElement = instance;\n  };\n\n  private colorIcon = () => {\n    return <div className={styles.colorIcon()} style={{ background: this.state.value }} />;\n  };\n\n  private handleEditLinkClick = () => {\n    this.setState({\n      editing: true,\n    });\n  };\n\n  private rollbackToBaseVariable = () => {\n    this.setState({\n      editing: false,\n      value: this.props.value,\n    });\n  };\n\n  private emitClickEvent = (variable: string | number) => {\n    emitter.emit('clicked', variable);\n  };\n\n  private handleChange = (value: string) => {\n    this.setState({\n      value,\n    });\n\n    if (this.debounceInterval === undefined) {\n      this.debounceInterval = window.setInterval(this.debounceHandler, this.debounceTimeout);\n    }\n  };\n\n  private debounceHandler = () => {\n    const { variable, onChange } = this.props;\n\n    onChange(variable as keyof Theme, this.state.value);\n    clearInterval(this.debounceInterval);\n    this.debounceInterval = undefined;\n  };\n\n  private handleBlur = () => {\n    this.setState({\n      editing: false,\n    });\n  };\n\n  private emitterEventHandler = (name: keyof Theme) => {\n    if (name === this.props.variable && this.rootElement) {\n      this.rootElement.focus();\n    }\n  };\n}\n\ninterface BaseVariableLinkProps {\n  baseVariable: string | number;\n  emitClickEvent: (baseVariable: string | number) => void;\n}\nclass BaseVariableLink extends React.Component<BaseVariableLinkProps> {\n  public render() {\n    return <Link onClick={this.emitClickEvent}>{this.props.baseVariable}</Link>;\n  }\n  private emitClickEvent = () => {\n    this.props.emitClickEvent(this.props.baseVariable);\n  };\n}\n\ntype Color = string | (() => string);\n\nconst getColorValue = (color: Color) => {\n  if (isFunction(color)) {\n    return color();\n  }\n\n  return color;\n};\n\nfunction isColorExtended(color: Color) {\n  const colorValue = getColorValue(color);\n\n  const style = new Option().style;\n  style.color = colorValue;\n\n  if (colorValue) {\n    return isColor(colorValue) || style.color === colorValue;\n  }\n\n  return false;\n}\n"]}