@salutejs/plasma-new-hope 0.149.0-canary.1418.10942866373.0 → 0.149.0-canary.1421.10953636107.0

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

@@ -0,0 +1,245 @@
+import { useForm as useReactHookForm, Controller } from 'react-hook-form';
+import React 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';
+import { Checkbox } from '../Checkbox/Checkbox';
+import { Switch } from '../Switch/Switch';
+import { Radiobox } from '../Radiobox/Radiobox';
+import { RadioGroup } from '../../../../components/Radiobox';
+import { Slider } from '../Slider/Slider';
+import { useForm } from '../../../../hooks';
+import { DatePicker, DatePickerRange } from '../DatePicker/DatePicker';
+
+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 PlasmaForm = () => {
+    const onSubmit = (data) => {
+        console.log(data);
+    };
+
+    const { formRef, formData } = useForm(onSubmit, {
+        textfield: 'textfield',
+        textarea: 'textarea',
+        checkbox: 'checkobox',
+        switch: true,
+        radiobox: 'c',
+        slider: 10,
+        sliderd: [10, 20],
+        datepicker: '12.09.2024',
+        datepickerRange: ['09.09.2024', '12.09.2024'],
+    });
+
+    return (
+        <form onSubmit={formData} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }} ref={formRef}>
+            <TextField name="textfield" placeholder="Textfield" required={false} />
+            <TextArea name="textarea" autoResize placeholder="Textarea" />
+            <Checkbox name="checkbox" label="Checkbox" />
+            <Switch name="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
+                        name="radiobox"
+                        key={item.value}
+                        value={item.value}
+                        label={item.label}
+                        disabled={item.disabled}
+                    />
+                ))}
+            </RadioGroup>
+            <Slider name="slider" label="Slider" type="single" min={0} max={100} />
+            <Slider name="sliderd" label="Slider" type="double" min={0} max={100} />
+            <DatePicker label="DatePicker" name="datepicker" />
+            <DatePickerRange label="DatePicker" name="datepickerRange" />
+            <Button type="submit">Отправить</Button>
+        </form>
+    );
+};
+
+const meta: Meta<StoryDropdownProps> = {
+    title: 'plasma_b2c/Form',
+    decorators: [WithTheme],
+    component: PlasmaForm,
+};
+
+export default meta;
+
+const StoryPlasmaForm = () => {
+    return <PlasmaForm />;
+};
+
+export const DefaultPlasmaForm: StoryObj<StoryDropdownProps> = {
+    render: () => <StoryPlasmaForm />,
+};
+
+const DefaultForm = () => {
+    const onSubmit = (event) => {
+        event.preventDefault();
+
+        const fData = new FormData(event.target);
+
+        for (const p of fData) {
+            const name = p[0];
+            const value = p[1];
+
+            console.log(name, value);
+        }
+    };
+    return (
+        <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+            <TextField name="textfield" placeholder="Textfield" required={false} />
+            <TextArea name="textarea" autoResize placeholder="Textarea" />
+            <Checkbox name="checkbox" label="Checkbox" />
+            <Switch name="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
+                        name="radiobox"
+                        key={item.value}
+                        value={item.value}
+                        label={item.label}
+                        disabled={item.disabled}
+                    />
+                ))}
+            </RadioGroup>
+            <Slider name="slider" label="Slider" type="single" min={0} max={100} />
+            <Slider name="sliderd" label="Slider" type="double" min={0} max={100} />
+            <DatePicker label="DatePicker" name="datepicker" />
+            <DatePickerRange label="DatePicker" name="datepickerRange" />
+            <Button type="submit">Отправить</Button>
+        </form>
+    );
+};
+
+const StoryDefaultForm = () => {
+    return <DefaultForm />;
+};
+
+export const FormDefault: StoryObj<StoryDropdownProps> = {
+    render: () => <StoryDefaultForm />,
+};
+
+const DefaultUseForm = () => {
+    const { register, handleSubmit } = useReactHookForm({
+        defaultValues: {
+            textfield: 'John Doe',
+            textarea: 'Default description',
+            checkbox: true,
+            switch: true,
+            radiobox: 'c',
+            slider: 10,
+        },
+    });
+    const onSubmit = (data) => {
+        console.log(data);
+    };
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+            <TextField {...register('textfield')} placeholder="Textfield" required={false} />
+            <TextArea {...register('textarea')} autoResize 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
+                        {...register('radiobox')}
+                        key={item.value}
+                        value={item.value}
+                        label={item.label}
+                        disabled={item.disabled}
+                    />
+                ))}
+            </RadioGroup>
+            <Button type="submit">Отправить</Button>
+        </form>
+    );
+};
+
+const StoryHookForm = () => {
+    return <DefaultUseForm />;
+};
+
+export const UseHookForm: StoryObj<StoryDropdownProps> = {
+    render: () => <StoryHookForm />,
+};
+
+const DefaultUseFormController = () => {
+    const { control, handleSubmit } = useReactHookForm({
+        defaultValues: {
+            textfield: 'John Doe',
+            textarea: 'Default description',
+            checkbox: true,
+            switch: true,
+            radiobox: 'c',
+            slider: 10,
+            sliderd: [10, 20],
+        },
+    });
+    const onSubmit = (data) => {
+        console.log(data);
+    };
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+            <Controller
+                name="textfield"
+                control={control}
+                render={({ field }) => <TextField {...field} label="TextField" />}
+            />
+            <Controller
+                name="textarea"
+                control={control}
+                render={({ field }) => <TextArea {...field} label="TextArea" />}
+            />
+            <Controller
+                name="checkbox"
+                control={control}
+                render={({ field }) => <Checkbox {...field} checked={field.value} label="Checkbox" />}
+            />
+            <Controller
+                name="switch"
+                control={control}
+                render={({ field }) => <Switch {...field} checked={field.value} labelPosition="after" label="Switch" />}
+            />
+            <Controller
+                name="slider"
+                control={control}
+                render={({ field }) => <Slider {...field} type="single" label="Slider" min={0} max={100} />}
+            />
+            <Controller
+                name="sliderd"
+                control={control}
+                render={({ field }) => <Slider {...field} type="double" label="Slider" min={0} max={100} />}
+            />
+            <Button type="submit">Отправить</Button>
+        </form>
+    );
+};
+
+const StoryHookFormController = () => {
+    return <DefaultUseFormController />;
+};
+
+export const UseHookFormController: StoryObj<StoryDropdownProps> = {
+    render: () => <StoryHookFormController />,
+};

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

@@ -0,0 +1,245 @@
+import { useForm as useReactHookForm, Controller } from 'react-hook-form';
+import React 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';
+import { Checkbox } from '../Checkbox/Checkbox';
+import { Switch } from '../Switch/Switch';
+import { Radiobox } from '../Radiobox/Radiobox';
+import { RadioGroup } from '../../../../components/Radiobox';
+import { Slider } from '../Slider/Slider';
+import { useForm } from '../../../../hooks';
+import { DatePicker, DatePickerRange } from '../DatePicker/DatePicker';
+
+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 PlasmaForm = () => {
+    const onSubmit = (data) => {
+        console.log(data);
+    };
+
+    const { formRef, formData } = useForm(onSubmit, {
+        textfield: 'textfield',
+        textarea: 'textarea',
+        checkbox: 'checkobox',
+        switch: true,
+        radiobox: 'c',
+        slider: 10,
+        sliderd: [10, 20],
+        datepicker: '12.09.2024',
+        datepickerRange: ['09.09.2024', '12.09.2024'],
+    });
+
+    return (
+        <form onSubmit={formData} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }} ref={formRef}>
+            <TextField name="textfield" placeholder="Textfield" required={false} />
+            <TextArea name="textarea" autoResize placeholder="Textarea" />
+            <Checkbox name="checkbox" label="Checkbox" />
+            <Switch name="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
+                        name="radiobox"
+                        key={item.value}
+                        value={item.value}
+                        label={item.label}
+                        disabled={item.disabled}
+                    />
+                ))}
+            </RadioGroup>
+            <Slider name="slider" label="Slider" type="single" min={0} max={100} />
+            <Slider name="sliderd" label="Slider" type="double" min={0} max={100} />
+            <DatePicker label="DatePicker" name="datepicker" />
+            <DatePickerRange label="DatePicker" name="datepickerRange" />
+            <Button type="submit">Отправить</Button>
+        </form>
+    );
+};
+
+const meta: Meta<StoryDropdownProps> = {
+    title: 'plasma_web/Form',
+    decorators: [WithTheme],
+    component: PlasmaForm,
+};
+
+export default meta;
+
+const StoryPlasmaForm = () => {
+    return <PlasmaForm />;
+};
+
+export const DefaultPlasmaForm: StoryObj<StoryDropdownProps> = {
+    render: () => <StoryPlasmaForm />,
+};
+
+const DefaultForm = () => {
+    const onSubmit = (event) => {
+        event.preventDefault();
+
+        const fData = new FormData(event.target);
+
+        for (const p of fData) {
+            const name = p[0];
+            const value = p[1];
+
+            console.log(name, value);
+        }
+    };
+    return (
+        <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+            <TextField name="textfield" placeholder="Textfield" required={false} />
+            <TextArea name="textarea" autoResize placeholder="Textarea" />
+            <Checkbox name="checkbox" label="Checkbox" />
+            <Switch name="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
+                        name="radiobox"
+                        key={item.value}
+                        value={item.value}
+                        label={item.label}
+                        disabled={item.disabled}
+                    />
+                ))}
+            </RadioGroup>
+            <Slider name="slider" label="Slider" type="single" min={0} max={100} />
+            <Slider name="sliderd" label="Slider" type="double" min={0} max={100} />
+            <DatePicker label="DatePicker" name="datepicker" />
+            <DatePickerRange label="DatePicker" name="datepickerRange" />
+            <Button type="submit">Отправить</Button>
+        </form>
+    );
+};
+
+const StoryDefaultForm = () => {
+    return <DefaultForm />;
+};
+
+export const FormDefault: StoryObj<StoryDropdownProps> = {
+    render: () => <StoryDefaultForm />,
+};
+
+const DefaultUseForm = () => {
+    const { register, handleSubmit } = useReactHookForm({
+        defaultValues: {
+            textfield: 'John Doe',
+            textarea: 'Default description',
+            checkbox: true,
+            switch: true,
+            radiobox: 'c',
+            slider: 10,
+        },
+    });
+    const onSubmit = (data) => {
+        console.log(data);
+    };
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+            <TextField {...register('textfield')} placeholder="Textfield" required={false} />
+            <TextArea {...register('textarea')} autoResize 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
+                        {...register('radiobox')}
+                        key={item.value}
+                        value={item.value}
+                        label={item.label}
+                        disabled={item.disabled}
+                    />
+                ))}
+            </RadioGroup>
+            <Button type="submit">Отправить</Button>
+        </form>
+    );
+};
+
+const StoryHookForm = () => {
+    return <DefaultUseForm />;
+};
+
+export const UseHookForm: StoryObj<StoryDropdownProps> = {
+    render: () => <StoryHookForm />,
+};
+
+const DefaultUseFormController = () => {
+    const { control, handleSubmit } = useReactHookForm({
+        defaultValues: {
+            textfield: 'John Doe',
+            textarea: 'Default description',
+            checkbox: true,
+            switch: true,
+            radiobox: 'c',
+            slider: 10,
+            sliderd: [10, 20],
+        },
+    });
+    const onSubmit = (data) => {
+        console.log(data);
+    };
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+            <Controller
+                name="textfield"
+                control={control}
+                render={({ field }) => <TextField {...field} label="TextField" />}
+            />
+            <Controller
+                name="textarea"
+                control={control}
+                render={({ field }) => <TextArea {...field} label="TextArea" />}
+            />
+            <Controller
+                name="checkbox"
+                control={control}
+                render={({ field }) => <Checkbox {...field} checked={field.value} label="Checkbox" />}
+            />
+            <Controller
+                name="switch"
+                control={control}
+                render={({ field }) => <Switch {...field} checked={field.value} labelPosition="after" label="Switch" />}
+            />
+            <Controller
+                name="slider"
+                control={control}
+                render={({ field }) => <Slider {...field} type="single" label="Slider" min={0} max={100} />}
+            />
+            <Controller
+                name="sliderd"
+                control={control}
+                render={({ field }) => <Slider {...field} type="double" label="Slider" min={0} max={100} />}
+            />
+            <Button type="submit">Отправить</Button>
+        </form>
+    );
+};
+
+const StoryHookFormController = () => {
+    return <DefaultUseFormController />;
+};
+
+export const UseHookFormController: StoryObj<StoryDropdownProps> = {
+    render: () => <StoryHookFormController />,
+};

package/styled-components/es/hooks/index.js

@@ -4,4 +4,5 @@ export { usePreviousValue } from './usePreviousValue';
 export { useForceUpdate } from './useForceUpdate';
 export { useDidMountEffect } from './useDidMountEffect';
 export { useOutsideClick } from './useOutsideClick';
-export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+export { useForm } from './useForm';

package/styled-components/es/hooks/useForm.js

@@ -0,0 +1,128 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import React, { useEffect } from 'react';
+var initData = function initData(ref, defaultValues) {
+  if (!ref.current) {
+    return;
+  }
+  var form = ref.current;
+  var items = form.elements;
+  for (var i = 0; i < items.length; i++) {
+    var item = items[i];
+    var _name = item.name,
+      value = item.value,
+      type = item.type;
+    if ((type === 'text' || type === 'textarea') && defaultValues[_name]) {
+      item.value = String(defaultValues[_name]);
+    }
+    if (type === 'checkbox' && defaultValues[_name]) {
+      item.checked = Boolean(defaultValues[_name]);
+    }
+    if (type === 'radio' && defaultValues[_name]) {
+      item.checked = defaultValues[_name] === value;
+    }
+    if (type === 'number' && defaultValues[_name]) {
+      var sliderType = item.getAttribute('datatype');
+      if (sliderType === 'slider-single') {
+        item.setAttribute('defaultValue', String(defaultValues[_name]));
+        var event = new Event('setInitValue');
+        item.dispatchEvent(event);
+      }
+      if (sliderType === 'slider-double') {
+        var isMax = item.getAttribute('data-slidertype') === 'max' ? 1 : 0;
+        var _data = defaultValues[_name];
+        item.setAttribute('defaultValue', String(_data[isMax]));
+        var _event = new Event('setInitValue');
+        item.dispatchEvent(_event);
+      }
+    }
+    if (type === 'hidden') {
+      var datepickerType = item.getAttribute('datatype');
+      if (datepickerType === 'datepicker-single') {
+        item.setAttribute('defaultValue', String(defaultValues[_name]));
+        var _event2 = new Event('setInitValue');
+        item.dispatchEvent(_event2);
+      }
+      if (datepickerType === 'datepicker-double') {
+        var isTo = item.getAttribute('data-datepicker') === 'to' ? 1 : 0;
+        var _data2 = defaultValues[_name];
+        item.setAttribute('defaultValue', String(_data2[isTo]));
+        var _event3 = new Event('setInitValue');
+        item.dispatchEvent(_event3);
+      }
+    }
+  }
+};
+var valideParams = function valideParams(name) {
+  return name && name !== '';
+};
+export var useForm = function useForm(onSubmit, defaultValues) {
+  var formRef = /*#__PURE__*/React.createRef();
+  useEffect(function () {
+    initData(formRef, defaultValues);
+  }, []);
+  var formData = function formData(event) {
+    event.preventDefault();
+    var result = {};
+    var form = event.target;
+    var items = form.elements;
+    for (var i = 0; i < items.length; i++) {
+      var item = items[i];
+      var _name2 = item.name,
+        value = item.value,
+        type = item.type;
+      if ((type === 'text' || type === 'textarea') && valideParams(_name2)) {
+        result[_name2] = value;
+      }
+      if (type === 'checkbox' && valideParams(_name2)) {
+        result[_name2] = item.checked;
+      }
+      if (type === 'radio' && valideParams(_name2)) {
+        if (item.checked) {
+          result[_name2] = value;
+        } else if (!(_name2 in result)) {
+          result[_name2] = null;
+        }
+      }
+      if (type === 'number' && valideParams(_name2)) {
+        var sliderType = item.getAttribute('datatype');
+        if (sliderType === 'slider-single') {
+          result[_name2] = value;
+        }
+        if (sliderType === 'slider-double') {
+          var isMin = item.getAttribute('data-slidertype') === 'min';
+          if (isMin) {
+            result[_name2] = [Number(value)];
+          }
+          if (!isMin && Array.isArray(result[_name2])) {
+            result[_name2] = [].concat(_toConsumableArray(result[_name2]), [Number(value)]);
+          }
+        }
+      }
+      if (type === 'hidden' && valideParams(_name2)) {
+        var _sliderType = item.getAttribute('datatype');
+        if (_sliderType === 'datepicker-single') {
+          result[_name2] = value;
+        }
+        if (_sliderType === 'datepicker-double') {
+          var _isMin = item.getAttribute('data-datepicker') === 'from';
+          if (_isMin) {
+            result[_name2] = [String(value)];
+          }
+          if (!_isMin && Array.isArray(result[_name2])) {
+            result[_name2] = [].concat(_toConsumableArray(result[_name2]), [String(value)]);
+          }
+        }
+      }
+    }
+    onSubmit(result);
+  };
+  return {
+    formRef: formRef,
+    formData: formData
+  };
+};

package/styled-components/es/index.js

@@ -56,5 +56,4 @@ export * from './components/Portal';
 export * from './components/Price';
 export * from './components/Autocomplete';
 export * from './components/EmptyState';
-export * from './components/Editable';
-export * from './components/Mask';
+export * from './components/Editable';

package/styled-components/es/utils/index.js

@@ -3,6 +3,7 @@ export { extractTextFrom } from './extractTextFrom';
 export { getSizeValueFromProp } from './getSizeValueFromProp';
 export { IS_REACT_18, safeUseId } from './react';
 export { isNumber } from './isNumber';
+export { mergeRefs, setRefList } from './setRefList';
 export { isEmpty } from './isEmpty';
 import * as _constants from './constants';
 export { _constants as constants };

package/styled-components/es/utils/inputHidden.js

@@ -0,0 +1,4 @@
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { styled } from '@linaria/react';
+export var InputHidden = /*#__PURE__*/styled.input(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    visibility: hidden;\n    width: 0;\n    height: 0;\n    opacity: 0;\n    margin: 0;\n    padding: 0;\n    border: none;\n"])));

package/styled-components/es/utils/setRefList.js

@@ -0,0 +1,20 @@
+export function mergeRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+  return function (val) {
+    setRefList.apply(void 0, [val].concat(refs));
+  };
+}
+export function setRefList(val) {
+  for (var _len2 = arguments.length, refs = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+    refs[_key2 - 1] = arguments[_key2];
+  }
+  refs.forEach(function (ref) {
+    if (typeof ref === 'function') {
+      ref(val);
+    } else if (ref != null) {
+      ref.current = val;
+    }
+  });
+}