@up42/up-components 5.2.1 → 5.3.0

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/types/components/TagsList/useCalculateTagsOverflow.test.d.ts

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

package/dist/cjs/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';