@up42/up-components 5.2.0 → 5.2.2

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,7 @@ 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;
+export declare function EditTagsButton({ tags, tagPool, onSave, label, tooltip, isUpdatingTags, sx, variant, }: EditTagsButtonProps): React.JSX.Element;

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

@@ -3,6 +3,8 @@ type TagsProps = {
     tags: string[];
     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,11 @@
 import React from 'react';
+import { SxProps, Theme } from '@mui/material';
 export type TagsListProps = {
     tags: string[];
     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,33 @@
+/// <reference types="react" />
+type UseCalculateTagsOverflowProps = {
+    tags: string[];
+    parentContainerRef: React.MutableRefObject<HTMLDivElement | null>;
+    tagsMeasurementRef: React.MutableRefObject<HTMLDivElement | null>;
+    hiddenTagCount: number;
+    setHiddenTagCount: (count: number) => void;
+    hasEditButton: boolean;
+};
+type UseCalculateTagsOverflowReturn = {
+    measurementContainerWidth: number;
+    visibleTags: string[];
+};
+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 strings 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/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';
@@ -5325,8 +5325,11 @@ type TagsListProps = {
     tags: string[];
     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 +5338,10 @@ 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;
+declare function EditTagsButton({ tags, tagPool, onSave, label, tooltip, isUpdatingTags, sx, variant, }: EditTagsButtonProps): React__default.JSX.Element;
 
 type FeatureFlagCheckboxProps = {
     label: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@up42/up-components",
-  "version": "5.2.0",
+  "version": "5.2.2",
   "description": "UP42 Component Library",
   "author": "Axel Fuhrmann axel.fuhrmann@up42.com",
   "license": "ISC",
@@ -125,5 +125,10 @@
       "tag": true
     }
   },
-  "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39"
+  "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39",
+  "pnpm": {
+    "overrides": {
+      "tmp": ">=0.2.4"
+    }
+  }
 }