@univerjs/docs-ui 0.6.6 → 0.6.7

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.
Files changed (39) hide show
  1. package/lib/cjs/index.js +35 -22
  2. package/lib/cjs/locale/en-US.js +1 -1
  3. package/lib/cjs/locale/fa-IR.js +1 -1
  4. package/lib/cjs/locale/fr-FR.js +1 -1
  5. package/lib/cjs/locale/ru-RU.js +1 -1
  6. package/lib/cjs/locale/vi-VN.js +1 -1
  7. package/lib/cjs/locale/zh-CN.js +1 -1
  8. package/lib/cjs/locale/zh-TW.js +1 -1
  9. package/lib/es/index.js +3277 -3043
  10. package/lib/es/locale/en-US.js +1 -0
  11. package/lib/es/locale/fa-IR.js +1 -0
  12. package/lib/es/locale/fr-FR.js +1 -0
  13. package/lib/es/locale/ru-RU.js +1 -0
  14. package/lib/es/locale/vi-VN.js +1 -0
  15. package/lib/es/locale/zh-CN.js +1 -0
  16. package/lib/es/locale/zh-TW.js +1 -0
  17. package/lib/index.css +1 -1
  18. package/lib/types/commands/commands/break-line.command.d.ts +7 -3
  19. package/lib/types/commands/commands/doc-delete.command.d.ts +1 -0
  20. package/lib/types/commands/commands/doc-horizontal-line.command.d.ts +5 -0
  21. package/lib/types/commands/commands/insert-custom-range.command.d.ts +11 -0
  22. package/lib/types/{views/doc-container/index.d.ts → components/float-toolbar/FloatToolbar.d.ts} +5 -1
  23. package/lib/types/components/float-toolbar/FloatToolbar.stories.d.ts +7 -0
  24. package/lib/types/controllers/float-menu.controller.d.ts +16 -0
  25. package/lib/types/controllers/menu/menu.d.ts +1 -0
  26. package/lib/types/index.d.ts +5 -3
  27. package/lib/types/locale/zh-CN.d.ts +1 -0
  28. package/lib/types/views/count-bar/CountBar.d.ts +1 -1
  29. package/lib/types/views/doc-container/DocContainer.d.ts +1 -7
  30. package/lib/types/views/doc-footer/DocFooter.d.ts +1 -1
  31. package/lib/umd/index.js +35 -22
  32. package/lib/umd/locale/en-US.js +1 -1
  33. package/lib/umd/locale/fa-IR.js +1 -1
  34. package/lib/umd/locale/fr-FR.js +1 -1
  35. package/lib/umd/locale/ru-RU.js +1 -1
  36. package/lib/umd/locale/vi-VN.js +1 -1
  37. package/lib/umd/locale/zh-CN.js +1 -1
  38. package/lib/umd/locale/zh-TW.js +1 -1
  39. package/package.json +12 -13
@@ -33,6 +33,7 @@ const e = {
33
33
  alignCenter: "Align Center",
34
34
  alignRight: "Align Right",
35
35
  alignJustify: "Justify",
36
+ horizontalLine: "Horizontal line",
36
37
  headerFooter: "Header & Footer"
37
38
  },
38
39
  table: {
@@ -33,6 +33,7 @@ const e = {
33
33
  alignCenter: "تراز وسط",
34
34
  alignRight: "تراز راست",
35
35
  alignJustify: "توجیه",
36
+ horizontalLine: "Horizontal line",
36
37
  headerFooter: "هدر و فوتر"
37
38
  },
38
39
  table: {
@@ -33,6 +33,7 @@ const e = {
33
33
  alignCenter: "Aligner au centre",
34
34
  alignRight: "Aligner à droite",
35
35
  alignJustify: "Justifier",
36
+ horizontalLine: "Horizontal line",
36
37
  headerFooter: "En-tête et pied de page"
37
38
  },
38
39
  table: {
@@ -31,6 +31,7 @@ const e = {
31
31
  alignCenter: "Выровнять по центру",
32
32
  alignRight: "Выровнять по правому краю",
33
33
  alignJustify: "Выровнять по ширине",
34
+ horizontalLine: "Horizontal line",
34
35
  headerFooter: "Header & Footer",
35
36
  checklist: "Task list",
36
37
  documentFlavor: "Modern Mode"
@@ -31,6 +31,7 @@ const n = {
31
31
  alignCenter: "Căn giữa",
32
32
  alignRight: "Căn phải",
33
33
  alignJustify: "Căn đều hai bên",
34
+ horizontalLine: "Horizontal line",
34
35
  headerFooter: "Đầu trang và chân trang",
35
36
  checklist: "Task list",
36
37
  documentFlavor: "Modern Mode"
@@ -33,6 +33,7 @@ const e = {
33
33
  alignCenter: "居中对齐",
34
34
  alignRight: "右对齐",
35
35
  alignJustify: "两端对齐",
36
+ horizontalLine: "水平分割线",
36
37
  headerFooter: "页眉页脚"
37
38
  },
38
39
  table: {
@@ -31,6 +31,7 @@ const e = {
31
31
  alignCenter: "居中對齊",
32
32
  alignRight: "右對齊",
33
33
  alignJustify: "兩端對齊",
34
+ horizontalLine: "Horizontal line",
34
35
  headerFooter: "頁眉頁腳",
35
36
  checklist: "任務列表",
36
37
  documentFlavor: "现代模式"
package/lib/index.css CHANGED
@@ -1 +1 @@
1
- .univer-rich-text-editor-active{border-color:rgb(var(--hyacinth-500))!important}.univer-rich-text-editor-wrap{height:32px;padding:6px 8px 2px 6px;width:100%;display:flex;justify-content:space-around;align-items:center;gap:8px;border:1px solid rgb(var(--border-color));border-radius:var(--border-radius-base);box-sizing:border-box;position:relative}.univer-rich-text-editor-wrap .univer-rich-text-editor-text{width:100%;height:100%;position:relative}.univer-rich-text-editor-wrap .univer-rich-text-editor-error-wrap{font-size:12px;color:rgb(var(--red-500));position:absolute;bottom:-18px;left:0}.univer-rich-text-editor-placeholder{font-size:14px;color:rgb(var(--grey-500));position:absolute;left:5px;top:5px}.univer-panel{padding-top:20px;font-size:var(--font-size-sm)}.univer-options-section{margin-top:10px;padding-bottom:10px}.univer-options-form-item{display:block;margin-bottom:5px}.univer-options-input{width:80%;margin-top:5px}.univer-options-margin-setting{display:flex}.univer-doc-list-type-picker{display:flex;flex-direction:row;justify-content:space-between;flex-wrap:wrap;padding:var(--padding-sm);width:240px;margin-bottom:-var(--margin-xs)}.univer-doc-list-type-picker-item{width:72px;height:81px;border-radius:4px;border:1px solid rgb(var(--border-color));margin-bottom:var(--margin-xs)}.univer-doc-list-type-picker-item:hover,.univer-doc-list-type-picker-item-active{border:1px solid rgb(var(--blue-400))}.univer-doc-count-bar{display:flex;flex:0 0 260px;justify-content:flex-end}.univer-doc-footer-container{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:0 var(--padding-xl)}.univer-paragraph-setting-icon-list{display:flex;width:100%;padding:4px;align-items:center;gap:4px;justify-content:space-between;border:1px solid #e5e5e5;border:1px solid var(---Grey-200, #e5e5e5);border-radius:6px;border-radius:var(--radius-m, 6px)}.univer-paragraph-setting-icon-list-item{padding:4px 14px;border-radius:4px;background:none;display:flex;justify-content:center;align-items:center;cursor:pointer}.univer-paragraph-setting-icon-list-item:hover{background:#1e222b0f;background:var(--black-6, rgba(30, 34, 43, .06))}.univer-paragraph-setting-icon-list-item.univer-paragraph-setting-icon-list-active{background:#1e222b17;background:var(--black-9, rgba(30, 34, 43, .09))}.univer-paragraph-setting-title{margin-top:var(--margin-base);font-size:13px;color:#1e222b;font-weight:500}.univer-paragraph-setting-label{font-size:12px;margin-top:var(--margin-sm);color:#1e222b;font-weight:400}.univer-paragraph-setting-mt-base{margin-top:var(--margin-base)}.univer-paragraph-setting-flex-col{display:flex;justify-content:space-between;align-items:center}.univer-paragraph-setting-space-line{display:flex;flex-direction:column;gap:6px}.univer-create{padding:20px auto;display:flex;align-content:center;justify-content:space-between}.univer-create-item{display:flex;align-items:center}.univer-create-label{margin-right:5px}.univer-create-input{width:110px}
1
+ .univer-absolute{position:absolute}.univer-relative{position:relative}.univer-left-\[5px\]{left:5px}.univer-top-\[5px\]{top:5px}.univer-mb-1{margin-bottom:.25rem}.univer-mt-1\.5{margin-top:.375rem}.univer-mt-3{margin-top:.75rem}.univer-mt-4{margin-top:1rem}.univer-box-border{box-sizing:border-box}.univer-block{display:block}.univer-flex{display:flex}.univer-grid{display:grid}.univer-size-full{width:100%;height:100%}.univer-h-20{height:5rem}.univer-h-8{height:2rem}.univer-w-28{width:7rem}.univer-w-4\/5{width:80%}.univer-w-\[72px\]{width:72px}.univer-w-full{width:100%}.univer-flex-shrink-0{flex-shrink:0}.univer-flex-grow-0{flex-grow:0}.univer-basis-\[260px\]{flex-basis:260px}.univer-cursor-pointer{cursor:pointer}.univer-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.univer-flex-col{flex-direction:column}.univer-flex-nowrap{flex-wrap:nowrap}.univer-items-center{align-items:center}.univer-justify-end{justify-content:flex-end}.univer-justify-center{justify-content:center}.univer-justify-between{justify-content:space-between}.univer-justify-around{justify-content:space-around}.univer-gap-1{gap:.25rem}.univer-gap-1\.5{gap:.375rem}.univer-gap-2{gap:.5rem}.univer-gap-4{gap:1rem}.univer-overflow-hidden{overflow:hidden}.univer-rounded{border-radius:.25rem}.univer-rounded-md{border-radius:.375rem}.univer-border{border-width:1px}.univer-border-solid{border-style:solid}.univer-border-gray-200{--tw-border-opacity: 1;border-color:#e3e5ea;border-color:rgba(227,229,234,var(--tw-border-opacity, 1))}.univer-border-primary-500{--tw-border-opacity: 1;border-color:#466af7;border-color:rgba(70,106,247,var(--tw-border-opacity, 1))}.univer-bg-white{--tw-bg-opacity: 1;background-color:#fff;background-color:rgba(255,255,255,var(--tw-bg-opacity, 1))}.univer-bg-none{background-image:none}.univer-p-1{padding:.25rem}.univer-p-1\.5{padding:.375rem}.univer-px-2{padding-left:.5rem;padding-right:.5rem}.univer-px-3{padding-left:.75rem;padding-right:.75rem}.univer-px-5{padding-left:1.25rem;padding-right:1.25rem}.univer-py-1{padding-top:.25rem;padding-bottom:.25rem}.univer-py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.univer-pb-0\.5{padding-bottom:.125rem}.univer-pl-1\.5{padding-left:.375rem}.univer-pr-2{padding-right:.5rem}.univer-pt-1\.5{padding-top:.375rem}.univer-text-\[13px\]{font-size:13px}.univer-text-sm{font-size:.875rem;line-height:1.25rem}.univer-text-xs{font-size:.75rem;line-height:1rem}.univer-font-medium{font-weight:500}.univer-text-gray-400{--tw-text-opacity: 1;color:#979dac;color:rgba(151,157,172,var(--tw-text-opacity, 1))}.univer-text-gray-500{--tw-text-opacity: 1;color:#5f6574;color:rgba(95,101,116,var(--tw-text-opacity, 1))}.univer-shadow-\[0_1px_6px_-2px_rgba\(30\,40\,77\,0\.08\)\,0_2px_6px_-1px_rgba\(30\,40\,77\,0\.10\)\]{--tw-shadow: 0 1px 6px -2px rgba(30,40,77,.08),0 2px 6px -1px rgba(30,40,77,.1);--tw-shadow-colored: 0 1px 6px -2px var(--tw-shadow-color), 0 2px 6px -1px var(--tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 6px -2px #1e284d14,0 2px 6px -1px #1e284d1a;box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)),var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)),var(--tw-shadow)}.univer-transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\:univer-border-primary-500:hover{--tw-border-opacity: 1;border-color:#466af7;border-color:rgba(70,106,247,var(--tw-border-opacity, 1))}.hover\:univer-bg-black\/60:hover{background-color:#0009}
@@ -1,3 +1,7 @@
1
- import { ICommand, IParagraph } from '@univerjs/core';
2
- export declare function generateParagraphs(dataStream: string, prevParagraph?: IParagraph): IParagraph[];
3
- export declare const BreakLineCommand: ICommand;
1
+ import { ICommand, IParagraph, IParagraphBorder } from '@univerjs/core';
2
+ export declare function generateParagraphs(dataStream: string, prevParagraph?: IParagraph, borderBottom?: IParagraphBorder): IParagraph[];
3
+ interface IBreakLineCommandParams {
4
+ horizontalLine?: IParagraphBorder;
5
+ }
6
+ export declare const BreakLineCommand: ICommand<IBreakLineCommandParams>;
7
+ export {};
@@ -13,6 +13,7 @@ interface IMergeTwoParagraphParams {
13
13
  range: ITextRangeWithStyle;
14
14
  }
15
15
  export declare const MergeTwoParagraphCommand: ICommand<IMergeTwoParagraphParams>;
16
+ export declare const RemoveHorizontalLineCommand: ICommand;
16
17
  export declare function getCursorWhenDelete(textRanges: Readonly<Nullable<ITextRangeWithStyle[]>>, rectRanges: readonly IRectRangeWithStyle[]): number;
17
18
  export declare const DeleteLeftCommand: ICommand;
18
19
  export declare const DeleteRightCommand: ICommand;
@@ -0,0 +1,5 @@
1
+ import { ICommand } from '@univerjs/core';
2
+ interface IHorizontalCommandParams {
3
+ }
4
+ export declare const HorizontalLineCommand: ICommand<IHorizontalCommandParams>;
5
+ export {};
@@ -0,0 +1,11 @@
1
+ import { ICommand } from '@univerjs/core';
2
+ import { ITextRangeWithStyle } from '@univerjs/engine-render';
3
+ export interface IInsertCustomRangeCommandParams {
4
+ unitId: string;
5
+ rangeId?: string;
6
+ textRanges?: ITextRangeWithStyle[];
7
+ properties?: Record<string, any>;
8
+ text: string;
9
+ wholeEntity?: boolean;
10
+ }
11
+ export declare const InsertCustomRangeCommand: ICommand<IInsertCustomRangeCommandParams>;
@@ -13,4 +13,8 @@
13
13
  * See the License for the specific language governing permissions and
14
14
  * limitations under the License.
15
15
  */
16
- export * from './DocContainer';
16
+ interface IFloatToolbarProps {
17
+ avaliableMenus?: string[];
18
+ }
19
+ export declare function FloatToolbar(props: IFloatToolbarProps): import("react/jsx-runtime").JSX.Element;
20
+ export {};
@@ -0,0 +1,7 @@
1
+ import { Meta } from '@storybook/react';
2
+ import { FloatToolbar } from './FloatToolbar';
3
+ declare const meta: Meta<typeof FloatToolbar>;
4
+ export default meta;
5
+ export declare const Playground: {
6
+ render(): import("react/jsx-runtime").JSX.Element;
7
+ };
@@ -0,0 +1,16 @@
1
+ import { Disposable, IUniverInstanceService } from '@univerjs/core';
2
+ import { DocSelectionManagerService } from '@univerjs/docs';
3
+ import { ComponentManager } from '@univerjs/ui';
4
+ import { DocCanvasPopManagerService } from '../services/doc-popup-manager.service';
5
+ export declare class FloatMenuController extends Disposable {
6
+ private readonly _docSelectionManagerService;
7
+ private readonly _docCanvasPopManagerService;
8
+ private readonly _componentManager;
9
+ private readonly _univerInstanceService;
10
+ private _floatMenu;
11
+ constructor(_docSelectionManagerService: DocSelectionManagerService, _docCanvasPopManagerService: DocCanvasPopManagerService, _componentManager: ComponentManager, _univerInstanceService: IUniverInstanceService);
12
+ private _registerFloatMenu;
13
+ private _initSelectionChange;
14
+ private _hideFloatMenu;
15
+ private _showFloatMenu;
16
+ }
@@ -18,6 +18,7 @@ export declare function AlignLeftMenuItemFactory(accessor: IAccessor): IMenuButt
18
18
  export declare function AlignCenterMenuItemFactory(accessor: IAccessor): IMenuButtonItem;
19
19
  export declare function AlignRightMenuItemFactory(accessor: IAccessor): IMenuButtonItem;
20
20
  export declare function AlignJustifyMenuItemFactory(accessor: IAccessor): IMenuButtonItem;
21
+ export declare function HorizontalLineFactory(accessor: IAccessor): IMenuButtonItem;
21
22
  export declare function OrderListMenuItemFactory(accessor: IAccessor): IMenuSelectorItem<PresetListType, PresetListType>;
22
23
  export declare function BulletListMenuItemFactory(accessor: IAccessor): IMenuSelectorItem<PresetListType, PresetListType>;
23
24
  export declare function CheckListMenuItemFactory(accessor: IAccessor): IMenuButtonItem;
@@ -51,11 +51,12 @@ export { getCanvasOffsetByEngine } from './services/selection/selection-utils';
51
51
  export { getAnchorBounding, getLineBounding, TEXT_RANGE_LAYER_INDEX, TextRange } from './services/selection/text-range';
52
52
  export { whenDocAndEditorFocused } from './shortcuts/utils';
53
53
  export { DOC_VERTICAL_PADDING } from './types/const/padding';
54
+ export { HorizontalLineCommand } from './commands/commands/doc-horizontal-line.command';
54
55
  export { AfterSpaceCommand, EnterCommand, type ITabCommandParams, TabCommand } from './commands/commands/auto-format.command';
55
56
  export { BreakLineCommand } from './commands/commands/break-line.command';
56
57
  export { generateParagraphs } from './commands/commands/break-line.command';
57
58
  export { DocCopyCommand, DocCutCommand, DocPasteCommand } from './commands/commands/clipboard.command';
58
- export { CutContentCommand, InnerPasteCommand } from './commands/commands/clipboard.inner.command';
59
+ export { CutContentCommand, type IInnerPasteCommandParams, InnerPasteCommand } from './commands/commands/clipboard.inner.command';
59
60
  export type { IInnerCutCommandParams } from './commands/commands/clipboard.inner.command';
60
61
  export { getCustomBlockIdsInSelections, getCutActionsFromDocRanges } from './commands/commands/clipboard.inner.command';
61
62
  export { DeleteCommand, EditorInsertTextCommandId, type ICoverCommandParams, type IDeleteCommandParams, type IInsertCommandParams, InsertCommand, type IUpdateCommandParams, UpdateCommand, } from './commands/commands/core-editing.command';
@@ -68,10 +69,11 @@ export { BulletListCommand, ChangeListNestingLevelCommand, ChangeListTypeCommand
68
69
  export { ChangeListNestingLevelType } from './commands/commands/list.command';
69
70
  export { AlignCenterCommand, AlignJustifyCommand, AlignLeftCommand, AlignOperationCommand, AlignRightCommand, } from './commands/commands/paragraph-align.command';
70
71
  export { ReplaceTextRunsCommand } from './commands/commands/replace-content.command';
71
- export { CoverContentCommand, type IReplaceSelectionCommandParams, type IReplaceSnapshotCommandParams, ReplaceContentCommand, ReplaceSnapshotCommand } from './commands/commands/replace-content.command';
72
+ export { CoverContentCommand, type IReplaceSelectionCommandParams, type IReplaceSnapshotCommandParams, ReplaceContentCommand, ReplaceSelectionCommand, ReplaceSnapshotCommand } from './commands/commands/replace-content.command';
72
73
  export { SetDocZoomRatioCommand } from './commands/commands/set-doc-zoom-ratio.command';
73
74
  export { CreateDocTableCommand, type ICreateDocTableCommandParams } from './commands/commands/table/doc-table-create.command';
74
75
  export { DocTableDeleteColumnsCommand, DocTableDeleteRowsCommand, DocTableDeleteTableCommand } from './commands/commands/table/doc-table-delete.command';
76
+ export { type IInsertCustomRangeCommandParams, InsertCustomRangeCommand } from './commands/commands/insert-custom-range.command';
75
77
  export type { IDocTableDeleteColumnsCommandParams, IDocTableDeleteRowsCommandParams, IDocTableDeleteTableCommandParams, } from './commands/commands/table/doc-table-delete.command';
76
78
  export type { IDocTableInsertColumnCommandParams, IDocTableInsertColumnLeftCommandParams, IDocTableInsertColumnRightCommandParams, IDocTableInsertRowAboveCommandParams, IDocTableInsertRowBellowCommandParams, IDocTableInsertRowCommandParams, } from './commands/commands/table/doc-table-insert.command';
77
79
  export { DocTableInsertColumnCommand, DocTableInsertColumnLeftCommand, DocTableInsertColumnRightCommand, DocTableInsertRowAboveCommand, DocTableInsertRowBellowCommand, DocTableInsertRowCommand, } from './commands/commands/table/doc-table-insert.command';
@@ -79,7 +81,7 @@ export type { IDocTableTabCommandParams } from './commands/commands/table/doc-ta
79
81
  export { DocTableTabCommand } from './commands/commands/table/doc-table-tab.command';
80
82
  export { genTableSource, getEmptyTableCell, getEmptyTableRow, getTableColumn } from './commands/commands/table/table';
81
83
  export { DocCreateTableOperation } from './commands/operations/doc-create-table.operation';
82
- export { MoveSelectionOperation } from './commands/operations/doc-cursor.operation';
84
+ export { type IMoveCursorOperationParams, MoveSelectionOperation } from './commands/operations/doc-cursor.operation';
83
85
  export { MoveCursorOperation } from './commands/operations/doc-cursor.operation';
84
86
  export { DocSelectAllCommand } from './commands/commands/doc-select-all.command';
85
87
  export { type ISetDocZoomRatioOperationParams, SetDocZoomRatioOperation } from './commands/operations/set-doc-zoom-ratio.operation';
@@ -48,6 +48,7 @@ declare const locale: {
48
48
  alignCenter: string;
49
49
  alignRight: string;
50
50
  alignJustify: string;
51
+ horizontalLine: string;
51
52
  headerFooter: string;
52
53
  };
53
54
  table: {
@@ -17,5 +17,5 @@ interface ICountBarProps {
17
17
  changeRatio?: (ratio: string) => void;
18
18
  onChange?: (value: string) => void;
19
19
  }
20
- export declare function CountBar(props: ICountBarProps): import("react/jsx-runtime").JSX.Element;
20
+ export declare function CountBar(_props: ICountBarProps): import("react/jsx-runtime").JSX.Element;
21
21
  export {};
@@ -1,5 +1,5 @@
1
- import { IUniverDocsUIConfig } from '../../controllers/config.schema';
2
1
  import { default as React, Component } from 'react';
2
+ import { IUniverDocsUIConfig } from '../../controllers/config.schema';
3
3
  interface IBaseDocContainerProps {
4
4
  config: IUniverDocsUIConfig;
5
5
  changeLocale: (locale: string) => void;
@@ -37,11 +37,5 @@ export declare class DocContainer extends Component<IBaseDocContainerProps> {
37
37
  * Modify Dom Skin
38
38
  */
39
39
  changeSkin(container: HTMLElement | string, skin: string): void;
40
- /**
41
- * Render the component's HTML
42
- *
43
- * @returns {void}
44
- */
45
- render(): import("react/jsx-runtime").JSX.Element;
46
40
  }
47
41
  export {};
@@ -13,4 +13,4 @@
13
13
  * See the License for the specific language governing permissions and
14
14
  * limitations under the License.
15
15
  */
16
- export declare const DocFooter: () => import("react/jsx-runtime").JSX.Element | null;
16
+ export declare function DocFooter(): import("react/jsx-runtime").JSX.Element | null;