@skbkontur/react-ui 0.0.0-69a6fa606f → 0.0.0-6fbd9fadb2

package/cjs/internal/ThemeShowcase/ThemeShowcase.js

@@ -1,4 +1,5 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ThemeShowcase = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.ThemeShowcase = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+
 
 var _ColorHelpers = require("../../lib/styles/ColorHelpers");
 var _DefaultTheme = require("../../lib/theming/themes/DefaultTheme");
@@ -13,6 +14,7 @@ var _Supports = require("../../lib/Supports");
 
 var _Emotion = require("../../lib/theming/Emotion");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _useTheme = require("../../lib/theming/useTheme");
 
 var _VariablesCollector = require("./VariablesCollector");
 
@@ -23,7 +25,7 @@ var _VariablesCollector = require("./VariablesCollector");
 
 
 
-var _ThemeShowcase = require("./ThemeShowcase.styles");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 _ThemeShowcase = require("./ThemeShowcase.styles");
 
 var EMPTY_ARRAY = [];
 
@@ -42,6 +44,7 @@ ThemeShowcase = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.de
 
 
 
+
   function ThemeShowcase(props) {var _this;
     _this = _React$Component.call(this, props) || this;_this.state = {};_this.isUnmounting = false;_this.variablesDiff = [];_this.
 
@@ -121,6 +124,14 @@ ThemeShowcase = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.de
 
 
 
+
+
+
+
+
+
+
+
 
 
 
@@ -150,143 +161,70 @@ ThemeShowcase = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.de
       if (!_this.isUnmounting) {
         _this.setState({ selectedVariable: undefined });
       }
-    };if (props.isDebugMode) {ALL_VARIABLES.forEach(function (variable) {var found = _VariablesCollector.ALL_USED_VARIABLES.includes(variable);if (!found) {_this.variablesDiff.push(variable);}});}return _this;}var _proto = ThemeShowcase.prototype;_proto.render = function render() {var _this2 = this;if (!_Supports.IS_PROXY_SUPPORTED) {return /*#__PURE__*/_react.default.createElement("div", null, "\u0422\u0430\u0431\u043B\u0438\u0446\u0430 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u044F \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u044B\u0445 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u0430 \u0442\u043E\u043B\u044C\u043A\u043E \u0432", ' ', /*#__PURE__*/_react.default.createElement(_Link.Link, { href: 'https://caniuse.com/#feat=proxy', target: '_blank' }, "\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0441 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u043A\u043E\u0439 Proxy"), ".");}var selectedVariable = this.state.selectedVariable;var descriptionsToRender = selectedVariable ? _VariablesCollector.COMPONENT_DESCRIPTIONS_BY_VARIABLE[selectedVariable.value] || {} : _VariablesCollector.COMPONENT_DESCRIPTIONS;var isDebugMode = this.props.isDebugMode;var callsCount = isDebugMode ? "(" + _VariablesCollector.CALLS_COUNT + " \u0432\u044B\u0437\u043E\u0432\u043E\u0432)" : '';var executionTime = isDebugMode ? "\u0421\u0433\u0435\u043D\u0435\u0440\u0438\u0440\u043E\u0432\u0430\u043D\u043E \u0437\u0430 " + _VariablesCollector.EXECUTION_TIME.toFixed(3) + "ms" : '';return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {return /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { wrap: true, gap: 30, verticalAlign: 'top' }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Sticky.Sticky, { side: 'top' }, /*#__PURE__*/_react.default.createElement("div", { className: _ThemeShowcase.styles.searchBar(theme), "data-perf-info": executionTime + " " + callsCount }, /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { gap: 15 }, /*#__PURE__*/_react.default.createElement(_ComboBox.ComboBox, { getItems: _this2.getItems, value: selectedVariable, onValueChange: _this2.handleVariableChange, onUnexpectedInput: _this2.handleUnexpectedVariableInput, placeholder: 'поиск по названию переменной' }), !!selectedVariable && /*#__PURE__*/_react.default.createElement(_Link.Link, { onClick: _this2.resetVariable }, "\u0441\u0431\u0440\u043E\u0441\u0438\u0442\u044C")))), Object.keys(descriptionsToRender).sort().map(function (componentName) {return /*#__PURE__*/_react.default.createElement(ComponentShowcase, { key: componentName, name: componentName, description: descriptionsToRender[componentName], isDebugMode: isDebugMode, onVariableSelect: _this2.handleVariableChange });})), /*#__PURE__*/_react.default.createElement(ShowUnusedVariables, { diff: _this2.variablesDiff }));});};_proto.componentWillUnmount = function componentWillUnmount() {this.isUnmounting = true;};_proto.getValues = function getValues(query) {var lowerCaseQuery = query && query.toLowerCase().trim();var allItems = _VariablesCollector.ALL_USED_VARIABLES;if (lowerCaseQuery) {allItems = _VariablesCollector.ALL_USED_VARIABLES.filter(function (usedVariable) {return usedVariable.toLowerCase().startsWith(lowerCaseQuery);});}return allItems.map(function (usedVariableName) {return { value: usedVariableName, label: usedVariableName };});};return ThemeShowcase;}(_react.default.Component);exports.ThemeShowcase = ThemeShowcase;var
-
-
-
-
-
-
-
-
-ComponentShowcase = /*#__PURE__*/function (_React$Component2) {(0, _inheritsLoose2.default)(ComponentShowcase, _React$Component2);function ComponentShowcase() {return _React$Component2.apply(this, arguments) || this;}var _proto2 = ComponentShowcase.prototype;_proto2.
-  render = function render() {var _this3 = this;
-    var _this$props = this.props,name = _this$props.name,description = _this$props.description,onVariableSelect = _this$props.onVariableSelect,isDebugMode = _this$props.isDebugMode;
-    var elements = Object.keys(description);
-
-    return elements.length ? /*#__PURE__*/
-    _react.default.createElement(_ThemeContext.ThemeContext.Consumer, null,
-    function (theme) {
-      return /*#__PURE__*/(
-        _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
-        _react.default.createElement(_Sticky.Sticky, { side: 'top', offset: 40 },
-        function (isSticky) {var _cx;return /*#__PURE__*/(
-            _react.default.createElement("h2", {
-              className: (0, _Emotion.cx)((_cx = {}, _cx[
-              _ThemeShowcase.styles.heading(theme)] = true, _cx[
-              _ThemeShowcase.styles.headingSticky()] = isSticky, _cx)) },
-
-
-            _this3.props.name));}), /*#__PURE__*/
-
-
-
-        _react.default.createElement("table", { className: _ThemeShowcase.styles.table() }, /*#__PURE__*/
-        _react.default.createElement("thead", null, /*#__PURE__*/
-        _react.default.createElement("tr", null, /*#__PURE__*/
-        _react.default.createElement("th", { className: _ThemeShowcase.styles.headerCell(), style: { width: 170 } }, "ClassName"), /*#__PURE__*/
-
-
-        _react.default.createElement("th", { className: _ThemeShowcase.styles.headerCell(), style: { width: 210 } }, "Variable Name"), /*#__PURE__*/
-
-
-        _react.default.createElement("th", { className: _ThemeShowcase.styles.headerCell(), style: { width: 250 } }, "Default Value"), /*#__PURE__*/
+    };if (props.isDebugMode) {ALL_VARIABLES.forEach(function (variable) {var found = _VariablesCollector.ALL_USED_VARIABLES.includes(variable);if (!found) {_this.variablesDiff.push(variable);}});}return _this;}var _proto = ThemeShowcase.prototype;_proto.render = function render() {var _this2 = this;if (!_Supports.IS_PROXY_SUPPORTED) {return /*#__PURE__*/_react.default.createElement("div", null, "\u0422\u0430\u0431\u043B\u0438\u0446\u0430 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u044F \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u044B\u0445 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u0430 \u0442\u043E\u043B\u044C\u043A\u043E \u0432", ' ', /*#__PURE__*/_react.default.createElement(_Link.Link, { href: 'https://caniuse.com/#feat=proxy', target: '_blank' }, "\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0441 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u043A\u043E\u0439 Proxy"), ".");}var selectedVariable = this.state.selectedVariable;var descriptionsToRender = selectedVariable ? _VariablesCollector.COMPONENT_DESCRIPTIONS_BY_VARIABLE[selectedVariable.value] || {} : _VariablesCollector.COMPONENT_DESCRIPTIONS;var isDebugMode = this.props.isDebugMode;var callsCount = isDebugMode ? "(" + _VariablesCollector.CALLS_COUNT + " \u0432\u044B\u0437\u043E\u0432\u043E\u0432)" : '';var executionTime = isDebugMode ? "\u0421\u0433\u0435\u043D\u0435\u0440\u0438\u0440\u043E\u0432\u0430\u043D\u043E \u0437\u0430 " + _VariablesCollector.EXECUTION_TIME.toFixed(3) + "ms" : '';return /*#__PURE__*/_react.default.createElement(_Emotion.EmotionConsumer, null, function (emotion) {_this2.emotion = emotion;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeConsumer, null, function (theme) {var styles = (0, _ThemeShowcase.getStyles)(_this2.emotion);return /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { wrap: true, gap: 30, verticalAlign: 'top' }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Sticky.Sticky, { side: 'top' }, /*#__PURE__*/_react.default.createElement("div", { className: styles.searchBar(theme), "data-perf-info": executionTime + " " + callsCount }, /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { gap: 15 }, /*#__PURE__*/_react.default.createElement(_ComboBox.ComboBox, { getItems: _this2.getItems, value: selectedVariable, onValueChange: _this2.handleVariableChange, onUnexpectedInput: _this2.handleUnexpectedVariableInput, placeholder: 'поиск по названию переменной' }), !!selectedVariable && /*#__PURE__*/_react.default.createElement(_Link.Link, { onClick: _this2.resetVariable }, "\u0441\u0431\u0440\u043E\u0441\u0438\u0442\u044C")))), Object.keys(descriptionsToRender).sort().map(function (componentName) {return /*#__PURE__*/_react.default.createElement(ComponentShowcase, { key: componentName, name: componentName, description: descriptionsToRender[componentName], isDebugMode: isDebugMode, onVariableSelect: _this2.handleVariableChange });})), /*#__PURE__*/_react.default.createElement(ShowUnusedVariables, { diff: _this2.variablesDiff }));});});};_proto.componentWillUnmount = function componentWillUnmount() {this.isUnmounting = true;};_proto.getValues = function getValues(query) {var lowerCaseQuery = query && query.toLowerCase().trim();var allItems = _VariablesCollector.ALL_USED_VARIABLES;if (lowerCaseQuery) {allItems = _VariablesCollector.ALL_USED_VARIABLES.filter(function (usedVariable) {return usedVariable.toLowerCase().startsWith(lowerCaseQuery);});}return allItems.map(function (usedVariableName) {return { value: usedVariableName, label: usedVariableName };});};return ThemeShowcase;}(_react.default.Component);exports.ThemeShowcase = ThemeShowcase;
 
 
-        _react.default.createElement("th", { className: _ThemeShowcase.styles.headerCell(), style: { width: 250 } }, "Dark Value"))), /*#__PURE__*/
 
 
 
 
-        _react.default.createElement("tbody", null,
-        elements.map(function (el) {return /*#__PURE__*/(
-            _react.default.createElement(ComponentShowcaseRow, {
-              key: name + "_" + el,
-              element: el,
-              row: description[el],
-              onVariableSelect: onVariableSelect,
-              isDebugMode: isDebugMode }));})))));
 
 
 
+function ComponentShowcase(props) {
+  var theme = (0, _useTheme.useTheme)();
+  var emotion = (0, _Emotion.useEmotion)();
 
+  var name = props.name,description = props.description,onVariableSelect = props.onVariableSelect,isDebugMode = props.isDebugMode;
+  var elements = Object.keys(description);
+  var styles = (0, _ThemeShowcase.getStyles)(emotion);
+  return elements.length ? /*#__PURE__*/
+  _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
+  _react.default.createElement(_Sticky.Sticky, { side: 'top', offset: 40 },
+  function (isSticky) {var _emotion$cx;return /*#__PURE__*/(
+      _react.default.createElement("h2", {
+        className: emotion.cx((_emotion$cx = {}, _emotion$cx[
+        styles.heading(theme)] = true, _emotion$cx[
+        styles.headingSticky()] = isSticky, _emotion$cx)) },
 
 
-    }) :
+      props.name));}), /*#__PURE__*/
 
-    null;
-  };return ComponentShowcase;}(_react.default.Component);var
 
 
+  _react.default.createElement("table", { className: styles.table() }, /*#__PURE__*/
+  _react.default.createElement("thead", null, /*#__PURE__*/
+  _react.default.createElement("tr", null, /*#__PURE__*/
+  _react.default.createElement("th", { className: styles.headerCell(), style: { width: 170 } }, "ClassName"), /*#__PURE__*/
 
 
+  _react.default.createElement("th", { className: styles.headerCell(), style: { width: 210 } }, "Variable Name"), /*#__PURE__*/
 
 
+  _react.default.createElement("th", { className: styles.headerCell(), style: { width: 250 } }, "Default Value"), /*#__PURE__*/
 
 
+  _react.default.createElement("th", { className: styles.headerCell(), style: { width: 250 } }, "Dark Value"))), /*#__PURE__*/
 
-ComponentShowcaseRow = /*#__PURE__*/function (_React$Component3) {(0, _inheritsLoose2.default)(ComponentShowcaseRow, _React$Component3);function ComponentShowcaseRow() {return _React$Component3.apply(this, arguments) || this;}var _proto3 = ComponentShowcaseRow.prototype;_proto3.
-  render = function render() {var _this4 = this;
-    var _this$props2 = this.props,el = _this$props2.element,row = _this$props2.row,isDebugMode = _this$props2.isDebugMode;
-    var rowSpan = row.variables.length + 1;
 
-    return /*#__PURE__*/(
-      _react.default.createElement(_ThemeContext.ThemeContext.Consumer, null,
-      function (theme) {var _cx2;
-        return /*#__PURE__*/(
-          _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
-          _react.default.createElement("tr", { className: (0, _Emotion.cx)(_ThemeShowcase.styles.invisibleRow(), (_cx2 = {}, _cx2[_ThemeShowcase.styles.invisibleDarkRow()] = theme === _DarkTheme.DARK_THEME, _cx2)) }, /*#__PURE__*/
-          _react.default.createElement("td", { className: (0, _Emotion.cx)(_ThemeShowcase.styles.cell(), _ThemeShowcase.styles.majorCell()), rowSpan: rowSpan }, /*#__PURE__*/
-          _react.default.createElement("span", { className: _ThemeShowcase.styles.elementName() }, ".", el)), /*#__PURE__*/
-
-          _react.default.createElement("td", { className: _ThemeShowcase.styles.invisibleCell() }), /*#__PURE__*/
-          _react.default.createElement("td", { className: _ThemeShowcase.styles.invisibleCell() }), /*#__PURE__*/
-          _react.default.createElement("td", { className: _ThemeShowcase.styles.invisibleCell() })),
-
-          row.variables.map(function (varName) {var _cx3;
-            var dependencies = row.dependencies[varName] || EMPTY_ARRAY;
-            var variableDefault = _DefaultTheme.DEFAULT_THEME[varName];
-            var variableDark = _DarkTheme.DARK_THEME[varName];
-            var hasNoVariables = isDebugMode && !variableDefault;
-            return /*#__PURE__*/(
-              _react.default.createElement("tr", {
-                key: el + "_" + varName,
-                className: (0, _Emotion.cx)(_ThemeShowcase.styles.row(), (_cx3 = {}, _cx3[
-                _ThemeShowcase.styles.suspiciousRow()] = hasNoVariables, _cx3[
-                _ThemeShowcase.styles.darkRow()] = theme === _DarkTheme.DARK_THEME, _cx3)) }, /*#__PURE__*/
-
-
-              _react.default.createElement("td", { className: _ThemeShowcase.styles.cell() }, /*#__PURE__*/
-              _react.default.createElement(VariableName, {
-                variableName: varName,
-                dependencies: dependencies,
-                onVariableSelect: _this4.props.onVariableSelect })), /*#__PURE__*/
-
-
-              _react.default.createElement("td", { className: _ThemeShowcase.styles.cell() }, /*#__PURE__*/
-              _react.default.createElement(VariableValue, { value: variableDefault })), /*#__PURE__*/
-
-              _react.default.createElement("td", { className: _ThemeShowcase.styles.cell() }, /*#__PURE__*/
-              _react.default.createElement(VariableValue, { value: variableDark }))));
-
-
-
-          })));
-
-
-      }));
-
-
-  };return ComponentShowcaseRow;}(_react.default.Component);var
 
 
+  _react.default.createElement("tbody", null,
+  elements.map(function (el) {return /*#__PURE__*/(
+      _react.default.createElement(ComponentShowcaseRow, {
+        key: name + "_" + el,
+        element: el,
+        row: description[el],
+        onVariableSelect: onVariableSelect,
+        isDebugMode: isDebugMode }));})))) :
 
 
 
 
 
+  null;
+}
 
-VariableName = /*#__PURE__*/function (_React$Component4) {(0, _inheritsLoose2.default)(VariableName, _React$Component4);function VariableName() {var _this5;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this5 = _React$Component4.call.apply(_React$Component4, [this].concat(args)) || this;_this5.
 
 
 
@@ -294,17 +232,55 @@ VariableName = /*#__PURE__*/function (_React$Component4) {(0, _inheritsLoose2.de
 
 
 
+function ComponentShowcaseRow(props) {var _emotion$cx2;
+  var theme = (0, _useTheme.useTheme)();
+  var emotion = (0, _Emotion.useEmotion)();
 
+  var el = props.element,row = props.row,isDebugMode = props.isDebugMode;
+  var rowSpan = row.variables.length + 1;
+  var styles = (0, _ThemeShowcase.getStyles)(emotion);
+  return /*#__PURE__*/(
+    _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
+    _react.default.createElement("tr", { className: emotion.cx(styles.invisibleRow(), (_emotion$cx2 = {}, _emotion$cx2[styles.invisibleDarkRow()] = theme === _DarkTheme.DARK_THEME, _emotion$cx2)) }, /*#__PURE__*/
+    _react.default.createElement("td", { className: emotion.cx(styles.cell(), styles.majorCell()), rowSpan: rowSpan }, /*#__PURE__*/
+    _react.default.createElement("span", { className: styles.elementName() }, ".", el)), /*#__PURE__*/
+
+    _react.default.createElement("td", { className: styles.invisibleCell() }), /*#__PURE__*/
+    _react.default.createElement("td", { className: styles.invisibleCell() }), /*#__PURE__*/
+    _react.default.createElement("td", { className: styles.invisibleCell() })),
+
+    row.variables.map(function (varName) {var _emotion$cx3;
+      var dependencies = row.dependencies[varName] || EMPTY_ARRAY;
+      var variableDefault = _DefaultTheme.DEFAULT_THEME[varName];
+      var variableDark = _DarkTheme.DARK_THEME[varName];
+      var hasNoVariables = isDebugMode && !variableDefault;
+      return /*#__PURE__*/(
+        _react.default.createElement("tr", {
+          key: el + "_" + varName,
+          className: emotion.cx(styles.row(), (_emotion$cx3 = {}, _emotion$cx3[
+          styles.suspiciousRow()] = hasNoVariables, _emotion$cx3[
+          styles.darkRow()] = theme === _DarkTheme.DARK_THEME, _emotion$cx3)) }, /*#__PURE__*/
 
 
+        _react.default.createElement("td", { className: styles.cell() }, /*#__PURE__*/
+        _react.default.createElement(VariableName, {
+          variableName: varName,
+          dependencies: dependencies,
+          onVariableSelect: props.onVariableSelect })), /*#__PURE__*/
 
 
+        _react.default.createElement("td", { className: styles.cell() }, /*#__PURE__*/
+        _react.default.createElement(VariableValue, { value: variableDefault })), /*#__PURE__*/
 
+        _react.default.createElement("td", { className: styles.cell() }, /*#__PURE__*/
+        _react.default.createElement(VariableValue, { value: variableDark }))));
 
 
 
+    })));
 
 
+}
 
 
 
@@ -312,58 +288,85 @@ VariableName = /*#__PURE__*/function (_React$Component4) {(0, _inheritsLoose2.de
 
 
 
+function VariableName(_ref) {var variableName = _ref.variableName,dependencies = _ref.dependencies,onVariableSelect = _ref.onVariableSelect;
+  var emotion = (0, _Emotion.useEmotion)();
+  var styles = (0, _ThemeShowcase.getStyles)(emotion);
 
+  return /*#__PURE__*/(
+    _react.default.createElement("span", null, /*#__PURE__*/
+    _react.default.createElement("span", { className: styles.variableName(), onClick: handleVariableSelect },
+    variableName),
 
+    dependencies.length > 0 && renderDependencies()));
 
-
-    handleVariableSelect = function () {
-      var _this5$props = _this5.props,variableName = _this5$props.variableName,onVariableSelect = _this5$props.onVariableSelect;
-      if (onVariableSelect) {
-        onVariableSelect({ value: variableName, label: variableName });
-      }
-    };return _this5;}var _proto4 = VariableName.prototype;_proto4.render = function render() {return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("span", { className: _ThemeShowcase.styles.variableName(), onClick: this.handleVariableSelect }, this.props.variableName), this.props.dependencies.length > 0 && this.renderDependencies());};_proto4.renderDependencies = function renderDependencies() {var _this$props3 = this.props,dependencies = _this$props3.dependencies,onVariableSelect = _this$props3.onVariableSelect;return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), "\u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043E\u0442:", dependencies.map(function (dependency) {return /*#__PURE__*/_react.default.createElement(DependencyName, { key: "dependency_" + dependency, dependencyName: dependency, onDependencySelect: onVariableSelect });}));};return VariableName;}(_react.default.Component);var
 
 
+  function renderDependencies() {
+    return /*#__PURE__*/(
+      _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
+      _react.default.createElement("br", null), /*#__PURE__*/
+      _react.default.createElement("br", null), "\u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043E\u0442:",
 
+      dependencies.map(function (dependency) {return /*#__PURE__*/(
+          _react.default.createElement(DependencyName, {
+            key: "dependency_" + dependency,
+            dependencyName: dependency,
+            onDependencySelect: onVariableSelect }));})));
 
 
 
-DependencyName = /*#__PURE__*/function (_React$Component5) {(0, _inheritsLoose2.default)(DependencyName, _React$Component5);function DependencyName() {var _this6;for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {args[_key2] = arguments[_key2];}_this6 = _React$Component5.call.apply(_React$Component5, [this].concat(args)) || this;_this6.
 
+  }
 
+  function handleVariableSelect() {
+    if (onVariableSelect) {
+      onVariableSelect({ value: variableName, label: variableName });
+    }
+  }
+}
 
 
 
 
 
 
+function DependencyName(_ref2) {var dependencyName = _ref2.dependencyName,onDependencySelect = _ref2.onDependencySelect;
+  var emotion = (0, _Emotion.useEmotion)();
+  var styles = (0, _ThemeShowcase.getStyles)(emotion);
 
+  return /*#__PURE__*/(
+    _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
+    _react.default.createElement("br", null), "\u2013",
+    ' ', /*#__PURE__*/
+    _react.default.createElement(_Tooltip.Tooltip, { trigger: 'hover', render: getValues, pos: 'right middle' }, /*#__PURE__*/
+    _react.default.createElement("span", { className: styles.variableName(), onClick: handleDependencySelect },
+    dependencyName))));
 
 
 
 
 
-    getValues = function () {
-      var dependencyName = _this6.props.dependencyName;
-      var dependencyDefault = _DefaultTheme.DEFAULT_THEME[dependencyName];
-      var dependencyDark = _DarkTheme.DARK_THEME[dependencyName];
-      return /*#__PURE__*/(
-        _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
-        _react.default.createElement("span", null, "Default value: ", /*#__PURE__*/_react.default.createElement(VariableValue, { value: dependencyDefault })), /*#__PURE__*/
-        _react.default.createElement("span", null, "Dark value: ", /*#__PURE__*/_react.default.createElement(VariableValue, { value: dependencyDark }))));
+  function getValues() {
+    var dependencyDefault = _DefaultTheme.DEFAULT_THEME[dependencyName];
+    var dependencyDark = _DarkTheme.DARK_THEME[dependencyName];
+    return /*#__PURE__*/(
+      _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
+      _react.default.createElement("span", null, "Default value: ", /*#__PURE__*/_react.default.createElement(VariableValue, { value: dependencyDefault })), /*#__PURE__*/
+      _react.default.createElement("span", null, "Dark value: ", /*#__PURE__*/_react.default.createElement(VariableValue, { value: dependencyDark }))));
 
 
-    };_this6.
+  }
 
-    handleDependencySelect = function () {
-      var _this6$props = _this6.props,dependencyName = _this6$props.dependencyName,onDependencySelect = _this6$props.onDependencySelect;
-      if (onDependencySelect) {
-        onDependencySelect({ value: dependencyName, label: dependencyName });
-      }
-    };return _this6;}var _proto5 = DependencyName.prototype;_proto5.render = function render() {return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("br", null), "\u2013", ' ', /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, { trigger: 'hover', render: this.getValues, pos: 'right middle' }, /*#__PURE__*/_react.default.createElement("span", { className: _ThemeShowcase.styles.variableName(), onClick: this.handleDependencySelect }, this.props.dependencyName)));};return DependencyName;}(_react.default.Component);
+  function handleDependencySelect() {
+    if (onDependencySelect) {
+      onDependencySelect({ value: dependencyName, label: dependencyName });
+    }
+  }
+}
 
+var VariableValue = function VariableValue(props) {var _emotion$cx4;
+  var emotion = (0, _Emotion.useEmotion)();
 
-var VariableValue = function VariableValue(props) {var _cx4;
   var value = props.value;
   var valueIsColor = (0, _ColorHelpers.isColor)(value);
   var valueIsGradient = isGradient(value);
@@ -373,21 +376,24 @@ var VariableValue = function VariableValue(props) {var _cx4;
     borderColor = valueIsColor ? ColorFunctions.contrast(value) : '#000';
   }
 
+  var styles = (0, _ThemeShowcase.getStyles)(emotion);
   return /*#__PURE__*/(
-    _react.default.createElement("span", { className: (0, _Emotion.cx)((_cx4 = {}, _cx4[_ThemeShowcase.styles.undefined()] = !value, _cx4)) },
-    hasExample && /*#__PURE__*/_react.default.createElement("span", { className: _ThemeShowcase.styles.colorExample(), style: { background: value, borderColor: borderColor } }),
+    _react.default.createElement("span", { className: emotion.cx((_emotion$cx4 = {}, _emotion$cx4[styles.undefined()] = !value, _emotion$cx4)) },
+    hasExample && /*#__PURE__*/_react.default.createElement("span", { className: styles.colorExample(), style: { background: value, borderColor: borderColor } }),
     value || 'undefined'));
 
 
 };
 
 var ShowUnusedVariables = function ShowUnusedVariables(props) {
+  var emotion = (0, _Emotion.useEmotion)();
   if (props.diff.length === 0) {
     return null;
   }
+  var styles = (0, _ThemeShowcase.getStyles)(emotion);
 
   return /*#__PURE__*/(
-    _react.default.createElement("div", { className: _ThemeShowcase.styles.unusedVariablesWarning() }, "\u041D\u0435\u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u043D\u044B\u0435 \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u044B\u0435 (",
+    _react.default.createElement("div", { className: styles.unusedVariablesWarning() }, "\u041D\u0435\u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u043D\u044B\u0435 \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u044B\u0435 (",
     props.diff.length, "):", /*#__PURE__*/
 
     _react.default.createElement("ul", null,

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","emotion","theme","styles","searchBar","sort","map","componentName","componentWillUnmount","lowerCaseQuery","toLowerCase","trim","allItems","filter","usedVariable","startsWith","usedVariableName","label","React","Component","ComponentShowcase","name","description","onVariableSelect","elements","isSticky","cx","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","variableName","handleVariableSelect","renderDependencies","dependency","DependencyName","dependencyName","onDependencySelect","handleDependencySelect","dependencyDefault","dependencyDark","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';\nimport type { Emotion } from '@emotion/css/create-instance';\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 { EmotionConsumer, useEmotion } from '../../lib/theming/Emotion';\nimport { ThemeConsumer } from '../../lib/theming/ThemeContext';\nimport { useTheme } from '../../lib/theming/useTheme';\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 { getStyles } 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  private emotion!: Emotion;\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      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeConsumer>\n              {(theme) => {\n                const styles = getStyles(this.emotion);\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            </ThemeConsumer>\n          );\n        }}\n      </EmotionConsumer>\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}\n\nfunction ComponentShowcase(props: ComponentShowcaseProps) {\n  const theme = useTheme();\n  const emotion = useEmotion();\n\n  const { name, description, onVariableSelect, isDebugMode } = props;\n  const elements = Object.keys(description);\n  const styles = getStyles(emotion);\n  return elements.length ? (\n    <React.Fragment>\n      <Sticky side={'top'} offset={40}>\n        {(isSticky) => (\n          <h2\n            className={emotion.cx({\n              [styles.heading(theme)]: true,\n              [styles.headingSticky()]: isSticky,\n            })}\n          >\n            {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  ) : null;\n}\n\ninterface ComponentShowcaseRowProps {\n  element: string;\n  row: ComponentRowDescriptionType;\n  isDebugMode?: boolean;\n  onVariableSelect: (item: ComboBoxItem) => void;\n}\n\nfunction ComponentShowcaseRow(props: ComponentShowcaseRowProps) {\n  const theme = useTheme();\n  const emotion = useEmotion();\n\n  const { element: el, row, isDebugMode } = props;\n  const rowSpan = row.variables.length + 1;\n  const styles = getStyles(emotion);\n  return (\n    <React.Fragment>\n      <tr className={emotion.cx(styles.invisibleRow(), { [styles.invisibleDarkRow()]: theme === darkVariables })}>\n        <td className={emotion.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={emotion.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={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\ninterface VariableNameProps {\n  variableName: string;\n  dependencies: Array<keyof Theme>;\n  onVariableSelect: (item: ComboBoxItem) => void;\n}\n\nfunction VariableName({ variableName, dependencies, onVariableSelect }: VariableNameProps) {\n  const emotion = useEmotion();\n  const styles = getStyles(emotion);\n\n  return (\n    <span>\n      <span className={styles.variableName()} onClick={handleVariableSelect}>\n        {variableName}\n      </span>\n      {dependencies.length > 0 && renderDependencies()}\n    </span>\n  );\n\n  function renderDependencies() {\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  function handleVariableSelect() {\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}\n\nfunction DependencyName({ dependencyName, onDependencySelect }: DependencyNameProps) {\n  const emotion = useEmotion();\n  const styles = getStyles(emotion);\n\n  return (\n    <React.Fragment>\n      <br />\n      &ndash;{' '}\n      <Tooltip trigger={'hover'} render={getValues} pos={'right middle'}>\n        <span className={styles.variableName()} onClick={handleDependencySelect}>\n          {dependencyName}\n        </span>\n      </Tooltip>\n    </React.Fragment>\n  );\n\n  function getValues() {\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  function handleDependencySelect() {\n    if (onDependencySelect) {\n      onDependencySelect({ value: dependencyName, label: dependencyName });\n    }\n  }\n}\n\nconst VariableValue = (props: { value: string }) => {\n  const emotion = useEmotion();\n\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  const styles = getStyles(emotion);\n  return (\n    <span className={emotion.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  const emotion = useEmotion();\n  if (props.diff.length === 0) {\n    return null;\n  }\n  const styles = getStyles(emotion);\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/ThemeShowcase/ThemeShowcase.styles.d.ts

@@ -1,5 +1,6 @@
+import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
-export declare const styles: {
+export declare const getStyles: (emotion: Emotion) => {
     searchBar(t: Theme): string;
     heading(t: Theme): string;
     headingSticky(): string;