@skbkontur/react-ui 0.0.0-bcbd5e6112 → 0.0.0-c13bb5f4ca

package/cjs/components/Checkbox/Checkbox.md

@@ -0,0 +1,171 @@
+### Базовый пример чекбокса
+
+```jsx harmony
+const [checked, setChecked] = React.useState(false);
+
+<Checkbox checked={checked} onValueChange={setChecked}>
+  Обычный чекбокс
+</Checkbox>;
+```
+
+### Cостояния
+
+```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>
+```
+
+### Размер
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped vertical>
+  <Checkbox size="small" checked>
+    Маленький
+  </Checkbox>
+  <Checkbox size="medium" checked>
+    Средний
+  </Checkbox>
+  <Checkbox size="large" checked>
+    Большой
+  </Checkbox>
+</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#indeterminate_state_checkboxes)) из 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>
+```
+
+### Пример использования неопределённого состояния чекбокса
+
+```jsx harmony
+const [checkedSiblings, setCheckedSiblings] = React.useState([]);
+const siblingCheckboxes = [1, 2];
+
+let parentCheckboxRef;
+
+React.useEffect(() => {
+  if (checkedSiblings.length === 0 || checkedSiblings.length === siblingCheckboxes.length) {
+    parentCheckboxRef.resetIndeterminate();
+  } else if (checkedSiblings.length !== 0) {
+    parentCheckboxRef.setIndeterminate();
+  }
+}, [JSON.stringify(checkedSiblings)]);
+
+<>
+  <Checkbox checked={checkedSiblings.length === siblingCheckboxes.length} ref={(el) => (parentCheckboxRef = el)}>
+    Родитель
+  </Checkbox>
+  <div style={{ display: 'flex', flexDirection: 'column', marginLeft: '20px' }}>
+    {siblingCheckboxes.map((id) => {
+      return (
+        <Checkbox
+          key={id}
+          checked={checkedSiblings.includes(id)}
+          onValueChange={() => {
+            const siblingIndex = checkedSiblings.indexOf(id);
+
+            if (siblingIndex === -1) {
+              setCheckedSiblings((prev) => [...prev, id]);
+            } else {
+              setCheckedSiblings((prev) =>
+                prev.filter((siblingId) => {
+                  return siblingId !== id;
+                }),
+              );
+            }
+          }}
+        >
+          Ребёнок ({id})
+        </Checkbox>
+      );
+    })}
+  </div>
+</>
+```

package/cjs/components/Checkbox/Checkbox.mixins.d.ts

@@ -1,3 +1,2 @@
-import type { Emotion } from '@emotion/css/types/create-instance';
-export declare const checkboxSizeMixin: (fontSize: string, lineHeight: string, paddingY: string, checkboxBoxSize: string, emotion: Emotion) => string;
-export declare const boxWrapperSizeMixin: (labGrotesqueBaselineCompensation: string, fontSize: string, checkboxBoxSize: string, checkboxBoxOffsetY: string, emotion: Emotion) => string;
+export declare const checkboxSizeMixin: (fontSize: string, lineHeight: string, paddingY: string, checkboxBoxSize: string) => string;
+export declare const boxWrapperSizeMixin: (labGrotesqueBaselineCompensation: string, fontSize: string, checkboxBoxSize: string, checkboxBoxOffsetY: string) => string;

package/cjs/components/Checkbox/Checkbox.mixins.js

@@ -1,16 +1,9 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.checkboxSizeMixin = exports.boxWrapperSizeMixin = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
-
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.checkboxSizeMixin = exports.boxWrapperSizeMixin = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
 var _client = require("../../lib/client");
 var _getLabGrotesqueBaselineCompensation = require("../../lib/styles/getLabGrotesqueBaselineCompensation");var _templateObject, _templateObject2;
 
-var checkboxSizeMixin = exports.checkboxSizeMixin = function checkboxSizeMixin(
-fontSize,
-lineHeight,
-paddingY,
-checkboxBoxSize,
-emotion)
-{
-  return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n    line-height: ", ";\n    font-size: ", ";\n    padding: ", " 0;\n\n    &::before {\n      width: ", ";\n    }\n  "])),
+var checkboxSizeMixin = exports.checkboxSizeMixin = function checkboxSizeMixin(fontSize, lineHeight, paddingY, checkboxBoxSize) {
+  return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n    line-height: ", ";\n    font-size: ", ";\n    padding: ", " 0;\n\n    &::before {\n      width: ", ";\n    }\n  "])),
   lineHeight,
   fontSize,
   paddingY,
@@ -25,8 +18,7 @@ var boxWrapperSizeMixin = exports.boxWrapperSizeMixin = function boxWrapperSizeM
 labGrotesqueBaselineCompensation,
 fontSize,
 checkboxBoxSize,
-checkboxBoxOffsetY,
-emotion)
+checkboxBoxOffsetY)
 {
   var labGrotesqueCompenstation = parseInt(labGrotesqueBaselineCompensation);
   var boxFontSize = parseInt(fontSize);
@@ -37,7 +29,7 @@ emotion)
     _client.isFirefox
   );
 
-  return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n    width: ", ";\n    height: ", ";\n    margin-top: calc(", " + ", "px);\n  "])),
+  return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n    width: ", ";\n    height: ", ";\n    margin-top: calc(", " + ", "px);\n  "])),
   checkboxBoxSize,
   checkboxBoxSize,
   checkboxBoxOffsetY, baselineCompensation);

package/cjs/components/Checkbox/Checkbox.mixins.js.map

@@ -1 +1 @@
-{"version":3,"names":["_client","require","_getLabGrotesqueBaselineCompensation","_templateObject","_templateObject2","checkboxSizeMixin","exports","fontSize","lineHeight","paddingY","checkboxBoxSize","emotion","css","_taggedTemplateLiteralLoose2","default","boxWrapperSizeMixin","labGrotesqueBaselineCompensation","checkboxBoxOffsetY","labGrotesqueCompenstation","parseInt","boxFontSize","baselineCompensation","getLabGrotesqueBaselineCompensation","isChrome","isFirefox"],"sources":["Checkbox.mixins.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { isChrome, isFirefox } from '../../lib/client';\nimport { getLabGrotesqueBaselineCompensation } from '../../lib/styles/getLabGrotesqueBaselineCompensation';\n\nexport const checkboxSizeMixin = (\n  fontSize: string,\n  lineHeight: string,\n  paddingY: string,\n  checkboxBoxSize: string,\n  emotion: Emotion,\n) => {\n  return emotion.css`\n    line-height: ${lineHeight};\n    font-size: ${fontSize};\n    padding: ${paddingY} 0;\n\n    &::before {\n      width: ${checkboxBoxSize};\n    }\n  `;\n};\n\nexport const boxWrapperSizeMixin = (\n  labGrotesqueBaselineCompensation: string,\n  fontSize: string,\n  checkboxBoxSize: string,\n  checkboxBoxOffsetY: string,\n  emotion: Emotion,\n) => {\n  const labGrotesqueCompenstation = parseInt(labGrotesqueBaselineCompensation);\n  const boxFontSize = parseInt(fontSize);\n  const baselineCompensation = getLabGrotesqueBaselineCompensation(\n    boxFontSize,\n    labGrotesqueCompenstation,\n    isChrome,\n    isFirefox,\n  );\n\n  return emotion.css`\n    width: ${checkboxBoxSize};\n    height: ${checkboxBoxSize};\n    margin-top: calc(${checkboxBoxOffsetY} + ${baselineCompensation}px);\n  `;\n};\n"],"mappings":";;AAEA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,oCAAA,GAAAD,OAAA,yDAA2G,IAAAE,eAAA,EAAAC,gBAAA;;AAEpG,IAAMC,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,SAApBA,iBAAiBA;AAC5BE,QAAgB;AAChBC,UAAkB;AAClBC,QAAgB;AAChBC,eAAuB;AACvBC,OAAgB;AACb;EACH,OAAOA,OAAO,CAACC,GAAG,CAAAT,eAAA,KAAAA,eAAA,OAAAU,4BAAA,CAAAC,OAAA;EACDN,UAAU;EACZD,QAAQ;EACVE,QAAQ;;;EAGRC,eAAe;;;AAG9B,CAAC;;AAEM,IAAMK,mBAAmB,GAAAT,OAAA,CAAAS,mBAAA,GAAG,SAAtBA,mBAAmBA;AAC9BC,gCAAwC;AACxCT,QAAgB;AAChBG,eAAuB;AACvBO,kBAA0B;AAC1BN,OAAgB;AACb;EACH,IAAMO,yBAAyB,GAAGC,QAAQ,CAACH,gCAAgC,CAAC;EAC5E,IAAMI,WAAW,GAAGD,QAAQ,CAACZ,QAAQ,CAAC;EACtC,IAAMc,oBAAoB,GAAG,IAAAC,wEAAmC;IAC9DF,WAAW;IACXF,yBAAyB;IACzBK,gBAAQ;IACRC;EACF,CAAC;;EAED,OAAOb,OAAO,CAACC,GAAG,CAAAR,gBAAA,KAAAA,gBAAA,OAAAS,4BAAA,CAAAC,OAAA;EACPJ,eAAe;EACdA,eAAe;EACNO,kBAAkB,EAAMI,oBAAoB;;AAEnE,CAAC","ignoreList":[]}
+{"version":3,"names":["_Emotion","require","_client","_getLabGrotesqueBaselineCompensation","_templateObject","_templateObject2","checkboxSizeMixin","exports","fontSize","lineHeight","paddingY","checkboxBoxSize","css","_taggedTemplateLiteralLoose2","default","boxWrapperSizeMixin","labGrotesqueBaselineCompensation","checkboxBoxOffsetY","labGrotesqueCompenstation","parseInt","boxFontSize","baselineCompensation","getLabGrotesqueBaselineCompensation","isChrome","isFirefox"],"sources":["Checkbox.mixins.ts"],"sourcesContent":["import { css } from '../../lib/theming/Emotion';\nimport { isChrome, isFirefox } from '../../lib/client';\nimport { getLabGrotesqueBaselineCompensation } from '../../lib/styles/getLabGrotesqueBaselineCompensation';\n\nexport const checkboxSizeMixin = (fontSize: string, lineHeight: string, paddingY: string, checkboxBoxSize: string) => {\n  return css`\n    line-height: ${lineHeight};\n    font-size: ${fontSize};\n    padding: ${paddingY} 0;\n\n    &::before {\n      width: ${checkboxBoxSize};\n    }\n  `;\n};\n\nexport const boxWrapperSizeMixin = (\n  labGrotesqueBaselineCompensation: string,\n  fontSize: string,\n  checkboxBoxSize: string,\n  checkboxBoxOffsetY: string,\n) => {\n  const labGrotesqueCompenstation = parseInt(labGrotesqueBaselineCompensation);\n  const boxFontSize = parseInt(fontSize);\n  const baselineCompensation = getLabGrotesqueBaselineCompensation(\n    boxFontSize,\n    labGrotesqueCompenstation,\n    isChrome,\n    isFirefox,\n  );\n\n  return css`\n    width: ${checkboxBoxSize};\n    height: ${checkboxBoxSize};\n    margin-top: calc(${checkboxBoxOffsetY} + ${baselineCompensation}px);\n  `;\n};\n"],"mappings":"6TAAA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,oCAAA,GAAAF,OAAA,yDAA2G,IAAAG,eAAA,EAAAC,gBAAA;;AAEpG,IAAMC,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,SAApBA,iBAAiBA,CAAIE,QAAgB,EAAEC,UAAkB,EAAEC,QAAgB,EAAEC,eAAuB,EAAK;EACpH,WAAOC,YAAG,EAAAR,eAAA,KAAAA,eAAA,OAAAS,4BAAA,CAAAC,OAAA;EACOL,UAAU;EACZD,QAAQ;EACVE,QAAQ;;;EAGRC,eAAe;;;AAG9B,CAAC;;AAEM,IAAMI,mBAAmB,GAAAR,OAAA,CAAAQ,mBAAA,GAAG,SAAtBA,mBAAmBA;AAC9BC,gCAAwC;AACxCR,QAAgB;AAChBG,eAAuB;AACvBM,kBAA0B;AACvB;EACH,IAAMC,yBAAyB,GAAGC,QAAQ,CAACH,gCAAgC,CAAC;EAC5E,IAAMI,WAAW,GAAGD,QAAQ,CAACX,QAAQ,CAAC;EACtC,IAAMa,oBAAoB,GAAG,IAAAC,wEAAmC;IAC9DF,WAAW;IACXF,yBAAyB;IACzBK,gBAAQ;IACRC;EACF,CAAC;;EAED,WAAOZ,YAAG,EAAAP,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;EACCH,eAAe;EACdA,eAAe;EACNM,kBAAkB,EAAMI,oBAAoB;;AAEnE,CAAC","ignoreList":[]}

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

@@ -1,9 +1,8 @@
-import type { Emotion } from '@emotion/css/create-instance';
 import type { Theme } from '../../lib/theming/Theme';
 export declare const globalClasses: {
     box: string;
 };
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     root(t: Theme): string;
     rootSmall(t: Theme): string;
     rootMedium(t: Theme): string;