hrm_ui_lib 3.4.1 → 4.0.0

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.1",
+  "version": "4.0.0",
   "description": "UI library for Dino",
   "main": "./index.cjs",
   "module": "./index.js",

package/type/base.d.ts

@@ -0,0 +1,13 @@
+export interface IBaseProps {
+    dataTestId?: string;
+}
+export interface IFormCompProps extends IBaseProps {
+    hasError?: boolean;
+    isValid?: boolean;
+    value?: TFormValue;
+    onChange?: TOnChange;
+    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) => {