npm - @skbkontur/react-ui - Versions diffs - 0.0.0-f50cd2db6e → 0.0.0-fed57d84fb - Mend

@skbkontur/react-ui 0.0.0-f50cd2db6e → 0.0.0-fed57d84fb

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1213) hide show

package/cjs/internal/ThemeShowcase/ThemeShowcase.js CHANGED Viewed

@@ -1,5 +1,6 @@
 "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"));
+var _ColorHelpers = require("../../lib/styles/ColorHelpers");
 var _DefaultTheme = require("../../lib/theming/themes/DefaultTheme");
 var _DarkTheme = require("../../lib/theming/themes/DarkTheme");
 var _ComboBox = require("../../components/ComboBox");
@@ -141,9 +142,9 @@ ThemeShowcase = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.de
       var values = _this.getValues(query);
       if (values.length > 0) {
         return values[0];
-      } else {
-        return _this.resetVariable();
       }
+      return _this.resetVariable();
     };_this.
     resetVariable = function () {
       if (!_this.isUnmounting) {
@@ -163,57 +164,57 @@ ComponentShowcase = /*#__PURE__*/function (_React$Component2) {(0, _inheritsLoos
     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 /*#__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)) },
+    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__*/
+            _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("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: 210 } }, "Variable Name"), /*#__PURE__*/
-          _react.default.createElement("th", { className: _ThemeShowcase.styles.headerCell(), style: { width: 250 } }, "Default Value"), /*#__PURE__*/
+        _react.default.createElement("th", { className: _ThemeShowcase.styles.headerCell(), style: { width: 250 } }, "Default Value"), /*#__PURE__*/
-          _react.default.createElement("th", { className: _ThemeShowcase.styles.headerCell(), style: { width: 250 } }, "Dark Value"))), /*#__PURE__*/
+        _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 }));})))));
+        _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;
   };return ComponentShowcase;}(_react.default.Component);var
@@ -231,10 +232,10 @@ ComponentShowcaseRow = /*#__PURE__*/function (_React$Component3) {(0, _inheritsL
     return /*#__PURE__*/(
       _react.default.createElement(_ThemeContext.ThemeContext.Consumer, null,
-      function (theme) {
+      function (theme) {var _cx2;
         return /*#__PURE__*/(
           _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
-          _react.default.createElement("tr", { className: _ThemeShowcase.styles.invisibleRow(theme) }, /*#__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__*/
@@ -242,7 +243,7 @@ ComponentShowcaseRow = /*#__PURE__*/function (_React$Component3) {(0, _inheritsL
           _react.default.createElement("td", { className: _ThemeShowcase.styles.invisibleCell() }), /*#__PURE__*/
           _react.default.createElement("td", { className: _ThemeShowcase.styles.invisibleCell() })),
-          row.variables.map(function (varName) {var _cx2;
+          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];
@@ -250,7 +251,10 @@ ComponentShowcaseRow = /*#__PURE__*/function (_React$Component3) {(0, _inheritsL
             return /*#__PURE__*/(
               _react.default.createElement("tr", {
                 key: el + "_" + varName,
-                className: (0, _Emotion.cx)(_ThemeShowcase.styles.row(theme), (_cx2 = {}, _cx2[_ThemeShowcase.styles.suspiciousRow()] = hasNoVariables, _cx2)) }, /*#__PURE__*/
+                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, {
@@ -359,9 +363,9 @@ DependencyName = /*#__PURE__*/function (_React$Component5) {(0, _inheritsLoose2.
     };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);
-var VariableValue = function VariableValue(props) {var _cx3;
+var VariableValue = function VariableValue(props) {var _cx4;
   var value = props.value;
-  var valueIsColor = isColor(value);
+  var valueIsColor = (0, _ColorHelpers.isColor)(value);
   var valueIsGradient = isGradient(value);
   var hasExample = valueIsColor || valueIsGradient;
   var borderColor = 'transparent';
@@ -370,7 +374,7 @@ var VariableValue = function VariableValue(props) {var _cx3;
   }
   return /*#__PURE__*/(
-    _react.default.createElement("span", { className: (0, _Emotion.cx)((_cx3 = {}, _cx3[_ThemeShowcase.styles.undefined()] = !value, _cx3)) },
+    _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 } }),
     value || 'undefined'));
@@ -395,10 +399,6 @@ var ShowUnusedVariables = function ShowUnusedVariables(props) {
 };
-function isColor(input) {
-  return !!input && (input.startsWith('#') || input.startsWith('rgb') || input.startsWith('hsl'));
-}
 function isGradient(input) {
   return !!input && input.startsWith('linear-gradient');
 }

package/cjs/internal/ThemeShowcase/ThemeShowcase.js.map CHANGED Viewed

	@@ -1 +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","cell","majorCell","elementName","invisibleCell","varName","dependencies","variableDefault","variableDark","darkVariables","hasNoVariables","suspiciousRow","VariableName","handleVariableSelect","variableName","renderDependencies","dependency","DependencyName","dependencyName","dependencyDefault","dependencyDark","handleDependencySelect","onDependencySelect","VariableValue","valueIsColor","isColor","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 { 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 } else {\n return this.resetVariable();\n }\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 (\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 );\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={styles.invisibleRow(theme)}>\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(theme), { [styles.suspiciousRow()]: hasNoVariables })}\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 –{' '}\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 isColor(input: string) {\n return !!input && (input.startsWith('#') \|\| input.startsWith('rgb') \|\| input.startsWith('hsl'));\n}\n\nfunction isGradient(input: string) {\n return !!input && input.startsWith('linear-gradient');\n}\n"]}
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 –{' '}\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/ThemeShowcase/ThemeShowcase.styles.d.ts CHANGED Viewed

@@ -5,9 +5,11 @@ export declare const styles: {
     headingSticky(): string;
     table(): string;
     headerCell(): string;
-    row(t: Theme): string;
+    row(): string;
+    darkRow(): string;
     cell(): string;
-    invisibleRow(t: Theme): string;
+    invisibleRow(): string;
+    invisibleDarkRow(): string;
     suspiciousRow(): string;
     majorCell(): string;
     invisibleCell(): string;

package/cjs/internal/ThemeShowcase/ThemeShowcase.styles.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
 var styles = (0, _Emotion.memoizeStyle)({
@@ -50,16 +50,23 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
-  row: function row(t) {
-    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        background-color: ", ";\n      }\n    "])),
+  row: function row() {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        background-color: #f8f8f8;\n      }\n    "])));
+  },
+  darkRow: function darkRow() {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        background-color: rgba(255, 255, 255, 0.04);\n      }\n    "])));
-    t.modalCloseButtonColor);
   },
   cell: function cell() {
-    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-top: 0 none;\n      border-bottom: 1px solid #e8e8e8;\n      vertical-align: top;\n      padding: 10px 5px;\n    "])));
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-top: 0 none;\n      border-bottom: 1px solid #e8e8e8;\n      vertical-align: top;\n      padding: 10px 5px;\n    "])));
@@ -67,14 +74,14 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
-  invisibleRow: function invisibleRow(t) {
-    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0;\n      height: 0;\n\n      &:hover,\n      &:hover ~ tr {\n        background-color: ", ";\n      }\n\n      &:hover ~ &,\n      &:hover ~ & ~ tr {\n        background-color: transparent;\n      }\n    "])),
+  invisibleRow: function invisibleRow() {
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0;\n      height: 0;\n\n      &:hover,\n      &:hover ~ tr {\n        background-color: #f8f8f8;\n      }\n\n      &:hover ~ &,\n      &:hover ~ & ~ tr {\n        background-color: transparent;\n      }\n    "])));
-    t.modalCloseButtonColor);
@@ -82,23 +89,31 @@ var styles = (0, _Emotion.memoizeStyle)({
+  },
+  invisibleDarkRow: function invisibleDarkRow() {
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover,\n      &:hover ~ tr {\n        background-color: rgba(255, 255, 255, 0.04);\n      }\n    "])));
   },
   suspiciousRow: function suspiciousRow() {
-    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background-color: red;\n    "])));
+    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background-color: red;\n    "])));
   },
   //noinspection CssReplaceWithShorthandSafely
   majorCell: function majorCell() {
-    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-top: 1px solid #e8e8e8;\n    "])));
+    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-top: 1px solid #e8e8e8;\n    "])));
   },
   invisibleCell: function invisibleCell() {
-    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0;\n      height: 0;\n      font-size: 0;\n      line-height: 0;\n      border: 0 none;\n      border-top: 1px solid #e8e8e8;\n    "])));
+    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0;\n      height: 0;\n      font-size: 0;\n      line-height: 0;\n      border: 0 none;\n      border-top: 1px solid #e8e8e8;\n    "])));
@@ -109,27 +124,27 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
   suspiciousCell: function suspiciousCell() {
-    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background-color: #fff0bc;\n    "])));
+    return (0, _Emotion.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background-color: #fff0bc;\n    "])));
   },
   elementName: function elementName() {
-    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: #7f9a44;\n      font-weight: 400;\n    "])));
+    return (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: #7f9a44;\n      font-weight: 400;\n    "])));
   },
   relativeCss: function relativeCss() {
-    return (0, _Emotion.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n      white-space: pre;\n      color: #333;\n    "])));
+    return (0, _Emotion.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n      white-space: pre;\n      color: #333;\n    "])));
   },
   variableName: function variableName() {
-    return (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: #b77daa;\n      font-weight: 400;\n      cursor: pointer;\n    "])));
+    return (0, _Emotion.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: #b77daa;\n      font-weight: 400;\n      cursor: pointer;\n    "])));
@@ -137,7 +152,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
   colorExample: function colorExample() {
-    return (0, _Emotion.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      box-sizing: border-box;\n      width: 16px;\n      height: 16px;\n      border: 1px solid transparent;\n      margin-right: 4px;\n      vertical-align: -3px;\n    "])));
+    return (0, _Emotion.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      box-sizing: border-box;\n      width: 16px;\n      height: 16px;\n      border: 1px solid transparent;\n      margin-right: 4px;\n      vertical-align: -3px;\n    "])));
@@ -149,13 +164,13 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
   undefined: function undefined() {
-    return (0, _Emotion.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteralLoose2.default)(["\n      text-decoration: line-through;\n    "])));
+    return (0, _Emotion.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteralLoose2.default)(["\n      text-decoration: line-through;\n    "])));
   },
   unusedVariablesWarning: function unusedVariablesWarning() {
-    return (0, _Emotion.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 16px;\n      margin: 20px 0;\n      background-color: #fff0bc;\n      border-radius: 3px;\n    "])));
+    return (0, _Emotion.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 16px;\n      margin: 20px 0;\n      background-color: #fff0bc;\n      border-radius: 3px;\n    "])));
@@ -164,25 +179,25 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
   cssClassObject: function cssClassObject() {
-    return (0, _Emotion.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: #d28445;\n    "])));
+    return (0, _Emotion.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: #d28445;\n    "])));
   },
   cssClassName: function cssClassName() {
-    return (0, _Emotion.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: #7f9a44;\n    "])));
+    return (0, _Emotion.css)(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: #7f9a44;\n    "])));
   },
   cssThemeObject: function cssThemeObject() {
-    return (0, _Emotion.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: #ac4142;\n    "])));
+    return (0, _Emotion.css)(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: #ac4142;\n    "])));
   },
   cssThemeProp: function cssThemeProp() {
-    return (0, _Emotion.css)(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: #b77daa;\n    "])));
+    return (0, _Emotion.css)(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: #b77daa;\n    "])));
   } });exports.styles = styles;

package/cjs/internal/ThemeShowcase/ThemeShowcase.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["ThemeShowcase.styles.ts"],"names":["styles","searchBar","t","css","bgDefault","heading","headingSticky","table","headerCell","row","~~modalCloseButtonColor~~","cell","invisibleRow","suspiciousRow","majorCell","invisibleCell","suspiciousCell","elementName","relativeCss","variableName","colorExample","undefined","unusedVariablesWarning","cssClassObject","cssClassName","cssThemeObject","cssThemeProp"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,SADiC,qBACvBC,CADuB,EACb;AAClB,eAAOC,YAAP;;;;;AAKsBD,IAAAA,CAAC,CAACE,SALxB;;;;;;;;;;;;AAiBD,GAnBgC;;AAqBjCC,EAAAA,OArBiC,mBAqBzBH,CArByB,EAqBf;AAChB,eAAOC,YAAP;;;AAGsBD,IAAAA,CAAC,CAACE,SAHxB;;AAKD,GA3BgC;;AA6BjCE,EAAAA,aA7BiC,2BA6BjB;AACd,eAAOH,YAAP;;;AAGD,GAjCgC;;AAmCjCI,EAAAA,KAnCiC,mBAmCzB;AACN,eAAOJ,YAAP;;;;AAID,GAxCgC;;AA0CjCK,EAAAA,UA1CiC,wBA0CpB;AACX,eAAOL,YAAP;;;;AAID,GA/CgC;;AAiDjCM,EAAAA,GAjDiC,~~eAiD7BP~~,~~CAjD6B~~,~~EAiDnB~~;~~AACZ~~,~~eAAOC~~,~~YAAP;;AAEwBD~~,~~IAAAA~~,~~CAAC~~,~~CAACQ,qBAF1B;;;~~AAKD,~~GAvDgC~~;;~~AAyDjCC~~,EAAAA,~~IAzDiC~~,~~kBAyD1B~~;AACL,eAAOR,YAAP;;;;;;AAMD,~~GAhEgC~~;;~~AAkEjCS~~,EAAAA,~~YAlEiC~~,~~wBAkEpBV~~,~~CAlEoB~~,~~EAkEV~~;~~AACrB~~,~~eAAOC~~,~~YAAP;;;;;;AAMwBD~~,~~IAAAA~~,~~CAAC~~,~~CAACQ~~,~~qBAN1B;;;;;;;;AAcD,GAjFgC~~;;~~AAmFjCG~~,EAAAA,~~aAnFiC~~,~~2BAmFjB~~;AACd,~~eAAOV~~,YAAP;;;AAGD,~~GAvFgC~~;;~~AAyFjC~~;~~AACAW~~,EAAAA,~~SA1FiC~~,~~uBA0FrB~~;AACV,~~eAAOX~~,YAAP;;;AAGD,~~GA9FgC~~;;~~AAgGjCY~~,EAAAA,~~aAhGiC~~,~~2BAgGjB~~;AACd,~~eAAOZ~~,YAAP;;;;;;;;AAQD,~~GAzGgC~~;;~~AA2GjCa~~,EAAAA,~~cA3GiC~~,~~4BA2GhB~~;AACf,~~eAAOb~~,YAAP;;;AAGD,~~GA/GgC~~;;~~AAiHjCc~~,EAAAA,~~WAjHiC~~,~~yBAiHnB~~;AACZ,~~eAAOd~~,YAAP;;;;AAID,~~GAtHgC~~;;~~AAwHjCe~~,EAAAA,~~WAxHiC~~,~~yBAwHnB~~;AACZ,~~eAAOf~~,YAAP;;;;AAID,~~GA7HgC~~;;~~AA+HjCgB~~,EAAAA,~~YA/HiC~~,~~0BA+HlB~~;AACb,~~eAAOhB~~,YAAP;;;;;AAKD,~~GArIgC~~;;~~AAuIjCiB~~,EAAAA,~~YAvIiC~~,~~0BAuIlB~~;AACb,~~eAAOjB~~,YAAP;;;;;;;;;AASD,~~GAjJgC~~;;~~AAmJjCkB~~,EAAAA,~~SAnJiC~~,~~uBAmJrB~~;AACV,~~eAAOlB~~,YAAP;;;AAGD,~~GAvJgC~~;;~~AAyJjCmB~~,EAAAA,~~sBAzJiC~~,~~oCAyJR~~;AACvB,~~eAAOnB~~,YAAP;;;;;;AAMD,~~GAhKgC~~;;~~AAkKjCoB~~,EAAAA,~~cAlKiC~~,~~4BAkKhB~~;AACf,~~eAAOpB~~,YAAP;;;AAGD,~~GAtKgC~~;;~~AAwKjCqB~~,EAAAA,~~YAxKiC~~,~~0BAwKlB~~;AACb,~~eAAOrB~~,YAAP;;;AAGD,~~GA5KgC~~;;~~AA8KjCsB~~,EAAAA,~~cA9KiC~~,~~4BA8KhB~~;AACf,~~eAAOtB~~,YAAP;;;AAGD,~~GAlLgC~~;;~~AAoLjCuB~~,EAAAA,~~YApLiC~~,~~0BAoLlB~~;AACb,~~eAAOvB~~,YAAP;;;AAGD,~~GAxLgC~~,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n searchBar(t: Theme) {\n return css`\n position: relative;\n box-sizing: border-box;\n height: 40px;\n padding: 5px;\n background-color: ${t.bgDefault};\n\n &::after {\n content: attr(data-perf-info);\n position: absolute;\n top: 11px;\n right: 20px;\n color: #808080;\n height: 20px;\n line-height: 20px;\n }\n `;\n },\n\n heading(t: Theme) {\n return css`\n padding: 24px 0 16px 5px;\n margin: 0;\n background-color: ${t.bgDefault};\n `;\n },\n\n headingSticky() {\n return css`\n border-bottom: 1px solid #e8e8e8;\n `;\n },\n\n table() {\n return css`\n width: 880px;\n border-collapse: collapse;\n `;\n },\n\n headerCell() {\n return css`\n text-align: left;\n padding-left: 5px;\n `;\n },\n\n row(t: ~~Theme~~) {\n return css`\n &:hover {\n background-color: ~~${t~~.~~modalCloseButtonColor}~~;\n }\n `;\n },\n\n cell() {\n return css`\n border-top: 0 none;\n border-bottom: 1px solid #e8e8e8;\n vertical-align: top;\n padding: 10px 5px;\n `;\n },\n\n invisibleRow(~~t: Theme~~) {\n return css`\n padding: 0;\n height: 0;\n\n &:hover,\n &:hover ~ tr {\n background-color: ~~${t.modalCloseButtonColor}~~;\n }\n\n &:hover ~ &,\n &:hover ~ & ~ tr {\n background-color: transparent;\n }\n `;\n },\n\n suspiciousRow() {\n return css`\n background-color: red;\n `;\n },\n\n //noinspection CssReplaceWithShorthandSafely\n majorCell() {\n return css`\n border-top: 1px solid #e8e8e8;\n `;\n },\n\n invisibleCell() {\n return css`\n padding: 0;\n height: 0;\n font-size: 0;\n line-height: 0;\n border: 0 none;\n border-top: 1px solid #e8e8e8;\n `;\n },\n\n suspiciousCell() {\n return css`\n background-color: #fff0bc;\n `;\n },\n\n elementName() {\n return css`\n color: #7f9a44;\n font-weight: 400;\n `;\n },\n\n relativeCss() {\n return css`\n white-space: pre;\n color: #333;\n `;\n },\n\n variableName() {\n return css`\n color: #b77daa;\n font-weight: 400;\n cursor: pointer;\n `;\n },\n\n colorExample() {\n return css`\n display: inline-block;\n box-sizing: border-box;\n width: 16px;\n height: 16px;\n border: 1px solid transparent;\n margin-right: 4px;\n vertical-align: -3px;\n `;\n },\n\n undefined() {\n return css`\n text-decoration: line-through;\n `;\n },\n\n unusedVariablesWarning() {\n return css`\n padding: 16px;\n margin: 20px 0;\n background-color: #fff0bc;\n border-radius: 3px;\n `;\n },\n\n cssClassObject() {\n return css`\n color: #d28445;\n `;\n },\n\n cssClassName() {\n return css`\n color: #7f9a44;\n `;\n },\n\n cssThemeObject() {\n return css`\n color: #ac4142;\n `;\n },\n\n cssThemeProp() {\n return css`\n color: #b77daa;\n `;\n },\n});\n"]}
1	+ {"version":3,"sources":["ThemeShowcase.styles.ts"],"names":["styles","searchBar","t","css","bgDefault","heading","headingSticky","table","headerCell","row","darkRow","cell","invisibleRow","invisibleDarkRow","suspiciousRow","majorCell","invisibleCell","suspiciousCell","elementName","relativeCss","variableName","colorExample","undefined","unusedVariablesWarning","cssClassObject","cssClassName","cssThemeObject","cssThemeProp"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,SADiC,qBACvBC,CADuB,EACb;AAClB,eAAOC,YAAP;;;;;AAKsBD,IAAAA,CAAC,CAACE,SALxB;;;;;;;;;;;;AAiBD,GAnBgC;;AAqBjCC,EAAAA,OArBiC,mBAqBzBH,CArByB,EAqBf;AAChB,eAAOC,YAAP;;;AAGsBD,IAAAA,CAAC,CAACE,SAHxB;;AAKD,GA3BgC;;AA6BjCE,EAAAA,aA7BiC,2BA6BjB;AACd,eAAOH,YAAP;;;AAGD,GAjCgC;;AAmCjCI,EAAAA,KAnCiC,mBAmCzB;AACN,eAAOJ,YAAP;;;;AAID,GAxCgC;;AA0CjCK,EAAAA,UA1CiC,wBA0CpB;AACX,eAAOL,YAAP;;;;AAID,GA/CgC;;AAiDjCM,EAAAA,GAjDiC,iBAiD3B;AACJ,eAAON,YAAP;;;;;AAKD,GAvDgC;AAwDjCO,EAAAA,OAxDiC,qBAwDvB;AACR,eAAOP,YAAP;;;;;AAKD,GA9DgC;;AAgEjCQ,EAAAA,IAhEiC,kBAgE1B;AACL,eAAOR,YAAP;;;;;;AAMD,GAvEgC;;AAyEjCS,EAAAA,YAzEiC,0BAyElB;AACb,eAAOT,YAAP;;;;;;;;;;;;;;AAcD,GAxFgC;AAyFjCU,EAAAA,gBAzFiC,8BAyFd;AACjB,eAAOV,YAAP;;;;;;AAMD,GAhGgC;;AAkGjCW,EAAAA,aAlGiC,2BAkGjB;AACd,eAAOX,YAAP;;;AAGD,GAtGgC;;AAwGjC;AACAY,EAAAA,SAzGiC,uBAyGrB;AACV,eAAOZ,YAAP;;;AAGD,GA7GgC;;AA+GjCa,EAAAA,aA/GiC,2BA+GjB;AACd,eAAOb,YAAP;;;;;;;;AAQD,GAxHgC;;AA0HjCc,EAAAA,cA1HiC,4BA0HhB;AACf,eAAOd,YAAP;;;AAGD,GA9HgC;;AAgIjCe,EAAAA,WAhIiC,yBAgInB;AACZ,eAAOf,YAAP;;;;AAID,GArIgC;;AAuIjCgB,EAAAA,WAvIiC,yBAuInB;AACZ,eAAOhB,YAAP;;;;AAID,GA5IgC;;AA8IjCiB,EAAAA,YA9IiC,0BA8IlB;AACb,eAAOjB,YAAP;;;;;AAKD,GApJgC;;AAsJjCkB,EAAAA,YAtJiC,0BAsJlB;AACb,eAAOlB,YAAP;;;;;;;;;AASD,GAhKgC;;AAkKjCmB,EAAAA,SAlKiC,uBAkKrB;AACV,eAAOnB,YAAP;;;AAGD,GAtKgC;;AAwKjCoB,EAAAA,sBAxKiC,oCAwKR;AACvB,eAAOpB,YAAP;;;;;;AAMD,GA/KgC;;AAiLjCqB,EAAAA,cAjLiC,4BAiLhB;AACf,eAAOrB,YAAP;;;AAGD,GArLgC;;AAuLjCsB,EAAAA,YAvLiC,0BAuLlB;AACb,eAAOtB,YAAP;;;AAGD,GA3LgC;;AA6LjCuB,EAAAA,cA7LiC,4BA6LhB;AACf,eAAOvB,YAAP;;;AAGD,GAjMgC;;AAmMjCwB,EAAAA,YAnMiC,0BAmMlB;AACb,eAAOxB,YAAP;;;AAGD,GAvMgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n searchBar(t: Theme) {\n return css`\n position: relative;\n box-sizing: border-box;\n height: 40px;\n padding: 5px;\n background-color: ${t.bgDefault};\n\n &::after {\n content: attr(data-perf-info);\n position: absolute;\n top: 11px;\n right: 20px;\n color: #808080;\n height: 20px;\n line-height: 20px;\n }\n `;\n },\n\n heading(t: Theme) {\n return css`\n padding: 24px 0 16px 5px;\n margin: 0;\n background-color: ${t.bgDefault};\n `;\n },\n\n headingSticky() {\n return css`\n border-bottom: 1px solid #e8e8e8;\n `;\n },\n\n table() {\n return css`\n width: 880px;\n border-collapse: collapse;\n `;\n },\n\n headerCell() {\n return css`\n text-align: left;\n padding-left: 5px;\n `;\n },\n\n row() {\n return css`\n &:hover {\n background-color: #f8f8f8;\n }\n `;\n },\n darkRow() {\n return css`\n &:hover {\n background-color: rgba(255, 255, 255, 0.04);\n }\n `;\n },\n\n cell() {\n return css`\n border-top: 0 none;\n border-bottom: 1px solid #e8e8e8;\n vertical-align: top;\n padding: 10px 5px;\n `;\n },\n\n invisibleRow() {\n return css`\n padding: 0;\n height: 0;\n\n &:hover,\n &:hover ~ tr {\n background-color: #f8f8f8;\n }\n\n &:hover ~ &,\n &:hover ~ & ~ tr {\n background-color: transparent;\n }\n `;\n },\n invisibleDarkRow() {\n return css`\n &:hover,\n &:hover ~ tr {\n background-color: rgba(255, 255, 255, 0.04);\n }\n `;\n },\n\n suspiciousRow() {\n return css`\n background-color: red;\n `;\n },\n\n //noinspection CssReplaceWithShorthandSafely\n majorCell() {\n return css`\n border-top: 1px solid #e8e8e8;\n `;\n },\n\n invisibleCell() {\n return css`\n padding: 0;\n height: 0;\n font-size: 0;\n line-height: 0;\n border: 0 none;\n border-top: 1px solid #e8e8e8;\n `;\n },\n\n suspiciousCell() {\n return css`\n background-color: #fff0bc;\n `;\n },\n\n elementName() {\n return css`\n color: #7f9a44;\n font-weight: 400;\n `;\n },\n\n relativeCss() {\n return css`\n white-space: pre;\n color: #333;\n `;\n },\n\n variableName() {\n return css`\n color: #b77daa;\n font-weight: 400;\n cursor: pointer;\n `;\n },\n\n colorExample() {\n return css`\n display: inline-block;\n box-sizing: border-box;\n width: 16px;\n height: 16px;\n border: 1px solid transparent;\n margin-right: 4px;\n vertical-align: -3px;\n `;\n },\n\n undefined() {\n return css`\n text-decoration: line-through;\n `;\n },\n\n unusedVariablesWarning() {\n return css`\n padding: 16px;\n margin: 20px 0;\n background-color: #fff0bc;\n border-radius: 3px;\n `;\n },\n\n cssClassObject() {\n return css`\n color: #d28445;\n `;\n },\n\n cssClassName() {\n return css`\n color: #7f9a44;\n `;\n },\n\n cssThemeObject() {\n return css`\n color: #ac4142;\n `;\n },\n\n cssThemeProp() {\n return css`\n color: #b77daa;\n `;\n },\n});\n"]}