Миграция с v7 на v8

<ActionSheet
- onClose={() => {}}
+ onClosed={() => {}}
  title="Заголовок"
>
  <ActionSheetItem>Действие</ActionSheetItem>
</ActionSheet>

<ActionSheet
  onClosed={() => setPopout(null)}
  slotProps={{
    iosCloseItem: {
      children: i18n("cancel"),
    },
  }}
>
  <ActionSheetItem onClick={handleAction}>Действие</ActionSheetItem>
</ActionSheet>

<Alert
  title="Подтвердите действие"
  description="Вы уверены?"
- onClose={() => setPopout(null)}
+ onClosed={() => setPopout(null)}
/>

<Snackbar
- onClose={() => setSnackbar(null)}
+ onClosed={() => setSnackbar(null)}
>
  Сообщение
</Snackbar>

<PopoutWrapper
- fixed
/>
 
<PopoutWrapper
- fixed={true}
/>
 
<PopoutWrapper
- fixed={false}
+ strategy="none"
/>

<RichCell
  before={<Avatar size={48} />}
  overTitle="онлайн"
  subtitle="Санкт-Петербург"
- after="Текст"
- afterCaption="Подтекст"
- afterAlign="start"
+ meta="Текст"
+ submeta="Подтекст"
>
  Имя пользователя
</RichCell>

<RichCell
  before={<Avatar size={48} />}
  subtitle="Санкт-Петербург"
  after={<Icon28Like />}
  afterAlign="center"
>
  Имя пользователя
</RichCell>

<Banner
  mode="image"
+ imageTheme="dark"
  background={<div style={{ backgroundImage: 'url(...)' }} />}
>
  Контент
</Banner>

<Calendar
- onChange={(value: Date | undefined) => {
-   if (value) {
-     setValue(value);
-   }
- }}
+ onChange={(value: Date) => setValue(value)}
/>

<Input
- getRef={inputRef}
- data-testid="my-input"
- aria-label="Введите текст"
+ slotProps={{
+   input: {
+     getRootRef: inputRef,
+     "data-testid": "my-input",
+     "aria-label": "Введите текст"
+   }
+ }}
/>

<Textarea
- getRef={textareaRef}
- data-testid="my-textarea"
+ slotProps={{
+   textarea: {
+     getRootRef: textareaRef,
+     "data-testid": "my-textarea"
+   }
+ }}
/>

<Checkbox
- getRef={checkboxRef}
- data-testid="my-checkbox"
- aria-describedby="hint"
+ slotProps={{
+   input: {
+     getRootRef: checkboxRef,
+     "data-testid": "my-checkbox",
+     "aria-describedby": "hint"
+   }
+ }}
>
  Согласен
</Checkbox>
 
<Switch
- getRef={switchRef}
- data-testid="my-switch"
+ slotProps={{
+   input: {
+     getRootRef: switchRef,
+     "data-testid": "my-switch"
+   }
+ }}
/>
 
<Radio
- getRef={radioRef}
+ slotProps={{
+   input: {
+     getRootRef: radioRef
+   }
+ }}
>
  Вариант
</Radio>

<File
- getRef={fileRef}
- data-testid="file-input"
+ slotProps={{
+   input: {
+     getRootRef: fileRef,
+     "data-testid": "file-input"
+   }
+ }}
>
  Выбрать файл
</File>

<CustomSelect
- data-testid="select"
- aria-label="Выберите значение"
+ slotProps={{
+   input: {
+     "data-testid": "select",
+     "aria-label": "Выберите значение"
+   }
+ }}
  options={options}
  value={value}
  onChange={onChange}
/>

<ChipsSelect
- getRef={inputRef}
- data-testid="chips-select"
- aria-describedby="hint"
+ slotProps={{
+   input: {
+     getRootRef: inputRef,
+     "data-testid": "chips-select",
+     "aria-describedby": "hint"
+   }
+ }}
  value={value}
  onChange={onChange}
/>

<SplitLayout
- className="my-layout"
- data-testid="layout"
+ slotProps={{
+   content: {
+     className: "my-layout",
+     "data-testid": "layout"
+   }
+ }}
  header={<PanelHeader />}
>
  <SplitCol>Контент</SplitCol>
</SplitLayout>

- <AdaptivityProvider sizeX="compact">
+ <AdaptivityProvider viewWidth={ViewWidth.MOBILE}>
 
- <AdaptivityProvider sizeX="regular">
+ <AdaptivityProvider viewWidth={ViewWidth.SMALL_TABLET}>
 
- <AdaptivityProvider sizeY="compact">
+ <AdaptivityProvider density="compact">
 
- <AdaptivityProvider sizeY="regular">
+ <AdaptivityProvider density="regular">
 
- <AdaptivityProvider sizeX="compact" sizeY="compact">
+ <AdaptivityProvider viewWidth={ViewWidth.MOBILE} density="compact">
 
- <AdaptivityProvider sizeX="regular" sizeY="regular">
+ <AdaptivityProvider viewWidth={ViewWidth.SMALL_TABLET} density="regular">
 
- <AppRootProvider sizeX="regular" sizeY="compact">
+ <AppRootProvider viewWidth={ViewWidth.SMALL_TABLET} density="compact">
 
- <AppRootProvider sizeX="compact" sizeY="regular">
+ <AppRootProvider viewWidth={ViewWidth.MOBILE} density="regular">

- const [activeModal, setActiveModal] = useState(null);
-
- <ModalRoot activeModal={activeModal} onClose={() => setActiveModal(null)}>
-   <ModalPage id="modal" onClose={() => setActiveModal(null)}>
-     Контент
-   </ModalPage>
- </ModalRoot>
 
+ const [modalApi, modalHolder] = useModalManager();
+
+ // Открытие модального окна
+ modalApi.openModalPage({
+   children: <div>Контент</div>,
+ });
+
+ // В JSX
+ {modalHolder}

- <FixedLayout vertical="top">
+ <Box position="sticky" insetBlockStart={0}>
    Content
- </FixedLayout>
+ </Box>
 
- <FixedLayout vertical="bottom">
+ <Box position="sticky" insetBlockEnd={0}>
    Content
- </FixedLayout>
+ </Box>

<RichCell
- afterCaption="Подтекст"
+ submeta="Подтекст"
>
  Контент
</RichCell>

<ActionSheet
  onClosed={() => setPopout(null)}
  title="Выберите действие"
- iosCloseItem={
-   <ActionSheetItem mode="cancel" onClick={() => setPopout(null)}>
-     Отмена
-   </ActionSheetItem>
- }
+ slotProps={{
+    iosCloseItem: {
+      children: "Отмена",
+      onClick: () => setPopout(null)
+    }
+  }}
+>
+  <ActionSheetItem onClick={handleAction}>Действие</ActionSheetItem>
</ActionSheet>

<ActionSheet
  onClosed={() => setPopout(null)}
  title="Выберите действие"
- iosCloseItem={
-   <ActionSheetItem mode="cancel" onClick={() => setPopout(null)}>
-     Отмена
-   </ActionSheetItem>
- }
+ iosCloseItem={
+   <ActionSheetDefaultIosCloseItem onClick={() => setPopout(null)}>
+     Отмена
+   </ActionSheetDefaultIosCloseItem>
+ }
>
  <ActionSheetItem onClick={handleAction}>Действие</ActionSheetItem>
</ActionSheet>