@up42/up-components 5.4.0 → 5.5.1
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/cjs/index.js +2 -2
- package/dist/cjs/types/components/DocumentationPopover/DocumentationPopover.d.ts +1 -1
- package/dist/cjs/types/components/FeatureCard/Connector.d.ts +2 -0
- package/dist/cjs/types/components/FeatureCard/Connector.test.d.ts +1 -0
- package/dist/cjs/types/components/FeatureCard/FeatureCard.d.ts +18 -0
- package/dist/cjs/types/components/InfoPopover/InfoPopover.d.ts +1 -1
- package/dist/cjs/types/components/Popover/Popover.d.ts +144 -0
- package/dist/cjs/types/components/Popover/Popover.test.d.ts +1 -0
- package/dist/cjs/types/index.d.ts +1 -0
- package/dist/esm/index.js +2 -2
- package/dist/esm/types/components/DocumentationPopover/DocumentationPopover.d.ts +1 -1
- package/dist/esm/types/components/FeatureCard/Connector.d.ts +2 -0
- package/dist/esm/types/components/FeatureCard/Connector.test.d.ts +1 -0
- package/dist/esm/types/components/FeatureCard/FeatureCard.d.ts +18 -0
- package/dist/esm/types/components/InfoPopover/InfoPopover.d.ts +1 -1
- package/dist/esm/types/components/Popover/Popover.d.ts +144 -0
- package/dist/esm/types/components/Popover/Popover.test.d.ts +1 -0
- package/dist/esm/types/index.d.ts +1 -0
- package/dist/index.d.ts +216 -57
- package/package.json +2 -2
|
@@ -13,6 +13,6 @@ export type DocumentationPopoverProps = {
|
|
|
13
13
|
ctaPath: string;
|
|
14
14
|
};
|
|
15
15
|
/**
|
|
16
|
-
*
|
|
16
|
+
* @deprecated Please use [Popover](https://up-components.up42.com/?path=/docs-patterns-popovers-popover--docs) instead
|
|
17
17
|
*/
|
|
18
18
|
export declare const DocumentationPopover: ({ children, ctaPath, ctaLabel, title }: DocumentationPopoverProps) => React.JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -23,6 +23,15 @@ export type FeatureCardProps = CardProps & {
|
|
|
23
23
|
* Applies the hovered state to the card from the parent.
|
|
24
24
|
*/
|
|
25
25
|
hovered?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Applies the active state to the card from the parent.
|
|
28
|
+
*/
|
|
29
|
+
active?: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* Whether to show the connector (the visual line that connects the card to the Popover).
|
|
32
|
+
* @default false
|
|
33
|
+
*/
|
|
34
|
+
showConnector?: boolean;
|
|
26
35
|
};
|
|
27
36
|
/**
|
|
28
37
|
* Documentation: https://up-components.up42.com/?path=/docs/data-entry-featurecard--docs
|
|
@@ -53,4 +62,13 @@ export declare const FeatureCard: React.ForwardRefExoticComponent<Omit<import("@
|
|
|
53
62
|
* Applies the hovered state to the card from the parent.
|
|
54
63
|
*/
|
|
55
64
|
hovered?: boolean | undefined;
|
|
65
|
+
/**
|
|
66
|
+
* Applies the active state to the card from the parent.
|
|
67
|
+
*/
|
|
68
|
+
active?: boolean | undefined;
|
|
69
|
+
/**
|
|
70
|
+
* Whether to show the connector (the visual line that connects the card to the Popover).
|
|
71
|
+
* @default false
|
|
72
|
+
*/
|
|
73
|
+
showConnector?: boolean | undefined;
|
|
56
74
|
}, "ref"> & React.RefAttributes<unknown>>;
|
|
@@ -4,6 +4,6 @@ export type InfoPopoverProps = InfoCardProps & {
|
|
|
4
4
|
icon?: React.ElementType;
|
|
5
5
|
};
|
|
6
6
|
/**
|
|
7
|
-
*
|
|
7
|
+
* @deprecated Please use [Popover](https://up-components.up42.com/?path=/docs-patterns-popovers-popover--docs) instead
|
|
8
8
|
*/
|
|
9
9
|
export declare const InfoPopover: ({ id, icon: CustomIcon, actions, title, children, sx, ...props }: InfoPopoverProps) => React.JSX.Element;
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Theme, SxProps, PopoverProps as MUIPopoverProps } from '@mui/material';
|
|
3
|
+
import { ButtonProps } from '../Button/Button';
|
|
4
|
+
import { IconProps } from '../Icon/Icon';
|
|
5
|
+
export interface PopoverButtonProps extends Omit<ButtonProps, 'onClick' | 'startIcon' | 'endIcon'> {
|
|
6
|
+
label: string;
|
|
7
|
+
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
|
|
8
|
+
startIcon?: IconProps['name'];
|
|
9
|
+
}
|
|
10
|
+
export type PopoverProps = Omit<MUIPopoverProps, 'open' | 'onClose'> & {
|
|
11
|
+
/**
|
|
12
|
+
* Opens the modal if true, closes it if false
|
|
13
|
+
* This is optional for compatibility purposes
|
|
14
|
+
*/
|
|
15
|
+
open?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* External callback fired when the popover should close
|
|
18
|
+
*/
|
|
19
|
+
onClose?: () => void;
|
|
20
|
+
/**
|
|
21
|
+
* Header content (optional)
|
|
22
|
+
*/
|
|
23
|
+
header?: React.ReactNode;
|
|
24
|
+
/**
|
|
25
|
+
* Footer info (optional)
|
|
26
|
+
*/
|
|
27
|
+
footerInfo?: React.ReactNode;
|
|
28
|
+
/**
|
|
29
|
+
* Primary button props (optional)
|
|
30
|
+
*/
|
|
31
|
+
primaryButton?: PopoverButtonProps;
|
|
32
|
+
/**
|
|
33
|
+
* Secondary button props (optional)
|
|
34
|
+
*/
|
|
35
|
+
secondaryButton?: PopoverButtonProps;
|
|
36
|
+
/**
|
|
37
|
+
* Primarily used to indicate that the anchor is the built in button icon.
|
|
38
|
+
* @default false
|
|
39
|
+
*/
|
|
40
|
+
isIconAnchor?: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* Alternative icon to display as the built in button's icon (only applicable if isIconAnchor is true)
|
|
43
|
+
*/
|
|
44
|
+
icon?: IconProps['name'];
|
|
45
|
+
/**
|
|
46
|
+
* Custom styles for the icon anchor button (only applicable if isIconAnchor is true)
|
|
47
|
+
*/
|
|
48
|
+
iconButtonSx?: SxProps<Theme>;
|
|
49
|
+
/**
|
|
50
|
+
* Whether to show dividers between sections
|
|
51
|
+
* @default false
|
|
52
|
+
*/
|
|
53
|
+
hasDivider?: boolean;
|
|
54
|
+
/**
|
|
55
|
+
* Whether to show a connector line between the popover and anchor
|
|
56
|
+
* @default false
|
|
57
|
+
*/
|
|
58
|
+
hasConnector?: boolean;
|
|
59
|
+
/**
|
|
60
|
+
* Whether to show padding inside the content section(For backwards compatibility purposes)
|
|
61
|
+
* @default false
|
|
62
|
+
*/
|
|
63
|
+
hasContentPadding?: boolean;
|
|
64
|
+
/**
|
|
65
|
+
* Whether to use the default min and max width for the popover(For backwards compatibility purposes)
|
|
66
|
+
* @default false
|
|
67
|
+
*/
|
|
68
|
+
hasDefaultWidth?: boolean;
|
|
69
|
+
/**
|
|
70
|
+
* Custom styles for the popover
|
|
71
|
+
*/
|
|
72
|
+
sx?: SxProps<Theme>;
|
|
73
|
+
inputRef?: MUIPopoverProps['ref'];
|
|
74
|
+
};
|
|
75
|
+
/**
|
|
76
|
+
* Multi-purpose popover component with Header, Content, and Footer slots.
|
|
77
|
+
*
|
|
78
|
+
* Documentation: https://up-components.up42.com/?path=/docs-patterns-popovers-popover--docs
|
|
79
|
+
*/
|
|
80
|
+
export declare const Popover: React.ForwardRefExoticComponent<Omit<Omit<MUIPopoverProps, "open" | "onClose"> & {
|
|
81
|
+
/**
|
|
82
|
+
* Opens the modal if true, closes it if false
|
|
83
|
+
* This is optional for compatibility purposes
|
|
84
|
+
*/
|
|
85
|
+
open?: boolean | undefined;
|
|
86
|
+
/**
|
|
87
|
+
* External callback fired when the popover should close
|
|
88
|
+
*/
|
|
89
|
+
onClose?: (() => void) | undefined;
|
|
90
|
+
/**
|
|
91
|
+
* Header content (optional)
|
|
92
|
+
*/
|
|
93
|
+
header?: React.ReactNode;
|
|
94
|
+
/**
|
|
95
|
+
* Footer info (optional)
|
|
96
|
+
*/
|
|
97
|
+
footerInfo?: React.ReactNode;
|
|
98
|
+
/**
|
|
99
|
+
* Primary button props (optional)
|
|
100
|
+
*/
|
|
101
|
+
primaryButton?: PopoverButtonProps | undefined;
|
|
102
|
+
/**
|
|
103
|
+
* Secondary button props (optional)
|
|
104
|
+
*/
|
|
105
|
+
secondaryButton?: PopoverButtonProps | undefined;
|
|
106
|
+
/**
|
|
107
|
+
* Primarily used to indicate that the anchor is the built in button icon.
|
|
108
|
+
* @default false
|
|
109
|
+
*/
|
|
110
|
+
isIconAnchor?: boolean | undefined;
|
|
111
|
+
/**
|
|
112
|
+
* Alternative icon to display as the built in button's icon (only applicable if isIconAnchor is true)
|
|
113
|
+
*/
|
|
114
|
+
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;
|
|
115
|
+
/**
|
|
116
|
+
* Custom styles for the icon anchor button (only applicable if isIconAnchor is true)
|
|
117
|
+
*/
|
|
118
|
+
iconButtonSx?: SxProps<Theme> | undefined;
|
|
119
|
+
/**
|
|
120
|
+
* Whether to show dividers between sections
|
|
121
|
+
* @default false
|
|
122
|
+
*/
|
|
123
|
+
hasDivider?: boolean | undefined;
|
|
124
|
+
/**
|
|
125
|
+
* Whether to show a connector line between the popover and anchor
|
|
126
|
+
* @default false
|
|
127
|
+
*/
|
|
128
|
+
hasConnector?: boolean | undefined;
|
|
129
|
+
/**
|
|
130
|
+
* Whether to show padding inside the content section(For backwards compatibility purposes)
|
|
131
|
+
* @default false
|
|
132
|
+
*/
|
|
133
|
+
hasContentPadding?: boolean | undefined;
|
|
134
|
+
/**
|
|
135
|
+
* Whether to use the default min and max width for the popover(For backwards compatibility purposes)
|
|
136
|
+
* @default false
|
|
137
|
+
*/
|
|
138
|
+
hasDefaultWidth?: boolean | undefined;
|
|
139
|
+
/**
|
|
140
|
+
* Custom styles for the popover
|
|
141
|
+
*/
|
|
142
|
+
sx?: SxProps<Theme> | undefined;
|
|
143
|
+
inputRef?: MUIPopoverProps['ref'];
|
|
144
|
+
}, "ref"> & React.RefAttributes<unknown>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -35,6 +35,7 @@ export { ContactBox, type ContactBoxProps } from './components/ContactBox/Contac
|
|
|
35
35
|
export { ControlButton, type ControlButtonProps } from './components/ControlButton/ControlButton';
|
|
36
36
|
export { CopyButton, type CopyButtonProps } from './components/CopyButton/CopyButton';
|
|
37
37
|
export { InfoPopover, type InfoPopoverProps } from './components/InfoPopover/InfoPopover';
|
|
38
|
+
export { Popover, type PopoverProps } from './components/Popover/Popover';
|
|
38
39
|
export { PageHeader, type PageHeaderProps } from './components/PageHeader/PageHeader';
|
|
39
40
|
export { NotFound, type NotFoundProps } from './components/NotFound/NotFound';
|
|
40
41
|
export { Loading, type LoadingProps } from './components/Loading/Loading';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { default as tokens } from '@up42/design-system-tokens/dist/json/tokens.json';
|
|
2
2
|
import * as _mui_material from '@mui/material';
|
|
3
|
-
import { BoxProps, TextFieldProps, AvatarProps as AvatarProps$1, GridProps, ContainerProps, CheckboxProps as CheckboxProps$1, RadioProps as RadioProps$1, RadioGroupProps, SwitchProps as SwitchProps$1, SelectProps as SelectProps$1, SliderProps as SliderProps$1, LinkProps as LinkProps$1, TabsProps as TabsProps$1, TabProps as TabProps$1, CardProps, ModalProps, AlertProps as AlertProps$1, SxProps, Theme, IconButtonProps, SvgIconProps, BadgeProps as BadgeProps$1, ChipProps, DividerProps as DividerProps$1, ButtonProps as ButtonProps$2, SnackbarProps } from '@mui/material';
|
|
3
|
+
import { BoxProps, TextFieldProps, AvatarProps as AvatarProps$1, GridProps, ContainerProps, CheckboxProps as CheckboxProps$1, RadioProps as RadioProps$1, RadioGroupProps, SwitchProps as SwitchProps$1, SelectProps as SelectProps$1, SliderProps as SliderProps$1, LinkProps as LinkProps$1, TabsProps as TabsProps$1, TabProps as TabProps$1, CardProps, ModalProps, AlertProps as AlertProps$1, SxProps, Theme, IconButtonProps, SvgIconProps, PopoverProps as PopoverProps$1, BadgeProps as BadgeProps$1, ChipProps, DividerProps as DividerProps$1, ButtonProps as ButtonProps$2, SnackbarProps } from '@mui/material';
|
|
4
4
|
export * from '@mui/material';
|
|
5
5
|
import { ThemeProviderProps } from '@mui/material/styles/ThemeProvider';
|
|
6
6
|
import * as React from 'react';
|
|
@@ -577,62 +577,10 @@ type InfoPopoverProps = InfoCardProps & {
|
|
|
577
577
|
icon?: React__default.ElementType;
|
|
578
578
|
};
|
|
579
579
|
/**
|
|
580
|
-
*
|
|
580
|
+
* @deprecated Please use [Popover](https://up-components.up42.com/?path=/docs-patterns-popovers-popover--docs) instead
|
|
581
581
|
*/
|
|
582
582
|
declare const InfoPopover: ({ id, icon: CustomIcon, actions, title, children, sx, ...props }: InfoPopoverProps) => React__default.JSX.Element;
|
|
583
583
|
|
|
584
|
-
type PageHeaderProps = {
|
|
585
|
-
title: string;
|
|
586
|
-
divider?: boolean;
|
|
587
|
-
description?: React__default.ReactNode;
|
|
588
|
-
/**
|
|
589
|
-
* Action button right side of header (default action)
|
|
590
|
-
*/
|
|
591
|
-
action?: React__default.ReactNode;
|
|
592
|
-
/**
|
|
593
|
-
* Action button left side of header
|
|
594
|
-
*/
|
|
595
|
-
secondaryAction?: React__default.ReactNode;
|
|
596
|
-
/**
|
|
597
|
-
* Pass SetStateAction from child component to update header title
|
|
598
|
-
*/
|
|
599
|
-
onSubmitTitle?: (title: string) => void;
|
|
600
|
-
};
|
|
601
|
-
/**
|
|
602
|
-
* Documentation: https://up-components.up42.com/?path=/docs/patterns-pageheader--docs
|
|
603
|
-
*/
|
|
604
|
-
declare const PageHeader: ({ title, description, divider, action, secondaryAction, onSubmitTitle, }: PageHeaderProps) => React__default.JSX.Element;
|
|
605
|
-
|
|
606
|
-
type NotFoundProps = {
|
|
607
|
-
/**
|
|
608
|
-
* The label of the CTA button
|
|
609
|
-
*/
|
|
610
|
-
ctaLabel?: string;
|
|
611
|
-
/**
|
|
612
|
-
* The path of the CTA button.
|
|
613
|
-
*/
|
|
614
|
-
ctaPath?: string;
|
|
615
|
-
};
|
|
616
|
-
/**
|
|
617
|
-
* Documentation: https://up-components.up42.com/?path=/docs/patterns-notfound--docs
|
|
618
|
-
*/
|
|
619
|
-
declare const NotFound: ({ ctaLabel, ctaPath }: NotFoundProps) => React__default.JSX.Element;
|
|
620
|
-
|
|
621
|
-
type LoadingProps = {
|
|
622
|
-
/**
|
|
623
|
-
* Controls the `height` of the component. Defaults to `100vh`
|
|
624
|
-
*/
|
|
625
|
-
fullPage?: boolean;
|
|
626
|
-
/**
|
|
627
|
-
* Internal visibility control of the component
|
|
628
|
-
*/
|
|
629
|
-
visible?: boolean;
|
|
630
|
-
} & BoxProps;
|
|
631
|
-
/**
|
|
632
|
-
* Documentation: https://up-components.up42.com/?path=/docs/patterns-loading--docs
|
|
633
|
-
*/
|
|
634
|
-
declare const Loading: ({ fullPage, visible, ...rest }: LoadingProps) => React__default.JSX.Element | null;
|
|
635
|
-
|
|
636
584
|
var _path$1j;
|
|
637
585
|
function _extends$3b() { return _extends$3b = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3b.apply(null, arguments); }
|
|
638
586
|
var SvgAccessTime = function SvgAccessTime(props) {
|
|
@@ -4737,6 +4685,199 @@ type IconProps$1 = {
|
|
|
4737
4685
|
*/
|
|
4738
4686
|
declare const Icon: ({ name, ...props }: IconProps$1) => React__default.JSX.Element;
|
|
4739
4687
|
|
|
4688
|
+
interface PopoverButtonProps extends Omit<ButtonProps, 'onClick' | 'startIcon' | 'endIcon'> {
|
|
4689
|
+
label: string;
|
|
4690
|
+
onClick?: (e: React__default.MouseEvent<HTMLButtonElement>) => Promise<void>;
|
|
4691
|
+
startIcon?: IconProps$1['name'];
|
|
4692
|
+
}
|
|
4693
|
+
type PopoverProps = Omit<PopoverProps$1, 'open' | 'onClose'> & {
|
|
4694
|
+
/**
|
|
4695
|
+
* Opens the modal if true, closes it if false
|
|
4696
|
+
* This is optional for compatibility purposes
|
|
4697
|
+
*/
|
|
4698
|
+
open?: boolean;
|
|
4699
|
+
/**
|
|
4700
|
+
* External callback fired when the popover should close
|
|
4701
|
+
*/
|
|
4702
|
+
onClose?: () => void;
|
|
4703
|
+
/**
|
|
4704
|
+
* Header content (optional)
|
|
4705
|
+
*/
|
|
4706
|
+
header?: React__default.ReactNode;
|
|
4707
|
+
/**
|
|
4708
|
+
* Footer info (optional)
|
|
4709
|
+
*/
|
|
4710
|
+
footerInfo?: React__default.ReactNode;
|
|
4711
|
+
/**
|
|
4712
|
+
* Primary button props (optional)
|
|
4713
|
+
*/
|
|
4714
|
+
primaryButton?: PopoverButtonProps;
|
|
4715
|
+
/**
|
|
4716
|
+
* Secondary button props (optional)
|
|
4717
|
+
*/
|
|
4718
|
+
secondaryButton?: PopoverButtonProps;
|
|
4719
|
+
/**
|
|
4720
|
+
* Primarily used to indicate that the anchor is the built in button icon.
|
|
4721
|
+
* @default false
|
|
4722
|
+
*/
|
|
4723
|
+
isIconAnchor?: boolean;
|
|
4724
|
+
/**
|
|
4725
|
+
* Alternative icon to display as the built in button's icon (only applicable if isIconAnchor is true)
|
|
4726
|
+
*/
|
|
4727
|
+
icon?: IconProps$1['name'];
|
|
4728
|
+
/**
|
|
4729
|
+
* Custom styles for the icon anchor button (only applicable if isIconAnchor is true)
|
|
4730
|
+
*/
|
|
4731
|
+
iconButtonSx?: SxProps<Theme>;
|
|
4732
|
+
/**
|
|
4733
|
+
* Whether to show dividers between sections
|
|
4734
|
+
* @default false
|
|
4735
|
+
*/
|
|
4736
|
+
hasDivider?: boolean;
|
|
4737
|
+
/**
|
|
4738
|
+
* Whether to show a connector line between the popover and anchor
|
|
4739
|
+
* @default false
|
|
4740
|
+
*/
|
|
4741
|
+
hasConnector?: boolean;
|
|
4742
|
+
/**
|
|
4743
|
+
* Whether to show padding inside the content section(For backwards compatibility purposes)
|
|
4744
|
+
* @default false
|
|
4745
|
+
*/
|
|
4746
|
+
hasContentPadding?: boolean;
|
|
4747
|
+
/**
|
|
4748
|
+
* Whether to use the default min and max width for the popover(For backwards compatibility purposes)
|
|
4749
|
+
* @default false
|
|
4750
|
+
*/
|
|
4751
|
+
hasDefaultWidth?: boolean;
|
|
4752
|
+
/**
|
|
4753
|
+
* Custom styles for the popover
|
|
4754
|
+
*/
|
|
4755
|
+
sx?: SxProps<Theme>;
|
|
4756
|
+
inputRef?: PopoverProps$1['ref'];
|
|
4757
|
+
};
|
|
4758
|
+
/**
|
|
4759
|
+
* Multi-purpose popover component with Header, Content, and Footer slots.
|
|
4760
|
+
*
|
|
4761
|
+
* Documentation: https://up-components.up42.com/?path=/docs-patterns-popovers-popover--docs
|
|
4762
|
+
*/
|
|
4763
|
+
declare const Popover: React__default.ForwardRefExoticComponent<Omit<Omit<PopoverProps$1, "open" | "onClose"> & {
|
|
4764
|
+
/**
|
|
4765
|
+
* Opens the modal if true, closes it if false
|
|
4766
|
+
* This is optional for compatibility purposes
|
|
4767
|
+
*/
|
|
4768
|
+
open?: boolean | undefined;
|
|
4769
|
+
/**
|
|
4770
|
+
* External callback fired when the popover should close
|
|
4771
|
+
*/
|
|
4772
|
+
onClose?: (() => void) | undefined;
|
|
4773
|
+
/**
|
|
4774
|
+
* Header content (optional)
|
|
4775
|
+
*/
|
|
4776
|
+
header?: React__default.ReactNode;
|
|
4777
|
+
/**
|
|
4778
|
+
* Footer info (optional)
|
|
4779
|
+
*/
|
|
4780
|
+
footerInfo?: React__default.ReactNode;
|
|
4781
|
+
/**
|
|
4782
|
+
* Primary button props (optional)
|
|
4783
|
+
*/
|
|
4784
|
+
primaryButton?: PopoverButtonProps | undefined;
|
|
4785
|
+
/**
|
|
4786
|
+
* Secondary button props (optional)
|
|
4787
|
+
*/
|
|
4788
|
+
secondaryButton?: PopoverButtonProps | undefined;
|
|
4789
|
+
/**
|
|
4790
|
+
* Primarily used to indicate that the anchor is the built in button icon.
|
|
4791
|
+
* @default false
|
|
4792
|
+
*/
|
|
4793
|
+
isIconAnchor?: boolean | undefined;
|
|
4794
|
+
/**
|
|
4795
|
+
* Alternative icon to display as the built in button's icon (only applicable if isIconAnchor is true)
|
|
4796
|
+
*/
|
|
4797
|
+
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;
|
|
4798
|
+
/**
|
|
4799
|
+
* Custom styles for the icon anchor button (only applicable if isIconAnchor is true)
|
|
4800
|
+
*/
|
|
4801
|
+
iconButtonSx?: SxProps<Theme> | undefined;
|
|
4802
|
+
/**
|
|
4803
|
+
* Whether to show dividers between sections
|
|
4804
|
+
* @default false
|
|
4805
|
+
*/
|
|
4806
|
+
hasDivider?: boolean | undefined;
|
|
4807
|
+
/**
|
|
4808
|
+
* Whether to show a connector line between the popover and anchor
|
|
4809
|
+
* @default false
|
|
4810
|
+
*/
|
|
4811
|
+
hasConnector?: boolean | undefined;
|
|
4812
|
+
/**
|
|
4813
|
+
* Whether to show padding inside the content section(For backwards compatibility purposes)
|
|
4814
|
+
* @default false
|
|
4815
|
+
*/
|
|
4816
|
+
hasContentPadding?: boolean | undefined;
|
|
4817
|
+
/**
|
|
4818
|
+
* Whether to use the default min and max width for the popover(For backwards compatibility purposes)
|
|
4819
|
+
* @default false
|
|
4820
|
+
*/
|
|
4821
|
+
hasDefaultWidth?: boolean | undefined;
|
|
4822
|
+
/**
|
|
4823
|
+
* Custom styles for the popover
|
|
4824
|
+
*/
|
|
4825
|
+
sx?: SxProps<Theme> | undefined;
|
|
4826
|
+
inputRef?: PopoverProps$1['ref'];
|
|
4827
|
+
}, "ref"> & React__default.RefAttributes<unknown>>;
|
|
4828
|
+
|
|
4829
|
+
type PageHeaderProps = {
|
|
4830
|
+
title: string;
|
|
4831
|
+
divider?: boolean;
|
|
4832
|
+
description?: React__default.ReactNode;
|
|
4833
|
+
/**
|
|
4834
|
+
* Action button right side of header (default action)
|
|
4835
|
+
*/
|
|
4836
|
+
action?: React__default.ReactNode;
|
|
4837
|
+
/**
|
|
4838
|
+
* Action button left side of header
|
|
4839
|
+
*/
|
|
4840
|
+
secondaryAction?: React__default.ReactNode;
|
|
4841
|
+
/**
|
|
4842
|
+
* Pass SetStateAction from child component to update header title
|
|
4843
|
+
*/
|
|
4844
|
+
onSubmitTitle?: (title: string) => void;
|
|
4845
|
+
};
|
|
4846
|
+
/**
|
|
4847
|
+
* Documentation: https://up-components.up42.com/?path=/docs/patterns-pageheader--docs
|
|
4848
|
+
*/
|
|
4849
|
+
declare const PageHeader: ({ title, description, divider, action, secondaryAction, onSubmitTitle, }: PageHeaderProps) => React__default.JSX.Element;
|
|
4850
|
+
|
|
4851
|
+
type NotFoundProps = {
|
|
4852
|
+
/**
|
|
4853
|
+
* The label of the CTA button
|
|
4854
|
+
*/
|
|
4855
|
+
ctaLabel?: string;
|
|
4856
|
+
/**
|
|
4857
|
+
* The path of the CTA button.
|
|
4858
|
+
*/
|
|
4859
|
+
ctaPath?: string;
|
|
4860
|
+
};
|
|
4861
|
+
/**
|
|
4862
|
+
* Documentation: https://up-components.up42.com/?path=/docs/patterns-notfound--docs
|
|
4863
|
+
*/
|
|
4864
|
+
declare const NotFound: ({ ctaLabel, ctaPath }: NotFoundProps) => React__default.JSX.Element;
|
|
4865
|
+
|
|
4866
|
+
type LoadingProps = {
|
|
4867
|
+
/**
|
|
4868
|
+
* Controls the `height` of the component. Defaults to `100vh`
|
|
4869
|
+
*/
|
|
4870
|
+
fullPage?: boolean;
|
|
4871
|
+
/**
|
|
4872
|
+
* Internal visibility control of the component
|
|
4873
|
+
*/
|
|
4874
|
+
visible?: boolean;
|
|
4875
|
+
} & BoxProps;
|
|
4876
|
+
/**
|
|
4877
|
+
* Documentation: https://up-components.up42.com/?path=/docs/patterns-loading--docs
|
|
4878
|
+
*/
|
|
4879
|
+
declare const Loading: ({ fullPage, visible, ...rest }: LoadingProps) => React__default.JSX.Element | null;
|
|
4880
|
+
|
|
4740
4881
|
var _path$4, _path2$4, _path3$4, _path4$4, _path5$4, _path6$4, _path7$4, _path8$4, _circle, _path9$3, _path0$3;
|
|
4741
4882
|
function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
|
|
4742
4883
|
var SvgFloppyDisk = function SvgFloppyDisk(props) {
|
|
@@ -5204,6 +5345,15 @@ type FeatureCardProps = CardProps & {
|
|
|
5204
5345
|
* Applies the hovered state to the card from the parent.
|
|
5205
5346
|
*/
|
|
5206
5347
|
hovered?: boolean;
|
|
5348
|
+
/**
|
|
5349
|
+
* Applies the active state to the card from the parent.
|
|
5350
|
+
*/
|
|
5351
|
+
active?: boolean;
|
|
5352
|
+
/**
|
|
5353
|
+
* Whether to show the connector (the visual line that connects the card to the Popover).
|
|
5354
|
+
* @default false
|
|
5355
|
+
*/
|
|
5356
|
+
showConnector?: boolean;
|
|
5207
5357
|
};
|
|
5208
5358
|
/**
|
|
5209
5359
|
* Documentation: https://up-components.up42.com/?path=/docs/data-entry-featurecard--docs
|
|
@@ -5234,6 +5384,15 @@ declare const FeatureCard: React__default.ForwardRefExoticComponent<Omit<_mui_ma
|
|
|
5234
5384
|
* Applies the hovered state to the card from the parent.
|
|
5235
5385
|
*/
|
|
5236
5386
|
hovered?: boolean | undefined;
|
|
5387
|
+
/**
|
|
5388
|
+
* Applies the active state to the card from the parent.
|
|
5389
|
+
*/
|
|
5390
|
+
active?: boolean | undefined;
|
|
5391
|
+
/**
|
|
5392
|
+
* Whether to show the connector (the visual line that connects the card to the Popover).
|
|
5393
|
+
* @default false
|
|
5394
|
+
*/
|
|
5395
|
+
showConnector?: boolean | undefined;
|
|
5237
5396
|
}, "ref"> & React__default.RefAttributes<unknown>>;
|
|
5238
5397
|
|
|
5239
5398
|
type FeatureCardHeaderProps = {
|
|
@@ -5382,7 +5541,7 @@ type DocumentationPopoverProps = {
|
|
|
5382
5541
|
ctaPath: string;
|
|
5383
5542
|
};
|
|
5384
5543
|
/**
|
|
5385
|
-
*
|
|
5544
|
+
* @deprecated Please use [Popover](https://up-components.up42.com/?path=/docs-patterns-popovers-popover--docs) instead
|
|
5386
5545
|
*/
|
|
5387
5546
|
declare const DocumentationPopover: ({ children, ctaPath, ctaLabel, title }: DocumentationPopoverProps) => React__default.JSX.Element;
|
|
5388
5547
|
|
|
@@ -5652,5 +5811,5 @@ type ContextState = {
|
|
|
5652
5811
|
*/
|
|
5653
5812
|
declare const useAlert: () => ContextState;
|
|
5654
5813
|
|
|
5655
|
-
export { Alert, Avatar, Badge, Banner, Button, Checkbox, CodeInline, CodeSnippet, ContactBox, ControlButton, CopyButton, DataGrid, DateTime, Divider, DocumentationPopover, EditTagsButton, EmptyState, FeatureCard, FeatureCardHeader, FeatureCardHeaderActions, FeatureFlagCheckbox, FormCheckbox, FormDatePicker, FormDateRangePicker, FormDateRangePickerList, FormDateTimePicker, FormInput, FormRadio, FormSelect, FormSwitch, GridContainer, GridItem, Icon, Illustration, InfoCard, InfoModal, InfoPopover, Input, Link, Loading, Logo, NotFound, PageContainer, PageHeader, Radio, Select, Slider, StatusLight, Switch, Tab, TabGroup, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, Tabs, Tag, TagsList, ToggleButton, Typography, UpComponentsProvider, capitalize, copyToClipboard, formatDate, formatFileSize, formatNumber, theme, useAlert, useCursorPagination, useDebounce, useQueryParams, useRemotePagination, useToggle };
|
|
5656
|
-
export type { AlertProps, AvatarProps, BadgeProps, BannerProps, ButtonProps, CheckboxProps, CodeInlineProps, CodeSnippetItemProps, CodeSnippetProps, ContactBoxProps, ControlButtonProps, CopyButtonProps, CreateAlertProps, CreateSnackbarProps, CursorPaginatedResponse, DatePickerDateType, DateRange, DateTimeProps, DividerProps, DocumentationPopoverProps, EditTagsButtonProps, EmptyStateProps, FeatureCardHeaderActionsProps, FeatureCardHeaderProps, FeatureCardProps, FeatureFlagCheckboxProps, FormCheckboxProps, FormDatePickerProps, FormDateRangePickerListProps, FormDateRangePickerProps, FormDateTimePickerProps, FormInputProps, FormRadioProps, FormSelectProps, FormSwitchProps, GridContainerProps, GridItemProps, IconAction, IconProps$1 as IconProps, IllustrationProps, InfoCardProps, InfoModalProps, InfoPopoverProps, InputProps, LinkProps, LoadingProps, LogoProps, MenuAction, NotFoundProps, PageContainerProps, PageHeaderProps, PaginatedResponse, RadioProps, SelectProps, SliderProps, StatusLightProps, SwitchProps, TabGroupProps, TabProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TableSortLabelProps, TabsProps, TagItem, TagProps, TagsListProps, ToggleButtonProps, TypographyProps, UseToggleResult };
|
|
5814
|
+
export { Alert, Avatar, Badge, Banner, Button, Checkbox, CodeInline, CodeSnippet, ContactBox, ControlButton, CopyButton, DataGrid, DateTime, Divider, DocumentationPopover, EditTagsButton, EmptyState, FeatureCard, FeatureCardHeader, FeatureCardHeaderActions, FeatureFlagCheckbox, FormCheckbox, FormDatePicker, FormDateRangePicker, FormDateRangePickerList, FormDateTimePicker, FormInput, FormRadio, FormSelect, FormSwitch, GridContainer, GridItem, Icon, Illustration, InfoCard, InfoModal, InfoPopover, Input, Link, Loading, Logo, NotFound, PageContainer, PageHeader, Popover, Radio, Select, Slider, StatusLight, Switch, Tab, TabGroup, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, Tabs, Tag, TagsList, ToggleButton, Typography, UpComponentsProvider, capitalize, copyToClipboard, formatDate, formatFileSize, formatNumber, theme, useAlert, useCursorPagination, useDebounce, useQueryParams, useRemotePagination, useToggle };
|
|
5815
|
+
export type { AlertProps, AvatarProps, BadgeProps, BannerProps, ButtonProps, CheckboxProps, CodeInlineProps, CodeSnippetItemProps, CodeSnippetProps, ContactBoxProps, ControlButtonProps, CopyButtonProps, CreateAlertProps, CreateSnackbarProps, CursorPaginatedResponse, DatePickerDateType, DateRange, DateTimeProps, DividerProps, DocumentationPopoverProps, EditTagsButtonProps, EmptyStateProps, FeatureCardHeaderActionsProps, FeatureCardHeaderProps, FeatureCardProps, FeatureFlagCheckboxProps, FormCheckboxProps, FormDatePickerProps, FormDateRangePickerListProps, FormDateRangePickerProps, FormDateTimePickerProps, FormInputProps, FormRadioProps, FormSelectProps, FormSwitchProps, GridContainerProps, GridItemProps, IconAction, IconProps$1 as IconProps, IllustrationProps, InfoCardProps, InfoModalProps, InfoPopoverProps, InputProps, LinkProps, LoadingProps, LogoProps, MenuAction, NotFoundProps, PageContainerProps, PageHeaderProps, PaginatedResponse, PopoverProps, RadioProps, SelectProps, SliderProps, StatusLightProps, SwitchProps, TabGroupProps, TabProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TableSortLabelProps, TabsProps, TagItem, TagProps, TagsListProps, ToggleButtonProps, TypographyProps, UseToggleResult };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@up42/up-components",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.5.1",
|
|
4
4
|
"description": "UP42 Component Library",
|
|
5
5
|
"author": "Axel Fuhrmann axel.fuhrmann@up42.com",
|
|
6
6
|
"license": "ISC",
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
"svgo": "^3.3.2",
|
|
99
99
|
"tslib": "^2.8.1",
|
|
100
100
|
"typescript": "^4.5.4",
|
|
101
|
-
"vite": "^
|
|
101
|
+
"vite": "^7.1.4",
|
|
102
102
|
"vite-plugin-svgr": "^4.2.0"
|
|
103
103
|
},
|
|
104
104
|
"peerDependencies": {
|