@salutejs/plasma-new-hope 0.318.0-canary.1888.14216501427.0 → 0.319.0-dev.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.
- package/cjs/components/Checkbox/Checkbox.js +2 -2
- package/cjs/components/Checkbox/Checkbox.js.map +1 -1
- package/emotion/cjs/components/Checkbox/Checkbox.js +2 -2
- package/emotion/cjs/components/Checkbox/Checkbox.template-doc.mdx +13 -0
- package/emotion/es/components/Checkbox/Checkbox.js +2 -2
- package/emotion/es/components/Checkbox/Checkbox.template-doc.mdx +13 -0
- package/es/components/Checkbox/Checkbox.js +2 -2
- package/es/components/Checkbox/Checkbox.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Checkbox/Checkbox.js +2 -2
- package/styled-components/cjs/components/Checkbox/Checkbox.template-doc.mdx +13 -0
- package/styled-components/es/components/Checkbox/Checkbox.js +2 -2
- package/styled-components/es/components/Checkbox/Checkbox.template-doc.mdx +13 -0
|
@@ -39,8 +39,8 @@ var checkboxRoot = function checkboxRoot(Root) {
|
|
|
39
39
|
var inputRef = React.useRef(null);
|
|
40
40
|
var forkRef = plasmaCore.useForkRef(inputRef, ref);
|
|
41
41
|
React.useEffect(function () {
|
|
42
|
-
if (inputRef.current
|
|
43
|
-
inputRef.current.indeterminate =
|
|
42
|
+
if (inputRef.current) {
|
|
43
|
+
inputRef.current.indeterminate = Boolean(indeterminate);
|
|
44
44
|
}
|
|
45
45
|
}, [inputRef, indeterminate]);
|
|
46
46
|
var uniqId = plasmaCore.safeUseId();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useMemo, useRef } from 'react';\nimport { safeUseId, useForkRef, extractTextFrom } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../engines/types';\nimport { cx } from '../../utils';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as focusedCSS } from './variations/_focused/base';\nimport { Done, Indeterminate } from './IconsSvg';\nimport {\n StyledContent,\n StyledContentWrapper,\n StyledDescription,\n StyledInput,\n StyledLabel,\n StyledTrigger,\n base,\n StyledTriggerWrapper,\n} from './Checkbox.styles';\nimport type { CheckboxProps } from './Checkbox.types';\nimport { classes } from './Checkbox.tokens';\n\nexport const checkboxRoot = (Root: RootProps<HTMLInputElement, CheckboxProps>) =>\n forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {\n const {\n size,\n view,\n focused,\n disabled,\n id,\n label,\n description,\n indeterminate,\n style,\n className,\n singleLine = false,\n 'aria-label': ariaLabelExternal,\n ...rest\n } = props;\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n const forkRef = useForkRef(inputRef, ref);\n\n useEffect(() => {\n if (inputRef.current
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useMemo, useRef } from 'react';\nimport { safeUseId, useForkRef, extractTextFrom } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../engines/types';\nimport { cx } from '../../utils';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as focusedCSS } from './variations/_focused/base';\nimport { Done, Indeterminate } from './IconsSvg';\nimport {\n StyledContent,\n StyledContentWrapper,\n StyledDescription,\n StyledInput,\n StyledLabel,\n StyledTrigger,\n base,\n StyledTriggerWrapper,\n} from './Checkbox.styles';\nimport type { CheckboxProps } from './Checkbox.types';\nimport { classes } from './Checkbox.tokens';\n\nexport const checkboxRoot = (Root: RootProps<HTMLInputElement, CheckboxProps>) =>\n forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {\n const {\n size,\n view,\n focused,\n disabled,\n id,\n label,\n description,\n indeterminate,\n style,\n className,\n singleLine = false,\n 'aria-label': ariaLabelExternal,\n ...rest\n } = props;\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n const forkRef = useForkRef(inputRef, ref);\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = Boolean(indeterminate);\n }\n }, [inputRef, indeterminate]);\n\n const uniqId = safeUseId();\n const uniqLabelId = `label-${uniqId}`;\n const uniqDescriptionId = `description-${uniqId}`;\n const checkboxId = id || `input-${uniqId}`;\n\n const ariaLabel = useMemo(() => ariaLabelExternal || extractTextFrom(label), [ariaLabelExternal, label]);\n const isLabelAriaHidden = typeof label === 'string';\n const canFocused = focused ? 0 : -1;\n const hasContent = label || description;\n const singleLineClass = singleLine ? classes.singleLine : undefined;\n const onlyDescriptionClass = !label && description ? classes.onlyDescription : undefined;\n\n return (\n <Root\n view={view}\n size={size}\n disabled={disabled}\n focused={focused}\n style={style}\n className={className}\n tabIndex={-1}\n >\n <StyledInput\n {...rest}\n id={checkboxId}\n ref={forkRef}\n type=\"checkbox\"\n disabled={disabled}\n aria-label={ariaLabel}\n aria-describedby={uniqDescriptionId}\n tabIndex={canFocused}\n />\n <StyledContentWrapper htmlFor={checkboxId} className={singleLineClass}>\n <StyledTriggerWrapper>\n <StyledTrigger className={classes.checkboxTrigger}>\n {indeterminate ? <Indeterminate /> : <Done />}\n </StyledTrigger>\n </StyledTriggerWrapper>\n {hasContent && (\n <StyledContent className={singleLineClass}>\n {label && (\n <StyledLabel\n className={singleLineClass}\n id={uniqLabelId}\n aria-hidden={isLabelAriaHidden}\n >\n {label}\n </StyledLabel>\n )}\n {description && (\n <StyledDescription\n className={cx(singleLineClass, onlyDescriptionClass)}\n id={uniqDescriptionId}\n >\n {description}\n </StyledDescription>\n )}\n </StyledContent>\n )}\n </StyledContentWrapper>\n </Root>\n );\n });\n\nexport const checkboxConfig = {\n name: 'Checkbox',\n tag: 'div',\n layout: checkboxRoot,\n base,\n variations: {\n size: {\n css: sizeCSS,\n },\n view: {\n css: viewCSS,\n },\n disabled: {\n css: disabledCSS,\n },\n focused: {\n css: focusedCSS,\n },\n },\n defaults: {\n size: 'm',\n view: 'accent',\n },\n};\n"],"names":["checkboxRoot","Root","forwardRef","props","ref","size","view","focused","disabled","id","label","description","indeterminate","style","className","_props$singleLine","singleLine","ariaLabelExternal","rest","_objectWithoutProperties","_excluded","inputRef","useRef","forkRef","useForkRef","useEffect","current","Boolean","uniqId","safeUseId","uniqLabelId","concat","uniqDescriptionId","checkboxId","ariaLabel","useMemo","extractTextFrom","isLabelAriaHidden","canFocused","hasContent","singleLineClass","classes","undefined","onlyDescriptionClass","onlyDescription","React","createElement","tabIndex","StyledInput","_extends","type","StyledContentWrapper","htmlFor","StyledTriggerWrapper","StyledTrigger","checkboxTrigger","_Indeterminate","Indeterminate","_Done","Done","StyledContent","StyledLabel","StyledDescription","cx","checkboxConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","focusedCSS","defaults"],"mappings":"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"}
|
|
@@ -41,8 +41,8 @@ var checkboxRoot = exports.checkboxRoot = function checkboxRoot(Root) {
|
|
|
41
41
|
var inputRef = (0, _react.useRef)(null);
|
|
42
42
|
var forkRef = (0, _plasmaCore.useForkRef)(inputRef, ref);
|
|
43
43
|
(0, _react.useEffect)(function () {
|
|
44
|
-
if (inputRef.current
|
|
45
|
-
inputRef.current.indeterminate =
|
|
44
|
+
if (inputRef.current) {
|
|
45
|
+
inputRef.current.indeterminate = Boolean(indeterminate);
|
|
46
46
|
}
|
|
47
47
|
}, [inputRef, indeterminate]);
|
|
48
48
|
var uniqId = (0, _plasmaCore.safeUseId)();
|
|
@@ -48,3 +48,16 @@ export function App() {
|
|
|
48
48
|
);
|
|
49
49
|
}
|
|
50
50
|
```
|
|
51
|
+
|
|
52
|
+
Состояние `indeterminate` имеет приоритет и не зависит от свойства `checked`
|
|
53
|
+
|
|
54
|
+
```tsx live
|
|
55
|
+
import React from 'react';
|
|
56
|
+
import { Checkbox } from '@salutejs/{{ package }}';
|
|
57
|
+
|
|
58
|
+
export function App() {
|
|
59
|
+
return (
|
|
60
|
+
<Checkbox label="Чекбокс" description="Описание" defaultChecked indeterminate checked={false} />
|
|
61
|
+
);
|
|
62
|
+
}
|
|
63
|
+
```
|
|
@@ -32,8 +32,8 @@ export var checkboxRoot = function checkboxRoot(Root) {
|
|
|
32
32
|
var inputRef = useRef(null);
|
|
33
33
|
var forkRef = useForkRef(inputRef, ref);
|
|
34
34
|
useEffect(function () {
|
|
35
|
-
if (inputRef.current
|
|
36
|
-
inputRef.current.indeterminate =
|
|
35
|
+
if (inputRef.current) {
|
|
36
|
+
inputRef.current.indeterminate = Boolean(indeterminate);
|
|
37
37
|
}
|
|
38
38
|
}, [inputRef, indeterminate]);
|
|
39
39
|
var uniqId = safeUseId();
|
|
@@ -48,3 +48,16 @@ export function App() {
|
|
|
48
48
|
);
|
|
49
49
|
}
|
|
50
50
|
```
|
|
51
|
+
|
|
52
|
+
Состояние `indeterminate` имеет приоритет и не зависит от свойства `checked`
|
|
53
|
+
|
|
54
|
+
```tsx live
|
|
55
|
+
import React from 'react';
|
|
56
|
+
import { Checkbox } from '@salutejs/{{ package }}';
|
|
57
|
+
|
|
58
|
+
export function App() {
|
|
59
|
+
return (
|
|
60
|
+
<Checkbox label="Чекбокс" description="Описание" defaultChecked indeterminate checked={false} />
|
|
61
|
+
);
|
|
62
|
+
}
|
|
63
|
+
```
|
|
@@ -31,8 +31,8 @@ var checkboxRoot = function checkboxRoot(Root) {
|
|
|
31
31
|
var inputRef = useRef(null);
|
|
32
32
|
var forkRef = useForkRef(inputRef, ref);
|
|
33
33
|
useEffect(function () {
|
|
34
|
-
if (inputRef.current
|
|
35
|
-
inputRef.current.indeterminate =
|
|
34
|
+
if (inputRef.current) {
|
|
35
|
+
inputRef.current.indeterminate = Boolean(indeterminate);
|
|
36
36
|
}
|
|
37
37
|
}, [inputRef, indeterminate]);
|
|
38
38
|
var uniqId = safeUseId();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useMemo, useRef } from 'react';\nimport { safeUseId, useForkRef, extractTextFrom } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../engines/types';\nimport { cx } from '../../utils';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as focusedCSS } from './variations/_focused/base';\nimport { Done, Indeterminate } from './IconsSvg';\nimport {\n StyledContent,\n StyledContentWrapper,\n StyledDescription,\n StyledInput,\n StyledLabel,\n StyledTrigger,\n base,\n StyledTriggerWrapper,\n} from './Checkbox.styles';\nimport type { CheckboxProps } from './Checkbox.types';\nimport { classes } from './Checkbox.tokens';\n\nexport const checkboxRoot = (Root: RootProps<HTMLInputElement, CheckboxProps>) =>\n forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {\n const {\n size,\n view,\n focused,\n disabled,\n id,\n label,\n description,\n indeterminate,\n style,\n className,\n singleLine = false,\n 'aria-label': ariaLabelExternal,\n ...rest\n } = props;\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n const forkRef = useForkRef(inputRef, ref);\n\n useEffect(() => {\n if (inputRef.current
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useMemo, useRef } from 'react';\nimport { safeUseId, useForkRef, extractTextFrom } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../engines/types';\nimport { cx } from '../../utils';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as focusedCSS } from './variations/_focused/base';\nimport { Done, Indeterminate } from './IconsSvg';\nimport {\n StyledContent,\n StyledContentWrapper,\n StyledDescription,\n StyledInput,\n StyledLabel,\n StyledTrigger,\n base,\n StyledTriggerWrapper,\n} from './Checkbox.styles';\nimport type { CheckboxProps } from './Checkbox.types';\nimport { classes } from './Checkbox.tokens';\n\nexport const checkboxRoot = (Root: RootProps<HTMLInputElement, CheckboxProps>) =>\n forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {\n const {\n size,\n view,\n focused,\n disabled,\n id,\n label,\n description,\n indeterminate,\n style,\n className,\n singleLine = false,\n 'aria-label': ariaLabelExternal,\n ...rest\n } = props;\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n const forkRef = useForkRef(inputRef, ref);\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = Boolean(indeterminate);\n }\n }, [inputRef, indeterminate]);\n\n const uniqId = safeUseId();\n const uniqLabelId = `label-${uniqId}`;\n const uniqDescriptionId = `description-${uniqId}`;\n const checkboxId = id || `input-${uniqId}`;\n\n const ariaLabel = useMemo(() => ariaLabelExternal || extractTextFrom(label), [ariaLabelExternal, label]);\n const isLabelAriaHidden = typeof label === 'string';\n const canFocused = focused ? 0 : -1;\n const hasContent = label || description;\n const singleLineClass = singleLine ? classes.singleLine : undefined;\n const onlyDescriptionClass = !label && description ? classes.onlyDescription : undefined;\n\n return (\n <Root\n view={view}\n size={size}\n disabled={disabled}\n focused={focused}\n style={style}\n className={className}\n tabIndex={-1}\n >\n <StyledInput\n {...rest}\n id={checkboxId}\n ref={forkRef}\n type=\"checkbox\"\n disabled={disabled}\n aria-label={ariaLabel}\n aria-describedby={uniqDescriptionId}\n tabIndex={canFocused}\n />\n <StyledContentWrapper htmlFor={checkboxId} className={singleLineClass}>\n <StyledTriggerWrapper>\n <StyledTrigger className={classes.checkboxTrigger}>\n {indeterminate ? <Indeterminate /> : <Done />}\n </StyledTrigger>\n </StyledTriggerWrapper>\n {hasContent && (\n <StyledContent className={singleLineClass}>\n {label && (\n <StyledLabel\n className={singleLineClass}\n id={uniqLabelId}\n aria-hidden={isLabelAriaHidden}\n >\n {label}\n </StyledLabel>\n )}\n {description && (\n <StyledDescription\n className={cx(singleLineClass, onlyDescriptionClass)}\n id={uniqDescriptionId}\n >\n {description}\n </StyledDescription>\n )}\n </StyledContent>\n )}\n </StyledContentWrapper>\n </Root>\n );\n });\n\nexport const checkboxConfig = {\n name: 'Checkbox',\n tag: 'div',\n layout: checkboxRoot,\n base,\n variations: {\n size: {\n css: sizeCSS,\n },\n view: {\n css: viewCSS,\n },\n disabled: {\n css: disabledCSS,\n },\n focused: {\n css: focusedCSS,\n },\n },\n defaults: {\n size: 'm',\n view: 'accent',\n },\n};\n"],"names":["checkboxRoot","Root","forwardRef","props","ref","size","view","focused","disabled","id","label","description","indeterminate","style","className","_props$singleLine","singleLine","ariaLabelExternal","rest","_objectWithoutProperties","_excluded","inputRef","useRef","forkRef","useForkRef","useEffect","current","Boolean","uniqId","safeUseId","uniqLabelId","concat","uniqDescriptionId","checkboxId","ariaLabel","useMemo","extractTextFrom","isLabelAriaHidden","canFocused","hasContent","singleLineClass","classes","undefined","onlyDescriptionClass","onlyDescription","React","createElement","tabIndex","StyledInput","_extends","type","StyledContentWrapper","htmlFor","StyledTriggerWrapper","StyledTrigger","checkboxTrigger","_Indeterminate","Indeterminate","_Done","Done","StyledContent","StyledLabel","StyledDescription","cx","checkboxConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","focusedCSS","defaults"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.319.0-dev.0",
|
|
4
4
|
"description": "Salute Design System blueprint",
|
|
5
5
|
"main": "cjs/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -135,5 +135,5 @@
|
|
|
135
135
|
"sideEffects": [
|
|
136
136
|
"*.css"
|
|
137
137
|
],
|
|
138
|
-
"gitHead": "
|
|
138
|
+
"gitHead": "10ac14d10727f39a7fb91ddba4aca0ae1378d6ab"
|
|
139
139
|
}
|
|
@@ -41,8 +41,8 @@ var checkboxRoot = exports.checkboxRoot = function checkboxRoot(Root) {
|
|
|
41
41
|
var inputRef = (0, _react.useRef)(null);
|
|
42
42
|
var forkRef = (0, _plasmaCore.useForkRef)(inputRef, ref);
|
|
43
43
|
(0, _react.useEffect)(function () {
|
|
44
|
-
if (inputRef.current
|
|
45
|
-
inputRef.current.indeterminate =
|
|
44
|
+
if (inputRef.current) {
|
|
45
|
+
inputRef.current.indeterminate = Boolean(indeterminate);
|
|
46
46
|
}
|
|
47
47
|
}, [inputRef, indeterminate]);
|
|
48
48
|
var uniqId = (0, _plasmaCore.safeUseId)();
|
|
@@ -48,3 +48,16 @@ export function App() {
|
|
|
48
48
|
);
|
|
49
49
|
}
|
|
50
50
|
```
|
|
51
|
+
|
|
52
|
+
Состояние `indeterminate` имеет приоритет и не зависит от свойства `checked`
|
|
53
|
+
|
|
54
|
+
```tsx live
|
|
55
|
+
import React from 'react';
|
|
56
|
+
import { Checkbox } from '@salutejs/{{ package }}';
|
|
57
|
+
|
|
58
|
+
export function App() {
|
|
59
|
+
return (
|
|
60
|
+
<Checkbox label="Чекбокс" description="Описание" defaultChecked indeterminate checked={false} />
|
|
61
|
+
);
|
|
62
|
+
}
|
|
63
|
+
```
|
|
@@ -32,8 +32,8 @@ export var checkboxRoot = function checkboxRoot(Root) {
|
|
|
32
32
|
var inputRef = useRef(null);
|
|
33
33
|
var forkRef = useForkRef(inputRef, ref);
|
|
34
34
|
useEffect(function () {
|
|
35
|
-
if (inputRef.current
|
|
36
|
-
inputRef.current.indeterminate =
|
|
35
|
+
if (inputRef.current) {
|
|
36
|
+
inputRef.current.indeterminate = Boolean(indeterminate);
|
|
37
37
|
}
|
|
38
38
|
}, [inputRef, indeterminate]);
|
|
39
39
|
var uniqId = safeUseId();
|
|
@@ -48,3 +48,16 @@ export function App() {
|
|
|
48
48
|
);
|
|
49
49
|
}
|
|
50
50
|
```
|
|
51
|
+
|
|
52
|
+
Состояние `indeterminate` имеет приоритет и не зависит от свойства `checked`
|
|
53
|
+
|
|
54
|
+
```tsx live
|
|
55
|
+
import React from 'react';
|
|
56
|
+
import { Checkbox } from '@salutejs/{{ package }}';
|
|
57
|
+
|
|
58
|
+
export function App() {
|
|
59
|
+
return (
|
|
60
|
+
<Checkbox label="Чекбокс" description="Описание" defaultChecked indeterminate checked={false} />
|
|
61
|
+
);
|
|
62
|
+
}
|
|
63
|
+
```
|