@skbkontur/react-ui 0.0.0-aaf2aabecb → 0.0.0-bb4cbfe9c6

package/components/Checkbox/Checkbox.d.ts

@@ -1,34 +1,51 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Override } from '../../typings/utility-types';
-export declare type CheckboxProps = Override<React.InputHTMLAttributes<HTMLInputElement>, {
-    /** Контент `label` */
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface CheckboxProps extends CommonProps, Override<React.InputHTMLAttributes<HTMLInputElement>, {
+    /**
+     * Контент `label`
+     */
     children?: React.ReactNode;
-    /** Состояние ошибки */
+    /**
+     * Cостояние валидации при ошибке.
+     */
     error?: boolean;
-    /** Состояние Предупреждения */
+    /**
+     * Cостояние валидации при предупреждении.
+     */
     warning?: boolean;
-    /** Вызывается на label */
+    /**
+     * HTML-событие `mouseenter`.
+     */
     onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;
-    /** Вызывается на label */
+    /**
+     * HTML-событие `mouseleave`.
+     */
     onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;
-    /** Вызывается на label */
+    /**
+     * HTML-событие `mouseover`.
+     */
     onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;
-    /** Вызывается при изменении `value` */
+    /**
+     * Функция, вызываемая при изменении `value`.
+     */
     onValueChange?: (value: boolean) => void;
-    /** onBlur */
+    /**
+     * HTML-событие `onblur`.
+     */
     onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    /** Состояние частичного выделения */
+    /**
+     * [Неопределённое состояние](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-indeterminate) чекбокса из HTML.
+     */
     initialIndeterminate?: boolean;
-}>;
+}> {
+}
 export interface CheckboxState {
     focusedByTab: boolean;
     indeterminate: boolean;
 }
-/**
- * Все свойства, кроме перечисленных, `className` и `style` передаются в `input`.
- */
-export declare class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
+export declare class Checkbox extends React.PureComponent<CheckboxProps, CheckboxState> {
     static __KONTUR_REACT_UI__: string;
     static propTypes: {
         checked: PropTypes.Requireable<boolean>;
@@ -48,29 +65,32 @@ export declare class Checkbox extends React.Component<CheckboxProps, CheckboxSta
     private theme;
     private input;
     componentDidMount: () => void;
-    UNSAFE_componentWillReceiveProps(nextProps: CheckboxProps): void;
+    private setRootNode;
+    componentDidUpdate(prevProps: CheckboxProps): void;
     render(): JSX.Element;
     /**
+     * Программная установка фокуса чекбоксу.
      * @public
      */
     focus(): void;
     /**
+     * Программное снятие фокуса с чекбокса.
      * @public
      */
     blur(): void;
     /**
-     * Установить промежуточное значение
+     * Устанавливает чекбокс в HTML-состояние `indeterminate`.
      * @public
      */
     setIndeterminate: () => void;
     /**
-     * Сбросить промежуточное значение
+     * Снимает с чекбокса HTML-состояние `indeterminate`.
      * @public
      */
     resetIndeterminate: () => void;
     private renderMain;
     private handleFocus;
     private handleBlur;
-    private inputRef;
     private handleChange;
+    private handleClick;
 }

package/components/Checkbox/Checkbox.md

@@ -1,63 +1,104 @@
-```jsx harmony
-let initialState = { checked: false };
-
-<Checkbox checked={state.checked} onValueChange={checked => setState({ checked })}>
-  Checkbox
-</Checkbox>;
-```
-
-Чекбокс может быть в состоянии "частично выбран". Как и в браузерном чекбоксе, это состояние влияет только на внешний вид и не влияет на состояние `checked`. `indeterminate` устанавливается в конструкторе через проп `initialIndeterminate` или методами инстанса `setIndeterminate()`/`resetIndeterminate()`
-
-```jsx harmony
-import { Button, Checkbox, Gapped } from '@skbkontur/react-ui';
-
-class IndeterminateExample extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.checkboxInstance = null;
-
-    this.state = {
-      checked: false,
-    };
-  }
-
-  render() {
-    return (
-      <div>
-        <Gapped>
-          <Checkbox
-            initialIndeterminate
-            checked={this.state.checked}
-            onValueChange={checked => this.setState({ checked })}
-            ref={element => {
-              this.checkboxInstance = element;
-            }}
-          >
-            Checkbox
-          </Checkbox>
-          <Button onClick={this.handleClickOnSetIndeterminate.bind(this)}>
-            <code>setIndeterminate()</code>
-          </Button>
-          <Button onClick={this.handleClickOnResetIndeterminate.bind(this)}>
-            <code>resetIndeterminate()</code>
-          </Button>
-        </Gapped>
-      </div>
-    );
-  }
-
-  handleClickOnSetIndeterminate() {
-    if (this.checkboxInstance) {
-      this.checkboxInstance.setIndeterminate();
-    }
-  }
-  handleClickOnResetIndeterminate() {
-    if (this.checkboxInstance) {
-      this.checkboxInstance.resetIndeterminate();
-    }
-  }
-}
-
-<IndeterminateExample />;
-```
+Базовый пример чекбокса.
+
+```jsx harmony
+const [checked, setChecked] = React.useState(false);
+
+<Checkbox checked={checked} onValueChange={setChecked}>
+  Обычный чекбокс
+</Checkbox>;
+```
+
+У чекбокса есть несколько состояний.
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+const CheckboxWithState = ({children, ...props}) => {
+  const [checked, setChecked] = React.useState(false);
+
+  return (
+    <Checkbox checked={checked} onValueChange={setChecked} {...props}>
+      {children}
+    </Checkbox>
+  )
+};
+
+<Gapped vertical>
+  <CheckboxWithState>
+    Обычный чекбокс
+  </CheckboxWithState>
+  <CheckboxWithState error>
+    Чекбокс в состоянии ошибки
+  </CheckboxWithState>
+  <CheckboxWithState warning>
+    Чекбокс в состоянии предупреждения
+  </CheckboxWithState>
+</Gapped>
+```
+
+Пример использования методов чекбокса `focus()` и `blur()`.
+
+```jsx harmony
+import { Button, Checkbox, Gapped } from '@skbkontur/react-ui';
+
+const [checked, setChecked] = React.useState(false);
+
+let checkboxInstance = React.useRef(null);
+
+<Gapped vertical>
+  <Checkbox
+    ref={el => checkboxInstance = el}
+    checked={checked}
+    onValueChange={setChecked}
+    >
+    Пример чекбокса с программным фокусом
+  </Checkbox>
+  <Gapped gap={12}>
+    <Button
+      onClick={() => {
+        checkboxInstance.focus();
+      }}
+    >
+      Дать фокус
+    </Button>
+    <Button
+      onClick={() => {
+        checkboxInstance.blur();
+      }}
+    >
+      Забрать фокус
+    </Button>
+  </Gapped>
+</Gapped>
+```
+
+Чекбокс может находится в неопределённом состоянии. <br/> Это состояние полностью копирует поведение состояния [`indeterminate`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-indeterminate) из HTML.
+
+Это состояние влияет только на внешний вид и не влияет на состояние `checked`.
+
+```jsx harmony
+import { Button, Checkbox, Gapped } from '@skbkontur/react-ui';
+
+const [checked, setChecked] = React.useState(false);
+
+let checkboxInstance = React.useRef(null);
+
+<Gapped vertical>
+  <Checkbox
+    initialIndeterminate
+    checked={checked}
+    onValueChange={setChecked}
+    ref={el => checkboxInstance = el}
+  >
+    Неопределённый чекбокс
+  </Checkbox>
+  <Gapped>
+    <Button onClick={() => checkboxInstance.setIndeterminate()}>
+      Перевести в неопределённое состояние
+    </Button>
+    <Button onClick={() => checkboxInstance.resetIndeterminate()}>
+      Сбросить неопределённое состояние
+    </Button>
+  </Gapped>
+</Gapped>
+```

package/components/Checkbox/Checkbox.styles/Checkbox.styles.js

@@ -1,201 +1,65 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-function _templateObject15() {
-  var data = _taggedTemplateLiteralLoose(["\n      display: table-cell;\n    "]);
-
-  _templateObject15 = function _templateObject15() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject14() {
-  var data = _taggedTemplateLiteralLoose(["\n      padding-left: 10px;\n    "]);
-
-  _templateObject14 = function _templateObject14() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject13() {
-  var data = _taggedTemplateLiteralLoose(["\n      color: transparent;\n    "]);
-
-  _templateObject13 = function _templateObject13() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject12() {
-  var data = _taggedTemplateLiteralLoose(["\n      margin-top: -2px;\n    "]);
-
-  _templateObject12 = function _templateObject12() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject11() {
-  var data = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      cursor: default;\n\n      & ", " {\n        box-shadow: ", " !important; //to override hover and active\n        background: ", " !important;\n        color: ", " !important;\n      }\n    "]);
-
-  _templateObject11 = function _templateObject11() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject10() {
-  var data = _taggedTemplateLiteralLoose(["\n      & ", " {\n        box-shadow: inset 0 0 0 1px ", ", 0 0 0 ", " ", " !important;\n      }\n    "]);
-
-  _templateObject10 = function _templateObject10() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject9() {
-  var data = _taggedTemplateLiteralLoose(["\n      & ", " {\n        background: ", ";\n        color: ", ";\n        box-shadow: ", ";\n      }\n\n      &:hover ", " {\n        box-shadow: ", ";\n        background: ", ";\n      }\n      &:active ", " {\n        box-shadow: ", ";\n        background: ", ";\n      }\n    "]);
-
-  _templateObject9 = function _templateObject9() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject8() {
-  var data = _taggedTemplateLiteralLoose(["\n      & ", " {\n        background: ", ";\n        color: ", ";\n        box-shadow: ", ";\n      }\n\n      &:hover ", " {\n        box-shadow: ", ";\n        background: ", ";\n      }\n\n      &:active ", " {\n        box-shadow: ", ";\n        background: ", ";\n      }\n    "]);
-
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  var data = _taggedTemplateLiteralLoose(["\n      & ", " {\n        box-shadow: inset 0 0 0 1px ", ", 0 0 0 ", " ", " !important;\n      }\n    "]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = _taggedTemplateLiteralLoose(["\n      & ", " {\n        box-shadow: inset 0 0 0 1px ", ", 0 0 0 ", " ", " !important;\n      }\n    "]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      opacity: 0;\n      width: 0;\n      height: 0;\n      position: absolute;\n      z-index: -1;\n    "]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      box-sizing: border-box;\n      width: 16px;\n      height: 16px;\n      flex: none;\n      font-size: 14px;\n      color: ", ";\n      border: ", ";\n      border-radius: ", ";\n      box-shadow: ", ";\n      background: ", ";\n      align-self: baseline;\n    "]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n      display: inline;\n    "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n      display: inline-table !important;\n    "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      align-items: baseline;\n      cursor: pointer;\n      position: relative;\n      user-select: none;\n      line-height: 20px;\n\n      &:hover ", " {\n        background: ", ";\n        box-shadow: ", ";\n      }\n\n      &:active ", " {\n        box-shadow: ", ";\n        background: ", ";\n      }\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-import { css, cssName, memoizeStyle } from "..\\..\\..\\lib\\theming\\Emotion";
-var styles = {
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
+
+import { css, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
+import { isChrome } from "../../../lib/client";
+export var globalClasses = prefix('checkbox')({
+  box: 'box'
+});
+export var styles = memoizeStyle({
   root: function root(t) {
-    return css(_templateObject(), cssName(styles.box(t)), t.chbHoverBg, t.chbShadowHover, cssName(styles.box(t)), t.chbShadowActive, t.chbActiveBg);
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      align-items: baseline;\n      cursor: pointer;\n      position: relative;\n      line-height: ", ";\n      font-size: ", ";\n      padding: ", " 0;\n\n      &:hover .", " {\n        background: ", ";\n        box-shadow: ", ";\n      }\n\n      &:active .", " {\n        box-shadow: ", ";\n        background: ", ";\n      }\n\n      &::before {\n        // non-breaking space.\n        // makes a correct space for absolutely positioned box,\n        // and also height and baseline for checkbox without caption.\n        content: '\\00A0';\n        display: inline-block;\n        width: ", ";\n        flex: 0 0 auto;\n      }\n    "], ["\n      display: inline-flex;\n      align-items: baseline;\n      cursor: pointer;\n      position: relative;\n      line-height: ", ";\n      font-size: ", ";\n      padding: ", " 0;\n\n      &:hover .", " {\n        background: ", ";\n        box-shadow: ", ";\n      }\n\n      &:active .", " {\n        box-shadow: ", ";\n        background: ", ";\n      }\n\n      &::before {\n        // non-breaking space.\n        // makes a correct space for absolutely positioned box,\n        // and also height and baseline for checkbox without caption.\n        content: '\\\\00A0';\n        display: inline-block;\n        width: ", ";\n        flex: 0 0 auto;\n      }\n    "])), t.checkboxLineHeight, t.checkboxFontSize, t.checkboxPaddingY, globalClasses.box, t.checkboxHoverBg, t.checkboxShadowHover, globalClasses.box, t.checkboxShadowActive, t.checkboxActiveBg, t.checkboxBoxSize);
+  },
+  rootChecked: function rootChecked(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      &:hover .", " {\n        box-shadow: ", ";\n        background: ", ";\n      }\n\n      &:active .", " {\n        background: ", ";\n        box-shadow: ", ";\n      }\n    "])), globalClasses.box, t.checkboxCheckedHoverShadow, t.checkboxCheckedHoverBg, globalClasses.box, t.checkboxCheckedActiveBg, t.checkboxCheckedActiveShadow);
   },
   rootFallback: function rootFallback() {
-    return css(_templateObject2());
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      display: inline-table;\n\n      & > * {\n        // fix root's :active state in IE11 that gets blocked by nested elements\n        pointer-events: none;\n      }\n    "])));
   },
   rootWrapperIE11: function rootWrapperIE11() {
-    return css(_templateObject3());
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      display: inline;\n    "])));
+  },
+  boxWrapper: function boxWrapper(t) {
+    var labGrotesqueCompenstation = parseInt(t.labGrotesqueBaselineCompensation);
+    var fontSize = parseInt(t.checkboxFontSize);
+    var baselineCompensation = fontSize < 16 && !isChrome ? labGrotesqueCompenstation : fontSize === 16 && isChrome ? -labGrotesqueCompenstation : 0;
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      width: ", ";\n      height: ", ";\n      box-sizing: border-box;\n      padding: ", ";\n      margin-top: calc(", " + ", "px);\n\n      // fix position in ie11\n      display: inline-block;\n      left: 0;\n    "])), t.checkboxBoxSize, t.checkboxBoxSize, t.checkboxBorderWidth, t.checkboxBoxOffsetY, baselineCompensation);
   },
   box: function box(t) {
-    return css(_templateObject4(), t.textColorDefault, t.chbBorder, t.chbBorderRadius, t.chbShadow, t.chbBg);
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      box-shadow: ", ";\n      background: ", ";\n      border-radius: ", ";\n      height: 100%;\n    "])), t.checkboxTextColorDefault, t.checkboxShadow, t.checkboxBg, t.checkboxBorderRadius);
   },
   input: function input() {
-    return css(_templateObject5());
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n      z-index: -1;\n    "])));
   },
-  warning: function warning(t) {
-    return css(_templateObject6(), cssName(styles.box(t)), t.outlineColorFocus, t.chbShadowWidth, t.borderColorWarning);
+  boxWarning: function boxWarning(t) {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      box-shadow: inset 0 0 0 1px ", ",\n        0 0 0 ", " ", " !important; // override hover and active\n    "])), t.checkboxOutlineColorFocus, t.checkboxOutlineWidth, t.checkboxBorderColorWarning);
   },
-  error: function error(t) {
-    return css(_templateObject7(), cssName(styles.box(t)), t.outlineColorFocus, t.chbShadowWidth, t.borderColorError);
+  boxError: function boxError(t) {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      box-shadow: inset 0 0 0 1px ", ",\n        0 0 0 ", " ", " !important; // override hover and active\n    "])), t.checkboxOutlineColorFocus, t.checkboxOutlineWidth, t.checkboxBorderColorError);
   },
-  checked: function checked(t) {
-    return css(_templateObject8(), cssName(styles.box(t)), t.chbCheckedBg, t.chbCheckedColor, t.chbCheckedShadow, cssName(styles.box(t)), t.chbCheckedHoverShadow, t.chbCheckedHoverBg, cssName(styles.box(t)), t.chbCheckedActiveShadow, t.chbCheckedActiveBg);
+  boxChecked: function boxChecked(t) {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    "])), t.checkboxCheckedBg, t.checkboxCheckedColor, t.checkboxCheckedShadow);
   },
-  indeterminate: function indeterminate(t) {
-    return css(_templateObject9(), cssName(styles.box(t)), t.chbBoxIndeterminateBg, t.chbIndeterminateBg, t.chbCheckedShadow, cssName(styles.box(t)), t.chbCheckedHoverShadow, t.chbCheckedHoverBg, cssName(styles.box(t)), t.chbCheckedActiveShadow, t.chbCheckedActiveBg);
+  boxFocus: function boxFocus(t) {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      box-shadow: inset 0 0 0 1px ", ",\n        0 0 0 ", " ", " !important; // override hover and active\n    "])), t.checkboxOutlineColorFocus, t.checkboxOutlineWidth, t.checkboxBorderColorFocus);
   },
-  focus: function focus(t) {
-    return css(_templateObject10(), cssName(styles.box(t)), t.outlineColorFocus, t.chbShadowWidth, t.chbBorderColorFocus);
+  boxDisabled: function boxDisabled(t) {
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      box-shadow: ", " !important; // override hover and active\n      background: ", " !important; // override hover and active\n      color: ", ";\n    "])), t.checkboxShadowDisabled, t.checkboxBgDisabled, t.checkboxTextColorDisabled);
   },
   disabled: function disabled(t) {
-    return css(_templateObject11(), t.textColorDisabled, cssName(styles.box(t)), t.chbShadowDisabled, t.bgDisabled, t.textColorDisabled);
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      cursor: default;\n    "])), t.checkboxTextColorDisabled);
   },
-  iconFixBaseline: function iconFixBaseline() {
-    return css(_templateObject12());
+  icon: function icon(t) {
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      top: 0px;\n      bottom: 0px;\n      right: 0px;\n      left: 0px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n\n      svg {\n        margin: -12.5% 0 0 0;\n      }\n    "])));
   },
   iconUnchecked: function iconUnchecked() {
-    return css(_templateObject13());
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      color: transparent;\n    "])));
   },
-  caption: function caption() {
-    return css(_templateObject14());
+  caption: function caption(t) {
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      padding-left: ", ";\n    "])), t.checkboxTextColorDefault, t.checkboxCaptionGap);
   },
   captionIE11: function captionIE11() {
-    return css(_templateObject15());
+    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      display: table-cell;\n    "])));
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

package/components/Checkbox/Checkbox.styles/Checkbox.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Checkbox.styles.ts"],"names":["css","cssName","memoizeStyle","styles","root","t","box","chbHoverBg","chbShadowHover","chbShadowActive","chbActiveBg","rootFallback","rootWrapperIE11","textColorDefault","chbBorder","chbBorderRadius","chbShadow","chbBg","input","warning","outlineColorFocus","chbShadowWidth","borderColorWarning","error","borderColorError","checked","chbCheckedBg","chbCheckedColor","chbCheckedShadow","chbCheckedHoverShadow","chbCheckedHoverBg","chbCheckedActiveShadow","chbCheckedActiveBg","indeterminate","chbBoxIndeterminateBg","chbIndeterminateBg","focus","chbBorderColorFocus","disabled","textColorDisabled","chbShadowDisabled","bgDisabled","iconFixBaseline","iconUnchecked","caption","captionIE11","jsStyles"],"mappings":"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","sourcesContent":["import { css, cssName, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  root(t: Theme) {\r\n    return css`\r\n      display: inline-flex;\r\n      align-items: baseline;\r\n      cursor: pointer;\r\n      position: relative;\r\n      user-select: none;\r\n      line-height: 20px;\r\n\r\n      &:hover ${cssName(styles.box(t))} {\r\n        background: ${t.chbHoverBg};\r\n        box-shadow: ${t.chbShadowHover};\r\n      }\r\n\r\n      &:active ${cssName(styles.box(t))} {\r\n        box-shadow: ${t.chbShadowActive};\r\n        background: ${t.chbActiveBg};\r\n      }\r\n    `;\r\n  },\r\n\r\n  rootFallback() {\r\n    return css`\r\n      display: inline-table !important;\r\n    `;\r\n  },\r\n\r\n  rootWrapperIE11() {\r\n    return css`\r\n      display: inline;\r\n    `;\r\n  },\r\n\r\n  box(t: Theme) {\r\n    return css`\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      box-sizing: border-box;\r\n      width: 16px;\r\n      height: 16px;\r\n      flex: none;\r\n      font-size: 14px;\r\n      color: ${t.textColorDefault};\r\n      border: ${t.chbBorder};\r\n      border-radius: ${t.chbBorderRadius};\r\n      box-shadow: ${t.chbShadow};\r\n      background: ${t.chbBg};\r\n      align-self: baseline;\r\n    `;\r\n  },\r\n\r\n  input() {\r\n    return css`\r\n      display: inline-block;\r\n      opacity: 0;\r\n      width: 0;\r\n      height: 0;\r\n      position: absolute;\r\n      z-index: -1;\r\n    `;\r\n  },\r\n\r\n  warning(t: Theme) {\r\n    return css`\r\n      & ${cssName(styles.box(t))} {\r\n        box-shadow: inset 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.chbShadowWidth} ${t.borderColorWarning} !important;\r\n      }\r\n    `;\r\n  },\r\n\r\n  error(t: Theme) {\r\n    return css`\r\n      & ${cssName(styles.box(t))} {\r\n        box-shadow: inset 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.chbShadowWidth} ${t.borderColorError} !important;\r\n      }\r\n    `;\r\n  },\r\n\r\n  checked(t: Theme) {\r\n    return css`\r\n      & ${cssName(styles.box(t))} {\r\n        background: ${t.chbCheckedBg};\r\n        color: ${t.chbCheckedColor};\r\n        box-shadow: ${t.chbCheckedShadow};\r\n      }\r\n\r\n      &:hover ${cssName(styles.box(t))} {\r\n        box-shadow: ${t.chbCheckedHoverShadow};\r\n        background: ${t.chbCheckedHoverBg};\r\n      }\r\n\r\n      &:active ${cssName(styles.box(t))} {\r\n        box-shadow: ${t.chbCheckedActiveShadow};\r\n        background: ${t.chbCheckedActiveBg};\r\n      }\r\n    `;\r\n  },\r\n\r\n  indeterminate(t: Theme) {\r\n    return css`\r\n      & ${cssName(styles.box(t))} {\r\n        background: ${t.chbBoxIndeterminateBg};\r\n        color: ${t.chbIndeterminateBg};\r\n        box-shadow: ${t.chbCheckedShadow};\r\n      }\r\n\r\n      &:hover ${cssName(styles.box(t))} {\r\n        box-shadow: ${t.chbCheckedHoverShadow};\r\n        background: ${t.chbCheckedHoverBg};\r\n      }\r\n      &:active ${cssName(styles.box(t))} {\r\n        box-shadow: ${t.chbCheckedActiveShadow};\r\n        background: ${t.chbCheckedActiveBg};\r\n      }\r\n    `;\r\n  },\r\n\r\n  focus(t: Theme) {\r\n    return css`\r\n      & ${cssName(styles.box(t))} {\r\n        box-shadow: inset 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.chbShadowWidth} ${t.chbBorderColorFocus} !important;\r\n      }\r\n    `;\r\n  },\r\n\r\n  disabled(t: Theme) {\r\n    return css`\r\n      color: ${t.textColorDisabled};\r\n      cursor: default;\r\n\r\n      & ${cssName(styles.box(t))} {\r\n        box-shadow: ${t.chbShadowDisabled} !important; //to override hover and active\r\n        background: ${t.bgDisabled} !important;\r\n        color: ${t.textColorDisabled} !important;\r\n      }\r\n    `;\r\n  },\r\n\r\n  iconFixBaseline() {\r\n    return css`\r\n      margin-top: -2px;\r\n    `;\r\n  },\r\n\r\n  iconUnchecked() {\r\n    return css`\r\n      color: transparent;\r\n    `;\r\n  },\r\n\r\n  caption() {\r\n    return css`\r\n      padding-left: 10px;\r\n    `;\r\n  },\r\n\r\n  captionIE11() {\r\n    return css`\r\n      display: table-cell;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Checkbox.styles.ts"],"names":["css","memoizeStyle","prefix","isChrome","globalClasses","box","styles","root","t","checkboxLineHeight","checkboxFontSize","checkboxPaddingY","checkboxHoverBg","checkboxShadowHover","checkboxShadowActive","checkboxActiveBg","checkboxBoxSize","rootChecked","checkboxCheckedHoverShadow","checkboxCheckedHoverBg","checkboxCheckedActiveBg","checkboxCheckedActiveShadow","rootFallback","rootWrapperIE11","boxWrapper","labGrotesqueCompenstation","parseInt","labGrotesqueBaselineCompensation","fontSize","baselineCompensation","checkboxBorderWidth","checkboxBoxOffsetY","checkboxTextColorDefault","checkboxShadow","checkboxBg","checkboxBorderRadius","input","boxWarning","checkboxOutlineColorFocus","checkboxOutlineWidth","checkboxBorderColorWarning","boxError","checkboxBorderColorError","boxChecked","checkboxCheckedBg","checkboxCheckedColor","checkboxCheckedShadow","boxFocus","checkboxBorderColorFocus","boxDisabled","checkboxShadowDisabled","checkboxBgDisabled","checkboxTextColorDisabled","disabled","icon","iconUnchecked","caption","checkboxCaptionGap","captionIE11"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isChrome } from '../../lib/client';\n\nexport const globalClasses = prefix('checkbox')({\n  box: 'box',\n});\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      display: inline-flex;\n      align-items: baseline;\n      cursor: pointer;\n      position: relative;\n      line-height: ${t.checkboxLineHeight};\n      font-size: ${t.checkboxFontSize};\n      padding: ${t.checkboxPaddingY} 0;\n\n      &:hover .${globalClasses.box} {\n        background: ${t.checkboxHoverBg};\n        box-shadow: ${t.checkboxShadowHover};\n      }\n\n      &:active .${globalClasses.box} {\n        box-shadow: ${t.checkboxShadowActive};\n        background: ${t.checkboxActiveBg};\n      }\n\n      &::before {\n        // non-breaking space.\n        // makes a correct space for absolutely positioned box,\n        // and also height and baseline for checkbox without caption.\n        content: '\\\\00A0';\n        display: inline-block;\n        width: ${t.checkboxBoxSize};\n        flex: 0 0 auto;\n      }\n    `;\n  },\n\n  rootChecked(t: Theme) {\n    return css`\n      &:hover .${globalClasses.box} {\n        box-shadow: ${t.checkboxCheckedHoverShadow};\n        background: ${t.checkboxCheckedHoverBg};\n      }\n\n      &:active .${globalClasses.box} {\n        background: ${t.checkboxCheckedActiveBg};\n        box-shadow: ${t.checkboxCheckedActiveShadow};\n      }\n    `;\n  },\n\n  rootFallback() {\n    return css`\n      display: inline-table;\n\n      & > * {\n        // fix root's :active state in IE11 that gets blocked by nested elements\n        pointer-events: none;\n      }\n    `;\n  },\n\n  rootWrapperIE11() {\n    return css`\n      display: inline;\n    `;\n  },\n\n  boxWrapper(t: Theme) {\n    const labGrotesqueCompenstation = parseInt(t.labGrotesqueBaselineCompensation);\n    const fontSize = parseInt(t.checkboxFontSize);\n    const baselineCompensation =\n      fontSize < 16 && !isChrome\n        ? labGrotesqueCompenstation\n        : fontSize === 16 && isChrome\n        ? -labGrotesqueCompenstation\n        : 0;\n    return css`\n      position: absolute;\n      width: ${t.checkboxBoxSize};\n      height: ${t.checkboxBoxSize};\n      box-sizing: border-box;\n      padding: ${t.checkboxBorderWidth};\n      margin-top: calc(${t.checkboxBoxOffsetY} + ${baselineCompensation}px);\n\n      // fix position in ie11\n      display: inline-block;\n      left: 0;\n    `;\n  },\n\n  box(t: Theme) {\n    return css`\n      color: ${t.checkboxTextColorDefault};\n      box-shadow: ${t.checkboxShadow};\n      background: ${t.checkboxBg};\n      border-radius: ${t.checkboxBorderRadius};\n      height: 100%;\n    `;\n  },\n\n  input() {\n    return css`\n      display: inline-block;\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n      z-index: -1;\n    `;\n  },\n\n  boxWarning(t: Theme) {\n    return css`\n      box-shadow: inset 0 0 0 1px ${t.checkboxOutlineColorFocus},\n        0 0 0 ${t.checkboxOutlineWidth} ${t.checkboxBorderColorWarning} !important; // override hover and active\n    `;\n  },\n\n  boxError(t: Theme) {\n    return css`\n      box-shadow: inset 0 0 0 1px ${t.checkboxOutlineColorFocus},\n        0 0 0 ${t.checkboxOutlineWidth} ${t.checkboxBorderColorError} !important; // override hover and active\n    `;\n  },\n\n  boxChecked(t: Theme) {\n    return css`\n      background: ${t.checkboxCheckedBg};\n      color: ${t.checkboxCheckedColor};\n      box-shadow: ${t.checkboxCheckedShadow};\n    `;\n  },\n\n  boxFocus(t: Theme) {\n    return css`\n      box-shadow: inset 0 0 0 1px ${t.checkboxOutlineColorFocus},\n        0 0 0 ${t.checkboxOutlineWidth} ${t.checkboxBorderColorFocus} !important; // override hover and active\n    `;\n  },\n\n  boxDisabled(t: Theme) {\n    return css`\n      box-shadow: ${t.checkboxShadowDisabled} !important; // override hover and active\n      background: ${t.checkboxBgDisabled} !important; // override hover and active\n      color: ${t.checkboxTextColorDisabled};\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      color: ${t.checkboxTextColorDisabled};\n      cursor: default;\n    `;\n  },\n\n  icon(t: Theme) {\n    return css`\n      position: absolute;\n      top: 0px;\n      bottom: 0px;\n      right: 0px;\n      left: 0px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n\n      svg {\n        margin: -12.5% 0 0 0;\n      }\n    `;\n  },\n\n  iconUnchecked() {\n    return css`\n      color: transparent;\n    `;\n  },\n\n  caption(t: Theme) {\n    return css`\n      color: ${t.checkboxTextColorDefault};\n      padding-left: ${t.checkboxCaptionGap};\n    `;\n  },\n\n  captionIE11() {\n    return css`\n      display: table-cell;\n    `;\n  },\n});\n"]}

package/components/Checkbox/Checkbox.styles/package.json

@@ -1,6 +1,6 @@
 {
-  "main": "..\\..\\..\\cjs\\components\\Checkbox\\Checkbox.styles.js",
+  "main": "../../../cjs/components/Checkbox/Checkbox.styles.js",
   "module": "Checkbox.styles",
-  "types": "..\\Checkbox.styles.d.ts",
+  "types": "../Checkbox.styles.d.ts",
   "sideEffects": false
 }

package/components/Checkbox/Checkbox.styles.d.ts

@@ -1,17 +1,23 @@
-export declare const jsStyles: {
-    root(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
+import { Theme } from '../../lib/theming/Theme';
+export declare const globalClasses: {
+    box: string;
+};
+export declare const styles: {
+    root(t: Theme): string;
+    rootChecked(t: Theme): string;
     rootFallback(): string;
     rootWrapperIE11(): string;
-    box(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
+    boxWrapper(t: Theme): string;
+    box(t: Theme): string;
     input(): string;
-    warning(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    error(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    checked(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    indeterminate(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    focus(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    disabled(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    iconFixBaseline(): string;
+    boxWarning(t: Theme): string;
+    boxError(t: Theme): string;
+    boxChecked(t: Theme): string;
+    boxFocus(t: Theme): string;
+    boxDisabled(t: Theme): string;
+    disabled(t: Theme): string;
+    icon(t: Theme): string;
     iconUnchecked(): string;
-    caption(): string;
+    caption(t: Theme): string;
     captionIE11(): string;
 };

package/components/Checkbox/index/index.js

@@ -1 +1 @@
-export * from "..\\Checkbox";
+export * from "../Checkbox";