@devtron-labs/devtron-fe-common-lib 1.13.0 → 1.14.0
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-BUC7SZkT.js → @code-editor-YS-brIXD.js} +15073 -14565
- package/dist/@common-rjsf--YchCFEp.js +617 -0
- package/dist/{@framer-motion-BL6-Hrrc.js → @framer-motion-eB9Rj-_8.js} +1 -1
- package/dist/{@react-dates-CIHHgq4p.js → @react-dates-CJpoumtu.js} +14 -14
- package/dist/{@react-select-BVKpsqGO.js → @react-select-CUbAbK6L.js} +1 -1
- package/dist/{@react-virtualized-sticky-tree-CjKfeUxB.js → @react-virtualized-sticky-tree-Ckb5S1RC.js} +1 -1
- package/dist/{@vendor-CekuMgQx.js → @vendor-4cEd9dja.js} +45804 -45814
- package/dist/Common/Checkbox/Checkbox.d.ts +2 -0
- package/dist/Common/Checkbox/index.d.ts +1 -0
- package/dist/Common/Common.service.d.ts +2 -2
- package/dist/Common/Constants.d.ts +2 -2
- package/dist/Common/Drawer/index.d.ts +1 -0
- package/dist/Common/EmptyState/index.d.ts +2 -0
- package/dist/Common/Helper.d.ts +5 -1
- package/dist/Common/RJSF/Form.d.ts +1 -1
- package/dist/Common/SegmentedBarChart/types.d.ts +11 -2
- package/dist/Common/Toggle/Toggle.d.ts +4 -1
- package/dist/Common/Types.d.ts +2 -0
- package/dist/Common/index.d.ts +2 -3
- package/dist/Pages/GlobalConfigurations/ClustersAndEnvironments/index.d.ts +1 -0
- package/dist/Pages/GlobalConfigurations/ClustersAndEnvironments/types.d.ts +8 -0
- package/dist/Pages/GlobalConfigurations/index.d.ts +1 -0
- package/dist/Pages/ResourceBrowser/service.d.ts +1 -1
- package/dist/Pages/ResourceBrowser/types.d.ts +43 -0
- 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/AppStatusModal/AppStatusBody.d.ts +2 -0
- package/dist/Shared/Components/AppStatusModal/AppStatusContent.d.ts +3 -0
- package/dist/Shared/Components/AppStatusModal/AppStatusModal.component.d.ts +3 -0
- package/dist/Shared/Components/AppStatusModal/AppStatusModalTabList.d.ts +3 -0
- package/dist/Shared/Components/AppStatusModal/constants.d.ts +4 -0
- package/dist/Shared/Components/AppStatusModal/index.d.ts +3 -0
- package/dist/Shared/Components/AppStatusModal/service.d.ts +4 -0
- package/dist/Shared/Components/AppStatusModal/types.d.ts +84 -0
- package/dist/Shared/Components/AppStatusModal/utils.d.ts +8 -0
- package/dist/Shared/Components/BulkOperations/types.d.ts +2 -2
- package/dist/Shared/Components/Button/types.d.ts +3 -1
- package/dist/Shared/Components/CICDHistory/DeploymentStatusBreakdown.d.ts +1 -1
- package/dist/Shared/Components/CICDHistory/DeploymentStatusDetailRow.d.ts +1 -1
- package/dist/Shared/Components/CICDHistory/LogStageAccordion.d.ts +1 -1
- package/dist/Shared/Components/CICDHistory/constants.d.ts +1 -0
- package/dist/Shared/Components/CICDHistory/index.d.ts +0 -1
- package/dist/Shared/Components/CICDHistory/service.d.ts +3 -0
- package/dist/Shared/Components/CICDHistory/types.d.ts +11 -77
- package/dist/Shared/Components/CICDHistory/utils.d.ts +7 -3
- package/dist/Shared/Components/DeploymentStatusBreakdown/constants.d.ts +10 -0
- package/dist/Shared/Components/DeploymentStatusBreakdown/index.d.ts +3 -0
- package/dist/Shared/Components/DeploymentStatusBreakdown/types.d.ts +22 -0
- package/dist/Shared/Components/DeploymentStatusBreakdown/utils.d.ts +20 -0
- package/dist/Shared/Components/Error/ErrorBar.d.ts +1 -1
- package/dist/Shared/Components/Error/types.d.ts +4 -0
- package/dist/Shared/Components/Error/utils.d.ts +1 -0
- package/dist/Shared/Components/FramerComponents/index.d.ts +2 -2
- 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/PageHeader.d.ts +1 -1
- package/dist/Shared/Components/Header/constants.d.ts +5 -4
- package/dist/Shared/Components/Header/types.d.ts +15 -10
- package/dist/Shared/Components/Header/utils.d.ts +5 -1
- package/dist/Shared/Components/Icon/Icon.d.ts +37 -1
- package/dist/Shared/Components/Icon/IconBase.d.ts +1 -1
- package/dist/Shared/Components/Icon/types.d.ts +30 -8
- package/dist/Shared/Components/InfoBlock/constants.d.ts +2 -2
- package/dist/Shared/Components/InfoBlock/types.d.ts +2 -2
- package/dist/Shared/Components/InfoIconTippy/InfoIconTippy.d.ts +1 -1
- package/dist/Shared/Components/License/index.d.ts +1 -1
- package/dist/Shared/Components/License/utils.d.ts +2 -1
- package/dist/Shared/Components/LoginBanner/Testimonials.components.d.ts +3 -0
- package/dist/Shared/Components/LoginBanner/index.d.ts +2 -0
- 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/Security/SecurityModal/types.d.ts +2 -2
- package/dist/Shared/Components/Security/SecurityModal/utils.d.ts +1 -1
- package/dist/Shared/Components/SelectPicker/common.d.ts +2 -0
- package/dist/Shared/Components/SelectPicker/index.d.ts +1 -0
- package/dist/Shared/Components/SelectPicker/type.d.ts +4 -0
- package/dist/Shared/Components/StatusComponent/types.d.ts +2 -1
- package/dist/Shared/Components/TabGroup/TabGroup.helpers.d.ts +1 -1
- package/dist/Shared/Components/TabGroup/TabGroup.types.d.ts +33 -7
- package/dist/Shared/Components/TargetPlatforms/TargetPlatformListTooltip.d.ts +1 -1
- package/dist/Shared/Components/TargetPlatforms/types.d.ts +1 -2
- package/dist/Shared/Components/index.d.ts +2 -2
- package/dist/Shared/Helpers.d.ts +2 -2
- package/dist/Shared/Providers/index.d.ts +1 -1
- package/dist/Shared/Providers/types.d.ts +11 -1
- package/dist/Shared/constants.d.ts +18 -24
- package/dist/Shared/types.d.ts +110 -2
- package/dist/assets/@code-editor.css +1 -0
- package/dist/assets/@common-rjsf.css +1 -1
- package/dist/assets/ic-amazon-eks.13404569.svg +5 -0
- package/dist/assets/ic-arrow-square-out.59bb549a.svg +3 -0
- package/dist/assets/ic-azure-aks.a9e437d5.svg +46 -0
- package/dist/assets/{ic-timeout-red.5eda1010.svg → ic-bulk-check.0f698efa.svg} +4 -4
- package/dist/assets/ic-bulk-check.99e92f7a.svg +21 -0
- package/dist/assets/ic-caret-down-small.7c4f88bf.svg +3 -0
- package/dist/assets/ic-caret-right.0ff813c2.svg +3 -0
- package/dist/assets/ic-celebration.77350694.svg +238 -0
- package/dist/assets/ic-chat-circle-online.51348da5.svg +4 -0
- package/dist/assets/{ic-medal.a2e911f5.svg → ic-checkbox-hover.0151d832.svg} +4 -3
- package/dist/assets/{ic-k8s-job.f4414c10.svg → ic-checkbox-hover.93e8d66a.svg} +4 -3
- package/dist/assets/ic-checkbox-intermediate.24c6d21d.svg +22 -0
- package/dist/assets/ic-checkbox-intermediate.2a2d6c49.svg +22 -0
- package/dist/assets/ic-checkbox-selected.47444fab.svg +20 -0
- package/dist/assets/ic-checkbox-selected.c5539d6f.svg +20 -0
- package/dist/assets/{ic-check-grey.f556e371.svg → ic-checkbox-unselected.8054e3d7.svg} +2 -4
- package/dist/assets/ic-checkbox-unselected.ab91cdba.svg +19 -0
- package/dist/assets/ic-cloud-vms.27ea954e.svg +5 -0
- package/dist/assets/ic-cluster.71ba9e26.svg +3 -0
- package/dist/assets/ic-delete-dots.5380e0d0.svg +62 -0
- package/dist/assets/ic-disconnect.2ad261fc.svg +3 -0
- package/dist/assets/ic-discord-fill.103b579a.svg +3 -0
- package/dist/assets/ic-edit.3249ed32.svg +3 -0
- package/dist/assets/ic-enterprise-feat.5ee25d5b.svg +3 -0
- package/dist/assets/ic-enterprise-tag.209dd129.svg +43 -0
- package/dist/assets/ic-expand-right-sm.9b347d49.svg +3 -0
- package/dist/assets/ic-expand-sm.a9a724f8.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-gift-gradient.7690a246.svg +9 -0
- package/dist/assets/ic-gift.9b048fc7.svg +3 -0
- package/dist/assets/ic-gitlab.ac331d67.svg +31 -0
- package/dist/assets/ic-google-gke.07314724.svg +9 -0
- package/dist/assets/ic-install.28c3beec.svg +3 -0
- package/dist/assets/ic-k3s.7f4bf72d.svg +3 -0
- package/dist/assets/ic-kind.bd8ee992.svg +9 -0
- package/dist/assets/ic-laptop.485e21b4.svg +3 -0
- package/dist/assets/ic-man-on-rocket.7f67e914.svg +94 -0
- package/dist/assets/ic-megaphone-left.6b2a00b7.svg +3 -0
- package/dist/assets/ic-megaphone-right.9d6bcd36.svg +3 -0
- package/dist/assets/ic-minikube.d9ff1575.svg +9 -0
- package/dist/assets/ic-mobile.7c649251.svg +4 -0
- package/dist/assets/ic-path.d4fef3b0.svg +3 -0
- package/dist/assets/ic-sparkle-color.01c0be88.svg +1 -0
- package/dist/assets/ic-terminal.d875cce7.svg +3 -0
- package/dist/assets/ic-thermometer.1bc48079.svg +3 -0
- package/dist/assets/ic-ubuntu.fa47508f.svg +4 -0
- package/dist/assets/ic-user-circle.7d7152fa.svg +3 -0
- package/dist/assets/ic-wifi-slash.d0390749.svg +3 -0
- package/dist/index.d.ts +7 -0
- package/dist/index.js +881 -850
- package/package.json +1 -1
- package/dist/Common/Checkbox.d.ts +0 -5
- package/dist/Shared/Components/ActionMenu/ActionMenuOption.d.ts +0 -3
- package/dist/Shared/Components/AnnouncementBanner/AnnouncementBanner.d.ts +0 -6
- package/dist/Shared/Components/AnnouncementBanner/index.d.ts +0 -1
- package/dist/Shared/Components/CICDHistory/AppStatusDetailsChart.d.ts +0 -3
- package/dist/Shared/Components/CICDHistory/ErrorInfoStatusBar.d.ts +0 -2
- package/dist/Shared/Components/EnterpriseTag/EnterpriseTag.component.d.ts +0 -2
- package/dist/Shared/Components/EnterpriseTag/index.d.ts +0 -1
- 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-disconnected.551d6161.svg +0 -29
- 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-login-devtron-logo.702a1d04.svg +0 -22
- package/dist/assets/ic-megaphone.b9f9a901.svg +0 -19
- package/dist/assets/ic-onboarding.c98f9ef9.svg +0 -19
@@ -0,0 +1,10 @@
|
|
1
|
+
import { DEPLOYMENT_STATUS } from '../../constants';
|
2
|
+
import { DeploymentPhaseType, DeploymentStatusTimelineType } from '../../types';
|
3
|
+
import { WorkflowRunnerStatusDTO } from './types';
|
4
|
+
export declare const DEPLOYMENT_STATUS_TEXT_MAP: Readonly<Record<(typeof DEPLOYMENT_STATUS)[keyof typeof DEPLOYMENT_STATUS], string>>;
|
5
|
+
export declare const WFR_STATUS_DTO_TO_DEPLOYMENT_STATUS_MAP: Readonly<Record<WorkflowRunnerStatusDTO, (typeof DEPLOYMENT_STATUS)[keyof typeof DEPLOYMENT_STATUS]>>;
|
6
|
+
export declare const PROGRESSING_DEPLOYMENT_STATUS: Readonly<(typeof DEPLOYMENT_STATUS)[keyof typeof DEPLOYMENT_STATUS][]>;
|
7
|
+
export declare const SUCCESSFUL_DEPLOYMENT_STATUS: typeof PROGRESSING_DEPLOYMENT_STATUS;
|
8
|
+
export declare const FAILED_DEPLOYMENT_STATUS: typeof PROGRESSING_DEPLOYMENT_STATUS;
|
9
|
+
export declare const PHYSICAL_ENV_DEPLOYMENT_TIMELINE_ORDER: Readonly<DeploymentStatusTimelineType[]>;
|
10
|
+
export declare const DEPLOYMENT_PHASES: Readonly<DeploymentPhaseType[]>;
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import { DEPLOYMENT_STATUS } from '../../constants';
|
2
|
+
import { DeploymentStatusBreakdownItemType, DeploymentStatusDetailsType, DeploymentStatusTimelineType } from '../../types';
|
3
|
+
export declare enum WorkflowRunnerStatusDTO {
|
4
|
+
PROGRESSING = "Progressing",
|
5
|
+
ABORTED = "Aborted",
|
6
|
+
FAILED = "Failed",
|
7
|
+
SUCCEEDED = "Succeeded",
|
8
|
+
TIMED_OUT = "TimedOut",
|
9
|
+
UNABLE_TO_FETCH = "UnableToFetch",
|
10
|
+
STARTING = "Starting",
|
11
|
+
QUEUED = "Queued",
|
12
|
+
INITIATING = "Initiating",
|
13
|
+
HEALTHY = "Healthy",
|
14
|
+
DEGRADED = "Degraded"
|
15
|
+
}
|
16
|
+
export interface ProcessUnableToFetchOrTimedOutStatusType {
|
17
|
+
timelineData: DeploymentStatusBreakdownItemType;
|
18
|
+
timelineStatusType: DeploymentStatusTimelineType;
|
19
|
+
deploymentStatus: typeof DEPLOYMENT_STATUS.UNABLE_TO_FETCH | typeof DEPLOYMENT_STATUS.TIMED_OUT;
|
20
|
+
statusLastFetchedAt: DeploymentStatusDetailsType['statusLastFetchedAt'] | null;
|
21
|
+
statusFetchCount: DeploymentStatusDetailsType['statusFetchCount'] | null;
|
22
|
+
}
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import { DeploymentStatusDetailsBreakdownDataType, DeploymentStatusDetailsType } from '../../types';
|
2
|
+
/**
|
3
|
+
* @description
|
4
|
+
* This function processes the deployment status details data and returns a breakdown of the deployment status.
|
5
|
+
* Cases it handles:
|
6
|
+
* 1. If timelines are not present, say the case of helm deployment, we will parse the wfrStatus and put the status and basic deployment info [triggeredBy, deploymentStartedOn, deploymentFinishedOn] into the breakdown data and return it.
|
7
|
+
* 2. In case of gitops:
|
8
|
+
* - There are five timelines in chronological order:
|
9
|
+
* - Deployment Initiated
|
10
|
+
* - Git commit
|
11
|
+
* - ArgoCD Sync
|
12
|
+
* - Kubectl Apply
|
13
|
+
* - App Health
|
14
|
+
* - Basic flow is we traverse the timelines in order, if find the last status for that specific timeline from response by traversing the timelines in reverse order.
|
15
|
+
* - If element is found, we will parse the status and set the icon, display text, time, etc. for that timeline and set the next timeline to inprogress.
|
16
|
+
* - If element is not found, we will parse on basis of factors like:
|
17
|
+
* - If this timeline is not inprogress and deploymentStatus is progressing, we will set the current timeline to waiting.
|
18
|
+
* - In similar fashion based on the deploymentStatus we will set the icon and display text for the timeline.
|
19
|
+
*/
|
20
|
+
export declare const processDeploymentStatusDetailsData: (data?: DeploymentStatusDetailsType) => DeploymentStatusDetailsBreakdownDataType;
|
@@ -1,3 +1,3 @@
|
|
1
|
-
import { AnimatePresence } from 'framer-motion';
|
1
|
+
import { AnimatePresence, motion } from 'framer-motion';
|
2
2
|
export * from './MotionDiv';
|
3
|
-
export { AnimatePresence };
|
3
|
+
export { AnimatePresence, motion };
|
@@ -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,3 +1,3 @@
|
|
1
1
|
import { PageHeaderType } from './types';
|
2
|
-
declare const PageHeader: ({ headerName, additionalHeaderInfo, showTabs, renderHeaderTabs, isBreadcrumbs, breadCrumbs, renderActionButtons, showCloseButton, onClose, markAsBeta,
|
2
|
+
declare const PageHeader: ({ headerName, additionalHeaderInfo, showTabs, renderHeaderTabs, isBreadcrumbs, breadCrumbs, renderActionButtons, showCloseButton, onClose, markAsBeta, tippyProps, }: PageHeaderType) => JSX.Element;
|
3
3
|
export default PageHeader;
|
@@ -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",
|
@@ -16,7 +17,6 @@ export interface PageHeaderType {
|
|
16
17
|
showCloseButton?: boolean;
|
17
18
|
onClose?: () => void;
|
18
19
|
markAsBeta?: boolean;
|
19
|
-
showAnnouncementHeader?: boolean;
|
20
20
|
tippyProps?: Pick<TippyCustomizedProps, 'additionalContent'> & {
|
21
21
|
isTippyCustomized?: boolean;
|
22
22
|
tippyRedirectLink?: string;
|
@@ -34,16 +34,21 @@ export interface ServerInfo {
|
|
34
34
|
export interface ServerInfoResponse extends ResponseType {
|
35
35
|
result?: ServerInfo;
|
36
36
|
}
|
37
|
-
export interface
|
38
|
-
className: string;
|
39
|
-
setShowHelpCard: React.Dispatch<React.SetStateAction<boolean>>;
|
37
|
+
export interface HelpButtonProps {
|
40
38
|
serverInfo: ServerInfo;
|
41
39
|
fetchingServerInfo: boolean;
|
42
|
-
|
43
|
-
showHelpCard: boolean;
|
40
|
+
onClick: () => void;
|
44
41
|
}
|
45
|
-
export
|
46
|
-
|
47
|
-
|
48
|
-
|
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"
|
49
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"];
|
@@ -3,12 +3,15 @@ export declare const iconMap: {
|
|
3
3
|
'ic-73strings': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
4
4
|
'ic-aborted': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
5
5
|
'ic-add': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
6
|
+
'ic-amazon-eks': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
6
7
|
'ic-apica': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
7
8
|
'ic-app-group': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
8
9
|
'ic-arrow-clockwise': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
9
10
|
'ic-arrow-right': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
11
|
+
'ic-arrow-square-out': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
10
12
|
'ic-arrows-left-right': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
11
13
|
'ic-ather': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
14
|
+
'ic-azure-aks': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
12
15
|
'ic-azure': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
13
16
|
'ic-bg-cluster': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
14
17
|
'ic-bharatpe': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
@@ -19,9 +22,12 @@ export declare const iconMap: {
|
|
19
22
|
'ic-calendar': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
20
23
|
'ic-cancelled': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
21
24
|
'ic-card-stack': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
25
|
+
'ic-caret-down-small': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
22
26
|
'ic-caret-left': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
27
|
+
'ic-caret-right': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
23
28
|
'ic-cd': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
24
29
|
'ic-chat-circle-dots': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
30
|
+
'ic-chat-circle-online': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
25
31
|
'ic-check': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
26
32
|
'ic-checks': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
27
33
|
'ic-ci-linked': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
@@ -30,6 +36,8 @@ export declare const iconMap: {
|
|
30
36
|
'ic-clock': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
31
37
|
'ic-close-large': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
32
38
|
'ic-close-small': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
39
|
+
'ic-cloud-vms': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
40
|
+
'ic-cluster': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
33
41
|
'ic-code': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
34
42
|
'ic-container': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
35
43
|
'ic-cookr': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
@@ -37,24 +45,38 @@ export declare const iconMap: {
|
|
37
45
|
'ic-cpu': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
38
46
|
'ic-crown': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
39
47
|
'ic-cube': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
48
|
+
'ic-delete-dots': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
40
49
|
'ic-delete-lightning': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
41
50
|
'ic-delete': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
42
51
|
'ic-delhivery': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
43
52
|
'ic-devtron-header-logo': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
44
53
|
'ic-devtron': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
54
|
+
'ic-disconnect': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
55
|
+
'ic-discord-fill': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
45
56
|
'ic-dockerhub': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
46
57
|
'ic-ecr': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
58
|
+
'ic-edit': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
59
|
+
'ic-enterprise-feat': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
60
|
+
'ic-enterprise-tag': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
47
61
|
'ic-env': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
48
62
|
'ic-error': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
63
|
+
'ic-expand-right-sm': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
64
|
+
'ic-expand-sm': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
49
65
|
'ic-failure': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
66
|
+
'ic-file-edit': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
50
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>>;
|
51
70
|
'ic-folder-user': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
52
71
|
'ic-gear': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
72
|
+
'ic-gift-gradient': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
73
|
+
'ic-gift': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
53
74
|
'ic-git': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
54
75
|
'ic-github': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
55
76
|
'ic-gitlab': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
56
77
|
'ic-google-artifact-registry': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
57
78
|
'ic-google-container-registry': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
79
|
+
'ic-google-gke': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
58
80
|
'ic-google': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
59
81
|
'ic-grid-view': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
60
82
|
'ic-hand-pointing': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
@@ -68,20 +90,27 @@ export declare const iconMap: {
|
|
68
90
|
'ic-in-progress': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
69
91
|
'ic-info-filled': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
70
92
|
'ic-info-outline': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
93
|
+
'ic-install': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
71
94
|
'ic-job-color': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
95
|
+
'ic-k3s': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
72
96
|
'ic-k8s-job': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
73
97
|
'ic-key': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
98
|
+
'ic-kind': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
99
|
+
'ic-laptop': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
74
100
|
'ic-ldap': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
75
101
|
'ic-lightning-fill': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
76
102
|
'ic-lightning': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
77
103
|
'ic-livspace': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
78
|
-
'ic-login-devtron-logo': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
79
104
|
'ic-logout': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
80
105
|
'ic-medium-delete': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
81
106
|
'ic-medium-paintbucket': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
107
|
+
'ic-megaphone-left': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
108
|
+
'ic-megaphone-right': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
82
109
|
'ic-memory': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
83
110
|
'ic-microsoft': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
111
|
+
'ic-minikube': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
84
112
|
'ic-missing': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
113
|
+
'ic-mobile': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
85
114
|
'ic-monitoring': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
86
115
|
'ic-new': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
87
116
|
'ic-node-script': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
@@ -91,6 +120,7 @@ export declare const iconMap: {
|
|
91
120
|
'ic-openshift': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
92
121
|
'ic-out-of-sync': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
93
122
|
'ic-paper-plane-color': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
123
|
+
'ic-path': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
94
124
|
'ic-pencil': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
95
125
|
'ic-quay': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
96
126
|
'ic-quote': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
@@ -101,6 +131,7 @@ export declare const iconMap: {
|
|
101
131
|
'ic-sort-ascending': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
102
132
|
'ic-sort-descending': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
103
133
|
'ic-sortable': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
134
|
+
'ic-sparkle-color': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
104
135
|
'ic-spinny': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
105
136
|
'ic-stack': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
106
137
|
'ic-stamp': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
@@ -108,15 +139,20 @@ export declare const iconMap: {
|
|
108
139
|
'ic-suspended': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
109
140
|
'ic-tata1mg': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
110
141
|
'ic-terminal-fill': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
142
|
+
'ic-terminal': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
143
|
+
'ic-thermometer': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
111
144
|
'ic-thumb-down': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
112
145
|
'ic-thumb-up': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
113
146
|
'ic-timeout-dash': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
114
147
|
'ic-timer': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
115
148
|
'ic-travclan': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
149
|
+
'ic-ubuntu': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
116
150
|
'ic-unknown': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
151
|
+
'ic-user-circle': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
117
152
|
'ic-user-key': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
118
153
|
'ic-users': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
119
154
|
'ic-warning': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
155
|
+
'ic-wifi-slash': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
|
120
156
|
};
|
121
157
|
export type IconName = keyof typeof iconMap;
|
122
158
|
export interface IconsProps extends Omit<IconBaseProps, 'name' | 'iconMap'> {
|
@@ -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
|
-
size?: IconBaseSizeType;
|
15
|
-
/**
|
19
|
+
size?: IconBaseSizeType | null;
|
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 {};
|
@@ -1,7 +1,7 @@
|
|
1
|
+
import { InfoBlockVariant } from '../../constants';
|
1
2
|
import { ButtonProps } from '../Button';
|
2
3
|
import { InfoBlockProps } from './types';
|
3
|
-
export declare const
|
4
|
-
export declare const VARIANT_TO_ICON_MAP: Record<InfoBlockProps['variant'], InfoBlockProps['customIcon']>;
|
4
|
+
export declare const VARIANT_TO_ICON_MAP: Record<InfoBlockVariant, InfoBlockProps['customIcon']>;
|
5
5
|
export declare const CONTAINER_SIZE_TO_CLASS_MAP: Record<InfoBlockProps['size'], string>;
|
6
6
|
export declare const SIZE_TO_ICON_CLASS_MAP: Record<InfoBlockProps['size'], string>;
|
7
7
|
export declare const CONTAINER_SIZE_TO_BUTTON_SIZE: Record<InfoBlockProps['size'], ButtonProps['size']>;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { ReactElement, ReactNode } from 'react';
|
2
|
-
import { ComponentSizeType } from '../../constants';
|
2
|
+
import { ComponentSizeType, InfoBlockVariantType } from '../../constants';
|
3
3
|
import { BorderConfigType, ComponentLayoutType } from '../../types';
|
4
4
|
import { ButtonComponentType, ButtonProps } from '../Button';
|
5
5
|
export type InfoBlockProps = {
|
@@ -10,7 +10,7 @@ export type InfoBlockProps = {
|
|
10
10
|
/**
|
11
11
|
* @default 'information'
|
12
12
|
*/
|
13
|
-
variant?:
|
13
|
+
variant?: InfoBlockVariantType;
|
14
14
|
/**
|
15
15
|
* @default ComponentSizeType.large
|
16
16
|
*/
|
@@ -1,3 +1,3 @@
|
|
1
1
|
import { InfoIconTippyProps } from '../../../Common/Types';
|
2
|
-
declare const InfoIconTippy: ({ heading, infoText, iconClass, documentationLink, documentationLinkText, additionalContent, iconClassName, placement, dataTestid, children, headingInfo, }: InfoIconTippyProps) => JSX.Element;
|
2
|
+
declare const InfoIconTippy: ({ heading, infoText, iconClass, documentationLink, documentationLinkText, additionalContent, iconClassName, placement, dataTestid, children, headingInfo, buttonPadding, }: InfoIconTippyProps) => JSX.Element;
|
3
3
|
export default InfoIconTippy;
|
@@ -2,4 +2,4 @@ export { default as ActivateLicenseDialog } from './ActivateLicenseDialog';
|
|
2
2
|
export { default as DevtronLicenseCard } from './DevtronLicenseCard';
|
3
3
|
export { ICDevtronWithBorder, default as InstallationFingerprintInfo } from './License.components';
|
4
4
|
export * from './types';
|
5
|
-
export { parseDevtronLicenseData } from './utils';
|
5
|
+
export { parseDevtronLicenseData, parseDevtronLicenseDTOIntoLicenseCardData } from './utils';
|
@@ -1,8 +1,9 @@
|
|
1
1
|
import { DevtronLicenseDTO } from '../../types';
|
2
|
-
import { DevtronLicenseInfo, LicenseStatus } from './types';
|
2
|
+
import { DevtronLicenseCardProps, DevtronLicenseInfo, LicenseStatus } from './types';
|
3
3
|
export declare const getLicenseColorsAccordingToStatus: (licenseStatus: LicenseStatus) => {
|
4
4
|
bgColor: string;
|
5
5
|
textColor: string;
|
6
6
|
};
|
7
|
+
export declare const parseDevtronLicenseDTOIntoLicenseCardData: <isCentralDashboard extends boolean = false>(licenseDTO: DevtronLicenseDTO<isCentralDashboard>, currentUserEmail?: isCentralDashboard extends true ? string : never) => Omit<DevtronLicenseCardProps, "appTheme">;
|
7
8
|
export declare const parseDevtronLicenseData: (result: DevtronLicenseDTO) => DevtronLicenseInfo;
|
8
9
|
export declare const getGateKeeperUrl: (fingerprint: string) => string;
|
@@ -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;
|
@@ -0,0 +1,105 @@
|
|
1
|
+
import { DetailedHTMLProps, KeyboardEvent, MutableRefObject, ReactElement } from 'react';
|
2
|
+
import { HTMLMotionProps } from 'framer-motion';
|
3
|
+
import { ButtonProps } from '../Button';
|
4
|
+
export interface UsePopoverProps {
|
5
|
+
/**
|
6
|
+
* A unique identifier for the popover.
|
7
|
+
*/
|
8
|
+
id: string;
|
9
|
+
/**
|
10
|
+
* The width of the popover.
|
11
|
+
* Can be a number representing the width in pixels or the string `'auto'` for automatic sizing (up to 250px).
|
12
|
+
* @default 'auto'
|
13
|
+
*/
|
14
|
+
width?: number | 'auto';
|
15
|
+
/**
|
16
|
+
* The position of the popover relative to its trigger element.
|
17
|
+
* Possible values are:
|
18
|
+
* - `'bottom'`: Positions the popover below the trigger.
|
19
|
+
* - `'top'`: Positions the popover above the trigger.
|
20
|
+
* - `'left'`: Positions the popover to the left of the trigger.
|
21
|
+
* - `'right'`: Positions the popover to the right of the trigger.
|
22
|
+
* @default 'bottom'
|
23
|
+
*/
|
24
|
+
position?: 'bottom' | 'top' | 'left' | 'right';
|
25
|
+
/**
|
26
|
+
* The alignment of the popover relative to its trigger element.
|
27
|
+
* Possible values are:
|
28
|
+
* - `'start'`: Aligns the popover to the start of the trigger.
|
29
|
+
* - `'middle'`: Aligns the popover to the center of the trigger.
|
30
|
+
* - `'end'`: Aligns the popover to the end of the trigger.
|
31
|
+
* @default 'start'
|
32
|
+
*/
|
33
|
+
alignment?: 'start' | 'middle' | 'end';
|
34
|
+
/**
|
35
|
+
* Callback function triggered when the popover is opened or closed.
|
36
|
+
* @param open - A boolean indicating whether the popover is open.
|
37
|
+
*/
|
38
|
+
onOpen?: (open: boolean) => void;
|
39
|
+
/**
|
40
|
+
* Callback function triggered when a key is pressed while the trigger element is focused.
|
41
|
+
* @param e - The keyboard event.
|
42
|
+
* @param openState - A boolean indicating whether the popover is currently open.
|
43
|
+
* @param closePopover - A function to close the popover.
|
44
|
+
*/
|
45
|
+
onTriggerKeyDown?: (e: KeyboardEvent, openState: boolean, closePopover: () => void) => void;
|
46
|
+
/**
|
47
|
+
* Callback function triggered when a key is pressed while the popover is focused.
|
48
|
+
* @param e - The keyboard event.
|
49
|
+
* @param openState - A boolean indicating whether the popover is currently open.
|
50
|
+
* @param closePopover - A function to close the popover.
|
51
|
+
*/
|
52
|
+
onPopoverKeyDown?: (e: KeyboardEvent, openState: boolean, closePopover: () => void) => void;
|
53
|
+
}
|
54
|
+
/**
|
55
|
+
* Represents the return type of the `usePopover` hook, providing properties and methods
|
56
|
+
* to manage and interact with a popover component.
|
57
|
+
*/
|
58
|
+
export interface UsePopoverReturnType {
|
59
|
+
/**
|
60
|
+
* Indicates whether the popover is currently open.
|
61
|
+
*/
|
62
|
+
open: boolean;
|
63
|
+
/**
|
64
|
+
* Props to be spread onto the trigger element that opens the popover.
|
65
|
+
* These props include standard HTML attributes for a `div` element.
|
66
|
+
*/
|
67
|
+
triggerProps: DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
|
68
|
+
/**
|
69
|
+
* Props to be spread onto the overlay element of the popover.
|
70
|
+
* These props include standard HTML attributes for a `div` element.
|
71
|
+
*/
|
72
|
+
overlayProps: DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
|
73
|
+
/**
|
74
|
+
* Props to be spread onto the popover element itself.
|
75
|
+
* Includes motion-related props for animations and a `ref` to the popover's `div` element.
|
76
|
+
*/
|
77
|
+
popoverProps: HTMLMotionProps<'div'> & {
|
78
|
+
ref: MutableRefObject<HTMLDivElement>;
|
79
|
+
};
|
80
|
+
/**
|
81
|
+
* A mutable reference to the scrollable element inside the popover. \
|
82
|
+
* This reference should be assigned to the element that is scrollable.
|
83
|
+
*/
|
84
|
+
scrollableRef: MutableRefObject<HTMLElement>;
|
85
|
+
/**
|
86
|
+
* A function to close the popover.
|
87
|
+
*/
|
88
|
+
closePopover: () => void;
|
89
|
+
}
|
90
|
+
export type PopoverProps = Pick<UsePopoverReturnType, 'open' | 'overlayProps' | 'popoverProps' | 'triggerProps'> & {
|
91
|
+
/**
|
92
|
+
* Popover contents.
|
93
|
+
* This can be any React element or JSX to render inside the popover.
|
94
|
+
*/
|
95
|
+
children: ReactElement;
|
96
|
+
/**
|
97
|
+
* Properties for the button to which the Popover is attached.
|
98
|
+
*/
|
99
|
+
buttonProps: ButtonProps | null;
|
100
|
+
/**
|
101
|
+
* The React element to which the Popover is attached.
|
102
|
+
* @note only use when `triggerElement` is not `Button` component otherwise use `buttonProps`.
|
103
|
+
*/
|
104
|
+
triggerElement: ReactElement | null;
|
105
|
+
};
|