hrm_ui_lib 2.3.6 → 2.4.0

package/components/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,2 @@
+import { IButtonGroup } from './types';
+export declare const ButtonGroup: ({ buttons, activeIndex, className, type, size, disabled, onTabChange }: IButtonGroup) => import("react/jsx-runtime").JSX.Element;

package/components/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import classNames from 'classnames';
+import { ButtonGroupItem } from './ButtonGroupItem';
+export const ButtonGroup = ({ buttons, activeIndex = 0, className, type, size, disabled, onTabChange }) => {
+    const [activeItem, setActiveItem] = useState(activeIndex);
+    const handleItemClick = (index) => {
+        if (disabled || activeItem === index)
+            return;
+        setActiveItem(index);
+        onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(index);
+    };
+    return (_jsx("div", { className: classNames('button-group', className), children: buttons.map((button, index) => {
+            return (_jsx(ButtonGroupItem, Object.assign({}, button, { type: type, size: size, isActive: activeItem === index, disabled: disabled, onClick: () => handleItemClick(index) }), index));
+        }) }));
+};

package/components/ButtonGroup/ButtonGroupItem.d.ts

@@ -0,0 +1,2 @@
+import { IButtonGroupItem } from './types';
+export declare const ButtonGroupItem: ({ buttonText, size, type, isActive, disabled, onClick, className, icons }: IButtonGroupItem) => import("react/jsx-runtime").JSX.Element;

package/components/ButtonGroup/ButtonGroupItem.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '../Text';
+import classNames from 'classnames';
+import { ICON_SIZE_MAPPING, TEXT_SIZE_MAPPING } from './consts';
+export const ButtonGroupItem = ({ buttonText, size = 'medium', type = 'primary', isActive, disabled, onClick, className, icons }) => {
+    var _a, _b;
+    const onClickHandler = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    return (_jsxs("div", { className: classNames('button-group-item', `button-group-item__${type}`, `button-group-item__${size}`, { active: isActive, disabled }, className), onClick: onClickHandler, children: [((_a = icons === null || icons === void 0 ? void 0 : icons.left) === null || _a === void 0 ? void 0 : _a.Component) ? (_jsx(icons.left.Component, { size: ICON_SIZE_MAPPING[size], type: disabled ? 'disabled' : 'primary' })) : null, _jsx(Text, { size: TEXT_SIZE_MAPPING[size], children: buttonText }), ((_b = icons === null || icons === void 0 ? void 0 : icons.right) === null || _b === void 0 ? void 0 : _b.Component) ? (_jsx(icons.right.Component, { size: ICON_SIZE_MAPPING[size], type: disabled ? 'disabled' : 'primary' })) : null] }));
+};

package/components/ButtonGroup/consts.d.ts

@@ -0,0 +1,8 @@
+import { TTextSize } from '../Text/types';
+import { TSVGIconSize } from '../SVGIcons/types';
+export declare const TEXT_SIZE_MAPPING: {
+    [key: string]: TTextSize;
+};
+export declare const ICON_SIZE_MAPPING: {
+    [key: string]: TSVGIconSize;
+};

package/components/ButtonGroup/consts.js

@@ -0,0 +1,10 @@
+export const TEXT_SIZE_MAPPING = {
+    large: 'standard',
+    medium: 'standard',
+    small: 'small'
+};
+export const ICON_SIZE_MAPPING = {
+    large: 'small',
+    medium: 'small',
+    small: 'xsmall'
+};

package/components/ButtonGroup/index.d.ts

@@ -0,0 +1 @@
+export * from './ButtonGroup';

package/components/ButtonGroup/index.js

@@ -0,0 +1 @@
+export * from './ButtonGroup';

package/components/ButtonGroup/types.d.ts

@@ -0,0 +1,23 @@
+import { ISVGIconProps } from '../SVGIcons/types';
+interface IButtonGroupBase {
+    type?: 'primary';
+    size?: 'small' | 'medium' | 'large';
+    disabled?: boolean;
+    className?: string;
+}
+export interface IButtonGroupItem extends IButtonGroupBase {
+    buttonText: string;
+    isActive?: boolean;
+    id?: string | number;
+    onClick?: () => void;
+    icons?: {
+        left?: ISVGIconProps;
+        right?: ISVGIconProps;
+    };
+}
+export interface IButtonGroup extends IButtonGroupBase {
+    buttons: IButtonGroupItem[];
+    activeIndex: number;
+    onTabChange?: (index: number) => void;
+}
+export {};

package/components/ButtonGroup/types.js

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

package/components/TableV2/hooks/useTableControl.js

@@ -14,7 +14,7 @@ export function useTableControl({ withSelect, columns, data, tableSettings, tota
     const tableName = `${TABLE_NAME_PREFIX}-${tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.tableName}`;
     const savedSettings = shouldPersistToStorage && tableName
         ? loadTableSettings(tableName)
-        : { columnVisibility: {}, columnSizing: {}, columnOrder: [] };
+        : { columnVisibility: {}, columnSizing: {}, columnOrder: [], columnPinning: {} };
     const [activeId, setActiveId] = useState(null);
     const [sorting, setSorting] = useState([]);
     const [rowSelection, setRowSelection] = useState({});
@@ -82,6 +82,18 @@ export function useTableControl({ withSelect, columns, data, tableSettings, tota
         acc[key] = false;
         return acc;
     }, {});
+    const columnPinning = useMemo(() => {
+        const left = [];
+        memoizedColumns.forEach((col) => {
+            if (col.enablePinning && col.id) {
+                left.push(col.id);
+            }
+        });
+        return {
+            left,
+            right: ['actions']
+        };
+    }, [memoizedColumns]);
     const table = useReactTable({
         data,
         columns: reorderedColumns,
@@ -93,15 +105,7 @@ export function useTableControl({ withSelect, columns, data, tableSettings, tota
             columnSizing,
             rowSelection,
             columnVisibility: Object.assign(Object.assign({}, hiddenColumns), columnVisibility),
-            columnPinning: {
-                left: ['select'],
-                right: ['actions']
-            }
-        },
-        defaultColumn: {
-            minSize: 200,
-            size: 150,
-            maxSize: 400
+            columnPinning
         },
         onPaginationChange: handlePaginationChange,
         onColumnSizingChange: handleColumnSizingChange,

package/components/Text/types.d.ts

@@ -1,6 +1,6 @@
 import { ElementType, MouseEvent, ReactNode } from 'react';
 type TTextTypes = 'primary' | 'secondary' | 'tertiary' | 'disabled' | 'inverse' | 'selected' | 'brand' | 'danger' | 'warning' | 'success' | 'information' | 'discovery';
-type TTextSize = 'xxsmall' | 'xsmall' | 'small' | 'standard' | 'medium' | 'large' | 'xlarge';
+export type TTextSize = 'xxsmall' | 'xsmall' | 'small' | 'standard' | 'medium' | 'large' | 'xlarge';
 type TTextWeight = 'regular' | 'semibold' | 'bold' | 'bolder';
 type TTextLineHeight = 'xsmall' | 'small' | 'medium' | 'large';
 export interface TextPropTypes {

package/index.d.ts

@@ -5,6 +5,7 @@ export * from './components/Badge';
 export * from './components/BadgeV2';
 export * from './components/Breadcrumb';
 export * from './components/Button';
+export * from './components/ButtonGroup';
 export * from './components/Checkbox';
 export * from './components/Chips';
 export * from './components/Card';

package/index.js

@@ -5,6 +5,7 @@ export * from './components/Badge';
 export * from './components/BadgeV2';
 export * from './components/Breadcrumb';
 export * from './components/Button';
+export * from './components/ButtonGroup';
 export * from './components/Checkbox';
 export * from './components/Chips';
 export * from './components/Card';

package/package.json

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