@up42/up-components 5.3.2 → 5.5.0

package/dist/cjs/types/components/DocumentationPopover/DocumentationPopover.d.ts

@@ -13,6 +13,6 @@ export type DocumentationPopoverProps = {
     ctaPath: string;
 };
 /**
- * Documentation: https://up-components.up42.com/?path=/docs/patterns-popovers-documentationpopover--docs
+ * @deprecated Please use [Popover](https://up-components.up42.com/?path=/docs-patterns-popovers-popover--docs) instead
  */
 export declare const DocumentationPopover: ({ children, ctaPath, ctaLabel, title }: DocumentationPopoverProps) => React.JSX.Element;

package/dist/cjs/types/components/FeatureCard/FeatureCard.d.ts

@@ -11,10 +11,6 @@ export type FeatureCardProps = CardProps & {
         info?: ReactNode;
         actions?: ReactNode;
     };
-    /**
-     * Whether the card is selectable.
-     */
-    isSelectable?: boolean;
     /**
      * Applies the selected state to the card from the parent.
      */
@@ -27,6 +23,10 @@ export type FeatureCardProps = CardProps & {
      * Applies the hovered state to the card from the parent.
      */
     hovered?: boolean;
+    /**
+     * Applies the active state to the card from the parent.
+     */
+    isActive?: boolean;
 };
 /**
  * Documentation: https://up-components.up42.com/?path=/docs/data-entry-featurecard--docs
@@ -45,10 +45,6 @@ export declare const FeatureCard: React.ForwardRefExoticComponent<Omit<import("@
         info?: ReactNode;
         actions?: ReactNode;
     } | undefined;
-    /**
-     * Whether the card is selectable.
-     */
-    isSelectable?: boolean | undefined;
     /**
      * Applies the selected state to the card from the parent.
      */
@@ -61,4 +57,8 @@ export declare const FeatureCard: React.ForwardRefExoticComponent<Omit<import("@
      * Applies the hovered state to the card from the parent.
      */
     hovered?: boolean | undefined;
+    /**
+     * Applies the active state to the card from the parent.
+     */
+    isActive?: boolean | undefined;
 }, "ref"> & React.RefAttributes<unknown>>;

package/dist/cjs/types/components/InfoPopover/InfoPopover.d.ts

@@ -4,6 +4,6 @@ export type InfoPopoverProps = InfoCardProps & {
     icon?: React.ElementType;
 };
 /**
- * Documentation: https://up-components.up42.com/?path=/docs/patterns-popovers-infopopover--docs
+ * @deprecated Please use [Popover](https://up-components.up42.com/?path=/docs-patterns-popovers-popover--docs) instead
  */
 export declare const InfoPopover: ({ id, icon: CustomIcon, actions, title, children, sx, ...props }: InfoPopoverProps) => React.JSX.Element;

package/dist/cjs/types/components/Popover/Connector.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const Connector: ({ anchorEl }: {
+    anchorEl: HTMLElement;
+}) => React.JSX.Element;

package/dist/cjs/types/components/Popover/Connector.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/types/components/Popover/Popover.d.ts

@@ -0,0 +1,144 @@
+import React from 'react';
+import { Theme, SxProps, PopoverProps as MUIPopoverProps } from '@mui/material';
+import { ButtonProps } from '../Button/Button';
+import { IconProps } from '../Icon/Icon';
+export interface PopoverButtonProps extends Omit<ButtonProps, 'onClick' | 'startIcon' | 'endIcon'> {
+    label: string;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
+    startIcon?: IconProps['name'];
+}
+export type PopoverProps = Omit<MUIPopoverProps, 'open' | 'onClose'> & {
+    /**
+     * Opens the modal if true, closes it if false
+     * This is optional for compatibility purposes
+     */
+    open?: boolean;
+    /**
+     * External callback fired when the popover should close
+     */
+    onClose?: () => void;
+    /**
+     * Header content (optional)
+     */
+    header?: React.ReactNode;
+    /**
+     * Footer info (optional)
+     */
+    footerInfo?: React.ReactNode;
+    /**
+     * Primary button props (optional)
+     */
+    primaryButton?: PopoverButtonProps;
+    /**
+     * Secondary button props (optional)
+     */
+    secondaryButton?: PopoverButtonProps;
+    /**
+     * Primarily used to indicate that the anchor is the built in button icon.
+     * @default false
+     */
+    isIconAnchor?: boolean;
+    /**
+     * Alternative icon to display as the built in button's icon (only applicable if isIconAnchor is true)
+     */
+    icon?: IconProps['name'];
+    /**
+     * Custom styles for the icon anchor button (only applicable if isIconAnchor is true)
+     */
+    iconButtonSx?: SxProps<Theme>;
+    /**
+     * Whether to show dividers between sections
+     * @default false
+     */
+    hasDivider?: boolean;
+    /**
+     * Whether to show a connector line between the popover and anchor
+     * @default false
+     */
+    hasConnector?: boolean;
+    /**
+     * Whether to show padding inside the content section(For backwards compatibility purposes)
+     * @default false
+     */
+    hasContentPadding?: boolean;
+    /**
+     * Whether to use the default min and max width for the popover(For backwards compatibility purposes)
+     * @default false
+     */
+    hasDefaultWidth?: boolean;
+    /**
+     * Custom styles for the popover
+     */
+    sx?: SxProps<Theme>;
+    inputRef?: MUIPopoverProps['ref'];
+};
+/**
+ * Multi-purpose popover component with Header, Content, and Footer slots.
+ *
+ * Documentation: https://up-components.up42.com/?path=/docs-patterns-popovers-popover--docs
+ */
+export declare const Popover: React.ForwardRefExoticComponent<Omit<Omit<MUIPopoverProps, "open" | "onClose"> & {
+    /**
+     * Opens the modal if true, closes it if false
+     * This is optional for compatibility purposes
+     */
+    open?: boolean | undefined;
+    /**
+     * External callback fired when the popover should close
+     */
+    onClose?: (() => void) | undefined;
+    /**
+     * Header content (optional)
+     */
+    header?: React.ReactNode;
+    /**
+     * Footer info (optional)
+     */
+    footerInfo?: React.ReactNode;
+    /**
+     * Primary button props (optional)
+     */
+    primaryButton?: PopoverButtonProps | undefined;
+    /**
+     * Secondary button props (optional)
+     */
+    secondaryButton?: PopoverButtonProps | undefined;
+    /**
+     * Primarily used to indicate that the anchor is the built in button icon.
+     * @default false
+     */
+    isIconAnchor?: boolean | undefined;
+    /**
+     * Alternative icon to display as the built in button's icon (only applicable if isIconAnchor is true)
+     */
+    icon?: "AccessTime" | "Add" | "AddCircleFilled" | "AddPlusCircle" | "AlarmBell" | "AlertCircleFilled" | "AlertTriangle" | "Angle" | "AppWindowCode" | "ArrowBack" | "ArrowBackIos" | "ArrowDownLeft" | "ArrowDownRight" | "ArrowDownward" | "ArrowForward" | "ArrowTopLeft" | "ArrowTopRight" | "ArrowUpward" | "Attachment" | "AutoStoriesOutlined" | "Balance" | "Bin" | "Block" | "Blocked" | "Boxes" | "BoxesGrid" | "Brightness1" | "Calendar" | "CalendarAdd" | "CalendarCheck" | "CalendarDate" | "CalendarEdit" | "CalendarRemove" | "CalendarSearchDate" | "CampaignOutlined" | "CaretCircleFilledDown" | "CaretCircleFilledLeft" | "CaretCircleFilledRight" | "CaretCircleFilledUp" | "Catalog" | "CheckCircleFilled" | "CheckList" | "CheckMark" | "ChevronCircleFilledDown" | "ChevronCircleFilledLeft" | "ChevronCircleFilledRight" | "ChevronCircleFilledUp" | "Close" | "CloseCircle" | "CloseCircleFilled" | "Cloud" | "CloudCheck" | "CloudDownload" | "CloudOff" | "CloudRemove" | "CloudSearch" | "CloudSync" | "CloudUpload" | "CloudWarning" | "Coin" | "CoinEuro" | "Compass" | "ContactSupportOutlined" | "ContentCut" | "ContentPaste" | "Copy" | "Credit" | "Dashboard" | "DataTransferVertical" | "Delivery" | "DollarCoinCircleFilled" | "DottedLines" | "Download" | "DownloadCircle" | "EditPencil" | "EuroCoinCircleFilled" | "ExitLeaveBack" | "ExternalLink" | "EyeCircleFilled" | "FlagQuestion" | "FolderEmpty" | "Footprint" | "HeadphonesQuestion" | "Heart" | "HeartCircleFilled" | "Hyperlink" | "ImageResolution" | "Invoice" | "KeyboardArrowDown" | "KeyboardArrowLeft" | "KeyboardArrowRight" | "KeyboardArrowUp" | "Layers" | "Library" | "Lightbulb" | "LightbulbOutlined" | "LocalOfferOutlined" | "Lock" | "LockCircleFilled" | "LockShield" | "Logo" | "LogoKSA" | "Map" | "MapPin" | "MapSearch" | "Marketplace" | "MarketplaceExternal" | "MenuCircleFilledHorizontal" | "MenuCircleFilledVertical" | "MenuOpenHorizontal" | "MenuOpenVertical" | "MinusCircleFilled" | "Module" | "Module2" | "ModuleThree" | "MoreHoriz" | "MultipleUsers" | "NotificationError" | "NotificationInfo" | "NotificationSuccess" | "NotificationWarning" | "PenCircleFilled" | "Pencil" | "PercentCircle" | "Person" | "Pin" | "Polygon" | "Projects" | "QuestionBubble" | "QuestionCircle" | "QuestionCircleFilled" | "QuestionMark" | "Rectangle" | "RectangleAOI" | "Redo" | "Remove" | "Resolution" | "Satellite" | "Save" | "Scissors" | "Search" | "SelectedIndicator" | "ServerCheck" | "ServerDeny" | "ServerDownload" | "ServerEdit" | "ServerError" | "ServerLock" | "ServerMinus" | "ServerQuestion" | "ServerRefresh" | "ServerSearch" | "ServerSync" | "ServerUpload" | "ServerWarning" | "SettingsCog" | "SettingsCog2" | "SettingsSliderHorizontal" | "SettingsVertical" | "Share" | "ShareNetwork" | "Shield" | "ShieldWithLock" | "ShoppingCartCheck" | "ShoppingCartClose" | "ShoppingCartMinus" | "ShoppingCartOutlined" | "ShoppingCartPlus" | "Storage" | "Support" | "SupportClear" | "SupportHeadphones" | "System" | "Tag" | "TagAlert" | "TagCheck" | "TagDouble" | "TagEdit" | "TagMinus" | "TagPlus" | "TagSearch" | "TagX" | "Target" | "Transaction" | "TrashBin" | "Undo" | "Unlock" | "UpgradeShield" | "Upload" | "UploadCircle" | "User" | "VisibilityOffOutlined" | "VisibilityOutlined" | "WeatherCloud" | "Webhooks" | "Workflow" | "WorkflowPencil" | "ZoomIn" | "ZoomOut" | undefined;
+    /**
+     * Custom styles for the icon anchor button (only applicable if isIconAnchor is true)
+     */
+    iconButtonSx?: SxProps<Theme> | undefined;
+    /**
+     * Whether to show dividers between sections
+     * @default false
+     */
+    hasDivider?: boolean | undefined;
+    /**
+     * Whether to show a connector line between the popover and anchor
+     * @default false
+     */
+    hasConnector?: boolean | undefined;
+    /**
+     * Whether to show padding inside the content section(For backwards compatibility purposes)
+     * @default false
+     */
+    hasContentPadding?: boolean | undefined;
+    /**
+     * Whether to use the default min and max width for the popover(For backwards compatibility purposes)
+     * @default false
+     */
+    hasDefaultWidth?: boolean | undefined;
+    /**
+     * Custom styles for the popover
+     */
+    sx?: SxProps<Theme> | undefined;
+    inputRef?: MUIPopoverProps['ref'];
+}, "ref"> & React.RefAttributes<unknown>>;

package/dist/cjs/types/components/Popover/Popover.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/types/index.d.ts

@@ -35,6 +35,7 @@ export { ContactBox, type ContactBoxProps } from './components/ContactBox/Contac
 export { ControlButton, type ControlButtonProps } from './components/ControlButton/ControlButton';
 export { CopyButton, type CopyButtonProps } from './components/CopyButton/CopyButton';
 export { InfoPopover, type InfoPopoverProps } from './components/InfoPopover/InfoPopover';
+export { Popover, type PopoverProps } from './components/Popover/Popover';
 export { PageHeader, type PageHeaderProps } from './components/PageHeader/PageHeader';
 export { NotFound, type NotFoundProps } from './components/NotFound/NotFound';
 export { Loading, type LoadingProps } from './components/Loading/Loading';