@skbkontur/react-ui 4.3.1 → 4.4.0

package/cjs/internal/ThemePlayground/ThemeContextPlayground.js

@@ -20,7 +20,7 @@ var _Theme2022Dark = require("../../lib/theming/themes/Theme2022Dark");
 var _ThemeEditor = require("./ThemeEditor");
 var _Playground = require("./Playground.styles");
 var _Playground2 = require("./Playground");
-var _constants = require("./constants");function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}var
+var _constants = require("./constants");function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
 
 
 
@@ -55,6 +55,13 @@ var _constants = require("./constants");function _getRequireWildcardCache(nodeIn
 
 
 
+var getEditingThemeType = function getEditingThemeType(editingThemeItem) {
+  if (editingThemeItem) {
+    return editingThemeItem.value;
+  }
+
+  return 'default';
+};var
 ThemeContextPlayground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(ThemeContextPlayground, _React$Component);
 
 
@@ -108,7 +115,10 @@ ThemeContextPlayground = /*#__PURE__*/function (_React$Component) {(0, _inherits
 
     renderSidePage = function () {
       var _this$state = _this.state,currentTheme = _this$state.currentTheme,themesErrors = _this$state.themesErrors,editingThemeItem = _this$state.editingThemeItem,themes = _this$state.themes;
-      var themeErrors = themesErrors[editingThemeItem ? editingThemeItem.value : 'default'];
+
+      var editingThemeType = getEditingThemeType(editingThemeItem);
+      var themeErrors = themesErrors[editingThemeType];
+
       return /*#__PURE__*/(
         _react.default.createElement(_SidePage.SidePage, { disableAnimations: true, ignoreBackgroundClick: true, blockBackground: true, width: 600, onClose: _this.handleClose }, /*#__PURE__*/
         _react.default.createElement(_SidePage.SidePage.Header, null, /*#__PURE__*/
@@ -129,7 +139,7 @@ ThemeContextPlayground = /*#__PURE__*/function (_React$Component) {(0, _inherits
         _react.default.createElement(_SidePage.SidePage.Body, null, /*#__PURE__*/
         _react.default.createElement("div", { className: _Playground.styles.sidePageBody() }, /*#__PURE__*/
         _react.default.createElement(_ThemeEditor.ThemeEditor, {
-          editingTheme: themes[editingThemeItem.value],
+          editingTheme: themes[editingThemeType],
           currentTheme: currentTheme,
           currentErrors: themeErrors,
           onValueChange: _this.handleThemeVariableChange })))));
@@ -176,7 +186,7 @@ ThemeContextPlayground = /*#__PURE__*/function (_React$Component) {(0, _inherits
 
     handleThemeVariableChange = function (variable, value) {
       var _this$state2 = _this.state,editingThemeItem = _this$state2.editingThemeItem,currentTheme = _this$state2.currentTheme,themes = _this$state2.themes,themesErrors = _this$state2.themesErrors;
-      var editingThemeType = editingThemeItem.value;
+      var editingThemeType = getEditingThemeType(editingThemeItem);
 
       var theme = themes[editingThemeType];
       var currentValue = theme[variable];

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

@@ -1 +1 @@
-{"version":3,"sources":["ThemeContextPlayground.tsx"],"names":["ThemeContextPlayground","props","editableThemesItems","value","ThemeType","Default","label","Dark","DefaultOld","FlatOld","Theme2022","Theme2022Dark","renderSidePage","state","currentTheme","themesErrors","editingThemeItem","themes","themeErrors","handleClose","styles","editorHeaderWrapper","getEditableThemesItems","handleEditingThemeSwitch","fontSize","marginTop","handelGetTheme","sidePageBody","handleThemeVariableChange","themeObject","ThemeFactory","getKeys","forEach","key","descriptor","Object","getOwnPropertyDescriptor","get","DEFAULT_THEME","console","log","JSON","stringify","handleOpen","setState","editorOpened","find","i","currentThemeType","handleThemeChange","themeType","variable","editingThemeType","theme","currentValue","canSetVariable","ColorFunctions","isValid","nextThemeErrors","stateUpdate","result","changeThemeVariable","query","Promise","resolve","filter","toLowerCase","includes","item","variableName","variableValue","enumerable","configurable","set","defineProperty","create","default","defaultOld","DEFAULT_THEME_8PX_OLD","dark","DARK_THEME","flatOld","FLAT_THEME_8PX_OLD","theme2022","THEME_2022","theme2022Dark","THEME_2022_DARK","render","React","Component"],"mappings":"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","sourcesContent":["import React, { ReactNode } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { FLAT_THEME_8PX_OLD } from '../../lib/theming/themes/FlatTheme8pxOld';\nimport { DEFAULT_THEME_8PX_OLD } from '../../lib/theming/themes/DefaultTheme8pxOld';\nimport { DEFAULT_THEME } from '../../lib/theming/themes/DefaultTheme';\nimport { DARK_THEME } from '../../lib/theming/themes/DarkTheme';\nimport { SidePage } from '../../components/SidePage';\nimport { Gapped } from '../../components/Gapped';\nimport { ComboBox } from '../../components/ComboBox';\nimport { Link } from '../../components/Link';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Writeable } from '../../typings/utility-types';\nimport { THEME_2022 } from '../../lib/theming/themes/Theme2022';\nimport { findPropertyDescriptor } from '../../lib/theming/ThemeHelpers';\nimport { THEME_2022_DARK } from '../../lib/theming/themes/Theme2022Dark';\n\nimport { ThemeEditor } from './ThemeEditor';\nimport { styles } from './Playground.styles';\nimport { Playground } from './Playground';\nimport { ThemeType } from './constants';\n\ninterface PlaygroundState {\n  editorOpened: boolean;\n  editingThemeItem?: EditingThemeItem;\n  themes: Themes;\n  themesErrors: ThemesErrors;\n  currentTheme: Theme;\n  currentThemeType: ThemeType;\n}\ninterface Themes {\n  default: Theme;\n  dark: Theme;\n  defaultOld: Theme;\n  flatOld: Theme;\n  theme2022: Theme;\n  theme2022Dark: Theme;\n}\ninterface ThemesErrors {\n  default: ThemeErrorsType;\n  dark: ThemeErrorsType;\n  defaultOld: ThemeErrorsType;\n  flatOld: ThemeErrorsType;\n  theme2022: ThemeErrorsType;\n  theme2022Dark: ThemeErrorsType;\n}\ninterface EditingThemeItem {\n  value: ThemeType;\n  label: string;\n}\ninterface PlaygroundProps {\n  children?: ReactNode;\n}\nexport type ThemeErrorsType = Writeable<{ [key in keyof Theme]?: boolean }>;\n\nexport class ThemeContextPlayground extends React.Component<PlaygroundProps, PlaygroundState> {\n  private readonly editableThemesItems = [\n    { value: ThemeType.Default, label: 'Дефолтная' },\n    { value: ThemeType.Dark, label: 'Темная' },\n    { value: ThemeType.DefaultOld, label: 'Старая дефолтная' },\n    { value: ThemeType.FlatOld, label: 'Старая плоская' },\n    { value: ThemeType.Theme2022, label: 'Новая 2022' },\n    { value: ThemeType.Theme2022Dark, label: 'Новая 2022 Тёмная' },\n  ];\n\n  constructor(props: PlaygroundProps) {\n    super(props);\n    this.state = {\n      currentTheme: DEFAULT_THEME,\n      currentThemeType: ThemeType.Default,\n      editorOpened: false,\n      themes: {\n        default: DEFAULT_THEME,\n        defaultOld: DEFAULT_THEME_8PX_OLD,\n        dark: DARK_THEME,\n        flatOld: FLAT_THEME_8PX_OLD,\n        theme2022: THEME_2022,\n        theme2022Dark: THEME_2022_DARK,\n      },\n      themesErrors: {\n        default: {},\n        defaultOld: {},\n        dark: {},\n        flatOld: {},\n        theme2022: {},\n        theme2022Dark: {},\n      },\n    };\n  }\n\n  public render() {\n    const { currentTheme, editorOpened, currentThemeType } = this.state;\n    return (\n      <ThemeContext.Provider value={currentTheme}>\n        {editorOpened && this.renderSidePage()}\n        {\n          <Playground\n            onThemeChange={this.handleThemeChange}\n            currentThemeType={currentThemeType}\n            onEditLinkClick={this.handleOpen}\n          />\n        }\n      </ThemeContext.Provider>\n    );\n  }\n\n  private renderSidePage = () => {\n    const { currentTheme, themesErrors, editingThemeItem, themes } = this.state;\n    const themeErrors = themesErrors[editingThemeItem ? editingThemeItem.value : 'default'];\n    return (\n      <SidePage disableAnimations ignoreBackgroundClick blockBackground width={600} onClose={this.handleClose}>\n        <SidePage.Header>\n          <div className={styles.editorHeaderWrapper(currentTheme)}>\n            <Gapped wrap verticalAlign=\"middle\">\n              <span>Тема для редактирования:</span>\n              <ComboBox\n                getItems={this.getEditableThemesItems}\n                value={editingThemeItem}\n                onValueChange={this.handleEditingThemeSwitch}\n              />\n            </Gapped>\n          </div>\n          <div style={{ fontSize: 14, marginTop: 8 }}>\n            <Link onClick={this.handelGetTheme}>Вывести тему в консоль</Link>\n          </div>\n        </SidePage.Header>\n        <SidePage.Body>\n          <div className={styles.sidePageBody()}>\n            <ThemeEditor\n              editingTheme={themes[editingThemeItem!.value]}\n              currentTheme={currentTheme}\n              currentErrors={themeErrors}\n              onValueChange={this.handleThemeVariableChange}\n            />\n          </div>\n        </SidePage.Body>\n      </SidePage>\n    );\n  };\n\n  private handelGetTheme = () => {\n    const currentTheme = this.state.currentTheme;\n    const themeObject: Writeable<ThemeIn> = {};\n    ThemeFactory.getKeys(currentTheme).forEach((key) => {\n      const descriptor = Object.getOwnPropertyDescriptor(currentTheme, key);\n      if (descriptor && !descriptor.get && DEFAULT_THEME[key] && currentTheme[key] !== DEFAULT_THEME[key]) {\n        themeObject[key] = currentTheme[key] as keyof Theme;\n      }\n    });\n\n    console.log(JSON.stringify(themeObject));\n  };\n\n  private handleOpen = () => {\n    this.setState((state) => ({\n      editorOpened: true,\n      editingThemeItem: this.editableThemesItems.find((i) => i.value === state.currentThemeType),\n    }));\n  };\n\n  private handleClose = () => {\n    this.setState({\n      editorOpened: false,\n    });\n  };\n\n  private handleThemeChange = (value: string) => {\n    const themeType = value as ThemeType;\n    this.setState({\n      currentThemeType: themeType,\n      currentTheme: this.state.themes[themeType],\n    });\n  };\n\n  private handleThemeVariableChange = (variable: keyof Theme, value: string) => {\n    const { editingThemeItem, currentTheme, themes, themesErrors } = this.state;\n    const editingThemeType = editingThemeItem!.value;\n\n    const theme = themes[editingThemeType];\n    const currentValue = theme[variable] as string;\n\n    let canSetVariable = true;\n    if (ColorFunctions.isValid(currentValue)) {\n      canSetVariable = ColorFunctions.isValid(value);\n      themesErrors[editingThemeType][variable] = !canSetVariable;\n    }\n\n    const nextThemeErrors: ThemesErrors = { ...themesErrors };\n    nextThemeErrors[editingThemeType][variable] = !canSetVariable;\n    const stateUpdate = { themes, currentTheme, themesErrors: nextThemeErrors };\n\n    if (canSetVariable) {\n      const result = this.changeThemeVariable(theme, variable, value);\n      stateUpdate.themes[editingThemeType] = result;\n      if (this.state.currentThemeType === editingThemeType) {\n        stateUpdate.currentTheme = result;\n      }\n    }\n\n    this.setState(stateUpdate);\n  };\n\n  private getEditableThemesItems = (query: string) => {\n    return Promise.resolve(this.editableThemesItems.filter((i) => i.label.toLowerCase().includes(query.toLowerCase())));\n  };\n\n  private handleEditingThemeSwitch = (item: EditingThemeItem) => {\n    this.setState({ editingThemeItem: item });\n  };\n\n  private changeThemeVariable = (theme: Theme, variableName: keyof Theme, variableValue: string): Theme => {\n    const result: ThemeIn = {};\n    ThemeFactory.getKeys(theme).forEach((key) => {\n      const descriptor = findPropertyDescriptor(theme, key);\n      descriptor.enumerable = true;\n      descriptor.configurable = true;\n      if (key === variableName) {\n        delete descriptor.get;\n        delete descriptor.set;\n        descriptor.value = variableValue;\n      }\n      Object.defineProperty(result, key, descriptor);\n    });\n\n    return ThemeFactory.create<ThemeIn>(result);\n  };\n}\n"]}
+{"version":3,"sources":["ThemeContextPlayground.tsx"],"names":["getEditingThemeType","editingThemeItem","value","ThemeContextPlayground","props","editableThemesItems","ThemeType","Default","label","Dark","DefaultOld","FlatOld","Theme2022","Theme2022Dark","renderSidePage","state","currentTheme","themesErrors","themes","editingThemeType","themeErrors","handleClose","styles","editorHeaderWrapper","getEditableThemesItems","handleEditingThemeSwitch","fontSize","marginTop","handelGetTheme","sidePageBody","handleThemeVariableChange","themeObject","ThemeFactory","getKeys","forEach","key","descriptor","Object","getOwnPropertyDescriptor","get","DEFAULT_THEME","console","log","JSON","stringify","handleOpen","setState","editorOpened","find","i","currentThemeType","handleThemeChange","themeType","variable","theme","currentValue","canSetVariable","ColorFunctions","isValid","nextThemeErrors","stateUpdate","result","changeThemeVariable","query","Promise","resolve","filter","toLowerCase","includes","item","variableName","variableValue","enumerable","configurable","set","defineProperty","create","default","defaultOld","DEFAULT_THEME_8PX_OLD","dark","DARK_THEME","flatOld","FLAT_THEME_8PX_OLD","theme2022","THEME_2022","theme2022Dark","THEME_2022_DARK","render","React","Component"],"mappings":"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","sourcesContent":["import React, { ReactNode } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { FLAT_THEME_8PX_OLD } from '../../lib/theming/themes/FlatTheme8pxOld';\nimport { DEFAULT_THEME_8PX_OLD } from '../../lib/theming/themes/DefaultTheme8pxOld';\nimport { DEFAULT_THEME } from '../../lib/theming/themes/DefaultTheme';\nimport { DARK_THEME } from '../../lib/theming/themes/DarkTheme';\nimport { SidePage } from '../../components/SidePage';\nimport { Gapped } from '../../components/Gapped';\nimport { ComboBox } from '../../components/ComboBox';\nimport { Link } from '../../components/Link';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Writeable } from '../../typings/utility-types';\nimport { THEME_2022 } from '../../lib/theming/themes/Theme2022';\nimport { findPropertyDescriptor } from '../../lib/theming/ThemeHelpers';\nimport { THEME_2022_DARK } from '../../lib/theming/themes/Theme2022Dark';\n\nimport { ThemeEditor } from './ThemeEditor';\nimport { styles } from './Playground.styles';\nimport { Playground } from './Playground';\nimport { ThemeType } from './constants';\n\ninterface PlaygroundState {\n  editorOpened: boolean;\n  editingThemeItem?: EditingThemeItem;\n  themes: Themes;\n  themesErrors: ThemesErrors;\n  currentTheme: Theme;\n  currentThemeType: ThemeType;\n}\ninterface Themes {\n  default: Theme;\n  dark: Theme;\n  defaultOld: Theme;\n  flatOld: Theme;\n  theme2022: Theme;\n  theme2022Dark: Theme;\n}\ninterface ThemesErrors {\n  default: ThemeErrorsType;\n  dark: ThemeErrorsType;\n  defaultOld: ThemeErrorsType;\n  flatOld: ThemeErrorsType;\n  theme2022: ThemeErrorsType;\n  theme2022Dark: ThemeErrorsType;\n}\ninterface EditingThemeItem {\n  value: ThemeType;\n  label: string;\n}\ninterface PlaygroundProps {\n  children?: ReactNode;\n}\nexport type ThemeErrorsType = Writeable<{ [key in keyof Theme]?: boolean }>;\n\nconst getEditingThemeType = (editingThemeItem: PlaygroundState['editingThemeItem']) => {\n  if (editingThemeItem) {\n    return editingThemeItem.value;\n  }\n\n  return 'default';\n};\nexport class ThemeContextPlayground extends React.Component<PlaygroundProps, PlaygroundState> {\n  private readonly editableThemesItems = [\n    { value: ThemeType.Default, label: 'Дефолтная' },\n    { value: ThemeType.Dark, label: 'Темная' },\n    { value: ThemeType.DefaultOld, label: 'Старая дефолтная' },\n    { value: ThemeType.FlatOld, label: 'Старая плоская' },\n    { value: ThemeType.Theme2022, label: 'Новая 2022' },\n    { value: ThemeType.Theme2022Dark, label: 'Новая 2022 Тёмная' },\n  ];\n\n  constructor(props: PlaygroundProps) {\n    super(props);\n    this.state = {\n      currentTheme: DEFAULT_THEME,\n      currentThemeType: ThemeType.Default,\n      editorOpened: false,\n      themes: {\n        default: DEFAULT_THEME,\n        defaultOld: DEFAULT_THEME_8PX_OLD,\n        dark: DARK_THEME,\n        flatOld: FLAT_THEME_8PX_OLD,\n        theme2022: THEME_2022,\n        theme2022Dark: THEME_2022_DARK,\n      },\n      themesErrors: {\n        default: {},\n        defaultOld: {},\n        dark: {},\n        flatOld: {},\n        theme2022: {},\n        theme2022Dark: {},\n      },\n    };\n  }\n\n  public render() {\n    const { currentTheme, editorOpened, currentThemeType } = this.state;\n    return (\n      <ThemeContext.Provider value={currentTheme}>\n        {editorOpened && this.renderSidePage()}\n        {\n          <Playground\n            onThemeChange={this.handleThemeChange}\n            currentThemeType={currentThemeType}\n            onEditLinkClick={this.handleOpen}\n          />\n        }\n      </ThemeContext.Provider>\n    );\n  }\n\n  private renderSidePage = () => {\n    const { currentTheme, themesErrors, editingThemeItem, themes } = this.state;\n\n    const editingThemeType = getEditingThemeType(editingThemeItem);\n    const themeErrors = themesErrors[editingThemeType];\n\n    return (\n      <SidePage disableAnimations ignoreBackgroundClick blockBackground width={600} onClose={this.handleClose}>\n        <SidePage.Header>\n          <div className={styles.editorHeaderWrapper(currentTheme)}>\n            <Gapped wrap verticalAlign=\"middle\">\n              <span>Тема для редактирования:</span>\n              <ComboBox\n                getItems={this.getEditableThemesItems}\n                value={editingThemeItem}\n                onValueChange={this.handleEditingThemeSwitch}\n              />\n            </Gapped>\n          </div>\n          <div style={{ fontSize: 14, marginTop: 8 }}>\n            <Link onClick={this.handelGetTheme}>Вывести тему в консоль</Link>\n          </div>\n        </SidePage.Header>\n        <SidePage.Body>\n          <div className={styles.sidePageBody()}>\n            <ThemeEditor\n              editingTheme={themes[editingThemeType]}\n              currentTheme={currentTheme}\n              currentErrors={themeErrors}\n              onValueChange={this.handleThemeVariableChange}\n            />\n          </div>\n        </SidePage.Body>\n      </SidePage>\n    );\n  };\n\n  private handelGetTheme = () => {\n    const currentTheme = this.state.currentTheme;\n    const themeObject: Writeable<ThemeIn> = {};\n    ThemeFactory.getKeys(currentTheme).forEach((key) => {\n      const descriptor = Object.getOwnPropertyDescriptor(currentTheme, key);\n      if (descriptor && !descriptor.get && DEFAULT_THEME[key] && currentTheme[key] !== DEFAULT_THEME[key]) {\n        themeObject[key] = currentTheme[key] as keyof Theme;\n      }\n    });\n\n    console.log(JSON.stringify(themeObject));\n  };\n\n  private handleOpen = () => {\n    this.setState((state) => ({\n      editorOpened: true,\n      editingThemeItem: this.editableThemesItems.find((i) => i.value === state.currentThemeType),\n    }));\n  };\n\n  private handleClose = () => {\n    this.setState({\n      editorOpened: false,\n    });\n  };\n\n  private handleThemeChange = (value: string) => {\n    const themeType = value as ThemeType;\n    this.setState({\n      currentThemeType: themeType,\n      currentTheme: this.state.themes[themeType],\n    });\n  };\n\n  private handleThemeVariableChange = (variable: keyof Theme, value: string) => {\n    const { editingThemeItem, currentTheme, themes, themesErrors } = this.state;\n    const editingThemeType = getEditingThemeType(editingThemeItem);\n\n    const theme = themes[editingThemeType];\n    const currentValue = theme[variable] as string;\n\n    let canSetVariable = true;\n    if (ColorFunctions.isValid(currentValue)) {\n      canSetVariable = ColorFunctions.isValid(value);\n      themesErrors[editingThemeType][variable] = !canSetVariable;\n    }\n\n    const nextThemeErrors: ThemesErrors = { ...themesErrors };\n    nextThemeErrors[editingThemeType][variable] = !canSetVariable;\n    const stateUpdate = { themes, currentTheme, themesErrors: nextThemeErrors };\n\n    if (canSetVariable) {\n      const result = this.changeThemeVariable(theme, variable, value);\n      stateUpdate.themes[editingThemeType] = result;\n      if (this.state.currentThemeType === editingThemeType) {\n        stateUpdate.currentTheme = result;\n      }\n    }\n\n    this.setState(stateUpdate);\n  };\n\n  private getEditableThemesItems = (query: string) => {\n    return Promise.resolve(this.editableThemesItems.filter((i) => i.label.toLowerCase().includes(query.toLowerCase())));\n  };\n\n  private handleEditingThemeSwitch = (item: EditingThemeItem) => {\n    this.setState({ editingThemeItem: item });\n  };\n\n  private changeThemeVariable = (theme: Theme, variableName: keyof Theme, variableValue: string): Theme => {\n    const result: ThemeIn = {};\n    ThemeFactory.getKeys(theme).forEach((key) => {\n      const descriptor = findPropertyDescriptor(theme, key);\n      descriptor.enumerable = true;\n      descriptor.configurable = true;\n      if (key === variableName) {\n        delete descriptor.get;\n        delete descriptor.set;\n        descriptor.value = variableValue;\n      }\n      Object.defineProperty(result, key, descriptor);\n    });\n\n    return ThemeFactory.create<ThemeIn>(result);\n  };\n}\n"]}

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

@@ -17,10 +17,7 @@ interface Group {
     isCommon?: boolean;
 }
 export declare class ThemeEditor extends React.Component<ThemeEditorProps, ThemeEditorState> {
-    state: {
-        groups: never[];
-        isLoading: boolean;
-    };
+    state: ThemeEditorState;
     private updateTimeout?;
     render(): JSX.Element;
     componentDidMount(): void;

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

@@ -1 +1 @@
-{"version":3,"sources":["ThemeEditor.tsx"],"names":["ThemeEditor","state","groups","isLoading","renderGroups","props","editingTheme","currentTheme","currentErrors","onValueChange","keys","ThemeFactory","getKeys","filter","key","isDeprecatedVariable","map","i","title","isCommon","isCommonVariable","bind","reduce","prefixesReducer","isGroupVariable","prefix","DEPRECATED_VARIABLES","length","render","styles","loaderWrapper","loader","componentDidMount","updateTimeout","window","setTimeout","setState","VARIABLES_GROUPS","componentWillUnmount","clearTimeout","React","Component","Group","variables","editorGroupHeader","variable","value","isError","getBaseVariables","name","includes","splitPrefix","split","item","startsWith","trim","prefixes","acc","current","theme","Object","getPrototypeOf","prototype","hasOwnProperty","call","descriptor","getOwnPropertyDescriptor","get","getterBody","toString","variableNameMatchArray","match","v","replace"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\nimport { Gapped } from '../../components/Gapped';\nimport { Loader } from '../../components/Loader';\nimport { isNonNullable } from '../../lib/utils';\n\nimport { VariableValue } from './VariableValue';\nimport { VARIABLES_GROUPS, DEPRECATED_VARIABLES } from './constants';\nimport { ThemeErrorsType } from './ThemeContextPlayground';\nimport { styles } from './Playground.styles';\n\ninterface ThemeEditorProps {\n  editingTheme: Theme;\n  currentTheme: Theme;\n  currentErrors: ThemeErrorsType;\n  onValueChange: (variable: keyof Theme, value: string) => void;\n}\ninterface ThemeEditorState {\n  groups: Group[];\n  isLoading: boolean;\n}\ninterface Group {\n  title: string;\n  prefix: string;\n  isCommon?: boolean;\n}\nexport class ThemeEditor extends React.Component<ThemeEditorProps, ThemeEditorState> {\n  public state = {\n    groups: [],\n    isLoading: true,\n  };\n  private updateTimeout?: number;\n\n  public render() {\n    return this.state.isLoading ? (\n      <div className={styles.loaderWrapper()}>\n        <Loader type=\"big\" active className={styles.loader()} />\n      </div>\n    ) : (\n      this.renderGroups()\n    );\n  }\n\n  public componentDidMount() {\n    this.updateTimeout = window.setTimeout(() => {\n      this.setState({ groups: VARIABLES_GROUPS, isLoading: false });\n    }, 500);\n  }\n\n  public componentWillUnmount(): void {\n    clearTimeout(this.updateTimeout);\n  }\n\n  private renderGroups = () => {\n    const { editingTheme, currentTheme, currentErrors, onValueChange } = this.props;\n    const keys = ThemeFactory.getKeys(editingTheme).filter((key) => !isDeprecatedVariable(key));\n\n    return (\n      <Gapped vertical>\n        {this.state.groups.map((i: Group) => (\n          <Group\n            editingTheme={editingTheme}\n            currentTheme={currentTheme}\n            currentErrors={currentErrors}\n            onValueChange={onValueChange}\n            title={i.title}\n            variables={keys.filter(\n              i.isCommon\n                ? isCommonVariable.bind(null, this.state.groups.reduce(prefixesReducer, []))\n                : isGroupVariable.bind(null, i.prefix),\n            )}\n            key={i.title}\n          />\n        ))}\n        {DEPRECATED_VARIABLES.length > 0 ? (\n          <Group\n            editingTheme={editingTheme}\n            currentTheme={currentTheme}\n            currentErrors={currentErrors}\n            onValueChange={onValueChange}\n            title={'Deprecated Variables'}\n            variables={DEPRECATED_VARIABLES}\n          />\n        ) : null}\n      </Gapped>\n    );\n  };\n}\n\ninterface GroupProps {\n  editingTheme: Theme;\n  currentTheme: Theme;\n  currentErrors: ThemeErrorsType;\n  title: string;\n  variables: Array<keyof Theme>;\n  onValueChange: (variable: keyof Theme, value: string) => void;\n}\nconst Group = (props: GroupProps) => {\n  const { editingTheme, currentTheme, currentErrors, onValueChange, title, variables } = props;\n\n  return variables.length > 0 ? (\n    <React.Fragment>\n      <h2 className={styles.editorGroupHeader(currentTheme)}>{title}</h2>\n      {variables.map((variable) => {\n        const value = editingTheme[variable] as string;\n        const isError = currentErrors[variable];\n        return (\n          <VariableValue\n            theme={currentTheme}\n            onChange={onValueChange}\n            value={value}\n            isError={isError || false}\n            variable={variable}\n            key={variable}\n            baseVariables={getBaseVariables(editingTheme, variable)}\n            deprecated={isDeprecatedVariable(variable)}\n          />\n        );\n      })}\n    </React.Fragment>\n  ) : null;\n};\n\nconst isDeprecatedVariable = (name: keyof Theme) => {\n  return DEPRECATED_VARIABLES.includes(name);\n};\n\nconst isGroupVariable = (prefix: string, name: string) => {\n  const splitPrefix = prefix.split(' ') || [];\n\n  for (const item of splitPrefix) {\n    if (name.startsWith(item.trim())) {\n      return true;\n    }\n  }\n  return false;\n};\nconst isCommonVariable = (prefixes: string[], name: string) => {\n  for (const item of prefixes) {\n    if (name.startsWith(item.trim())) {\n      return false;\n    }\n  }\n  return true;\n};\nconst prefixesReducer = (acc: string[], current: { title: string; prefix: string }): string[] => {\n  const splitPrefix = current.prefix.split(' ');\n  return [...acc, ...splitPrefix];\n};\n\ntype GetBaseVariablesReturnType = Array<keyof Theme>;\nconst getBaseVariables = (theme: Theme, variable: keyof Theme): GetBaseVariablesReturnType => {\n  // TODO: Rewrite for loop.\n  // TODO: Enable `no-param-reassign` rule.\n  // eslint-disable-next-line no-param-reassign\n  for (; isNonNullable(theme); theme = Object.getPrototypeOf(theme)) {\n    if (Object.prototype.hasOwnProperty.call(theme, variable)) {\n      const descriptor = Object.getOwnPropertyDescriptor(theme, variable);\n\n      if (descriptor && typeof descriptor.get !== 'undefined') {\n        const getterBody = descriptor.get.toString();\n        const variableNameMatchArray = getterBody.match(/this\\.(\\w+)\\b/gm) || [];\n        return (variableNameMatchArray || []).map((v) => v.replace(/this\\./g, '')) as GetBaseVariablesReturnType;\n      }\n      break;\n    }\n  }\n\n  return [];\n};\n"]}
+{"version":3,"sources":["ThemeEditor.tsx"],"names":["ThemeEditor","state","groups","isLoading","renderGroups","props","editingTheme","currentTheme","currentErrors","onValueChange","keys","ThemeFactory","getKeys","filter","key","isDeprecatedVariable","map","i","title","isCommon","isCommonVariable","bind","reduce","prefixesReducer","isGroupVariable","prefix","DEPRECATED_VARIABLES","length","render","styles","loaderWrapper","loader","componentDidMount","updateTimeout","window","setTimeout","setState","VARIABLES_GROUPS","componentWillUnmount","clearTimeout","React","Component","Group","variables","editorGroupHeader","variable","value","isError","getBaseVariables","name","includes","splitPrefix","split","item","startsWith","trim","prefixes","acc","current","theme","Object","getPrototypeOf","prototype","hasOwnProperty","call","descriptor","getOwnPropertyDescriptor","get","getterBody","toString","variableNameMatchArray","match","v","replace"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\nimport { Gapped } from '../../components/Gapped';\nimport { Loader } from '../../components/Loader';\nimport { isNonNullable } from '../../lib/utils';\n\nimport { VariableValue } from './VariableValue';\nimport { VARIABLES_GROUPS, DEPRECATED_VARIABLES } from './constants';\nimport { ThemeErrorsType } from './ThemeContextPlayground';\nimport { styles } from './Playground.styles';\n\ninterface ThemeEditorProps {\n  editingTheme: Theme;\n  currentTheme: Theme;\n  currentErrors: ThemeErrorsType;\n  onValueChange: (variable: keyof Theme, value: string) => void;\n}\ninterface ThemeEditorState {\n  groups: Group[];\n  isLoading: boolean;\n}\ninterface Group {\n  title: string;\n  prefix: string;\n  isCommon?: boolean;\n}\nexport class ThemeEditor extends React.Component<ThemeEditorProps, ThemeEditorState> {\n  public state: ThemeEditorState = {\n    groups: [],\n    isLoading: true,\n  };\n  private updateTimeout?: number;\n\n  public render() {\n    return this.state.isLoading ? (\n      <div className={styles.loaderWrapper()}>\n        <Loader type=\"big\" active className={styles.loader()} />\n      </div>\n    ) : (\n      this.renderGroups()\n    );\n  }\n\n  public componentDidMount() {\n    this.updateTimeout = window.setTimeout(() => {\n      this.setState({ groups: VARIABLES_GROUPS, isLoading: false });\n    }, 500);\n  }\n\n  public componentWillUnmount(): void {\n    clearTimeout(this.updateTimeout);\n  }\n\n  private renderGroups = () => {\n    const { editingTheme, currentTheme, currentErrors, onValueChange } = this.props;\n    const keys = ThemeFactory.getKeys(editingTheme).filter((key) => !isDeprecatedVariable(key));\n\n    return (\n      <Gapped vertical>\n        {this.state.groups.map((i: Group) => (\n          <Group\n            editingTheme={editingTheme}\n            currentTheme={currentTheme}\n            currentErrors={currentErrors}\n            onValueChange={onValueChange}\n            title={i.title}\n            variables={keys.filter(\n              i.isCommon\n                ? isCommonVariable.bind(null, this.state.groups.reduce(prefixesReducer, []))\n                : isGroupVariable.bind(null, i.prefix),\n            )}\n            key={i.title}\n          />\n        ))}\n        {DEPRECATED_VARIABLES.length > 0 ? (\n          <Group\n            editingTheme={editingTheme}\n            currentTheme={currentTheme}\n            currentErrors={currentErrors}\n            onValueChange={onValueChange}\n            title={'Deprecated Variables'}\n            variables={DEPRECATED_VARIABLES}\n          />\n        ) : null}\n      </Gapped>\n    );\n  };\n}\n\ninterface GroupProps {\n  editingTheme: Theme;\n  currentTheme: Theme;\n  currentErrors: ThemeErrorsType;\n  title: string;\n  variables: Array<keyof Theme>;\n  onValueChange: (variable: keyof Theme, value: string) => void;\n}\nconst Group = (props: GroupProps) => {\n  const { editingTheme, currentTheme, currentErrors, onValueChange, title, variables } = props;\n\n  return variables.length > 0 ? (\n    <React.Fragment>\n      <h2 className={styles.editorGroupHeader(currentTheme)}>{title}</h2>\n      {variables.map((variable) => {\n        const value = editingTheme[variable] as string;\n        const isError = currentErrors[variable];\n        return (\n          <VariableValue\n            theme={currentTheme}\n            onChange={onValueChange}\n            value={value}\n            isError={isError || false}\n            variable={variable}\n            key={variable}\n            baseVariables={getBaseVariables(editingTheme, variable)}\n            deprecated={isDeprecatedVariable(variable)}\n          />\n        );\n      })}\n    </React.Fragment>\n  ) : null;\n};\n\nconst isDeprecatedVariable = (name: keyof Theme) => {\n  return DEPRECATED_VARIABLES.includes(name);\n};\n\nconst isGroupVariable = (prefix: string, name: string) => {\n  const splitPrefix = prefix.split(' ') || [];\n\n  for (const item of splitPrefix) {\n    if (name.startsWith(item.trim())) {\n      return true;\n    }\n  }\n  return false;\n};\nconst isCommonVariable = (prefixes: string[], name: string) => {\n  for (const item of prefixes) {\n    if (name.startsWith(item.trim())) {\n      return false;\n    }\n  }\n  return true;\n};\nconst prefixesReducer = (acc: string[], current: { title: string; prefix: string }): string[] => {\n  const splitPrefix = current.prefix.split(' ');\n  return [...acc, ...splitPrefix];\n};\n\ntype GetBaseVariablesReturnType = Array<keyof Theme>;\nconst getBaseVariables = (theme: Theme, variable: keyof Theme): GetBaseVariablesReturnType => {\n  // TODO: Rewrite for loop.\n  // TODO: Enable `no-param-reassign` rule.\n  // eslint-disable-next-line no-param-reassign\n  for (; isNonNullable(theme); theme = Object.getPrototypeOf(theme)) {\n    if (Object.prototype.hasOwnProperty.call(theme, variable)) {\n      const descriptor = Object.getOwnPropertyDescriptor(theme, variable);\n\n      if (descriptor && typeof descriptor.get !== 'undefined') {\n        const getterBody = descriptor.get.toString();\n        const variableNameMatchArray = getterBody.match(/this\\.(\\w+)\\b/gm) || [];\n        return (variableNameMatchArray || []).map((v) => v.replace(/this\\./g, '')) as GetBaseVariablesReturnType;\n      }\n      break;\n    }\n  }\n\n  return [];\n};\n"]}

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

@@ -1,9 +1,4 @@
-import { Component } from 'react';
-export declare class TogglePlayground extends Component<{}, any> {
-    state: {
-        checked: boolean;
-        loadingActive: boolean;
-        loading: boolean;
-    };
+import React from 'react';
+export declare class TogglePlayground extends React.Component {
     render(): JSX.Element;
 }

package/cjs/internal/ThemePlayground/TogglePlayground.js

@@ -1,15 +1,9 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TogglePlayground = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireWildcard(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TogglePlayground = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
 var _Gapped = require("../../components/Gapped");
-var _Toggle = require("../../components/Toggle");function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}var
-
-TogglePlayground = /*#__PURE__*/function (_Component) {(0, _inheritsLoose2.default)(TogglePlayground, _Component);function TogglePlayground() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _Component.call.apply(_Component, [this].concat(args)) || this;_this.
-    state = {
-      checked: false,
-      loadingActive: false,
-      loading: false };return _this;}var _proto = TogglePlayground.prototype;_proto.
-
+var _Toggle = require("../../components/Toggle");var
 
+TogglePlayground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(TogglePlayground, _React$Component);function TogglePlayground() {return _React$Component.apply(this, arguments) || this;}var _proto = TogglePlayground.prototype;_proto.
   render = function render() {
     return /*#__PURE__*/(
       _react.default.createElement(_Gapped.Gapped, { vertical: true }, /*#__PURE__*/
@@ -23,4 +17,4 @@ TogglePlayground = /*#__PURE__*/function (_Component) {(0, _inheritsLoose2.defau
 
 
 
-  };return TogglePlayground;}(_react.Component);exports.TogglePlayground = TogglePlayground;
+  };return TogglePlayground;}(_react.default.Component);exports.TogglePlayground = TogglePlayground;

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

@@ -1 +1 @@
-{"version":3,"sources":["TogglePlayground.tsx"],"names":["TogglePlayground","state","checked","loadingActive","loading","render","Component"],"mappings":"4PAAA;;AAEA;AACA,iD;;AAEaA,gB;AACJC,IAAAA,K,GAAQ;AACbC,MAAAA,OAAO,EAAE,KADI;AAEbC,MAAAA,aAAa,EAAE,KAFF;AAGbC,MAAAA,OAAO,EAAE,KAHI,E;;;AAMRC,EAAAA,M,GAAP,kBAAgB;AACd;AACE,mCAAC,cAAD,IAAQ,QAAQ,MAAhB;AACE,mCAAC,cAAD,IAAQ,GAAG,EAAE,EAAb;AACE,mCAAC,cAAD,OADF;AAEE,yDAFF,CADF;;AAKE,mCAAC,cAAD,IAAQ,GAAG,EAAE,EAAb;AACE,mCAAC,cAAD,IAAQ,QAAQ,MAAhB,GADF;AAEE,kEAFF,CALF,CADF;;;;AAYD,G,2BApBmCC,gB","sourcesContent":["import React, { Component } from 'react';\n\nimport { Gapped } from '../../components/Gapped';\nimport { Toggle } from '../../components/Toggle';\n\nexport class TogglePlayground extends Component<{}, any> {\n  public state = {\n    checked: false,\n    loadingActive: false,\n    loading: false,\n  };\n\n  public render() {\n    return (\n      <Gapped vertical>\n        <Gapped gap={10}>\n          <Toggle />\n          <div>Toggle</div>\n        </Gapped>\n        <Gapped gap={10}>\n          <Toggle disabled />\n          <div>Disabled toggle</div>\n        </Gapped>\n      </Gapped>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["TogglePlayground.tsx"],"names":["TogglePlayground","render","React","Component"],"mappings":"4PAAA;;AAEA;AACA,iD;;AAEaA,gB;AACJC,EAAAA,M,GAAP,kBAAgB;AACd;AACE,mCAAC,cAAD,IAAQ,QAAQ,MAAhB;AACE,mCAAC,cAAD,IAAQ,GAAG,EAAE,EAAb;AACE,mCAAC,cAAD,OADF;AAEE,yDAFF,CADF;;AAKE,mCAAC,cAAD,IAAQ,GAAG,EAAE,EAAb;AACE,mCAAC,cAAD,IAAQ,QAAQ,MAAhB,GADF;AAEE,kEAFF,CALF,CADF;;;;AAYD,G,2BAdmCC,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { Gapped } from '../../components/Gapped';\nimport { Toggle } from '../../components/Toggle';\n\nexport class TogglePlayground extends React.Component {\n  public render() {\n    return (\n      <Gapped vertical>\n        <Gapped gap={10}>\n          <Toggle />\n          <div>Toggle</div>\n        </Gapped>\n        <Gapped gap={10}>\n          <Toggle disabled />\n          <div>Disabled toggle</div>\n        </Gapped>\n      </Gapped>\n    );\n  }\n}\n"]}

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

@@ -1,7 +1,9 @@
 import React from 'react';
-export declare class TokenInputPlayground extends React.Component<any, any> {
-    state: {
-        selectedItems: string[];
-    };
+interface TokenInputPlaygroundState {
+    selectedItems: string[];
+}
+export declare class TokenInputPlayground extends React.Component {
+    state: TokenInputPlaygroundState;
     render(): JSX.Element;
 }
+export {};

package/cjs/internal/ThemePlayground/TokenInputPlayground.js

@@ -42,6 +42,9 @@ var tokenColors = {
 
 
 
+
+
+
 TokenInputPlayground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(TokenInputPlayground, _React$Component);function TokenInputPlayground() {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.
     state = { selectedItems: ['First', 'Second'] };return _this;}var _proto = TokenInputPlayground.prototype;_proto.
 

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

@@ -1 +1 @@
-{"version":3,"sources":["TokenInputPlayground.tsx"],"names":["getItems","query","Promise","resolve","filter","x","toLowerCase","includes","toString","then","res","setTimeout","bind","tokenColors","First","idle","active","Second","Third","Fourth","Fifth","Sixth","default","TokenInputPlayground","state","selectedItems","render","item","isActive","onClick","onRemove","itemsNew","setState","React","Component"],"mappings":"qbAAA;;AAEA;AACA,+C;;AAEeA,Q,yJAAf,iBAAwBC,KAAxB;AACSC,YAAAA,OAAO,CAACC,OAAR;AACL,aAAC,OAAD,EAAU,QAAV,EAAoB,OAApB,EAA6B,QAA7B,EAAuC,OAAvC,EAAgD,OAAhD,EAAyDC,MAAzD;AACE,sBAACC,CAAD,UAAOA,CAAC,CAACC,WAAF,GAAgBC,QAAhB,CAAyBN,KAAK,CAACK,WAAN,EAAzB,KAAiDD,CAAC,CAACG,QAAF,OAAiBP,KAAzE,EADF,CADK;;AAILQ,YAAAA,IAJK,CAIA,UAACC,GAAD,UAAmB,IAAIR,OAAJ,CAAsB,UAACC,OAAD,UAAaQ,UAAU,CAACR,OAAO,CAACS,IAAR,CAAa,IAAb,EAAmBF,GAAnB,CAAD,EAA0B,GAA1B,CAAvB,EAAtB,CAAnB,EAJA,CADT,0D;;;AAQA,IAAMG,WAA2C,GAAG;AAClDC,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,UADD;AAELC,IAAAA,MAAM,EAAE,YAFH,EAD2C;;AAKlDC,EAAAA,MAAM,EAAE;AACNF,IAAAA,IAAI,EAAE,UADA;AAENC,IAAAA,MAAM,EAAE,YAFF,EAL0C;;AASlDE,EAAAA,KAAK,EAAE;AACLH,IAAAA,IAAI,EAAE,WADD;AAELC,IAAAA,MAAM,EAAE,aAFH,EAT2C;;AAalDG,EAAAA,MAAM,EAAE;AACNJ,IAAAA,IAAI,EAAE,YADA;AAENC,IAAAA,MAAM,EAAE,cAFF,EAb0C;;AAiBlDI,EAAAA,KAAK,EAAE;AACLL,IAAAA,IAAI,EAAE,SADD;AAELC,IAAAA,MAAM,EAAE,WAFH,EAjB2C;;AAqBlDK,EAAAA,KAAK,EAAE;AACLN,IAAAA,IAAI,EAAE,OADD;AAELC,IAAAA,MAAM,EAAE,OAFH,EArB2C;;AAyBlDM,EAAAA,OAAO,EAAE;AACPP,IAAAA,IAAI,EAAE,aADC;AAEPC,IAAAA,MAAM,EAAE,eAFD,EAzByC,EAApD,C;;;;AA+BaO,oB;AACJC,IAAAA,K,GAAQ,EAAEC,aAAa,EAAE,CAAC,OAAD,EAAU,QAAV,CAAjB,E;;AAERC,EAAAA,M,GAAP,kBAAgB;AACd;AACE,mCAAC,sBAAD;AACE,QAAA,QAAQ,EAAE1B,QADZ;AAEE,QAAA,aAAa,EAAE,KAAKwB,KAAL,CAAWC,aAF5B;AAGE,QAAA,WAAW,EAAE,qBAACE,IAAD,aAASC,QAAT,QAASA,QAAT,CAAmBC,OAAnB,QAAmBA,OAAnB,CAA4BC,QAA5B,QAA4BA,QAA5B;AACX,yCAAC,YAAD;AACE,cAAA,GAAG,EAAEH,IAAI,CAACnB,QAAL,EADP;AAEE,cAAA,MAAM,EAAEK,WAAW,CAACc,IAAD,CAAX,IAAqBd,WAAW,CAACS,OAF3C;AAGE,cAAA,QAAQ,EAAEM,QAHZ;AAIE,cAAA,OAAO,EAAEC,OAJX;AAKE,cAAA,QAAQ,EAAEC,QALZ;;AAOGH,YAAAA,IAPH,CADW,GAHf;;;AAcE,QAAA,aAAa,EAAE,uBAACI,QAAD,UAAc,MAAI,CAACC,QAAL,CAAc,EAAEP,aAAa,EAAEM,QAAjB,EAAd,CAAd,EAdjB,GADF;;;AAkBD,G,+BAtBuCE,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { TokenInput } from '../../components/TokenInput';\nimport { Token, TokenColors } from '../../components/Token';\n\nasync function getItems(query: string) {\n  return Promise.resolve(\n    ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth'].filter(\n      (x) => x.toLowerCase().includes(query.toLowerCase()) || x.toString() === query,\n    ),\n  ).then((res: string[]) => new Promise<string[]>((resolve) => setTimeout(resolve.bind(null, res), 500)));\n}\n\nconst tokenColors: { [key: string]: TokenColors } = {\n  First: {\n    idle: 'grayIdle',\n    active: 'grayActive',\n  },\n  Second: {\n    idle: 'blueIdle',\n    active: 'blueActive',\n  },\n  Third: {\n    idle: 'greenIdle',\n    active: 'greenActive',\n  },\n  Fourth: {\n    idle: 'yellowIdle',\n    active: 'yellowActive',\n  },\n  Fifth: {\n    idle: 'redIdle',\n    active: 'redActive',\n  },\n  Sixth: {\n    idle: 'white',\n    active: 'black',\n  },\n  default: {\n    idle: 'defaultIdle',\n    active: 'defaultActive',\n  },\n};\n\nexport class TokenInputPlayground extends React.Component<any, any> {\n  public state = { selectedItems: ['First', 'Second'] };\n\n  public render() {\n    return (\n      <TokenInput\n        getItems={getItems}\n        selectedItems={this.state.selectedItems}\n        renderToken={(item, { isActive, onClick, onRemove }) => (\n          <Token\n            key={item.toString()}\n            colors={tokenColors[item] || tokenColors.default}\n            isActive={isActive}\n            onClick={onClick}\n            onRemove={onRemove}\n          >\n            {item}\n          </Token>\n        )}\n        onValueChange={(itemsNew) => this.setState({ selectedItems: itemsNew })}\n      />\n    );\n  }\n}\n"]}
+{"version":3,"sources":["TokenInputPlayground.tsx"],"names":["getItems","query","Promise","resolve","filter","x","toLowerCase","includes","toString","then","res","setTimeout","bind","tokenColors","First","idle","active","Second","Third","Fourth","Fifth","Sixth","default","TokenInputPlayground","state","selectedItems","render","item","isActive","onClick","onRemove","itemsNew","setState","React","Component"],"mappings":"qbAAA;;AAEA;AACA,+C;;AAEeA,Q,yJAAf,iBAAwBC,KAAxB;AACSC,YAAAA,OAAO,CAACC,OAAR;AACL,aAAC,OAAD,EAAU,QAAV,EAAoB,OAApB,EAA6B,QAA7B,EAAuC,OAAvC,EAAgD,OAAhD,EAAyDC,MAAzD;AACE,sBAACC,CAAD,UAAOA,CAAC,CAACC,WAAF,GAAgBC,QAAhB,CAAyBN,KAAK,CAACK,WAAN,EAAzB,KAAiDD,CAAC,CAACG,QAAF,OAAiBP,KAAzE,EADF,CADK;;AAILQ,YAAAA,IAJK,CAIA,UAACC,GAAD,UAAmB,IAAIR,OAAJ,CAAsB,UAACC,OAAD,UAAaQ,UAAU,CAACR,OAAO,CAACS,IAAR,CAAa,IAAb,EAAmBF,GAAnB,CAAD,EAA0B,GAA1B,CAAvB,EAAtB,CAAnB,EAJA,CADT,0D;;;AAQA,IAAMG,WAA2C,GAAG;AAClDC,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,UADD;AAELC,IAAAA,MAAM,EAAE,YAFH,EAD2C;;AAKlDC,EAAAA,MAAM,EAAE;AACNF,IAAAA,IAAI,EAAE,UADA;AAENC,IAAAA,MAAM,EAAE,YAFF,EAL0C;;AASlDE,EAAAA,KAAK,EAAE;AACLH,IAAAA,IAAI,EAAE,WADD;AAELC,IAAAA,MAAM,EAAE,aAFH,EAT2C;;AAalDG,EAAAA,MAAM,EAAE;AACNJ,IAAAA,IAAI,EAAE,YADA;AAENC,IAAAA,MAAM,EAAE,cAFF,EAb0C;;AAiBlDI,EAAAA,KAAK,EAAE;AACLL,IAAAA,IAAI,EAAE,SADD;AAELC,IAAAA,MAAM,EAAE,WAFH,EAjB2C;;AAqBlDK,EAAAA,KAAK,EAAE;AACLN,IAAAA,IAAI,EAAE,OADD;AAELC,IAAAA,MAAM,EAAE,OAFH,EArB2C;;AAyBlDM,EAAAA,OAAO,EAAE;AACPP,IAAAA,IAAI,EAAE,aADC;AAEPC,IAAAA,MAAM,EAAE,eAFD,EAzByC,EAApD,C;;;;;;;AAkCaO,oB;AACJC,IAAAA,K,GAAmC,EAAEC,aAAa,EAAE,CAAC,OAAD,EAAU,QAAV,CAAjB,E;;AAEnCC,EAAAA,M,GAAP,kBAAgB;AACd;AACE,mCAAC,sBAAD;AACE,QAAA,QAAQ,EAAE1B,QADZ;AAEE,QAAA,aAAa,EAAE,KAAKwB,KAAL,CAAWC,aAF5B;AAGE,QAAA,WAAW,EAAE,qBAACE,IAAD,aAASC,QAAT,QAASA,QAAT,CAAmBC,OAAnB,QAAmBA,OAAnB,CAA4BC,QAA5B,QAA4BA,QAA5B;AACX,yCAAC,YAAD;AACE,cAAA,GAAG,EAAEH,IAAI,CAACnB,QAAL,EADP;AAEE,cAAA,MAAM,EAAEK,WAAW,CAACc,IAAD,CAAX,IAAqBd,WAAW,CAACS,OAF3C;AAGE,cAAA,QAAQ,EAAEM,QAHZ;AAIE,cAAA,OAAO,EAAEC,OAJX;AAKE,cAAA,QAAQ,EAAEC,QALZ;;AAOGH,YAAAA,IAPH,CADW,GAHf;;;AAcE,QAAA,aAAa,EAAE,uBAACI,QAAD,UAAc,MAAI,CAACC,QAAL,CAAc,EAAEP,aAAa,EAAEM,QAAjB,EAAd,CAAd,EAdjB,GADF;;;AAkBD,G,+BAtBuCE,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { TokenInput } from '../../components/TokenInput';\nimport { Token, TokenColors } from '../../components/Token';\n\nasync function getItems(query: string) {\n  return Promise.resolve(\n    ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth'].filter(\n      (x) => x.toLowerCase().includes(query.toLowerCase()) || x.toString() === query,\n    ),\n  ).then((res: string[]) => new Promise<string[]>((resolve) => setTimeout(resolve.bind(null, res), 500)));\n}\n\nconst tokenColors: { [key: string]: TokenColors } = {\n  First: {\n    idle: 'grayIdle',\n    active: 'grayActive',\n  },\n  Second: {\n    idle: 'blueIdle',\n    active: 'blueActive',\n  },\n  Third: {\n    idle: 'greenIdle',\n    active: 'greenActive',\n  },\n  Fourth: {\n    idle: 'yellowIdle',\n    active: 'yellowActive',\n  },\n  Fifth: {\n    idle: 'redIdle',\n    active: 'redActive',\n  },\n  Sixth: {\n    idle: 'white',\n    active: 'black',\n  },\n  default: {\n    idle: 'defaultIdle',\n    active: 'defaultActive',\n  },\n};\n\ninterface TokenInputPlaygroundState {\n  selectedItems: string[];\n}\nexport class TokenInputPlayground extends React.Component {\n  public state: TokenInputPlaygroundState = { selectedItems: ['First', 'Second'] };\n\n  public render() {\n    return (\n      <TokenInput\n        getItems={getItems}\n        selectedItems={this.state.selectedItems}\n        renderToken={(item, { isActive, onClick, onRemove }) => (\n          <Token\n            key={item.toString()}\n            colors={tokenColors[item] || tokenColors.default}\n            isActive={isActive}\n            onClick={onClick}\n            onRemove={onRemove}\n          >\n            {item}\n          </Token>\n        )}\n        onValueChange={(itemsNew) => this.setState({ selectedItems: itemsNew })}\n      />\n    );\n  }\n}\n"]}

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

@@ -17,10 +17,7 @@ declare type DefaultProps = Required<Pick<VariableValueProps, 'deprecated'>>;
 export declare class VariableValue extends React.Component<VariableValueProps, VariableValueState> {
     static defaultProps: DefaultProps;
     private getProps;
-    state: {
-        value: string;
-        editing: boolean;
-    };
+    state: VariableValueState;
     private subscription;
     private rootElement;
     private readonly debounceTimeout;

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

@@ -1 +1 @@
-{"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"]}
+{"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: 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/cjs/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/cjs/internal/ThemePlayground/helpers.js

@@ -2,10 +2,12 @@
 
 var _Checkbox = require("../../components/Checkbox");
 
-var getComponentsFromPropsList = function getComponentsFromPropsList(component, propsList) {
+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.Checkbox;
     if (isCheckbox) {
       var checkboxProps = props;

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

@@ -1 +1 @@
-{"version":3,"sources":["helpers.tsx"],"names":["getComponentsFromPropsList","component","propsList","reduce","result","props","index","isCheckbox","type","Checkbox","checkboxProps","focused","ref","el","setState","focusedByTab","elementWithProps","React","cloneElement","key"],"mappings":"0PAAA;;AAEA;;AAEO,IAAMA,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,KAAmBC,kBAAtC;AACA,QAAIF,UAAJ,EAAgB;AACd,UAAMG,aAAa,GAAGL,KAAtB;AACA,UAAIK,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,gBAAGC,eAAMC,YAAN,CAAmBjB,SAAnB,6BAAmCI,KAAnC,IAA0Cc,GAAG,EAAEb,KAA/C,IAAzB;;AAEA,qBAAWF,MAAX,GAAmBY,gBAAnB;AACD,GAnBM,EAmBJ,EAnBI,CAAP;AAoBD,CArBM,C","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":["getComponentsFromPropsList","component","propsList","reduce","result","props","index","isCheckbox","type","Checkbox","checkboxProps","focused","ref","el","setState","focusedByTab","elementWithProps","React","cloneElement","key"],"mappings":"0PAAA;;AAEA;;AAEO,IAAMA,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,KAAmBC,kBAAtC;AACA,QAAIF,UAAJ,EAAgB;AACd,UAAMG,aAAa,GAAGL,KAAtB;AACA,UAAIK,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,gBAAGC,eAAMC,YAAN,CAAmBjB,SAAnB,6BAAmCI,KAAnC,IAA0Cc,GAAG,EAAEb,KAA/C,IAAzB;;AAEA,qBAAWF,MAAX,GAAmBY,gBAAnB;AACD,GAlBM,EAkBJ,EAlBI,CAAP;AAmBD,CAvBM,C","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/cjs/internal/ThemeShowcase/ThemeShowcase.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ThemeShowcase.tsx"],"names":["EMPTY_ARRAY","ALL_VARIABLES","Object","keys","defaultVariables","ThemeShowcase","props","state","isUnmounting","variablesDiff","getItems","query","Promise","resolve","getValues","handleVariableChange","item","setState","selectedVariable","handleUnexpectedVariableInput","values","length","resetVariable","undefined","isDebugMode","forEach","variable","found","ALL_USED_VARIABLES","includes","push","render","IS_PROXY_SUPPORTED","descriptionsToRender","COMPONENT_DESCRIPTIONS_BY_VARIABLE","value","COMPONENT_DESCRIPTIONS","callsCount","CALLS_COUNT","executionTime","EXECUTION_TIME","toFixed","theme","styles","searchBar","sort","map","componentName","componentWillUnmount","lowerCaseQuery","toLowerCase","trim","allItems","filter","usedVariable","startsWith","usedVariableName","label","React","Component","ComponentShowcase","name","description","onVariableSelect","elements","isSticky","heading","headingSticky","table","headerCell","width","el","ComponentShowcaseRow","element","row","rowSpan","variables","invisibleRow","invisibleDarkRow","darkVariables","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","ColorFunctions","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":["EMPTY_ARRAY","ALL_VARIABLES","Object","keys","defaultVariables","ThemeShowcase","props","state","isUnmounting","variablesDiff","getItems","query","Promise","resolve","getValues","handleVariableChange","item","setState","selectedVariable","handleUnexpectedVariableInput","values","length","resetVariable","undefined","isDebugMode","forEach","variable","found","ALL_USED_VARIABLES","includes","push","render","IS_PROXY_SUPPORTED","descriptionsToRender","COMPONENT_DESCRIPTIONS_BY_VARIABLE","value","COMPONENT_DESCRIPTIONS","callsCount","CALLS_COUNT","executionTime","EXECUTION_TIME","toFixed","theme","styles","searchBar","sort","map","componentName","componentWillUnmount","lowerCaseQuery","toLowerCase","trim","allItems","filter","usedVariable","startsWith","usedVariableName","label","React","Component","ComponentShowcase","name","description","onVariableSelect","elements","isSticky","heading","headingSticky","table","headerCell","width","el","ComponentShowcaseRow","element","row","rowSpan","variables","invisibleRow","invisibleDarkRow","darkVariables","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","ColorFunctions","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/cjs/internal/ZIndex/ZIndex.js

@@ -100,13 +100,6 @@ ZIndex = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
 
 
 
-
-
-
-
-
-
-
 
 
 
@@ -119,8 +112,8 @@ ZIndex = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
       var wrapperRef = _this.props.wrapperRef;
       _this.setRootNode(element);
       wrapperRef && (0, _callChildRef.callChildRef)(wrapperRef, element);
-    };_this.zIndex = (0, _ZIndexStorage.incrementZIndex)(_this.getProps().priority, _this.getProps().delta);return _this;}var _proto = ZIndex.prototype;_proto.componentWillUnmount = function componentWillUnmount() {(0, _ZIndexStorage.removeZIndex)(this.zIndex);};_proto.render = function render() {var _this2 = this;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,props = (0, _objectWithoutPropertiesLoose2.default)(_this$getProps, _excluded);var wrapperStyle = {};return /*#__PURE__*/_react.default.createElement(ZIndexContext.Consumer, null, function (_ref) {var parentLayerZIndex = _ref.parentLayerZIndex,maxZIndex = _ref.maxZIndex;var zIndexContexValue = { parentLayerZIndex: parentLayerZIndex, maxZIndex: maxZIndex };if (applyZIndex) {var newZIndex = _this2.calcZIndex(parentLayerZIndex, maxZIndex);wrapperStyle.zIndex = newZIndex;zIndexContexValue = coverChildren ? { parentLayerZIndex: parentLayerZIndex, maxZIndex: newZIndex } : { parentLayerZIndex: newZIndex, maxZIndex: Number.isFinite(maxZIndex) ? newZIndex : Infinity };if (createStackingContext) {_client.isBrowser && 'isolation' in document.body.style ? wrapperStyle.isolation = 'isolate' : wrapperStyle.transform = 'rotate(0)';}}return /*#__PURE__*/_react.default.createElement(ZIndexContext.Provider, { value: zIndexContexValue }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({ style: (0, _extends2.default)({}, style, wrapperStyle), ref: _this2.wrapperRef }, props), children));});};_proto.
-
+    };_this.zIndex = (0, _ZIndexStorage.incrementZIndex)(_this.getProps().priority, _this.getProps().delta);return _this;}var _proto = ZIndex.prototype;_proto.componentWillUnmount = function componentWillUnmount() {(0, _ZIndexStorage.removeZIndex)(this.zIndex);};_proto.render = function render() {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 = (0, _objectWithoutPropertiesLoose2.default)(_this$getProps, _excluded);var wrapperStyle = {};return /*#__PURE__*/_react.default.createElement(ZIndexContext.Consumer, null, function (_ref) {var parentLayerZIndex = _ref.parentLayerZIndex,maxZIndex = _ref.maxZIndex;var zIndexContexValue = { parentLayerZIndex: parentLayerZIndex, maxZIndex: maxZIndex };if (applyZIndex) {var newZIndex = _this2.calcZIndex(parentLayerZIndex, maxZIndex);wrapperStyle.zIndex = newZIndex;zIndexContexValue = coverChildren ? { parentLayerZIndex: parentLayerZIndex, maxZIndex: newZIndex } : { parentLayerZIndex: newZIndex, maxZIndex: Number.isFinite(maxZIndex) ? newZIndex : Infinity };if (createStackingContext) {_client.isBrowser && 'isolation' in document.body.style ? wrapperStyle.isolation = 'isolate' : wrapperStyle.transform = 'rotate(0)';}}return /*#__PURE__*/_react.default.createElement(ZIndexContext.Provider, { value: zIndexContexValue }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({ style: (0, _extends2.default)({}, style, wrapperStyle), ref: _this2.wrapperRef }, rest), children));});};_proto.
   calcZIndex = function calcZIndex(parentLayerZIndex, maxZIndex) {
     var newZIndex = this.zIndex;