@roqua/quby-frontend 0.10.7 → 0.10.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/AnswerPage.d.ts +5 -2
- package/dist/components/MainLabel.d.ts +3 -2
- package/dist/components/Paginator.d.ts +6 -3
- package/dist/components/PanelContent.d.ts +3 -2
- package/dist/components/PanelItem.d.ts +3 -2
- package/dist/components/ProgressBar.d.ts +2 -1
- package/dist/components/Quby.d.ts +5 -2
- package/dist/components/QuestionDescription.d.ts +2 -1
- package/dist/components/QuestionWrapper.d.ts +3 -2
- package/dist/components/SubQuestions.d.ts +3 -2
- package/dist/components/ValidationErrors.d.ts +3 -2
- package/dist/components/index.d.ts +2 -2
- package/dist/components/items/HtmlItem.d.ts +3 -2
- package/dist/components/items/InfoItem.d.ts +3 -2
- package/dist/components/items/QuestionItem.d.ts +2 -1
- package/dist/components/items/UnknownItem.d.ts +3 -2
- package/dist/components/questions/CheckBoxQuestion.d.ts +3 -2
- package/dist/components/questions/CountrySelectQuestion.d.ts +3 -2
- package/dist/components/questions/DatePartsQuestion.d.ts +3 -2
- package/dist/components/questions/FloatQuestion.d.ts +3 -2
- package/dist/components/questions/IntegerQuestion.d.ts +3 -2
- package/dist/components/questions/OldSliderQuestion.d.ts +3 -2
- package/dist/components/questions/RadioQuestion.d.ts +3 -2
- package/dist/components/questions/ScaleQuestion.d.ts +3 -2
- package/dist/components/questions/SelectQuestion.d.ts +3 -2
- package/dist/components/questions/SliderQuestion.d.ts +3 -2
- package/dist/components/questions/SplitToUnitsQuestion.d.ts +3 -2
- package/dist/components/questions/StringQuestion.d.ts +3 -2
- package/dist/components/questions/TextareaQuestion.d.ts +3 -2
- package/dist/core/calculations.d.ts +8 -4
- package/dist/core/curlies_interpolator.d.ts +3 -2
- package/dist/core/index.d.ts +7 -7
- package/dist/core/panel_logic.d.ts +3 -2
- package/dist/core/quby_context.d.ts +3 -2
- package/dist/core/questionnaire.d.ts +3 -2
- package/dist/core/questionnaire_json.d.ts +16 -2
- package/dist/core/response.d.ts +5 -4
- package/dist/core/response_json.d.ts +3 -2
- package/dist/core/validators.d.ts +3 -2
- package/dist/core/visibility_rules.d.ts +3 -2
- package/dist/i18n.d.ts +2 -1
- package/dist/index.d.ts +3 -2
- package/dist/logic/index.d.ts +3 -3
- package/dist/logic/map_css_vars.d.ts +1 -0
- package/dist/logic/use_might_become_valid.d.ts +2 -1
- package/dist/logic/use_question_shortkeys.d.ts +3 -2
- package/dist/quby-frontend.es.js +9778 -9591
- package/dist/quby-frontend.umd.js +79 -79
- package/dist/stories/_helpers.d.ts +4 -4
- package/package.json +9 -1
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { IDisplayOptions, IInterpolateTextvars, Questionnaire, Response } from
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { IDisplayOptions, IInterpolateTextvars, Questionnaire, Response } from '../core';
|
|
3
|
+
|
|
3
4
|
export declare const InterpolateCurliesContext: React.Context<IInterpolateTextvars>;
|
|
4
5
|
interface Props {
|
|
5
6
|
questionnaire: Questionnaire;
|
|
@@ -7,6 +8,8 @@ interface Props {
|
|
|
7
8
|
displayOptions: IDisplayOptions;
|
|
8
9
|
allowSkipValidation?: boolean;
|
|
9
10
|
onSave: () => void;
|
|
11
|
+
onAbort?: () => void;
|
|
12
|
+
onPreviousQuestionnaire?: () => void;
|
|
10
13
|
}
|
|
11
14
|
export declare const AnswerPage: React.FunctionComponent<Props>;
|
|
12
15
|
export {};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { IDisplayOptions } from
|
|
3
|
-
import { PanelLogic } from
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { IDisplayOptions } from '../core';
|
|
3
|
+
import { PanelLogic } from '../core/panel_logic';
|
|
4
|
+
|
|
4
5
|
export interface INavigationCallbacks {
|
|
5
6
|
done: () => void;
|
|
6
7
|
prev?: () => void;
|
|
@@ -14,6 +15,8 @@ type CanProceed = boolean;
|
|
|
14
15
|
interface Props {
|
|
15
16
|
beforeNext: (panelIndex: number) => CanProceed;
|
|
16
17
|
panelLogic: PanelLogic;
|
|
18
|
+
onPreviousQuestionnaire?: () => void;
|
|
19
|
+
onAbort?: () => void;
|
|
17
20
|
onDone: () => void;
|
|
18
21
|
onFocus: () => void;
|
|
19
22
|
nextSavePressWillOnlyRunMinimalValidations: boolean;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { Response, IDisplayOptions, IResponseJson } from
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { Response, IDisplayOptions, IResponseJson } from '../core';
|
|
3
|
+
|
|
3
4
|
export interface Props {
|
|
4
5
|
questionnaireJson: any;
|
|
5
6
|
responseJson: IResponseJson;
|
|
@@ -7,6 +8,8 @@ export interface Props {
|
|
|
7
8
|
unsavedResponseWarning?: string;
|
|
8
9
|
allowSkipValidation?: boolean;
|
|
9
10
|
onSave: (response: Response) => void;
|
|
11
|
+
onAbort?: (response: Response) => void;
|
|
12
|
+
onPreviousQuestionnaire?: (response: Response) => void;
|
|
10
13
|
newLayout?: boolean;
|
|
11
14
|
darkMode?: boolean;
|
|
12
15
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
1
|
+
export * from './AnswerPage';
|
|
2
|
+
export * from './Quby';
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { ICheckBoxQuestion, IFieldState, SetQuestionRef } from
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { ICheckBoxQuestion, IFieldState, SetQuestionRef } from '../../core';
|
|
3
|
+
|
|
3
4
|
type CheckBoxFieldState = IFieldState<Set<string>>;
|
|
4
5
|
interface Props {
|
|
5
6
|
question: ICheckBoxQuestion;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { IFieldState, IStringQuestion, SetQuestionRef } from
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { IFieldState, IStringQuestion, SetQuestionRef } from '../../core';
|
|
3
|
+
|
|
3
4
|
interface Props {
|
|
4
5
|
question: IStringQuestion;
|
|
5
6
|
fieldState: IFieldState<string>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { DatePartsComponent, IDatePartsQuestion, IFieldState, SetQuestionRef } from
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { DatePartsComponent, IDatePartsQuestion, IFieldState, SetQuestionRef } from '../../core';
|
|
3
|
+
|
|
3
4
|
interface Props {
|
|
4
5
|
question: IDatePartsQuestion;
|
|
5
6
|
fieldState: IFieldState<Map<DatePartsComponent, string>>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { IFieldState, IFloatQuestion, SetQuestionRef } from
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { IFieldState, IFloatQuestion, SetQuestionRef } from '../../core';
|
|
3
|
+
|
|
3
4
|
interface Props {
|
|
4
5
|
question: IFloatQuestion;
|
|
5
6
|
fieldState: IFieldState<number>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { IFieldState, IIntegerQuestion, SetQuestionRef } from
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { IFieldState, IIntegerQuestion, SetQuestionRef } from '../../core';
|
|
3
|
+
|
|
3
4
|
interface Props {
|
|
4
5
|
question: IIntegerQuestion;
|
|
5
6
|
fieldState: IFieldState<number>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { IFieldState, ISliderQuestion, SetQuestionRef } from
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { IFieldState, ISliderQuestion, SetQuestionRef } from '../../core';
|
|
3
|
+
|
|
3
4
|
interface Props {
|
|
4
5
|
question: ISliderQuestion;
|
|
5
6
|
fieldState: IFieldState<number>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { IFieldState, IRadioQuestion, SetQuestionRef } from
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { IFieldState, IRadioQuestion, SetQuestionRef } from '../../core';
|
|
3
|
+
|
|
3
4
|
interface Props {
|
|
4
5
|
question: IRadioQuestion;
|
|
5
6
|
fieldState: IFieldState<string>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { IFieldState, IScaleQuestion, SetQuestionRef } from
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { IFieldState, IScaleQuestion, SetQuestionRef } from '../../core';
|
|
3
|
+
|
|
3
4
|
interface Props {
|
|
4
5
|
question: IScaleQuestion;
|
|
5
6
|
fieldState: IFieldState<string>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { IFieldState, ISelectQuestion, SetQuestionRef } from
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { IFieldState, ISelectQuestion, SetQuestionRef } from '../../core';
|
|
3
|
+
|
|
3
4
|
interface Props {
|
|
4
5
|
question: ISelectQuestion;
|
|
5
6
|
fieldState: IFieldState<string>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { IFieldState, ISliderQuestion, SetQuestionRef } from
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { IFieldState, ISliderQuestion, SetQuestionRef } from '../../core';
|
|
3
|
+
|
|
3
4
|
interface Props {
|
|
4
5
|
question: ISliderQuestion;
|
|
5
6
|
fieldState: IFieldState<number>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { IFieldState, ISplitToUnitsQuestion, SetQuestionRef } from
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { IFieldState, ISplitToUnitsQuestion, SetQuestionRef } from '../../core';
|
|
3
|
+
|
|
3
4
|
interface Props {
|
|
4
5
|
question: ISplitToUnitsQuestion;
|
|
5
6
|
fieldState: IFieldState<number>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { IFieldState, IStringQuestion, SetQuestionRef } from
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { IFieldState, IStringQuestion, SetQuestionRef } from '../../core';
|
|
3
|
+
|
|
3
4
|
interface Props {
|
|
4
5
|
question: IStringQuestion;
|
|
5
6
|
fieldState: IFieldState<string>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { ITextareaQuestion, IFieldState } from
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { ITextareaQuestion, IFieldState } from '../../core';
|
|
3
|
+
|
|
3
4
|
interface Props {
|
|
4
5
|
question: ITextareaQuestion;
|
|
5
6
|
fieldState: IFieldState<string>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { ICalculation, INumberCalculation, ISexpVariables } from './questionnaire_json';
|
|
1
|
+
import { IBooleanCalculation, ICalcBooleanReducer, ICalcComparer, ICalculation, INumberCalculation, ISexpVariables } from './questionnaire_json';
|
|
2
2
|
import { Response } from './response';
|
|
3
|
+
|
|
3
4
|
type INumberReducer = (acc: number, value: number) => number;
|
|
4
5
|
export declare class Calculations {
|
|
5
6
|
sexpVariables: ISexpVariables;
|
|
@@ -8,17 +9,20 @@ export declare class Calculations {
|
|
|
8
9
|
};
|
|
9
10
|
response: Response;
|
|
10
11
|
results: {
|
|
11
|
-
[key: string]: string | number | null;
|
|
12
|
+
[key: string]: string | number | boolean | null;
|
|
12
13
|
};
|
|
13
14
|
constructor(sexpVariables: ISexpVariables, response: Response);
|
|
14
15
|
handleValueChanged(key: string): void;
|
|
15
|
-
calculate(calculation: ICalculation): string | number | null;
|
|
16
|
-
calculateNumber(calculation: INumberCalculation)
|
|
16
|
+
calculate(calculation: ICalculation): string | number | null | boolean;
|
|
17
|
+
calculateNumber: (calculation: INumberCalculation) => number | null;
|
|
18
|
+
calculateBoolean: (calculation: IBooleanCalculation) => boolean | null;
|
|
17
19
|
static numberReducers: {
|
|
18
20
|
[key: string]: INumberReducer;
|
|
19
21
|
};
|
|
20
22
|
stringValue(key: string): string | null;
|
|
21
23
|
reduce(calculations: INumberCalculation[], op: "sum" | "subtract" | "multiply" | "divide"): number | null;
|
|
24
|
+
compare: (calculation: ICalcComparer) => boolean | null;
|
|
25
|
+
booleanReduce: (calculation: ICalcBooleanReducer) => boolean | null;
|
|
22
26
|
round(calculation: INumberCalculation, digits: number): number | null;
|
|
23
27
|
}
|
|
24
28
|
export {};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { Questionnaire } from
|
|
2
|
-
import { Response } from
|
|
1
|
+
import { Questionnaire } from './questionnaire';
|
|
2
|
+
import { Response } from './response';
|
|
3
|
+
|
|
3
4
|
export declare class CurliesInterpolator {
|
|
4
5
|
response: Response;
|
|
5
6
|
questionnaire: Questionnaire;
|
package/dist/core/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
3
|
-
export * from
|
|
4
|
-
export * from
|
|
5
|
-
export * from
|
|
6
|
-
export * from
|
|
7
|
-
export * from
|
|
1
|
+
export * from './questionnaire_json';
|
|
2
|
+
export * from './questionnaire';
|
|
3
|
+
export * from './response';
|
|
4
|
+
export * from './quby_context';
|
|
5
|
+
export * from './validators';
|
|
6
|
+
export * from './response_json';
|
|
7
|
+
export * from './curlies_interpolator';
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { Response, Questionnaire, IDisplayOptions } from
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { Response, Questionnaire, IDisplayOptions } from '.';
|
|
3
|
+
|
|
3
4
|
export type SetQuestionRef = (key: string, ref: React.RefObject<HTMLElement | null>) => void;
|
|
4
5
|
export interface IQubyContext {
|
|
5
6
|
questionnaire: Questionnaire;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { IQuestionnaire, IQuestion, IPanel, ITextvar, IValidation, IQuestions, ISexpVariables } from
|
|
2
|
-
import { VisibilityRule } from
|
|
1
|
+
import { IQuestionnaire, IQuestion, IPanel, ITextvar, IValidation, IQuestions, ISexpVariables } from './questionnaire_json';
|
|
2
|
+
import { VisibilityRule } from './visibility_rules';
|
|
3
|
+
|
|
3
4
|
export declare class Questionnaire {
|
|
4
5
|
key: string;
|
|
5
6
|
panels: IPanel[];
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { z } from
|
|
1
|
+
import { z } from 'zod';
|
|
2
|
+
|
|
2
3
|
export interface ITranslatable {
|
|
3
4
|
t: string;
|
|
4
5
|
[interpolationKey: string]: string | number;
|
|
@@ -292,13 +293,26 @@ interface ICalcNumberReducer {
|
|
|
292
293
|
op: 'sum' | 'subtract' | 'multiply' | 'divide';
|
|
293
294
|
values: INumberCalculation[];
|
|
294
295
|
}
|
|
296
|
+
export declare const ICalcBooleanReducerOpsSchema: z.ZodEnum<["all", "some", "none"]>;
|
|
297
|
+
export declare const ICalcComparerOpsSchema: z.ZodEnum<["eq", "not_eq", "gt", "gteq", "lt", "lteq"]>;
|
|
298
|
+
export declare const ICalcBooleanOpsSchema: z.ZodEnum<["all", "some", "none", "eq", "not_eq", "gt", "gteq", "lt", "lteq"]>;
|
|
299
|
+
export interface ICalcBooleanReducer {
|
|
300
|
+
op: z.infer<typeof ICalcBooleanReducerOpsSchema>;
|
|
301
|
+
values: IBooleanCalculation[];
|
|
302
|
+
}
|
|
303
|
+
export interface ICalcComparer {
|
|
304
|
+
op: z.infer<typeof ICalcComparerOpsSchema>;
|
|
305
|
+
left: INumberCalculation;
|
|
306
|
+
right: INumberCalculation;
|
|
307
|
+
}
|
|
295
308
|
interface ICalcRound {
|
|
296
309
|
op: 'round';
|
|
297
310
|
value: INumberCalculation;
|
|
298
311
|
digits: number;
|
|
299
312
|
}
|
|
300
313
|
export type INumberCalculation = ICalcNumber | ICalcNumberValue | ICalcNumberReducer | ICalcRound;
|
|
301
|
-
export type
|
|
314
|
+
export type IBooleanCalculation = ICalcComparer | ICalcBooleanReducer;
|
|
315
|
+
export type ICalculation = INumberCalculation | IBooleanCalculation | ICalcStringValue;
|
|
302
316
|
export type ISexpVariables = {
|
|
303
317
|
[key: string]: {
|
|
304
318
|
calculation: ICalculation;
|
package/dist/core/response.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { z } from
|
|
2
|
-
import { Questionnaire } from
|
|
3
|
-
import { IPanel, ITranslatable, IValidation } from
|
|
4
|
-
import { Calculations } from
|
|
1
|
+
import { z } from 'zod';
|
|
2
|
+
import { Questionnaire } from './questionnaire';
|
|
3
|
+
import { IPanel, ITranslatable, IValidation } from './questionnaire_json';
|
|
4
|
+
import { Calculations } from './calculations';
|
|
5
|
+
|
|
5
6
|
export interface IAnswerFromServer {
|
|
6
7
|
value: IValues;
|
|
7
8
|
flags: IFlags;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { Questionnaire } from
|
|
2
|
-
import { IAnswerFromServer } from
|
|
1
|
+
import { Questionnaire } from './questionnaire';
|
|
2
|
+
import { IAnswerFromServer } from './response';
|
|
3
|
+
|
|
3
4
|
export declare class ResponseParseError extends Error {
|
|
4
5
|
}
|
|
5
6
|
export interface IResponseJson {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { IAnswerGroupMaximumValidation, IAnswerGroupMinimumValidation, IRequiresAnswerValidation, IValidation, IMinimumValidation, IMaximumValidation, IMinimumDateValidation, IMinimumCheckedRequiredValidation, IMaximumCheckedAllowedValidation, IMaximumDateValidation, IValidDateValidation, IValidIntegerValidation, IValidFloatValidation, IRegexpValidation } from
|
|
2
|
-
import { Response } from
|
|
1
|
+
import { IAnswerGroupMaximumValidation, IAnswerGroupMinimumValidation, IRequiresAnswerValidation, IValidation, IMinimumValidation, IMaximumValidation, IMinimumDateValidation, IMinimumCheckedRequiredValidation, IMaximumCheckedAllowedValidation, IMaximumDateValidation, IValidDateValidation, IValidIntegerValidation, IValidFloatValidation, IRegexpValidation } from './questionnaire_json';
|
|
2
|
+
import { Response } from './response';
|
|
3
|
+
|
|
3
4
|
export type ValidatableResponse = Pick<Response, "getValidationFieldState">;
|
|
4
5
|
export declare const ignorableErrors: IValidation["type"][];
|
|
5
6
|
export declare function buildValidator(data: IValidation): RequiresAnswerValidator | ValidIntegerValidator | ValidFloatValidator | ValidDateValidator | MinimumValidator | MaximumValidator | MinimumDateValidator | MaximumDateValidator | MinimumCheckedRequiredValidator | MaximumCheckedAllowedValidator | AnswerGroupMinimumValidator | AnswerGroupMaximumValidator | RegexpValidator;
|
package/dist/i18n.d.ts
CHANGED
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
export * from
|
|
1
|
+
|
|
2
|
+
export * from './core';
|
|
3
|
+
export * from './components';
|
package/dist/logic/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
3
|
-
export * from
|
|
1
|
+
export * from './use_might_become_valid';
|
|
2
|
+
export * from './use_question_shortkeys';
|
|
3
|
+
export * from './map_css_vars';
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import React from
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
|
|
2
3
|
export declare function useMightBecomeValid(value: string | undefined, handleChange: (newValue: string) => string | undefined): {
|
|
3
4
|
onChange: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
|
4
5
|
value: string;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { Response, Questionnaire } from
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { Response, Questionnaire } from '../core';
|
|
3
|
+
|
|
3
4
|
export declare const useQuestionShortkeys: (response: Response, questionnaire: Questionnaire, qubyRef: React.RefObject<HTMLDivElement | null>) => void;
|