@up42/up-components 4.12.0 → 4.14.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/Banner/Banner.d.ts +16 -0
- package/dist/cjs/types/components/FeatureCard/FeatureCard.d.ts +3 -2
- package/dist/cjs/types/components/FeatureFlagCheckbox/FeatureFlagCheckbox.d.ts +25 -0
- package/dist/cjs/types/components/FeatureFlagCheckbox/FeatureFlagCheckbox.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/Banner/Banner.d.ts +16 -0
- package/dist/esm/types/components/FeatureCard/FeatureCard.d.ts +3 -2
- package/dist/esm/types/components/FeatureFlagCheckbox/FeatureFlagCheckbox.d.ts +25 -0
- package/dist/esm/types/components/FeatureFlagCheckbox/FeatureFlagCheckbox.test.d.ts +1 -0
- package/dist/esm/types/index.d.ts +1 -0
- package/dist/index.d.ts +46 -5
- package/package.json +1 -1
|
@@ -23,6 +23,14 @@ export type BannerProps = {
|
|
|
23
23
|
*/
|
|
24
24
|
onDismiss?: ButtonProps['onClick'];
|
|
25
25
|
title: string;
|
|
26
|
+
/**
|
|
27
|
+
* The size(height) of the banner.
|
|
28
|
+
* - 'default': Standard banner height.
|
|
29
|
+
* - 'slim': Reduced height, intended for use only with the 'inline' variant.
|
|
30
|
+
*
|
|
31
|
+
* Note: 'slim' size has a fixed height of '32px' and should be used exclusively with variant='inline' and probably text ellipsis to ensure proper layout and appearance.
|
|
32
|
+
*/
|
|
33
|
+
size?: 'default' | 'slim';
|
|
26
34
|
} & Omit<AlertProps, 'title' | 'closeText' | 'icon' | 'role' | 'onClose'>;
|
|
27
35
|
/**
|
|
28
36
|
* Documentation: https://up-components.up42.com/?path=/docs/feedback-banner--docs
|
|
@@ -49,4 +57,12 @@ export declare const Banner: React.ForwardRefExoticComponent<Omit<{
|
|
|
49
57
|
*/
|
|
50
58
|
onDismiss?: ButtonProps['onClick'];
|
|
51
59
|
title: string;
|
|
60
|
+
/**
|
|
61
|
+
* The size(height) of the banner.
|
|
62
|
+
* - 'default': Standard banner height.
|
|
63
|
+
* - 'slim': Reduced height, intended for use only with the 'inline' variant.
|
|
64
|
+
*
|
|
65
|
+
* Note: 'slim' size has a fixed height of '32px' and should be used exclusively with variant='inline' and probably text ellipsis to ensure proper layout and appearance.
|
|
66
|
+
*/
|
|
67
|
+
size?: "default" | "slim" | undefined;
|
|
52
68
|
} & Omit<AlertProps, "title" | "role" | "onClose" | "closeText" | "icon">, "ref"> & React.RefAttributes<unknown>>;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React, { ReactNode } from 'react';
|
|
2
2
|
import { CardProps } from '@mui/material';
|
|
3
|
+
import { BannerProps } from '../Banner/Banner';
|
|
3
4
|
export type FeatureCardProps = CardProps & {
|
|
4
|
-
|
|
5
|
+
bannerProps?: Omit<BannerProps, 'title' | 'variant'>;
|
|
5
6
|
header?: {
|
|
6
7
|
title: ReactNode;
|
|
7
8
|
actions?: ReactNode;
|
|
@@ -27,4 +28,4 @@ export type FeatureCardProps = CardProps & {
|
|
|
27
28
|
*/
|
|
28
29
|
hovered?: boolean;
|
|
29
30
|
};
|
|
30
|
-
export declare const FeatureCard: ({ children, header, footer,
|
|
31
|
+
export declare const FeatureCard: ({ children, header, footer, bannerProps, isSelectable, selected, isHoverable, hovered, ...props }: FeatureCardProps) => React.JSX.Element;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React, { SyntheticEvent } from 'react';
|
|
2
|
+
export type FeatureFlagCheckboxProps = {
|
|
3
|
+
label: string;
|
|
4
|
+
checked: boolean;
|
|
5
|
+
/**
|
|
6
|
+
* Defines if the component should be rendered or not.
|
|
7
|
+
* Use this prop to indicate if the application is in a development environment.
|
|
8
|
+
*/
|
|
9
|
+
isDevelopment: boolean;
|
|
10
|
+
onChange: (event: SyntheticEvent, checked: boolean) => void;
|
|
11
|
+
onClose?: () => void;
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
*
|
|
15
|
+
* Development-only feature toggle component (not for production use).
|
|
16
|
+
*
|
|
17
|
+
* **Important**: This component is intended *strictly* for development environments and should not be included in production builds.
|
|
18
|
+
*
|
|
19
|
+
* The `FeatureFlagCheckbox` is a temporary UI component used by developers to enable or disable feature flags manually. It renders a labeled checkbox and an optional close button to dismiss the control.
|
|
20
|
+
*
|
|
21
|
+
* **Note**: The component is rendered only when the `isDevelopment` prop is set to `true`. It is the responsibility of the consuming application to ensure the provided value is correct so that is only rendered in non-production environments.
|
|
22
|
+
*
|
|
23
|
+
* Documentation: https://up-components.up42.com/?path=/docs/development-featureflagcheckbox--docs
|
|
24
|
+
*/
|
|
25
|
+
export declare function FeatureFlagCheckbox({ label, checked, isDevelopment, onChange, onClose }: FeatureFlagCheckboxProps): React.JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -51,6 +51,7 @@ export { FeatureCardHeaderActions, type IconAction, type MenuAction, type Featur
|
|
|
51
51
|
export { StatusLight, type StatusLightProps } from './components/StatusLight/StatusLight';
|
|
52
52
|
export { TagsList, type TagsListProps } from './components/TagsList/TagsList';
|
|
53
53
|
export { EditTagsButton, type EditTagsButtonProps } from './components/EditTagsButton/EditTagsButton';
|
|
54
|
+
export { FeatureFlagCheckbox, type FeatureFlagCheckboxProps, } from './components/FeatureFlagCheckbox/FeatureFlagCheckbox';
|
|
54
55
|
export { DocumentationPopover, type DocumentationPopoverProps, } from './components/DocumentationPopover/DocumentationPopover';
|
|
55
56
|
export { CodeInline, type CodeInlineProps } from './components/CodeInline/CodeInline';
|
|
56
57
|
export { CodeSnippet, type CodeSnippetProps, type CodeSnippetItemProps } from './components/CodeSnippet/CodeSnippet';
|
package/dist/index.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ import { BoxProps, TextFieldProps, AvatarProps as AvatarProps$1, GridProps, Cont
|
|
|
4
4
|
export * from '@mui/material';
|
|
5
5
|
import { ThemeProviderProps } from '@mui/material/styles/ThemeProvider';
|
|
6
6
|
import * as React from 'react';
|
|
7
|
-
import React__default, { ReactNode, ElementType } from 'react';
|
|
7
|
+
import React__default, { ReactNode, ElementType, SyntheticEvent } from 'react';
|
|
8
8
|
import { ButtonProps as ButtonProps$1 } from '@mui/material/Button';
|
|
9
9
|
import { TypographyProps as TypographyProps$1 } from '@mui/material/Typography';
|
|
10
10
|
import { DatePickerProps, DateTimePickerProps } from '@mui/x-date-pickers-pro';
|
|
@@ -484,6 +484,14 @@ type BannerProps = {
|
|
|
484
484
|
*/
|
|
485
485
|
onDismiss?: ButtonProps['onClick'];
|
|
486
486
|
title: string;
|
|
487
|
+
/**
|
|
488
|
+
* The size(height) of the banner.
|
|
489
|
+
* - 'default': Standard banner height.
|
|
490
|
+
* - 'slim': Reduced height, intended for use only with the 'inline' variant.
|
|
491
|
+
*
|
|
492
|
+
* Note: 'slim' size has a fixed height of '32px' and should be used exclusively with variant='inline' and probably text ellipsis to ensure proper layout and appearance.
|
|
493
|
+
*/
|
|
494
|
+
size?: 'default' | 'slim';
|
|
487
495
|
} & Omit<AlertProps, 'title' | 'closeText' | 'icon' | 'role' | 'onClose'>;
|
|
488
496
|
/**
|
|
489
497
|
* Documentation: https://up-components.up42.com/?path=/docs/feedback-banner--docs
|
|
@@ -510,6 +518,14 @@ declare const Banner: React__default.ForwardRefExoticComponent<Omit<{
|
|
|
510
518
|
*/
|
|
511
519
|
onDismiss?: ButtonProps['onClick'];
|
|
512
520
|
title: string;
|
|
521
|
+
/**
|
|
522
|
+
* The size(height) of the banner.
|
|
523
|
+
* - 'default': Standard banner height.
|
|
524
|
+
* - 'slim': Reduced height, intended for use only with the 'inline' variant.
|
|
525
|
+
*
|
|
526
|
+
* Note: 'slim' size has a fixed height of '32px' and should be used exclusively with variant='inline' and probably text ellipsis to ensure proper layout and appearance.
|
|
527
|
+
*/
|
|
528
|
+
size?: "default" | "slim" | undefined;
|
|
513
529
|
} & Omit<AlertProps, "title" | "role" | "onClose" | "closeText" | "icon">, "ref"> & React__default.RefAttributes<unknown>>;
|
|
514
530
|
|
|
515
531
|
type ContactBoxProps = {
|
|
@@ -5096,7 +5112,7 @@ declare const Divider: React__default.ForwardRefExoticComponent<Omit<Omit<Divide
|
|
|
5096
5112
|
}, "ref"> & React__default.RefAttributes<unknown>>;
|
|
5097
5113
|
|
|
5098
5114
|
type FeatureCardProps = CardProps & {
|
|
5099
|
-
|
|
5115
|
+
bannerProps?: Omit<BannerProps, 'title' | 'variant'>;
|
|
5100
5116
|
header?: {
|
|
5101
5117
|
title: ReactNode;
|
|
5102
5118
|
actions?: ReactNode;
|
|
@@ -5122,7 +5138,7 @@ type FeatureCardProps = CardProps & {
|
|
|
5122
5138
|
*/
|
|
5123
5139
|
hovered?: boolean;
|
|
5124
5140
|
};
|
|
5125
|
-
declare const FeatureCard: ({ children, header, footer,
|
|
5141
|
+
declare const FeatureCard: ({ children, header, footer, bannerProps, isSelectable, selected, isHoverable, hovered, ...props }: FeatureCardProps) => React__default.JSX.Element;
|
|
5126
5142
|
|
|
5127
5143
|
type FeatureCardHeaderProps = {
|
|
5128
5144
|
header: string;
|
|
@@ -5216,6 +5232,31 @@ type EditTagsButtonProps = {
|
|
|
5216
5232
|
};
|
|
5217
5233
|
declare function EditTagsButton({ tags, tagPool, onSave, label, tooltip }: EditTagsButtonProps): React__default.JSX.Element;
|
|
5218
5234
|
|
|
5235
|
+
type FeatureFlagCheckboxProps = {
|
|
5236
|
+
label: string;
|
|
5237
|
+
checked: boolean;
|
|
5238
|
+
/**
|
|
5239
|
+
* Defines if the component should be rendered or not.
|
|
5240
|
+
* Use this prop to indicate if the application is in a development environment.
|
|
5241
|
+
*/
|
|
5242
|
+
isDevelopment: boolean;
|
|
5243
|
+
onChange: (event: SyntheticEvent, checked: boolean) => void;
|
|
5244
|
+
onClose?: () => void;
|
|
5245
|
+
};
|
|
5246
|
+
/**
|
|
5247
|
+
*
|
|
5248
|
+
* Development-only feature toggle component (not for production use).
|
|
5249
|
+
*
|
|
5250
|
+
* **Important**: This component is intended *strictly* for development environments and should not be included in production builds.
|
|
5251
|
+
*
|
|
5252
|
+
* The `FeatureFlagCheckbox` is a temporary UI component used by developers to enable or disable feature flags manually. It renders a labeled checkbox and an optional close button to dismiss the control.
|
|
5253
|
+
*
|
|
5254
|
+
* **Note**: The component is rendered only when the `isDevelopment` prop is set to `true`. It is the responsibility of the consuming application to ensure the provided value is correct so that is only rendered in non-production environments.
|
|
5255
|
+
*
|
|
5256
|
+
* Documentation: https://up-components.up42.com/?path=/docs/development-featureflagcheckbox--docs
|
|
5257
|
+
*/
|
|
5258
|
+
declare function FeatureFlagCheckbox({ label, checked, isDevelopment, onChange, onClose }: FeatureFlagCheckboxProps): React__default.JSX.Element;
|
|
5259
|
+
|
|
5219
5260
|
type DocumentationPopoverProps = {
|
|
5220
5261
|
title: string;
|
|
5221
5262
|
children: React__default.ReactNode;
|
|
@@ -5488,5 +5529,5 @@ type ContextState = {
|
|
|
5488
5529
|
*/
|
|
5489
5530
|
declare const useAlert: () => ContextState;
|
|
5490
5531
|
|
|
5491
|
-
export { Alert, Avatar, Badge, Banner, Button, Checkbox, CodeInline, CodeSnippet, ContactBox, ControlButton, CopyButton, DataGrid, DateTime, Divider, DocumentationPopover, EditTagsButton, EmptyState, FeatureCard, FeatureCardHeader, FeatureCardHeaderActions, 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, Typography, UpComponentsProvider, capitalize, copyToClipboard, formatDate, formatFileSize, formatNumber, theme, useAlert, useCursorPagination, useDebounce, useQueryParams, useRemotePagination, useToggle };
|
|
5492
|
-
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, 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, TagProps, TagsListProps, TypographyProps, UseToggleResult };
|
|
5532
|
+
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, Typography, UpComponentsProvider, capitalize, copyToClipboard, formatDate, formatFileSize, formatNumber, theme, useAlert, useCursorPagination, useDebounce, useQueryParams, useRemotePagination, useToggle };
|
|
5533
|
+
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, TagProps, TagsListProps, TypographyProps, UseToggleResult };
|