@skbkontur/react-ui 0.0.0-0b8a8f7a39 → 0.0.0-0dca6f33be

package/components/Radio/Radio.md

@@ -1,14 +1,38 @@
-```jsx harmony
-import { Gapped, Radio } from '@skbkontur/react-ui';
-
-<Gapped gap={20}>
-  <Radio value="value" />
-  <Radio value="value" disabled />
-  <Radio value="value" disabled checked />
-  <Radio value="value" checked />
-  <Radio value="value" focused />
-  <Radio value="value" focused checked />
-  <Radio value="value" error />
-  <Radio value="value" warning />
-</Gapped>;
-```
+Различные виды радио-кнопок.
+
+```jsx harmony
+import { Gapped, Radio, RadioGroup } from '@skbkontur/react-ui';
+
+const [chosen, setChosen] = React.useState(null);
+
+<RadioGroup onValueChange={(value) => setChosen(value)}>
+  <Gapped gap={3} vertical>
+    <Radio value={1}>
+      Обычная радио-кнопка
+    </Radio>
+    <Radio value={2} disabled>
+      Отключенная радио-кнопка
+    </Radio>
+    <Radio value={3} checked={!chosen}>
+      Радио-кнопка отмеченная по умолчанию
+    </Radio>
+    <Radio value={4} focused>
+      Радио-кнопка в состоянии <b>focused</b> (меняется только обводка)
+    </Radio>
+    <Radio value={5} error>
+      Радио-кнопка в состоянии <b>error</b>
+    </Radio>
+    <Radio value={6} warning>
+      Радио-кнопка в состоянии <b>warning</b>
+    </Radio>
+  </Gapped>
+</RadioGroup>
+```
+
+Радио-кнопки могут иметь сразу несколько состояний.
+
+```jsx harmony
+<Radio disabled checked warning>
+  Отключенная, отмеченная радио-кнопка в состоянии <b>warning</b>
+</Radio>
+```

package/components/Radio/Radio.styles/Radio.styles.js

@@ -1,47 +1,68 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 
-import { css, cssName, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
+import { getLabGrotesqueBaselineCompensation } from "../../../lib/styles/getLabGrotesqueBaselineCompensation";
+import { css, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
+import { isChrome } from "../../../lib/client";
+export var globalClasses = prefix('radio')({
+  circle: 'circle'
+});
+var mixins = {
+  afterOutline: function afterOutline(t) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      content: ' ';\n      position: absolute;\n      left: -", ";\n      top: -", ";\n      width: ", ";\n      height: ", ";\n      border-width: ", ";\n      border-style: solid;\n      border-radius: 50%;\n      box-sizing: border-box;\n    "])), t.radioOutlineWidth, t.radioOutlineWidth, t.radioSizeAfter, t.radioSizeAfter, t.radioOutlineWidth);
+  }
+};
+export var styles = memoizeStyle({
   root: function root(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n      position: relative;\n      white-space: nowrap;\n      padding-top: ", ";\n      padding-bottom: ", ";\n      display: inline-block;\n    "])), t.radioPaddingY, t.radioPaddingY);
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n      position: relative;\n      white-space: nowrap;\n      padding-top: ", ";\n      padding-bottom: ", ";\n      display: inline-flex;\n      align-items: baseline;\n      line-height: ", ";\n      font-size: ", ";\n\n      &:hover .", " {\n        background: ", ";\n        box-shadow: ", ";\n      }\n      &:active .", " {\n        background: ", ";\n        box-shadow: ", ";\n      }\n\n      &::before {\n        // non-breaking space.\n        // makes a correct space for absolutely positioned circle,\n        // and also height and baseline for radio without caption.\n        content: '\\00A0';\n        display: inline-block;\n        width: ", ";\n        flex: 0 0 auto;\n      }\n    "], ["\n      cursor: pointer;\n      position: relative;\n      white-space: nowrap;\n      padding-top: ", ";\n      padding-bottom: ", ";\n      display: inline-flex;\n      align-items: baseline;\n      line-height: ", ";\n      font-size: ", ";\n\n      &:hover .", " {\n        background: ", ";\n        box-shadow: ", ";\n      }\n      &:active .", " {\n        background: ", ";\n        box-shadow: ", ";\n      }\n\n      &::before {\n        // non-breaking space.\n        // makes a correct space for absolutely positioned circle,\n        // and also height and baseline for radio without caption.\n        content: '\\\\00A0';\n        display: inline-block;\n        width: ", ";\n        flex: 0 0 auto;\n      }\n    "])), t.radioPaddingY, t.radioPaddingY, t.radioLineHeight, t.radioFontSize, globalClasses.circle, t.radioHoverBg, t.radioHoverShadow, globalClasses.circle, t.radioActiveBg, t.radioActiveShadow, t.radioSize);
+  },
+  rootIE11: function rootIE11() {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      display: inline-table;\n    "])));
   },
-  after: function after(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      content: ' ';\n      position: absolute;\n      left: -", ";\n      top: -", ";\n      width: ", ";\n      height: ", ";\n      border-width: ", ";\n      border-style: solid;\n      border-radius: 50%;\n      box-sizing: border-box;\n    "])), t.radioOutlineWidth, t.radioOutlineWidth, t.radioSizeAfter, t.radioSizeAfter, t.radioOutlineWidth);
+  rootChecked: function rootChecked(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      &:hover .", " {\n        background: ", ";\n      }\n    "])), globalClasses.circle, t.radioCheckedHoverBgColor);
   },
-  radio: function radio(t) {
-    var radioSize = "calc(" + t.radioSize + " - 2 * " + t.radioBorderWidthCompensation + ")";
-    var radioMarginY = "calc(" + t.radioMarginY + " + " + t.radioBorderWidthCompensation + ")";
-    var radioMarginX = t.radioBorderWidthCompensation;
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      background-image: ", ";\n      border-radius: 50%;\n      border: ", ";\n      box-shadow: ", ";\n      box-sizing: border-box;\n      display: inline-block;\n      height: ", ";\n      width: ", ";\n      position: relative;\n      vertical-align: ", ";\n      margin: ", " ", ";\n\n      ", ":hover &:not(", ") {\n        background: ", ";\n        box-shadow: ", ";\n      }\n      ", ":hover &", ":not(", ") {\n        background: ", ";\n      }\n      ", ":active & {\n        background: ", ";\n        box-shadow: ", ";\n      }\n      ", ":focus + &::after {\n        ", ";\n        box-shadow: ", ";\n        border-color: ", ";\n      }\n      &::after {\n        content: ' ';\n        display: inline-block;\n      }\n    "])), t.radioBgImage, t.radioBorder, t.radioBoxShadow, radioSize, radioSize, t.radioVerticalAlign, radioMarginY, radioMarginX, cssName(styles.root(t)), cssName(styles.disabled(t)), t.radioHoverBg, t.radioHoverShadow, cssName(styles.root(t)), cssName(styles.checked(t)), cssName(styles.disabled(t)), t.radioCheckedHoverBgColor, cssName(styles.root(t)), t.radioActiveBg, t.radioActiveShadow, cssName(styles.input()), styles.after(t), t.radioFocusShadow, t.radioBorderColorFocus);
+  circle: function circle(t) {
+    var labGrotesqueCompenstation = parseInt(t.labGrotesqueBaselineCompensation);
+    var fontSize = parseInt(t.checkboxFontSize);
+    var baselineCompensation = getLabGrotesqueBaselineCompensation(fontSize, labGrotesqueCompenstation, isChrome);
+    var circleSize = "calc(" + t.radioSize + " - 2 * " + t.radioBorderWidthCompensation + ")";
+    var circleOffsetY = "calc(" + t.radioCircleOffsetY + " + " + t.radioBorderWidthCompensation + " + " + baselineCompensation + "px)";
+    var circleMarginX = t.radioBorderWidthCompensation;
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      background-image: ", ";\n      border-radius: 50%;\n      border: ", ";\n      box-shadow: ", ";\n      box-sizing: border-box;\n      display: inline-block;\n      height: ", ";\n      width: ", ";\n      position: absolute;\n      left: 0;\n      margin: ", " ", " 0;\n      background-color: ", ";\n    "])), t.radioBgImage, t.radioBorder, t.radioBoxShadow, circleSize, circleSize, circleOffsetY, circleMarginX, t.radioBgColor);
   },
   focus: function focus(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      &::after {\n        ", ";\n        box-shadow: ", ";\n        border-color: ", ";\n      }\n    "])), styles.after(t), t.radioFocusShadow, t.radioBorderColorFocus);
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      &::after {\n        ", ";\n        box-shadow: ", ";\n        border-color: ", ";\n      }\n    "])), mixins.afterOutline(t), t.radioFocusShadow, t.radioBorderColorFocus);
   },
   warning: function warning(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      &::after {\n        ", ";\n        box-shadow: ", ";\n        border-color: ", ";\n      }\n    "])), styles.after(t), t.radioFocusShadow, t.radioBorderColorWarning);
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      &::after {\n        ", ";\n        box-shadow: ", ";\n        border-color: ", ";\n      }\n    "])), mixins.afterOutline(t), t.radioFocusShadow, t.radioBorderColorWarning);
   },
   error: function error(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      &::after {\n        ", ";\n        box-shadow: ", ";\n        border-color: ", ";\n      }\n    "])), styles.after(t), t.radioFocusShadow, t.radioBorderColorError);
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      &::after {\n        ", ";\n        box-shadow: ", ";\n        border-color: ", ";\n      }\n    "])), mixins.afterOutline(t), t.radioFocusShadow, t.radioBorderColorError);
   },
   checked: function checked(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      position: relative;\n      background-color: ", ";\n\n      &::before {\n        content: ' ';\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        margin: auto;\n        height: ", ";\n        width: ", ";\n        border-radius: 50%;\n        background: ", " !important;\n      }\n\n      ", "&::before {\n        background: ", " !important;\n      }\n    "])), t.radioCheckedBgColor, t.radioBulletSize, t.radioBulletSize, t.radioCheckedBulletColor, cssName(styles.disabled(t)), t.gray);
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      border-color: ", ";\n\n      &::before {\n        content: ' ';\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        margin: auto;\n        height: ", ";\n        width: ", ";\n        border-radius: 50%;\n        background: ", ";\n      }\n    "])), t.radioCheckedBgColor, t.radioCheckedBorderColor, t.radioBulletSize, t.radioBulletSize, t.radioCheckedBulletColor);
+  },
+  checkedDisabled: function checkedDisabled(t) {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      &::before {\n        background: ", ";\n      }\n    "])), t.radioCheckedDisabledBulletBg);
   },
   input: function input() {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n      z-index: -1;\n    "])));
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n      z-index: -1;\n    "])));
   },
   disabled: function disabled(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      background: ", " !important;\n      border-color: transparent !important;\n      box-shadow: ", " !important;\n    "])), t.bgDisabled, t.radioDisabledShadow);
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      background: ", " !important; // override root hover/active styles\n      border-color: transparent !important; // override root hover/active styles\n      box-shadow: ", " !important; // override root hover/active styles\n    "])), t.radioDisabledBg, t.radioDisabledShadow);
+  },
+  caption: function caption(t) {
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      display: ", ";\n      padding-left: ", ";\n      white-space: normal;\n      color: ", ";\n    "])), t.radioCaptionDisplay, t.radioCaptionGap, t.radioTextColor);
   },
-  label: function label(t) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      display: ", ";\n      line-height: ", ";\n      margin-left: ", ";\n      white-space: normal;\n      font-size: ", ";\n    "])), t.radioLabelDisplay, t.radioLineHeight, t.radioLabelGap, t.radioFontSize);
+  captionIE11: function captionIE11() {
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      display: table-cell;\n    "])));
   },
-  labelDisabled: function labelDisabled() {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      color: #a0a0a0;\n    "])));
+  captionDisabled: function captionDisabled(t) {
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.textColorDisabled);
   },
   placeholder: function placeholder() {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n    "])));
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n    "])));
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

package/components/Radio/Radio.styles/Radio.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Radio.styles.ts"],"names":["css","cssName","memoizeStyle","styles","root","t","radioPaddingY","after","radioOutlineWidth","radioSizeAfter","radio","radioSize","radioBorderWidthCompensation","radioMarginY","radioMarginX","radioBgImage","radioBorder","radioBoxShadow","radioVerticalAlign","disabled","radioHoverBg","radioHoverShadow","checked","radioCheckedHoverBgColor","radioActiveBg","radioActiveShadow","input","radioFocusShadow","radioBorderColorFocus","focus","warning","radioBorderColorWarning","error","radioBorderColorError","radioCheckedBgColor","radioBulletSize","radioCheckedBulletColor","gray","bgDisabled","radioDisabledShadow","label","radioLabelDisplay","radioLineHeight","radioLabelGap","radioFontSize","labelDisabled","placeholder","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      cursor: pointer;\r\n      position: relative;\r\n      white-space: nowrap;\r\n      padding-top: ${t.radioPaddingY};\r\n      padding-bottom: ${t.radioPaddingY};\r\n      display: inline-block;\r\n    `;\r\n  },\r\n\r\n  after(t: Theme) {\r\n    return css`\r\n      content: ' ';\r\n      position: absolute;\r\n      left: -${t.radioOutlineWidth};\r\n      top: -${t.radioOutlineWidth};\r\n      width: ${t.radioSizeAfter};\r\n      height: ${t.radioSizeAfter};\r\n      border-width: ${t.radioOutlineWidth};\r\n      border-style: solid;\r\n      border-radius: 50%;\r\n      box-sizing: border-box;\r\n    `;\r\n  },\r\n\r\n  radio(t: Theme) {\r\n    const radioSize = `calc(${t.radioSize} - 2 * ${t.radioBorderWidthCompensation})`;\r\n    const radioMarginY = `calc(${t.radioMarginY} + ${t.radioBorderWidthCompensation})`;\r\n    const radioMarginX = t.radioBorderWidthCompensation;\r\n    return css`\r\n      background-image: ${t.radioBgImage};\r\n      border-radius: 50%;\r\n      border: ${t.radioBorder};\r\n      box-shadow: ${t.radioBoxShadow};\r\n      box-sizing: border-box;\r\n      display: inline-block;\r\n      height: ${radioSize};\r\n      width: ${radioSize};\r\n      position: relative;\r\n      vertical-align: ${t.radioVerticalAlign};\r\n      margin: ${radioMarginY} ${radioMarginX};\r\n\r\n      ${cssName(styles.root(t))}:hover &:not(${cssName(styles.disabled(t))}) {\r\n        background: ${t.radioHoverBg};\r\n        box-shadow: ${t.radioHoverShadow};\r\n      }\r\n      ${cssName(styles.root(t))}:hover &${cssName(styles.checked(t))}:not(${cssName(styles.disabled(t))}) {\r\n        background: ${t.radioCheckedHoverBgColor};\r\n      }\r\n      ${cssName(styles.root(t))}:active & {\r\n        background: ${t.radioActiveBg};\r\n        box-shadow: ${t.radioActiveShadow};\r\n      }\r\n      ${cssName(styles.input())}:focus + &::after {\r\n        ${styles.after(t)};\r\n        box-shadow: ${t.radioFocusShadow};\r\n        border-color: ${t.radioBorderColorFocus};\r\n      }\r\n      &::after {\r\n        content: ' ';\r\n        display: inline-block;\r\n      }\r\n    `;\r\n  },\r\n\r\n  focus(t: Theme) {\r\n    return css`\r\n      &::after {\r\n        ${styles.after(t)};\r\n        box-shadow: ${t.radioFocusShadow};\r\n        border-color: ${t.radioBorderColorFocus};\r\n      }\r\n    `;\r\n  },\r\n\r\n  warning(t: Theme) {\r\n    return css`\r\n      &::after {\r\n        ${styles.after(t)};\r\n        box-shadow: ${t.radioFocusShadow};\r\n        border-color: ${t.radioBorderColorWarning};\r\n      }\r\n    `;\r\n  },\r\n\r\n  error(t: Theme) {\r\n    return css`\r\n      &::after {\r\n        ${styles.after(t)};\r\n        box-shadow: ${t.radioFocusShadow};\r\n        border-color: ${t.radioBorderColorError};\r\n      }\r\n    `;\r\n  },\r\n\r\n  checked(t: Theme) {\r\n    return css`\r\n      position: relative;\r\n      background-color: ${t.radioCheckedBgColor};\r\n\r\n      &::before {\r\n        content: ' ';\r\n        position: absolute;\r\n        top: 0;\r\n        right: 0;\r\n        bottom: 0;\r\n        left: 0;\r\n        margin: auto;\r\n        height: ${t.radioBulletSize};\r\n        width: ${t.radioBulletSize};\r\n        border-radius: 50%;\r\n        background: ${t.radioCheckedBulletColor} !important;\r\n      }\r\n\r\n      ${cssName(styles.disabled(t))}&::before {\r\n        background: ${t.gray} !important;\r\n      }\r\n    `;\r\n  },\r\n\r\n  input() {\r\n    return css`\r\n      display: inline-block;\r\n      height: 0;\r\n      opacity: 0;\r\n      position: absolute;\r\n      width: 0;\r\n      z-index: -1;\r\n    `;\r\n  },\r\n\r\n  disabled(t: Theme) {\r\n    return css`\r\n      background: ${t.bgDisabled} !important;\r\n      border-color: transparent !important;\r\n      box-shadow: ${t.radioDisabledShadow} !important;\r\n    `;\r\n  },\r\n\r\n  label(t: Theme) {\r\n    return css`\r\n      display: ${t.radioLabelDisplay};\r\n      line-height: ${t.radioLineHeight};\r\n      margin-left: ${t.radioLabelGap};\r\n      white-space: normal;\r\n      font-size: ${t.radioFontSize};\r\n    `;\r\n  },\r\n\r\n  labelDisabled() {\r\n    return css`\r\n      color: #a0a0a0;\r\n    `;\r\n  },\r\n\r\n  placeholder() {\r\n    return css`\r\n      display: inline-block;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Radio.styles.ts"],"names":["getLabGrotesqueBaselineCompensation","css","memoizeStyle","prefix","isChrome","globalClasses","circle","mixins","afterOutline","t","radioOutlineWidth","radioSizeAfter","styles","root","radioPaddingY","radioLineHeight","radioFontSize","radioHoverBg","radioHoverShadow","radioActiveBg","radioActiveShadow","radioSize","rootIE11","rootChecked","radioCheckedHoverBgColor","labGrotesqueCompenstation","parseInt","labGrotesqueBaselineCompensation","fontSize","checkboxFontSize","baselineCompensation","circleSize","radioBorderWidthCompensation","circleOffsetY","radioCircleOffsetY","circleMarginX","radioBgImage","radioBorder","radioBoxShadow","radioBgColor","focus","radioFocusShadow","radioBorderColorFocus","warning","radioBorderColorWarning","error","radioBorderColorError","checked","radioCheckedBgColor","radioCheckedBorderColor","radioBulletSize","radioCheckedBulletColor","checkedDisabled","radioCheckedDisabledBulletBg","input","disabled","radioDisabledBg","radioDisabledShadow","caption","radioCaptionDisplay","radioCaptionGap","radioTextColor","captionIE11","captionDisabled","textColorDisabled","placeholder"],"mappings":"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","sourcesContent":["import { getLabGrotesqueBaselineCompensation } from '../../lib/styles/getLabGrotesqueBaselineCompensation';\nimport { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isChrome } from '../../lib/client';\n\nexport const globalClasses = prefix('radio')({\n  circle: 'circle',\n});\n\nconst mixins = {\n  afterOutline(t: Theme) {\n    return css`\n      content: ' ';\n      position: absolute;\n      left: -${t.radioOutlineWidth};\n      top: -${t.radioOutlineWidth};\n      width: ${t.radioSizeAfter};\n      height: ${t.radioSizeAfter};\n      border-width: ${t.radioOutlineWidth};\n      border-style: solid;\n      border-radius: 50%;\n      box-sizing: border-box;\n    `;\n  },\n};\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      cursor: pointer;\n      position: relative;\n      white-space: nowrap;\n      padding-top: ${t.radioPaddingY};\n      padding-bottom: ${t.radioPaddingY};\n      display: inline-flex;\n      align-items: baseline;\n      line-height: ${t.radioLineHeight};\n      font-size: ${t.radioFontSize};\n\n      &:hover .${globalClasses.circle} {\n        background: ${t.radioHoverBg};\n        box-shadow: ${t.radioHoverShadow};\n      }\n      &:active .${globalClasses.circle} {\n        background: ${t.radioActiveBg};\n        box-shadow: ${t.radioActiveShadow};\n      }\n\n      &::before {\n        // non-breaking space.\n        // makes a correct space for absolutely positioned circle,\n        // and also height and baseline for radio without caption.\n        content: '\\\\00A0';\n        display: inline-block;\n        width: ${t.radioSize};\n        flex: 0 0 auto;\n      }\n    `;\n  },\n\n  rootIE11() {\n    return css`\n      display: inline-table;\n    `;\n  },\n\n  rootChecked(t: Theme) {\n    return css`\n      &:hover .${globalClasses.circle} {\n        background: ${t.radioCheckedHoverBgColor};\n      }\n    `;\n  },\n\n  circle(t: Theme) {\n    const labGrotesqueCompenstation = parseInt(t.labGrotesqueBaselineCompensation);\n    const fontSize = parseInt(t.checkboxFontSize);\n\n    const baselineCompensation = getLabGrotesqueBaselineCompensation(fontSize, labGrotesqueCompenstation, isChrome);\n    const circleSize = `calc(${t.radioSize} - 2 * ${t.radioBorderWidthCompensation})`;\n    const circleOffsetY = `calc(${t.radioCircleOffsetY} + ${t.radioBorderWidthCompensation} + ${baselineCompensation}px)`;\n    const circleMarginX = t.radioBorderWidthCompensation;\n    return css`\n      background-image: ${t.radioBgImage};\n      border-radius: 50%;\n      border: ${t.radioBorder};\n      box-shadow: ${t.radioBoxShadow};\n      box-sizing: border-box;\n      display: inline-block;\n      height: ${circleSize};\n      width: ${circleSize};\n      position: absolute;\n      left: 0;\n      margin: ${circleOffsetY} ${circleMarginX} 0;\n      background-color: ${t.radioBgColor};\n    `;\n  },\n\n  focus(t: Theme) {\n    return css`\n      &::after {\n        ${mixins.afterOutline(t)};\n        box-shadow: ${t.radioFocusShadow};\n        border-color: ${t.radioBorderColorFocus};\n      }\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      &::after {\n        ${mixins.afterOutline(t)};\n        box-shadow: ${t.radioFocusShadow};\n        border-color: ${t.radioBorderColorWarning};\n      }\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      &::after {\n        ${mixins.afterOutline(t)};\n        box-shadow: ${t.radioFocusShadow};\n        border-color: ${t.radioBorderColorError};\n      }\n    `;\n  },\n\n  checked(t: Theme) {\n    return css`\n      background-color: ${t.radioCheckedBgColor};\n      border-color: ${t.radioCheckedBorderColor};\n\n      &::before {\n        content: ' ';\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        margin: auto;\n        height: ${t.radioBulletSize};\n        width: ${t.radioBulletSize};\n        border-radius: 50%;\n        background: ${t.radioCheckedBulletColor};\n      }\n    `;\n  },\n\n  checkedDisabled(t: Theme) {\n    return css`\n      &::before {\n        background: ${t.radioCheckedDisabledBulletBg};\n      }\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  disabled(t: Theme) {\n    return css`\n      background: ${t.radioDisabledBg} !important; // override root hover/active styles\n      border-color: transparent !important; // override root hover/active styles\n      box-shadow: ${t.radioDisabledShadow} !important; // override root hover/active styles\n    `;\n  },\n\n  caption(t: Theme) {\n    return css`\n      display: ${t.radioCaptionDisplay};\n      padding-left: ${t.radioCaptionGap};\n      white-space: normal;\n      color: ${t.radioTextColor};\n    `;\n  },\n\n  captionIE11() {\n    return css`\n      display: table-cell;\n    `;\n  },\n\n  captionDisabled(t: Theme) {\n    return css`\n      color: ${t.textColorDisabled};\n    `;\n  },\n\n  placeholder() {\n    return css`\n      display: inline-block;\n    `;\n  },\n});\n"]}

package/components/Radio/Radio.styles.d.ts

@@ -1,15 +1,21 @@
 import { Theme } from '../../lib/theming/Theme';
-export declare const jsStyles: {
+export declare const globalClasses: {
+    circle: string;
+};
+export declare const styles: {
     root(t: Theme): string;
-    after(t: Theme): string;
-    radio(t: Theme): string;
+    rootIE11(): string;
+    rootChecked(t: Theme): string;
+    circle(t: Theme): string;
     focus(t: Theme): string;
     warning(t: Theme): string;
     error(t: Theme): string;
     checked(t: Theme): string;
+    checkedDisabled(t: Theme): string;
     input(): string;
     disabled(t: Theme): string;
-    label(t: Theme): string;
-    labelDisabled(): string;
+    caption(t: Theme): string;
+    captionIE11(): string;
+    captionDisabled(t: Theme): string;
     placeholder(): string;
 };

package/components/Radio/index/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAd","sourcesContent":["export * from './Radio';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAd","sourcesContent":["export * from './Radio';\n"]}

package/components/RadioGroup/Prevent/Prevent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Prevent.tsx"],"names":["React","Prevent","_prevent","event","stopPropagation","preventDefault","render","props","children","Component"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;;;;;AAMA,WAAaC,OAAb;;;;;AAKUC,IAAAA,QALV,GAKqB,UAACC,KAAD,EAA8C;AAC/DA,MAAAA,KAAK,CAACC,eAAN;AACAD,MAAAA,KAAK,CAACE,cAAN;AACD,KARH,qDACSC,MADT,GACE,kBAAgB,CACd,oBAAO,8BAAM,OAAO,EAAE,KAAKJ,QAApB,IAA+B,KAAKK,KAAL,CAAWC,QAA1C,CAAP,CACD,CAHH,kBAA6BR,KAAK,CAACS,SAAnC","sourcesContent":["import React from 'react';\r\n\r\nexport interface PreventProps {\r\n  children?: React.ReactNode;\r\n}\r\n\r\nexport class Prevent extends React.Component<PreventProps> {\r\n  public render() {\r\n    return <span onClick={this._prevent}>{this.props.children}</span>;\r\n  }\r\n\r\n  private _prevent = (event: React.MouseEvent<HTMLSpanElement>) => {\r\n    event.stopPropagation();\r\n    event.preventDefault();\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["Prevent.tsx"],"names":["React","Prevent","_prevent","event","stopPropagation","preventDefault","render","props","children","Component"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;;;;;AAMA,WAAaC,OAAb;;;;;AAKUC,IAAAA,QALV,GAKqB,UAACC,KAAD,EAA8C;AAC/DA,MAAAA,KAAK,CAACC,eAAN;AACAD,MAAAA,KAAK,CAACE,cAAN;AACD,KARH,qDACSC,MADT,GACE,kBAAgB,CACd,oBAAO,8BAAM,OAAO,EAAE,KAAKJ,QAApB,IAA+B,KAAKK,KAAL,CAAWC,QAA1C,CAAP,CACD,CAHH,kBAA6BR,KAAK,CAACS,SAAnC","sourcesContent":["import React from 'react';\n\nexport interface PreventProps {\n  children?: React.ReactNode;\n}\n\nexport class Prevent extends React.Component<PreventProps> {\n  public render() {\n    return <span onClick={this._prevent}>{this.props.children}</span>;\n  }\n\n  private _prevent = (event: React.MouseEvent<HTMLSpanElement>) => {\n    event.stopPropagation();\n    event.preventDefault();\n  };\n}\n"]}

package/components/RadioGroup/RadioGroup/RadioGroup.js

@@ -1,29 +1,27 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 
+var _class, _class2, _temp;
+
 function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it;
-
-  if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
-    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-      if (it) o = it;
-      var i = 0;
-      return function () {
-        if (i >= o.length) return {
-          done: true
-        };
-        return {
-          done: false,
-          value: o[i++]
-        };
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
       };
-    }
-
-    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
   }
 
-  it = o[Symbol.iterator]();
-  return it.next.bind(it);
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
 function _unsupportedIterableToArray(o, minLen) {
@@ -46,29 +44,52 @@ function _arrayLikeToArray(arr, len) {
 }
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import invariant from 'invariant';
-import cn from 'classnames';
-import { getRandomID } from "../../../lib/utils";
+import { getRandomID, isNonNullable } from "../../../lib/utils";
 import { Radio } from "../../Radio";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { FocusTrap } from "../../../internal/FocusTrap";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { jsStyles } from "../RadioGroup.styles";
+import { cx } from "../../../lib/theming/Emotion";
+import { rootNode } from "../../../lib/rootNode";
+import { styles } from "../RadioGroup.styles";
 import { Prevent } from "../Prevent";
-export var RadioGroup = /*#__PURE__*/function (_React$Component) {
+import { RadioGroupContext } from "../RadioGroupContext";
+export var RadioGroupDataTids = {
+  root: 'RadioGroup__root'
+};
+export
+/**
+*
+* `children` может содержать любую разметку с компонентами Radio,
+* если не передан параметр `items`.
+* Каждому компоненту Radio нужно указать параметр `value`, такого же типа
+* как и параметр `value` самой радиогруппы.
+*
+* Значения активного элемента сравниваются по строгому равенству `===`
+*/
+var RadioGroup = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(RadioGroup, _React$Component);
 
   function RadioGroup(props) {
     var _this;
 
     _this = _React$Component.call(this, props) || this;
-    _this.theme = void 0;
-    _this.node = void 0;
     _this.name = getRandomID();
     _this.getProps = createPropsGetter(RadioGroup.defaultProps);
 
+    _this.getRadioGroupContextValue = function () {
+      return {
+        activeItem: _this.getValue(),
+        onSelect: _this.handleSelect,
+        name: _this.getName(),
+        disabled: _this.props.disabled,
+        error: _this.props.error,
+        warning: _this.props.warning
+      };
+    };
+
     _this.getValue = function () {
       return _this.isControlled() ? _this.props.value : _this.state.activeItem;
     };
@@ -78,7 +99,7 @@ export var RadioGroup = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.isControlled = function () {
-      return _this.props.value != null;
+      return isNonNullable(_this.props.value);
     };
 
     _this.handleSelect = function (value) {
@@ -94,17 +115,27 @@ export var RadioGroup = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.renderRadio = function (itemValue, data, index) {
-      var _cn;
+      var _cx;
 
       var itemProps = {
-        key: typeof itemValue === 'string' || typeof itemValue === 'number' ? itemValue : index,
-        className: cn((_cn = {}, _cn[jsStyles.item(_this.theme)] = true, _cn[jsStyles.itemFirst()] = index === 0, _cn[jsStyles.itemInline()] = !!_this.props.inline, _cn))
+        key: _this.getKeyByItem(itemValue),
+        className: cx((_cx = {}, _cx[styles.item(_this.theme)] = true, _cx[styles.itemFirst()] = index === 0, _cx[styles.itemInline()] = !!_this.props.inline, _cx))
       };
-      return /*#__PURE__*/React.createElement("span", itemProps, /*#__PURE__*/React.createElement(Radio, {
+      return /*#__PURE__*/React.createElement("span", _extends({}, itemProps, {
+        role: "presentation"
+      }), /*#__PURE__*/React.createElement(Radio, {
         value: itemValue
       }, _this.getProps().renderItem(itemValue, data)));
     };
 
+    _this.getKeyByItem = function (itemValue) {
+      if (_this.props.toKey) {
+        return _this.props.toKey(itemValue);
+      }
+
+      return typeof itemValue === 'string' || typeof itemValue === 'number' ? itemValue : undefined;
+    };
+
     _this.ref = function (element) {
       _this.node = element;
     };
@@ -117,17 +148,6 @@ export var RadioGroup = /*#__PURE__*/function (_React$Component) {
 
   var _proto = RadioGroup.prototype;
 
-  _proto.getChildContext = function getChildContext() {
-    return {
-      activeItem: this.getValue(),
-      onSelect: this.handleSelect,
-      name: this.getName(),
-      disabled: this.props.disabled,
-      error: this.props.error,
-      warning: this.props.warning
-    };
-  };
-
   _proto.render = function render() {
     var _this2 = this;
 
@@ -143,7 +163,8 @@ export var RadioGroup = /*#__PURE__*/function (_React$Component) {
         onMouseLeave = _this$props.onMouseLeave,
         onMouseOver = _this$props.onMouseOver,
         onMouseEnter = _this$props.onMouseEnter,
-        onBlur = _this$props.onBlur;
+        onBlur = _this$props.onBlur,
+        ariaDescribedby = _this$props['aria-describedby'];
     var style = {
       width: width != null ? width : 'auto'
     };
@@ -152,16 +173,24 @@ export var RadioGroup = /*#__PURE__*/function (_React$Component) {
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave
     };
-    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement(FocusTrap, {
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement(FocusTrap, {
       onBlur: onBlur
     }, /*#__PURE__*/React.createElement("span", _extends({
+      "data-tid": RadioGroupDataTids.root,
       ref: this.ref,
       style: style,
-      className: jsStyles.root()
-    }, handlers), this.renderChildren())));
+      className: styles.root(),
+      role: "radiogroup"
+    }, handlers, {
+      "aria-describedby": ariaDescribedby
+    }), /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
+      value: this.getRadioGroupContextValue()
+    }, this.renderChildren()))));
   }
-  /**
-  * @public
+  /**
+  * @public
   */
   ;
 
@@ -192,105 +221,9 @@ export var RadioGroup = /*#__PURE__*/function (_React$Component) {
   };
 
   return RadioGroup;
-}(React.Component);
-RadioGroup.__KONTUR_REACT_UI__ = 'RadioGroup';
-RadioGroup.childContextTypes = {
-  error: PropTypes.bool,
-  name: PropTypes.string,
-  warning: PropTypes.bool,
-  disabled: PropTypes.bool,
-  activeItem: PropTypes.any,
-  onSelect: PropTypes.func
-};
-RadioGroup.propTypes = {
-  /**
-  * Может быть использовано, если не передан параметр `items`
-  *
-  * `children` может содержать любую разметку с компонентами Radio.
-  * Каждому компоненту Radio нужно указать параметр `value`, такого же типа
-  * как и параметр `value` самой радиогруппы.
-  *
-  * Значения активного элемента сравниваются по строгому равенству `===`
-  */
-  children: PropTypes.node,
-
-  /**
-  * Значение по умолчанию. Должно быть одним из значений дочерних радиокнопок
-  * или значей из параметра `items`
-  */
-  defaultValue: PropTypes.any,
-
-  /**
-  * Дизейблит все радиокнопки
-  */
-  disabled: PropTypes.bool,
-
-  /**
-  * Переводит все радиокнопки в состоянии ошибки
-  */
-  error: PropTypes.bool,
-
-  /**
-  * Выравнивает элементы в строку. Не работает с `children`
-  */
-  inline: PropTypes.bool,
-
-  /**
-  * Может быть использовано, если не передан параметр `children`
-  *
-  * Массив параметров радиокнопок. Может быть типа `Array<Value>` или
-  * `Array<[Value, Data]>`, где тип `Value` — значение радиокнопки, а `Data`
-  * — значение которое будет использовано вторым параметром в `renderItem`.
-  * Если тип `items: Array<Value>`, то он будет приведен к типу
-  * `Array<[Value, Value]>`
-  */
-  items: PropTypes.any,
-
-  /**
-  * Аттрибут name для вложенных радиокнопок. Если не указан, то сгенерируется
-  * случайное имя по алгоритму
-  * [uuid v1](https://github.com/kelektiv/node-uuid#version-1)
-  */
-  name: PropTypes.string,
-
-  /**
-  * Метод отрисовки контента радиокнопки. Не работает с `children`.
-  *
-  * Принимает два аргумента: `(value: Value, data: Data) => React.Node`
-  */
-  renderItem: PropTypes.func,
-
-  /**
-  * Значение радиогруппы. Должно быть одним из значений радиокнопок.
-  * Если не указано, то компонент будет работать, как неконтроллируемый
-  */
-  value: PropTypes.any,
-
-  /**
-  * Переводит все радиокнопки в состоянии предупреждения
-  */
-  warning: PropTypes.bool,
-
-  /**
-  * Ширина радиогруппы. Не работает с `children`
-  */
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-  /**
-  * Обработчик события при переключении радиокнопок.
-  * Имеет тип
-  * `(value: Value) => any`
-  */
-  onValueChange: PropTypes.func,
-  onBlur: PropTypes.func,
-  onMouseEnter: PropTypes.func,
-  onMouseLeave: PropTypes.func,
-  onMouseOver: PropTypes.func
-};
-RadioGroup.defaultProps = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'RadioGroup', _class2.defaultProps = {
   renderItem: renderItem
-};
-RadioGroup.Prevent = Prevent;
+}, _class2.Prevent = Prevent, _temp)) || _class;
 
 function renderItem(_value, data) {
   return data;