hrm_ui_lib 3.4.2 → 4.0.1

package/components/TableV2/Table.js

@@ -19,19 +19,19 @@ var ColumnId;
     ColumnId["Actions"] = "actions";
     ColumnId["Expand"] = "expand";
 })(ColumnId || (ColumnId = {}));
-const ExpandColumn = ({ row, expandedRows, onToggle, dataId = '' }) => {
+const ExpandColumn = ({ row, expandedRows, onToggle, dataTestId = '' }) => {
     var _a, _b, _c;
     const hasSubRows = ((_a = row.original) === null || _a === void 0 ? void 0 : _a.subRows) && ((_c = (_b = row.original) === null || _b === void 0 ? void 0 : _b.subRows) === null || _c === void 0 ? void 0 : _c.length) > 0;
     if (!hasSubRows)
         return null;
     return (_jsx(Button, { type: "tertiary", size: "medium", className: classnames('advanced-table__expand-button'), iconProps: {
             Component: expandedRows.has(row.id) ? IconChevronUp : IconChevronDown
-        }, dataId: dataId ? `${dataId}-expand-${row.index}` : '', onClick: (e) => {
+        }, dataTestId: dataTestId ? `${dataTestId}-expand-${row.index}` : '', onClick: (e) => {
             e.stopPropagation();
             onToggle(row.id);
         } }));
 };
-export function Table({ data, dataId = '', columns, isLoading, hasError, isActionsVisible = false, totalCount = 0, emptyTitle, emptySubTitle, emptyIllustration, withSelect = false, withBorder = true, defaultPageIndex, defaultPageSize, defaultHiddenColumns, collapsibleRows = false, renderExpandedContent, renderHeader, renderFooter, onSortChange, onRowClick, tableSettings, onRowSelection, onColumnSizing, onPaginationChange }) {
+export function Table({ data, dataTestId = '', columns, isLoading, hasError, isActionsVisible = false, totalCount = 0, emptyTitle, emptySubTitle, emptyIllustration, withSelect = false, withBorder = true, defaultPageIndex, defaultPageSize, defaultHiddenColumns, collapsibleRows = false, renderExpandedContent, renderHeader, renderFooter, onSortChange, onRowClick, tableSettings, onRowSelection, onColumnSizing, onPaginationChange }) {
     const [expandedRows, setExpandedRows] = useState(new Set());
     const handleToggleRow = useCallback((rowId) => {
         setExpandedRows((prev) => {
@@ -52,7 +52,7 @@ export function Table({ data, dataId = '', columns, isLoading, hasError, isActio
         size: 50,
         minSize: 50,
         maxSize: 50,
-        cell: ({ row }) => (_jsx(ExpandColumn, { row: row, expandedRows: expandedRows, onToggle: handleToggleRow, dataId: dataId })),
+        cell: ({ row }) => (_jsx(ExpandColumn, { row: row, expandedRows: expandedRows, onToggle: handleToggleRow, dataTestId: dataTestId })),
         meta: {
             enableHiding: false,
             enableColumnDragging: false,
@@ -61,10 +61,10 @@ export function Table({ data, dataId = '', columns, isLoading, hasError, isActio
             headerVisible: false,
             enableSorting: false
         }
-    }), [expandedRows, handleToggleRow, dataId]);
+    }), [expandedRows, handleToggleRow, dataTestId]);
     const { table, sensors, handleDragStart, handleDragEnd, handleDragCancel, activeHeader } = useTableControl({
         data,
-        dataId,
+        dataTestId,
         tableSettings,
         columns: collapsibleRows ? [expandColumn, ...columns] : columns,
         withSelect,
@@ -101,26 +101,26 @@ export function Table({ data, dataId = '', columns, isLoading, hasError, isActio
     const skeletonRowSize = useMemo(() => {
         return Array.from({ length: table.getState().pagination.pageSize });
     }, [table.getState().pagination.pageSize]);
-    return (_jsxs("div", { "data-id": dataId, className: classnames('advanced-table', {
+    return (_jsxs("div", { "data-test-id": dataTestId, className: classnames('advanced-table', {
             'with-border': withBorder
-        }), children: [header, _jsx("div", { className: classnames('advanced-table__inner scrollbar scrollbar--horizontal scrollbar--vertical'), children: _jsxs(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDragCancel: handleDragCancel, children: [_jsx("div", { children: _jsx("table", { style: tableStyle, children: !isLoading && (!(data === null || data === void 0 ? void 0 : data.length) || hasError) ? (_jsx(Empty, { mainMessage: emptyTitle, paragraphMessage: emptySubTitle, illustration: emptyIllustration, dataId: dataId ? `${dataId}-empty` : '' })) : (_jsxs(_Fragment, { children: [_jsx("thead", { className: classnames('advanced-table__thead'), children: table.getHeaderGroups().map((headerGroup) => (_jsx("tr", { children: _jsx(SortableContext, { items: headerGroup.headers.map((header) => header.id), strategy: horizontalListSortingStrategy, children: headerGroup.headers.map((header) => {
+        }), children: [header, _jsx("div", { className: classnames('advanced-table__inner scrollbar scrollbar--horizontal scrollbar--vertical'), children: _jsxs(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDragCancel: handleDragCancel, children: [_jsx("div", { children: _jsx("table", { style: tableStyle, children: !isLoading && (!(data === null || data === void 0 ? void 0 : data.length) || hasError) ? (_jsx(Empty, { mainMessage: emptyTitle, paragraphMessage: emptySubTitle, illustration: emptyIllustration, dataTestId: dataTestId ? `${dataTestId}-empty` : '' })) : (_jsxs(_Fragment, { children: [_jsx("thead", { className: classnames('advanced-table__thead'), children: table.getHeaderGroups().map((headerGroup) => (_jsx("tr", { children: _jsx(SortableContext, { items: headerGroup.headers.map((header) => header.id), strategy: horizontalListSortingStrategy, children: headerGroup.headers.map((header) => {
                                                         if (header.id === ColumnId.Actions && !isActionsVisible)
                                                             return null;
-                                                        return (_jsx(ColumnHeader, { pinnedStyles: Object.assign({}, getCommonPinningStyles(header.column)), header: header, dataId: dataId }, header.id));
+                                                        return (_jsx(ColumnHeader, { pinnedStyles: Object.assign({}, getCommonPinningStyles(header.column)), header: header, dataTestId: dataTestId }, header.id));
                                                     }) }) }, headerGroup.id))) }), _jsx("tbody", { children: isLoading
-                                                ? skeletonRowSize.map((_, i) => (_jsx("tr", { "data-id": dataId ? `${dataId}-loader-row-${i}` : '', children: table.getVisibleFlatColumns().map((column) => (_jsx("td", { className: classnames({
+                                                ? skeletonRowSize.map((_, i) => (_jsx("tr", { "data-test-id": dataTestId ? `${dataTestId}-loader-row-${i}` : '', children: table.getVisibleFlatColumns().map((column) => (_jsx("td", { className: classnames({
                                                             'with-checkbox': column.id === ColumnId.Select,
                                                             'pinned-cell': column.getIsPinned(),
                                                             'action-column': column.id === ColumnId.Actions && !isActionsVisible
                                                         }), style: Object.assign({}, getCommonPinningStyles(column)), children: _jsx(Skeleton, {}) }, column.id))) }, `skeleton-row-${i}`)))
-                                                : table.getRowModel().rows.map((row) => (_jsxs(React.Fragment, { children: [_jsx("tr", { className: classnames({ selected: row.getIsSelected() }), "data-id": dataId ? `${dataId}-row-${row.index}` : '', children: row.getVisibleCells().map((cell) => (_jsx("td", { className: classnames({
+                                                : table.getRowModel().rows.map((row) => (_jsxs(React.Fragment, { children: [_jsx("tr", { className: classnames({ selected: row.getIsSelected() }), "data-test-id": dataTestId ? `${dataTestId}-row-${row.index}` : '', children: row.getVisibleCells().map((cell) => (_jsx("td", { className: classnames({
                                                                     'with-checkbox': cell.column.id === ColumnId.Select,
                                                                     'pinned-cell': cell.column.getIsPinned(),
                                                                     'action-column': cell.column.id === ColumnId.Actions && !isActionsVisible,
                                                                     'expand-column': cell.column.id === ColumnId.Expand
-                                                                }), id: cell.id, "data-id": dataId
-                                                                    ? `${dataId}-row-${row.index}-cell-${cell.column.id}`
+                                                                }), id: cell.id, "data-test-id": dataTestId
+                                                                    ? `${dataTestId}-row-${row.index}-cell-${cell.column.id}`
                                                                     : '', onClick: () => handleRowClick(cell.column, row), style: Object.assign({}, getCommonPinningStyles(cell.column)), children: cell.column.id === ColumnId.Actions && !isActionsVisible ? (_jsx("div", { className: classnames('actions-list__right'), children: flexRender(cell.column.columnDef.cell, cell.getContext()) })) : (flexRender(cell.column.columnDef.cell, cell.getContext())) }, cell.id))) }), collapsibleRows &&
                                                             expandedRows.has(row.id) &&
-                                                            renderExpandedContent && (_jsx("tr", { className: classnames('advanced-table__expanded-row'), "data-id": dataId ? `${dataId}-row-${row.index}-expanded` : '', children: _jsx("td", { colSpan: row.getVisibleCells().length, children: renderExpandedContent(row) }) }))] }, row.id))) })] })) }) }), _jsx(DragOverlay, { dropAnimation: null, children: activeHeader && (_jsx("table", { style: { width: activeHeader.getSize() }, children: _jsx("thead", { children: _jsx("tr", { children: _jsx("th", { className: classnames('draggable-col'), style: { width: activeHeader.getSize() }, children: _jsx(Text, { weight: 'bold', children: flexRender(activeHeader.column.columnDef.header, activeHeader.getContext()) }) }) }) }) })) })] }) }), !!data.length && !hasError && footer] }));
+                                                            renderExpandedContent && (_jsx("tr", { className: classnames('advanced-table__expanded-row'), "data-test-id": dataTestId ? `${dataTestId}-row-${row.index}-expanded` : '', children: _jsx("td", { colSpan: row.getVisibleCells().length, children: renderExpandedContent(row) }) }))] }, row.id))) })] })) }) }), _jsx(DragOverlay, { dropAnimation: null, children: activeHeader && (_jsx("table", { style: { width: activeHeader.getSize() }, children: _jsx("thead", { children: _jsx("tr", { children: _jsx("th", { className: classnames('draggable-col'), style: { width: activeHeader.getSize() }, children: _jsx(Text, { weight: 'bold', children: flexRender(activeHeader.column.columnDef.header, activeHeader.getContext()) }) }) }) }) })) })] }) }), !!data.length && !hasError && footer] }));
 }

package/components/TableV2/hooks/useTableControl.d.ts

@@ -1,6 +1,6 @@
 import type { DragEndEvent, DragStartEvent } from '@dnd-kit/core';
 import type { Column, TTableProps } from '../types';
-export declare function useTableControl<TData>({ withSelect, columns, data, dataId, tableSettings, totalCount, defaultPageSize, defaultPageIndex, defaultHiddenColumns, onSortChange, onRowSelection, onColumnSizing, onPaginationChange }: TTableProps<TData>): {
+export declare function useTableControl<TData>({ withSelect, columns, data, dataTestId, tableSettings, totalCount, defaultPageSize, defaultPageIndex, defaultHiddenColumns, onSortChange, onRowSelection, onColumnSizing, onPaginationChange }: TTableProps<TData>): {
     table: import("@tanstack/react-table").Table<TData>;
     activeHeader: import("@tanstack/react-table").Header<TData, unknown> | null | undefined;
     sensors: import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];

package/components/TableV2/hooks/useTableControl.js

@@ -7,7 +7,7 @@ import { arrayMove } from '@dnd-kit/sortable';
 import { loadTableSettings } from '../loadTableSettings';
 import { useTableColumnSettings } from './useTableColumnSettings';
 import { STORAGE_TYPE, TABLE_NAME_PREFIX } from '../constants';
-export function useTableControl({ withSelect, columns, data, dataId = '', tableSettings, totalCount = 0, defaultPageSize = 10, defaultPageIndex = 0, defaultHiddenColumns = [], onSortChange, onRowSelection, onColumnSizing, onPaginationChange }) {
+export function useTableControl({ withSelect, columns, data, dataTestId = '', tableSettings, totalCount = 0, defaultPageSize = 10, defaultPageIndex = 0, defaultHiddenColumns = [], onSortChange, onRowSelection, onColumnSizing, onPaginationChange }) {
     var _a, _b;
     const shouldPersistToStorage = (tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.persistColumnSettings) === STORAGE_TYPE.LOCAL;
     const shouldEmitExternal = (tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.persistColumnSettings) === STORAGE_TYPE.EXTERNAL;
@@ -40,12 +40,12 @@ export function useTableControl({ withSelect, columns, data, dataId = '', tableS
                 enableHiding: false,
                 enableColumnDragging: false,
                 enablePinning: true,
-                header: ({ table }) => (_jsx(IndeterminateCheckbox, { checked: table.getIsAllRowsSelected(), indeterminate: table.getIsSomeRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler(), dataId: dataId ? `${dataId}-select-all` : '' })),
-                cell: ({ row }) => (_jsx(IndeterminateCheckbox, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), indeterminate: row.getIsSomeSelected(), onChange: row.getToggleSelectedHandler(), dataId: dataId ? `${dataId}-row-${row.index}-select` : '' }))
+                header: ({ table }) => (_jsx(IndeterminateCheckbox, { checked: table.getIsAllRowsSelected(), indeterminate: table.getIsSomeRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler(), dataTestId: dataTestId ? `${dataTestId}-select-all` : '' })),
+                cell: ({ row }) => (_jsx(IndeterminateCheckbox, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), indeterminate: row.getIsSomeSelected(), onChange: row.getToggleSelectedHandler(), dataTestId: dataTestId ? `${dataTestId}-row-${row.index}-select` : '' }))
             });
         }
         return columnsList;
-    }, [columns, dataId]);
+    }, [columns, dataTestId]);
     const [columnOrder, setColumnOrder] = useState(((_b = savedSettings.columnOrder) === null || _b === void 0 ? void 0 : _b.length) && savedSettings.columnOrder.length === memoizedColumns.length
         ? savedSettings.columnOrder
         : memoizedColumns.map((column) => column.id));

package/components/TableV2/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 import type { ColumnDef, ColumnSizingState, PaginationState, RowSelectionState, Table, Row } from '@tanstack/react-table';
 import type { ReactNode } from 'react';
 export type TTable<TData> = Table<TData>;

package/components/Text/Text.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { noop } from '../../utils/helpers';
 export const Text = (props) => {
-    const { children, className = '', type = 'primary', size = 'standard', weight = 'regular', lineHeight = 'medium', as: As = 'p', dataId = '', onClick = noop, id = '', title } = props;
-    return (_jsx(As, { id: id, title: title, "data-id": dataId, onClick: onClick, className: classNames('body', size && `body-${size}`, type && `color-${type}`, weight, lineHeight && `lh-${lineHeight}`, className), children: children }));
+    const { children, className = '', type = 'primary', size = 'standard', weight = 'regular', lineHeight = 'medium', as: As = 'p', dataTestId = '', onClick = noop, id = '', title } = props;
+    return (_jsx(As, { id: id, title: title, "data-test-id": dataTestId, onClick: onClick, className: classNames('body', size && `body-${size}`, type && `color-${type}`, weight, lineHeight && `lh-${lineHeight}`, className), children: children }));
 };

package/components/Text/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 import { ElementType, MouseEvent, ReactNode } from 'react';
 type TTextTypes = 'primary' | 'secondary' | 'tertiary' | 'disabled' | 'inverse' | 'selected' | 'brand' | 'danger' | 'warning' | 'success' | 'information' | 'discovery';
 export type TTextSize = 'xxsmall' | 'xsmall' | 'small' | 'standard' | 'medium' | 'large' | 'xlarge';

package/components/Textarea/Textarea.js

@@ -18,7 +18,7 @@ import classNames from 'classnames';
 import IconCheckmarkCircleFilled from '../SVGIcons/IconCheckmarkCircleFilled';
 export const Textarea = React.forwardRef((_a, ref) => {
     // const isErrorVisible = hasError !== undefined ? hasError : !!error
-    var { className, error, hasError, label, disabled, currentValue, changeHandler, placeHolder, onChange, required = false, maxCount, helperText, successMessage, dataId = '', labelAddons, isValid, setFieldValue } = _a, rest = __rest(_a, ["className", "error", "hasError", "label", "disabled", "currentValue", "changeHandler", "placeHolder", "onChange", "required", "maxCount", "helperText", "successMessage", "dataId", "labelAddons", "isValid", "setFieldValue"]);
+    var { className, error, hasError, label, disabled, currentValue, changeHandler, placeHolder, onChange, required = false, maxCount, helperText, successMessage, dataTestId = '', labelAddons, isValid, setFieldValue } = _a, rest = __rest(_a, ["className", "error", "hasError", "label", "disabled", "currentValue", "changeHandler", "placeHolder", "onChange", "required", "maxCount", "helperText", "successMessage", "dataTestId", "labelAddons", "isValid", "setFieldValue"]);
     const handleChange = (event) => {
         if (changeHandler) {
             changeHandler(event);
@@ -36,6 +36,6 @@ export const Textarea = React.forwardRef((_a, ref) => {
         }
         return 0;
     }, [rest, currentValue]);
-    return (_jsxs("div", { className: classNames('textarea', className, { 'textarea--invalid': hasError }), children: [_jsx(Label, { text: label, required: required, disabled: disabled, labelAddons: labelAddons }), _jsx("div", { className: "textarea__inner", children: _jsx("textarea", Object.assign({ "data-id": dataId, disabled: disabled, ref: ref, placeholder: placeHolder }, rest, { onChange: handleChange }, (currentValue ? { value: currentValue } : {}))) }), error || successMessage || helperText || maxCount ? (_jsxs("div", { className: "textarea__message mt-8", children: [error && _jsx(ErrorMessage, { message: error, icon: "infoFilled", dataId: dataId }), successMessage ? (_jsx(Text, { size: "small", type: "success", className: "flexbox align-items--center", children: _jsxs(_Fragment, { children: [_jsx(IconCheckmarkCircleFilled, { type: "success", size: "xsmall" }), _jsx("span", { className: "ml-4", children: successMessage })] }) })) : null, helperText && !successMessage ? (_jsx(Text, { size: "small", type: disabled ? 'disabled' : 'secondary', children: helperText })) : null, maxCount ? (_jsx(Text, { size: "small", type: disabled ? 'disabled' : 'secondary', className: "textarea__counter", children: `${currentLength}/${maxCount}` })) : null] })) : null] }));
+    return (_jsxs("div", { className: classNames('textarea', className, { 'textarea--invalid': hasError }), children: [_jsx(Label, { text: label, required: required, disabled: disabled, labelAddons: labelAddons }), _jsx("div", { className: "textarea__inner", children: _jsx("textarea", Object.assign({ "data-test-id": dataTestId, disabled: disabled, ref: ref, placeholder: placeHolder }, rest, { onChange: handleChange }, (currentValue ? { value: currentValue } : {}))) }), error || successMessage || helperText || maxCount ? (_jsxs("div", { className: "textarea__message mt-8", children: [error && _jsx(ErrorMessage, { message: error, icon: "infoFilled", dataTestId: dataTestId }), successMessage ? (_jsx(Text, { size: "small", type: "success", className: "flexbox align-items--center", children: _jsxs(_Fragment, { children: [_jsx(IconCheckmarkCircleFilled, { type: "success", size: "xsmall" }), _jsx("span", { className: "ml-4", children: successMessage })] }) })) : null, helperText && !successMessage ? (_jsx(Text, { size: "small", type: disabled ? 'disabled' : 'secondary', children: helperText })) : null, maxCount ? (_jsx(Text, { size: "small", type: disabled ? 'disabled' : 'secondary', className: "textarea__counter", children: `${currentLength}/${maxCount}` })) : null] })) : null] }));
 });
 Textarea.displayName = 'Textarea';

package/components/Textarea/types.d.ts

@@ -1,3 +1,4 @@
+import { IFormCompProps } from '../../type';
 export interface TTextAreaTypeProps extends IFormCompProps {
     className?: string;
     name?: string;

package/components/Tooltip/Tooltip.js

@@ -7,7 +7,7 @@ import { Positions } from './types';
 import { createPortal } from 'react-dom';
 export const Tooltip = (props) => {
     const tooltipRef = useRef(null);
-    const { size = 'large', text, className = '', position = Positions.BOTTOM_LEFT, dataId = '', id, elemRef, hovered = false } = props;
+    const { size = 'large', text, className = '', position = Positions.BOTTOM_LEFT, dataTestId = '', id, elemRef, hovered = false } = props;
     const [isHovered, setIsHovered] = useState(hovered);
     const [parent, setElement] = useState(elemRef || null);
     const [toolTipCurrentWidth, setToolTipCurrentWidth] = useState(0);
@@ -50,5 +50,5 @@ export const Tooltip = (props) => {
     if (!isHovered) {
         return null;
     }
-    return createPortal(_jsx("div", { style: tooltipStyles, "data-id": dataId, className: classNames(`tooltip tooltip--${size} tooltip--${tooltipPosition}`, className), ref: tooltipRef, children: _jsx(Text, { dataId: `${dataId}-text`, className: "tooltip__inner", type: "primary", weight: "regular", lineHeight: "small", size: `${size == 'small' ? 'xsmall' : 'small'}`, children: text }) }), document.body);
+    return createPortal(_jsx("div", { style: tooltipStyles, "data-test-id": dataTestId, className: classNames(`tooltip tooltip--${size} tooltip--${tooltipPosition}`, className), ref: tooltipRef, children: _jsx(Text, { dataTestId: `${dataTestId}-text`, className: "tooltip__inner", type: "primary", weight: "regular", lineHeight: "small", size: `${size == 'small' ? 'xsmall' : 'small'}`, children: text }) }), document.body);
 };

package/components/Tooltip/types.d.ts

@@ -1,3 +1,4 @@
+import { IFormCompProps } from '../../type';
 import { ReactElement } from 'react';
 export declare enum Positions {
     BOTTOM_LEFT = "bottom-left",

package/components/UnderConstruction/UnderConstruction.js

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import noResultImage from '../../assets/images/under-construction.webp';
 import { SELECT_TRANSLATIONS } from './localization';
 export const UnderConstruction = (props) => {
-    const { size = 'large', mainMessage, paragraphMessage, className, illustration = noResultImage, language = 'en', dataId = '' } = props;
+    const { size = 'large', mainMessage, paragraphMessage, className, illustration = noResultImage, language = 'en', dataTestId = '' } = props;
     const localizations = SELECT_TRANSLATIONS[language];
-    return (_jsxs("div", { className: classNames(`under-construction ${size === 'large' ? 'under-construction--large' : 'under-construction--small'}`, className), "data-id": dataId, children: [_jsx("div", { className: "under-construction__icon", children: _jsx(Image, { imagePath: illustration, dataId: dataId ? `${dataId}-image` : '' }) }), _jsxs("div", { className: "under-construction__content", children: [_jsx(Text, { size: size == 'large' ? 'large' : 'medium', weight: "bold", dataId: dataId ? `${dataId}-text` : '', children: mainMessage !== null && mainMessage !== void 0 ? mainMessage : localizations.mainMessage }), _jsx(Text, { size: size == 'large' ? 'standard' : 'small', dataId: dataId ? `${dataId}-subtext` : '', children: paragraphMessage !== null && paragraphMessage !== void 0 ? paragraphMessage : localizations.paragraphMessage })] })] }));
+    return (_jsxs("div", { className: classNames(`under-construction ${size === 'large' ? 'under-construction--large' : 'under-construction--small'}`, className), "data-test-id": dataTestId, children: [_jsx("div", { className: "under-construction__icon", children: _jsx(Image, { imagePath: illustration, dataTestId: dataTestId ? `${dataTestId}-image` : '' }) }), _jsxs("div", { className: "under-construction__content", children: [_jsx(Text, { size: size == 'large' ? 'large' : 'medium', weight: "bold", dataTestId: dataTestId ? `${dataTestId}-text` : '', children: mainMessage !== null && mainMessage !== void 0 ? mainMessage : localizations.mainMessage }), _jsx(Text, { size: size == 'large' ? 'standard' : 'small', dataTestId: dataTestId ? `${dataTestId}-subtext` : '', children: paragraphMessage !== null && paragraphMessage !== void 0 ? paragraphMessage : localizations.paragraphMessage })] })] }));
 };

package/components/UnderConstruction/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 export interface TUnderConstructionProps extends IBaseProps {
     size?: string;
     className?: string;

package/helperComponents/ErrorMessage/ErrorMessage.d.ts

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 import { TErrorMessageProps } from './types';
-export declare const ErrorMessage: ({ message, icon, dataId, className }: TErrorMessageProps) => ReactElement;
+export declare const ErrorMessage: ({ message, icon, dataTestId, className }: TErrorMessageProps) => ReactElement;

package/helperComponents/ErrorMessage/ErrorMessage.js

@@ -4,6 +4,6 @@ import { generateDataTestId } from '../../utils/helpers';
 import classnames from 'classnames';
 import { ICONS_MAPPING } from './consts';
 import { IconDynamicComponent } from '../IconDynamicComponent';
-export const ErrorMessage = ({ message, icon = 'infoFilled', dataId, className }) => {
-    return (_jsx(Text, { className: classnames('error-message', className), size: "small", type: "danger", dataId: generateDataTestId('error-message', dataId), children: _jsxs(_Fragment, { children: [_jsx(IconDynamicComponent, { Component: ICONS_MAPPING[icon], className: "mr-4", size: "xsmall", type: "danger" }), _jsx("span", { children: message })] }) }));
+export const ErrorMessage = ({ message, icon = 'infoFilled', dataTestId, className }) => {
+    return (_jsx(Text, { className: classnames('error-message', className), size: "small", type: "danger", dataTestId: generateDataTestId('error-message', dataTestId), children: _jsxs(_Fragment, { children: [_jsx(IconDynamicComponent, { Component: ICONS_MAPPING[icon], className: "mr-4", size: "xsmall", type: "danger" }), _jsx("span", { children: message })] }) }));
 };

package/helperComponents/ErrorMessage/types.d.ts

@@ -1,6 +1,6 @@
 export interface TErrorMessageProps {
     message?: string | React.ReactElement;
     icon?: string;
-    dataId?: string;
+    dataTestId?: string;
     className?: string;
 }

package/helperComponents/Label/types.d.ts

@@ -7,5 +7,5 @@ export interface LabelPropTypes {
     size?: 'xxsmall' | 'xsmall' | 'small' | 'standard' | 'medium' | 'large';
     className?: string;
     labelAddons?: React.ReactElement;
-    dataId?: string;
+    dataTestId?: string;
 }

package/helperComponents/OptionItem/OptionItem.js

@@ -6,7 +6,7 @@ import { Checkbox } from '../../components/Checkbox';
 import IconCheckmark from '../../components/SVGIcons/IconCheckmark';
 import { Tooltip } from '../../components/Tooltip';
 export const OptionItem = (props) => {
-    const { size = 'small', data, onClick, disabled, isSelected, labelLeftIconProps, LabelRightIconComponent, OptionRightIconComponent, isCheckbox, className = '', tooltipAddons, dataId = '', style = {} } = props;
+    const { size = 'small', data, onClick, disabled, isSelected, labelLeftIconProps, LabelRightIconComponent, OptionRightIconComponent, isCheckbox, className = '', tooltipAddons, dataTestId = '', style = {} } = props;
     const { label, meta, value, optionLeftIcon, avatar } = data;
     const handleClick = useCallback((e) => {
         e.preventDefault();
@@ -16,11 +16,11 @@ export const OptionItem = (props) => {
         }
         onClick({ value, label, meta });
     }, [disabled, value, label, onClick]);
-    const optionContent = (_jsxs("div", { "data-id": dataId, id: `${value}`, className: classNames('select__option', {
+    const optionContent = (_jsxs("div", { "data-test-id": dataTestId, id: `${value}`, className: classNames('select__option', {
             'select__option--disabled': disabled
         }, className), onClick: handleClick, style: style, children: [isCheckbox ? (_jsx(Checkbox, { className: "mr-8", selectedValue: isSelected, disabled: disabled })) : null, !isCheckbox && isSelected ? (_jsx(IconCheckmark, { size: "xsmall", type: disabled ? 'disabled' : 'brand', className: "mr-8" })) : null, _jsxs("div", { className: "select__option__inner", children: [optionLeftIcon && optionLeftIcon.Component ? (_jsx(optionLeftIcon.Component, Object.assign({}, optionLeftIcon, { size: "small", className: "mr-8" }))) : null, avatar && (_jsx(Avatar, { size: size === 'small' ? 'xxsmall' : 'medium', imagePath: avatar.url, className: "mr-4", initials: avatar.initials })), (labelLeftIconProps === null || labelLeftIconProps === void 0 ? void 0 : labelLeftIconProps.Component) ? (_jsx(labelLeftIconProps.Component, Object.assign({ size: "xsmall", type: disabled ? 'disabled' : 'primary', className: "mr-4" }, labelLeftIconProps))) : null, _jsxs("div", { className: classNames('select__option__content', {
                             select__option__content__large: size === 'large'
-                        }), "data-id": dataId, children: [_jsx("span", { className: classNames(`select__option__text pr-4 ${disabled ? 'color-disabled' : ''}`, {
+                        }), "data-test-id": dataTestId, children: [_jsx("span", { className: classNames(`select__option__text pr-4 ${disabled ? 'color-disabled' : ''}`, {
                                     select__option__text__large: size === 'large'
                                 }), children: label }), LabelRightIconComponent && LabelRightIconComponent(value), meta ? (_jsx("span", { className: classNames(`select__option__meta ${disabled ? 'color-disabled' : ''}`, {
                                     select__option__meta__large: size === 'large'

package/helperComponents/OptionItem/types.d.ts

@@ -11,7 +11,7 @@ export type TSelectItemProps = {
     disabled?: boolean;
     isCheckbox?: boolean;
     tooltipAddons?: TTooltipProps;
-    dataId?: string;
+    dataTestId?: string;
     style?: CSSProperties;
     size?: 'small' | 'large';
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hrm_ui_lib",
-  "version": "3.4.2",
+  "version": "4.0.1",
   "description": "UI library for Dino",
   "main": "./index.cjs",
   "module": "./index.js",

package/type/base.d.ts

@@ -0,0 +1,14 @@
+export interface IBaseProps {
+    dataTestId?: string;
+}
+export interface IFormCompProps extends IBaseProps {
+    hasError?: boolean;
+    isValid?: boolean;
+    value?: TFormValue;
+    onChange?: TOnChange;
+    placeholder?: string;
+    name?: string;
+    setFieldValue?: (name: string, value: TFormValue, shouldValidate?: {
+        shouldValidate: boolean;
+    }) => void;
+}

package/type/base.js

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

package/type/index.d.ts

@@ -1,3 +1,4 @@
+export * from './base';
 export * from './locale';
 export * from './file-upload';
 export * from './notification';

package/type/index.js

@@ -1,3 +1,4 @@
+export * from './base';
 export * from './locale';
 export * from './file-upload';
 export * from './notification';

package/type/svg-icons.d.ts

@@ -8,7 +8,7 @@ export interface ISVGIconProps {
     className?: string;
     refHandler?: LegacyRef<SVGSVGElement> | undefined;
     id?: string;
-    dataId?: string;
+    dataTestId?: string;
     Component?: TSVGIconComponent;
 }
 export type TTextSize = 'xxsmall' | 'xsmall' | 'small' | 'standard' | 'medium' | 'large';

package/utils/helpers.d.ts

@@ -13,5 +13,5 @@ export declare const getStringWidth: (text: string, fontSize: number) => number;
 export declare const setTranslationValue: (translation: string, value: string | number) => string;
 export declare const getYearOptions: (startYear: number, lastYear: number) => TSelectOptions;
 export declare const isSameDay: (date1?: Date, date2?: Date) => boolean;
-export declare const generateDataTestId: (postfix: string, dataId?: string) => string;
+export declare const generateDataTestId: (postfix: string, dataTestId?: string) => string;
 export declare const clearStorage: (preservedKeys?: STORE_KEYS[]) => void;

package/utils/helpers.js

@@ -68,11 +68,11 @@ export const isSameDay = (date1, date2) => {
     }
     return dayjs(date1).isSame(date2, 'day');
 };
-export const generateDataTestId = (postfix, dataId) => {
-    if (!dataId) {
+export const generateDataTestId = (postfix, dataTestId) => {
+    if (!dataTestId) {
         return '';
     }
-    return `${dataId}-${postfix}`;
+    return `${dataTestId}-${postfix}`;
 };
 export const clearStorage = (preservedKeys = [STORE_KEYS.theme]) => {
     Object.values(STORE_KEYS).forEach((key) => {