@up42/up-components 5.0.0-tokens.2 → 5.0.0-tokens.3

package/dist/esm/types/components/Banner/Banner.d.ts

@@ -23,6 +23,14 @@ export type BannerProps = {
      */
     onDismiss?: ButtonProps['onClick'];
     title: string;
+    /**
+     * The size(height) of the banner.
+     * - 'default': Standard banner height.
+     * - 'slim': Reduced height, intended for use only with the 'inline' variant.
+     *
+     * 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.
+     */
+    size?: 'default' | 'slim';
 } & Omit<AlertProps, 'title' | 'closeText' | 'icon' | 'role' | 'onClose'>;
 /**
  * Documentation: https://up-components.up42.com/?path=/docs/feedback-banner--docs
@@ -49,4 +57,12 @@ export declare const Banner: React.ForwardRefExoticComponent<Omit<{
      */
     onDismiss?: ButtonProps['onClick'];
     title: string;
+    /**
+     * The size(height) of the banner.
+     * - 'default': Standard banner height.
+     * - 'slim': Reduced height, intended for use only with the 'inline' variant.
+     *
+     * 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.
+     */
+    size?: "default" | "slim" | undefined;
 } & Omit<AlertProps, "title" | "role" | "onClose" | "closeText" | "icon">, "ref"> & React.RefAttributes<unknown>>;

package/dist/esm/types/components/EditTagsButton/EditTagsButton.d.ts

@@ -2,8 +2,9 @@ import React from 'react';
 export type EditTagsButtonProps = {
     tags: string[];
     tagPool?: string[];
-    onSave: (tags: string[]) => void;
+    onSave: (tags: string[]) => Promise<void>;
     label?: string;
     tooltip?: string;
+    isUpdatingTags?: boolean;
 };
-export declare function EditTagsButton({ tags, tagPool, onSave, label, tooltip }: EditTagsButtonProps): React.JSX.Element;
+export declare function EditTagsButton({ tags, tagPool, onSave, label, tooltip, isUpdatingTags }: EditTagsButtonProps): React.JSX.Element;

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

@@ -1,7 +1,8 @@
 import React, { ReactNode } from 'react';
 import { CardProps } from '@mui/material';
+import { BannerProps } from '../Banner/Banner';
 export type FeatureCardProps = CardProps & {
-    banner?: ReactNode;
+    bannerProps?: Omit<BannerProps, 'title' | 'variant'>;
     header?: {
         title: ReactNode;
         actions?: ReactNode;
@@ -27,4 +28,4 @@ export type FeatureCardProps = CardProps & {
      */
     hovered?: boolean;
 };
-export declare const FeatureCard: ({ children, header, footer, banner, isSelectable, selected, isHoverable, hovered, ...props }: FeatureCardProps) => React.JSX.Element;
+export declare const FeatureCard: ({ children, header, footer, bannerProps, isSelectable, selected, isHoverable, hovered, ...props }: FeatureCardProps) => React.JSX.Element;

package/dist/esm/types/components/FeatureFlagCheckbox/FeatureFlagCheckbox.d.ts

@@ -0,0 +1,25 @@
+import React, { SyntheticEvent } from 'react';
+export type FeatureFlagCheckboxProps = {
+    label: string;
+    checked: boolean;
+    /**
+     * Defines if the component should be rendered or not.
+     * Use this prop to indicate if the application is in a development environment.
+     */
+    isDevelopment: boolean;
+    onChange: (event: SyntheticEvent, checked: boolean) => void;
+    onClose?: () => void;
+};
+/**
+ *
+ * Development-only feature toggle component (not for production use).
+ *
+ * **Important**: This component is intended *strictly* for development environments and should not be included in production builds.
+ *
+ * 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.
+ *
+ * **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.
+ *
+ * Documentation: https://up-components.up42.com/?path=/docs/development-featureflagcheckbox--docs
+ */
+export declare function FeatureFlagCheckbox({ label, checked, isDevelopment, onChange, onClose }: FeatureFlagCheckboxProps): React.JSX.Element;

package/dist/esm/types/components/FeatureFlagCheckbox/FeatureFlagCheckbox.test.d.ts

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

package/dist/esm/types/components/TagsList/TagsList.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export type TagsListProps = {
     tags: string[];
-    onTagsChange?: (tags: string[]) => void;
+    onTagsUpdate?: (tags: string[]) => Promise<void>;
+    isUpdatingTags?: boolean;
 };
-export declare const TagsList: ({ tags: tagsProp, onTagsChange }: TagsListProps) => React.JSX.Element;
+export declare const TagsList: ({ tags: tagsProp, onTagsUpdate, isUpdatingTags }: TagsListProps) => React.JSX.Element;

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

@@ -51,6 +51,7 @@ export { FeatureCardHeaderActions, type IconAction, type MenuAction, type Featur
 export { StatusLight, type StatusLightProps } from './components/StatusLight/StatusLight';
 export { TagsList, type TagsListProps } from './components/TagsList/TagsList';
 export { EditTagsButton, type EditTagsButtonProps } from './components/EditTagsButton/EditTagsButton';
+export { FeatureFlagCheckbox, type FeatureFlagCheckboxProps, } from './components/FeatureFlagCheckbox/FeatureFlagCheckbox';
 export { DocumentationPopover, type DocumentationPopoverProps, } from './components/DocumentationPopover/DocumentationPopover';
 export { CodeInline, type CodeInlineProps } from './components/CodeInline/CodeInline';
 export { CodeSnippet, type CodeSnippetProps, type CodeSnippetItemProps } from './components/CodeSnippet/CodeSnippet';

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import { BoxProps, TextFieldProps, AvatarProps as AvatarProps$1, GridProps, Cont
 export * from '@mui/material';
 import { ThemeProviderProps } from '@mui/material/styles/ThemeProvider';
 import * as React from 'react';
-import React__default, { ReactNode, ElementType } from 'react';
+import React__default, { ReactNode, ElementType, SyntheticEvent } from 'react';
 import { ButtonProps as ButtonProps$1 } from '@mui/material/Button';
 import { TypographyProps as TypographyProps$1 } from '@mui/material/Typography';
 import { DatePickerProps, DateTimePickerProps } from '@mui/x-date-pickers-pro';
@@ -486,6 +486,14 @@ type BannerProps = {
      */
     onDismiss?: ButtonProps['onClick'];
     title: string;
+    /**
+     * The size(height) of the banner.
+     * - 'default': Standard banner height.
+     * - 'slim': Reduced height, intended for use only with the 'inline' variant.
+     *
+     * 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.
+     */
+    size?: 'default' | 'slim';
 } & Omit<AlertProps, 'title' | 'closeText' | 'icon' | 'role' | 'onClose'>;
 /**
  * Documentation: https://up-components.up42.com/?path=/docs/feedback-banner--docs
@@ -512,6 +520,14 @@ declare const Banner: React__default.ForwardRefExoticComponent<Omit<{
      */
     onDismiss?: ButtonProps['onClick'];
     title: string;
+    /**
+     * The size(height) of the banner.
+     * - 'default': Standard banner height.
+     * - 'slim': Reduced height, intended for use only with the 'inline' variant.
+     *
+     * 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.
+     */
+    size?: "default" | "slim" | undefined;
 } & Omit<AlertProps, "title" | "role" | "onClose" | "closeText" | "icon">, "ref"> & React__default.RefAttributes<unknown>>;
 
 type ContactBoxProps = {
@@ -5127,7 +5143,7 @@ declare const Divider: React__default.ForwardRefExoticComponent<Omit<Omit<Divide
 }, "ref"> & React__default.RefAttributes<unknown>>;
 
 type FeatureCardProps = CardProps & {
-    banner?: ReactNode;
+    bannerProps?: Omit<BannerProps, 'title' | 'variant'>;
     header?: {
         title: ReactNode;
         actions?: ReactNode;
@@ -5153,7 +5169,7 @@ type FeatureCardProps = CardProps & {
      */
     hovered?: boolean;
 };
-declare const FeatureCard: ({ children, header, footer, banner, isSelectable, selected, isHoverable, hovered, ...props }: FeatureCardProps) => React__default.JSX.Element;
+declare const FeatureCard: ({ children, header, footer, bannerProps, isSelectable, selected, isHoverable, hovered, ...props }: FeatureCardProps) => React__default.JSX.Element;
 
 type FeatureCardHeaderProps = {
     header: string;
@@ -5234,18 +5250,45 @@ declare const StatusLight: ({ label, variant, color, size, sx, }: StatusLightPro
 
 type TagsListProps = {
     tags: string[];
-    onTagsChange?: (tags: string[]) => void;
+    onTagsUpdate?: (tags: string[]) => Promise<void>;
+    isUpdatingTags?: boolean;
 };
-declare const TagsList: ({ tags: tagsProp, onTagsChange }: TagsListProps) => React__default.JSX.Element;
+declare const TagsList: ({ tags: tagsProp, onTagsUpdate, isUpdatingTags }: TagsListProps) => React__default.JSX.Element;
 
 type EditTagsButtonProps = {
     tags: string[];
     tagPool?: string[];
-    onSave: (tags: string[]) => void;
+    onSave: (tags: string[]) => Promise<void>;
     label?: string;
     tooltip?: string;
+    isUpdatingTags?: boolean;
+};
+declare function EditTagsButton({ tags, tagPool, onSave, label, tooltip, isUpdatingTags }: EditTagsButtonProps): React__default.JSX.Element;
+
+type FeatureFlagCheckboxProps = {
+    label: string;
+    checked: boolean;
+    /**
+     * Defines if the component should be rendered or not.
+     * Use this prop to indicate if the application is in a development environment.
+     */
+    isDevelopment: boolean;
+    onChange: (event: SyntheticEvent, checked: boolean) => void;
+    onClose?: () => void;
 };
-declare function EditTagsButton({ tags, tagPool, onSave, label, tooltip }: EditTagsButtonProps): React__default.JSX.Element;
+/**
+ *
+ * Development-only feature toggle component (not for production use).
+ *
+ * **Important**: This component is intended *strictly* for development environments and should not be included in production builds.
+ *
+ * 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.
+ *
+ * **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.
+ *
+ * Documentation: https://up-components.up42.com/?path=/docs/development-featureflagcheckbox--docs
+ */
+declare function FeatureFlagCheckbox({ label, checked, isDevelopment, onChange, onClose }: FeatureFlagCheckboxProps): React__default.JSX.Element;
 
 type DocumentationPopoverProps = {
     title: string;
@@ -5519,5 +5562,5 @@ type ContextState = {
  */
 declare const useAlert: () => ContextState;
 
-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 };
-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 };
+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 };
+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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@up42/up-components",
-  "version": "5.0.0-tokens.2",
+  "version": "5.0.0-tokens.3",
   "description": "UP42 Component Library",
   "author": "Axel Fuhrmann axel.fuhrmann@up42.com",
   "license": "ISC",