@devtron-labs/devtron-fe-common-lib 1.13.0-pre-4 → 1.13.0-pre-5
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/{@common-rjsf-B9RVxEzF.js → @code-editor-Cnnz8WKW.js} +10220 -10441
- package/dist/@common-rjsf-BGYrN0PH.js +617 -0
- package/dist/{@framer-motion-Hh5HoZEj.js → @framer-motion-DyOLEeMN.js} +1 -1
- package/dist/{@react-dates-RAg1eRYJ.js → @react-dates-B7d8RWU9.js} +14 -14
- package/dist/{@react-select-Cyc43HrK.js → @react-select-Coo19Q6a.js} +1 -1
- package/dist/{@react-virtualized-sticky-tree-Cby7tsJ8.js → @react-virtualized-sticky-tree-BPjPJDIR.js} +1 -1
- package/dist/{@vendor-BZpoz8Ez.js → @vendor-D9q4wrnL.js} +10602 -10592
- package/dist/Common/RJSF/Form.d.ts +1 -1
- package/dist/Shared/Components/ActionMenu/ActionMenu.component.d.ts +1 -2
- package/dist/Shared/Components/ActionMenu/ActionMenuItem.d.ts +2 -0
- package/dist/Shared/Components/ActionMenu/index.d.ts +2 -2
- package/dist/Shared/Components/ActionMenu/types.d.ts +88 -11
- package/dist/Shared/Components/ActionMenu/useActionMenu.hook.d.ts +275 -0
- package/dist/Shared/Components/ActionMenu/utils.d.ts +7 -0
- package/dist/Shared/Components/Header/HeaderWithCreateButton/HeaderWithCreateButon.d.ts +1 -3
- package/dist/Shared/Components/Header/HeaderWithCreateButton/types.d.ts +10 -0
- package/dist/Shared/Components/Header/HeaderWithCreateButton/utils.d.ts +2 -0
- package/dist/Shared/Components/Header/HelpButton.d.ts +2 -0
- package/dist/Shared/Components/Header/constants.d.ts +5 -4
- package/dist/Shared/Components/Header/types.d.ts +15 -9
- package/dist/Shared/Components/Header/utils.d.ts +5 -1
- package/dist/Shared/Components/Icon/Icon.d.ts +8 -0
- package/dist/Shared/Components/Icon/IconBase.d.ts +1 -1
- package/dist/Shared/Components/Icon/types.d.ts +29 -7
- package/dist/Shared/Components/Popover/Popover.component.d.ts +8 -0
- package/dist/Shared/Components/Popover/index.d.ts +3 -0
- package/dist/Shared/Components/Popover/types.d.ts +105 -0
- package/dist/Shared/Components/Popover/usePopover.hook.d.ts +2 -0
- package/dist/Shared/Components/Popover/utils.d.ts +92 -0
- package/dist/Shared/Components/SelectPicker/common.d.ts +1 -0
- package/dist/Shared/Components/SelectPicker/type.d.ts +4 -0
- package/dist/assets/@code-editor.css +1 -0
- package/dist/assets/@common-rjsf.css +1 -1
- package/dist/assets/ic-chat-circle-online.51348da5.svg +4 -0
- package/dist/assets/ic-discord-fill.103b579a.svg +3 -0
- package/dist/assets/ic-edit.3249ed32.svg +3 -0
- package/dist/assets/ic-file-edit.96a172c7.svg +3 -0
- package/dist/assets/ic-file.c3c45e13.svg +3 -0
- package/dist/assets/ic-files.b0ebea46.svg +3 -0
- package/dist/assets/ic-megaphone-right.9d6bcd36.svg +3 -0
- package/dist/assets/ic-path.d4fef3b0.svg +3 -0
- package/dist/index.js +635 -634
- package/package.json +1 -1
- package/dist/Shared/Components/ActionMenu/ActionMenuOption.d.ts +0 -3
- package/dist/Shared/Components/Header/HelpNav.d.ts +0 -3
- package/dist/assets/ic-charts.f41e185f.svg +0 -19
- package/dist/assets/ic-chat-circle-dots.e15514f8.svg +0 -23
- package/dist/assets/ic-discord-fill.1a1b291d.svg +0 -19
- package/dist/assets/ic-feedback.d32fa6b0.svg +0 -19
- package/dist/assets/ic-files.fc290dee.svg +0 -19
- package/dist/assets/ic-k8s-job.f4414c10.svg +0 -19
- package/dist/assets/ic-onboarding.c98f9ef9.svg +0 -19
@@ -1,3 +1,3 @@
|
|
1
1
|
import { default as RJSF } from '@rjsf/core';
|
2
2
|
import { FormProps } from './types';
|
3
|
-
export declare const RJSFForm: import('react').ForwardRefExoticComponent<Pick<FormProps, "children" | "className" | "name" | "id" | "disabled" | "
|
3
|
+
export declare const RJSFForm: import('react').ForwardRefExoticComponent<Pick<FormProps, "children" | "className" | "name" | "id" | "disabled" | "target" | "onFocus" | "onBlur" | "onChange" | "onSubmit" | "onError" | "autoComplete" | "method" | "action" | "tagName" | "noValidate" | "readonly" | "uiSchema" | "schema" | "formContext" | "formData" | "idPrefix" | "idSeparator" | "fields" | "templates" | "widgets" | "translateString" | "acceptcharset" | "acceptCharset" | "enctype" | "customValidate" | "extraErrors" | "extraErrorsBlockSubmit" | "noHtml5Validate" | "liveValidate" | "liveOmit" | "omitExtraData" | "showErrorList" | "transformErrors" | "focusOnFirstError" | "experimental_defaultFormStateBehavior" | "_internalFormWrapper"> & import('react').RefAttributes<RJSF<any, import('./types').RJSFFormSchema, any>>>;
|
@@ -1,3 +1,2 @@
|
|
1
1
|
import { ActionMenuProps } from './types';
|
2
|
-
declare const ActionMenu: ({ options, disableDescriptionEllipsis, children,
|
3
|
-
export default ActionMenu;
|
2
|
+
export declare const ActionMenu: <T extends string | number = string | number>({ id, options, onClick, position, alignment, width, isSearchable, disableDescriptionEllipsis, buttonProps, children, onOpen, footerConfig, }: ActionMenuProps<T>) => JSX.Element;
|
@@ -1,2 +1,2 @@
|
|
1
|
-
export
|
2
|
-
export type { ActionMenuProps } from './types';
|
1
|
+
export * from './ActionMenu.component';
|
2
|
+
export type { ActionMenuItemType, ActionMenuOptionType, ActionMenuProps } from './types';
|
@@ -1,19 +1,96 @@
|
|
1
|
-
import {
|
2
|
-
import {
|
1
|
+
import { LegacyRef, Ref } from 'react';
|
2
|
+
import { LinkProps } from 'react-router-dom';
|
3
|
+
import { IconsProps } from '../Icon';
|
4
|
+
import { PopoverProps, UsePopoverProps } from '../Popover';
|
3
5
|
import { SelectPickerOptionType, SelectPickerProps } from '../SelectPicker';
|
4
|
-
type
|
6
|
+
type ConditionalActionMenuComponentType = {
|
7
|
+
/**
|
8
|
+
* @default 'button'
|
9
|
+
*/
|
10
|
+
componentType?: 'button';
|
11
|
+
href?: never;
|
12
|
+
to?: never;
|
13
|
+
} | {
|
14
|
+
componentType?: 'anchor';
|
15
|
+
/** Specifies the URL for the `<a>` tag. */
|
16
|
+
href: string;
|
17
|
+
to?: never;
|
18
|
+
} | {
|
19
|
+
componentType?: 'link';
|
20
|
+
/** Specifies the `to` property for react-router `Link` */
|
21
|
+
to: LinkProps['to'];
|
22
|
+
href?: never;
|
23
|
+
};
|
24
|
+
type ActionMenuItemIconType = Pick<IconsProps, 'name'> & {
|
25
|
+
/** @default 'N800' */
|
26
|
+
color?: IconsProps['color'];
|
27
|
+
};
|
28
|
+
export type ActionMenuItemType<T extends string | number = string | number> = Omit<SelectPickerOptionType, 'label' | 'value' | 'endIcon' | 'startIcon'> & {
|
29
|
+
/** A unique identifier for the action menu item. */
|
30
|
+
id: T;
|
31
|
+
/** The text label for the menu item. */
|
32
|
+
label: string;
|
33
|
+
/** Indicates whether the menu item is disabled. */
|
5
34
|
isDisabled?: boolean;
|
6
35
|
/**
|
36
|
+
* Specifies the type of the menu item.
|
7
37
|
* @default 'neutral'
|
8
38
|
*/
|
9
39
|
type?: 'neutral' | 'negative';
|
40
|
+
/** Defines the icon to be displayed at the start of the menu item. */
|
41
|
+
startIcon?: ActionMenuItemIconType;
|
42
|
+
/** Defines the icon to be displayed at the end of the menu item. */
|
43
|
+
endIcon?: ActionMenuItemIconType;
|
44
|
+
} & ConditionalActionMenuComponentType;
|
45
|
+
export type ActionMenuOptionType<T extends string | number> = {
|
46
|
+
/**
|
47
|
+
* The label for the group of menu items. \
|
48
|
+
* This is optional and can be used to categorize items under a specific group.
|
49
|
+
*/
|
50
|
+
groupLabel?: string;
|
51
|
+
/**
|
52
|
+
* The list of items belonging to this group.
|
53
|
+
*/
|
54
|
+
items: ActionMenuItemType<T>[];
|
55
|
+
};
|
56
|
+
export type UseActionMenuProps<T extends string | number> = Omit<UsePopoverProps, 'onPopoverKeyDown' | 'onTriggerKeyDown'> & {
|
57
|
+
/**
|
58
|
+
* The options to display in the action menu.
|
59
|
+
*/
|
60
|
+
options: ActionMenuOptionType<T>[];
|
61
|
+
/**
|
62
|
+
* Determines whether the action menu is searchable.
|
63
|
+
*/
|
64
|
+
isSearchable?: boolean;
|
65
|
+
};
|
66
|
+
export type ActionMenuProps<T extends string | number = string | number> = UseActionMenuProps<T> & Pick<SelectPickerProps, 'disableDescriptionEllipsis'> & {
|
67
|
+
/**
|
68
|
+
* Callback function triggered when an item is clicked.
|
69
|
+
* @param item - The selected item.
|
70
|
+
*/
|
71
|
+
onClick: (item: ActionMenuItemType<T>) => void;
|
72
|
+
/**
|
73
|
+
* Config for the footer at the bottom of action menu list. It is sticky by default
|
74
|
+
*/
|
75
|
+
footerConfig?: SelectPickerProps['menuListFooterConfig'];
|
76
|
+
} & ({
|
77
|
+
/**
|
78
|
+
* The React element to which the ActionMenu is attached.
|
79
|
+
* @note only use when children is not `Button` component otherwise use `buttonProps`.
|
80
|
+
*/
|
81
|
+
children: NonNullable<PopoverProps['triggerElement']>;
|
82
|
+
buttonProps?: never;
|
83
|
+
} | {
|
84
|
+
children?: never;
|
85
|
+
/**
|
86
|
+
* Properties for the button to which the Popover is attached.
|
87
|
+
*/
|
88
|
+
buttonProps: NonNullable<PopoverProps['buttonProps']>;
|
89
|
+
});
|
90
|
+
export type ActionMenuItemProps<T extends string | number> = Pick<ActionMenuProps<T>, 'onClick' | 'disableDescriptionEllipsis'> & {
|
91
|
+
item: ActionMenuItemType<T>;
|
92
|
+
itemRef: Ref<HTMLAnchorElement> | LegacyRef<HTMLAnchorElement | HTMLButtonElement>;
|
93
|
+
isFocused?: boolean;
|
94
|
+
onMouseEnter?: () => void;
|
10
95
|
};
|
11
|
-
export interface ActionMenuProps extends Pick<SelectPickerProps, 'disableDescriptionEllipsis'> {
|
12
|
-
children: ReactElement;
|
13
|
-
options: OptionsOrGroups<ActionMenuOptionType, GroupBase<ActionMenuOptionType>>;
|
14
|
-
onClick: (option: SelectPickerOptionType) => void;
|
15
|
-
}
|
16
|
-
export interface ActionMenuOptionProps extends Pick<ActionMenuProps, 'onClick' | 'disableDescriptionEllipsis'> {
|
17
|
-
option: ActionMenuOptionType;
|
18
|
-
}
|
19
96
|
export {};
|
@@ -0,0 +1,275 @@
|
|
1
|
+
import { ChangeEvent, RefObject } from 'react';
|
2
|
+
import { UseActionMenuProps } from './types';
|
3
|
+
export declare const useActionMenu: <T extends string | number>({ id, position, alignment, width, options, isSearchable, onOpen, }: UseActionMenuProps<T>) => {
|
4
|
+
open: boolean;
|
5
|
+
flatOptions: {
|
6
|
+
option: import('./types').ActionMenuItemType<T>;
|
7
|
+
itemIndex: number;
|
8
|
+
sectionIndex: number;
|
9
|
+
}[];
|
10
|
+
filteredOptions: import('./types').ActionMenuOptionType<T>[];
|
11
|
+
focusedIndex: number;
|
12
|
+
itemsRef: import('react').MutableRefObject<RefObject<HTMLAnchorElement | HTMLButtonElement>[]>;
|
13
|
+
triggerProps: import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
|
14
|
+
overlayProps: import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
|
15
|
+
popoverProps: {
|
16
|
+
slot?: string;
|
17
|
+
title?: string;
|
18
|
+
children?: import('react').ReactNode;
|
19
|
+
className?: string;
|
20
|
+
defaultValue?: string | number | readonly string[];
|
21
|
+
id?: string;
|
22
|
+
color?: string;
|
23
|
+
role?: import('react').AriaRole;
|
24
|
+
about?: string;
|
25
|
+
is?: string;
|
26
|
+
security?: string;
|
27
|
+
onMouseEnter?: import('react').MouseEventHandler<HTMLDivElement>;
|
28
|
+
"aria-describedby"?: string;
|
29
|
+
"aria-errormessage"?: string;
|
30
|
+
"aria-label"?: string;
|
31
|
+
"aria-labelledby"?: string;
|
32
|
+
onClick?: import('react').MouseEventHandler<HTMLDivElement>;
|
33
|
+
defaultChecked?: boolean;
|
34
|
+
suppressContentEditableWarning?: boolean;
|
35
|
+
suppressHydrationWarning?: boolean;
|
36
|
+
accessKey?: string;
|
37
|
+
contentEditable?: "inherit" | (boolean | "true" | "false");
|
38
|
+
contextMenu?: string;
|
39
|
+
dir?: string;
|
40
|
+
draggable?: boolean | "true" | "false";
|
41
|
+
hidden?: boolean;
|
42
|
+
lang?: string;
|
43
|
+
placeholder?: string;
|
44
|
+
spellCheck?: boolean | "true" | "false";
|
45
|
+
tabIndex?: number;
|
46
|
+
translate?: "no" | "yes";
|
47
|
+
radioGroup?: string;
|
48
|
+
datatype?: string;
|
49
|
+
inlist?: any;
|
50
|
+
prefix?: string;
|
51
|
+
property?: string;
|
52
|
+
resource?: string;
|
53
|
+
typeof?: string;
|
54
|
+
vocab?: string;
|
55
|
+
autoCapitalize?: string;
|
56
|
+
autoCorrect?: string;
|
57
|
+
autoSave?: string;
|
58
|
+
itemProp?: string;
|
59
|
+
itemScope?: boolean;
|
60
|
+
itemType?: string;
|
61
|
+
itemID?: string;
|
62
|
+
itemRef?: string;
|
63
|
+
results?: number;
|
64
|
+
unselectable?: "on" | "off";
|
65
|
+
inputMode?: "search" | "text" | "none" | "url" | "tel" | "email" | "numeric" | "decimal";
|
66
|
+
"aria-activedescendant"?: string;
|
67
|
+
"aria-atomic"?: boolean | "true" | "false";
|
68
|
+
"aria-autocomplete"?: "list" | "none" | "inline" | "both";
|
69
|
+
"aria-busy"?: boolean | "true" | "false";
|
70
|
+
"aria-checked"?: boolean | "true" | "false" | "mixed";
|
71
|
+
"aria-colcount"?: number;
|
72
|
+
"aria-colindex"?: number;
|
73
|
+
"aria-colspan"?: number;
|
74
|
+
"aria-controls"?: string;
|
75
|
+
"aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date";
|
76
|
+
"aria-details"?: string;
|
77
|
+
"aria-disabled"?: boolean | "true" | "false";
|
78
|
+
"aria-dropeffect"?: "link" | "none" | "popup" | "copy" | "execute" | "move";
|
79
|
+
"aria-expanded"?: boolean | "true" | "false";
|
80
|
+
"aria-flowto"?: string;
|
81
|
+
"aria-grabbed"?: boolean | "true" | "false";
|
82
|
+
"aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree";
|
83
|
+
"aria-hidden"?: boolean | "true" | "false";
|
84
|
+
"aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling";
|
85
|
+
"aria-keyshortcuts"?: string;
|
86
|
+
"aria-level"?: number;
|
87
|
+
"aria-live"?: "off" | "assertive" | "polite";
|
88
|
+
"aria-modal"?: boolean | "true" | "false";
|
89
|
+
"aria-multiline"?: boolean | "true" | "false";
|
90
|
+
"aria-multiselectable"?: boolean | "true" | "false";
|
91
|
+
"aria-orientation"?: "horizontal" | "vertical";
|
92
|
+
"aria-owns"?: string;
|
93
|
+
"aria-placeholder"?: string;
|
94
|
+
"aria-posinset"?: number;
|
95
|
+
"aria-pressed"?: boolean | "true" | "false" | "mixed";
|
96
|
+
"aria-readonly"?: boolean | "true" | "false";
|
97
|
+
"aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
|
98
|
+
"aria-required"?: boolean | "true" | "false";
|
99
|
+
"aria-roledescription"?: string;
|
100
|
+
"aria-rowcount"?: number;
|
101
|
+
"aria-rowindex"?: number;
|
102
|
+
"aria-rowspan"?: number;
|
103
|
+
"aria-selected"?: boolean | "true" | "false";
|
104
|
+
"aria-setsize"?: number;
|
105
|
+
"aria-sort"?: "other" | "none" | "ascending" | "descending";
|
106
|
+
"aria-valuemax"?: number;
|
107
|
+
"aria-valuemin"?: number;
|
108
|
+
"aria-valuenow"?: number;
|
109
|
+
"aria-valuetext"?: string;
|
110
|
+
dangerouslySetInnerHTML?: {
|
111
|
+
__html: string;
|
112
|
+
};
|
113
|
+
onCopy?: import('react').ClipboardEventHandler<HTMLDivElement>;
|
114
|
+
onCopyCapture?: import('react').ClipboardEventHandler<HTMLDivElement>;
|
115
|
+
onCut?: import('react').ClipboardEventHandler<HTMLDivElement>;
|
116
|
+
onCutCapture?: import('react').ClipboardEventHandler<HTMLDivElement>;
|
117
|
+
onPaste?: import('react').ClipboardEventHandler<HTMLDivElement>;
|
118
|
+
onPasteCapture?: import('react').ClipboardEventHandler<HTMLDivElement>;
|
119
|
+
onCompositionEnd?: import('react').CompositionEventHandler<HTMLDivElement>;
|
120
|
+
onCompositionEndCapture?: import('react').CompositionEventHandler<HTMLDivElement>;
|
121
|
+
onCompositionStart?: import('react').CompositionEventHandler<HTMLDivElement>;
|
122
|
+
onCompositionStartCapture?: import('react').CompositionEventHandler<HTMLDivElement>;
|
123
|
+
onCompositionUpdate?: import('react').CompositionEventHandler<HTMLDivElement>;
|
124
|
+
onCompositionUpdateCapture?: import('react').CompositionEventHandler<HTMLDivElement>;
|
125
|
+
onFocus?: import('react').FocusEventHandler<HTMLDivElement>;
|
126
|
+
onFocusCapture?: import('react').FocusEventHandler<HTMLDivElement>;
|
127
|
+
onBlur?: import('react').FocusEventHandler<HTMLDivElement>;
|
128
|
+
onBlurCapture?: import('react').FocusEventHandler<HTMLDivElement>;
|
129
|
+
onChange?: import('react').FormEventHandler<HTMLDivElement>;
|
130
|
+
onChangeCapture?: import('react').FormEventHandler<HTMLDivElement>;
|
131
|
+
onBeforeInput?: import('react').FormEventHandler<HTMLDivElement>;
|
132
|
+
onBeforeInputCapture?: import('react').FormEventHandler<HTMLDivElement>;
|
133
|
+
onInput?: import('react').FormEventHandler<HTMLDivElement>;
|
134
|
+
onInputCapture?: import('react').FormEventHandler<HTMLDivElement>;
|
135
|
+
onReset?: import('react').FormEventHandler<HTMLDivElement>;
|
136
|
+
onResetCapture?: import('react').FormEventHandler<HTMLDivElement>;
|
137
|
+
onSubmit?: import('react').FormEventHandler<HTMLDivElement>;
|
138
|
+
onSubmitCapture?: import('react').FormEventHandler<HTMLDivElement>;
|
139
|
+
onInvalid?: import('react').FormEventHandler<HTMLDivElement>;
|
140
|
+
onInvalidCapture?: import('react').FormEventHandler<HTMLDivElement>;
|
141
|
+
onLoad?: import('react').ReactEventHandler<HTMLDivElement>;
|
142
|
+
onLoadCapture?: import('react').ReactEventHandler<HTMLDivElement>;
|
143
|
+
onError?: import('react').ReactEventHandler<HTMLDivElement>;
|
144
|
+
onErrorCapture?: import('react').ReactEventHandler<HTMLDivElement>;
|
145
|
+
onKeyDown?: import('react').KeyboardEventHandler<HTMLDivElement>;
|
146
|
+
onKeyDownCapture?: import('react').KeyboardEventHandler<HTMLDivElement>;
|
147
|
+
onKeyPress?: import('react').KeyboardEventHandler<HTMLDivElement>;
|
148
|
+
onKeyPressCapture?: import('react').KeyboardEventHandler<HTMLDivElement>;
|
149
|
+
onKeyUp?: import('react').KeyboardEventHandler<HTMLDivElement>;
|
150
|
+
onKeyUpCapture?: import('react').KeyboardEventHandler<HTMLDivElement>;
|
151
|
+
onAbort?: import('react').ReactEventHandler<HTMLDivElement>;
|
152
|
+
onAbortCapture?: import('react').ReactEventHandler<HTMLDivElement>;
|
153
|
+
onCanPlay?: import('react').ReactEventHandler<HTMLDivElement>;
|
154
|
+
onCanPlayCapture?: import('react').ReactEventHandler<HTMLDivElement>;
|
155
|
+
onCanPlayThrough?: import('react').ReactEventHandler<HTMLDivElement>;
|
156
|
+
onCanPlayThroughCapture?: import('react').ReactEventHandler<HTMLDivElement>;
|
157
|
+
onDurationChange?: import('react').ReactEventHandler<HTMLDivElement>;
|
158
|
+
onDurationChangeCapture?: import('react').ReactEventHandler<HTMLDivElement>;
|
159
|
+
onEmptied?: import('react').ReactEventHandler<HTMLDivElement>;
|
160
|
+
onEmptiedCapture?: import('react').ReactEventHandler<HTMLDivElement>;
|
161
|
+
onEncrypted?: import('react').ReactEventHandler<HTMLDivElement>;
|
162
|
+
onEncryptedCapture?: import('react').ReactEventHandler<HTMLDivElement>;
|
163
|
+
onEnded?: import('react').ReactEventHandler<HTMLDivElement>;
|
164
|
+
onEndedCapture?: import('react').ReactEventHandler<HTMLDivElement>;
|
165
|
+
onLoadedData?: import('react').ReactEventHandler<HTMLDivElement>;
|
166
|
+
onLoadedDataCapture?: import('react').ReactEventHandler<HTMLDivElement>;
|
167
|
+
onLoadedMetadata?: import('react').ReactEventHandler<HTMLDivElement>;
|
168
|
+
onLoadedMetadataCapture?: import('react').ReactEventHandler<HTMLDivElement>;
|
169
|
+
onLoadStart?: import('react').ReactEventHandler<HTMLDivElement>;
|
170
|
+
onLoadStartCapture?: import('react').ReactEventHandler<HTMLDivElement>;
|
171
|
+
onPause?: import('react').ReactEventHandler<HTMLDivElement>;
|
172
|
+
onPauseCapture?: import('react').ReactEventHandler<HTMLDivElement>;
|
173
|
+
onPlay?: import('react').ReactEventHandler<HTMLDivElement>;
|
174
|
+
onPlayCapture?: import('react').ReactEventHandler<HTMLDivElement>;
|
175
|
+
onPlaying?: import('react').ReactEventHandler<HTMLDivElement>;
|
176
|
+
onPlayingCapture?: import('react').ReactEventHandler<HTMLDivElement>;
|
177
|
+
onProgress?: import('react').ReactEventHandler<HTMLDivElement>;
|
178
|
+
onProgressCapture?: import('react').ReactEventHandler<HTMLDivElement>;
|
179
|
+
onRateChange?: import('react').ReactEventHandler<HTMLDivElement>;
|
180
|
+
onRateChangeCapture?: import('react').ReactEventHandler<HTMLDivElement>;
|
181
|
+
onSeeked?: import('react').ReactEventHandler<HTMLDivElement>;
|
182
|
+
onSeekedCapture?: import('react').ReactEventHandler<HTMLDivElement>;
|
183
|
+
onSeeking?: import('react').ReactEventHandler<HTMLDivElement>;
|
184
|
+
onSeekingCapture?: import('react').ReactEventHandler<HTMLDivElement>;
|
185
|
+
onStalled?: import('react').ReactEventHandler<HTMLDivElement>;
|
186
|
+
onStalledCapture?: import('react').ReactEventHandler<HTMLDivElement>;
|
187
|
+
onSuspend?: import('react').ReactEventHandler<HTMLDivElement>;
|
188
|
+
onSuspendCapture?: import('react').ReactEventHandler<HTMLDivElement>;
|
189
|
+
onTimeUpdate?: import('react').ReactEventHandler<HTMLDivElement>;
|
190
|
+
onTimeUpdateCapture?: import('react').ReactEventHandler<HTMLDivElement>;
|
191
|
+
onVolumeChange?: import('react').ReactEventHandler<HTMLDivElement>;
|
192
|
+
onVolumeChangeCapture?: import('react').ReactEventHandler<HTMLDivElement>;
|
193
|
+
onWaiting?: import('react').ReactEventHandler<HTMLDivElement>;
|
194
|
+
onWaitingCapture?: import('react').ReactEventHandler<HTMLDivElement>;
|
195
|
+
onAuxClick?: import('react').MouseEventHandler<HTMLDivElement>;
|
196
|
+
onAuxClickCapture?: import('react').MouseEventHandler<HTMLDivElement>;
|
197
|
+
onClickCapture?: import('react').MouseEventHandler<HTMLDivElement>;
|
198
|
+
onContextMenu?: import('react').MouseEventHandler<HTMLDivElement>;
|
199
|
+
onContextMenuCapture?: import('react').MouseEventHandler<HTMLDivElement>;
|
200
|
+
onDoubleClick?: import('react').MouseEventHandler<HTMLDivElement>;
|
201
|
+
onDoubleClickCapture?: import('react').MouseEventHandler<HTMLDivElement>;
|
202
|
+
onDragCapture?: import('react').DragEventHandler<HTMLDivElement>;
|
203
|
+
onDragEndCapture?: import('react').DragEventHandler<HTMLDivElement>;
|
204
|
+
onDragEnter?: import('react').DragEventHandler<HTMLDivElement>;
|
205
|
+
onDragEnterCapture?: import('react').DragEventHandler<HTMLDivElement>;
|
206
|
+
onDragExit?: import('react').DragEventHandler<HTMLDivElement>;
|
207
|
+
onDragExitCapture?: import('react').DragEventHandler<HTMLDivElement>;
|
208
|
+
onDragLeave?: import('react').DragEventHandler<HTMLDivElement>;
|
209
|
+
onDragLeaveCapture?: import('react').DragEventHandler<HTMLDivElement>;
|
210
|
+
onDragOver?: import('react').DragEventHandler<HTMLDivElement>;
|
211
|
+
onDragOverCapture?: import('react').DragEventHandler<HTMLDivElement>;
|
212
|
+
onDragStartCapture?: import('react').DragEventHandler<HTMLDivElement>;
|
213
|
+
onDrop?: import('react').DragEventHandler<HTMLDivElement>;
|
214
|
+
onDropCapture?: import('react').DragEventHandler<HTMLDivElement>;
|
215
|
+
onMouseDown?: import('react').MouseEventHandler<HTMLDivElement>;
|
216
|
+
onMouseDownCapture?: import('react').MouseEventHandler<HTMLDivElement>;
|
217
|
+
onMouseLeave?: import('react').MouseEventHandler<HTMLDivElement>;
|
218
|
+
onMouseMove?: import('react').MouseEventHandler<HTMLDivElement>;
|
219
|
+
onMouseMoveCapture?: import('react').MouseEventHandler<HTMLDivElement>;
|
220
|
+
onMouseOut?: import('react').MouseEventHandler<HTMLDivElement>;
|
221
|
+
onMouseOutCapture?: import('react').MouseEventHandler<HTMLDivElement>;
|
222
|
+
onMouseOver?: import('react').MouseEventHandler<HTMLDivElement>;
|
223
|
+
onMouseOverCapture?: import('react').MouseEventHandler<HTMLDivElement>;
|
224
|
+
onMouseUp?: import('react').MouseEventHandler<HTMLDivElement>;
|
225
|
+
onMouseUpCapture?: import('react').MouseEventHandler<HTMLDivElement>;
|
226
|
+
onSelect?: import('react').ReactEventHandler<HTMLDivElement>;
|
227
|
+
onSelectCapture?: import('react').ReactEventHandler<HTMLDivElement>;
|
228
|
+
onTouchCancel?: import('react').TouchEventHandler<HTMLDivElement>;
|
229
|
+
onTouchCancelCapture?: import('react').TouchEventHandler<HTMLDivElement>;
|
230
|
+
onTouchEnd?: import('react').TouchEventHandler<HTMLDivElement>;
|
231
|
+
onTouchEndCapture?: import('react').TouchEventHandler<HTMLDivElement>;
|
232
|
+
onTouchMove?: import('react').TouchEventHandler<HTMLDivElement>;
|
233
|
+
onTouchMoveCapture?: import('react').TouchEventHandler<HTMLDivElement>;
|
234
|
+
onTouchStart?: import('react').TouchEventHandler<HTMLDivElement>;
|
235
|
+
onTouchStartCapture?: import('react').TouchEventHandler<HTMLDivElement>;
|
236
|
+
onPointerDown?: import('react').PointerEventHandler<HTMLDivElement>;
|
237
|
+
onPointerDownCapture?: import('react').PointerEventHandler<HTMLDivElement>;
|
238
|
+
onPointerMove?: import('react').PointerEventHandler<HTMLDivElement>;
|
239
|
+
onPointerMoveCapture?: import('react').PointerEventHandler<HTMLDivElement>;
|
240
|
+
onPointerUp?: import('react').PointerEventHandler<HTMLDivElement>;
|
241
|
+
onPointerUpCapture?: import('react').PointerEventHandler<HTMLDivElement>;
|
242
|
+
onPointerCancel?: import('react').PointerEventHandler<HTMLDivElement>;
|
243
|
+
onPointerCancelCapture?: import('react').PointerEventHandler<HTMLDivElement>;
|
244
|
+
onPointerEnter?: import('react').PointerEventHandler<HTMLDivElement>;
|
245
|
+
onPointerEnterCapture?: import('react').PointerEventHandler<HTMLDivElement>;
|
246
|
+
onPointerLeave?: import('react').PointerEventHandler<HTMLDivElement>;
|
247
|
+
onPointerLeaveCapture?: import('react').PointerEventHandler<HTMLDivElement>;
|
248
|
+
onPointerOver?: import('react').PointerEventHandler<HTMLDivElement>;
|
249
|
+
onPointerOverCapture?: import('react').PointerEventHandler<HTMLDivElement>;
|
250
|
+
onPointerOut?: import('react').PointerEventHandler<HTMLDivElement>;
|
251
|
+
onPointerOutCapture?: import('react').PointerEventHandler<HTMLDivElement>;
|
252
|
+
onGotPointerCapture?: import('react').PointerEventHandler<HTMLDivElement>;
|
253
|
+
onGotPointerCaptureCapture?: import('react').PointerEventHandler<HTMLDivElement>;
|
254
|
+
onLostPointerCapture?: import('react').PointerEventHandler<HTMLDivElement>;
|
255
|
+
onLostPointerCaptureCapture?: import('react').PointerEventHandler<HTMLDivElement>;
|
256
|
+
onScroll?: import('react').UIEventHandler<HTMLDivElement>;
|
257
|
+
onScrollCapture?: import('react').UIEventHandler<HTMLDivElement>;
|
258
|
+
onWheel?: import('react').WheelEventHandler<HTMLDivElement>;
|
259
|
+
onWheelCapture?: import('react').WheelEventHandler<HTMLDivElement>;
|
260
|
+
onAnimationStartCapture?: import('react').AnimationEventHandler<HTMLDivElement>;
|
261
|
+
onAnimationEnd?: import('react').AnimationEventHandler<HTMLDivElement>;
|
262
|
+
onAnimationEndCapture?: import('react').AnimationEventHandler<HTMLDivElement>;
|
263
|
+
onAnimationIteration?: import('react').AnimationEventHandler<HTMLDivElement>;
|
264
|
+
onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLDivElement>;
|
265
|
+
onTransitionEnd?: import('react').TransitionEventHandler<HTMLDivElement>;
|
266
|
+
onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLDivElement>;
|
267
|
+
} & import('framer-motion').MotionProps & {
|
268
|
+
ref: import('react').MutableRefObject<HTMLDivElement>;
|
269
|
+
};
|
270
|
+
setFocusedIndex: import('react').Dispatch<import('react').SetStateAction<number>>;
|
271
|
+
closePopover: () => void;
|
272
|
+
searchTerm: string;
|
273
|
+
handleSearch: (e: ChangeEvent<HTMLInputElement>) => void;
|
274
|
+
scrollableRef: import('react').MutableRefObject<HTMLElement>;
|
275
|
+
};
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import { UseActionMenuProps } from './types';
|
2
|
+
export declare const getActionMenuFlatOptions: <T extends string | number>(options: UseActionMenuProps<T>["options"]) => {
|
3
|
+
option: import('./types').ActionMenuItemType<T>;
|
4
|
+
itemIndex: number;
|
5
|
+
sectionIndex: number;
|
6
|
+
}[];
|
7
|
+
export declare const filterActionMenuOptions: <T extends string | number>(options: UseActionMenuProps<T>["options"], searchTerm: string) => import('./types').ActionMenuOptionType<T>[];
|
@@ -1,5 +1,3 @@
|
|
1
|
-
|
2
|
-
headerName: string;
|
3
|
-
}
|
1
|
+
import { HeaderWithCreateButtonProps } from './types';
|
4
2
|
export declare const HeaderWithCreateButton: ({ headerName }: HeaderWithCreateButtonProps) => JSX.Element;
|
5
3
|
export default HeaderWithCreateButton;
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import { ActionMenuProps } from '@Shared/Components/ActionMenu';
|
2
|
+
export interface HeaderWithCreateButtonProps {
|
3
|
+
headerName: string;
|
4
|
+
}
|
5
|
+
export declare enum CreateActionMenuItems {
|
6
|
+
CUSTOM_APP = "create-custom-app",
|
7
|
+
CHART_STORE = "create-from-chart-store",
|
8
|
+
JOB = "create-job"
|
9
|
+
}
|
10
|
+
export type CreateActionMenuProps = ActionMenuProps<CreateActionMenuItems>;
|
@@ -1,4 +1,5 @@
|
|
1
|
-
import {
|
2
|
-
export declare const
|
3
|
-
export declare const
|
4
|
-
export declare const
|
1
|
+
import { HelpButtonActionMenuProps } from './types';
|
2
|
+
export declare const COMMON_HELP_ACTION_MENU_ITEMS: HelpButtonActionMenuProps['options'][number]['items'];
|
3
|
+
export declare const OSS_HELP_ACTION_MENU_ITEMS: HelpButtonActionMenuProps['options'][number]['items'];
|
4
|
+
export declare const ENTERPRISE_TRIAL_HELP_ACTION_MENU_ITEMS: HelpButtonActionMenuProps['options'][number]['items'];
|
5
|
+
export declare const ENTERPRISE_HELP_ACTION_MENU_ITEMS: HelpButtonActionMenuProps['options'][number]['items'];
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import { ModuleStatus } from '../../types';
|
2
2
|
import { ResponseType, TippyCustomizedProps } from '../../../Common';
|
3
|
+
import { ActionMenuProps } from '../ActionMenu';
|
3
4
|
export declare enum InstallationType {
|
4
5
|
OSS_KUBECTL = "oss_kubectl",
|
5
6
|
OSS_HELM = "oss_helm",
|
@@ -33,16 +34,21 @@ export interface ServerInfo {
|
|
33
34
|
export interface ServerInfoResponse extends ResponseType {
|
34
35
|
result?: ServerInfo;
|
35
36
|
}
|
36
|
-
export interface
|
37
|
-
className: string;
|
38
|
-
setShowHelpCard: React.Dispatch<React.SetStateAction<boolean>>;
|
37
|
+
export interface HelpButtonProps {
|
39
38
|
serverInfo: ServerInfo;
|
40
39
|
fetchingServerInfo: boolean;
|
41
|
-
|
42
|
-
showHelpCard: boolean;
|
40
|
+
onClick: () => void;
|
43
41
|
}
|
44
|
-
export
|
45
|
-
|
46
|
-
|
47
|
-
|
42
|
+
export declare enum HelpMenuItems {
|
43
|
+
GETTING_STARTED = "getting-started",
|
44
|
+
VIEW_DOCUMENTATION = "view-documentation",
|
45
|
+
JOIN_DISCORD_COMMUNITY = "join-discord-community",
|
46
|
+
ABOUT_DEVTRON = "about-devtron",
|
47
|
+
REQUEST_SUPPORT = "request-support",
|
48
|
+
OPEN_NEW_TICKET = "open-new-ticket",
|
49
|
+
VIEW_ALL_TICKETS = "view-all-tickets",
|
50
|
+
GIVE_FEEDBACK = "give-feedback",
|
51
|
+
CHAT_WITH_SUPPORT = "chat-with-support",
|
52
|
+
RAISE_ISSUE_REQUEST = "raise-issue-request"
|
48
53
|
}
|
54
|
+
export type HelpButtonActionMenuProps = ActionMenuProps<HelpMenuItems>;
|
@@ -1,6 +1,10 @@
|
|
1
1
|
import { DevtronLicenseInfo } from '../License';
|
2
|
+
import { HelpButtonActionMenuProps } from './types';
|
2
3
|
export declare const getDateInMilliseconds: (days: any) => number;
|
3
4
|
export declare const handlePostHogEventUpdate: (eventName: string) => Promise<void>;
|
4
5
|
export declare const setActionWithExpiry: (key: string, days: number) => void;
|
5
6
|
export declare const getIsShowingLicenseData: (licenseData: DevtronLicenseInfo) => boolean;
|
6
|
-
export declare const
|
7
|
+
export declare const getHelpActionMenuOptions: ({ isEnterprise, isTrial, }: {
|
8
|
+
isEnterprise: boolean;
|
9
|
+
isTrial: boolean;
|
10
|
+
}) => HelpButtonActionMenuProps["options"];
|
@@ -27,6 +27,7 @@ export declare const iconMap: {
|
|
27
27
|
'ic-caret-right': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
28
28
|
'ic-cd': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
29
29
|
'ic-chat-circle-dots': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
30
|
+
'ic-chat-circle-online': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
30
31
|
'ic-check': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
31
32
|
'ic-checks': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
32
33
|
'ic-ci-linked': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
@@ -51,8 +52,10 @@ export declare const iconMap: {
|
|
51
52
|
'ic-devtron-header-logo': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
52
53
|
'ic-devtron': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
53
54
|
'ic-disconnect': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
55
|
+
'ic-discord-fill': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
54
56
|
'ic-dockerhub': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
55
57
|
'ic-ecr': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
58
|
+
'ic-edit': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
56
59
|
'ic-enterprise-feat': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
57
60
|
'ic-enterprise-tag': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
58
61
|
'ic-env': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
@@ -60,7 +63,10 @@ export declare const iconMap: {
|
|
60
63
|
'ic-expand-right-sm': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
61
64
|
'ic-expand-sm': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
62
65
|
'ic-failure': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
66
|
+
'ic-file-edit': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
63
67
|
'ic-file-key': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
68
|
+
'ic-file': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
69
|
+
'ic-files': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
64
70
|
'ic-folder-user': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
65
71
|
'ic-gear': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
66
72
|
'ic-gift-gradient': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
@@ -99,6 +105,7 @@ export declare const iconMap: {
|
|
99
105
|
'ic-medium-delete': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
100
106
|
'ic-medium-paintbucket': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
101
107
|
'ic-megaphone-left': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
108
|
+
'ic-megaphone-right': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
102
109
|
'ic-memory': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
103
110
|
'ic-microsoft': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
104
111
|
'ic-minikube': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
@@ -113,6 +120,7 @@ export declare const iconMap: {
|
|
113
120
|
'ic-openshift': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
114
121
|
'ic-out-of-sync': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
115
122
|
'ic-paper-plane-color': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
123
|
+
'ic-path': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
116
124
|
'ic-pencil': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
117
125
|
'ic-quay': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
118
126
|
'ic-quote': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
@@ -1,2 +1,2 @@
|
|
1
1
|
import { IconBaseProps } from './types';
|
2
|
-
export declare const IconBase: ({ name, iconMap, size, tooltipProps, color }: IconBaseProps) => JSX.Element;
|
2
|
+
export declare const IconBase: ({ name, iconMap, size, tooltipProps, color, dataTestId, rotateBy, fillSpace, }: IconBaseProps) => JSX.Element;
|
@@ -3,22 +3,44 @@ import { TooltipProps } from '@Common/Tooltip/types';
|
|
3
3
|
import { IconBaseColorType, IconBaseSizeType } from '../../index';
|
4
4
|
type IconMap = Record<string, FC<SVGProps<SVGSVGElement>>>;
|
5
5
|
export interface IconBaseProps {
|
6
|
-
/**
|
6
|
+
/**
|
7
|
+
* The name of the icon to render.
|
8
|
+
*/
|
7
9
|
name: keyof IconMap;
|
8
|
-
/**
|
10
|
+
/**
|
11
|
+
* A map containing all available icons.
|
12
|
+
*/
|
9
13
|
iconMap: IconMap;
|
10
14
|
/**
|
11
|
-
* The size of the icon in pixels.
|
15
|
+
* The size of the icon in pixels. If not provided, the default size is `16px`.
|
16
|
+
*
|
12
17
|
* @default 16
|
13
18
|
*/
|
14
19
|
size?: IconBaseSizeType | null;
|
15
|
-
/**
|
20
|
+
/**
|
21
|
+
* Configuration for the tooltip displayed when hovering over the icon.
|
22
|
+
*/
|
16
23
|
tooltipProps?: TooltipProps;
|
17
24
|
/**
|
18
|
-
* The color of the icon
|
19
|
-
* If `null`, the default color
|
20
|
-
*
|
25
|
+
* The color of the icon, specified using predefined color tokens.
|
26
|
+
* If set to `null`, the icon's default color will be used.
|
27
|
+
*
|
28
|
+
* @example 'B500', 'N200', 'G50', 'R700'
|
21
29
|
*/
|
22
30
|
color: IconBaseColorType;
|
31
|
+
/**
|
32
|
+
* A unique identifier for testing purposes, typically used in test automation.
|
33
|
+
*/
|
34
|
+
dataTestId?: string;
|
35
|
+
/**
|
36
|
+
* Rotates the icon by the specified number of degrees.
|
37
|
+
*
|
38
|
+
* @example 90, 180, 270
|
39
|
+
*/
|
40
|
+
rotateBy?: number;
|
41
|
+
/**
|
42
|
+
* If true, the icon will expand to fill the available space of its container.
|
43
|
+
*/
|
44
|
+
fillSpace?: boolean;
|
23
45
|
}
|
24
46
|
export {};
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import { PopoverProps } from './types';
|
2
|
+
/**
|
3
|
+
* Popover Component \
|
4
|
+
* This component serves as a base for creating popovers. It is not intended to be used directly.
|
5
|
+
* @note Use this component in conjunction with the `usePopover` hook to create a custom popover component. \
|
6
|
+
* For example, see the `ActionMenu` component for reference.
|
7
|
+
*/
|
8
|
+
export declare const Popover: ({ open, popoverProps, overlayProps, triggerProps, buttonProps, triggerElement, children, }: PopoverProps) => JSX.Element;
|