@salutejs/plasma-new-hope 0.141.0-canary.1420.10717002054.0 → 0.141.0-canary.1421.10719019658.0

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

@@ -0,0 +1,106 @@
+import { useForm } from 'react-hook-form';
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { WithTheme } from '../../../_helpers';
+import { Button } from '../Button/Button';
+import { TextField } from '../TextField/TextField';
+import { TextArea } from '../TextArea/TextArea'; // TextArea.tsx 120 строка, не работает из-за некорректного ref
+import { Checkbox } from '../Checkbox/Checkbox';
+import { Switch } from '../Switch/Switch';
+import { Radiobox } from '../Radiobox/Radiobox';
+import { Select } from '../Select/Select';
+import { RadioGroup } from '../../../../components/Radiobox';
+
+type StoryDropdownProps = {};
+
+const langName = 'language';
+const itemsRadiobox = [
+    { langName, value: 'c', label: 'C', disabled: false },
+    { langName, value: 'cpp', label: 'C++', disabled: false },
+    { langName, value: 'assembly', label: 'Assembly', disabled: false },
+];
+
+const itemsSelect = [
+    {
+        value: 'north_america',
+        label: 'Северная Америка',
+    },
+    {
+        value: 'europe',
+        label: 'Европа',
+    },
+    {
+        value: 'asia',
+        label: 'Азия',
+    },
+];
+
+const FormSelect = (props) => {
+    const { onChange, onBlur, name, ref } = props;
+    const [value, setValue] = useState();
+
+    const onChangeValue = (e) => {
+        setValue(e);
+        onChange({
+            target: {
+                value: e,
+                name,
+            },
+        });
+    };
+
+    const onBlurValue = (e) => {
+        onBlur(e);
+    };
+
+    return <Select {...props} value={value} onChange={onChangeValue} onBlur={onBlurValue} name={name} ref={ref} />;
+};
+
+const DefaultForm = () => {
+    const { register, handleSubmit } = useForm();
+    const onSubmit = (data) => {
+        console.log(data);
+    };
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+            <TextField {...register('textfield')} placeholder="Textfield" />
+            <TextArea {...register('textarea')} placeholder="Textarea" />
+            <Checkbox {...register('checkbox')} label="Checkbox" />
+            <Switch {...register('switch')} label="Switch" labelPosition="after" />
+            <RadioGroup aria-labelledby="radiogroup-title-id">
+                <div id="radiogroup-title-id" style={{ margin: '1rem 0', fontWeight: '600' }}>
+                    Выберите язык программирования для изучения.
+                </div>
+                {itemsRadiobox.map((item) => (
+                    <Radiobox
+                        key={item.value}
+                        value={item.value}
+                        label={item.label}
+                        disabled={item.disabled}
+                        {...register('radiobox')}
+                    />
+                ))}
+            </RadioGroup>
+            <FormSelect {...register('select')} items={itemsSelect} />
+            <Button type="submit">Отправить</Button>
+        </form>
+    );
+};
+
+const meta: Meta<StoryDropdownProps> = {
+    title: 'plasma_b2c/Form',
+    decorators: [WithTheme],
+    component: DefaultForm,
+};
+
+export default meta;
+
+const StoryNormal = () => {
+    return <DefaultForm />;
+};
+
+export const Default: StoryObj<StoryDropdownProps> = {
+    render: () => <StoryNormal />,
+};

package/styled-components/es/components/TextArea/TextArea.js

@@ -119,6 +119,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
       uncontrolledValue = _useState6[0],
       setUncontrolledValue = _useState6[1];
     var outerRef = innerRef && 'current' in innerRef ? innerRef : /*#__PURE__*/createRef();
+    var ref = innerRef !== null && innerRef !== void 0 ? innerRef : /*#__PURE__*/createRef();
     var innerOptional = required ? false : optional;
     var hasHelper = Boolean(leftHelper || rightHelper || helperText);
     var hasOuterLabel = Boolean(label && labelPlacement === 'outer');
@@ -190,7 +191,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
       hasContentRight: Boolean(contentRight),
       hasHelper: hasHelper,
       applyCustomWidth: applyCustomWidth,
-      ref: outerRef,
+      ref: ref,
       disabled: disabled,
       height: autoResize ? minAuto : height,
       width: width,

package/styled-components/es/components/TextField/TextField.js

@@ -1,4 +1,4 @@
-var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredPlacement", "view", "size", "readOnly", "disabled", "required", "optional", "value", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
+var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredPlacement", "view", "size", "readOnly", "disabled", "required", "optional", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -49,7 +49,6 @@ export var textFieldRoot = function textFieldRoot(Root) {
       _ref$required = _ref.required,
       required = _ref$required === void 0 ? false : _ref$required,
       optional = _ref.optional,
-      outerValue = _ref.value,
       values = _ref.chips,
       onChange = _ref.onChange,
       onChangeChips = _ref.onChangeChips,
@@ -65,7 +64,7 @@ export var textFieldRoot = function textFieldRoot(Root) {
       inputRef: inputRef,
       chipsRefs: chipsRefs
     };
-    var _useState = useState(Boolean(outerValue)),
+    var _useState = useState(!!rest.value),
       _useState2 = _slicedToArray(_useState, 2),
       hasValue = _useState2[0],
       setHasValue = _useState2[1];
@@ -78,23 +77,23 @@ export var textFieldRoot = function textFieldRoot(Root) {
     var labelId = safeUseId();
     var helperTextId = safeUseId();
     var isChipEnumeration = enumerationType === 'chip';
-    var isChipsVisible = isChipEnumeration && Boolean(chips === null || chips === void 0 ? void 0 : chips.length);
+    var isChipsVisible = isChipEnumeration && !!(chips !== null && chips !== void 0 && chips.length);
     var withHasChips = isChipsVisible ? classes.hasChips : undefined;
-    var hasLabelValue = Boolean(label);
+    var hasLabelValue = !!label;
     var hasInnerLabel = size !== 'xs' && labelPlacement === 'inner' && !isChipsVisible && hasLabelValue;
     var hasOuterLabel = labelPlacement === 'outer' && hasLabelValue;
-    var hasPlaceholder = Boolean(placeholder) && !hasInnerLabel;
+    var hasPlaceholder = !!placeholder && !hasInnerLabel;
     var innerLabelValue = hasInnerLabel || hasOuterLabel ? label : undefined;
     var innerLabelPlacementValue = labelPlacement === 'inner' && !hasInnerLabel ? undefined : labelPlacement;
     var innerPlaceholderValue = hasPlaceholder ? placeholder : undefined;
-    var placeholderShown = Boolean(innerPlaceholderValue) && !hasValue;
+    var placeholderShown = !!innerPlaceholderValue && !hasValue;
     var requiredPlacementClass = requiredPlacement === 'right' ? 'align-right ' : undefined;
     var labelPlacementClass = innerLabelPlacementValue ? classes["".concat(innerLabelPlacementValue, "LabelPlacement")] : undefined;
     var hasValueClass = hasValue ? classes.hasValue : undefined;
     var wrapperWithoutLeftContent = !contentLeft && isChipsVisible ? classes.hasEmptyContentLeft : undefined;
     var wrapperWithoutRightContent = !contentRight && isChipsVisible ? classes.hasEmptyContentRight : undefined;
     var handleInput = function handleInput(event) {
-      setHasValue(Boolean(event.target.value));
+      setHasValue(!!event.target.value);
     };
     var handleChange = function handleChange(event) {
       if (disabled || readOnly) {
@@ -162,9 +161,6 @@ export var textFieldRoot = function textFieldRoot(Root) {
       })) || [];
       setChips(newChips);
     }, [isChipEnumeration, values]);
-    useEffect(function () {
-      setHasValue(Boolean(outerValue));
-    }, [outerValue]);
     var innerOptional = Boolean(required ? false : optional);
     var hasPlaceholderOptional = innerOptional && !innerLabelValue && !hasOuterLabel;
     var optionalTextNode = innerOptional ? /*#__PURE__*/React.createElement(StyledOptionalText, null, Boolean(hasPlaceholderOptional ? innerPlaceholderValue : innerLabelValue) && '\xa0', optionalText) : null;
@@ -218,7 +214,6 @@ export var textFieldRoot = function textFieldRoot(Root) {
     })), /*#__PURE__*/React.createElement(InputContainer, null, /*#__PURE__*/React.createElement(Input, _extends({
       ref: inputForkRef,
       id: innerId,
-      value: outerValue,
       "aria-labelledby": labelId,
       "aria-describedby": helperTextId,
       placeholder: innerPlaceholderValue,

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

@@ -0,0 +1,106 @@
+import { useForm } from 'react-hook-form';
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { WithTheme } from '../../../_helpers';
+import { Button } from '../Button/Button';
+import { TextField } from '../TextField/TextField';
+import { TextArea } from '../TextArea/TextArea'; // TextArea.tsx 120 строка, не работает из-за некорректного ref
+import { Checkbox } from '../Checkbox/Checkbox';
+import { Switch } from '../Switch/Switch';
+import { Radiobox } from '../Radiobox/Radiobox';
+import { Select } from '../Select/Select';
+import { RadioGroup } from '../../../../components/Radiobox';
+
+type StoryDropdownProps = {};
+
+const langName = 'language';
+const itemsRadiobox = [
+    { langName, value: 'c', label: 'C', disabled: false },
+    { langName, value: 'cpp', label: 'C++', disabled: false },
+    { langName, value: 'assembly', label: 'Assembly', disabled: false },
+];
+
+const itemsSelect = [
+    {
+        value: 'north_america',
+        label: 'Северная Америка',
+    },
+    {
+        value: 'europe',
+        label: 'Европа',
+    },
+    {
+        value: 'asia',
+        label: 'Азия',
+    },
+];
+
+const FormSelect = (props) => {
+    const { onChange, onBlur, name, ref } = props;
+    const [value, setValue] = useState();
+
+    const onChangeValue = (e) => {
+        setValue(e);
+        onChange({
+            target: {
+                value: e,
+                name,
+            },
+        });
+    };
+
+    const onBlurValue = (e) => {
+        onBlur(e);
+    };
+
+    return <Select {...props} value={value} onChange={onChangeValue} onBlur={onBlurValue} name={name} ref={ref} />;
+};
+
+const DefaultForm = () => {
+    const { register, handleSubmit } = useForm();
+    const onSubmit = (data) => {
+        console.log(data);
+    };
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+            <TextField {...register('textfield')} placeholder="Textfield" />
+            <TextArea {...register('textarea')} placeholder="Textarea" />
+            <Checkbox {...register('checkbox')} label="Checkbox" />
+            <Switch {...register('switch')} label="Switch" labelPosition="after" />
+            <RadioGroup aria-labelledby="radiogroup-title-id">
+                <div id="radiogroup-title-id" style={{ margin: '1rem 0', fontWeight: '600' }}>
+                    Выберите язык программирования для изучения.
+                </div>
+                {itemsRadiobox.map((item) => (
+                    <Radiobox
+                        key={item.value}
+                        value={item.value}
+                        label={item.label}
+                        disabled={item.disabled}
+                        {...register('radiobox')}
+                    />
+                ))}
+            </RadioGroup>
+            <FormSelect {...register('select')} items={itemsSelect} />
+            <Button type="submit">Отправить</Button>
+        </form>
+    );
+};
+
+const meta: Meta<StoryDropdownProps> = {
+    title: 'plasma_b2c/Form',
+    decorators: [WithTheme],
+    component: DefaultForm,
+};
+
+export default meta;
+
+const StoryNormal = () => {
+    return <DefaultForm />;
+};
+
+export const Default: StoryObj<StoryDropdownProps> = {
+    render: () => <StoryNormal />,
+};

package/types/components/TextArea/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAK5E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAqBrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AA+BtD,eAAO,MAAM,sBAAsB,UAAW,aAAa,WAAW,OAAO,2BA4B5E,CAAC;AAEF,eAAO,MAAM,YAAY,SAAU,UAAU,mBAAmB,EAAE,aAAa,CAAC,8FAgL1E,CAAC;AAEP,eAAO,MAAM,cAAc;;;mBAlLQ,UAAU,mBAAmB,EAAE,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;CA0M/E,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAK5E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAqBrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AA+BtD,eAAO,MAAM,sBAAsB,UAAW,aAAa,WAAW,OAAO,2BA4B5E,CAAC;AAEF,eAAO,MAAM,YAAY,SAAU,UAAU,mBAAmB,EAAE,aAAa,CAAC,8FAiL1E,CAAC;AAEP,eAAO,MAAM,cAAc;;;mBAnLQ,UAAU,mBAAmB,EAAE,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;CA2M/E,CAAC"}

package/types/components/TextField/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG/C,OAAO,KAAK,EAAuC,cAAc,EAAE,MAAM,mBAAmB,CAAC;AA4B7F,eAAO,MAAM,IAAI,0CAGhB,CAAC;AAEF,eAAO,MAAM,aAAa,SAAU,UAAU,cAAc,EAAE,cAAc,CAAC,4FAwQxE,CAAC;AAEN,eAAO,MAAM,eAAe;;;mBA1QQ,UAAU,cAAc,EAAE,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CAsS5E,CAAC"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG/C,OAAO,KAAK,EAAuC,cAAc,EAAE,MAAM,mBAAmB,CAAC;AA4B7F,eAAO,MAAM,IAAI,0CAGhB,CAAC;AAEF,eAAO,MAAM,aAAa,SAAU,UAAU,cAAc,EAAE,cAAc,CAAC,4FAkQxE,CAAC;AAEN,eAAO,MAAM,eAAe;;;mBApQQ,UAAU,cAAc,EAAE,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CAgS5E,CAAC"}