@salutejs/plasma-new-hope 0.322.0-canary.1933.14596920222.0 → 0.322.0-canary.1938.14660334712.0

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

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

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

@@ -26,7 +26,7 @@ type Items = Array<{
          */
         label: string;
         /**
-        * Сторона открытия вложенного дропдауна относительно текущего элемента
+        * Сторона открытия вложенного dropdown относительно текущего элемента
         * @default right
         */
         placement?: Placement;
@@ -49,7 +49,7 @@ type Items = Array<{
     }>;
 ```
 
-Тип выбора комбобокса - одиночный или множественный зависит от типа `value` и `onChange`. В одиночном value - `string`, в множественном - `Array<string>`.\
+Тип выбора Combobox - одиночный или множественный зависит от типа `value` и `onChange`. В одиночном value - `string`, в множественном - `Array<string>`.\
 
 
 ## Примеры
@@ -85,8 +85,8 @@ type Items = Array<{
             ];
 
             return (
-                <div style={{ display: "flex", gap: "30px", height: "300px" }}>
-                    <div style={{ width: "300px" }}>
+                <div style=\{{ display: "flex", gap: "30px", height: "300px" }}>
+                    <div style=\{{ width: "300px" }}>
                         <Combobox
                             items={items}
                             value={value}
@@ -131,8 +131,8 @@ type Items = Array<{
             ];
 
             return (
-                <div style={{ display: "flex", gap: "30px", height: "300px" }}>
-                    <div style={{ width: "300px" }}>
+                <div style=\{{ display: "flex", gap: "30px", height: "300px" }}>
+                    <div style=\{{ width: "300px" }}>
                         <Combobox
                             multiple
                             items={items}
@@ -180,8 +180,8 @@ type Items = Array<{
             ];
 
             return (
-                <div style={{ display: "flex", gap: "30px", height: "300px" }}>
-                    <div style={{ width: "300px" }}>
+                <div style=\{{ display: "flex", gap: "30px", height: "300px" }}>
+                    <div style=\{{ width: "300px" }}>
                         <Combobox
                             multiple
                             items={items}
@@ -200,9 +200,9 @@ type Items = Array<{
         ```
     </TabItem>
     <TabItem value="portal" label="Portal">
-        Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется скролл, и список будет обрезаться, чего хотелось бы избежать.\
+        Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется scroll, и список будет обрезаться, чего хотелось бы избежать.\
         Для такой реализации имеется пропс `portal`, который принимает либо `ref` либо `id` html-тега.\
-        Также нужно прокинуть проп `listWidth`, чтобы явно задать ширину списку. Если этого не сделать, то будет взята ширина 100% от блока, на который ведет ссылка портала.
+        Также нужно прокинуть свойство `listWidth`, чтобы явно задать ширину списку. Если этого не сделать, то будет взята ширина 100% от блока, на который ведет ссылка портала.
 
         ```tsx live
         import React, { useRef } from 'react';
@@ -232,11 +232,11 @@ type Items = Array<{
                 },
             ];
 
-            const ref = useRef(null)
+            const ref = useRef(null);
 
             return (
-                <div style={{ height: "300px" }} ref={ref}>
-                    <div style={{ width: "300px" }}>
+                <div style=\{{ height: "300px" }} ref={ref}>
+                    <div style=\{{ width: "300px" }}>
                         <Combobox
                             items={items}
                             value={value}
@@ -283,8 +283,8 @@ type Items = Array<{
             ];
 
             return (
-                <div style={{ height: "300px" }}>
-                    <div style={{ width: "300px" }}>
+                <div style=\{{ height: "300px" }}>
+                    <div style=\{{ width: "300px" }}>
                         <Combobox
                             items={items}
                             placeholder="Placeholder"
@@ -329,9 +329,9 @@ type Items = Array<{
             ];
 
             return (
-                <div style={{ height: "300px" }}>
-                    <div style={{width: "300px" }}>
-                        <Button text={ alwaysOpened ? 'По умолчанию' : 'Всегда открыт' } onClick={() => setAlwaysOpened(!alwaysOpened)} style={{ marginBottom: '1rem' }} />
+                <div style=\{{ height: "300px" }}>
+                    <div style=\{{width: "300px" }}>
+                        <Button text={ alwaysOpened ? 'По умолчанию' : 'Всегда открыт' } onClick={() => setAlwaysOpened(!alwaysOpened)} style=\{{ marginBottom: '1rem' }} />
                         <Combobox
                             items={items}
                             placeholder="Placeholder"
@@ -345,6 +345,37 @@ type Items = Array<{
         }
         ```
     </TabItem>
+    <TabItem value="virtual" label="Virtual">
+        :::caution
+            Работает только в одно-уровневых списках.
+        :::
+
+        Свойство `virtual` позволяет виртуализировать выпадающий список. Для настройки высоты списка можно использовать свойство `listMaxHeight`.
+
+       ```tsx live
+        import React from 'react';
+        import { Combobox } from '@salutejs/{{ package }}';
+
+        export function App() {
+            const items = Array(5000).fill(1).map((_, i) => ({ value: i.toString(), label: i.toString() }));
+
+            return (
+                <div style=\{{ height: "300px" }}>
+                    <div style=\{{width: "300px" }}>
+                        <Combobox
+                            items={items}
+                            virtual
+                            listMaxHeight="200px"
+                            placeholder="Placeholder"
+                            label="Label"
+                            helperText="Helper text"
+                        />
+                    </div>
+                </div>
+            );
+        }
+    ```
+    </TabItem>
     <TabItem value="infinite" label="Infinite Loading">
         Пример с бесконечной загрузкой элементов в списке.
 
@@ -388,8 +419,8 @@ type Items = Array<{
             };
 
             return (
-                <div style={{ height: "300px" }}>
-                    <div style={{ width: "300px" }}>
+                <div style=\{{ height: "300px" }}>
+                    <div style=\{{ width: "300px" }}>
                         <Combobox
                             items={items}
                             listMaxHeight="200px"
@@ -411,7 +442,7 @@ type Items = Array<{
 ## Использование с React Hook Form и нативной формой
 
 :::caution Использование атрибута `name`
-Используйте  свойство `name` только когда это необходимо. Оно влияет на выходной тип в `onChange`.
+Используйте свойство `name` только когда это необходимо. Оно влияет на выходной тип в `onChange`.
 :::
 
 <Tabs>
@@ -462,8 +493,8 @@ type Items = Array<{
             ];
 
             return (
-                <div style={{ display: "flex", gap: "30px", height: "300px" }}>
-                    <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+                <div style=\{{ display: "flex", gap: "30px", height: "300px" }}>
+                    <form onSubmit={handleSubmit(onSubmit)} style=\{{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
                         <Combobox
                             items={items}
                             {...register('combobox')}
@@ -525,8 +556,8 @@ type Items = Array<{
             ];
 
             return (
-                <div style={{ display: "flex", gap: "30px", height: "300px" }}>
-                    <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+                <div style=\{{ display: "flex", gap: "30px", height: "300px" }}>
+                    <form onSubmit={handleSubmit(onSubmit)} style=\{{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
                         <Controller
                             control={control}
                             name="combobox"
@@ -598,8 +629,8 @@ type Items = Array<{
             ];
 
             return (
-                <div style={{ display: "flex", gap: "30px", height: "300px" }}>
-                    <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+                <div style=\{{ display: "flex", gap: "30px", height: "300px" }}>
+                    <form onSubmit={onSubmit} style=\{{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
                         <Combobox label="Combobox" name="combobox" defaultValue={"brazil"} items={items} />
                         <Combobox label="Combobox" name="comboboxMulti" defaultValue={["brazil"]} items={items} multiple />
                         <Button type="submit">Отправить</Button>

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

@@ -194,6 +194,11 @@ export function App() {
 ```
 
 ### Обязательность поля
+
+:::tip
+Наличие индикатора регулируется свойством `hasRequiredIndicator`.
+:::
+
 Обязательность поля задаётся с помощью свойства `required`. 
 Если поле является обязательным, то у компонента появляется специальный индикатор. 
 Изменить расположение индикатора можно с помощью свойства `requiredPlacement`, которое принимает значения `left` и `right`. 

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

@@ -30,7 +30,7 @@ type Items = Array<{
          */
         label: string;
         /**
-        * Сторона открытия вложенного дропдауна относительно текущего элемента;
+        * Сторона открытия вложенного Dropdown относительно текущего элемента;
         */
         placement?: DropdownPlacement;
         /**
@@ -117,7 +117,7 @@ type Items = Array<{
 
 
             return (
-                <div style={{ height:"300px" }}>
+                <div style=\{{ height:"300px" }}>
                     <Dropdown
                         items={items}
                     >
@@ -170,7 +170,7 @@ type Items = Array<{
             ];
 
             return (
-                <div style={{ height: "300px", display: "flex", gap: "50px" }}>
+                <div style=\{{ height: "300px", display: "flex", gap: "50px" }}>
                     <Dropdown
                         items={items}
                         size="l"
@@ -245,7 +245,7 @@ type Items = Array<{
             ];
 
             return (
-                <div style={{ height: "300px", display: "flex", gap: "50px" }}>
+                <div style=\{{ height: "300px", display: "flex", gap: "50px" }}>
                     <Dropdown
                         items={items}
                     >
@@ -327,7 +327,7 @@ type Items = Array<{
             ];
 
             return (
-                <div style={{ height:"300px" }}>
+                <div style=\{{ height:"300px" }}>
                     <Dropdown
                         items={items}
                         trigger="hover"
@@ -380,10 +380,10 @@ type Items = Array<{
                 },
             ];
 
-            const ref = useRef(null)
+            const ref = useRef(null);
 
             return (
-                <div style={{ position: "relative", height: "300px" }} ref={ref}>
+                <div style=\{{ position: "relative", height: "300px" }} ref={ref}>
                     <Dropdown items={items} portal={ref}>
                         <Button text="Список стран" />
                     </Dropdown>
@@ -399,13 +399,13 @@ type Items = Array<{
 Данный компонент соответствует требования W3C: [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) и частично [TreeView](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).
 
 - `Tab` - закрывает Dropdown. Перемещает фокус на следующий элемент на странице;
-- `Enter` - открывает/закрывает Dropdown. Если на элементе - выбирает его;
-- `Space` - открывает/закрывает Dropdown. Если на элементе - выбирает его;
+- `Enter` - открывает/закрывает Dropdown. Если на элементе — выбирает его;
+- `Space` - открывает/закрывает Dropdown. Если на элементе — выбирает его;
 - `Home` - открывает Dropdown и перемещает фокус на первый элемент;
 - `End` - открывает Dropdown и перемещает фокус на последний элемент;
 - `PageUp` - перемещает фокус на 10 элементов выше либо в начало списка;
 - `PageDown` - перемещает фокус на 10 элементов ниже либо в конце списка;
 - `ArrowUp` - открывает Dropdown и перемещает фокус на первый элемент. Перемещает фокус на один элемент выше;
 - `ArrowDown` - открывает Dropdown и перемещает фокус на первый элемент. Перемещает фокус на один элемент ниже;
-- `ArrowRight` - если фокус на элементе вложенного списка - открывает его и перемещает фокус на первый элемент;
+- `ArrowRight` - если фокус на элементе вложенного списка — открывает его и перемещает фокус на первый элемент;
 - `ArrowLeft` - закрывает текущий список и перемещает фокус на предыдущий;

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

@@ -41,7 +41,7 @@ export function App() {
 
     return (
         <div>
-            <Flow mainAxisGap="0.5ch" crossAxisGap="1ch" style={{ width: '15ch' }} >
+            <Flow mainAxisGap="0.5ch" crossAxisGap="1ch" style=\{{ width: '15ch' }} >
                 {Array(6)
                     .fill(0)
                     .map((_, i) => (<div key={i} style={style(i)}>{numbers[i]}</div>))}
@@ -77,7 +77,7 @@ export function App() {
                 orientation="vertical"
                 mainAxisGap="0.5ch"
                 crossAxisGap="1ch"
-                style={{ height: '90px' }}
+                style=\{{ height: '90px' }}
             >
                 {Array(6)
                     .fill(0)

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

@@ -20,7 +20,7 @@ import { PropsTable, Description } from '@site/src/components';
 <PropsTable name="NotificationsProvider" />
 
 Поместите `NotificationsProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять модальные окна.
-В качестве свойств можно указать контейнер для оповещений через `frame` и расположение в контейнере через свойство `placement`, как `bottom-right` _(по умолчанию)_ или `bottom-left`.
+В качестве свойств можно указать контейнер для оповещений через `frame`.
 
 ```tsx title="index.ts"
 import ReactDOM from 'react-dom';
@@ -36,10 +36,28 @@ ReactDOM.render(
 );
 ```
 
+### Позиционирование
+
+Позиционирование компонента регулируется с помощью свойства `placement`.
+
+```ts
+type NotificationPlacement = 'center' | 'top' | 'bottom' | 'right' | 'left';
+````
+И производные комбинации, например `bottom-left` или `top-right`.
+
 ### Вызов уведомления
+
+:::info
+Уведомления закрываются автоматически по истечению указанного `timeout` в миллисекундах или если передан `0` или `null` то будут висеть бесконечно.
+:::
+
+:::tip
+`onTimeoutClose` - вызывается при автоматическом закрытии по timeout
+:::
+
 После подключения `NotificationsProvider` станет возможен вызов функции `addNotification`, который приведет к отображению оповещения.
 Функция принимает значения свойств компонента `Notification`, включая необязательное поле `id`. И возвращает сгенерированный или переданный `id`, по которому можно закрыть оповещение через вызов `closeNotification`.
-Оповещение закроется автоматически по истечению указанного `timeout` в миллисекундах или будет висеть вечно, если передан `0` или `null`.
+
 
 ```tsx live
 import React, { useCallback } from 'react';
@@ -51,6 +69,9 @@ export function App() {
             id: 'incoming-call',
             title: 'Входящий вызов',
             children: 'Принять?',
+            onTimeoutClose: () => {
+                console.log("Callback, вызываемый при автоматическом закрытии по timeout.")
+            },
         }, 3000);
     }, []);
 

package/styled-components/es/components/Notification/NotificationsStore.js

@@ -1,4 +1,4 @@
-var _excluded = ["id"];
+var _excluded = ["id", "onTimeoutClose"];
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
@@ -58,6 +58,7 @@ export var closeNotification = function closeNotification(id) {
  */
 export function addNotification(_ref4) {
   var externalId = _ref4.id,
+    onTimeoutClose = _ref4.onTimeoutClose,
     rest = _objectWithoutProperties(_ref4, _excluded);
   var timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2000;
   var id = externalId || "plasma-notification-".concat(Date.now());
@@ -68,7 +69,8 @@ export function addNotification(_ref4) {
   }));
   if (timeout !== 0 && timeout !== null) {
     setTimeout(function () {
-      return closeNotification(id);
+      closeNotification(id);
+      onTimeoutClose === null || onTimeoutClose === void 0 || onTimeoutClose();
     }, timeout);
   }
   return id;

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

@@ -10,8 +10,8 @@ import { PropsTable, Description } from '@site/src/components';
 <PropsTable name="NumberFormat" exclude={['css']} />
 
 ## Использование
-Компонент `NumberFormat` представляет собой поле ввода с поле ввода числовых значений.
-Он реализован на компоненте [TextField](https://plasma.sberdevices.ru/b2c/components/textfield/) 
+Компонент `NumberFormat` представляет собой поле ввода числовых значений.
+Он реализован на компоненте [TextField](https://plasma.sberdevices.ru/{{ name }}/components/textfield/)
 и наследует практически все его свойства (`size`, `view`, `disabled`, `label` и тд.)
 
 ### Разделитель тысяч и десятичных знаков
@@ -146,7 +146,7 @@ export function App() {
 ```
 
 ### Ведущие нули
-Чтобы разрешить в числе ведущие нули, нуджно указать свойство `allowLeadingZeros`:
+Чтобы разрешить в числе ведущие нули, нужно указать свойство `allowLeadingZeros`:
 
 ```tsx live
 import React from 'react';
@@ -165,4 +165,4 @@ export function App() {
         </div>
     );
 }
-```
+```

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

@@ -7,18 +7,18 @@ import { PropsTable, Description } from '@site/src/components';
 
 # Radiobox
 <Description name="Radiobox" />
-<PropsTable name="Radiobox" exclude={['css', 'focused']} />
+<PropsTable name="Radiobox" exclude={['css', 'focused']} include={['defaultChecked']} />
 
 :::caution Устаревшие значения для свойства view
-Актуальным значением для свойства `view` - является `accent`. 
+Актуальным значением для свойства `view` - является `accent`.
 
-Все остальные значения `deprecated` и будут удалены в ближайшее время! 
+Все остальные значения `deprecated` и будут удалены в ближайшее время!
 :::
 
 ## Использование
 Компонент `Radiobox` может содержать лейбл и описание.
 
-По умолчанию, контент внутри лейбла и описания многострочный. 
+По умолчанию, контент внутри лейбла и описания многострочный.
 
 Для того чтобы стал однострочным, необходимо использовать свойство `singleLine`(по умолчанию `false`).
 
@@ -34,14 +34,13 @@ export function App() {
 ```
 
 ## RadioGroup
+
 Компоненты `Radiobox` следует объединять в `RadioGroup`
 
 ```tsx live
-<div>
-    <RadioGroup aria-labelledby="radiogroup-title-id">
-        <H3 id="radiogroup-title-id" style=\{{"margin-bottom": "12px"}}>Заголовок</H3>
-        <Radiobox name="radio-1" label="Радиокнопка 1" description="Описание 1" defaultChecked />
-        <Radiobox name="radio-1" label="Радиокнопка 2" description="Описание 2" />
-    </RadioGroup>
-</div>
+<RadioGroup aria-labelledby="radiogroup-title-id">
+    <H3 id="radiogroup-title-id">Заголовок</H3>
+    <Radiobox name="radio-1" label="Радиокнопка 1" description="Описание 1" defaultChecked />
+    <Radiobox name="radio-1" label="Радиокнопка 2" description="Описание 2" />
+</RadioGroup>
 ```

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

@@ -323,6 +323,10 @@ export function App() {
 ```
 
 ### Обязательность поля
+:::tip
+Наличие индикатора регулируется свойством `hasRequiredIndicator`.
+:::
+
 Обязательность поля задаётся с помощью свойства `required`. 
 Если поле является обязательным, то у компонента появляется специальный индикатор. 
 Изменить расположение индикатора можно с помощью свойства `requiredPlacement`, которое принимает значения `left` и `right`. 
@@ -356,4 +360,4 @@ export function App() {
         </div>
     );
 }
-```
+```

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

@@ -59,7 +59,7 @@ export function App() {
     }
 
     return (
-        <div style={{ display: "block" }} >
+        <div style=\{{ display: "block" }} >
             <SegmentProvider defaultSelected={['label_1']}>
                 <SegmentTemplate/>
             </SegmentProvider>
@@ -103,7 +103,7 @@ export function App() {
     }
 
     return (
-        <div style={{ display: "block" }} >
+        <div style=\{{ display: "block" }} >
             <SegmentProvider defaultSelected={['label_1']} singleSelectedRequired>
                 <SegmentTemplate/>
             </SegmentProvider>
@@ -145,7 +145,7 @@ export function App() {
     }
 
     return (
-        <div style={{ display: "block" }} >
+        <div style=\{{ display: "block" }} >
             <SegmentProvider defaultSelected={['label_1']}>
                 <SegmentTemplate/>
             </SegmentProvider>