npm - @skbkontur/react-ui - Versions diffs - 3.6.0 → 3.8.0 - Mend

@skbkontur/react-ui 3.6.0 → 3.8.0

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 (281) hide show

package/components/Toggle/Toggle/Toggle.js CHANGED Viewed

@@ -2,7 +2,7 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
 import PropTypes from 'prop-types';
 import warning from 'warning';
-import { tabListener } from "../../../lib/events/tabListener";
+import { keyListener } from "../../../lib/events/keyListener";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
@@ -20,7 +20,7 @@ export var Toggle = /*#__PURE__*/function (_React$Component) {
     _this.focus = function () {
       if (_this.input) {
-        tabListener.isTabPressed = true;
+        keyListener.isTabPressed = true;
         _this.input.focus();
       }
@@ -51,7 +51,7 @@ export var Toggle = /*#__PURE__*/function (_React$Component) {
         _this.props.onFocus(event);
       }
-      if (tabListener.isTabPressed) {
+      if (keyListener.isTabPressed) {
         _this.setState({
           focusByTab: true
         });
@@ -79,7 +79,7 @@ export var Toggle = /*#__PURE__*/function (_React$Component) {
   _proto.componentDidMount = function componentDidMount() {
     if (this.props.autoFocus) {
-      tabListener.isTabPressed = true;
+      keyListener.isTabPressed = true;
       this.focus();
     }
   }
@@ -144,7 +144,7 @@ export var Toggle = /*#__PURE__*/function (_React$Component) {
         boxShadow: "inset 0 0 0 1px " + color
       } : undefined
     }, /*#__PURE__*/React.createElement("div", {
-      className: cx(styles.activeBackground(), globalClasses.background, (_cx5 = {}, _cx5[styles.activeBackgroundLoading(this.theme)] = loading, _cx5)),
+      className: cx(styles.activeBackground(), globalClasses.background, (_cx5 = {}, _cx5[styles.activeBackgroundLoading(this.theme)] = loading, _cx5[styles.disabledBackground(this.theme)] = disabled, _cx5)),
       style: checked && color && !disabled ? {
         backgroundColor: color,
         boxShadow: "inset 0 0 0 1px " + color

package/components/Toggle/Toggle/Toggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Toggle.tsx"],"names":["React","PropTypes","warning","tabListener","ThemeContext","CommonWrapper","cx","styles","globalClasses","colorWarningShown","Toggle","props","theme","input","focus","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","handleBlur","onBlur","state","defaultChecked","componentDidMount","autoFocus","render","renderMain","children","captionPosition","error","loading","color","disabled","containerClassNames","container","containerDisabled","containerLoading","labelClassNames","root","rootLeft","caption","captionClass","captionLeft","outline","isWarning","isError","focused","wrapper","backgroundColor","boxShadow","undefined","activeBackground","background","activeBackgroundLoading","handle","handleDisabled","Component","__KONTUR_REACT_UI__","propTypes","bool","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport warning from 'warning';\n\nimport { tabListener } from '../../lib/events/tabListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles, globalClasses } from './Toggle.styles';\n\nlet colorWarningShown = false;\n\nexport interface ToggleProps extends CommonProps {\n children?: React.ReactNode;\n /*\n Положение children справа или слева от переключателя\n * @default 'right'\n /\n captionPosition: 'left' \| 'right';\n checked?: boolean;\n defaultChecked?: boolean;\n disabled?: boolean;\n onValueChange?: (value: boolean) => void;\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n warning?: boolean;\n error?: boolean;\n loading?: boolean;\n autoFocus?: boolean;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n color?: React.CSSProperties['color'];\n}\n\nexport interface ToggleState {\n checked?: boolean;\n focusByTab?: boolean;\n}\n\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\n public static __KONTUR_REACT_UI__ = 'Toggle';\n\n public static propTypes = {\n checked: PropTypes.bool,\n defaultChecked: PropTypes.bool,\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n loading: PropTypes.bool,\n warning: PropTypes.bool,\n onValueChange: PropTypes.func,\n color(props: ToggleProps) {\n if (props.color && !colorWarningShown) {\n warning(false, `[Toggle]: prop 'color' is deprecated. Please, use theme variable 'toggleBgChecked' instead. `);\n colorWarningShown = true;\n }\n },\n };\n\n public static defaultProps = {\n disabled: false,\n loading: false,\n captionPosition: 'right',\n };\n\n private theme!: Theme;\n private input: HTMLInputElement \| null = null;\n\n constructor(props: ToggleProps) {\n super(props);\n\n this.state = {\n focusByTab: false,\n checked: props.defaultChecked,\n };\n }\n\n public componentDidMount() {\n if (this.props.autoFocus) {\n tabListener.isTabPressed = true;\n this.focus();\n }\n }\n\n /\n @public\n */\n public focus = () => {\n if (this.input) {\n tabListener.isTabPressed = true;\n this.input.focus();\n }\n };\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { children, captionPosition, warning, error, loading, color } = this.props;\n const disabled = this.props.disabled \|\| loading;\n const checked = this.isUncontrolled() ? this.state.checked : this.props.checked;\n\n const containerClassNames = cx(styles.container(this.theme), {\n [styles.containerDisabled(this.theme)]: !!disabled,\n [globalClasses.container]: true,\n [globalClasses.containerDisabled]: !!disabled,\n [globalClasses.containerLoading]: loading,\n });\n\n const labelClassNames = cx(styles.root(this.theme), {\n [styles.rootLeft()]: captionPosition === 'left',\n [styles.disabled()]: !!disabled,\n });\n\n let caption = null;\n if (children) {\n const captionClass = cx(styles.caption(this.theme), {\n [styles.captionLeft(this.theme)]: captionPosition === 'left',\n });\n caption = <span className={captionClass}>{children}</span>;\n }\n\n return (\n <CommonWrapper {...this.props}>\n <label className={labelClassNames}>\n <div\n className={cx(styles.outline(this.theme), {\n [styles.isWarning(this.theme)]: !!warning,\n [styles.isError(this.theme)]: !!error,\n [styles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\n })}\n >\n <span className={cx(styles.wrapper(this.theme))}>\n <input\n type=\"checkbox\"\n checked={checked}\n onChange={this.handleChange}\n className={styles.input(this.theme)}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n ref={this.inputRef}\n disabled={disabled}\n />\n <div\n className={containerClassNames}\n style={\n checked && color && !disabled\n ? {\n backgroundColor: color,\n boxShadow: `inset 0 0 0 1px ${color}`,\n }\n : undefined\n }\n >\n <div\n className={cx(styles.activeBackground(), globalClasses.background, {\n [styles.activeBackgroundLoading(this.theme)]: loading,\n })}\n style={\n checked && color && !disabled\n ? {\n backgroundColor: color,\n boxShadow: `inset 0 0 0 1px ${color}`,\n }\n : undefined\n }\n />\n </div>\n <div\n className={cx(styles.handle(this.theme), globalClasses.handle, {\n [styles.handleDisabled(this.theme)]: disabled,\n })}\n />\n </span>\n </div>\n {caption}\n </label>\n </CommonWrapper>\n );\n }\n\n private inputRef = (element: HTMLInputElement) => {\n this.input = element;\n };\n\n private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(event.target.checked);\n }\n\n if (this.isUncontrolled()) {\n this.setState({\n checked: event.target.checked,\n });\n }\n\n if (this.props.onChange) {\n this.props.onChange(event);\n }\n };\n\n private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (this.props.onFocus) {\n this.props.onFocus(event);\n }\n\n if (tabListener.isTabPressed) {\n this.setState({ focusByTab: true });\n }\n };\n\n private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (this.props.onBlur) {\n this.props.onBlur(event);\n }\n this.setState({\n focusByTab: false,\n });\n };\n\n private isUncontrolled() {\n return this.props.checked === undefined;\n }\n}\n"]}
1	+ {"version":3,"sources":["Toggle.tsx"],"names":["React","PropTypes","warning","keyListener","ThemeContext","CommonWrapper","cx","styles","globalClasses","colorWarningShown","Toggle","props","theme","input","focus","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","handleBlur","onBlur","state","defaultChecked","componentDidMount","autoFocus","render","renderMain","children","captionPosition","error","loading","color","disabled","containerClassNames","container","containerDisabled","containerLoading","labelClassNames","root","rootLeft","caption","captionClass","captionLeft","outline","isWarning","isError","focused","wrapper","backgroundColor","boxShadow","undefined","activeBackground","background","activeBackgroundLoading","disabledBackground","handle","handleDisabled","Component","__KONTUR_REACT_UI__","propTypes","bool","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport warning from 'warning';\n\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles, globalClasses } from './Toggle.styles';\n\nlet colorWarningShown = false;\n\nexport interface ToggleProps extends CommonProps {\n children?: React.ReactNode;\n /*\n Положение children справа или слева от переключателя\n * @default 'right'\n /\n captionPosition: 'left' \| 'right';\n checked?: boolean;\n defaultChecked?: boolean;\n disabled?: boolean;\n onValueChange?: (value: boolean) => void;\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n warning?: boolean;\n error?: boolean;\n loading?: boolean;\n autoFocus?: boolean;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n color?: React.CSSProperties['color'];\n}\n\nexport interface ToggleState {\n checked?: boolean;\n focusByTab?: boolean;\n}\n\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\n public static __KONTUR_REACT_UI__ = 'Toggle';\n\n public static propTypes = {\n checked: PropTypes.bool,\n defaultChecked: PropTypes.bool,\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n loading: PropTypes.bool,\n warning: PropTypes.bool,\n onValueChange: PropTypes.func,\n color(props: ToggleProps) {\n if (props.color && !colorWarningShown) {\n warning(false, `[Toggle]: prop 'color' is deprecated. Please, use theme variable 'toggleBgChecked' instead. `);\n colorWarningShown = true;\n }\n },\n };\n\n public static defaultProps = {\n disabled: false,\n loading: false,\n captionPosition: 'right',\n };\n\n private theme!: Theme;\n private input: HTMLInputElement \| null = null;\n\n constructor(props: ToggleProps) {\n super(props);\n\n this.state = {\n focusByTab: false,\n checked: props.defaultChecked,\n };\n }\n\n public componentDidMount() {\n if (this.props.autoFocus) {\n keyListener.isTabPressed = true;\n this.focus();\n }\n }\n\n /\n @public\n */\n public focus = () => {\n if (this.input) {\n keyListener.isTabPressed = true;\n this.input.focus();\n }\n };\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { children, captionPosition, warning, error, loading, color } = this.props;\n const disabled = this.props.disabled \|\| loading;\n const checked = this.isUncontrolled() ? this.state.checked : this.props.checked;\n\n const containerClassNames = cx(styles.container(this.theme), {\n [styles.containerDisabled(this.theme)]: !!disabled,\n [globalClasses.container]: true,\n [globalClasses.containerDisabled]: !!disabled,\n [globalClasses.containerLoading]: loading,\n });\n\n const labelClassNames = cx(styles.root(this.theme), {\n [styles.rootLeft()]: captionPosition === 'left',\n [styles.disabled()]: !!disabled,\n });\n\n let caption = null;\n if (children) {\n const captionClass = cx(styles.caption(this.theme), {\n [styles.captionLeft(this.theme)]: captionPosition === 'left',\n });\n caption = <span className={captionClass}>{children}</span>;\n }\n\n return (\n <CommonWrapper {...this.props}>\n <label className={labelClassNames}>\n <div\n className={cx(styles.outline(this.theme), {\n [styles.isWarning(this.theme)]: !!warning,\n [styles.isError(this.theme)]: !!error,\n [styles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\n })}\n >\n <span className={cx(styles.wrapper(this.theme))}>\n <input\n type=\"checkbox\"\n checked={checked}\n onChange={this.handleChange}\n className={styles.input(this.theme)}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n ref={this.inputRef}\n disabled={disabled}\n />\n <div\n className={containerClassNames}\n style={\n checked && color && !disabled\n ? {\n backgroundColor: color,\n boxShadow: `inset 0 0 0 1px ${color}`,\n }\n : undefined\n }\n >\n <div\n className={cx(styles.activeBackground(), globalClasses.background, {\n [styles.activeBackgroundLoading(this.theme)]: loading,\n [styles.disabledBackground(this.theme)]: disabled,\n })}\n style={\n checked && color && !disabled\n ? {\n backgroundColor: color,\n boxShadow: `inset 0 0 0 1px ${color}`,\n }\n : undefined\n }\n />\n </div>\n <div\n className={cx(styles.handle(this.theme), globalClasses.handle, {\n [styles.handleDisabled(this.theme)]: disabled,\n })}\n />\n </span>\n </div>\n {caption}\n </label>\n </CommonWrapper>\n );\n }\n\n private inputRef = (element: HTMLInputElement) => {\n this.input = element;\n };\n\n private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(event.target.checked);\n }\n\n if (this.isUncontrolled()) {\n this.setState({\n checked: event.target.checked,\n });\n }\n\n if (this.props.onChange) {\n this.props.onChange(event);\n }\n };\n\n private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (this.props.onFocus) {\n this.props.onFocus(event);\n }\n\n if (keyListener.isTabPressed) {\n this.setState({ focusByTab: true });\n }\n };\n\n private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (this.props.onBlur) {\n this.props.onBlur(event);\n }\n this.setState({\n focusByTab: false,\n });\n };\n\n private isUncontrolled() {\n return this.props.checked === undefined;\n }\n}\n"]}

package/components/Toggle/Toggle.styles/Toggle.styles.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
 import { css, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
 export var globalClasses = prefix('toggle')({
@@ -26,13 +26,13 @@ export var styles = memoizeStyle({
   },
   input: function input(t) {
     var handleWidthWithBorders = t.toggleHeight;
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      opacity: 0;\n\n      &:focus {\n        outline: none;\n      }\n      &:checked ~ .", " {\n        box-shadow: inset 0 0 0 ", " ", ";\n        background: ", ";\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .", " {\n        box-shadow: inset 0 0 0 ", " ", ";\n        background: ", ";\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .", " {\n        background: ", ";\n        box-shadow: inset 0 0 0 ", " ", ";\n      }\n      &:checked ~ .", " .", " {\n        width: 70%;\n        background: ", ";\n      }\n      &:checked ~ .", " .", " {\n        width: 70%;\n        background: ", ";\n        border-radius: calc(", " * 0.5) 0 0 calc(", " * 0.5);\n        box-shadow: inset 0 0 0 1px ", ";\n      }\n      &:checked ~ .", " {\n        transform: translateX(", ") translateX(-", ");\n      }\n    "])), globalClasses.container, t.toggleBorderWidth, t.toggleBgChecked, t.toggleBgChecked, globalClasses.containerDisabled, t.toggleBorderWidth, t.toggleBorderColor, t.toggleBgDisabled, globalClasses.containerLoading, t.toggleBorderColor, t.toggleBorderWidth, t.toggleBorderColor, globalClasses.container, globalClasses.background, t.toggleBgChecked, globalClasses.containerDisabled, globalClasses.background, t.toggleBgDisabled, t.toggleHeight, t.toggleHeight, t.toggleBorderColor, globalClasses.handle, t.toggleWidth, handleWidthWithBorders);
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      opacity: 0;\n\n      &:focus {\n        outline: none;\n      }\n      &:checked ~ .", " {\n        box-shadow: inset 0 0 0 ", " ", ";\n        background: ", ";\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .", " {\n        box-shadow: inset 0 0 0 ", " ", ";\n        background: ", ";\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .", " {\n        background: ", ";\n        box-shadow: inset 0 0 0 ", " ", ";\n      }\n      &:checked ~ .", " .", " {\n        width: 70%;\n        background: ", ";\n      }\n      &:checked ~ .", " .", " {\n        width: 70%;\n        background: ", ";\n        border-radius: calc(", " * 0.5) 0 0 calc(", " * 0.5);\n        box-shadow: inset 0 0 0 1px ", ";\n      }\n      &:checked ~ .", " {\n        transform: translateX(", ") translateX(-", ");\n      }\n    "])), globalClasses.container, t.toggleBorderWidth, t.toggleBgChecked, t.toggleBgChecked, globalClasses.containerDisabled, t.toggleBorderWidth, t.toggleBorderColorDisabledChecked, t.toggleBgDisabledChecked, globalClasses.containerLoading, t.toggleBorderColor, t.toggleBorderWidth, t.toggleBorderColor, globalClasses.container, globalClasses.background, t.toggleBgChecked, globalClasses.containerDisabled, globalClasses.background, t.toggleBgDisabledChecked, t.toggleHeight, t.toggleHeight, t.toggleBorderColorDisabledChecked, globalClasses.handle, t.toggleWidth, handleWidthWithBorders);
   },
   container: function container(t) {
     return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      border-radius: ", ";\n      box-shadow: inset 0 0 0 ", " ", ";\n      height: 100%;\n      overflow: hidden;\n      position: absolute;\n      width: 100%;\n      /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\n      z-index: 0;\n    "])), t.toggleBorderRadius, t.toggleBorderWidth, t.toggleBorderColor);
   },
   containerDisabled: function containerDisabled(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.toggleBgDisabled);
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      box-shadow: inset 0 0 0 1px ", ";\n    "])), t.toggleBgDisabled, t.toggleBorderColorDisabled);
   },
   focused: function focused(t) {
     return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.outlineColorFocus, t.toggleOutlineWidth, t.toggleFocusShadowColor);
@@ -40,31 +40,34 @@ export var styles = memoizeStyle({
   activeBackground: function activeBackground() {
     return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      background: inherit;\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      top: 0;\n      transition: 0.2s ease-in;\n      width: 10px;\n    "])));
   },
+  disabledBackground: function disabledBackground(t) {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      box-shadow: inset 0 0 0 1px ", ";\n      width: 0;\n    "])), t.toggleBorderColorDisabled);
+  },
   activeBackgroundLoading: function activeBackgroundLoading(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.toggleBgActive);
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.toggleBgActive);
   },
   isWarning: function isWarning(t) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.outlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorWarning);
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.outlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorWarning);
   },
   isError: function isError(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.outlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorError);
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.outlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorError);
   },
   outline: function outline(t) {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      border-radius: ", ";\n    "])), t.toggleBaseBg, t.toggleBorderRadius);
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      border-radius: ", ";\n    "])), t.toggleBaseBg, t.toggleBorderRadius);
   },
   wrapper: function wrapper(t) {
-    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      height: ", ";\n      position: relative;\n      width: ", ";\n      flex: 1 0 ", ";\n\n      &::after {\n        content: '';\n        display: inline-block;\n      }\n    "])), t.toggleHeight, t.toggleWidth, t.toggleWidth);
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      height: ", ";\n      position: relative;\n      width: ", ";\n      flex: 1 0 ", ";\n\n      &::after {\n        content: '';\n        display: inline-block;\n      }\n    "])), t.toggleHeight, t.toggleWidth, t.toggleWidth);
   },
   disabled: function disabled() {
-    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n    "])));
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n    "])));
   },
   rootLeft: function rootLeft() {
-    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      flex-direction: row-reverse;\n    "])));
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      flex-direction: row-reverse;\n    "])));
   },
   caption: function caption(t) {
-    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      padding: 0 0 0 ", ";\n    "])), t.toggleCaptionGap);
+    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      padding: 0 0 0 ", ";\n    "])), t.toggleTextColor, t.toggleCaptionGap);
   },
   captionLeft: function captionLeft(t) {
-    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      padding: 0 ", " 0 0;\n    "])), t.toggleCaptionGap);
+    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      padding: 0 ", " 0 0;\n    "])), t.toggleTextColor, t.toggleCaptionGap);
   }
 });

package/components/Toggle/Toggle.styles/Toggle.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Toggle.styles.ts"],"names":["css","memoizeStyle","prefix","globalClasses","handle","container","containerDisabled","containerLoading","background","styles","root","t","handleWidthWithBorders","toggleHeight","handleActiveWidth","toggleBorderWidth","toggleHandleActiveWidthIncrement","toggleBgHover","toggleWidth","handleSize","toggleBg","toggleHandleBorderRadius","handleDisabled","toggleDisabledHandleBg","input","toggleBgChecked","toggleBorderColor","toggleBgDisabled","toggleBorderRadius","focused","outlineColorFocus","toggleOutlineWidth","toggleFocusShadowColor","activeBackground","activeBackgroundLoading","toggleBgActive","isWarning","toggleShadowColorWarning","isError","toggleShadowColorError","outline","toggleBaseBg","wrapper","disabled","rootLeft","caption","toggleCaptionGap","captionLeft"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const globalClasses = prefix('toggle')({\n handle: 'handle',\n container: 'container',\n containerDisabled: 'container-disabled',\n containerLoading: 'container-loading',\n background: 'background',\n});\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n const handleWidthWithBorders = t.toggleHeight;\n const handleActiveWidth = `calc(${handleWidthWithBorders} - 2 * ${t.toggleBorderWidth} + ${t.toggleHandleActiveWidthIncrement})`;\n return css`\n display: inline-flex;\n cursor: pointer;\n\n &:hover .${globalClasses.handle} {\n background: ${t.toggleBgHover};\n }\n &:active .${globalClasses.handle} {\n width: ${handleActiveWidth};\n }\n &:active input:checked ~ .${globalClasses.handle} {\n transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders})\n translateX(-${t.toggleHandleActiveWidthIncrement});\n }\n `;\n },\n\n handle(t: Theme) {\n const handleSize = `calc(${t.toggleHeight} - 2 * ${t.toggleBorderWidth})`;\n return css`\n background: ${t.toggleBg};\n border-radius: ${t.toggleHandleBorderRadius};\n bottom: ${t.toggleBorderWidth};\n box-shadow: 0 ${t.toggleBorderWidth} 0 0 rgba(0, 0, 0, 0.15), 0 0 0 ${t.toggleBorderWidth} rgba(0, 0, 0, 0.15);\n height: ${handleSize};\n left: ${t.toggleBorderWidth};\n position: absolute;\n top: ${t.toggleBorderWidth};\n transition: 0.2s ease-in;\n width: ${handleSize};\n `;\n },\n\n handleDisabled(t: Theme) {\n const handleSize = `calc(${t.toggleHeight} - 2 * ${t.toggleBorderWidth})`;\n return css`\n background: ${t.toggleDisabledHandleBg} !important; // override root hover/active styles\n width: ${handleSize} !important; // override root active styles\n `;\n },\n\n input(t: Theme) {\n const handleWidthWithBorders = t.toggleHeight;\n return css`\n position: absolute;\n opacity: 0;\n\n &:focus {\n outline: none;\n }\n &:checked ~ .${globalClasses.container} {\n box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBgChecked};\n background: ${t.toggleBgChecked};\n transition: background 0s 0.2s;\n }\n &:checked ~ .${globalClasses.containerDisabled} {\n box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n background: ${t.toggleBgDisabled};\n transition: background 0s 0.2s;\n }\n &:checked ~ .${globalClasses.containerLoading} {\n background: ${t.toggleBorderColor};\n box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n }\n &:checked ~ .${globalClasses.container} .${globalClasses.background} {\n width: 70%;\n background: ${t.toggleBgChecked};\n }\n &:checked ~ .${globalClasses.containerDisabled} .${globalClasses.background} {\n width: 70%;\n background: ${t.toggleBgDisabled};\n border-radius: calc(${t.toggleHeight} * 0.5) 0 0 calc(${t.toggleHeight} * 0.5);\n box-shadow: inset 0 0 0 1px ${t.toggleBorderColor};\n }\n &:checked ~ .${globalClasses.handle} {\n transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders});\n }\n `;\n },\n\n container(t: Theme) {\n return css`\n border-radius: ${t.toggleBorderRadius};\n box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n height: 100%;\n overflow: hidden;\n position: absolute;\n width: 100%;\n /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\n z-index: 0;\n `;\n },\n\n containerDisabled(t: Theme) {\n return css`\n background: ${t.toggleBgDisabled};\n `;\n },\n\n focused(t: Theme) {\n return css`\n box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleFocusShadowColor};\n `;\n },\n\n activeBackground() {\n return css`\n background: inherit;\n bottom: 0;\n left: 0;\n position: absolute;\n top: 0;\n transition: 0.2s ease-in;\n width: 10px;\n `;\n },\n\n activeBackgroundLoading(t: Theme) {\n return css`\n background: ${t.toggleBgActive};\n `;\n },\n\n isWarning(t: Theme) {\n return css`\n box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorWarning};\n `;\n },\n\n isError(t: Theme) {\n return css`\n box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorError};\n `;\n },\n\n outline(t: Theme) {\n return css`\n background: ${t.toggleBaseBg};\n border-radius: ${t.toggleBorderRadius};\n `;\n },\n\n wrapper(t: Theme) {\n return css`\n display: inline-block;\n height: ${t.toggleHeight};\n position: relative;\n width: ${t.toggleWidth};\n flex: 1 0 ${t.toggleWidth};\n\n &::after {\n content: '';\n display: inline-block;\n }\n `;\n },\n\n disabled() {\n return css`\n cursor: default;\n `;\n },\n\n rootLeft() {\n return css`\n flex-direction: row-reverse;\n `;\n },\n\n caption(t: Theme) {\n return css`\n padding: 0 0 0 ${t.toggleCaptionGap};\n `;\n },\n\n captionLeft(t: Theme) {\n return css`\n padding: 0 ${t.toggleCaptionGap} 0 0;\n `;\n },\n});\n"]}
1	+ {"version":3,"sources":["Toggle.styles.ts"],"names":["css","memoizeStyle","prefix","globalClasses","handle","container","containerDisabled","containerLoading","background","styles","root","t","handleWidthWithBorders","toggleHeight","handleActiveWidth","toggleBorderWidth","toggleHandleActiveWidthIncrement","toggleBgHover","toggleWidth","handleSize","toggleBg","toggleHandleBorderRadius","handleDisabled","toggleDisabledHandleBg","input","toggleBgChecked","toggleBorderColorDisabledChecked","toggleBgDisabledChecked","toggleBorderColor","toggleBorderRadius","toggleBgDisabled","toggleBorderColorDisabled","focused","outlineColorFocus","toggleOutlineWidth","toggleFocusShadowColor","activeBackground","disabledBackground","activeBackgroundLoading","toggleBgActive","isWarning","toggleShadowColorWarning","isError","toggleShadowColorError","outline","toggleBaseBg","wrapper","disabled","rootLeft","caption","toggleTextColor","toggleCaptionGap","captionLeft"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const globalClasses = prefix('toggle')({\n handle: 'handle',\n container: 'container',\n containerDisabled: 'container-disabled',\n containerLoading: 'container-loading',\n background: 'background',\n});\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n const handleWidthWithBorders = t.toggleHeight;\n const handleActiveWidth = `calc(${handleWidthWithBorders} - 2 * ${t.toggleBorderWidth} + ${t.toggleHandleActiveWidthIncrement})`;\n return css`\n display: inline-flex;\n cursor: pointer;\n\n &:hover .${globalClasses.handle} {\n background: ${t.toggleBgHover};\n }\n &:active .${globalClasses.handle} {\n width: ${handleActiveWidth};\n }\n &:active input:checked ~ .${globalClasses.handle} {\n transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders})\n translateX(-${t.toggleHandleActiveWidthIncrement});\n }\n `;\n },\n\n handle(t: Theme) {\n const handleSize = `calc(${t.toggleHeight} - 2 * ${t.toggleBorderWidth})`;\n return css`\n background: ${t.toggleBg};\n border-radius: ${t.toggleHandleBorderRadius};\n bottom: ${t.toggleBorderWidth};\n box-shadow: 0 ${t.toggleBorderWidth} 0 0 rgba(0, 0, 0, 0.15), 0 0 0 ${t.toggleBorderWidth} rgba(0, 0, 0, 0.15);\n height: ${handleSize};\n left: ${t.toggleBorderWidth};\n position: absolute;\n top: ${t.toggleBorderWidth};\n transition: 0.2s ease-in;\n width: ${handleSize};\n `;\n },\n\n handleDisabled(t: Theme) {\n const handleSize = `calc(${t.toggleHeight} - 2 * ${t.toggleBorderWidth})`;\n return css`\n background: ${t.toggleDisabledHandleBg} !important; // override root hover/active styles\n width: ${handleSize} !important; // override root active styles\n `;\n },\n\n input(t: Theme) {\n const handleWidthWithBorders = t.toggleHeight;\n return css`\n position: absolute;\n opacity: 0;\n\n &:focus {\n outline: none;\n }\n &:checked ~ .${globalClasses.container} {\n box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBgChecked};\n background: ${t.toggleBgChecked};\n transition: background 0s 0.2s;\n }\n &:checked ~ .${globalClasses.containerDisabled} {\n box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColorDisabledChecked};\n background: ${t.toggleBgDisabledChecked};\n transition: background 0s 0.2s;\n }\n &:checked ~ .${globalClasses.containerLoading} {\n background: ${t.toggleBorderColor};\n box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n }\n &:checked ~ .${globalClasses.container} .${globalClasses.background} {\n width: 70%;\n background: ${t.toggleBgChecked};\n }\n &:checked ~ .${globalClasses.containerDisabled} .${globalClasses.background} {\n width: 70%;\n background: ${t.toggleBgDisabledChecked};\n border-radius: calc(${t.toggleHeight} * 0.5) 0 0 calc(${t.toggleHeight} * 0.5);\n box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabledChecked};\n }\n &:checked ~ .${globalClasses.handle} {\n transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders});\n }\n `;\n },\n\n container(t: Theme) {\n return css`\n border-radius: ${t.toggleBorderRadius};\n box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n height: 100%;\n overflow: hidden;\n position: absolute;\n width: 100%;\n /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\n z-index: 0;\n `;\n },\n\n containerDisabled(t: Theme) {\n return css`\n background: ${t.toggleBgDisabled};\n box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n `;\n },\n\n focused(t: Theme) {\n return css`\n box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleFocusShadowColor};\n `;\n },\n\n activeBackground() {\n return css`\n background: inherit;\n bottom: 0;\n left: 0;\n position: absolute;\n top: 0;\n transition: 0.2s ease-in;\n width: 10px;\n `;\n },\n\n disabledBackground(t: Theme) {\n return css`\n box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n width: 0;\n `;\n },\n\n activeBackgroundLoading(t: Theme) {\n return css`\n background: ${t.toggleBgActive};\n `;\n },\n\n isWarning(t: Theme) {\n return css`\n box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorWarning};\n `;\n },\n\n isError(t: Theme) {\n return css`\n box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorError};\n `;\n },\n\n outline(t: Theme) {\n return css`\n background: ${t.toggleBaseBg};\n border-radius: ${t.toggleBorderRadius};\n `;\n },\n\n wrapper(t: Theme) {\n return css`\n display: inline-block;\n height: ${t.toggleHeight};\n position: relative;\n width: ${t.toggleWidth};\n flex: 1 0 ${t.toggleWidth};\n\n &::after {\n content: '';\n display: inline-block;\n }\n `;\n },\n\n disabled() {\n return css`\n cursor: default;\n `;\n },\n\n rootLeft() {\n return css`\n flex-direction: row-reverse;\n `;\n },\n\n caption(t: Theme) {\n return css`\n color: ${t.toggleTextColor};\n padding: 0 0 0 ${t.toggleCaptionGap};\n `;\n },\n\n captionLeft(t: Theme) {\n return css`\n color: ${t.toggleTextColor};\n padding: 0 ${t.toggleCaptionGap} 0 0;\n `;\n },\n});\n"]}

package/components/Toggle/Toggle.styles.d.ts CHANGED Viewed

@@ -15,6 +15,7 @@ export declare const styles: {
     containerDisabled(t: Theme): string;
     focused(t: Theme): string;
     activeBackground(): string;
+    disabledBackground(t: Theme): string;
     activeBackgroundLoading(t: Theme): string;
     isWarning(t: Theme): string;
     isError(t: Theme): string;

package/components/Token/Token.styles/Token.styles.js CHANGED Viewed

@@ -13,7 +13,7 @@ export var styles = memoizeStyle({
     return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      align-items: center;\n      border-radius: ", ";\n      padding: ", " ", ";\n      line-height: ", ";\n      font-size: ", ";\n      margin: ", " ", ";\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    "])), t.tokenBorderRadius, t.tokenPaddingY, t.tokenPaddingX, t.tokenLineHeight, t.tokenFontSize, t.tokenMarginY, t.tokenMarginX);
   },
   disabled: function disabled(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", ";\n      margin: ", " ", ";\n      user-select: text;\n      cursor: text;\n      color: ", ";\n    "])), t.tokenPaddingYDisabled, t.tokenPaddingXDisabled, t.tokenMarginYDisabled, t.tokenMarginXDisabled, t.tokenTextColorDisabled);
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", ";\n      margin: ", " ", ";\n      user-select: text;\n      cursor: text;\n      color: ", ";\n\n      .", " {\n        visibility: hidden;\n      }\n    "])), t.tokenPaddingYDisabled, t.tokenPaddingXDisabled, t.tokenMarginYDisabled, t.tokenMarginXDisabled, t.tokenTextColorDisabled, globalClasses.removeIcon);
   },
   text: function text(t) {
     return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      padding-bottom: ", ";\n    "])), t.tokenLegacyTextShift);
@@ -105,7 +105,7 @@ export var colorStyles = [{
   }, _extends2));
 }, {
   defaultDisabled: function defaultDisabled(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        box-shadow: ", ";\n\n        .", " {\n          fill: ", ";\n          opacity: 1;\n        }\n      "])), t.tokenDisabledBg, t.tokenShadowDisabled, globalClasses.removeIcon, t.tokenTextColorDisabled);
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        box-shadow: ", ";\n      "])), t.tokenDisabledBg, t.tokenShadowDisabled);
   },
   defaultDisabledWarning: function defaultDisabledWarning(t) {
     return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])), t.tokenOutlineWidth, t.tokenBorderColorWarning, t.tokenDisabledBg);

package/components/Token/Token.styles/Token.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Token.styles.ts"],"names":["css","memoizeStyle","prefix","ColorFunctions","globalClasses","removeIcon","styles","token","t","tokenBorderRadius","tokenPaddingY","tokenPaddingX","tokenLineHeight","tokenFontSize","tokenMarginY","tokenMarginX","disabled","tokenPaddingYDisabled","tokenPaddingXDisabled","tokenMarginYDisabled","tokenMarginXDisabled","tokenTextColorDisabled","text","tokenLegacyTextShift","tokenRemoveIconSize","tokenRemoveIconPaddingY","tokenRemoveIconPaddingX","tokenRemoveIconBoxSizing","tokenRemoveIconGap","colorStyles","name","color","tokenDefaultIdle","tokenDefaultActive","tokenGrayIdle","tokenGrayActive","tokenBlueIdle","tokenBlueActive","tokenGreenIdle","tokenGreenActive","tokenYellowIdle","tokenYellowActive","tokenRedIdle","tokenRedActive","tokenWhite","tokenBlack","reduce","colors","v","warning","tokenOutlineWidth","tokenBorderColorWarning","error","tokenBorderColorError","vStyle","contrast","tokenBorderWidth","darken","defaultDisabled","tokenDisabledBg","tokenShadowDisabled","defaultDisabledWarning","defaultDisabledError"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\n\nexport const globalClasses = prefix('token')({\n removeIcon: 'remove-icon',\n});\n\nexport const styles = memoizeStyle({\n token(t: Theme) {\n return css`\n display: inline-flex;\n align-items: center;\n border-radius: ${t.tokenBorderRadius};\n padding: ${t.tokenPaddingY} ${t.tokenPaddingX};\n line-height: ${t.tokenLineHeight};\n font-size: ${t.tokenFontSize};\n margin: ${t.tokenMarginY} ${t.tokenMarginX};\n min-width: 0;\n word-break: break-all;\n user-select: none;\n\n &:hover {\n cursor: pointer;\n }\n `;\n },\n\n disabled(t: Theme) {\n return css`\n padding: ${t.tokenPaddingYDisabled} ${t.tokenPaddingXDisabled};\n margin: ${t.tokenMarginYDisabled} ${t.tokenMarginXDisabled};\n user-select: text;\n cursor: text;\n color: ${t.tokenTextColorDisabled};\n `;\n },\n\n text(t: Theme) {\n return css`\n display: inline-block;\n padding-bottom: ${t.tokenLegacyTextShift};\n `;\n },\n\n removeIcon(t: Theme) {\n return css`\n height: ${t.tokenRemoveIconSize};\n width: ${t.tokenRemoveIconSize};\n flex-shrink: 0;\n padding: ${t.tokenRemoveIconPaddingY} ${t.tokenRemoveIconPaddingX};\n box-sizing: ${t.tokenRemoveIconBoxSizing};\n margin-left: ${t.tokenRemoveIconGap};\n transition: none;\n fill: currentColor;\n opacity: 0.5;\n line-height: 0;\n\n &:hover {\n opacity: 1;\n }\n `;\n },\n});\n\ninterface TokenColors {\n defaultIdle: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n defaultActive: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n defaultDisabled: (t: Theme) => string;\n defaultDisabledWarning: (t: Theme) => string;\n defaultDisabledError: (t: Theme) => string;\n grayIdle: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n grayActive: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n blueIdle: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n blueActive: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n greenIdle: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n greenActive: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n yellowIdle: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n yellowActive: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n redIdle: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n redActive: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n white: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n black: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n}\n\nexport const colorStyles = [\n { name: 'defaultIdle', color: (t: Theme) => t.tokenDefaultIdle },\n { name: 'defaultActive', color: (t: Theme) => t.tokenDefaultActive },\n { name: 'grayIdle', color: (t: Theme) => t.tokenGrayIdle },\n { name: 'grayActive', color: (t: Theme) => t.tokenGrayActive },\n { name: 'blueIdle', color: (t: Theme) => t.tokenBlueIdle },\n { name: 'blueActive', color: (t: Theme) => t.tokenBlueActive },\n { name: 'greenIdle', color: (t: Theme) => t.tokenGreenIdle },\n { name: 'greenActive', color: (t: Theme) => t.tokenGreenActive },\n { name: 'yellowIdle', color: (t: Theme) => t.tokenYellowIdle },\n { name: 'yellowActive', color: (t: Theme) => t.tokenYellowActive },\n { name: 'redIdle', color: (t: Theme) => t.tokenRedIdle },\n { name: 'redActive', color: (t: Theme) => t.tokenRedActive },\n { name: 'white', color: (t: Theme) => t.tokenWhite },\n { name: 'black', color: (t: Theme) => t.tokenBlack },\n].reduce(\n (colors: TokenColors, { name, color }) => ({\n ...colors,\n [name](t: Theme, v: 'error' \| 'warning') {\n const warning = css`\n box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${color(t)};\n `;\n const error = css`\n box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${color(t)};\n `;\n const vStyle = v === 'error' ? error : v === 'warning' ? warning : '';\n\n return css`\n background-color: ${color(t)};\n color: ${ColorFunctions.contrast(color(t))};\n box-shadow: 0 0 0 ${t.tokenBorderWidth} ${ColorFunctions.darken(color(t), '5%')}, inset 0 0 0 1px ${color(t)};\n\n ${vStyle}\n\n .${globalClasses.removeIcon}:hover {\n color: ${ColorFunctions.contrast(color(t))};\n }\n `;\n },\n }),\n {\n defaultDisabled(t: Theme) {\n return css`\n background-color: ${t.tokenDisabledBg};\n box-shadow: ${t.tokenShadowDisabled};\n\n .${globalClasses.removeIcon} {\n fill: ${t.tokenTextColorDisabled};\n opacity: 1;\n }\n `;\n },\n defaultDisabledWarning(t: Theme) {\n return css`\n box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${t.tokenDisabledBg};\n `;\n },\n defaultDisabledError(t: Theme) {\n return css`\n box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${t.tokenDisabledBg};\n `;\n },\n } as TokenColors,\n);\n"]}
1	+ {"version":3,"sources":["Token.styles.ts"],"names":["css","memoizeStyle","prefix","ColorFunctions","globalClasses","removeIcon","styles","token","t","tokenBorderRadius","tokenPaddingY","tokenPaddingX","tokenLineHeight","tokenFontSize","tokenMarginY","tokenMarginX","disabled","tokenPaddingYDisabled","tokenPaddingXDisabled","tokenMarginYDisabled","tokenMarginXDisabled","tokenTextColorDisabled","text","tokenLegacyTextShift","tokenRemoveIconSize","tokenRemoveIconPaddingY","tokenRemoveIconPaddingX","tokenRemoveIconBoxSizing","tokenRemoveIconGap","colorStyles","name","color","tokenDefaultIdle","tokenDefaultActive","tokenGrayIdle","tokenGrayActive","tokenBlueIdle","tokenBlueActive","tokenGreenIdle","tokenGreenActive","tokenYellowIdle","tokenYellowActive","tokenRedIdle","tokenRedActive","tokenWhite","tokenBlack","reduce","colors","v","warning","tokenOutlineWidth","tokenBorderColorWarning","error","tokenBorderColorError","vStyle","contrast","tokenBorderWidth","darken","defaultDisabled","tokenDisabledBg","tokenShadowDisabled","defaultDisabledWarning","defaultDisabledError"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\n\nexport const globalClasses = prefix('token')({\n removeIcon: 'remove-icon',\n});\n\nexport const styles = memoizeStyle({\n token(t: Theme) {\n return css`\n display: inline-flex;\n align-items: center;\n border-radius: ${t.tokenBorderRadius};\n padding: ${t.tokenPaddingY} ${t.tokenPaddingX};\n line-height: ${t.tokenLineHeight};\n font-size: ${t.tokenFontSize};\n margin: ${t.tokenMarginY} ${t.tokenMarginX};\n min-width: 0;\n word-break: break-all;\n user-select: none;\n\n &:hover {\n cursor: pointer;\n }\n `;\n },\n\n disabled(t: Theme) {\n return css`\n padding: ${t.tokenPaddingYDisabled} ${t.tokenPaddingXDisabled};\n margin: ${t.tokenMarginYDisabled} ${t.tokenMarginXDisabled};\n user-select: text;\n cursor: text;\n color: ${t.tokenTextColorDisabled};\n\n .${globalClasses.removeIcon} {\n visibility: hidden;\n }\n `;\n },\n\n text(t: Theme) {\n return css`\n display: inline-block;\n padding-bottom: ${t.tokenLegacyTextShift};\n `;\n },\n\n removeIcon(t: Theme) {\n return css`\n height: ${t.tokenRemoveIconSize};\n width: ${t.tokenRemoveIconSize};\n flex-shrink: 0;\n padding: ${t.tokenRemoveIconPaddingY} ${t.tokenRemoveIconPaddingX};\n box-sizing: ${t.tokenRemoveIconBoxSizing};\n margin-left: ${t.tokenRemoveIconGap};\n transition: none;\n fill: currentColor;\n opacity: 0.5;\n line-height: 0;\n\n &:hover {\n opacity: 1;\n }\n `;\n },\n});\n\ninterface TokenColors {\n defaultIdle: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n defaultActive: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n defaultDisabled: (t: Theme) => string;\n defaultDisabledWarning: (t: Theme) => string;\n defaultDisabledError: (t: Theme) => string;\n grayIdle: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n grayActive: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n blueIdle: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n blueActive: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n greenIdle: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n greenActive: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n yellowIdle: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n yellowActive: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n redIdle: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n redActive: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n white: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n black: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n}\n\nexport const colorStyles = [\n { name: 'defaultIdle', color: (t: Theme) => t.tokenDefaultIdle },\n { name: 'defaultActive', color: (t: Theme) => t.tokenDefaultActive },\n { name: 'grayIdle', color: (t: Theme) => t.tokenGrayIdle },\n { name: 'grayActive', color: (t: Theme) => t.tokenGrayActive },\n { name: 'blueIdle', color: (t: Theme) => t.tokenBlueIdle },\n { name: 'blueActive', color: (t: Theme) => t.tokenBlueActive },\n { name: 'greenIdle', color: (t: Theme) => t.tokenGreenIdle },\n { name: 'greenActive', color: (t: Theme) => t.tokenGreenActive },\n { name: 'yellowIdle', color: (t: Theme) => t.tokenYellowIdle },\n { name: 'yellowActive', color: (t: Theme) => t.tokenYellowActive },\n { name: 'redIdle', color: (t: Theme) => t.tokenRedIdle },\n { name: 'redActive', color: (t: Theme) => t.tokenRedActive },\n { name: 'white', color: (t: Theme) => t.tokenWhite },\n { name: 'black', color: (t: Theme) => t.tokenBlack },\n].reduce(\n (colors: TokenColors, { name, color }) => ({\n ...colors,\n [name](t: Theme, v: 'error' \| 'warning') {\n const warning = css`\n box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${color(t)};\n `;\n const error = css`\n box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${color(t)};\n `;\n const vStyle = v === 'error' ? error : v === 'warning' ? warning : '';\n\n return css`\n background-color: ${color(t)};\n color: ${ColorFunctions.contrast(color(t))};\n box-shadow: 0 0 0 ${t.tokenBorderWidth} ${ColorFunctions.darken(color(t), '5%')}, inset 0 0 0 1px ${color(t)};\n\n ${vStyle}\n\n .${globalClasses.removeIcon}:hover {\n color: ${ColorFunctions.contrast(color(t))};\n }\n `;\n },\n }),\n {\n defaultDisabled(t: Theme) {\n return css`\n background-color: ${t.tokenDisabledBg};\n box-shadow: ${t.tokenShadowDisabled};\n `;\n },\n defaultDisabledWarning(t: Theme) {\n return css`\n box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${t.tokenDisabledBg};\n `;\n },\n defaultDisabledError(t: Theme) {\n return css`\n box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${t.tokenDisabledBg};\n `;\n },\n } as TokenColors,\n);\n"]}

package/components/TokenInput/TokenInput/TokenInput.js CHANGED Viewed

@@ -53,7 +53,7 @@ function _arrayLikeToArray(arr, len) {
 import React from 'react';
 import { findDOMNode } from 'react-dom';
 import isEqual from 'lodash.isequal';
-import { isKeyArrowHorizontal, isKeyArrowLeft, isKeyArrowRight, isKeyArrowUp, isKeyArrowVertical, isKeyBackspace, isKeyDelete, isKeyEnter, isKeyEscape, isShortcutSelectAll } from "../../../lib/events/keyboard/identifiers";
+import { isKeyArrowHorizontal, isKeyArrowLeft, isKeyArrowRight, isKeyArrowUp, isKeyArrowVertical, isKeyBackspace, isKeyComma, isKeyDelete, isKeyEnter, isKeyEscape, isShortcutSelectAll } from "../../../lib/events/keyboard/identifiers";
 import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { Token } from "../../Token";
 import { emptyHandler } from "../../../lib/utils";
@@ -430,7 +430,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), _d
     _this.handleInputKeyDown = function (e) {
       e.stopPropagation();
-      if (_this.type !== TokenInputType.WithReference && _this.props.delimiters.includes(e.key)) {
+      if (_this.type !== TokenInputType.WithReference && _this.props.delimiters.some(function (key) {
+        return key === e.key || key === ',' && isKeyComma(e);
+      })) {
         e.preventDefault();
         var newValue = _this.state.inputValue;
@@ -929,6 +931,26 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), _d
   _proto.componentWillUnmount = function componentWillUnmount() {
     document.removeEventListener('copy', this.handleCopy);
+  }
+  /**
+  * @public
+  */
+  ;
+  _proto.focus = function focus() {
+    var _this$input;
+    (_this$input = this.input) == null ? void 0 : _this$input.focus();
+  }
+  /**
+  * @public
+  */
+  ;
+  _proto.blur = function blur() {
+    var _this$input2;
+    (_this$input2 = this.input) == null ? void 0 : _this$input2.blur();
   };
   _proto.render = function render() {