@salutejs/plasma-new-hope 0.265.0-dev.0 → 0.266.1-canary.1777.13368235255.0

package/emotion/es/examples/plasma_web/components/Checkbox/Checkbox.stories.tsx

@@ -3,12 +3,9 @@ import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import { checkboxConfig } from '../../../../components/Checkbox';
-import { mergeConfig } from '../../../../engines';
-import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { WithTheme } from '../../../_helpers';
 import { Link } from '../Link/Link';
 
-import { config } from './Checkbox.config';
 import { Checkbox } from './Checkbox';
 
 const onChange = action('onChange');
@@ -19,7 +16,20 @@ const meta: Meta<typeof Checkbox> = {
     title: 'web/Data Entry/Checkbox',
     decorators: [WithTheme],
     component: Checkbox,
-    argTypes: argTypesFromConfig(mergeConfig(checkboxConfig, config)),
+    argTypes: {
+        view: {
+            options: ['accent'],
+            control: {
+                type: 'radio',
+            },
+        },
+        size: {
+            options: ['m', 's'],
+            control: {
+                type: 'radio',
+            },
+        },
+    },
     args: {
         view: 'accent',
         size: 'm',

package/es/components/Combobox/ComboboxNew/ui/SelectNative/SelectNative.js

@@ -3,6 +3,7 @@ import { useForkRef } from '@salutejs/plasma-core';
 import { SelectHidden } from './SelectNative.styles.js';
 import { createEvent } from '../../../../../utils/createEvent.js';
 
+var _option;
 var SelectNative = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var name = _ref.name,
     multiple = _ref.multiple,
@@ -36,13 +37,19 @@ var SelectNative = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onChange(event);
     }
   }, [values]);
+
+  //
+  // Пустой option нужен для нативного поведения. Он автоматически выбирает первый пункт,
+  // если нет изначального значения
+  //
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectHidden, {
     ref: forkRef,
     multiple: multiple,
     name: name,
     hidden: true,
     value: multiple ? values : values[0]
-  }, options.map(function (v) {
+  }, _option || (_option = /*#__PURE__*/React.createElement("option", null, " ")), options.map(function (v) {
     return /*#__PURE__*/React.createElement("option", {
       key: v,
       value: v

package/es/components/Combobox/ComboboxNew/ui/SelectNative/SelectNative.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectNative.js","sources":["../../../../../../src/components/Combobox/ComboboxNew/ui/SelectNative/SelectNative.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef, useLayoutEffect, useRef } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\n\nimport { createEvent } from '../../../../../utils';\nimport { ComboboxProps } from '../../Combobox.types';\nimport { ValueToItemMapType } from '../../hooks/getPathMaps';\n\nimport { SelectHidden } from './SelectNative.styles';\n\ntype Props = Pick<ComboboxProps, 'name' | 'value' | 'multiple'> & {\n    onChange: (value: ChangeEvent<HTMLSelectElement> | null) => void;\n    onSetValue: (value: string | string[]) => void;\n    items: ValueToItemMapType;\n};\n\nexport const SelectNative = forwardRef<HTMLInputElement, Props>(\n    ({ name, multiple, items, value, onChange, onSetValue }, ref) => {\n        const values = (multiple ? value : [value]) as string[];\n        const selectRef = useRef<HTMLSelectElement>(null);\n        const forkRef = useForkRef(selectRef, ref as any);\n        const options = Array.from(items.keys());\n\n        useLayoutEffect(() => {\n            if (selectRef.current && !multiple) {\n                const valueInit = selectRef.current.value;\n\n                if (valueInit) {\n                    onSetValue(valueInit);\n                }\n            }\n\n            if (selectRef.current && multiple) {\n                const valuesInit = Array.from(selectRef.current.selectedOptions).map((v) => v.value);\n                if (valuesInit.length !== 0) {\n                    onSetValue(valuesInit);\n                }\n            }\n        }, []);\n\n        useLayoutEffect(() => {\n            const event = createEvent(selectRef);\n            if (onChange) {\n                onChange(event);\n            }\n        }, [values]);\n\n        return (\n            <>\n                <SelectHidden\n                    ref={forkRef}\n                    multiple={multiple}\n                    name={name}\n                    hidden\n                    value={multiple ? values : values[0]}\n                >\n                    {options.map((v) => (\n                        <option key={v} value={v}>\n                            {v}\n                        </option>\n                    ))}\n                </SelectHidden>\n            </>\n        );\n    },\n);\n"],"names":["SelectNative","forwardRef","_ref","ref","name","multiple","items","value","onChange","onSetValue","values","selectRef","useRef","forkRef","useForkRef","options","Array","from","keys","useLayoutEffect","current","valueInit","valuesInit","selectedOptions","map","v","length","event","createEvent","React","createElement","Fragment","SelectHidden","hidden","key"],"mappings":";;;;;AAeO,IAAMA,YAAY,gBAAGC,UAAU,CAClC,UAAAC,IAAA,EAAyDC,GAAG,EAAK;AAAA,EAAA,IAA9DC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IAAEC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAEC,KAAK,GAAAJ,IAAA,CAALI,KAAK;IAAEC,KAAK,GAAAL,IAAA,CAALK,KAAK;IAAEC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;IAAEC,UAAU,GAAAP,IAAA,CAAVO,UAAU,CAAA;EACjD,IAAMC,MAAM,GAAIL,QAAQ,GAAGE,KAAK,GAAG,CAACA,KAAK,CAAc,CAAA;AACvD,EAAA,IAAMI,SAAS,GAAGC,MAAM,CAAoB,IAAI,CAAC,CAAA;AACjD,EAAA,IAAMC,OAAO,GAAGC,UAAU,CAACH,SAAS,EAAER,GAAU,CAAC,CAAA;EACjD,IAAMY,OAAO,GAAGC,KAAK,CAACC,IAAI,CAACX,KAAK,CAACY,IAAI,EAAE,CAAC,CAAA;AAExCC,EAAAA,eAAe,CAAC,YAAM;AAClB,IAAA,IAAIR,SAAS,CAACS,OAAO,IAAI,CAACf,QAAQ,EAAE;AAChC,MAAA,IAAMgB,SAAS,GAAGV,SAAS,CAACS,OAAO,CAACb,KAAK,CAAA;AAEzC,MAAA,IAAIc,SAAS,EAAE;QACXZ,UAAU,CAACY,SAAS,CAAC,CAAA;AACzB,OAAA;AACJ,KAAA;AAEA,IAAA,IAAIV,SAAS,CAACS,OAAO,IAAIf,QAAQ,EAAE;AAC/B,MAAA,IAAMiB,UAAU,GAAGN,KAAK,CAACC,IAAI,CAACN,SAAS,CAACS,OAAO,CAACG,eAAe,CAAC,CAACC,GAAG,CAAC,UAACC,CAAC,EAAA;QAAA,OAAKA,CAAC,CAAClB,KAAK,CAAA;OAAC,CAAA,CAAA;AACpF,MAAA,IAAIe,UAAU,CAACI,MAAM,KAAK,CAAC,EAAE;QACzBjB,UAAU,CAACa,UAAU,CAAC,CAAA;AAC1B,OAAA;AACJ,KAAA;GACH,EAAE,EAAE,CAAC,CAAA;AAENH,EAAAA,eAAe,CAAC,YAAM;AAClB,IAAA,IAAMQ,KAAK,GAAGC,WAAW,CAACjB,SAAS,CAAC,CAAA;AACpC,IAAA,IAAIH,QAAQ,EAAE;MACVA,QAAQ,CAACmB,KAAK,CAAC,CAAA;AACnB,KAAA;AACJ,GAAC,EAAE,CAACjB,MAAM,CAAC,CAAC,CAAA;AAEZ,EAAA,oBACImB,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAE,QAAA,EAAA,IAAA,eACIF,KAAA,CAAAC,aAAA,CAACE,YAAY,EAAA;AACT7B,IAAAA,GAAG,EAAEU,OAAQ;AACbR,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,IAAI,EAAEA,IAAK;IACX6B,MAAM,EAAA,IAAA;AACN1B,IAAAA,KAAK,EAAEF,QAAQ,GAAGK,MAAM,GAAGA,MAAM,CAAC,CAAC,CAAA;AAAE,GAAA,EAEpCK,OAAO,CAACS,GAAG,CAAC,UAACC,CAAC,EAAA;IAAA,oBACXI,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AAAQI,MAAAA,GAAG,EAAET,CAAE;AAAClB,MAAAA,KAAK,EAAEkB,CAAAA;AAAE,KAAA,EACpBA,CACG,CAAC,CAAA;GACZ,CACS,CAChB,CAAC,CAAA;AAEX,CACJ;;;;"}
+{"version":3,"file":"SelectNative.js","sources":["../../../../../../src/components/Combobox/ComboboxNew/ui/SelectNative/SelectNative.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef, useLayoutEffect, useRef } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\n\nimport { createEvent } from '../../../../../utils';\nimport { ComboboxProps } from '../../Combobox.types';\nimport { ValueToItemMapType } from '../../hooks/getPathMaps';\n\nimport { SelectHidden } from './SelectNative.styles';\n\ntype Props = Pick<ComboboxProps, 'name' | 'value' | 'multiple'> & {\n    onChange: (value: ChangeEvent<HTMLSelectElement> | null) => void;\n    onSetValue: (value: string | string[]) => void;\n    items: ValueToItemMapType;\n};\n\nexport const SelectNative = forwardRef<HTMLInputElement, Props>(\n    ({ name, multiple, items, value, onChange, onSetValue }, ref) => {\n        const values = (multiple ? value : [value]) as string[];\n        const selectRef = useRef<HTMLSelectElement>(null);\n        const forkRef = useForkRef(selectRef, ref as any);\n        const options = Array.from(items.keys());\n\n        useLayoutEffect(() => {\n            if (selectRef.current && !multiple) {\n                const valueInit = selectRef.current.value;\n\n                if (valueInit) {\n                    onSetValue(valueInit);\n                }\n            }\n\n            if (selectRef.current && multiple) {\n                const valuesInit = Array.from(selectRef.current.selectedOptions).map((v) => v.value);\n                if (valuesInit.length !== 0) {\n                    onSetValue(valuesInit);\n                }\n            }\n        }, []);\n\n        useLayoutEffect(() => {\n            const event = createEvent(selectRef);\n            if (onChange) {\n                onChange(event);\n            }\n        }, [values]);\n\n        //\n        // Пустой option нужен для нативного поведения. Он автоматически выбирает первый пункт,\n        // если нет изначального значения\n        //\n\n        return (\n            <>\n                <SelectHidden\n                    ref={forkRef}\n                    multiple={multiple}\n                    name={name}\n                    hidden\n                    value={multiple ? values : values[0]}\n                >\n                    <option> </option>\n                    {options.map((v) => (\n                        <option key={v} value={v}>\n                            {v}\n                        </option>\n                    ))}\n                </SelectHidden>\n            </>\n        );\n    },\n);\n"],"names":["SelectNative","forwardRef","_ref","ref","name","multiple","items","value","onChange","onSetValue","values","selectRef","useRef","forkRef","useForkRef","options","Array","from","keys","useLayoutEffect","current","valueInit","valuesInit","selectedOptions","map","v","length","event","createEvent","React","createElement","Fragment","SelectHidden","hidden","_option","key"],"mappings":";;;;;;AAeO,IAAMA,YAAY,gBAAGC,UAAU,CAClC,UAAAC,IAAA,EAAyDC,GAAG,EAAK;AAAA,EAAA,IAA9DC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IAAEC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAEC,KAAK,GAAAJ,IAAA,CAALI,KAAK;IAAEC,KAAK,GAAAL,IAAA,CAALK,KAAK;IAAEC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;IAAEC,UAAU,GAAAP,IAAA,CAAVO,UAAU,CAAA;EACjD,IAAMC,MAAM,GAAIL,QAAQ,GAAGE,KAAK,GAAG,CAACA,KAAK,CAAc,CAAA;AACvD,EAAA,IAAMI,SAAS,GAAGC,MAAM,CAAoB,IAAI,CAAC,CAAA;AACjD,EAAA,IAAMC,OAAO,GAAGC,UAAU,CAACH,SAAS,EAAER,GAAU,CAAC,CAAA;EACjD,IAAMY,OAAO,GAAGC,KAAK,CAACC,IAAI,CAACX,KAAK,CAACY,IAAI,EAAE,CAAC,CAAA;AAExCC,EAAAA,eAAe,CAAC,YAAM;AAClB,IAAA,IAAIR,SAAS,CAACS,OAAO,IAAI,CAACf,QAAQ,EAAE;AAChC,MAAA,IAAMgB,SAAS,GAAGV,SAAS,CAACS,OAAO,CAACb,KAAK,CAAA;AAEzC,MAAA,IAAIc,SAAS,EAAE;QACXZ,UAAU,CAACY,SAAS,CAAC,CAAA;AACzB,OAAA;AACJ,KAAA;AAEA,IAAA,IAAIV,SAAS,CAACS,OAAO,IAAIf,QAAQ,EAAE;AAC/B,MAAA,IAAMiB,UAAU,GAAGN,KAAK,CAACC,IAAI,CAACN,SAAS,CAACS,OAAO,CAACG,eAAe,CAAC,CAACC,GAAG,CAAC,UAACC,CAAC,EAAA;QAAA,OAAKA,CAAC,CAAClB,KAAK,CAAA;OAAC,CAAA,CAAA;AACpF,MAAA,IAAIe,UAAU,CAACI,MAAM,KAAK,CAAC,EAAE;QACzBjB,UAAU,CAACa,UAAU,CAAC,CAAA;AAC1B,OAAA;AACJ,KAAA;GACH,EAAE,EAAE,CAAC,CAAA;AAENH,EAAAA,eAAe,CAAC,YAAM;AAClB,IAAA,IAAMQ,KAAK,GAAGC,WAAW,CAACjB,SAAS,CAAC,CAAA;AACpC,IAAA,IAAIH,QAAQ,EAAE;MACVA,QAAQ,CAACmB,KAAK,CAAC,CAAA;AACnB,KAAA;AACJ,GAAC,EAAE,CAACjB,MAAM,CAAC,CAAC,CAAA;;AAEZ;AACA;AACA;AACA;;AAEA,EAAA,oBACImB,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAE,QAAA,EAAA,IAAA,eACIF,KAAA,CAAAC,aAAA,CAACE,YAAY,EAAA;AACT7B,IAAAA,GAAG,EAAEU,OAAQ;AACbR,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,IAAI,EAAEA,IAAK;IACX6B,MAAM,EAAA,IAAA;AACN1B,IAAAA,KAAK,EAAEF,QAAQ,GAAGK,MAAM,GAAGA,MAAM,CAAC,CAAC,CAAA;AAAE,GAAA,EAAAwB,OAAA,KAAAA,OAAA,gBAErCL,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA,IAAA,EAAQ,GAAS,CAAC,GACjBf,OAAO,CAACS,GAAG,CAAC,UAACC,CAAC,EAAA;IAAA,oBACXI,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AAAQK,MAAAA,GAAG,EAAEV,CAAE;AAAClB,MAAAA,KAAK,EAAEkB,CAAAA;AAAE,KAAA,EACpBA,CACG,CAAC,CAAA;GACZ,CACS,CAChB,CAAC,CAAA;AAEX,CACJ;;;;"}

package/es/components/Select/ui/SelectNative/SelectNative.js

@@ -3,6 +3,7 @@ import { useForkRef } from '@salutejs/plasma-core';
 import { SelectHidden } from './SelectNative.styles.js';
 import { createEvent } from '../../../../utils/createEvent.js';
 
+var _option;
 var SelectNative = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var name = _ref.name,
     multiselect = _ref.multiselect,
@@ -36,13 +37,19 @@ var SelectNative = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onChange(event);
     }
   }, [values]);
+
+  //
+  // Пустой option нужен для нативного поведения. Он автоматически выбирает первый пункт,
+  // если нет изначального значения
+  //
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectHidden, {
     ref: forkRef,
     multiple: multiselect,
     name: name,
     hidden: true,
     value: multiselect ? values : values[0]
-  }, options.map(function (v) {
+  }, _option || (_option = /*#__PURE__*/React.createElement("option", null, " ")), options.map(function (v) {
     return /*#__PURE__*/React.createElement("option", {
       key: v,
       value: v

package/es/components/Select/ui/SelectNative/SelectNative.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectNative.js","sources":["../../../../../src/components/Select/ui/SelectNative/SelectNative.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef, useLayoutEffect, useRef } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\n\nimport { createEvent } from '../../../../utils';\nimport { SelectProps } from '../../Select.types';\nimport { ValueToItemMapType } from '../../hooks/usePathMaps';\n\nimport { SelectHidden } from './SelectNative.styles';\n\ntype Props = Pick<SelectProps, 'name' | 'multiselect'> & {\n    onChange: (newValue: ChangeEvent<HTMLSelectElement> | null) => void;\n    onSetValue: (value: string | string[]) => void;\n    items: ValueToItemMapType;\n    value: string | number | Array<string | number>;\n};\n\nexport const SelectNative = forwardRef<HTMLButtonElement, Props>(\n    ({ name, multiselect, items, value, onChange, onSetValue }, ref) => {\n        const values = (multiselect ? value : [value]) as string[];\n        const selectRef = useRef<HTMLSelectElement>(null);\n        const forkRef = useForkRef(selectRef, ref as any);\n        const options = Array.from(items.keys());\n\n        useLayoutEffect(() => {\n            if (selectRef.current && !multiselect) {\n                const valueInit = selectRef.current.value;\n\n                if (valueInit) {\n                    onSetValue(valueInit);\n                }\n            }\n\n            if (selectRef.current && multiselect) {\n                const valuesInit = Array.from(selectRef.current.selectedOptions).map((v) => v.value);\n                if (valuesInit.length !== 0) {\n                    onSetValue(valuesInit);\n                }\n            }\n        }, []);\n\n        useLayoutEffect(() => {\n            const event = createEvent(selectRef);\n            if (onChange) {\n                onChange(event);\n            }\n        }, [values]);\n\n        return (\n            <>\n                <SelectHidden\n                    ref={forkRef}\n                    multiple={multiselect}\n                    name={name}\n                    hidden\n                    value={multiselect ? values : values[0]}\n                >\n                    {options.map((v) => (\n                        <option key={v} value={v}>\n                            {v}\n                        </option>\n                    ))}\n                </SelectHidden>\n            </>\n        );\n    },\n);\n"],"names":["SelectNative","forwardRef","_ref","ref","name","multiselect","items","value","onChange","onSetValue","values","selectRef","useRef","forkRef","useForkRef","options","Array","from","keys","useLayoutEffect","current","valueInit","valuesInit","selectedOptions","map","v","length","event","createEvent","React","createElement","Fragment","SelectHidden","multiple","hidden","key"],"mappings":";;;;;AAgBO,IAAMA,YAAY,gBAAGC,UAAU,CAClC,UAAAC,IAAA,EAA4DC,GAAG,EAAK;AAAA,EAAA,IAAjEC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IAAEC,WAAW,GAAAH,IAAA,CAAXG,WAAW;IAAEC,KAAK,GAAAJ,IAAA,CAALI,KAAK;IAAEC,KAAK,GAAAL,IAAA,CAALK,KAAK;IAAEC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;IAAEC,UAAU,GAAAP,IAAA,CAAVO,UAAU,CAAA;EACpD,IAAMC,MAAM,GAAIL,WAAW,GAAGE,KAAK,GAAG,CAACA,KAAK,CAAc,CAAA;AAC1D,EAAA,IAAMI,SAAS,GAAGC,MAAM,CAAoB,IAAI,CAAC,CAAA;AACjD,EAAA,IAAMC,OAAO,GAAGC,UAAU,CAACH,SAAS,EAAER,GAAU,CAAC,CAAA;EACjD,IAAMY,OAAO,GAAGC,KAAK,CAACC,IAAI,CAACX,KAAK,CAACY,IAAI,EAAE,CAAC,CAAA;AAExCC,EAAAA,eAAe,CAAC,YAAM;AAClB,IAAA,IAAIR,SAAS,CAACS,OAAO,IAAI,CAACf,WAAW,EAAE;AACnC,MAAA,IAAMgB,SAAS,GAAGV,SAAS,CAACS,OAAO,CAACb,KAAK,CAAA;AAEzC,MAAA,IAAIc,SAAS,EAAE;QACXZ,UAAU,CAACY,SAAS,CAAC,CAAA;AACzB,OAAA;AACJ,KAAA;AAEA,IAAA,IAAIV,SAAS,CAACS,OAAO,IAAIf,WAAW,EAAE;AAClC,MAAA,IAAMiB,UAAU,GAAGN,KAAK,CAACC,IAAI,CAACN,SAAS,CAACS,OAAO,CAACG,eAAe,CAAC,CAACC,GAAG,CAAC,UAACC,CAAC,EAAA;QAAA,OAAKA,CAAC,CAAClB,KAAK,CAAA;OAAC,CAAA,CAAA;AACpF,MAAA,IAAIe,UAAU,CAACI,MAAM,KAAK,CAAC,EAAE;QACzBjB,UAAU,CAACa,UAAU,CAAC,CAAA;AAC1B,OAAA;AACJ,KAAA;GACH,EAAE,EAAE,CAAC,CAAA;AAENH,EAAAA,eAAe,CAAC,YAAM;AAClB,IAAA,IAAMQ,KAAK,GAAGC,WAAW,CAACjB,SAAS,CAAC,CAAA;AACpC,IAAA,IAAIH,QAAQ,EAAE;MACVA,QAAQ,CAACmB,KAAK,CAAC,CAAA;AACnB,KAAA;AACJ,GAAC,EAAE,CAACjB,MAAM,CAAC,CAAC,CAAA;AAEZ,EAAA,oBACImB,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAE,QAAA,EAAA,IAAA,eACIF,KAAA,CAAAC,aAAA,CAACE,YAAY,EAAA;AACT7B,IAAAA,GAAG,EAAEU,OAAQ;AACboB,IAAAA,QAAQ,EAAE5B,WAAY;AACtBD,IAAAA,IAAI,EAAEA,IAAK;IACX8B,MAAM,EAAA,IAAA;AACN3B,IAAAA,KAAK,EAAEF,WAAW,GAAGK,MAAM,GAAGA,MAAM,CAAC,CAAC,CAAA;AAAE,GAAA,EAEvCK,OAAO,CAACS,GAAG,CAAC,UAACC,CAAC,EAAA;IAAA,oBACXI,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AAAQK,MAAAA,GAAG,EAAEV,CAAE;AAAClB,MAAAA,KAAK,EAAEkB,CAAAA;AAAE,KAAA,EACpBA,CACG,CAAC,CAAA;GACZ,CACS,CAChB,CAAC,CAAA;AAEX,CACJ;;;;"}
+{"version":3,"file":"SelectNative.js","sources":["../../../../../src/components/Select/ui/SelectNative/SelectNative.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef, useLayoutEffect, useRef } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\n\nimport { createEvent } from '../../../../utils';\nimport { SelectProps } from '../../Select.types';\nimport { ValueToItemMapType } from '../../hooks/usePathMaps';\n\nimport { SelectHidden } from './SelectNative.styles';\n\ntype Props = Pick<SelectProps, 'name' | 'multiselect'> & {\n    onChange: (newValue: ChangeEvent<HTMLSelectElement> | null) => void;\n    onSetValue: (value: string | string[]) => void;\n    items: ValueToItemMapType;\n    value: string | number | Array<string | number>;\n};\n\nexport const SelectNative = forwardRef<HTMLButtonElement, Props>(\n    ({ name, multiselect, items, value, onChange, onSetValue }, ref) => {\n        const values = (multiselect ? value : [value]) as string[];\n        const selectRef = useRef<HTMLSelectElement>(null);\n        const forkRef = useForkRef(selectRef, ref as any);\n        const options = Array.from(items.keys());\n\n        useLayoutEffect(() => {\n            if (selectRef.current && !multiselect) {\n                const valueInit = selectRef.current.value;\n\n                if (valueInit) {\n                    onSetValue(valueInit);\n                }\n            }\n\n            if (selectRef.current && multiselect) {\n                const valuesInit = Array.from(selectRef.current.selectedOptions).map((v) => v.value);\n                if (valuesInit.length !== 0) {\n                    onSetValue(valuesInit);\n                }\n            }\n        }, []);\n\n        useLayoutEffect(() => {\n            const event = createEvent(selectRef);\n            if (onChange) {\n                onChange(event);\n            }\n        }, [values]);\n\n        //\n        // Пустой option нужен для нативного поведения. Он автоматически выбирает первый пункт,\n        // если нет изначального значения\n        //\n\n        return (\n            <>\n                <SelectHidden\n                    ref={forkRef}\n                    multiple={multiselect}\n                    name={name}\n                    hidden\n                    value={multiselect ? values : values[0]}\n                >\n                    <option> </option>\n                    {options.map((v) => (\n                        <option key={v} value={v}>\n                            {v}\n                        </option>\n                    ))}\n                </SelectHidden>\n            </>\n        );\n    },\n);\n"],"names":["SelectNative","forwardRef","_ref","ref","name","multiselect","items","value","onChange","onSetValue","values","selectRef","useRef","forkRef","useForkRef","options","Array","from","keys","useLayoutEffect","current","valueInit","valuesInit","selectedOptions","map","v","length","event","createEvent","React","createElement","Fragment","SelectHidden","multiple","hidden","_option","key"],"mappings":";;;;;;AAgBO,IAAMA,YAAY,gBAAGC,UAAU,CAClC,UAAAC,IAAA,EAA4DC,GAAG,EAAK;AAAA,EAAA,IAAjEC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IAAEC,WAAW,GAAAH,IAAA,CAAXG,WAAW;IAAEC,KAAK,GAAAJ,IAAA,CAALI,KAAK;IAAEC,KAAK,GAAAL,IAAA,CAALK,KAAK;IAAEC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;IAAEC,UAAU,GAAAP,IAAA,CAAVO,UAAU,CAAA;EACpD,IAAMC,MAAM,GAAIL,WAAW,GAAGE,KAAK,GAAG,CAACA,KAAK,CAAc,CAAA;AAC1D,EAAA,IAAMI,SAAS,GAAGC,MAAM,CAAoB,IAAI,CAAC,CAAA;AACjD,EAAA,IAAMC,OAAO,GAAGC,UAAU,CAACH,SAAS,EAAER,GAAU,CAAC,CAAA;EACjD,IAAMY,OAAO,GAAGC,KAAK,CAACC,IAAI,CAACX,KAAK,CAACY,IAAI,EAAE,CAAC,CAAA;AAExCC,EAAAA,eAAe,CAAC,YAAM;AAClB,IAAA,IAAIR,SAAS,CAACS,OAAO,IAAI,CAACf,WAAW,EAAE;AACnC,MAAA,IAAMgB,SAAS,GAAGV,SAAS,CAACS,OAAO,CAACb,KAAK,CAAA;AAEzC,MAAA,IAAIc,SAAS,EAAE;QACXZ,UAAU,CAACY,SAAS,CAAC,CAAA;AACzB,OAAA;AACJ,KAAA;AAEA,IAAA,IAAIV,SAAS,CAACS,OAAO,IAAIf,WAAW,EAAE;AAClC,MAAA,IAAMiB,UAAU,GAAGN,KAAK,CAACC,IAAI,CAACN,SAAS,CAACS,OAAO,CAACG,eAAe,CAAC,CAACC,GAAG,CAAC,UAACC,CAAC,EAAA;QAAA,OAAKA,CAAC,CAAClB,KAAK,CAAA;OAAC,CAAA,CAAA;AACpF,MAAA,IAAIe,UAAU,CAACI,MAAM,KAAK,CAAC,EAAE;QACzBjB,UAAU,CAACa,UAAU,CAAC,CAAA;AAC1B,OAAA;AACJ,KAAA;GACH,EAAE,EAAE,CAAC,CAAA;AAENH,EAAAA,eAAe,CAAC,YAAM;AAClB,IAAA,IAAMQ,KAAK,GAAGC,WAAW,CAACjB,SAAS,CAAC,CAAA;AACpC,IAAA,IAAIH,QAAQ,EAAE;MACVA,QAAQ,CAACmB,KAAK,CAAC,CAAA;AACnB,KAAA;AACJ,GAAC,EAAE,CAACjB,MAAM,CAAC,CAAC,CAAA;;AAEZ;AACA;AACA;AACA;;AAEA,EAAA,oBACImB,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAE,QAAA,EAAA,IAAA,eACIF,KAAA,CAAAC,aAAA,CAACE,YAAY,EAAA;AACT7B,IAAAA,GAAG,EAAEU,OAAQ;AACboB,IAAAA,QAAQ,EAAE5B,WAAY;AACtBD,IAAAA,IAAI,EAAEA,IAAK;IACX8B,MAAM,EAAA,IAAA;AACN3B,IAAAA,KAAK,EAAEF,WAAW,GAAGK,MAAM,GAAGA,MAAM,CAAC,CAAC,CAAA;AAAE,GAAA,EAAAyB,OAAA,KAAAA,OAAA,gBAExCN,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA,IAAA,EAAQ,GAAS,CAAC,GACjBf,OAAO,CAACS,GAAG,CAAC,UAACC,CAAC,EAAA;IAAA,oBACXI,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AAAQM,MAAAA,GAAG,EAAEX,CAAE;AAAClB,MAAAA,KAAK,EAAEkB,CAAAA;AAAE,KAAA,EACpBA,CACG,CAAC,CAAA;GACZ,CACS,CAChB,CAAC,CAAA;AAEX,CACJ;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.265.0-dev.0",
+  "version": "0.266.1-canary.1777.13368235255.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -132,5 +132,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "fc9dea07e7ae09381ffbf25bd78bea778755efe7"
+  "gitHead": "e4ebb9c987545695c77a484a34a34c8484c32a35"
 }

package/styled-components/cjs/components/Checkbox/Checkbox.template-doc.mdx

@@ -9,6 +9,12 @@ import { PropsTable, Description } from '@site/src/components';
 <Description name="Checkbox" />
 <PropsTable name="Checkbox" exclude={['css', 'focused']} />
 
+:::caution Устаревшие значения для свойства view
+Актуальным значением для свойства `view` - является `accent`. 
+
+Все остальные значения `deprecated` и будут удалены в ближайшее время! 
+:::
+
 ## Использование
 Компонент `Checkbox` может содержать лейбл и описание.
 

package/styled-components/cjs/components/Combobox/ComboboxNew/ui/SelectNative/SelectNative.js

@@ -9,6 +9,7 @@ var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react")
 var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
 var _utils = /*#__PURE__*/require("../../../../../utils");
 var _SelectNative = /*#__PURE__*/require("./SelectNative.styles");
+var _option;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var SelectNative = exports.SelectNative = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
@@ -44,13 +45,19 @@ var SelectNative = exports.SelectNative = /*#__PURE__*/(0, _react.forwardRef)(fu
       onChange(event);
     }
   }, [values]);
+
+  //
+  // Пустой option нужен для нативного поведения. Он автоматически выбирает первый пункт,
+  // если нет изначального значения
+  //
+
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_SelectNative.SelectHidden, {
     ref: forkRef,
     multiple: multiple,
     name: name,
     hidden: true,
     value: multiple ? values : values[0]
-  }, options.map(function (v) {
+  }, _option || (_option = /*#__PURE__*/_react["default"].createElement("option", null, " ")), options.map(function (v) {
     return /*#__PURE__*/_react["default"].createElement("option", {
       key: v,
       value: v

package/styled-components/cjs/components/Select/ui/SelectNative/SelectNative.js

@@ -9,6 +9,7 @@ var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react")
 var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
 var _utils = /*#__PURE__*/require("../../../../utils");
 var _SelectNative = /*#__PURE__*/require("./SelectNative.styles");
+var _option;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var SelectNative = exports.SelectNative = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
@@ -44,13 +45,19 @@ var SelectNative = exports.SelectNative = /*#__PURE__*/(0, _react.forwardRef)(fu
       onChange(event);
     }
   }, [values]);
+
+  //
+  // Пустой option нужен для нативного поведения. Он автоматически выбирает первый пункт,
+  // если нет изначального значения
+  //
+
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_SelectNative.SelectHidden, {
     ref: forkRef,
     multiple: multiselect,
     name: name,
     hidden: true,
     value: multiselect ? values : values[0]
-  }, options.map(function (v) {
+  }, _option || (_option = /*#__PURE__*/_react["default"].createElement("option", null, " ")), options.map(function (v) {
     return /*#__PURE__*/_react["default"].createElement("option", {
       key: v,
       value: v

package/styled-components/cjs/examples/plasma_b2c/components/Checkbox/Checkbox.config.js

@@ -22,13 +22,20 @@ var config = exports.config = {
      * Вид контрола.
      */
     view: {
+      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
+      // deprecated
       "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
+      // deprecated
       secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
+      // deprecated
       tertiary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
+      // deprecated
       paragraph: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
-      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
+      // deprecated
       positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
+      // deprecated
       warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
+      // deprecated
       negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor)
     },
     disabled: {

package/styled-components/cjs/examples/plasma_b2c/components/Checkbox/Checkbox.stories.tsx

@@ -3,12 +3,9 @@ import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import { checkboxConfig } from '../../../../components/Checkbox';
-import { mergeConfig } from '../../../../engines';
-import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { WithTheme } from '../../../_helpers';
 import { Link } from '../Link/Link';
 
-import { config } from './Checkbox.config';
 import { Checkbox } from './Checkbox';
 
 const onChange = action('onChange');
@@ -19,7 +16,20 @@ const meta: Meta<typeof Checkbox> = {
     title: 'b2c/Data Entry/Checkbox',
     decorators: [WithTheme],
     component: Checkbox,
-    argTypes: argTypesFromConfig(mergeConfig(checkboxConfig, config)),
+    argTypes: {
+        view: {
+            options: ['accent'],
+            control: {
+                type: 'radio',
+            },
+        },
+        size: {
+            options: ['m', 's'],
+            control: {
+                type: 'radio',
+            },
+        },
+    },
     args: {
         view: 'accent',
         size: 'm',

package/styled-components/cjs/examples/plasma_web/components/Checkbox/Checkbox.config.js

@@ -22,13 +22,20 @@ var config = exports.config = {
      * Вид контрола.
      */
     view: {
+      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
+      // deprecated
       "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
+      // deprecated
       secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
+      // deprecated
       tertiary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
+      // deprecated
       paragraph: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
-      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
+      // deprecated
       positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
+      // deprecated
       warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
+      // deprecated
       negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor)
     },
     disabled: {

package/styled-components/cjs/examples/plasma_web/components/Checkbox/Checkbox.stories.tsx

@@ -3,12 +3,9 @@ import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import { checkboxConfig } from '../../../../components/Checkbox';
-import { mergeConfig } from '../../../../engines';
-import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { WithTheme } from '../../../_helpers';
 import { Link } from '../Link/Link';
 
-import { config } from './Checkbox.config';
 import { Checkbox } from './Checkbox';
 
 const onChange = action('onChange');
@@ -19,7 +16,20 @@ const meta: Meta<typeof Checkbox> = {
     title: 'web/Data Entry/Checkbox',
     decorators: [WithTheme],
     component: Checkbox,
-    argTypes: argTypesFromConfig(mergeConfig(checkboxConfig, config)),
+    argTypes: {
+        view: {
+            options: ['accent'],
+            control: {
+                type: 'radio',
+            },
+        },
+        size: {
+            options: ['m', 's'],
+            control: {
+                type: 'radio',
+            },
+        },
+    },
     args: {
         view: 'accent',
         size: 'm',

package/styled-components/es/components/Checkbox/Checkbox.template-doc.mdx

@@ -9,6 +9,12 @@ import { PropsTable, Description } from '@site/src/components';
 <Description name="Checkbox" />
 <PropsTable name="Checkbox" exclude={['css', 'focused']} />
 
+:::caution Устаревшие значения для свойства view
+Актуальным значением для свойства `view` - является `accent`. 
+
+Все остальные значения `deprecated` и будут удалены в ближайшее время! 
+:::
+
 ## Использование
 Компонент `Checkbox` может содержать лейбл и описание.
 

package/styled-components/es/components/Combobox/ComboboxNew/ui/SelectNative/SelectNative.js

@@ -1,3 +1,4 @@
+var _option;
 import React, { forwardRef, useLayoutEffect, useRef } from 'react';
 import { useForkRef } from '@salutejs/plasma-core';
 import { createEvent } from '../../../../../utils';
@@ -35,13 +36,19 @@ export var SelectNative = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onChange(event);
     }
   }, [values]);
+
+  //
+  // Пустой option нужен для нативного поведения. Он автоматически выбирает первый пункт,
+  // если нет изначального значения
+  //
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectHidden, {
     ref: forkRef,
     multiple: multiple,
     name: name,
     hidden: true,
     value: multiple ? values : values[0]
-  }, options.map(function (v) {
+  }, _option || (_option = /*#__PURE__*/React.createElement("option", null, " ")), options.map(function (v) {
     return /*#__PURE__*/React.createElement("option", {
       key: v,
       value: v

package/styled-components/es/components/Select/ui/SelectNative/SelectNative.js

@@ -1,3 +1,4 @@
+var _option;
 import React, { forwardRef, useLayoutEffect, useRef } from 'react';
 import { useForkRef } from '@salutejs/plasma-core';
 import { createEvent } from '../../../../utils';
@@ -35,13 +36,19 @@ export var SelectNative = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onChange(event);
     }
   }, [values]);
+
+  //
+  // Пустой option нужен для нативного поведения. Он автоматически выбирает первый пункт,
+  // если нет изначального значения
+  //
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectHidden, {
     ref: forkRef,
     multiple: multiselect,
     name: name,
     hidden: true,
     value: multiselect ? values : values[0]
-  }, options.map(function (v) {
+  }, _option || (_option = /*#__PURE__*/React.createElement("option", null, " ")), options.map(function (v) {
     return /*#__PURE__*/React.createElement("option", {
       key: v,
       value: v

package/styled-components/es/examples/plasma_b2c/components/Checkbox/Checkbox.config.js

@@ -16,13 +16,20 @@ export var config = {
      * Вид контрола.
      */
     view: {
+      accent: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
+      // deprecated
       "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
+      // deprecated
       secondary: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
+      // deprecated
       tertiary: /*#__PURE__*/css(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
+      // deprecated
       paragraph: /*#__PURE__*/css(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
-      accent: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
+      // deprecated
       positive: /*#__PURE__*/css(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
+      // deprecated
       warning: /*#__PURE__*/css(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
+      // deprecated
       negative: /*#__PURE__*/css(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor)
     },
     disabled: {

package/styled-components/es/examples/plasma_b2c/components/Checkbox/Checkbox.stories.tsx

@@ -3,12 +3,9 @@ import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import { checkboxConfig } from '../../../../components/Checkbox';
-import { mergeConfig } from '../../../../engines';
-import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { WithTheme } from '../../../_helpers';
 import { Link } from '../Link/Link';
 
-import { config } from './Checkbox.config';
 import { Checkbox } from './Checkbox';
 
 const onChange = action('onChange');
@@ -19,7 +16,20 @@ const meta: Meta<typeof Checkbox> = {
     title: 'b2c/Data Entry/Checkbox',
     decorators: [WithTheme],
     component: Checkbox,
-    argTypes: argTypesFromConfig(mergeConfig(checkboxConfig, config)),
+    argTypes: {
+        view: {
+            options: ['accent'],
+            control: {
+                type: 'radio',
+            },
+        },
+        size: {
+            options: ['m', 's'],
+            control: {
+                type: 'radio',
+            },
+        },
+    },
     args: {
         view: 'accent',
         size: 'm',

package/styled-components/es/examples/plasma_web/components/Checkbox/Checkbox.config.js

@@ -16,13 +16,20 @@ export var config = {
      * Вид контрола.
      */
     view: {
+      accent: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
+      // deprecated
       "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
+      // deprecated
       secondary: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
+      // deprecated
       tertiary: /*#__PURE__*/css(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
+      // deprecated
       paragraph: /*#__PURE__*/css(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
-      accent: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
+      // deprecated
       positive: /*#__PURE__*/css(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
+      // deprecated
       warning: /*#__PURE__*/css(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
+      // deprecated
       negative: /*#__PURE__*/css(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor)
     },
     disabled: {

package/styled-components/es/examples/plasma_web/components/Checkbox/Checkbox.stories.tsx

@@ -3,12 +3,9 @@ import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import { checkboxConfig } from '../../../../components/Checkbox';
-import { mergeConfig } from '../../../../engines';
-import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { WithTheme } from '../../../_helpers';
 import { Link } from '../Link/Link';
 
-import { config } from './Checkbox.config';
 import { Checkbox } from './Checkbox';
 
 const onChange = action('onChange');
@@ -19,7 +16,20 @@ const meta: Meta<typeof Checkbox> = {
     title: 'web/Data Entry/Checkbox',
     decorators: [WithTheme],
     component: Checkbox,
-    argTypes: argTypesFromConfig(mergeConfig(checkboxConfig, config)),
+    argTypes: {
+        view: {
+            options: ['accent'],
+            control: {
+                type: 'radio',
+            },
+        },
+        size: {
+            options: ['m', 's'],
+            control: {
+                type: 'radio',
+            },
+        },
+    },
     args: {
         view: 'accent',
         size: 'm',

package/types/components/Combobox/ComboboxNew/ui/SelectNative/SelectNative.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectNative.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Combobox/ComboboxNew/ui/SelectNative/SelectNative.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAuC,MAAM,OAAO,CAAC;AAIhF,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAU7D,eAAO,MAAM,YAAY;sBALH,YAAY,iBAAiB,CAAC,GAAG,IAAI,KAAK,IAAI;wBAC5C,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI;;0CAqDjD,CAAC"}
+{"version":3,"file":"SelectNative.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Combobox/ComboboxNew/ui/SelectNative/SelectNative.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAuC,MAAM,OAAO,CAAC;AAIhF,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAU7D,eAAO,MAAM,YAAY;sBALH,YAAY,iBAAiB,CAAC,GAAG,IAAI,KAAK,IAAI;wBAC5C,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI;;0CA2DjD,CAAC"}

package/types/components/Select/ui/SelectNative/SelectNative.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectNative.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/ui/SelectNative/SelectNative.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAuC,MAAM,OAAO,CAAC;AAIhF,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAW7D,eAAO,MAAM,YAAY;yBANA,YAAY,iBAAiB,CAAC,GAAG,IAAI,KAAK,IAAI;wBAC/C,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI;;WAEvC,MAAM,GAAG,MAAM,GAAG,MAAM,MAAM,GAAG,MAAM,CAAC;2CAoDlD,CAAC"}
+{"version":3,"file":"SelectNative.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/ui/SelectNative/SelectNative.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAuC,MAAM,OAAO,CAAC;AAIhF,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAW7D,eAAO,MAAM,YAAY;yBANA,YAAY,iBAAiB,CAAC,GAAG,IAAI,KAAK,IAAI;wBAC/C,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI;;WAEvC,MAAM,GAAG,MAAM,GAAG,MAAM,MAAM,GAAG,MAAM,CAAC;2CA0DlD,CAAC"}

package/types/examples/plasma_b2c/components/Checkbox/Checkbox.config.d.ts

@@ -14,11 +14,11 @@ export declare const config: {
          * Вид контрола.
          */
         view: {
+            accent: import("@linaria/core").LinariaClassName;
             default: import("@linaria/core").LinariaClassName;
             secondary: import("@linaria/core").LinariaClassName;
             tertiary: import("@linaria/core").LinariaClassName;
             paragraph: import("@linaria/core").LinariaClassName;
-            accent: import("@linaria/core").LinariaClassName;
             positive: import("@linaria/core").LinariaClassName;
             warning: import("@linaria/core").LinariaClassName;
             negative: import("@linaria/core").LinariaClassName;

package/types/examples/plasma_b2c/components/Checkbox/Checkbox.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Checkbox/Checkbox.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;QAKX;;WAEG;;;;;QA6CH;;WAEG;;;;;;;;;;;;;;;;;;CAsEV,CAAC"}
+{"version":3,"file":"Checkbox.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Checkbox/Checkbox.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;QAKX;;WAEG;;;;;QA6CH;;WAEG;;;;;;;;;;;;;;;;;;CA6EV,CAAC"}

package/types/examples/plasma_b2c/components/Checkbox/Checkbox.d.ts

@@ -5,11 +5,11 @@ export declare const Checkbox: import("react").FunctionComponent<import("../../.
         m: import("@linaria/core").LinariaClassName;
     };
     view: {
+        accent: import("@linaria/core").LinariaClassName;
         default: import("@linaria/core").LinariaClassName;
         secondary: import("@linaria/core").LinariaClassName;
         tertiary: import("@linaria/core").LinariaClassName;
         paragraph: import("@linaria/core").LinariaClassName;
-        accent: import("@linaria/core").LinariaClassName;
         positive: import("@linaria/core").LinariaClassName;
         warning: import("@linaria/core").LinariaClassName;
         negative: import("@linaria/core").LinariaClassName;