@up42/up-components 5.2.1 → 5.3.0

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

@@ -1,3 +1,4 @@
+import { ButtonProps, SxProps, Theme } from '@mui/material';
 import React from 'react';
 export type EditTagsButtonProps = {
     tags: string[];
@@ -6,5 +7,10 @@ export type EditTagsButtonProps = {
     label?: string;
     tooltip?: string;
     isUpdatingTags?: boolean;
+    sx?: SxProps<Theme>;
+    variant?: ButtonProps['variant'];
 };
-export declare function EditTagsButton({ tags, tagPool, onSave, label, tooltip, isUpdatingTags }: EditTagsButtonProps): React.JSX.Element;
+/**
+ * Documentation: https://up-components.up42.com/?path=/docs/data-entry-edittagsbutton--docs
+ */
+export declare const EditTagsButton: React.ForwardRefExoticComponent<EditTagsButtonProps & React.RefAttributes<unknown>>;

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

@@ -1,4 +1,5 @@
 import React from 'react';
-export declare const MoreTags: ({ tags }: {
+export declare const MoreTags: React.MemoExoticComponent<({ tags, handleClick, }: {
     tags: string[];
-}) => React.JSX.Element | null;
+    handleClick?: ((e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void) | undefined;
+}) => React.JSX.Element | null>;

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

@@ -1,8 +1,11 @@
 import React from 'react';
+import { TagItem } from './TagsList';
 type TagsProps = {
-    tags: string[];
+    tags: TagItem[];
     setHiddenTagCount: (count: number) => void;
     hiddenTagCount: number;
+    parentContainerRef: React.MutableRefObject<HTMLDivElement | null>;
+    hasEditButton: boolean;
 };
-export declare const Tags: ({ tags, setHiddenTagCount, hiddenTagCount }: TagsProps) => React.JSX.Element;
+export declare const Tags: React.MemoExoticComponent<({ tags, setHiddenTagCount, hiddenTagCount, parentContainerRef, hasEditButton }: TagsProps) => React.JSX.Element>;
 export {};

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

@@ -1,7 +1,15 @@
 import React from 'react';
+import { SxProps, Theme } from '@mui/material';
+export type TagItem = {
+    label: string;
+    onDelete?: (e: unknown) => void;
+};
 export type TagsListProps = {
-    tags: string[];
+    tags: string[] | TagItem[];
     onTagsUpdate?: (tags: string[]) => Promise<void>;
     isUpdatingTags?: boolean;
+    sx?: SxProps<Theme>;
+    editTagsButtonSx?: SxProps<Theme>;
+    onMoreTagsClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
 };
-export declare const TagsList: ({ tags: tagsProp, onTagsUpdate, isUpdatingTags }: TagsListProps) => React.JSX.Element;
+export declare const TagsList: React.MemoExoticComponent<({ tags, onTagsUpdate, isUpdatingTags, sx, editTagsButtonSx, onMoreTagsClick, }: TagsListProps) => React.JSX.Element>;

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

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { TagItem } from './TagsList';
+type UseCalculateTagsOverflowProps = {
+    tags: TagItem[];
+    parentContainerRef: React.MutableRefObject<HTMLDivElement | null>;
+    tagsMeasurementRef: React.MutableRefObject<HTMLDivElement | null>;
+    hiddenTagCount: number;
+    setHiddenTagCount: (count: number) => void;
+    hasEditButton: boolean;
+};
+type UseCalculateTagsOverflowReturn = {
+    measurementContainerWidth: number;
+    visibleTags: TagItem[];
+};
+export declare const TAG_GAP: string;
+/**
+ * @description Custom hook that handles the business logic for calculating tag overflow and visibility.
+ *
+ * This hook manages:
+ * - Container width measurement for responsive behavior
+ * - Hidden tags calculation based on available space
+ * - State management for measurement and visibility
+ * - Window and container resize handling with debounced ResizeObserver handler
+ *
+ * @param tags - The array of tag objects to display
+ * @param parentContainerRef - Reference to the parent container for width measurement
+ * @param tagsMeasurementRef - Reference to the measurement container for width measurement
+ * @param hiddenTagCount - Current number of hidden tags
+ * @param setHiddenTagCount - Function to update the number of hidden tags
+ * @param hasEditButton - Whether an edit button is present (affects space calculation)
+ * @returns Object containing the values defined in the UseTagsOverflowReturn type
+ */
+export declare const useCalculateTagsOverflow: ({ tags, setHiddenTagCount, hiddenTagCount, parentContainerRef, tagsMeasurementRef, hasEditButton, }: UseCalculateTagsOverflowProps) => UseCalculateTagsOverflowReturn;
+export {};

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

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

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

@@ -49,7 +49,7 @@ export { FeatureCard, type FeatureCardProps } from './components/FeatureCard/Fea
 export { FeatureCardHeader, type FeatureCardHeaderProps } from './components/FeatureCardHeader/FeatureCardHeader';
 export { FeatureCardHeaderActions, type IconAction, type MenuAction, type FeatureCardHeaderActionsProps, } from './components/FeatureCardHeaderActions/FeatureCardHeaderActions';
 export { StatusLight, type StatusLightProps } from './components/StatusLight/StatusLight';
-export { TagsList, type TagsListProps } from './components/TagsList/TagsList';
+export { TagsList, type TagsListProps, type TagItem } 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';

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { default as tokens } from '@up42/design-system-tokens/dist/json/tokens.json';
 import * as _mui_material from '@mui/material';
-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, SnackbarProps } from '@mui/material';
+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';
 export * from '@mui/material';
 import { ThemeProviderProps } from '@mui/material/styles/ThemeProvider';
 import * as React from 'react';
@@ -5321,12 +5321,19 @@ type StatusLightProps = {
  */
 declare const StatusLight: ({ label, variant, color, size, sx, }: StatusLightProps) => React__default.JSX.Element;
 
+type TagItem = {
+    label: string;
+    onDelete?: (e: unknown) => void;
+};
 type TagsListProps = {
-    tags: string[];
+    tags: string[] | TagItem[];
     onTagsUpdate?: (tags: string[]) => Promise<void>;
     isUpdatingTags?: boolean;
+    sx?: SxProps<Theme>;
+    editTagsButtonSx?: SxProps<Theme>;
+    onMoreTagsClick?: (e: React__default.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
 };
-declare const TagsList: ({ tags: tagsProp, onTagsUpdate, isUpdatingTags }: TagsListProps) => React__default.JSX.Element;
+declare const TagsList: React__default.MemoExoticComponent<({ tags, onTagsUpdate, isUpdatingTags, sx, editTagsButtonSx, onMoreTagsClick, }: TagsListProps) => React__default.JSX.Element>;
 
 type EditTagsButtonProps = {
     tags: string[];
@@ -5335,8 +5342,13 @@ type EditTagsButtonProps = {
     label?: string;
     tooltip?: string;
     isUpdatingTags?: boolean;
+    sx?: SxProps<Theme>;
+    variant?: ButtonProps$2['variant'];
 };
-declare function EditTagsButton({ tags, tagPool, onSave, label, tooltip, isUpdatingTags }: EditTagsButtonProps): React__default.JSX.Element;
+/**
+ * Documentation: https://up-components.up42.com/?path=/docs/data-entry-edittagsbutton--docs
+ */
+declare const EditTagsButton: React__default.ForwardRefExoticComponent<EditTagsButtonProps & React__default.RefAttributes<unknown>>;
 
 type FeatureFlagCheckboxProps = {
     label: string;
@@ -5636,4 +5648,4 @@ 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, 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 };
+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, TypographyProps, UseToggleResult };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@up42/up-components",
-  "version": "5.2.1",
+  "version": "5.3.0",
   "description": "UP42 Component Library",
   "author": "Axel Fuhrmann axel.fuhrmann@up42.com",
   "license": "ISC",
@@ -131,4 +131,4 @@
       "tmp": ">=0.2.4"
     }
   }
-}
+}