@redneckz/wildless-cms-uni-blocks 0.14.839 → 0.14.841

package/src/retail/components/VerifyPhoneDialog/SubmitButton.tsx

@@ -1,17 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type DisabledProps } from '../../../model/DisabledProps';
 import { Button } from '../../../ui-kit/Button/Button';
 import { Text } from '../../../ui-kit/Text/Text';
 
-interface SubmitButtonProps {
-  isDisabled: boolean;
+interface SubmitButtonProps extends DisabledProps {
   onClick: () => void;
   text?: string;
 }
 
-export const SubmitButton = JSX<SubmitButtonProps>(({ isDisabled, onClick, text }) => {
-  return (
-    <Button type="button" onClick={onClick} disabled={isDisabled}>
-      <Text font="font-normal">{text}</Text>
-    </Button>
-  );
-});
+export const SubmitButton = JSX<SubmitButtonProps>(({ disabled = false, onClick, text }) => (
+  <Button type="button" onClick={onClick} disabled={disabled}>
+    <Text font="font-normal">{text}</Text>
+  </Button>
+));

package/src/retail/components/VerifyPhoneDialog/VerifyPhoneDialog.tsx

@@ -122,8 +122,8 @@ export const VerifyPhoneDialog = JSX<VerifyPhoneDialogProps>(
   },
 );
 
-const renderNextButton = (isDisabled: boolean, onClick: () => void) => (
-  <SubmitButton text="Далее" isDisabled={isDisabled} onClick={onClick} />
+const renderNextButton = (disabled: boolean, onClick: () => void) => (
+  <SubmitButton text="Далее" disabled={disabled} onClick={onClick} />
 );
 
 const renderText = (timeNextReq: number, handleSendCode: () => void) =>

package/src/retail/model/RetailFormContent.ts

@@ -1,3 +1,4 @@
+import { type DisabledProps } from '../../model/DisabledProps';
 import { type LabelProps, type TextProps } from '../../model/HeadlineType';
 import { type LinkButtonVersion } from '../../model/LinkButtonVersion';
 import { type NameFieldDef } from './NameFieldDef';
@@ -29,8 +30,8 @@ export type FieldRetailDef = Required &
   TextProps &
   LabelProps &
   ConditionFieldProps &
-  FilledByEsiaProps & {
+  FilledByEsiaProps &
+  DisabledProps & {
     name?: NameFieldDef;
     dadata?: boolean;
-    disabled?: boolean;
   };

package/src/ui-kit/BaseProductTile/BaseProductTileContent.ts

@@ -1,5 +1,6 @@
 import { type Align } from '../../model/Align';
 import { type BulletsProps } from '../../model/Bullets';
+import { type ComponentType } from '../../model/ComponentType';
 import { type HeadlineProps, type LabelProps } from '../../model/HeadlineType';
 import { type BenefitsListContent } from '../BenefitsList/BenefitsListContent';
 import { type ImageContent } from '../Img/ImgProps';
@@ -10,7 +11,7 @@ import { type TagsContent } from '../Tags/TagsContent';
 type UnitList = '₽' | '$' | '€' | '¥';
 
 /** @title Доп. настройки картинки */
-export interface TileImageOptions {
+export interface TileImageOptions extends ComponentType {
   /** @title Картинка справа/текст слева */
   directionRight?: boolean;
   /** @title Выравнивание изображения */
@@ -19,8 +20,6 @@ export interface TileImageOptions {
   isImageSecondary?: boolean;
   /** @title Изображение всегда справа */
   isImageAlwaysOnRight?: boolean;
-  /** @hidden */
-  className?: string;
 }
 
 /** @title Цены */

package/src/ui-kit/BaseTile/renderImageContainer.tsx

@@ -1,4 +1,5 @@
 import { type Align } from '../../model/Align';
+import { type ComponentType } from '../../model/ComponentType';
 import { type VNode } from '../../model/VNode';
 import { style } from '../../utils/style';
 
@@ -10,7 +11,7 @@ const imageAlignmentMap: Record<Align, string> = {
 
 export const renderImageContainer = (
   image: VNode | undefined,
-  { className, imageAlign }: { className?: string; imageAlign?: Align },
+  { className, imageAlign }: ComponentType & { imageAlign?: Align },
 ) =>
   image ? (
     <div

package/src/ui-kit/BenefitItem/BenefitItem.tsx

@@ -1,14 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ComponentType } from '../../model/ComponentType';
 import { type IconVersion } from '../../model/IconVersion';
 import { style } from '../../utils/style';
 import { type BenefitItemContent } from './BenefitItemContent';
 import { renderBenefitIcon } from './renderBenefitIcon';
 import { renderBenefitText } from './renderBenefitText';
 
-export type BenefitItemProps = BenefitItemContent & {
-  className?: string;
-  benefitsVersion?: IconVersion;
-};
+export type BenefitItemProps = BenefitItemContent &
+  ComponentType & {
+    benefitsVersion?: IconVersion;
+  };
 
 export const BenefitItem = JSX<BenefitItemProps>(({ className, benefitsVersion, ..._ }) => (
   <div className={style('flex gap-m min-w-56 items-center', className)} role="listitem">

package/src/ui-kit/BenefitsList/BenefitsListProps.ts

@@ -1,6 +1,6 @@
+import { type ComponentType } from '../../model/ComponentType';
 import { type BenefitsListContent } from './BenefitsListContent';
 
-export interface BenefitsListProps extends BenefitsListContent {
-  className?: string;
+export interface BenefitsListProps extends BenefitsListContent, ComponentType {
   descriptionClassName?: string;
 }

package/src/ui-kit/Button/Button.tsx

@@ -3,12 +3,13 @@ import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
 import { handlerDecorator } from '../../external/handlerDecorator';
 import { type AspectsDef } from '../../model/AspectsProps';
 import { type ButtonVersion } from '../../model/ButtonVersion';
+import { type ComponentType } from '../../model/ComponentType';
 import { type ColorPalette } from '../../model/ContentPageBase';
+import { type DisabledProps } from '../../model/DisabledProps';
 import { getAspectsAttributes } from '../../utils/dataAttributes';
 import { noop } from '../../utils/noop';
 import { style } from '../../utils/style';
 import { type ARIAProps } from '../ARIAProps';
-import { type ControlStateProps } from '../ControlStateProps';
 import { type PreventableEvent } from '../PreventableEvent';
 
 export const themeStyle: Record<ButtonVersion, string> = {
@@ -33,8 +34,7 @@ const embeddedStyle = style(
 
 const disabledStyle = style('bg-main-gray text-main-disabled cursor-not-allowed');
 
-export interface ButtonProps extends ControlStateProps, ARIAProps {
-  className?: string;
+export interface ButtonProps extends DisabledProps, ARIAProps, ComponentType {
   type?: 'button' | 'submit' | 'reset';
   version?: ButtonVersion;
   shape?: 'default' | 'round' | 'square';

package/src/ui-kit/Button/ButtonTitle.tsx

@@ -1,11 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ComponentType } from '../../model/ComponentType';
 import { style } from '../../utils/style';
 
-interface ButtonTitleProps {
-  className?: string;
-}
-
-export const ButtonTitle = JSX<ButtonTitleProps>(({ className, children }) => (
+export const ButtonTitle = JSX<ComponentType>(({ className, children }) => (
   <span
     className={style(
       'inline-flex items-center text-start gap-s group-[]/btn-embedded:text-primary-main',

package/src/ui-kit/Calculator/CalculatorProps.ts

@@ -1,4 +1,5 @@
 import { type JSONRefObject } from '../../data/JSONRefObject';
+import { type ComponentType } from '../../model/ComponentType';
 import { type Footnote } from '../../model/Footnote';
 import { type TitleProps } from '../../model/HeadlineType';
 import { type ButtonsSectionContent } from '../LinkButton/ButtonsSectionContent';
@@ -22,8 +23,7 @@ export type RateProps = {
   rate: number;
 };
 
-export interface CalcCurrencyProps {
-  className?: string;
+export interface CalcCurrencyProps extends ComponentType {
   title?: string;
   value?: number | string;
   fractionDigits?: number;

package/src/ui-kit/Calculator/renderBinaryRadioButtonGroup.tsx

@@ -1,3 +1,7 @@
+import { type ComponentType } from '../../model/ComponentType';
+import type { ControlProps } from '../../model/ControlProps';
+import { type DisabledProps } from '../../model/DisabledProps';
+import { type TitleProps } from '../../model/HeadlineType';
 import { type ListOrientation } from '../../model/ListOrientation';
 import {
   RadioButtonGroup,
@@ -5,14 +9,13 @@ import {
 } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
 import { Text } from '../../ui-kit/Text/Text';
 
-export interface BinaryRadioButtonGroupProps {
+export interface BinaryRadioButtonGroupProps
+  extends ComponentType,
+    DisabledProps,
+    TitleProps,
+    ControlProps<boolean> {
   items: [truthy: RadioButtonItem, falsy: RadioButtonItem];
-  title?: string;
   orientation?: ListOrientation;
-  value?: boolean;
-  className?: string;
-  onChange?: (value: boolean) => void;
-  disabled?: boolean;
 }
 
 export const renderBinaryRadioButtonGroup = ({

package/src/ui-kit/Checkbox/CheckboxProps.ts

@@ -1,9 +1,5 @@
-export interface CheckboxProps {
-  className?: string;
-  value?: boolean;
-  text?: string;
-  disabled?: boolean;
+import { type CommonInputProps } from '../../model/CommonInputProps';
+
+export interface CheckboxProps extends CommonInputProps<boolean> {
   isRadio?: boolean;
-  onChange?: (value: boolean) => void;
-  error?: string;
 }

package/src/ui-kit/DatePicker/DatePicker.tsx

@@ -2,10 +2,12 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { useElementSpace } from '../../hooks/useElementSpace';
+import { type ComponentType } from '../../model/ComponentType';
+import { type ControlProps } from '../../model/ControlProps';
+import { type DisabledProps } from '../../model/DisabledProps';
 import { type LabelProps } from '../../model/HeadlineType';
 import { type IconVersion } from '../../model/IconVersion';
 import { style } from '../../utils/style';
-import { type ControlProps } from '../ControlProps';
 import { Icon } from '../Icon/Icon';
 import { type IconName } from '../Icon/IconProps';
 import { renderLabel } from '../Input/renderLabel';
@@ -28,12 +30,10 @@ const SELECT_PROPS: { className: string; iconVersion: IconVersion; isBorder: boo
   isBorder: false,
 };
 
-interface DatePickerProps extends ControlProps<Date>, LabelProps {
-  className?: string;
+interface DatePickerProps extends ControlProps<Date>, ComponentType, LabelProps, DisabledProps {
   minDate?: Date;
   maxDate?: Date;
   valid?: boolean;
-  disabled?: boolean;
 }
 
 export const DatePicker = JSX<DatePickerProps>(

package/src/ui-kit/DatePicker/DatePickerControl.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ControlProps } from '../../model/ControlProps';
 import { type DefaultControlType } from '../../model/DefaultControlType';
 import { getRequiredLabel } from '../../utils/getRequiredLabel';
 import { style } from '../../utils/style';
-import { type ControlProps } from '../ControlProps';
 import { renderErrorText } from '../Input/renderErrorText';
 import { DatePicker } from './DatePicker';
 

package/src/ui-kit/DatePicker/DatePickerInput.tsx

@@ -1,5 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { type ComponentType } from '../../model/ComponentType';
+import { type DisabledProps } from '../../model/DisabledProps';
 import { type IconVersion } from '../../model/IconVersion';
 import { normalizeWithMask } from '../../utils/normalizeWithMask';
 import { style } from '../../utils/style';
@@ -14,14 +16,12 @@ const ICON_PROPS: { name: IconName; iconVersion: IconVersion; width: string; hei
   height: '24',
 };
 
-interface DatePickerInputProps {
+interface DatePickerInputProps extends ComponentType, DisabledProps {
   setSelectedMonth: (selectedMonth: number) => void;
   setSelectedYear: (selectedYear: number) => void;
-  className?: string;
   value?: string;
   onChange?: (value: Date) => void;
   onClick?: () => void;
-  disabled?: boolean;
 }
 
 interface UpdateSelectedDateProps {

package/src/ui-kit/DatePicker/renderDatePickerForm.tsx

@@ -1,3 +1,5 @@
+import { type ControlProps } from '../../model/ControlProps';
+import { type DisabledProps } from '../../model/DisabledProps';
 import { formatDate } from '../../utils/formatDate';
 import { style } from '../../utils/style';
 import { DatePickerInput } from './DatePickerInput';
@@ -14,15 +16,13 @@ export const renderDatePickerForm = ({
   setSelectedMonth,
   setSelectedYear,
   disabled = false,
-}: {
-  handleChangeVisibleCalendar: () => void;
-  value: Date | undefined;
-  valid: boolean;
-  setSelectedMonth: (selectedMonth: number) => void;
-  setSelectedYear: (selectedYear: number) => void;
-  onChange?: (value: Date) => void;
-  disabled?: boolean;
-}) => (
+}: DisabledProps &
+  ControlProps<Date> & {
+    handleChangeVisibleCalendar: () => void;
+    valid: boolean;
+    setSelectedMonth: (selectedMonth: number) => void;
+    setSelectedYear: (selectedYear: number) => void;
+  }) => (
   <DatePickerInput
     onChange={onChange}
     disabled={disabled}

package/src/ui-kit/DatePicker/useDatePickerManager.ts

@@ -1,5 +1,6 @@
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useOutsideClick } from '@redneckz/uni-jsx/lib/hooks/useOutsideClick';
+import { type ControlProps } from '../../model/ControlProps';
 import { type Option } from '../Select/Option';
 import { getYears } from './getYears';
 import { months } from './months';
@@ -10,15 +11,13 @@ const YEARS_OPTIONS = getYears()
   .reverse()
   .map((key) => ({ key: String(key) }));
 
-interface UseDatePickerManagerParams {
+interface UseDatePickerManagerParams extends ControlProps<Date> {
   onShowCalendar: (bool: boolean) => void;
   showCalendar: boolean;
   selectedMonth: number;
   onMonthSelect: (num: number) => void;
   selectedYear: number;
   onYearSelect: (num: number) => void;
-  onChange?: (date: Date) => void;
-  value?: Date;
 }
 
 export const useDatePickerManager = ({
@@ -108,12 +107,10 @@ const handleChangeMonth = ({
   selectedMonth,
   value,
   onChange,
-}: {
+}: ControlProps<Date> & {
   maxDateOfMonth: number;
   selectedYear: number;
   selectedMonth: number;
-  value?: Date;
-  onChange?: (value: Date) => void;
 }) => {
   value &&
     onChange?.(new Date(selectedYear, selectedMonth, Math.min(maxDateOfMonth, value.getDate())));

package/src/ui-kit/DialogManager/CloseButton.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ComponentType } from '../../model/ComponentType';
 import { style } from '../../utils/style';
 import { Icon } from '../Icon/Icon';
 import { type PreventableEvent } from '../PreventableEvent';
 
-interface CloseButtonProps {
-  className?: string;
+interface CloseButtonProps extends ComponentType {
   onClose?: (ev: PreventableEvent) => void;
 }
 

package/src/ui-kit/DialogManager/Dialog.tsx

@@ -1,11 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ComponentType } from '../../model/ComponentType';
 import { type VNode } from '../../model/VNode';
 import { style } from '../../utils/style';
 import { type PreventableEvent } from '../PreventableEvent';
 import { CloseButton } from './CloseButton';
 
-export interface DialogProps {
-  className?: string;
+export interface DialogProps extends ComponentType {
   head?: VNode;
   onClose?: () => void;
   onClick?: (e: PreventableEvent) => void;

package/src/ui-kit/Foldable/Foldable.tsx

@@ -1,10 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ComponentType } from '../../model/ComponentType';
 import { style } from '../../utils/style';
 import { type ARIAProps } from '../ARIAProps';
 
-export interface FoldableProps extends ARIAProps {
-  className?: string;
-}
+export interface FoldableProps extends ARIAProps, ComponentType {}
 
 // TODO Не особо полезно, в итоге
 export const Foldable = JSX<FoldableProps>(({ className, role = 'tablist', children }) => (

package/src/ui-kit/Foldable/FoldableSection.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useRef } from '@redneckz/uni-jsx/lib/hooks';
 import { useResizeObserver } from '../../hooks/useResizeObserver';
+import { type ComponentType } from '../../model/ComponentType';
 import { style } from '../../utils/style';
 
-export interface FoldableSectionProps {
-  className?: string;
+export interface FoldableSectionProps extends ComponentType {
   isUnfolded?: boolean;
 }
 

package/src/ui-kit/Heading/HeadingProps.ts

@@ -1,3 +1,4 @@
+import { type ComponentType } from '../../model/ComponentType';
 import { type TitleProps } from '../../model/HeadlineType';
 
 /**
@@ -17,7 +18,4 @@ export interface HeadingCommonProps extends TitleProps {
   headingType?: HeadingType;
 }
 
-export interface HeadingProps extends HeadingCommonProps {
-  /** @hidden */
-  className?: string;
-}
+export interface HeadingProps extends HeadingCommonProps, ComponentType {}

package/src/ui-kit/Icon/Icon.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useRouter } from '../../external/useRouter';
+import { type ComponentType } from '../../model/ComponentType';
 import { type IconVersion } from '../../model/IconVersion';
 import { projectSettings } from '../../ProjectSettings';
 import { adjustHref } from '../../utils/adjustHref';
@@ -87,7 +88,7 @@ const getInlineStyle = (className?: string, height?: string) =>
     : { height: isOnlyDigits(height) ? `${height}px` : height, width: 'auto' };
 
 // TODO И это тоже
-const Background = JSX<{ className?: string }>(({ className, children }) =>
+const Background = JSX<ComponentType>(({ className, children }) =>
   className ? (
     <div role="img" className={className}>
       {children}

package/src/ui-kit/Icon/IconProps.ts

@@ -1,4 +1,5 @@
 import { type IconName } from '../../icons/IconName';
+import { type ComponentType } from '../../model/ComponentType';
 import { type IconVersion } from '../../model/IconVersion';
 
 export type { IconName };
@@ -38,9 +39,9 @@ export interface IconCompatibilityFields {
   height?: string;
 }
 
-export type IconProps = IconCompatibilityFields & {
-  className?: string;
-  imageClassName?: string;
-  name?: IconName;
-  iconVersion?: IconVersion;
-};
+export type IconProps = IconCompatibilityFields &
+  ComponentType & {
+    imageClassName?: string;
+    name?: IconName;
+    iconVersion?: IconVersion;
+  };

package/src/ui-kit/Img/ImgProps.ts

@@ -1,3 +1,4 @@
+import { type ComponentType } from '../../model/ComponentType';
 import { type Picture } from '../../model/Picture';
 import { type IconCompatibilityFields } from '../Icon/IconProps';
 
@@ -5,7 +6,6 @@ export interface ImageContent {
   image?: Picture;
 }
 
-export interface ImageProps extends ImageContent, IconCompatibilityFields {
-  className?: string;
+export interface ImageProps extends ImageContent, IconCompatibilityFields, ComponentType {
   imageClassName?: string;
 }

package/src/ui-kit/InnerTable/InnerTableButton.tsx

@@ -1,14 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type TariffsTableCellIndexProps } from '../../components/TariffsTable/TariffsTableContent';
+import { type ComponentType } from '../../model/ComponentType';
 import { DefaultFoldButton } from '../Foldable/DefaultFoldButton';
 import { type TariffsTableInnerContent } from './InnerTableProps';
 
 export interface InnerTableButtonProps
   extends Partial<TariffsTableCellIndexProps>,
-    TariffsTableInnerContent {
+    TariffsTableInnerContent,
+    ComponentType {
   onClick?: () => void;
   isOpen?: boolean;
-  className?: string;
 }
 
 export const TableInnerButton = JSX<InnerTableButtonProps>(

package/src/ui-kit/Input/InputControl.tsx

@@ -1,73 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
-import { useOutsideClick } from '@redneckz/uni-jsx/lib/hooks/useOutsideClick';
-import { getRequiredLabel } from '../../utils/getRequiredLabel';
-import { noop } from '../../utils/noop';
-import { style } from '../../utils/style';
-import { Input } from './Input';
 import { type InputProps } from './InputProps';
-import { renderErrorText } from './renderErrorText';
+import { InputWrapper } from './InputWrapper';
 
-export const InputControl = JSX<InputProps>(
-  ({
-    className,
-    label,
-    value = '',
-    placeholder,
-    error,
-    errors,
-    onChange = noop,
-    onBlur,
-    isTextarea,
-    type,
-    isInteger = false,
-    maxLength,
-    disabled = false,
-  }) => {
-    const [isOpen, { setFalse: close, setTrue: open }] = useBool();
-    const popupRef = useOutsideClick<HTMLDivElement>(close);
+export const InputControl = JSX<InputProps>((props) => {
+  const [isOpen, { setFalse: close, setTrue: open }] = useBool();
 
-    const handleChange = useCallback(
-      (v: string) => {
-        !isOpen && open();
-        maxLength ? v.length <= maxLength && onChange(v) : onChange(v);
-      },
-      [isOpen, onChange],
-    );
-
-    useEffect(() => {
-      isInteger && value ? onChange(normalizeInteger(value)) : null;
-    }, [value]);
-
-    return (
-      <div
-        className={style('shrink-0 w-full', className)}
-        ref={popupRef}
-        onBlur={close}
-        onFocus={open}
-      >
-        <div>
-          <Input
-            disabled={disabled}
-            type={type || 'text'}
-            aria-label={label}
-            label={getRequiredLabel({ label, errors })}
-            valid={Boolean(!error)}
-            value={value}
-            onChange={handleChange}
-            onBlur={onBlur}
-            isTextarea={isTextarea}
-            placeholder={getPlaceholder(placeholder, errors, label)}
-          />
-        </div>
-        {renderErrorText(error)}
-      </div>
-    );
-  },
-);
-
-const normalizeInteger = (val = '') => val.replace(/[^\d]+/g, '');
-
-const getPlaceholder = (placeholder?: string, errors?: string[], label?: string) =>
-  errors && !label ? `${placeholder}*` : placeholder;
+  return <InputWrapper isOpen={isOpen} onOpen={open} onClose={close} {...props} />;
+});

package/src/ui-kit/Input/InputProps.ts

@@ -1,6 +1,6 @@
+import { type ControlProps } from '../../model/ControlProps';
 import { type DefaultControlType } from '../../model/DefaultControlType';
 import { type InputTypes } from '../../model/InputTypes';
-import { type ControlProps } from '../ControlProps';
 import { type PreventableEventWithTarget } from '../PreventableEvent';
 
 export interface InputProps<V = string> extends DefaultControlType, ControlProps<V> {
@@ -11,9 +11,9 @@ export interface InputProps<V = string> extends DefaultControlType, ControlProps
   onFocus?: (ev: PreventableEventWithTarget) => void;
   onBlur?: (ev?: PreventableEventWithTarget) => void;
   valid?: boolean;
-  disabled?: boolean;
   autoFocus?: boolean;
   isTextarea?: boolean;
   maxLength?: number;
   isInteger?: boolean;
+  inputRef?: { current: HTMLDivElement | null };
 }