hrm_ui_lib 3.3.0 → 3.4.1

package/components/Select/helper.d.ts

@@ -0,0 +1 @@
+export declare const getOptionDataId: (dataId: string | undefined, value: TItemValue, index: number) => string;

package/components/Select/helper.js

@@ -1 +1,7 @@
-"use strict";
+export const getOptionDataId = (dataId, value, index) => {
+    if (!dataId) {
+        return '';
+    }
+    const key = typeof value === 'string' || typeof value === 'number' ? value : index;
+    return `${dataId}-option-${key}`;
+};

package/components/Select/types.d.ts

@@ -26,6 +26,7 @@ interface TSelectBaseProps {
     language?: string;
 }
 export interface TNestedSelectProps {
+    dataId?: string;
     options: TSelectOptions;
     isRequiredField?: boolean;
     label?: string | ReactElement;
@@ -164,6 +165,7 @@ export interface ISingleSelectDesktopProps extends ISingleSelectResponsiveProps
     setActiveIndex: (index: number) => void;
 }
 export type TSelectFooterPropTypes = {
+    dataId?: string;
     checkboxInfo?: TCheckboxInfo;
     hasChange?: boolean;
     buttonProps?: {
@@ -266,6 +268,7 @@ declare type TNavItemValue = {
     children: ReactNode;
 };
 export type TProfileDropdownProps = {
+    dataId?: string;
     avatar: ReactElement;
     email: string;
     name: string;

package/components/Status/Status.js

@@ -8,11 +8,11 @@ var StatusTextSize;
     StatusTextSize["small"] = "xsmall";
 })(StatusTextSize || (StatusTextSize = {}));
 export const Status = (props) => {
-    const { type = 'primary', size = 'large', text = '', children, className = '', leftIconProps, rightIconProps, withCircle = true, withBackground = false, dataId } = props;
-    return (_jsxs("div", { className: classNames(`status status--${size}`, className, {
+    const { type = 'primary', size = 'large', text = '', children, className = '', leftIconProps, rightIconProps, withCircle = true, withBackground = false, dataId = '' } = props;
+    return (_jsxs("div", { "data-id": dataId, className: classNames(`status status--${size}`, className, {
             status__withBackground: withBackground,
             [`status__withBackground--${type}`]: withBackground
         }), children: [withCircle ? (_jsx("span", { className: classNames('status__circle', 'mr-6', {
                     [`status__circle--${type}`]: true
-                }) })) : null, (leftIconProps === null || leftIconProps === void 0 ? void 0 : leftIconProps.Component) ? (_jsx(leftIconProps.Component, Object.assign({ size: "xsmall", type: type, className: "mr-6" }, leftIconProps))) : null, _jsxs("div", { className: "status__label", children: [_jsx(Text, { className: "status__label-text", dataId: `${dataId}-text`, weight: withBackground ? 'semibold' : 'regular', type: !withCircle || withBackground ? type : 'primary', size: StatusTextSize[size], children: text }), children] }), rightIconProps] }));
+                }) })) : null, (leftIconProps === null || leftIconProps === void 0 ? void 0 : leftIconProps.Component) ? (_jsx(leftIconProps.Component, Object.assign({ size: "xsmall", type: type, className: "mr-6" }, leftIconProps))) : null, _jsxs("div", { className: "status__label", children: [_jsx(Text, { className: "status__label-text", dataId: dataId ? `${dataId}-text` : '', weight: withBackground ? 'semibold' : 'regular', type: !withCircle || withBackground ? type : 'primary', size: StatusTextSize[size], children: text }), children] }), rightIconProps] }));
 };

package/components/Tab/Tab.js

@@ -13,8 +13,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { TabItem } from './TabItem';
 import classNames from 'classnames';
 export const Tab = (props) => {
-    const { selectedValue, tabItems, onSelect, className } = props, rest = __rest(props, ["selectedValue", "tabItems", "onSelect", "className"]);
-    return (_jsx("div", { className: "tabs-container", children: _jsx("div", { className: classNames('tabs-header-container', className), children: tabItems.map((tabInfo) => {
-                return (_jsx(TabItem, Object.assign({ label: tabInfo.label, badgeProps: tabInfo.badgeProps, onClick: () => onSelect(tabInfo.value), val: tabInfo.value, isSelected: selectedValue === tabInfo.value, dataId: (tabInfo === null || tabInfo === void 0 ? void 0 : tabInfo.dataId) || '', disabled: tabInfo.disabled }, rest), tabInfo.value));
+    const { selectedValue, tabItems, onSelect, className, dataId = '' } = props, rest = __rest(props, ["selectedValue", "tabItems", "onSelect", "className", "dataId"]);
+    return (_jsx("div", { className: "tabs-container", "data-id": dataId, children: _jsx("div", { className: classNames('tabs-header-container', className), children: tabItems.map((tabInfo, index) => {
+                return (_jsx(TabItem, Object.assign({ label: tabInfo.label, badgeProps: tabInfo.badgeProps, onClick: () => onSelect(tabInfo.value), val: tabInfo.value, isSelected: selectedValue === tabInfo.value, dataId: (tabInfo === null || tabInfo === void 0 ? void 0 : tabInfo.dataId) || (dataId ? `${dataId}-item-${index}` : ''), disabled: tabInfo.disabled }, rest), tabInfo.value));
             }) }) }));
 };

package/components/Tab/TabItem.js

@@ -4,7 +4,7 @@ import { noop } from '../../utils/helpers';
 import classNames from 'classnames';
 export const TabItem = (props) => {
     const { size = 'large', iconProps, badgeProps, label, className = '', disabled = false, isSelected, rightIconProps, val, onClick, dataId } = props;
-    return (_jsxs("div", { onClick: disabled ? noop : onClick, className: classNames('tab', { [`tab--${size}`]: size }, { 'tab--disabled': disabled }, { 'tab--selected': isSelected }, className), children: [(iconProps === null || iconProps === void 0 ? void 0 : iconProps.Component) ? (_jsx(iconProps.Component, Object.assign({ className: "tab__icon mr-8", size: `${size == 'small' ? 'xsmall' : 'small'}` }, iconProps))) : null, _jsx("span", { className: "tab__label", "data-id": dataId, children: label }), (rightIconProps === null || rightIconProps === void 0 ? void 0 : rightIconProps.Component) ? (_jsx(rightIconProps.Component, Object.assign({ onClick: (e) => {
+    return (_jsxs("div", { "data-id": dataId, onClick: disabled ? noop : onClick, className: classNames('tab', { [`tab--${size}`]: size }, { 'tab--disabled': disabled }, { 'tab--selected': isSelected }, className), children: [(iconProps === null || iconProps === void 0 ? void 0 : iconProps.Component) ? (_jsx(iconProps.Component, Object.assign({ className: "tab__icon mr-8", size: `${size == 'small' ? 'xsmall' : 'small'}` }, iconProps))) : null, _jsx("span", { className: "tab__label", "data-id": dataId ? `${dataId}-label` : '', children: label }), (rightIconProps === null || rightIconProps === void 0 ? void 0 : rightIconProps.Component) ? (_jsx(rightIconProps.Component, Object.assign({ onClick: (e) => {
                     if (rightIconProps === null || rightIconProps === void 0 ? void 0 : rightIconProps.action) {
                         e.stopPropagation();
                         rightIconProps === null || rightIconProps === void 0 ? void 0 : rightIconProps.action(val);

package/package.json

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