@up42/up-components 5.4.0 → 5.5.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/cjs/index.js +2 -2
- package/dist/cjs/types/components/DocumentationPopover/DocumentationPopover.d.ts +1 -1
- package/dist/cjs/types/components/FeatureCard/FeatureCard.d.ts +8 -0
- package/dist/cjs/types/components/InfoPopover/InfoPopover.d.ts +1 -1
- package/dist/cjs/types/components/Popover/Connector.d.ts +4 -0
- package/dist/cjs/types/components/Popover/Connector.test.d.ts +1 -0
- 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/FeatureCard.d.ts +8 -0
- package/dist/esm/types/components/InfoPopover/InfoPopover.d.ts +1 -1
- package/dist/esm/types/components/Popover/Connector.d.ts +4 -0
- package/dist/esm/types/components/Popover/Connector.test.d.ts +1 -0
- 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 +206 -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;
|
|
@@ -23,6 +23,10 @@ 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
|
+
isActive?: boolean;
|
|
26
30
|
};
|
|
27
31
|
/**
|
|
28
32
|
* Documentation: https://up-components.up42.com/?path=/docs/data-entry-featurecard--docs
|
|
@@ -53,4 +57,8 @@ export declare const FeatureCard: React.ForwardRefExoticComponent<Omit<import("@
|
|
|
53
57
|
* Applies the hovered state to the card from the parent.
|
|
54
58
|
*/
|
|
55
59
|
hovered?: boolean | undefined;
|
|
60
|
+
/**
|
|
61
|
+
* Applies the active state to the card from the parent.
|
|
62
|
+
*/
|
|
63
|
+
isActive?: boolean | undefined;
|
|
56
64
|
}, "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 @@
|
|
|
1
|
+
export {};
|
|
@@ -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,10 @@ 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
|
+
isActive?: boolean;
|
|
5207
5352
|
};
|
|
5208
5353
|
/**
|
|
5209
5354
|
* Documentation: https://up-components.up42.com/?path=/docs/data-entry-featurecard--docs
|
|
@@ -5234,6 +5379,10 @@ declare const FeatureCard: React__default.ForwardRefExoticComponent<Omit<_mui_ma
|
|
|
5234
5379
|
* Applies the hovered state to the card from the parent.
|
|
5235
5380
|
*/
|
|
5236
5381
|
hovered?: boolean | undefined;
|
|
5382
|
+
/**
|
|
5383
|
+
* Applies the active state to the card from the parent.
|
|
5384
|
+
*/
|
|
5385
|
+
isActive?: boolean | undefined;
|
|
5237
5386
|
}, "ref"> & React__default.RefAttributes<unknown>>;
|
|
5238
5387
|
|
|
5239
5388
|
type FeatureCardHeaderProps = {
|
|
@@ -5382,7 +5531,7 @@ type DocumentationPopoverProps = {
|
|
|
5382
5531
|
ctaPath: string;
|
|
5383
5532
|
};
|
|
5384
5533
|
/**
|
|
5385
|
-
*
|
|
5534
|
+
* @deprecated Please use [Popover](https://up-components.up42.com/?path=/docs-patterns-popovers-popover--docs) instead
|
|
5386
5535
|
*/
|
|
5387
5536
|
declare const DocumentationPopover: ({ children, ctaPath, ctaLabel, title }: DocumentationPopoverProps) => React__default.JSX.Element;
|
|
5388
5537
|
|
|
@@ -5652,5 +5801,5 @@ type ContextState = {
|
|
|
5652
5801
|
*/
|
|
5653
5802
|
declare const useAlert: () => ContextState;
|
|
5654
5803
|
|
|
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 };
|
|
5804
|
+
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 };
|
|
5805
|
+
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.0",
|
|
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": {
|