@tracktor/design-system 4.28.0 → 4.29.0

package/dist/src/components/DataDisplay/Kanban/Kanban.d.ts

@@ -1,5 +1,6 @@
-import { ChipProps } from '@mui/material';
-import { CSSProperties, MouseEvent, ReactElement, ReactNode } from 'react';
+import { CSSProperties } from 'react';
+import { KanbanDataItemProps, KanbanProps } from './types';
+export * from './types';
 type KanbanItemProps = {
     index: number;
     style: CSSProperties;
@@ -10,132 +11,6 @@ type KanbanItemProps = {
         items: KanbanDataItemProps[];
     };
 };
-export declare const VirtualizedKanbanItem: ({ index, style, data }: KanbanItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export type KanbanChipFormat = {
-    color: ChipProps["color"];
-    variant?: ChipProps["variant"];
-};
-export type HeaderColumnChip = Record<string, KanbanChipFormat>;
-/**
- * Mapping of booking statuses to their corresponding chip variants and colors.
- * This is used to style the status chips in the Kanban columns.
- */
-export declare const defaultKanbanChip: Record<string, KanbanChipFormat>;
-/**
- * Props for configuring the empty state of the Kanban component.
- */
-export interface EmptyStateProps {
-    title: string;
-    description?: string;
-    buttonText?: string;
-    onButtonClick?: () => void;
-}
-/**
- * Props for each subtitle item in a Kanban card.
- */
-export interface SubtitleDataItemProps {
-    text: ReactNode;
-    LeftIcon?: ReactElement;
-    onClick?: (event: MouseEvent<HTMLElement>) => void;
-}
-/**
- * Props for each item in a Kanban column.
- * Each item represents a card in the Kanban board.
- */
-export interface KanbanDataItemProps {
-    id: string;
-    image: string | undefined;
-    imageTitle?: string;
-    secondaryImage?: string;
-    secondaryImageText?: string;
-    subtitles?: SubtitleDataItemProps[];
-    tag: string;
-    title: string;
-    Footer?: ReactElement;
-    Alert?: ReactElement;
-    RightFooter?: ReactElement;
-    headerTitle?: string;
-}
-/**
- * Props for each column in the Kanban board.
- * Each column contains multiple Kanban items.
- */
-export interface KanbanDataProps {
-    name: string;
-    label?: string;
-    count?: number;
-    isLoading?: boolean;
-    isFetching?: boolean;
-    isFetched?: boolean;
-    items: KanbanDataItemProps[];
-}
-export interface KanbanProps {
-    /**
-     * The height of the Kanban component.
-     */
-    height?: string | number;
-    /**
-     * The width of each Kanban list.
-     */
-    listWidth?: string | number;
-    /**
-     * Disables the count of items in the Kanban list.
-     */
-    disableCount?: boolean;
-    /**
-     * Total number of items in the list. Note that only a few items will be rendered and displayed at a time.
-     */
-    itemCount?: number;
-    /**
-     * The number of items to display per page.
-     */
-    itemPerPage?: number;
-    /**
-     * Variant for the chip column.
-     */
-    chipColumVariant?: "filled" | "outlined";
-    /**
-     * If true, the Kanban column will display a dot indicator in the chip.
-     */
-    chipColumDot?: boolean;
-    /**
-     * Status of the chip in the Kanban column.
-     */
-    chipStatus?: string;
-    /**
-     * Function to load more items when the user scrolls to the end of the list.
-     * @param startIndex
-     * @param stopIndex
-     * @param status
-     */
-    loadMoreItems?: (startIndex: number, stopIndex: number, status?: string) => Promise<void> | void;
-    /**
-     * Function triggered when an item is clicked.
-     * @param id
-     */
-    onClickItem?: (id: string) => void;
-    /**
-     * Trigger when column is visible
-     * @param listName
-     */
-    onColumnInView?: (name: string) => void;
-    /**
-     * The ID of the currently active item.
-     */
-    activeItemId?: string;
-    /**
-     * Custom mapping of booking statuses to chip variants/colors.
-     * Keys can be any string, but the value must be { color, variant? }.
-     */
-    headerColumnChip?: HeaderColumnChip;
-    /**
-     * The Kanban data to be displayed.
-     */
-    data: KanbanDataProps[];
-    /**
-     * Optional empty state configuration.
-     */
-    emptyState?: ReactElement | EmptyStateProps;
-}
-declare const Kanban: ({ data, onClickItem, disableCount, onColumnInView, emptyState, chipColumVariant, chipStatus, headerColumnChip, activeItemId, chipColumDot, height, itemPerPage, listWidth, itemCount, loadMoreItems, }: KanbanProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const VirtualizedKanbanItem: ({ index, data }: KanbanItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const Kanban: ({ data, onClickItem, disableCount, onColumnInView, emptyState, chipColumVariant, chipStatus, headerColumnChip, activeItemId, variant, chipColumDot, height, itemPerPage, listWidth, itemCount, loadMoreItems, }: KanbanProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Kanban;

package/dist/src/components/DataDisplay/Kanban/components/ChipStatusKanban.d.ts

@@ -1,6 +1,6 @@
 import { ChipProps } from '@mui/material';
 import { ReactElement } from 'react';
-import { defaultKanbanChip, HeaderColumnChip } from '../Kanban';
+import { defaultKanbanChip, HeaderColumnChip } from '../types';
 interface ChipStatusProps {
     status?: keyof typeof defaultKanbanChip | keyof HeaderColumnChip | string;
     size?: ChipProps["size"];

package/dist/src/components/DataDisplay/Kanban/components/EmptyStateOverlay.d.ts

@@ -1,4 +1,4 @@
-import { KanbanProps } from '../Kanban';
+import { KanbanProps } from '../types';
 declare const EmptyStateOverlay: ({ emptyState }: {
     emptyState?: KanbanProps["emptyState"];
 }) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/src/components/DataDisplay/Kanban/components/KanbanCard.d.ts

@@ -0,0 +1,10 @@
+import { KanbanCardVariant, KanbanDataItemProps } from '../types';
+export interface KanbanCardProps {
+    item: KanbanDataItemProps;
+    activeItemId: string;
+    gutterSize: number;
+    onClickItem?: (id: string) => void;
+    variant?: KanbanCardVariant;
+}
+declare const KanbanCard: import('react').MemoExoticComponent<({ item, activeItemId, gutterSize, onClickItem, variant }: KanbanCardProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export default KanbanCard;

package/dist/src/components/DataDisplay/Kanban/components/KanbanColumn.d.ts

@@ -0,0 +1,25 @@
+import { HeaderColumnChip, KanbanCardVariant, KanbanDataItemProps } from '../types';
+export interface KanbanColumnProps {
+    name: string;
+    label?: string;
+    count?: number;
+    items: KanbanDataItemProps[];
+    chipColumVariant?: "filled" | "outlined";
+    chipColumDot?: boolean;
+    chipStatus?: string;
+    isLoading?: boolean;
+    isFetching?: boolean;
+    gutterSize: number;
+    itemPerPage?: number;
+    listWidth: number | string;
+    disableCount?: boolean;
+    itemCount: number;
+    activeItemId: string;
+    onClickItem?: (id: string) => void;
+    loadMoreItems?: (startIndex: number, stopIndex: number, status?: string) => void;
+    onInView?: (name: string) => void;
+    headerColumnChip?: HeaderColumnChip;
+    variant?: KanbanCardVariant;
+}
+declare const KanbanColumn: import('react').MemoExoticComponent<({ name, label, count, items, isFetching, isLoading, gutterSize, itemPerPage, listWidth, disableCount, loadMoreItems, itemCount, activeItemId, onClickItem, onInView, chipColumVariant, chipColumDot, chipStatus, headerColumnChip, variant, }: KanbanColumnProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export default KanbanColumn;

package/dist/src/components/DataDisplay/Kanban/hooks/useDragScroll.d.ts

@@ -1,6 +1,5 @@
 import { MouseEvent, RefObject } from 'react';
 declare const useDragScroll: (ref: RefObject<HTMLDivElement | null>) => {
-    isDragging: boolean;
     onMouseDown: (e: MouseEvent<HTMLElement>) => void;
     onMouseMove: (e: MouseEvent<HTMLElement>) => void;
     onMouseUp: () => void;

package/dist/src/components/DataDisplay/Kanban/types.d.ts

@@ -0,0 +1,133 @@
+import { ChipProps } from '@mui/material';
+import { MouseEvent, ReactElement, ReactNode } from 'react';
+export type KanbanCardVariant = "primary" | "secondary";
+export type KanbanChipFormat = {
+    color: ChipProps["color"];
+    variant?: ChipProps["variant"];
+};
+export type HeaderColumnChip = Record<string, KanbanChipFormat>;
+/**
+ * Mapping of booking statuses to their corresponding chip variants and colors.
+ * This is used to style the status chips in the Kanban columns.
+ */
+export declare const defaultKanbanChip: Record<string, KanbanChipFormat>;
+/**
+ * Props for configuring the empty state of the Kanban component.
+ */
+export interface EmptyStateProps {
+    title: string;
+    description?: string;
+    buttonText?: string;
+    onButtonClick?: () => void;
+}
+/**
+ * Props for each subtitle item in a Kanban card.
+ */
+export interface SubtitleDataItemProps {
+    text: ReactNode;
+    LeftIcon?: ReactElement;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+}
+/**
+ * Props for each item in a Kanban column.
+ * Each item represents a card in the Kanban board.
+ */
+export interface KanbanDataItemProps {
+    id: string;
+    image: string | undefined;
+    imageTitle?: string;
+    headerTitle?: string;
+    title: string;
+    secondaryImage?: string;
+    secondaryImageText?: string;
+    subtitles?: SubtitleDataItemProps[];
+    tag: string;
+    Footer?: ReactElement;
+    RightFooter?: ReactElement;
+}
+/**
+ * Props for each column in the Kanban board.
+ * Each column contains multiple Kanban items.
+ */
+export interface KanbanDataProps {
+    name: string;
+    label?: string;
+    count?: number;
+    isLoading?: boolean;
+    isFetching?: boolean;
+    isFetched?: boolean;
+    items: KanbanDataItemProps[];
+}
+export interface KanbanProps {
+    /**
+     * The height of the Kanban component.
+     */
+    height?: string | number;
+    /**
+     * The width of each Kanban list.
+     */
+    listWidth?: string | number;
+    /**
+     * Disables the count of items in the Kanban list.
+     */
+    disableCount?: boolean;
+    /**
+     * Total number of items in the list. Note that only a few items will be rendered and displayed at a time.
+     */
+    itemCount?: number;
+    /**
+     * The number of items to display per page.
+     */
+    itemPerPage?: number;
+    /**
+     * Variant for the chip column.
+     */
+    chipColumVariant?: "filled" | "outlined";
+    /**
+     * If true, the Kanban column will display a dot indicator in the chip.
+     */
+    chipColumDot?: boolean;
+    /**
+     * Status of the chip in the Kanban column.
+     */
+    chipStatus?: string;
+    /**
+     * Function to load more items when the user scrolls to the end of the list.
+     * @param startIndex
+     * @param stopIndex
+     * @param status
+     */
+    loadMoreItems?: (startIndex: number, stopIndex: number, status?: string) => Promise<void> | void;
+    /**
+     * Function triggered when an item is clicked.
+     * @param id
+     */
+    onClickItem?: (id: string) => void;
+    /**
+     * Trigger when column is visible
+     * @param listName
+     */
+    onColumnInView?: (name: string) => void;
+    /**
+     * The ID of the currently active item.
+     */
+    activeItemId?: string;
+    /**
+     * Custom mapping of booking statuses to chip variants/colors.
+     * Keys can be any string, but the value must be { color, variant? }.
+     */
+    headerColumnChip?: HeaderColumnChip;
+    /**
+     * The Kanban data to be displayed.
+     */
+    data: KanbanDataProps[];
+    /**
+     * Variant of the Kanban cards.
+     * @default "primary"
+     */
+    variant?: KanbanCardVariant;
+    /**
+     * Optional empty state configuration.
+     */
+    emptyState?: ReactElement | EmptyStateProps;
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@tracktor/design-system",
   "description": "Tracktor Design System",
   "sideEffects": false,
-  "version": "4.28.0",
+  "version": "4.29.0",
   "license": "ISC",
   "type": "module",
   "types": "./dist/src/main.d.ts",
@@ -83,8 +83,8 @@
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
     "@mui/material": "^7.0.0",
-    "@tanstack/react-virtual": "^3.13.13",
-    "@tracktor/react-utils": "^1.24.0"
+    "@tanstack/react-virtual": "^3.13.23",
+    "@tracktor/react-utils": "^1.28.1"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.0.0",