@up42/up-components 6.2.0 → 7.0.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.
|
@@ -7,7 +7,16 @@ export interface PopoverButtonProps extends Omit<ButtonProps, 'onClick' | 'start
|
|
|
7
7
|
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
|
|
8
8
|
startIcon?: IconProps['name'];
|
|
9
9
|
}
|
|
10
|
-
export
|
|
10
|
+
export declare const POPOVER_SIZE: {
|
|
11
|
+
readonly extraSmall: "256px";
|
|
12
|
+
readonly small: "320px";
|
|
13
|
+
readonly medium: "512px";
|
|
14
|
+
readonly large: "768px";
|
|
15
|
+
readonly extraLarge: "1200px";
|
|
16
|
+
readonly auto: "auto";
|
|
17
|
+
};
|
|
18
|
+
export type PopoverSize = keyof typeof POPOVER_SIZE;
|
|
19
|
+
export type PopoverProps = Omit<MUIPopoverProps, 'content' | 'open' | 'onClose'> & {
|
|
11
20
|
/**
|
|
12
21
|
* Opens the modal if true, closes it if false
|
|
13
22
|
* This is optional for compatibility purposes
|
|
@@ -37,35 +46,30 @@ export type PopoverProps = Omit<MUIPopoverProps, 'open' | 'onClose'> & {
|
|
|
37
46
|
* Primarily used to indicate that the anchor is the built in button icon.
|
|
38
47
|
* @default false
|
|
39
48
|
*/
|
|
40
|
-
|
|
49
|
+
showControlButton?: boolean;
|
|
41
50
|
/**
|
|
42
51
|
* Alternative icon to display as the built in button's icon (only applicable if isIconAnchor is true)
|
|
43
52
|
*/
|
|
44
|
-
|
|
45
|
-
/**
|
|
46
|
-
* Custom styles for the icon anchor button (only applicable if isIconAnchor is true)
|
|
47
|
-
*/
|
|
48
|
-
iconButtonSx?: SxProps<Theme>;
|
|
53
|
+
controlButtonIcon?: IconProps['name'];
|
|
49
54
|
/**
|
|
50
55
|
* Whether to show dividers between sections
|
|
51
56
|
* @default false
|
|
52
57
|
*/
|
|
53
|
-
|
|
58
|
+
showDividers?: boolean;
|
|
54
59
|
/**
|
|
55
60
|
* Whether to show a connector line between the popover and anchor
|
|
56
61
|
* @default false
|
|
57
62
|
*/
|
|
58
|
-
|
|
63
|
+
showConnector?: boolean;
|
|
59
64
|
/**
|
|
60
|
-
*
|
|
61
|
-
* @default false
|
|
65
|
+
* Content to be displayed inside the popover, with padding applied by default
|
|
62
66
|
*/
|
|
63
|
-
|
|
67
|
+
content?: React.ReactElement;
|
|
64
68
|
/**
|
|
65
|
-
*
|
|
69
|
+
* Size of the popover
|
|
66
70
|
* @default false
|
|
67
71
|
*/
|
|
68
|
-
|
|
72
|
+
size?: PopoverSize;
|
|
69
73
|
/**
|
|
70
74
|
* Custom styles for the popover
|
|
71
75
|
*/
|
|
@@ -77,7 +81,7 @@ export type PopoverProps = Omit<MUIPopoverProps, 'open' | 'onClose'> & {
|
|
|
77
81
|
*
|
|
78
82
|
* Documentation: https://up-components.up42.com/?path=/docs-patterns-popovers-popover--docs
|
|
79
83
|
*/
|
|
80
|
-
export declare const Popover: React.ForwardRefExoticComponent<Omit<Omit<MUIPopoverProps, "open" | "onClose"> & {
|
|
84
|
+
export declare const Popover: React.ForwardRefExoticComponent<Omit<Omit<MUIPopoverProps, "content" | "open" | "onClose"> & {
|
|
81
85
|
/**
|
|
82
86
|
* Opens the modal if true, closes it if false
|
|
83
87
|
* This is optional for compatibility purposes
|
|
@@ -107,35 +111,30 @@ export declare const Popover: React.ForwardRefExoticComponent<Omit<Omit<MUIPopov
|
|
|
107
111
|
* Primarily used to indicate that the anchor is the built in button icon.
|
|
108
112
|
* @default false
|
|
109
113
|
*/
|
|
110
|
-
|
|
114
|
+
showControlButton?: boolean | undefined;
|
|
111
115
|
/**
|
|
112
116
|
* Alternative icon to display as the built in button's icon (only applicable if isIconAnchor is true)
|
|
113
117
|
*/
|
|
114
|
-
|
|
115
|
-
/**
|
|
116
|
-
* Custom styles for the icon anchor button (only applicable if isIconAnchor is true)
|
|
117
|
-
*/
|
|
118
|
-
iconButtonSx?: SxProps<Theme> | undefined;
|
|
118
|
+
controlButtonIcon?: "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" | "CheckCircle" | "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" | "SelectedIndicatorWide" | "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;
|
|
119
119
|
/**
|
|
120
120
|
* Whether to show dividers between sections
|
|
121
121
|
* @default false
|
|
122
122
|
*/
|
|
123
|
-
|
|
123
|
+
showDividers?: boolean | undefined;
|
|
124
124
|
/**
|
|
125
125
|
* Whether to show a connector line between the popover and anchor
|
|
126
126
|
* @default false
|
|
127
127
|
*/
|
|
128
|
-
|
|
128
|
+
showConnector?: boolean | undefined;
|
|
129
129
|
/**
|
|
130
|
-
*
|
|
131
|
-
* @default false
|
|
130
|
+
* Content to be displayed inside the popover, with padding applied by default
|
|
132
131
|
*/
|
|
133
|
-
|
|
132
|
+
content?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
|
|
134
133
|
/**
|
|
135
|
-
*
|
|
134
|
+
* Size of the popover
|
|
136
135
|
* @default false
|
|
137
136
|
*/
|
|
138
|
-
|
|
137
|
+
size?: "small" | "large" | "medium" | "auto" | "extraSmall" | "extraLarge" | undefined;
|
|
139
138
|
/**
|
|
140
139
|
* Custom styles for the popover
|
|
141
140
|
*/
|
package/dist/index.d.ts
CHANGED
|
@@ -4724,7 +4724,16 @@ interface PopoverButtonProps extends Omit<ButtonProps, 'onClick' | 'startIcon' |
|
|
|
4724
4724
|
onClick?: (e: React__default.MouseEvent<HTMLButtonElement>) => Promise<void>;
|
|
4725
4725
|
startIcon?: IconProps$1['name'];
|
|
4726
4726
|
}
|
|
4727
|
-
|
|
4727
|
+
declare const POPOVER_SIZE: {
|
|
4728
|
+
readonly extraSmall: "256px";
|
|
4729
|
+
readonly small: "320px";
|
|
4730
|
+
readonly medium: "512px";
|
|
4731
|
+
readonly large: "768px";
|
|
4732
|
+
readonly extraLarge: "1200px";
|
|
4733
|
+
readonly auto: "auto";
|
|
4734
|
+
};
|
|
4735
|
+
type PopoverSize = keyof typeof POPOVER_SIZE;
|
|
4736
|
+
type PopoverProps = Omit<PopoverProps$1, 'content' | 'open' | 'onClose'> & {
|
|
4728
4737
|
/**
|
|
4729
4738
|
* Opens the modal if true, closes it if false
|
|
4730
4739
|
* This is optional for compatibility purposes
|
|
@@ -4754,35 +4763,30 @@ type PopoverProps = Omit<PopoverProps$1, 'open' | 'onClose'> & {
|
|
|
4754
4763
|
* Primarily used to indicate that the anchor is the built in button icon.
|
|
4755
4764
|
* @default false
|
|
4756
4765
|
*/
|
|
4757
|
-
|
|
4766
|
+
showControlButton?: boolean;
|
|
4758
4767
|
/**
|
|
4759
4768
|
* Alternative icon to display as the built in button's icon (only applicable if isIconAnchor is true)
|
|
4760
4769
|
*/
|
|
4761
|
-
|
|
4762
|
-
/**
|
|
4763
|
-
* Custom styles for the icon anchor button (only applicable if isIconAnchor is true)
|
|
4764
|
-
*/
|
|
4765
|
-
iconButtonSx?: SxProps<Theme>;
|
|
4770
|
+
controlButtonIcon?: IconProps$1['name'];
|
|
4766
4771
|
/**
|
|
4767
4772
|
* Whether to show dividers between sections
|
|
4768
4773
|
* @default false
|
|
4769
4774
|
*/
|
|
4770
|
-
|
|
4775
|
+
showDividers?: boolean;
|
|
4771
4776
|
/**
|
|
4772
4777
|
* Whether to show a connector line between the popover and anchor
|
|
4773
4778
|
* @default false
|
|
4774
4779
|
*/
|
|
4775
|
-
|
|
4780
|
+
showConnector?: boolean;
|
|
4776
4781
|
/**
|
|
4777
|
-
*
|
|
4778
|
-
* @default false
|
|
4782
|
+
* Content to be displayed inside the popover, with padding applied by default
|
|
4779
4783
|
*/
|
|
4780
|
-
|
|
4784
|
+
content?: React__default.ReactElement;
|
|
4781
4785
|
/**
|
|
4782
|
-
*
|
|
4786
|
+
* Size of the popover
|
|
4783
4787
|
* @default false
|
|
4784
4788
|
*/
|
|
4785
|
-
|
|
4789
|
+
size?: PopoverSize;
|
|
4786
4790
|
/**
|
|
4787
4791
|
* Custom styles for the popover
|
|
4788
4792
|
*/
|
|
@@ -4794,7 +4798,7 @@ type PopoverProps = Omit<PopoverProps$1, 'open' | 'onClose'> & {
|
|
|
4794
4798
|
*
|
|
4795
4799
|
* Documentation: https://up-components.up42.com/?path=/docs-patterns-popovers-popover--docs
|
|
4796
4800
|
*/
|
|
4797
|
-
declare const Popover: React__default.ForwardRefExoticComponent<Omit<Omit<PopoverProps$1, "open" | "onClose"> & {
|
|
4801
|
+
declare const Popover: React__default.ForwardRefExoticComponent<Omit<Omit<PopoverProps$1, "content" | "open" | "onClose"> & {
|
|
4798
4802
|
/**
|
|
4799
4803
|
* Opens the modal if true, closes it if false
|
|
4800
4804
|
* This is optional for compatibility purposes
|
|
@@ -4824,35 +4828,30 @@ declare const Popover: React__default.ForwardRefExoticComponent<Omit<Omit<Popove
|
|
|
4824
4828
|
* Primarily used to indicate that the anchor is the built in button icon.
|
|
4825
4829
|
* @default false
|
|
4826
4830
|
*/
|
|
4827
|
-
|
|
4831
|
+
showControlButton?: boolean | undefined;
|
|
4828
4832
|
/**
|
|
4829
4833
|
* Alternative icon to display as the built in button's icon (only applicable if isIconAnchor is true)
|
|
4830
4834
|
*/
|
|
4831
|
-
|
|
4832
|
-
/**
|
|
4833
|
-
* Custom styles for the icon anchor button (only applicable if isIconAnchor is true)
|
|
4834
|
-
*/
|
|
4835
|
-
iconButtonSx?: SxProps<Theme> | undefined;
|
|
4835
|
+
controlButtonIcon?: "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" | "CheckCircle" | "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" | "SelectedIndicatorWide" | "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;
|
|
4836
4836
|
/**
|
|
4837
4837
|
* Whether to show dividers between sections
|
|
4838
4838
|
* @default false
|
|
4839
4839
|
*/
|
|
4840
|
-
|
|
4840
|
+
showDividers?: boolean | undefined;
|
|
4841
4841
|
/**
|
|
4842
4842
|
* Whether to show a connector line between the popover and anchor
|
|
4843
4843
|
* @default false
|
|
4844
4844
|
*/
|
|
4845
|
-
|
|
4845
|
+
showConnector?: boolean | undefined;
|
|
4846
4846
|
/**
|
|
4847
|
-
*
|
|
4848
|
-
* @default false
|
|
4847
|
+
* Content to be displayed inside the popover, with padding applied by default
|
|
4849
4848
|
*/
|
|
4850
|
-
|
|
4849
|
+
content?: React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | undefined;
|
|
4851
4850
|
/**
|
|
4852
|
-
*
|
|
4851
|
+
* Size of the popover
|
|
4853
4852
|
* @default false
|
|
4854
4853
|
*/
|
|
4855
|
-
|
|
4854
|
+
size?: "small" | "large" | "medium" | "auto" | "extraSmall" | "extraLarge" | undefined;
|
|
4856
4855
|
/**
|
|
4857
4856
|
* Custom styles for the popover
|
|
4858
4857
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@up42/up-components",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "7.0.0",
|
|
4
4
|
"description": "UP42 Component Library",
|
|
5
5
|
"author": "Axel Fuhrmann axel.fuhrmann@up42.com",
|
|
6
6
|
"license": "ISC",
|
|
@@ -49,14 +49,14 @@
|
|
|
49
49
|
"@rollup/plugin-terser": "^0.4.4",
|
|
50
50
|
"@rollup/plugin-typescript": "^11.1.6",
|
|
51
51
|
"@rollup/plugin-url": "^8.0.2",
|
|
52
|
-
"@storybook/addon-a11y": "^8.6.
|
|
53
|
-
"@storybook/addon-docs": "^8.6.
|
|
54
|
-
"@storybook/addon-essentials": "^8.6.
|
|
55
|
-
"@storybook/addon-links": "^8.6.
|
|
56
|
-
"@storybook/manager-api": "^8.6.
|
|
57
|
-
"@storybook/react": "^8.6.
|
|
58
|
-
"@storybook/react-vite": "^8.6.
|
|
59
|
-
"@storybook/theming": "^8.6.
|
|
52
|
+
"@storybook/addon-a11y": "^8.6.15",
|
|
53
|
+
"@storybook/addon-docs": "^8.6.15",
|
|
54
|
+
"@storybook/addon-essentials": "^8.6.15",
|
|
55
|
+
"@storybook/addon-links": "^8.6.15",
|
|
56
|
+
"@storybook/manager-api": "^8.6.15",
|
|
57
|
+
"@storybook/react": "^8.6.15",
|
|
58
|
+
"@storybook/react-vite": "^8.6.15",
|
|
59
|
+
"@storybook/theming": "^8.6.15",
|
|
60
60
|
"@svgr/rollup": "^6.2.1",
|
|
61
61
|
"@testing-library/react": "^12.1.2",
|
|
62
62
|
"@testing-library/react-hooks": "^8.0.1",
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
"rollup": "^4.13.2",
|
|
84
84
|
"rollup-plugin-dts": "^6.1.0",
|
|
85
85
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
86
|
-
"storybook": "^8.6.
|
|
86
|
+
"storybook": "^8.6.15",
|
|
87
87
|
"svgo": "^3.3.2",
|
|
88
88
|
"tslib": "^2.8.1",
|
|
89
89
|
"typescript": "^4.5.4",
|