@skbkontur/react-ui 4.2.2 → 4.4.0

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

@@ -1 +1 @@
-{"version":3,"sources":["VariableValue.tsx"],"names":["React","EditIcon","DeleteIcon","EventEmitter","isColor","Input","Gapped","Link","Hint","isFunction","cx","styles","emitter","VariableValue","state","value","props","editing","subscription","rootElement","debounceTimeout","debounceInterval","undefined","renderBaseVariableLink","baseVariables","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","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":["React","EditIcon","DeleteIcon","EventEmitter","isColor","Input","Gapped","Link","Hint","isFunction","cx","createPropsGetter","styles","emitter","VariableValue","getProps","defaultProps","state","value","props","editing","subscription","rootElement","debounceTimeout","debounceInterval","undefined","renderBaseVariableLink","baseVariables","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","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: VariableValueState = {\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"]}

package/internal/ThemePlayground/VariableValue.d.ts

@@ -7,20 +7,17 @@ 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;
-    };
-    state: {
-        value: string;
-        editing: boolean;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
+    state: VariableValueState;
     private subscription;
     private rootElement;
     private readonly debounceTimeout;
@@ -43,3 +40,4 @@ export declare class VariableValue extends React.Component<VariableValueProps, V
     private handleBlur;
     private emitterEventHandler;
 }
+export {};

package/internal/ThemePlayground/helpers/helpers.js

@@ -4,7 +4,6 @@ import { Checkbox } from "../../../components/Checkbox";
 export var getComponentsFromPropsList = function getComponentsFromPropsList(component, propsList) {
   return propsList.reduce(function (result, props, index) {
     // NOTE: все это ради чекбокса с фокусом, т.к. нет ни focused, ни autofocus; а ref+focus() снаружи нестабилен
-    // @ts-ignore
     var isCheckbox = component.type === Checkbox;
 
     if (isCheckbox) {

package/internal/ThemePlayground/helpers/helpers.js.map

@@ -1 +1 @@
-{"version":3,"sources":["helpers.tsx"],"names":["React","Checkbox","getComponentsFromPropsList","component","propsList","reduce","result","props","index","isCheckbox","type","checkboxProps","focused","ref","el","setState","focusedByTab","elementWithProps","cloneElement","key"],"mappings":"0DAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,QAAT,QAAyB,2BAAzB;;AAEA,OAAO,IAAMC,0BAA0B,GAAG,SAA7BA,0BAA6B,CAAeC,SAAf,EAAiDC,SAAjD,EAAoE;AAC5G,SAAOA,SAAS,CAACC,MAAV,CAAiB,UAACC,MAAD,EAAuCC,KAAvC,EAA8CC,KAA9C,EAAwD;AAC9E;AACA;AACA,QAAMC,UAAU,GAAGN,SAAS,CAACO,IAAV,KAAmBT,QAAtC;AACA,QAAIQ,UAAJ,EAAgB;AACd,UAAME,aAAa,GAAGJ,KAAtB;AACA,UAAII,aAAa,CAACC,OAAlB,EAA2B;AACzBD,QAAAA,aAAa,CAACE,GAAd,GAAoB,UAACC,EAAD,EAAQ;AAC1B,cAAIA,EAAJ,EAAQ;AACNA,YAAAA,EAAE,CAACC,QAAH,CAAY,EAAEC,YAAY,EAAE,IAAhB,EAAZ;AACD;AACF,SAJD;AAKA,eAAOL,aAAa,CAACC,OAArB;AACD;AACF;;AAED,QAAMK,gBAAgB,gBAAGjB,KAAK,CAACkB,YAAN,CAAmBf,SAAnB,eAAmCI,KAAnC,IAA0CY,GAAG,EAAEX,KAA/C,IAAzB;;AAEA,qBAAWF,MAAX,GAAmBW,gBAAnB;AACD,GAnBM,EAmBJ,EAnBI,CAAP;AAoBD,CArBM","sourcesContent":["import React from 'react';\n\nimport { Checkbox } from '../../components/Checkbox';\n\nexport const getComponentsFromPropsList = <P extends {}>(component: React.ReactElement<P>, propsList: P[]) => {\n  return propsList.reduce((result: Array<React.ReactElement<P>>, props, index) => {\n    // NOTE: все это ради чекбокса с фокусом, т.к. нет ни focused, ни autofocus; а ref+focus() снаружи нестабилен\n    // @ts-ignore\n    const isCheckbox = component.type === Checkbox;\n    if (isCheckbox) {\n      const checkboxProps = props as unknown as { ref: (el: Checkbox) => void; focused?: boolean };\n      if (checkboxProps.focused) {\n        checkboxProps.ref = (el) => {\n          if (el) {\n            el.setState({ focusedByTab: true });\n          }\n        };\n        delete checkboxProps.focused;\n      }\n    }\n\n    const elementWithProps = React.cloneElement(component, { ...props, key: index });\n\n    return [...result, elementWithProps];\n  }, []);\n};\n"]}
+{"version":3,"sources":["helpers.tsx"],"names":["React","Checkbox","getComponentsFromPropsList","component","propsList","reduce","result","props","index","isCheckbox","type","checkboxProps","focused","ref","el","setState","focusedByTab","elementWithProps","cloneElement","key"],"mappings":"0DAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,QAAT,QAAyB,2BAAzB;;AAEA,OAAO,IAAMC,0BAA0B,GAAG,SAA7BA,0BAA6B;AACxCC,SADwC;AAExCC,SAFwC;AAGrC;AACH,SAAOA,SAAS,CAACC,MAAV,CAAiB,UAACC,MAAD,EAAuCC,KAAvC,EAA8CC,KAA9C,EAAwD;AAC9E;AACA,QAAMC,UAAU,GAAGN,SAAS,CAACO,IAAV,KAAmBT,QAAtC;AACA,QAAIQ,UAAJ,EAAgB;AACd,UAAME,aAAa,GAAGJ,KAAtB;AACA,UAAII,aAAa,CAACC,OAAlB,EAA2B;AACzBD,QAAAA,aAAa,CAACE,GAAd,GAAoB,UAACC,EAAD,EAAQ;AAC1B,cAAIA,EAAJ,EAAQ;AACNA,YAAAA,EAAE,CAACC,QAAH,CAAY,EAAEC,YAAY,EAAE,IAAhB,EAAZ;AACD;AACF,SAJD;AAKA,eAAOL,aAAa,CAACC,OAArB;AACD;AACF;;AAED,QAAMK,gBAAgB,gBAAGjB,KAAK,CAACkB,YAAN,CAAmBf,SAAnB,eAAmCI,KAAnC,IAA0CY,GAAG,EAAEX,KAA/C,IAAzB;;AAEA,qBAAWF,MAAX,GAAmBW,gBAAnB;AACD,GAlBM,EAkBJ,EAlBI,CAAP;AAmBD,CAvBM","sourcesContent":["import React from 'react';\n\nimport { Checkbox } from '../../components/Checkbox';\n\nexport const getComponentsFromPropsList = <P extends Record<string, string>>(\n  component: React.ReactElement<P>,\n  propsList: P[],\n) => {\n  return propsList.reduce((result: Array<React.ReactElement<P>>, props, index) => {\n    // NOTE: все это ради чекбокса с фокусом, т.к. нет ни focused, ни autofocus; а ref+focus() снаружи нестабилен\n    const isCheckbox = component.type === Checkbox;\n    if (isCheckbox) {\n      const checkboxProps = props as unknown as { ref: (el: Checkbox) => void; focused?: boolean };\n      if (checkboxProps.focused) {\n        checkboxProps.ref = (el) => {\n          if (el) {\n            el.setState({ focusedByTab: true });\n          }\n        };\n        delete checkboxProps.focused;\n      }\n    }\n\n    const elementWithProps = React.cloneElement(component, { ...props, key: index });\n\n    return [...result, elementWithProps];\n  }, []);\n};\n"]}

package/internal/ThemePlayground/helpers.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const getComponentsFromPropsList: <P extends {}>(component: React.ReactElement<P, string | React.JSXElementConstructor<any>>, propsList: P[]) => React.ReactElement<P, string | React.JSXElementConstructor<any>>[];
+export declare const getComponentsFromPropsList: <P extends Record<string, string>>(component: React.ReactElement<P, string | React.JSXElementConstructor<any>>, propsList: P[]) => React.ReactElement<P, string | React.JSXElementConstructor<any>>[];

package/internal/ThemeShowcase/ThemeShowcase/ThemeShowcase.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ThemeShowcase.tsx"],"names":["React","isColor","DEFAULT_THEME","defaultVariables","DARK_THEME","darkVariables","ComboBox","Gapped","Link","Sticky","ColorFunctions","Tooltip","IS_PROXY_SUPPORTED","cx","ThemeContext","ALL_USED_VARIABLES","CALLS_COUNT","COMPONENT_DESCRIPTIONS","COMPONENT_DESCRIPTIONS_BY_VARIABLE","EXECUTION_TIME","styles","EMPTY_ARRAY","ALL_VARIABLES","Object","keys","ThemeShowcase","props","state","isUnmounting","variablesDiff","getItems","query","Promise","resolve","getValues","handleVariableChange","item","setState","selectedVariable","handleUnexpectedVariableInput","values","length","resetVariable","undefined","isDebugMode","forEach","variable","found","includes","push","render","descriptionsToRender","value","callsCount","executionTime","toFixed","theme","searchBar","sort","map","componentName","componentWillUnmount","lowerCaseQuery","toLowerCase","trim","allItems","filter","usedVariable","startsWith","usedVariableName","label","Component","ComponentShowcase","name","description","onVariableSelect","elements","isSticky","heading","headingSticky","table","headerCell","width","el","ComponentShowcaseRow","element","row","rowSpan","variables","invisibleRow","invisibleDarkRow","cell","majorCell","elementName","invisibleCell","varName","dependencies","variableDefault","variableDark","hasNoVariables","suspiciousRow","darkRow","VariableName","handleVariableSelect","variableName","renderDependencies","dependency","DependencyName","dependencyName","dependencyDefault","dependencyDark","handleDependencySelect","onDependencySelect","VariableValue","valueIsColor","valueIsGradient","isGradient","hasExample","borderColor","contrast","colorExample","background","ShowUnusedVariables","diff","unusedVariablesWarning","v","input"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { isColor } from '../../lib/styles/ColorHelpers';\nimport { DEFAULT_THEME as defaultVariables } from '../../lib/theming/themes/DefaultTheme';\nimport { DARK_THEME as darkVariables } from '../../lib/theming/themes/DarkTheme';\nimport { ComboBox, ComboBoxItem } from '../../components/ComboBox';\nimport { Gapped } from '../../components/Gapped';\nimport { Link } from '../../components/Link';\nimport { Sticky } from '../../components/Sticky';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Tooltip } from '../../components/Tooltip';\nimport { IS_PROXY_SUPPORTED } from '../../lib/Supports';\nimport { Theme } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport {\n  ALL_USED_VARIABLES,\n  CALLS_COUNT,\n  COMPONENT_DESCRIPTIONS,\n  COMPONENT_DESCRIPTIONS_BY_VARIABLE,\n  ComponentDescriptionType,\n  ComponentRowDescriptionType,\n  EXECUTION_TIME,\n} from './VariablesCollector';\nimport { styles } from './ThemeShowcase.styles';\n\nconst EMPTY_ARRAY: string[] = [];\n\nconst ALL_VARIABLES = Object.keys(defaultVariables) as Array<keyof Theme>;\n\ninterface ShowcaseProps {\n  isDebugMode?: boolean;\n}\ninterface ShowcaseState {\n  selectedVariable?: ComboBoxItem;\n}\n\nexport class ThemeShowcase extends React.Component<ShowcaseProps, ShowcaseState> {\n  public state: ShowcaseState = {};\n\n  private isUnmounting = false;\n  private variablesDiff: string[] = [];\n\n  constructor(props: ShowcaseProps) {\n    super(props);\n    if (props.isDebugMode) {\n      ALL_VARIABLES.forEach((variable) => {\n        const found = ALL_USED_VARIABLES.includes(variable);\n        if (!found) {\n          this.variablesDiff.push(variable);\n        }\n      });\n    }\n  }\n\n  public render() {\n    if (!IS_PROXY_SUPPORTED) {\n      return (\n        <div>\n          Таблица использования переменных доступна только в{' '}\n          <Link href={'https://caniuse.com/#feat=proxy'} target={'_blank'}>\n            браузерах с поддержкой Proxy\n          </Link>\n          .\n        </div>\n      );\n    }\n\n    const selectedVariable = this.state.selectedVariable;\n    const descriptionsToRender = selectedVariable\n      ? COMPONENT_DESCRIPTIONS_BY_VARIABLE[selectedVariable.value] || {}\n      : COMPONENT_DESCRIPTIONS;\n\n    const isDebugMode = this.props.isDebugMode;\n    const callsCount = isDebugMode ? `(${CALLS_COUNT} вызовов)` : '';\n    const executionTime = isDebugMode ? `Сгенерировано за ${EXECUTION_TIME.toFixed(3)}ms` : '';\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          return (\n            <Gapped wrap gap={30} verticalAlign={'top'}>\n              <div>\n                <Sticky side={'top'}>\n                  <div className={styles.searchBar(theme)} data-perf-info={`${executionTime} ${callsCount}`}>\n                    <Gapped gap={15}>\n                      <ComboBox\n                        getItems={this.getItems}\n                        value={selectedVariable}\n                        onValueChange={this.handleVariableChange}\n                        onUnexpectedInput={this.handleUnexpectedVariableInput}\n                        placeholder={'поиск по названию переменной'}\n                      />\n                      {!!selectedVariable && <Link onClick={this.resetVariable}>сбросить</Link>}\n                    </Gapped>\n                  </div>\n                </Sticky>\n                {Object.keys(descriptionsToRender)\n                  .sort()\n                  .map((componentName) => (\n                    <ComponentShowcase\n                      key={componentName}\n                      name={componentName}\n                      description={descriptionsToRender[componentName]}\n                      isDebugMode={isDebugMode}\n                      onVariableSelect={this.handleVariableChange}\n                    />\n                  ))}\n              </div>\n              <ShowUnusedVariables diff={this.variablesDiff} />\n            </Gapped>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n  public componentWillUnmount(): void {\n    this.isUnmounting = true;\n  }\n\n  private getValues(query: string) {\n    const lowerCaseQuery = query && query.toLowerCase().trim();\n    let allItems = ALL_USED_VARIABLES;\n    if (lowerCaseQuery) {\n      allItems = ALL_USED_VARIABLES.filter((usedVariable) => usedVariable.toLowerCase().startsWith(lowerCaseQuery));\n    }\n    return allItems.map((usedVariableName) => ({\n      value: usedVariableName,\n      label: usedVariableName,\n    }));\n  }\n  private getItems = (query: string) => {\n    return Promise.resolve(this.getValues(query));\n  };\n  private handleVariableChange = (item: ComboBoxItem) => {\n    if (!this.isUnmounting) {\n      this.setState({ selectedVariable: item });\n    }\n  };\n  private handleUnexpectedVariableInput = (query: string) => {\n    const values = this.getValues(query);\n    if (values.length > 0) {\n      return values[0];\n    }\n\n    return this.resetVariable();\n  };\n  private resetVariable = () => {\n    if (!this.isUnmounting) {\n      this.setState({ selectedVariable: undefined });\n    }\n  };\n}\n\ninterface ComponentShowcaseProps {\n  name: string;\n  description: ComponentDescriptionType;\n  isDebugMode?: boolean;\n  onVariableSelect: (item: ComboBoxItem) => void;\n}\nclass ComponentShowcase extends React.Component<ComponentShowcaseProps, {}> {\n  public render() {\n    const { name, description, onVariableSelect, isDebugMode } = this.props;\n    const elements = Object.keys(description);\n\n    return elements.length ? (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          return (\n            <React.Fragment>\n              <Sticky side={'top'} offset={40}>\n                {(isSticky) => (\n                  <h2\n                    className={cx({\n                      [styles.heading(theme)]: true,\n                      [styles.headingSticky()]: isSticky,\n                    })}\n                  >\n                    {this.props.name}\n                  </h2>\n                )}\n              </Sticky>\n              <table className={styles.table()}>\n                <thead>\n                  <tr>\n                    <th className={styles.headerCell()} style={{ width: 170 }}>\n                      ClassName\n                    </th>\n                    <th className={styles.headerCell()} style={{ width: 210 }}>\n                      Variable Name\n                    </th>\n                    <th className={styles.headerCell()} style={{ width: 250 }}>\n                      Default Value\n                    </th>\n                    <th className={styles.headerCell()} style={{ width: 250 }}>\n                      Dark Value\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  {elements.map((el) => (\n                    <ComponentShowcaseRow\n                      key={`${name}_${el}`}\n                      element={el}\n                      row={description[el]}\n                      onVariableSelect={onVariableSelect}\n                      isDebugMode={isDebugMode}\n                    />\n                  ))}\n                </tbody>\n              </table>\n            </React.Fragment>\n          );\n        }}\n      </ThemeContext.Consumer>\n    ) : null;\n  }\n}\n\ninterface ComponentShowcaseRowProps {\n  element: string;\n  row: ComponentRowDescriptionType;\n  isDebugMode?: boolean;\n  onVariableSelect: (item: ComboBoxItem) => void;\n}\n\nclass ComponentShowcaseRow extends React.Component<ComponentShowcaseRowProps> {\n  public render() {\n    const { element: el, row, isDebugMode } = this.props;\n    const rowSpan = row.variables.length + 1;\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          return (\n            <React.Fragment>\n              <tr className={cx(styles.invisibleRow(), { [styles.invisibleDarkRow()]: theme === darkVariables })}>\n                <td className={cx(styles.cell(), styles.majorCell())} rowSpan={rowSpan}>\n                  <span className={styles.elementName()}>.{el}</span>\n                </td>\n                <td className={styles.invisibleCell()} />\n                <td className={styles.invisibleCell()} />\n                <td className={styles.invisibleCell()} />\n              </tr>\n              {row.variables.map((varName) => {\n                const dependencies = row.dependencies[varName] || EMPTY_ARRAY;\n                const variableDefault = defaultVariables[varName] as string;\n                const variableDark = darkVariables[varName] as string;\n                const hasNoVariables = isDebugMode && !variableDefault;\n                return (\n                  <tr\n                    key={`${el}_${varName}`}\n                    className={cx(styles.row(), {\n                      [styles.suspiciousRow()]: hasNoVariables,\n                      [styles.darkRow()]: theme === darkVariables,\n                    })}\n                  >\n                    <td className={styles.cell()}>\n                      <VariableName\n                        variableName={varName as string}\n                        dependencies={dependencies}\n                        onVariableSelect={this.props.onVariableSelect}\n                      />\n                    </td>\n                    <td className={styles.cell()}>\n                      <VariableValue value={variableDefault} />\n                    </td>\n                    <td className={styles.cell()}>\n                      <VariableValue value={variableDark} />\n                    </td>\n                  </tr>\n                );\n              })}\n            </React.Fragment>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n}\n\ninterface VariableNameProps {\n  variableName: string;\n  dependencies: Array<keyof Theme>;\n  onVariableSelect: (item: ComboBoxItem) => void;\n}\n\nclass VariableName extends React.Component<VariableNameProps> {\n  public render() {\n    return (\n      <span>\n        <span className={styles.variableName()} onClick={this.handleVariableSelect}>\n          {this.props.variableName}\n        </span>\n        {this.props.dependencies.length > 0 && this.renderDependencies()}\n      </span>\n    );\n  }\n\n  private renderDependencies() {\n    const { dependencies, onVariableSelect } = this.props;\n    return (\n      <React.Fragment>\n        <br />\n        <br />\n        зависит от:\n        {dependencies.map((dependency) => (\n          <DependencyName\n            key={`dependency_${dependency}`}\n            dependencyName={dependency}\n            onDependencySelect={onVariableSelect}\n          />\n        ))}\n      </React.Fragment>\n    );\n  }\n\n  private handleVariableSelect = () => {\n    const { variableName, onVariableSelect } = this.props;\n    if (onVariableSelect) {\n      onVariableSelect({ value: variableName, label: variableName });\n    }\n  };\n}\n\ninterface DependencyNameProps {\n  dependencyName: keyof Theme;\n  onDependencySelect: (item: ComboBoxItem) => void;\n}\nclass DependencyName extends React.Component<DependencyNameProps> {\n  public render() {\n    return (\n      <React.Fragment>\n        <br />\n        &ndash;{' '}\n        <Tooltip trigger={'hover'} render={this.getValues} pos={'right middle'}>\n          <span className={styles.variableName()} onClick={this.handleDependencySelect}>\n            {this.props.dependencyName}\n          </span>\n        </Tooltip>\n      </React.Fragment>\n    );\n  }\n\n  private getValues = () => {\n    const dependencyName = this.props.dependencyName;\n    const dependencyDefault = defaultVariables[dependencyName] as string;\n    const dependencyDark = darkVariables[dependencyName] as string;\n    return (\n      <React.Fragment>\n        <span>Default value: {<VariableValue value={dependencyDefault} />}</span>\n        <span>Dark value: {<VariableValue value={dependencyDark} />}</span>\n      </React.Fragment>\n    );\n  };\n\n  private handleDependencySelect = () => {\n    const { dependencyName, onDependencySelect } = this.props;\n    if (onDependencySelect) {\n      onDependencySelect({ value: dependencyName, label: dependencyName });\n    }\n  };\n}\n\nconst VariableValue = (props: { value: string }) => {\n  const value = props.value;\n  const valueIsColor = isColor(value);\n  const valueIsGradient = isGradient(value);\n  const hasExample = valueIsColor || valueIsGradient;\n  let borderColor = 'transparent';\n  if (hasExample) {\n    borderColor = valueIsColor ? ColorFunctions.contrast(value) : '#000';\n  }\n\n  return (\n    <span className={cx({ [styles.undefined()]: !value })}>\n      {hasExample && <span className={styles.colorExample()} style={{ background: value, borderColor }} />}\n      {value || 'undefined'}\n    </span>\n  );\n};\n\nconst ShowUnusedVariables = (props: { diff: string[] }) => {\n  if (props.diff.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className={styles.unusedVariablesWarning()}>\n      Неиспользованные переменные ({props.diff.length}\n      ):\n      <ul>\n        {props.diff.sort().map((v) => (\n          <li key={v}>{v}</li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n\nfunction isGradient(input: string) {\n  return !!input && input.startsWith('linear-gradient');\n}\n"]}
+{"version":3,"sources":["ThemeShowcase.tsx"],"names":["React","isColor","DEFAULT_THEME","defaultVariables","DARK_THEME","darkVariables","ComboBox","Gapped","Link","Sticky","ColorFunctions","Tooltip","IS_PROXY_SUPPORTED","cx","ThemeContext","ALL_USED_VARIABLES","CALLS_COUNT","COMPONENT_DESCRIPTIONS","COMPONENT_DESCRIPTIONS_BY_VARIABLE","EXECUTION_TIME","styles","EMPTY_ARRAY","ALL_VARIABLES","Object","keys","ThemeShowcase","props","state","isUnmounting","variablesDiff","getItems","query","Promise","resolve","getValues","handleVariableChange","item","setState","selectedVariable","handleUnexpectedVariableInput","values","length","resetVariable","undefined","isDebugMode","forEach","variable","found","includes","push","render","descriptionsToRender","value","callsCount","executionTime","toFixed","theme","searchBar","sort","map","componentName","componentWillUnmount","lowerCaseQuery","toLowerCase","trim","allItems","filter","usedVariable","startsWith","usedVariableName","label","Component","ComponentShowcase","name","description","onVariableSelect","elements","isSticky","heading","headingSticky","table","headerCell","width","el","ComponentShowcaseRow","element","row","rowSpan","variables","invisibleRow","invisibleDarkRow","cell","majorCell","elementName","invisibleCell","varName","dependencies","variableDefault","variableDark","hasNoVariables","suspiciousRow","darkRow","VariableName","handleVariableSelect","variableName","renderDependencies","dependency","DependencyName","dependencyName","dependencyDefault","dependencyDark","handleDependencySelect","onDependencySelect","VariableValue","valueIsColor","valueIsGradient","isGradient","hasExample","borderColor","contrast","colorExample","background","ShowUnusedVariables","diff","unusedVariablesWarning","v","input"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { isColor } from '../../lib/styles/ColorHelpers';\nimport { DEFAULT_THEME as defaultVariables } from '../../lib/theming/themes/DefaultTheme';\nimport { DARK_THEME as darkVariables } from '../../lib/theming/themes/DarkTheme';\nimport { ComboBox, ComboBoxItem } from '../../components/ComboBox';\nimport { Gapped } from '../../components/Gapped';\nimport { Link } from '../../components/Link';\nimport { Sticky } from '../../components/Sticky';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Tooltip } from '../../components/Tooltip';\nimport { IS_PROXY_SUPPORTED } from '../../lib/Supports';\nimport { Theme } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport {\n  ALL_USED_VARIABLES,\n  CALLS_COUNT,\n  COMPONENT_DESCRIPTIONS,\n  COMPONENT_DESCRIPTIONS_BY_VARIABLE,\n  ComponentDescriptionType,\n  ComponentRowDescriptionType,\n  EXECUTION_TIME,\n} from './VariablesCollector';\nimport { styles } from './ThemeShowcase.styles';\n\nconst EMPTY_ARRAY: string[] = [];\n\nconst ALL_VARIABLES = Object.keys(defaultVariables) as Array<keyof Theme>;\n\ninterface ShowcaseProps {\n  isDebugMode?: boolean;\n}\ninterface ShowcaseState {\n  selectedVariable?: ComboBoxItem;\n}\n\nexport class ThemeShowcase extends React.Component<ShowcaseProps, ShowcaseState> {\n  public state: ShowcaseState = {};\n\n  private isUnmounting = false;\n  private variablesDiff: string[] = [];\n\n  constructor(props: ShowcaseProps) {\n    super(props);\n    if (props.isDebugMode) {\n      ALL_VARIABLES.forEach((variable) => {\n        const found = ALL_USED_VARIABLES.includes(variable);\n        if (!found) {\n          this.variablesDiff.push(variable);\n        }\n      });\n    }\n  }\n\n  public render() {\n    if (!IS_PROXY_SUPPORTED) {\n      return (\n        <div>\n          Таблица использования переменных доступна только в{' '}\n          <Link href={'https://caniuse.com/#feat=proxy'} target={'_blank'}>\n            браузерах с поддержкой Proxy\n          </Link>\n          .\n        </div>\n      );\n    }\n\n    const selectedVariable = this.state.selectedVariable;\n    const descriptionsToRender = selectedVariable\n      ? COMPONENT_DESCRIPTIONS_BY_VARIABLE[selectedVariable.value] || {}\n      : COMPONENT_DESCRIPTIONS;\n\n    const isDebugMode = this.props.isDebugMode;\n    const callsCount = isDebugMode ? `(${CALLS_COUNT} вызовов)` : '';\n    const executionTime = isDebugMode ? `Сгенерировано за ${EXECUTION_TIME.toFixed(3)}ms` : '';\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          return (\n            <Gapped wrap gap={30} verticalAlign={'top'}>\n              <div>\n                <Sticky side={'top'}>\n                  <div className={styles.searchBar(theme)} data-perf-info={`${executionTime} ${callsCount}`}>\n                    <Gapped gap={15}>\n                      <ComboBox\n                        getItems={this.getItems}\n                        value={selectedVariable}\n                        onValueChange={this.handleVariableChange}\n                        onUnexpectedInput={this.handleUnexpectedVariableInput}\n                        placeholder={'поиск по названию переменной'}\n                      />\n                      {!!selectedVariable && <Link onClick={this.resetVariable}>сбросить</Link>}\n                    </Gapped>\n                  </div>\n                </Sticky>\n                {Object.keys(descriptionsToRender)\n                  .sort()\n                  .map((componentName) => (\n                    <ComponentShowcase\n                      key={componentName}\n                      name={componentName}\n                      description={descriptionsToRender[componentName]}\n                      isDebugMode={isDebugMode}\n                      onVariableSelect={this.handleVariableChange}\n                    />\n                  ))}\n              </div>\n              <ShowUnusedVariables diff={this.variablesDiff} />\n            </Gapped>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n  public componentWillUnmount(): void {\n    this.isUnmounting = true;\n  }\n\n  private getValues(query: string) {\n    const lowerCaseQuery = query && query.toLowerCase().trim();\n    let allItems = ALL_USED_VARIABLES;\n    if (lowerCaseQuery) {\n      allItems = ALL_USED_VARIABLES.filter((usedVariable) => usedVariable.toLowerCase().startsWith(lowerCaseQuery));\n    }\n    return allItems.map((usedVariableName) => ({\n      value: usedVariableName,\n      label: usedVariableName,\n    }));\n  }\n  private getItems = (query: string) => {\n    return Promise.resolve(this.getValues(query));\n  };\n  private handleVariableChange = (item: ComboBoxItem) => {\n    if (!this.isUnmounting) {\n      this.setState({ selectedVariable: item });\n    }\n  };\n  private handleUnexpectedVariableInput = (query: string) => {\n    const values = this.getValues(query);\n    if (values.length > 0) {\n      return values[0];\n    }\n\n    return this.resetVariable();\n  };\n  private resetVariable = () => {\n    if (!this.isUnmounting) {\n      this.setState({ selectedVariable: undefined });\n    }\n  };\n}\n\ninterface ComponentShowcaseProps {\n  name: string;\n  description: ComponentDescriptionType;\n  isDebugMode?: boolean;\n  onVariableSelect: (item: ComboBoxItem) => void;\n}\nclass ComponentShowcase extends React.Component<ComponentShowcaseProps> {\n  public render() {\n    const { name, description, onVariableSelect, isDebugMode } = this.props;\n    const elements = Object.keys(description);\n\n    return elements.length ? (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          return (\n            <React.Fragment>\n              <Sticky side={'top'} offset={40}>\n                {(isSticky) => (\n                  <h2\n                    className={cx({\n                      [styles.heading(theme)]: true,\n                      [styles.headingSticky()]: isSticky,\n                    })}\n                  >\n                    {this.props.name}\n                  </h2>\n                )}\n              </Sticky>\n              <table className={styles.table()}>\n                <thead>\n                  <tr>\n                    <th className={styles.headerCell()} style={{ width: 170 }}>\n                      ClassName\n                    </th>\n                    <th className={styles.headerCell()} style={{ width: 210 }}>\n                      Variable Name\n                    </th>\n                    <th className={styles.headerCell()} style={{ width: 250 }}>\n                      Default Value\n                    </th>\n                    <th className={styles.headerCell()} style={{ width: 250 }}>\n                      Dark Value\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  {elements.map((el) => (\n                    <ComponentShowcaseRow\n                      key={`${name}_${el}`}\n                      element={el}\n                      row={description[el]}\n                      onVariableSelect={onVariableSelect}\n                      isDebugMode={isDebugMode}\n                    />\n                  ))}\n                </tbody>\n              </table>\n            </React.Fragment>\n          );\n        }}\n      </ThemeContext.Consumer>\n    ) : null;\n  }\n}\n\ninterface ComponentShowcaseRowProps {\n  element: string;\n  row: ComponentRowDescriptionType;\n  isDebugMode?: boolean;\n  onVariableSelect: (item: ComboBoxItem) => void;\n}\n\nclass ComponentShowcaseRow extends React.Component<ComponentShowcaseRowProps> {\n  public render() {\n    const { element: el, row, isDebugMode } = this.props;\n    const rowSpan = row.variables.length + 1;\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          return (\n            <React.Fragment>\n              <tr className={cx(styles.invisibleRow(), { [styles.invisibleDarkRow()]: theme === darkVariables })}>\n                <td className={cx(styles.cell(), styles.majorCell())} rowSpan={rowSpan}>\n                  <span className={styles.elementName()}>.{el}</span>\n                </td>\n                <td className={styles.invisibleCell()} />\n                <td className={styles.invisibleCell()} />\n                <td className={styles.invisibleCell()} />\n              </tr>\n              {row.variables.map((varName) => {\n                const dependencies = row.dependencies[varName] || EMPTY_ARRAY;\n                const variableDefault = defaultVariables[varName] as string;\n                const variableDark = darkVariables[varName] as string;\n                const hasNoVariables = isDebugMode && !variableDefault;\n                return (\n                  <tr\n                    key={`${el}_${varName}`}\n                    className={cx(styles.row(), {\n                      [styles.suspiciousRow()]: hasNoVariables,\n                      [styles.darkRow()]: theme === darkVariables,\n                    })}\n                  >\n                    <td className={styles.cell()}>\n                      <VariableName\n                        variableName={varName as string}\n                        dependencies={dependencies}\n                        onVariableSelect={this.props.onVariableSelect}\n                      />\n                    </td>\n                    <td className={styles.cell()}>\n                      <VariableValue value={variableDefault} />\n                    </td>\n                    <td className={styles.cell()}>\n                      <VariableValue value={variableDark} />\n                    </td>\n                  </tr>\n                );\n              })}\n            </React.Fragment>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n}\n\ninterface VariableNameProps {\n  variableName: string;\n  dependencies: Array<keyof Theme>;\n  onVariableSelect: (item: ComboBoxItem) => void;\n}\n\nclass VariableName extends React.Component<VariableNameProps> {\n  public render() {\n    return (\n      <span>\n        <span className={styles.variableName()} onClick={this.handleVariableSelect}>\n          {this.props.variableName}\n        </span>\n        {this.props.dependencies.length > 0 && this.renderDependencies()}\n      </span>\n    );\n  }\n\n  private renderDependencies() {\n    const { dependencies, onVariableSelect } = this.props;\n    return (\n      <React.Fragment>\n        <br />\n        <br />\n        зависит от:\n        {dependencies.map((dependency) => (\n          <DependencyName\n            key={`dependency_${dependency}`}\n            dependencyName={dependency}\n            onDependencySelect={onVariableSelect}\n          />\n        ))}\n      </React.Fragment>\n    );\n  }\n\n  private handleVariableSelect = () => {\n    const { variableName, onVariableSelect } = this.props;\n    if (onVariableSelect) {\n      onVariableSelect({ value: variableName, label: variableName });\n    }\n  };\n}\n\ninterface DependencyNameProps {\n  dependencyName: keyof Theme;\n  onDependencySelect: (item: ComboBoxItem) => void;\n}\nclass DependencyName extends React.Component<DependencyNameProps> {\n  public render() {\n    return (\n      <React.Fragment>\n        <br />\n        &ndash;{' '}\n        <Tooltip trigger={'hover'} render={this.getValues} pos={'right middle'}>\n          <span className={styles.variableName()} onClick={this.handleDependencySelect}>\n            {this.props.dependencyName}\n          </span>\n        </Tooltip>\n      </React.Fragment>\n    );\n  }\n\n  private getValues = () => {\n    const dependencyName = this.props.dependencyName;\n    const dependencyDefault = defaultVariables[dependencyName] as string;\n    const dependencyDark = darkVariables[dependencyName] as string;\n    return (\n      <React.Fragment>\n        <span>Default value: {<VariableValue value={dependencyDefault} />}</span>\n        <span>Dark value: {<VariableValue value={dependencyDark} />}</span>\n      </React.Fragment>\n    );\n  };\n\n  private handleDependencySelect = () => {\n    const { dependencyName, onDependencySelect } = this.props;\n    if (onDependencySelect) {\n      onDependencySelect({ value: dependencyName, label: dependencyName });\n    }\n  };\n}\n\nconst VariableValue = (props: { value: string }) => {\n  const value = props.value;\n  const valueIsColor = isColor(value);\n  const valueIsGradient = isGradient(value);\n  const hasExample = valueIsColor || valueIsGradient;\n  let borderColor = 'transparent';\n  if (hasExample) {\n    borderColor = valueIsColor ? ColorFunctions.contrast(value) : '#000';\n  }\n\n  return (\n    <span className={cx({ [styles.undefined()]: !value })}>\n      {hasExample && <span className={styles.colorExample()} style={{ background: value, borderColor }} />}\n      {value || 'undefined'}\n    </span>\n  );\n};\n\nconst ShowUnusedVariables = (props: { diff: string[] }) => {\n  if (props.diff.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className={styles.unusedVariablesWarning()}>\n      Неиспользованные переменные ({props.diff.length}\n      ):\n      <ul>\n        {props.diff.sort().map((v) => (\n          <li key={v}>{v}</li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n\nfunction isGradient(input: string) {\n  return !!input && input.startsWith('linear-gradient');\n}\n"]}

package/internal/ZIndex/ZIndex/ZIndex.js

@@ -9,6 +9,7 @@ import React from 'react';
 import { callChildRef } from "../../../lib/callChildRef/callChildRef";
 import { rootNode } from "../../../lib/rootNode";
 import { isBrowser } from "../../../lib/client";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { incrementZIndex, removeZIndex, upperBorder } from "../ZIndexStorage";
 var ZIndexContext = /*#__PURE__*/React.createContext({
   parentLayerZIndex: 0,
@@ -22,6 +23,7 @@ export var ZIndex = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
     var _this;
 
     _this = _React$Component.call(this, props) || this;
+    _this.getProps = createPropsGetter(ZIndex.defaultProps);
     _this.zIndex = 0;
 
     _this.wrapperRef = function (element) {
@@ -32,7 +34,7 @@ export var ZIndex = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
       wrapperRef && callChildRef(wrapperRef, element);
     };
 
-    _this.zIndex = incrementZIndex(props.priority, props.delta);
+    _this.zIndex = incrementZIndex(_this.getProps().priority, _this.getProps().delta);
     return _this;
   }
 
@@ -43,18 +45,21 @@ export var ZIndex = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
   };
 
   _proto.render = function render() {
-    var _this2 = this;
-
-    var _this$props = this.props,
-        style = _this$props.style,
-        children = _this$props.children,
-        delta = _this$props.delta,
-        priority = _this$props.priority,
-        applyZIndex = _this$props.applyZIndex,
-        coverChildren = _this$props.coverChildren,
-        createStackingContext = _this$props.createStackingContext,
-        wrapperRef = _this$props.wrapperRef,
-        props = _objectWithoutPropertiesLoose(_this$props, _excluded);
+    var _this2 = this; // TODO: Enable this rule in functional components.
+
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+
+
+    var _this$getProps = this.getProps(),
+        style = _this$getProps.style,
+        children = _this$getProps.children,
+        delta = _this$getProps.delta,
+        priority = _this$getProps.priority,
+        applyZIndex = _this$getProps.applyZIndex,
+        coverChildren = _this$getProps.coverChildren,
+        createStackingContext = _this$getProps.createStackingContext,
+        wrapperRef = _this$getProps.wrapperRef,
+        rest = _objectWithoutPropertiesLoose(_this$getProps, _excluded);
 
     var wrapperStyle = {};
     return /*#__PURE__*/React.createElement(ZIndexContext.Consumer, null, function (_ref) {
@@ -87,7 +92,7 @@ export var ZIndex = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
       }, /*#__PURE__*/React.createElement("div", _extends({
         style: _extends({}, style, wrapperStyle),
         ref: _this2.wrapperRef
-      }, props), children));
+      }, rest), children));
     });
   };
 
@@ -114,11 +119,11 @@ export var ZIndex = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
   createStackingContext: false
 }, _class2.propTypes = {
   delta: function delta(props) {
-    if (props.delta <= 0) {
+    if ((props.delta || _class2.defaultProps.delta) <= 0) {
       return new Error("[ZIndex]: Prop 'delta' must be greater than 0, received " + props.delta);
     }
 
-    if (Math.trunc(props.delta) !== props.delta) {
+    if (Math.trunc(props.delta || _class2.defaultProps.delta) !== props.delta) {
       return new Error("[ZIndex]: Prop 'delta' must be integer, received " + props.delta);
     }
   }

package/internal/ZIndex/ZIndex/ZIndex.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ZIndex.tsx"],"names":["React","callChildRef","rootNode","isBrowser","incrementZIndex","removeZIndex","upperBorder","ZIndexContext","createContext","parentLayerZIndex","maxZIndex","Infinity","displayName","ZIndex","props","zIndex","wrapperRef","element","setRootNode","priority","delta","componentWillUnmount","render","style","children","applyZIndex","coverChildren","createStackingContext","wrapperStyle","zIndexContexValue","newZIndex","calcZIndex","Number","isFinite","document","body","isolation","transform","allowedValuesIntervalLength","scale","Math","ceil","Component","__KONTUR_REACT_UI__","defaultProps","propTypes","Error","trunc"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { callChildRef } from '../../lib/callChildRef/callChildRef';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isBrowser } from '../../lib/client';\n\nimport { incrementZIndex, removeZIndex, upperBorder, LayerComponentName } from './ZIndexStorage';\n\nconst ZIndexContext = React.createContext({ parentLayerZIndex: 0, maxZIndex: Infinity });\n\nZIndexContext.displayName = 'ZIndexContext';\n\nexport interface ZIndexProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Приращение к z-index\n   */\n  delta: number;\n  priority: number | LayerComponentName;\n  style: React.CSSProperties;\n  createStackingContext?: boolean;\n  coverChildren?: boolean;\n  applyZIndex?: boolean;\n  className?: string;\n  wrapperRef?: React.Ref<HTMLDivElement> | undefined | null;\n}\n\n@rootNode\nexport class ZIndex extends React.Component<ZIndexProps> {\n  public static __KONTUR_REACT_UI__ = 'ZIndex';\n\n  public static defaultProps = {\n    delta: 10,\n    priority: 0,\n    style: {},\n    applyZIndex: true,\n    coverChildren: false,\n    createStackingContext: false,\n  };\n\n  public static propTypes = {\n    delta(props: ZIndexProps) {\n      if (props.delta <= 0) {\n        return new Error(`[ZIndex]: Prop 'delta' must be greater than 0, received ${props.delta}`);\n      }\n      if (Math.trunc(props.delta) !== props.delta) {\n        return new Error(`[ZIndex]: Prop 'delta' must be integer, received ${props.delta}`);\n      }\n    },\n  };\n\n  private zIndex = 0;\n\n  private setRootNode!: TSetRootNode;\n\n  constructor(props: ZIndexProps) {\n    super(props);\n    this.zIndex = incrementZIndex(props.priority, props.delta);\n  }\n\n  public componentWillUnmount() {\n    removeZIndex(this.zIndex);\n  }\n\n  public render() {\n    const {\n      style,\n      children,\n      delta,\n      priority,\n      applyZIndex,\n      coverChildren,\n      createStackingContext,\n      wrapperRef,\n      ...props\n    } = this.props;\n\n    const wrapperStyle: React.CSSProperties = {};\n\n    return (\n      <ZIndexContext.Consumer>\n        {({ parentLayerZIndex, maxZIndex }) => {\n          let zIndexContexValue = { parentLayerZIndex, maxZIndex };\n\n          if (applyZIndex) {\n            const newZIndex = this.calcZIndex(parentLayerZIndex, maxZIndex);\n            wrapperStyle.zIndex = newZIndex;\n\n            zIndexContexValue = coverChildren\n              ? { parentLayerZIndex, maxZIndex: newZIndex }\n              : { parentLayerZIndex: newZIndex, maxZIndex: Number.isFinite(maxZIndex) ? newZIndex : Infinity };\n\n            if (createStackingContext) {\n              isBrowser && 'isolation' in document.body.style\n                ? (wrapperStyle.isolation = 'isolate')\n                : (wrapperStyle.transform = 'rotate(0)');\n            }\n          }\n\n          return (\n            <ZIndexContext.Provider value={zIndexContexValue}>\n              <div style={{ ...style, ...wrapperStyle }} ref={this.wrapperRef} {...props}>\n                {children}\n              </div>\n            </ZIndexContext.Provider>\n          );\n        }}\n      </ZIndexContext.Consumer>\n    );\n  }\n\n  private wrapperRef = (element: HTMLDivElement | null) => {\n    const { wrapperRef } = this.props;\n    this.setRootNode(element);\n    wrapperRef && callChildRef(wrapperRef, element);\n  };\n\n  private calcZIndex(parentLayerZIndex: number, maxZIndex: number) {\n    let newZIndex = this.zIndex;\n\n    if (Number.isFinite(maxZIndex)) {\n      const allowedValuesIntervalLength = maxZIndex - parentLayerZIndex;\n      const scale = upperBorder / allowedValuesIntervalLength;\n      newZIndex = Math.ceil(newZIndex / scale);\n    }\n\n    newZIndex += parentLayerZIndex;\n\n    return newZIndex;\n  }\n}\n"]}
+{"version":3,"sources":["ZIndex.tsx"],"names":["React","callChildRef","rootNode","isBrowser","createPropsGetter","incrementZIndex","removeZIndex","upperBorder","ZIndexContext","createContext","parentLayerZIndex","maxZIndex","Infinity","displayName","ZIndex","props","getProps","defaultProps","zIndex","wrapperRef","element","setRootNode","priority","delta","componentWillUnmount","render","style","children","applyZIndex","coverChildren","createStackingContext","rest","wrapperStyle","zIndexContexValue","newZIndex","calcZIndex","Number","isFinite","document","body","isolation","transform","allowedValuesIntervalLength","scale","Math","ceil","Component","__KONTUR_REACT_UI__","propTypes","Error","trunc"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { callChildRef } from '../../lib/callChildRef/callChildRef';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isBrowser } from '../../lib/client';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { incrementZIndex, removeZIndex, upperBorder, LayerComponentName } from './ZIndexStorage';\n\nconst ZIndexContext = React.createContext({ parentLayerZIndex: 0, maxZIndex: Infinity });\n\nZIndexContext.displayName = 'ZIndexContext';\n\nexport interface ZIndexProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Приращение к z-index\n   */\n  delta?: number;\n  priority?: number | LayerComponentName;\n  style?: React.CSSProperties;\n  createStackingContext?: boolean;\n  coverChildren?: boolean;\n  applyZIndex?: boolean;\n  className?: string;\n  wrapperRef?: React.Ref<HTMLDivElement> | undefined | null;\n}\n\ntype DefaultProps = Required<\n  Pick<ZIndexProps, 'delta' | 'priority' | 'style' | 'applyZIndex' | 'coverChildren' | 'createStackingContext'>\n>;\n\n@rootNode\nexport class ZIndex extends React.Component<ZIndexProps> {\n  public static __KONTUR_REACT_UI__ = 'ZIndex';\n\n  public static defaultProps: DefaultProps = {\n    delta: 10,\n    priority: 0,\n    style: {},\n    applyZIndex: true,\n    coverChildren: false,\n    createStackingContext: false,\n  };\n\n  private getProps = createPropsGetter(ZIndex.defaultProps);\n\n  public static propTypes = {\n    delta(props: ZIndexProps) {\n      if ((props.delta || ZIndex.defaultProps.delta) <= 0) {\n        return new Error(`[ZIndex]: Prop 'delta' must be greater than 0, received ${props.delta}`);\n      }\n      if (Math.trunc(props.delta || ZIndex.defaultProps.delta) !== props.delta) {\n        return new Error(`[ZIndex]: Prop 'delta' must be integer, received ${props.delta}`);\n      }\n    },\n  };\n\n  private zIndex = 0;\n\n  private setRootNode!: TSetRootNode;\n\n  constructor(props: ZIndexProps) {\n    super(props);\n    this.zIndex = incrementZIndex(this.getProps().priority, this.getProps().delta);\n  }\n\n  public componentWillUnmount() {\n    removeZIndex(this.zIndex);\n  }\n\n  public render() {\n    // TODO: Enable this rule in functional components.\n    /* eslint-disable @typescript-eslint/no-unused-vars */\n    const { style, children, delta, priority, applyZIndex, coverChildren, createStackingContext, wrapperRef, ...rest } =\n      this.getProps();\n\n    const wrapperStyle: React.CSSProperties = {};\n\n    return (\n      <ZIndexContext.Consumer>\n        {({ parentLayerZIndex, maxZIndex }) => {\n          let zIndexContexValue = { parentLayerZIndex, maxZIndex };\n\n          if (applyZIndex) {\n            const newZIndex = this.calcZIndex(parentLayerZIndex, maxZIndex);\n            wrapperStyle.zIndex = newZIndex;\n\n            zIndexContexValue = coverChildren\n              ? { parentLayerZIndex, maxZIndex: newZIndex }\n              : { parentLayerZIndex: newZIndex, maxZIndex: Number.isFinite(maxZIndex) ? newZIndex : Infinity };\n\n            if (createStackingContext) {\n              isBrowser && 'isolation' in document.body.style\n                ? (wrapperStyle.isolation = 'isolate')\n                : (wrapperStyle.transform = 'rotate(0)');\n            }\n          }\n\n          return (\n            <ZIndexContext.Provider value={zIndexContexValue}>\n              <div style={{ ...style, ...wrapperStyle }} ref={this.wrapperRef} {...rest}>\n                {children}\n              </div>\n            </ZIndexContext.Provider>\n          );\n        }}\n      </ZIndexContext.Consumer>\n    );\n  }\n\n  private wrapperRef = (element: HTMLDivElement | null) => {\n    const { wrapperRef } = this.props;\n    this.setRootNode(element);\n    wrapperRef && callChildRef(wrapperRef, element);\n  };\n\n  private calcZIndex(parentLayerZIndex: number, maxZIndex: number) {\n    let newZIndex = this.zIndex;\n\n    if (Number.isFinite(maxZIndex)) {\n      const allowedValuesIntervalLength = maxZIndex - parentLayerZIndex;\n      const scale = upperBorder / allowedValuesIntervalLength;\n      newZIndex = Math.ceil(newZIndex / scale);\n    }\n\n    newZIndex += parentLayerZIndex;\n\n    return newZIndex;\n  }\n}\n"]}

package/internal/ZIndex/ZIndex.d.ts

@@ -4,25 +4,20 @@ export interface ZIndexProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Приращение к z-index
      */
-    delta: number;
-    priority: number | LayerComponentName;
-    style: React.CSSProperties;
+    delta?: number;
+    priority?: number | LayerComponentName;
+    style?: React.CSSProperties;
     createStackingContext?: boolean;
     coverChildren?: boolean;
     applyZIndex?: boolean;
     className?: string;
     wrapperRef?: React.Ref<HTMLDivElement> | undefined | null;
 }
+declare type DefaultProps = Required<Pick<ZIndexProps, 'delta' | 'priority' | 'style' | 'applyZIndex' | 'coverChildren' | 'createStackingContext'>>;
 export declare class ZIndex extends React.Component<ZIndexProps> {
     static __KONTUR_REACT_UI__: string;
-    static defaultProps: {
-        delta: number;
-        priority: number;
-        style: {};
-        applyZIndex: boolean;
-        coverChildren: boolean;
-        createStackingContext: boolean;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     static propTypes: {
         delta(props: ZIndexProps): Error | undefined;
     };
@@ -34,3 +29,4 @@ export declare class ZIndex extends React.Component<ZIndexProps> {
     private wrapperRef;
     private calcZIndex;
 }
+export {};

package/internal/themes/DefaultTheme/DefaultTheme.js

@@ -1823,7 +1823,7 @@ export var DefaultTheme = /*#__PURE__*/function () {
 
   return DefaultTheme;
 }();
-DefaultTheme.fontFamilyCompensationBaseline = '0';
+DefaultTheme.fontFamilyCompensationBaseline = '0px';
 DefaultTheme.labGrotesqueBaselineCompensation = '1';
 DefaultTheme.brandXLight = '#cae5f5';
 DefaultTheme.brandLight = '#3094d0';
@@ -2163,7 +2163,7 @@ DefaultTheme.pickerTodayWrapperPaddingBottom = '6px';
 DefaultTheme.pagingForwardIconMarginTop = '1px';
 DefaultTheme.pagingPageLinkPaddingX = '0.625em';
 DefaultTheme.pagingPageLinkPaddingY = '0.3125em';
-DefaultTheme.pagingPageLinkLegacyPaddingY = '0';
+DefaultTheme.pagingPageLinkLegacyPaddingY = '0px';
 DefaultTheme.pagingPageLinkMinWidth = '0.75em';
 DefaultTheme.pagingPageForwardLinkMarginTop = '0.35em';
 DefaultTheme.pagingPageForwardLinkMarginLeft = '10px';
@@ -2202,7 +2202,7 @@ DefaultTheme.dropdownMenuSelectedBg = '#f1f1f1';
 DefaultTheme.menuBorder = 'none';
 DefaultTheme.menuShadow = '0 4px 12px rgba(0, 0, 0, 0.16)';
 DefaultTheme.menuPaddingY = '4px';
-DefaultTheme.menuPaddingX = '0';
+DefaultTheme.menuPaddingX = '0px';
 DefaultTheme.menuItemIconWidth = '16px';
 DefaultTheme.menuItemIconGap = '4px';
 DefaultTheme.menuItemIconLegacyMargin = '0px';
@@ -2245,7 +2245,7 @@ DefaultTheme.popupBorderRadius = '2px';
 DefaultTheme.popupBorderColor = 'transparent';
 DefaultTheme.popupDropShadow = 'drop-shadow(0 4px 12px rgba(0, 0, 0, 0.16))';
 DefaultTheme.popupBoxShadow = '0 4px 12px 0 rgba(0, 0, 0, 0.16)';
-DefaultTheme.popupPinOffset = '0';
+DefaultTheme.popupPinOffset = '0px';
 DefaultTheme.popupPinOffsetX = '16px';
 DefaultTheme.popupPinOffsetY = '16px';
 DefaultTheme.popupMargin = '10px';
@@ -2326,8 +2326,8 @@ DefaultTheme.passwordInputVisibilityIconHoverOpacity = '1';
 DefaultTheme.globalLoaderHeight = '4px';
 DefaultTheme.globalLoaderWidth = '100%';
 DefaultTheme.globalLoaderPosition = 'fixed';
-DefaultTheme.globalLoaderTop = '0';
-DefaultTheme.globalLoaderLeft = '0';
+DefaultTheme.globalLoaderTop = '0px';
+DefaultTheme.globalLoaderLeft = '0px';
 DefaultTheme.globalLoaderBottom = 'auto';
 DefaultTheme.globalLoaderRight = 'auto';
 DefaultTheme.globalLoaderBackgroundColor = 'transparent';