@devtron-labs/devtron-fe-common-lib 1.13.0-pre-4 → 1.13.0-pre-6

package/dist/Shared/Components/CICDHistory/types.d.ts

@@ -1,8 +1,8 @@
-import { CSSProperties, ReactElement, ReactNode } from 'react';
+import { CSSProperties, MutableRefObject, ReactElement, ReactNode } from 'react';
 import { SupportedKeyboardKeysType } from '@Common/Hooks/UseRegisterShortcut/types';
 import { DeploymentAppTypes, FilterConditionsListType, ImageComment, OptionType, PaginationProps, PromotionApprovalMetadataType, ReleaseTag, ResponseType, UserApprovalMetadataType, useScrollable } from '../../../Common';
 import { DeploymentStageType } from '../../constants';
-import { AggregationKeys, GitTriggers, Node, NodeType, ResourceKindType, ResourceVersionType, TargetPlatformsDTO } from '../../types';
+import { AggregationKeys, AppDetails, DeploymentStatusDetailsBreakdownDataType, DeploymentStatusDetailsType, DeploymentStatusTimelineType, GitTriggers, Node, NodeType, ResourceKindType, ResourceVersionType, TargetPlatformsDTO } from '../../types';
 import { TargetPlatformBadgeListProps } from '../TargetPlatforms';
 export declare enum HistoryComponentType {
     CI = "CI",
@@ -296,66 +296,7 @@ export type FinishedType = {
     status?: never;
     finishedOn?: never;
 });
-export interface SyncStageResourceDetail {
-    id: number;
-    cdWorkflowRunnerId: number;
-    resourceGroup: string;
-    resourceKind: string;
-    resourceName: string;
-    resourcePhase: string;
-    resourceStatus: string;
-    statusMessage: string;
-}
-export interface DeploymentStatusDetailsTimelineType {
-    id: number;
-    cdWorkflowRunnerId: number;
-    status: string;
-    statusDetail: string;
-    statusTime: string;
-    resourceDetails?: SyncStageResourceDetail[];
-}
-export interface DeploymentStatusDetailsType extends Pick<History, 'isDeploymentWithoutApproval'> {
-    deploymentFinishedOn: string;
-    deploymentStartedOn: string;
-    triggeredBy: string;
-    statusFetchCount: number;
-    statusLastFetchedAt: string;
-    timelines: DeploymentStatusDetailsTimelineType[];
-    wfrStatus?: string;
-}
-export interface DeploymentStatusDetailsResponse extends ResponseType {
-    result?: DeploymentStatusDetailsType;
-}
-interface DeploymentStatusDetailRow {
-    icon: string;
-    displayText: ReactNode;
-    displaySubText: string;
-    time: string;
-    resourceDetails?: any;
-    isCollapsed?: boolean;
-    kubeList?: {
-        icon: any;
-        message: string;
-    }[];
-    timelineStatus?: string;
-}
-export interface DeploymentStatusDetailsBreakdownDataType {
-    deploymentStatus: string;
-    deploymentStatusText: string;
-    deploymentTriggerTime: string;
-    deploymentEndTime: string;
-    deploymentError: string;
-    triggeredBy: string;
-    nonDeploymentError: string;
-    deploymentStatusBreakdown: {
-        DEPLOYMENT_INITIATED: DeploymentStatusDetailRow;
-        GIT_COMMIT?: DeploymentStatusDetailRow;
-        ARGOCD_SYNC?: DeploymentStatusDetailRow;
-        KUBECTL_APPLY?: DeploymentStatusDetailRow;
-        APP_HEALTH?: DeploymentStatusDetailRow;
-        HELM_PACKAGE_GENERATED?: DeploymentStatusDetailRow;
-    };
-}
+export type DeploymentStatusDetailsResponse = ResponseType<DeploymentStatusDetailsType>;
 export interface DeploymentDetailStepsType extends Pick<History, 'isDeploymentWithoutApproval'> {
     deploymentStatus?: string;
     deploymentAppType?: DeploymentAppTypes;
@@ -456,19 +397,17 @@ export interface LogsRendererType extends Pick<HistoryLogsProps, 'fullScreenView
 export interface DeploymentStatusDetailBreakdownType {
     deploymentStatusDetailsBreakdownData: DeploymentStatusDetailsBreakdownDataType;
     isVirtualEnvironment?: boolean;
+    /**
+     * Won't be available if coming directly to deployment history from url
+     */
+    appDetails: AppDetails | null;
+    rootClassName?: string;
 }
-export interface DeploymentStatusDetailRowType {
-    type: string;
+export interface DeploymentStatusDetailRowType extends Pick<DeploymentStatusDetailBreakdownType, 'appDetails'> {
+    type: DeploymentStatusTimelineType;
     hideVerticalConnector?: boolean;
     deploymentDetailedData: DeploymentStatusDetailsBreakdownDataType;
 }
-export interface ErrorInfoStatusBarType {
-    nonDeploymentError: string;
-    type: string;
-    errorMessage: string;
-    hideVerticalConnector?: boolean;
-    hideErrorIcon?: boolean;
-}
 export interface DeploymentConfigurationsRes extends ResponseType {
     result?: DeploymentTemplateList[];
 }
@@ -746,6 +685,7 @@ export interface LogStageAccordionProps extends StageDetailType, Pick<LogsRender
      */
     isLoading: boolean;
     searchIndex: string;
+    logsRendererRef: MutableRefObject<HTMLDivElement>;
 }
 export interface CreateMarkupReturnType {
     __html: string;

package/dist/Shared/Components/CICDHistory/utils.d.ts

@@ -1,12 +1,11 @@
 import { ReactElement } from 'react';
 import { DeploymentAppTypes } from '../../../Common/Types';
-import { Node } from '../../types';
+import { DeploymentStatusBreakdownItemType, Node } from '../../types';
 import { TabGroupProps } from '../TabGroup';
 import { DeploymentHistoryResultObject, ExecutionInfoType, History, NodeFilters, NodeStatus, StageStatusType, TriggerHistoryFilterCriteriaProps, TriggerHistoryFilterCriteriaType, WorkflowExecutionStagesMapDTO, WorkflowStageStatusType } from './types';
 export declare const getTriggerHistoryFilterCriteria: ({ appId, envId, releaseId, showCurrentReleaseDeployments, }: TriggerHistoryFilterCriteriaProps) => TriggerHistoryFilterCriteriaType;
 export declare const getParsedTriggerHistory: (result: any) => DeploymentHistoryResultObject;
 export declare const buildHoverHtmlForWebhook: (eventName: any, condition: any, selectors: any) => JSX.Element;
-export declare const renderIcon: (iconState: string) => JSX.Element;
 export declare const getStageStatusIcon: (status: StageStatusType) => JSX.Element;
 export declare const getLogSearchIndex: ({ stageIndex, lineNumberInsideStage, }: Record<"stageIndex" | "lineNumberInsideStage", number>) => string;
 export declare const sanitizeWorkflowExecutionStages: (workflowExecutionStages: WorkflowExecutionStagesMapDTO["workflowExecutionStages"]) => ExecutionInfoType | null;
@@ -38,4 +37,6 @@ export declare const getStatusFilters: ({ allNodeCount, missingNodeCount, failed
 };
 export declare const getAppStatusIcon: (status: NodeStatus | NodeFilters, hideMessage?: boolean) => JSX.Element;
 export declare const getTriggerStatusIcon: (status: string) => string;
+export declare const renderDeploymentTimelineIcon: (iconState: DeploymentStatusBreakdownItemType["icon"]) => JSX.Element;
+export declare const getDeploymentTimelineBGColorFromIcon: (icon: DeploymentStatusBreakdownItemType["icon"]) => string;
 export declare const getTriggerOutputTabs: (triggerDetails: History, deploymentAppType: DeploymentAppTypes) => TabGroupProps["tabs"];

package/dist/Shared/Components/DeploymentStatusBreakdown/constants.d.ts

@@ -0,0 +1,10 @@
+import { DEPLOYMENT_STATUS } from '../../constants';
+import { DeploymentPhaseType, DeploymentStatusTimelineType } from '../../types';
+import { WorkflowRunnerStatusDTO } from './types';
+export declare const DEPLOYMENT_STATUS_TEXT_MAP: Readonly<Record<(typeof DEPLOYMENT_STATUS)[keyof typeof DEPLOYMENT_STATUS], string>>;
+export declare const WFR_STATUS_DTO_TO_DEPLOYMENT_STATUS_MAP: Readonly<Record<WorkflowRunnerStatusDTO, (typeof DEPLOYMENT_STATUS)[keyof typeof DEPLOYMENT_STATUS]>>;
+export declare const PROGRESSING_DEPLOYMENT_STATUS: Readonly<(typeof DEPLOYMENT_STATUS)[keyof typeof DEPLOYMENT_STATUS][]>;
+export declare const SUCCESSFUL_DEPLOYMENT_STATUS: typeof PROGRESSING_DEPLOYMENT_STATUS;
+export declare const FAILED_DEPLOYMENT_STATUS: typeof PROGRESSING_DEPLOYMENT_STATUS;
+export declare const PHYSICAL_ENV_DEPLOYMENT_TIMELINE_ORDER: Readonly<DeploymentStatusTimelineType[]>;
+export declare const DEPLOYMENT_PHASES: Readonly<DeploymentPhaseType[]>;

package/dist/Shared/Components/DeploymentStatusBreakdown/index.d.ts

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './types';
+export * from './utils';

package/dist/Shared/Components/DeploymentStatusBreakdown/types.d.ts

@@ -0,0 +1,22 @@
+import { DEPLOYMENT_STATUS } from '../../constants';
+import { DeploymentStatusBreakdownItemType, DeploymentStatusDetailsType, DeploymentStatusTimelineType } from '../../types';
+export declare enum WorkflowRunnerStatusDTO {
+    PROGRESSING = "Progressing",
+    ABORTED = "Aborted",
+    FAILED = "Failed",
+    SUCCEEDED = "Succeeded",
+    TIMED_OUT = "TimedOut",
+    UNABLE_TO_FETCH = "UnableToFetch",
+    STARTING = "Starting",
+    QUEUED = "Queued",
+    INITIATING = "Initiating",
+    HEALTHY = "Healthy",
+    DEGRADED = "Degraded"
+}
+export interface ProcessUnableToFetchOrTimedOutStatusType {
+    timelineData: DeploymentStatusBreakdownItemType;
+    timelineStatusType: DeploymentStatusTimelineType;
+    deploymentStatus: typeof DEPLOYMENT_STATUS.UNABLE_TO_FETCH | typeof DEPLOYMENT_STATUS.TIMED_OUT;
+    statusLastFetchedAt: DeploymentStatusDetailsType['statusLastFetchedAt'] | null;
+    statusFetchCount: DeploymentStatusDetailsType['statusFetchCount'] | null;
+}

package/dist/Shared/Components/DeploymentStatusBreakdown/utils.d.ts

@@ -0,0 +1,20 @@
+import { DeploymentStatusDetailsBreakdownDataType, DeploymentStatusDetailsType } from '../../types';
+/**
+ * @description
+ * This function processes the deployment status details data and returns a breakdown of the deployment status.
+ * Cases it handles:
+ * 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.
+ * 2. In case of gitops:
+ *  - There are five timelines in chronological order:
+ *    - Deployment Initiated
+ *    - Git commit
+ *    - ArgoCD Sync
+ *    - Kubectl Apply
+ *    - App Health
+ *  - 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.
+ *  - 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.
+ *  - If element is not found, we will parse on basis of factors like:
+ *   - If this timeline is not inprogress and deploymentStatus is progressing, we will set the current timeline to waiting.
+ *   - In similar fashion based on the deploymentStatus we will set the icon and display text for the timeline.
+ */
+export declare const processDeploymentStatusDetailsData: (data?: DeploymentStatusDetailsType) => DeploymentStatusDetailsBreakdownDataType;

package/dist/Shared/Components/Header/HeaderWithCreateButton/HeaderWithCreateButon.d.ts

@@ -1,5 +1,3 @@
-export interface HeaderWithCreateButtonProps {
-    headerName: string;
-}
+import { HeaderWithCreateButtonProps } from './types';
 export declare const HeaderWithCreateButton: ({ headerName }: HeaderWithCreateButtonProps) => JSX.Element;
 export default HeaderWithCreateButton;

package/dist/Shared/Components/Header/HeaderWithCreateButton/types.d.ts

@@ -0,0 +1,10 @@
+import { ActionMenuProps } from '@Shared/Components/ActionMenu';
+export interface HeaderWithCreateButtonProps {
+    headerName: string;
+}
+export declare enum CreateActionMenuItems {
+    CUSTOM_APP = "create-custom-app",
+    CHART_STORE = "create-from-chart-store",
+    JOB = "create-job"
+}
+export type CreateActionMenuProps = ActionMenuProps<CreateActionMenuItems>;

package/dist/Shared/Components/Header/HeaderWithCreateButton/utils.d.ts

@@ -0,0 +1,2 @@
+import { CreateActionMenuProps } from './types';
+export declare const getCreateActionMenuOptions: (createCustomAppURL: string) => CreateActionMenuProps["options"];

package/dist/Shared/Components/Header/HelpButton.d.ts

@@ -0,0 +1,2 @@
+import { HelpButtonProps } from './types';
+export declare const HelpButton: ({ serverInfo, fetchingServerInfo, onClick }: HelpButtonProps) => JSX.Element;

package/dist/Shared/Components/Header/constants.d.ts

@@ -1,4 +1,5 @@
-import { HelpOptionType } from './types';
-export declare const EnterpriseHelpOptions: HelpOptionType[];
-export declare const OSSHelpOptions: HelpOptionType[];
-export declare const TrialHelpOptions: HelpOptionType[];
+import { HelpButtonActionMenuProps } from './types';
+export declare const COMMON_HELP_ACTION_MENU_ITEMS: HelpButtonActionMenuProps['options'][number]['items'];
+export declare const OSS_HELP_ACTION_MENU_ITEMS: HelpButtonActionMenuProps['options'][number]['items'];
+export declare const ENTERPRISE_TRIAL_HELP_ACTION_MENU_ITEMS: HelpButtonActionMenuProps['options'][number]['items'];
+export declare const ENTERPRISE_HELP_ACTION_MENU_ITEMS: HelpButtonActionMenuProps['options'][number]['items'];

package/dist/Shared/Components/Header/types.d.ts

@@ -1,5 +1,6 @@
 import { ModuleStatus } from '../../types';
 import { ResponseType, TippyCustomizedProps } from '../../../Common';
+import { ActionMenuProps } from '../ActionMenu';
 export declare enum InstallationType {
     OSS_KUBECTL = "oss_kubectl",
     OSS_HELM = "oss_helm",
@@ -33,16 +34,21 @@ export interface ServerInfo {
 export interface ServerInfoResponse extends ResponseType {
     result?: ServerInfo;
 }
-export interface HelpNavType {
-    className: string;
-    setShowHelpCard: React.Dispatch<React.SetStateAction<boolean>>;
+export interface HelpButtonProps {
     serverInfo: ServerInfo;
     fetchingServerInfo: boolean;
-    setGettingStartedClicked: (isClicked: boolean) => void;
-    showHelpCard: boolean;
+    onClick: () => void;
 }
-export interface HelpOptionType {
-    name: string;
-    link: string;
-    icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+export declare enum HelpMenuItems {
+    GETTING_STARTED = "getting-started",
+    VIEW_DOCUMENTATION = "view-documentation",
+    JOIN_DISCORD_COMMUNITY = "join-discord-community",
+    ABOUT_DEVTRON = "about-devtron",
+    REQUEST_SUPPORT = "request-support",
+    OPEN_NEW_TICKET = "open-new-ticket",
+    VIEW_ALL_TICKETS = "view-all-tickets",
+    GIVE_FEEDBACK = "give-feedback",
+    CHAT_WITH_SUPPORT = "chat-with-support",
+    RAISE_ISSUE_REQUEST = "raise-issue-request"
 }
+export type HelpButtonActionMenuProps = ActionMenuProps<HelpMenuItems>;

package/dist/Shared/Components/Header/utils.d.ts

@@ -1,6 +1,10 @@
 import { DevtronLicenseInfo } from '../License';
+import { HelpButtonActionMenuProps } from './types';
 export declare const getDateInMilliseconds: (days: any) => number;
 export declare const handlePostHogEventUpdate: (eventName: string) => Promise<void>;
 export declare const setActionWithExpiry: (key: string, days: number) => void;
 export declare const getIsShowingLicenseData: (licenseData: DevtronLicenseInfo) => boolean;
-export declare const getHelpOptions: (isEnterprise: boolean, isTrial: boolean) => import('./types').HelpOptionType[];
+export declare const getHelpActionMenuOptions: ({ isEnterprise, isTrial, }: {
+    isEnterprise: boolean;
+    isTrial: boolean;
+}) => HelpButtonActionMenuProps["options"];

package/dist/Shared/Components/Icon/Icon.d.ts

@@ -27,6 +27,7 @@ export declare const iconMap: {
     'ic-caret-right': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-cd': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-chat-circle-dots': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
+    'ic-chat-circle-online': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-check': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-checks': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-ci-linked': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
@@ -51,8 +52,10 @@ export declare const iconMap: {
     'ic-devtron-header-logo': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-devtron': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-disconnect': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
+    'ic-discord-fill': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-dockerhub': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-ecr': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
+    'ic-edit': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-enterprise-feat': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-enterprise-tag': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-env': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
@@ -60,7 +63,10 @@ export declare const iconMap: {
     'ic-expand-right-sm': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-expand-sm': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-failure': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
+    'ic-file-edit': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-file-key': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
+    'ic-file': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
+    'ic-files': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-folder-user': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-gear': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-gift-gradient': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
@@ -99,6 +105,7 @@ export declare const iconMap: {
     'ic-medium-delete': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-medium-paintbucket': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-megaphone-left': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
+    'ic-megaphone-right': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-memory': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-microsoft': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-minikube': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
@@ -113,6 +120,7 @@ export declare const iconMap: {
     'ic-openshift': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-out-of-sync': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-paper-plane-color': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
+    'ic-path': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-pencil': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-quay': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-quote': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;

package/dist/Shared/Components/Icon/IconBase.d.ts

@@ -1,2 +1,2 @@
 import { IconBaseProps } from './types';
-export declare const IconBase: ({ name, iconMap, size, tooltipProps, color }: IconBaseProps) => JSX.Element;
+export declare const IconBase: ({ name, iconMap, size, tooltipProps, color, dataTestId, rotateBy, fillSpace, }: IconBaseProps) => JSX.Element;

package/dist/Shared/Components/Icon/types.d.ts

@@ -3,22 +3,44 @@ import { TooltipProps } from '@Common/Tooltip/types';
 import { IconBaseColorType, IconBaseSizeType } from '../../index';
 type IconMap = Record<string, FC<SVGProps<SVGSVGElement>>>;
 export interface IconBaseProps {
-    /** The name of the icon to render. */
+    /**
+     * The name of the icon to render.
+     */
     name: keyof IconMap;
-    /** The map containing all available icons. */
+    /**
+     * A map containing all available icons.
+     */
     iconMap: IconMap;
     /**
-     * The size of the icon in pixels.
+     * The size of the icon in pixels. If not provided, the default size is `16px`.
+     *
      * @default 16
      */
     size?: IconBaseSizeType | null;
-    /** Props to configure the tooltip when hovering over the icon. */
+    /**
+     * Configuration for the tooltip displayed when hovering over the icon.
+     */
     tooltipProps?: TooltipProps;
     /**
-     * The color of the icon (color tokens). \
-     * If `null`, the default color present in icon is used.
-     * @example `'B500'`, `'N200'`, `'G50'`, `'R700'`
+     * The color of the icon, specified using predefined color tokens.
+     * If set to `null`, the icon's default color will be used.
+     *
+     * @example 'B500', 'N200', 'G50', 'R700'
      */
     color: IconBaseColorType;
+    /**
+     * A unique identifier for testing purposes, typically used in test automation.
+     */
+    dataTestId?: string;
+    /**
+     * Rotates the icon by the specified number of degrees.
+     *
+     * @example 90, 180, 270
+     */
+    rotateBy?: number;
+    /**
+     * If true, the icon will expand to fill the available space of its container.
+     */
+    fillSpace?: boolean;
 }
 export {};

package/dist/Shared/Components/Popover/Popover.component.d.ts

@@ -0,0 +1,8 @@
+import { PopoverProps } from './types';
+/**
+ * Popover Component \
+ * This component serves as a base for creating popovers. It is not intended to be used directly.
+ * @note Use this component in conjunction with the `usePopover` hook to create a custom popover component. \
+ * For example, see the `ActionMenu` component for reference.
+ */
+export declare const Popover: ({ open, popoverProps, overlayProps, triggerProps, buttonProps, triggerElement, children, }: PopoverProps) => JSX.Element;

package/dist/Shared/Components/Popover/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Popover.component';
+export * from './types';
+export * from './usePopover.hook';

package/dist/Shared/Components/Popover/types.d.ts

@@ -0,0 +1,105 @@
+import { DetailedHTMLProps, KeyboardEvent, MutableRefObject, ReactElement } from 'react';
+import { HTMLMotionProps } from 'framer-motion';
+import { ButtonProps } from '../Button';
+export interface UsePopoverProps {
+    /**
+     * A unique identifier for the popover.
+     */
+    id: string;
+    /**
+     * The width of the popover.
+     * Can be a number representing the width in pixels or the string `'auto'` for automatic sizing (up to 250px).
+     * @default 'auto'
+     */
+    width?: number | 'auto';
+    /**
+     * The position of the popover relative to its trigger element.
+     * Possible values are:
+     * - `'bottom'`: Positions the popover below the trigger.
+     * - `'top'`: Positions the popover above the trigger.
+     * - `'left'`: Positions the popover to the left of the trigger.
+     * - `'right'`: Positions the popover to the right of the trigger.
+     * @default 'bottom'
+     */
+    position?: 'bottom' | 'top' | 'left' | 'right';
+    /**
+     * The alignment of the popover relative to its trigger element.
+     * Possible values are:
+     * - `'start'`: Aligns the popover to the start of the trigger.
+     * - `'middle'`: Aligns the popover to the center of the trigger.
+     * - `'end'`: Aligns the popover to the end of the trigger.
+     * @default 'start'
+     */
+    alignment?: 'start' | 'middle' | 'end';
+    /**
+     * Callback function triggered when the popover is opened or closed.
+     * @param open - A boolean indicating whether the popover is open.
+     */
+    onOpen?: (open: boolean) => void;
+    /**
+     * Callback function triggered when a key is pressed while the trigger element is focused.
+     * @param e - The keyboard event.
+     * @param openState - A boolean indicating whether the popover is currently open.
+     * @param closePopover - A function to close the popover.
+     */
+    onTriggerKeyDown?: (e: KeyboardEvent, openState: boolean, closePopover: () => void) => void;
+    /**
+     * Callback function triggered when a key is pressed while the popover is focused.
+     * @param e - The keyboard event.
+     * @param openState - A boolean indicating whether the popover is currently open.
+     * @param closePopover - A function to close the popover.
+     */
+    onPopoverKeyDown?: (e: KeyboardEvent, openState: boolean, closePopover: () => void) => void;
+}
+/**
+ * Represents the return type of the `usePopover` hook, providing properties and methods
+ * to manage and interact with a popover component.
+ */
+export interface UsePopoverReturnType {
+    /**
+     * Indicates whether the popover is currently open.
+     */
+    open: boolean;
+    /**
+     * Props to be spread onto the trigger element that opens the popover.
+     * These props include standard HTML attributes for a `div` element.
+     */
+    triggerProps: DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    /**
+     * Props to be spread onto the overlay element of the popover.
+     * These props include standard HTML attributes for a `div` element.
+     */
+    overlayProps: DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    /**
+     * Props to be spread onto the popover element itself.
+     * Includes motion-related props for animations and a `ref` to the popover's `div` element.
+     */
+    popoverProps: HTMLMotionProps<'div'> & {
+        ref: MutableRefObject<HTMLDivElement>;
+    };
+    /**
+     * A mutable reference to the scrollable element inside the popover. \
+     * This reference should be assigned to the element that is scrollable.
+     */
+    scrollableRef: MutableRefObject<HTMLElement>;
+    /**
+     * A function to close the popover.
+     */
+    closePopover: () => void;
+}
+export type PopoverProps = Pick<UsePopoverReturnType, 'open' | 'overlayProps' | 'popoverProps' | 'triggerProps'> & {
+    /**
+     * Popover contents.
+     * This can be any React element or JSX to render inside the popover.
+     */
+    children: ReactElement;
+    /**
+     * Properties for the button to which the Popover is attached.
+     */
+    buttonProps: ButtonProps | null;
+    /**
+     * The React element to which the Popover is attached.
+     * @note only use when `triggerElement` is not `Button` component otherwise use `buttonProps`.
+     */
+    triggerElement: ReactElement | null;
+};

package/dist/Shared/Components/Popover/usePopover.hook.d.ts

@@ -0,0 +1,2 @@
+import { UsePopoverProps, UsePopoverReturnType } from './types';
+export declare const usePopover: ({ id, position, alignment, width, onOpen, onPopoverKeyDown, onTriggerKeyDown, }: UsePopoverProps) => UsePopoverReturnType;

package/dist/Shared/Components/Popover/utils.d.ts

@@ -0,0 +1,92 @@
+import { HTMLMotionProps } from 'framer-motion';
+import { UsePopoverProps } from './types';
+export declare const getPopoverAlignmentStyle: ({ position, alignment }: Pick<UsePopoverProps, "position" | "alignment">) => {
+    right: number;
+    left?: undefined;
+    bottom?: undefined;
+    top?: undefined;
+} | {
+    left: string;
+    right?: undefined;
+    bottom?: undefined;
+    top?: undefined;
+} | {
+    left: number;
+    right?: undefined;
+    bottom?: undefined;
+    top?: undefined;
+} | {
+    bottom: number;
+    right?: undefined;
+    left?: undefined;
+    top?: undefined;
+} | {
+    top: string;
+    right?: undefined;
+    left?: undefined;
+    bottom?: undefined;
+} | {
+    top: number;
+    right?: undefined;
+    left?: undefined;
+    bottom?: undefined;
+};
+export declare const getPopoverPositionStyle: ({ position }: Pick<UsePopoverProps, "position">) => {
+    bottom: string;
+    marginBottom: number;
+    right?: undefined;
+    marginRight?: undefined;
+    left?: undefined;
+    marginLeft?: undefined;
+    top?: undefined;
+    marginTop?: undefined;
+} | {
+    right: string;
+    marginRight: number;
+    bottom?: undefined;
+    marginBottom?: undefined;
+    left?: undefined;
+    marginLeft?: undefined;
+    top?: undefined;
+    marginTop?: undefined;
+} | {
+    left: string;
+    marginLeft: number;
+    bottom?: undefined;
+    marginBottom?: undefined;
+    right?: undefined;
+    marginRight?: undefined;
+    top?: undefined;
+    marginTop?: undefined;
+} | {
+    top: string;
+    marginTop: number;
+    bottom?: undefined;
+    marginBottom?: undefined;
+    right?: undefined;
+    marginRight?: undefined;
+    left?: undefined;
+    marginLeft?: undefined;
+};
+export declare const getPopoverFramerProps: ({ position, alignment }: Pick<UsePopoverProps, "position" | "alignment">) => {
+    initial: {
+        [x: string]: number;
+        opacity: number;
+    };
+    animate: {
+        [x: string]: number;
+        opacity: number;
+    };
+    exit: {
+        [x: string]: number;
+        opacity: number;
+    };
+    transformTemplate: HTMLMotionProps<"div">["transformTemplate"];
+};
+export declare const getPopoverActualPositionAlignment: ({ position, alignment, triggerRect, popoverRect, }: Pick<UsePopoverProps, "position" | "alignment"> & {
+    triggerRect: DOMRect;
+    popoverRect: DOMRect;
+}) => {
+    fallbackPosition: "top" | "bottom" | "right" | "left";
+    fallbackAlignment: "start" | "middle" | "end";
+};

package/dist/Shared/Components/SelectPicker/common.d.ts

@@ -8,6 +8,7 @@ export declare const SelectPickerControl: <OptionValue>(props: ControlProps<Sele
 export declare const SelectPickerInput: <OptionValue>(props: InputProps<SelectPickerOptionType<OptionValue>>) => JSX.Element;
 export declare const SelectPickerValueContainer: <OptionValue, IsMulti extends boolean>({ showSelectedOptionsCount, customSelectedOptionsCount, ...props }: ValueContainerProps<SelectPickerOptionType<OptionValue>> & Pick<SelectPickerProps<OptionValue, IsMulti>, "showSelectedOptionsCount" | "customSelectedOptionsCount">) => JSX.Element;
 export declare const SelectPickerOption: <OptionValue, IsMulti extends boolean>({ disableDescriptionEllipsis, ...props }: OptionProps<SelectPickerOptionType<OptionValue>> & Pick<SelectPickerProps<OptionValue, IsMulti>, "disableDescriptionEllipsis">) => JSX.Element;
+export declare const SelectPickerMenuListFooter: ({ menuListFooterConfig, }: Required<Pick<SelectPickerProps, "menuListFooterConfig">>) => JSX.Element;
 export declare const SelectPickerMenuList: <OptionValue>(props: MenuListProps<SelectPickerOptionType<OptionValue>>) => JSX.Element;
 export declare const SelectPickerMultiValueLabel: <OptionValue, IsMulti extends boolean>({ getIsOptionValid, ...props }: MultiValueProps<SelectPickerOptionType<OptionValue>, true> & Pick<SelectPickerProps<OptionValue, IsMulti>["multiSelectProps"], "getIsOptionValid">) => JSX.Element;
 export declare const SelectPickerMultiValueRemove: (props: MultiValueRemoveProps) => JSX.Element;

package/dist/Shared/Components/SelectPicker/type.d.ts

@@ -40,6 +40,10 @@ type MenuListFooterConfigType = {
     buttonProps: {
         variant: ButtonVariantType.primary | ButtonVariantType.borderLess;
     } & Omit<ButtonProps<ButtonComponentType>, 'size' | 'fullWidth' | 'icon' | 'endIcon' | 'variant' | 'style'>;
+} | {
+    type: 'customNode';
+    value: ReactElement;
+    buttonProps?: never;
 };
 declare module 'react-select/base' {
     interface Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {

package/dist/Shared/Components/TabGroup/TabGroup.helpers.d.ts

@@ -1,5 +1,5 @@
 import { TabGroupProps, TabProps } from './TabGroup.types';
-export declare const getTabIcon: ({ icon, showError, showWarning, className, size, active, }: Pick<TabProps, "showError" | "showWarning" | "icon" | "active"> & Pick<TabGroupProps, "size"> & {
+export declare const getTabIcon: ({ icon, showError, showWarning, className, size, active, iconElement, }: Pick<TabProps, "showError" | "showWarning" | "icon" | "active" | "iconElement"> & Pick<TabGroupProps, "size"> & {
     className: string;
 }) => JSX.Element;
 export declare const getTabBadge: (badge: TabProps["badge"], className: string) => JSX.Element;