hrm_ui_lib 2.1.0-alpha.19 → 2.1.0-alpha.21

package/components/Skeleton/types.d.ts

@@ -0,0 +1,24 @@
+import { IBaseProps } from '../../type';
+import { CSSProperties, ReactNode } from 'react';
+export type TSkeletonVariant = 'text' | 'circular' | 'rectangular' | 'rounded';
+export type TSkeletonAnimation = 'pulse' | 'wave' | 'none';
+export interface TSkeletonPropTypes extends IBaseProps {
+    /** Visual shape of the placeholder. */
+    variant?: TSkeletonVariant;
+    /** Animation style. Pass `'none'` to disable. */
+    animation?: TSkeletonAnimation;
+    /** Width as a number (px) or any valid CSS length / percentage. */
+    width?: number | string;
+    /** Height as a number (px) or any valid CSS length / percentage. */
+    height?: number | string;
+    /** Render N stacked skeletons. Useful for placeholder paragraphs. */
+    count?: number;
+    /**
+     * If provided, the skeleton wraps the children and infers its size from them
+     * while the children remain invisible (used as a layout guide).
+     */
+    children?: ReactNode;
+    /** Inline style overrides applied to every rendered skeleton element. */
+    style?: CSSProperties;
+    className?: string;
+}

package/components/Snackbar/Snackbar.js

@@ -1,4 +1,4 @@
-import{jsx as s,jsxs as o}from"react/jsx-runtime";import{toast as m,ToastContainer as l,Slide as d}from"react-toastify";import{Text as c}from"../Text/Text.js";import{Button as u}from"../Button/Button.js";import{DEFAULT_DURATION as f,TYPE_MAPPING as C,ICONS_MAPPING as h}from"./consts.js";import{IconDynamicComponent as N}from"../../helperComponents/IconDynamicComponent/IconDynamicComponent.js";const g=({actionProps:t,toastId:a,type:n="information",text:e})=>/* @__PURE__ */o("div",{"data-id":`${n}-toast-message`,className:"snackbar",children:[
+import{jsx as s,jsxs as o}from"react/jsx-runtime";import{toast as m,ToastContainer as l,Slide as d}from"react-toastify";import{Text as c}from"../Text/Text.js";import{Button as u}from"../Button/Button.js";import{DEFAULT_DURATION as f,TYPE_MAPPING as C,ICONS_MAPPING as h}from"./consts.js";import{IconDynamicComponent as N}from"../../helperComponents/IconDynamicComponent/IconDynamicComponent.js";const g=({actionProps:t,toastId:a,type:n="information",text:e})=>/* @__PURE__ */o("div",{"data-test-id":`${n}-toast-message`,className:"snackbar",children:[
 /* @__PURE__ */o("div",{className:"snackbar__content",children:[
 /* @__PURE__ */s(N,{Component:h[n],type:C[n],size:"medium"}),
 /* @__PURE__ */s(c,{className:"snackbar__text pl-16 pr-8",type:"primary",size:"standard",weight:"regular",lineHeight:"large",children:e})]}),t?/* @__PURE__ */s(u,{size:"small",type:"tertiary",...t,onClick:s=>{var o;m.dismiss(a),null==(o=null==t?void 0:t.onClick)||o.call(t,s)}}):null]},a),I=t=>{const{toastId:s,closeSnackbar:o,actionProps:a,duration:n=f}=t;m(g(t),{className:"_container",toastId:s,autoClose:!a&&n}),m.onChange(t=>{"removed"===t.status&&(null==o||o(t.id))})},y=t=>{const{duration:o=1e3,position:a="bottom-center"}=t;/* @__PURE__ */

package/components/Snackbar/types.d.ts

@@ -1,3 +1,4 @@
+import { IFormCompProps } from '../../type';
 import { TButtonPropTypes } from '../Button/types';
 export type TSnackbarTypes = 'success' | 'error' | 'warning' | 'information';
 export interface TToastProps {

package/components/Status/Status.js

@@ -1,4 +1,4 @@
-import{jsxs as i,jsx as e}from"react/jsx-runtime";import{Text as h}from"../Text/Text.js";import c from"classnames";var n=/* @__PURE__ */(s=>(s.large="standard",s.medium="small",s.small="xsmall",s))(n||{});const w=s=>{const{type:t="primary",size:a="large",text:l="",children:r,className:m="",leftIconProps:o,rightIconProps:u,withCircle:d=!0,withBackground:p=!1,dataId:x}=s;/* @__PURE__ */
-return i("div",{className:c(`status status--${a}`,m,{status__withBackground:p,[`status__withBackground--${t}`]:p}),children:[d?/* @__PURE__ */e("span",{className:c("status__circle","mr-6",{[`status__circle--${t}`]:!0})}):null,null!=o&&o.Component?/* @__PURE__ */e(o.Component,{size:"xsmall",type:t,className:"mr-6",...o}):null,
-/* @__PURE__ */i("div",{className:"status__label",children:[
-/* @__PURE__ */e(h,{className:"status__label-text",dataId:`${x}-text`,weight:p?"semibold":"regular",type:!d||p?t:"primary",size:n[a],children:l}),r]}),u]})};export{w as Status};
+import{jsxs as c,jsx as l}from"react/jsx-runtime";import{Text as h}from"../Text/Text.js";import d from"classnames";var n=/* @__PURE__ */(s=>(s.large="standard",s.medium="small",s.small="xsmall",s))(n||{});const w=s=>{const{type:t="primary",size:a="large",text:e="",children:r,className:i="",leftIconProps:m,rightIconProps:o,withCircle:u=!0,withBackground:p=!1,dataTestId:x=""}=s;/* @__PURE__ */
+return c("div",{"data-test-id":x,className:d(`status status--${a}`,i,{status__withBackground:p,[`status__withBackground--${t}`]:p}),children:[u?/* @__PURE__ */l("span",{className:d("status__circle","mr-6",{[`status__circle--${t}`]:!0})}):null,null!=m&&m.Component?/* @__PURE__ */l(m.Component,{size:"xsmall",type:t,className:"mr-6",...m}):null,
+/* @__PURE__ */c("div",{className:"status__label",children:[
+/* @__PURE__ */l(h,{className:"status__label-text",dataTestId:x?`${x}-text`:"",weight:p?"semibold":"regular",type:!u||p?t:"primary",size:n[a],children:e}),r]}),o]})};export{w as Status};

package/components/Status/types.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode } from 'react';
-import { ISVGIconProps } from '../../type';
+import { ISVGIconProps, IFormCompProps } from '../../type';
 export type TStatusTypes = 'primary' | 'disabled' | 'brand' | 'danger' | 'warning' | 'success' | 'information' | 'discovery';
 export interface TStatusProps extends IFormCompProps {
     text?: string;
@@ -11,5 +11,4 @@ export interface TStatusProps extends IFormCompProps {
     className?: string;
     withCircle?: boolean;
     withBackground?: boolean;
-    dataId?: string;
 }

package/components/Stepper/Stepper.js

@@ -1,2 +1,2 @@
-import{jsx as x}from"react/jsx-runtime";import{useState as a,useEffect as l}from"react";const v=e=>{const{list:t,activeStep:s=0,setActiveStep:r}=e,[n,i]=a(s);l(()=>{s&&s!==n&&i(s)},[s,n]);const p=t[n];/* @__PURE__ */
-return x(p,{activeStepIndex:n,isNextDisabled:n===t.length-1,isPrevDisabled:0===n,prevHandler:()=>{let e=n;--e,i(e),r&&r(e)},nextHandler:()=>{let e=n;++e,i(e),r&&r(e)},stepCount:t.length})};export{v as Stepper};
+import{jsx as x}from"react/jsx-runtime";import{useState as l,useEffect as I}from"react";const v=e=>{const{list:t,activeStep:s=0,setActiveStep:a,dataTestId:r=""}=e,[n,i]=l(s);I(()=>{s&&s!==n&&i(s)},[s,n]);const p=t[n];/* @__PURE__ */
+return x(p,{activeStepIndex:n,isNextDisabled:n===t.length-1,isPrevDisabled:0===n,prevHandler:()=>{let e=n;--e,i(e),a&&a(e)},nextHandler:()=>{let e=n;++e,i(e),a&&a(e)},stepCount:t.length,dataTestId:r?`${r}-step-${n}`:""})};export{v as Stepper};

package/components/Stepper/types.d.ts

@@ -1,4 +1,5 @@
-export interface TStepperContentWrapperProps {
+import { IBaseProps } from '../../type';
+export interface TStepperContentWrapperProps extends IBaseProps {
     isPrevDisabled: boolean;
     isNextDisabled: boolean;
     prevHandler: () => void;
@@ -7,7 +8,7 @@ export interface TStepperContentWrapperProps {
     stepCount: number;
 }
 declare type TComp = (props: TStepperContentWrapperProps) => React.ReactElement;
-export interface TStepperProps {
+export interface TStepperProps extends IBaseProps {
     list: TComp[];
     activeStep?: number;
     setActiveStep?: (step: number) => void;

package/components/Switcher/Switcher.js

@@ -1,5 +1,5 @@
-import{jsx as e,jsxs as h}from"react/jsx-runtime";import{forwardRef as k,useMemo as C}from"react";import p from"classnames";import{Label as y}from"../../helperComponents/Label/Label.js";const S=k((a,l)=>{const{onClick:s,id:r="",name:t,value:i,disabled:n,label:c,inlineType:o=!1,dataId:d,size:m="large",setFieldValue:b,selectedValue:w,className:_="",labelAddons:N,orientation:f="right",hasSpaceBetween:u=!0}=a,x=!!i||!!w,k=C(()=>/* @__PURE__ */e(y,{text:c,disabled:n,labelAddons:N,size:o?"standard":m,className:"switcher__label"}),[c,n,N,o,m]);/* @__PURE__ */
+import{jsx as e,jsxs as h}from"react/jsx-runtime";import{forwardRef as k,useMemo as C}from"react";import p from"classnames";import{Label as y}from"../../helperComponents/Label/Label.js";const S=k((a,s)=>{const{onClick:l,id:r="",name:t,value:i,disabled:n,label:c,inlineType:o=!1,dataTestId:d,size:m="large",setFieldValue:b,selectedValue:w,className:_="",labelAddons:N,orientation:f="right",hasSpaceBetween:u=!0}=a,x=!!i||!!w,k=C(()=>/* @__PURE__ */e(y,{text:c,disabled:n,labelAddons:N,size:o?"standard":m,className:"switcher__label"}),[c,n,N,o,m]);/* @__PURE__ */
 return h("div",{className:p("switcher",{"switcher--inline":o,"switcher--space-between":u}),children:[c&&"right"===f&&k,
 /* @__PURE__ */h("label",{id:r,className:p("controller","controller--switch",`controller--switch-${m}`,_,{"controller--disabled":n}),children:[
-/* @__PURE__ */e("input",{"data-id":d,type:"checkbox",tabIndex:0,onChange:()=>{t&&b&&b(t,!x),s&&s(!x)},checked:x,disabled:n}),
+/* @__PURE__ */e("input",{"data-test-id":d,type:"checkbox",tabIndex:0,onChange:()=>{t&&b&&b(t,!x),l&&l(!x)},checked:x,disabled:n}),
 /* @__PURE__ */e("span",{className:"controller__icon",children:/* @__PURE__ */e("span",{className:"controller__icon__inner",children:/* @__PURE__ */e("span",{className:"controller__mark"})})})]}),c&&"left"===f&&k]})});S.displayName="Switcher";export{S as Switcher};

package/components/Switcher/types.d.ts

@@ -1,3 +1,4 @@
+import { IFormCompProps } from '../../type';
 export interface TSwitcherProps extends IFormCompProps {
     onClick?: (isChecked: boolean) => void;
     className?: string;

package/components/Tab/Tab.js

@@ -1,2 +1,2 @@
-import{jsx as a}from"react/jsx-runtime";import{TabItem as m}from"./TabItem.js";import t from"classnames";const o=e=>{const{selectedValue:s,tabItems:l,onSelect:d,className:o,...r}=e;/* @__PURE__ */
-return a("div",{className:"tabs-container",children:/* @__PURE__ */a("div",{className:t("tabs-header-container",o),children:l.map(e=>/* @__PURE__ */a(m,{label:e.label,badgeProps:e.badgeProps,onClick:()=>d(e.value),val:e.value,isSelected:s===e.value,dataId:(null==e?void 0:e.dataId)||"",disabled:e.disabled,...r},e.value))})})};export{o as Tab};
+import{jsx as s}from"react/jsx-runtime";import{TabItem as p}from"./TabItem.js";import u from"classnames";const N=a=>{const{selectedValue:e,tabItems:t,onSelect:l,className:d,dataTestId:r="",...i}=a;/* @__PURE__ */
+return s("div",{className:"tabs-container","data-test-id":r,children:/* @__PURE__ */s("div",{className:u("tabs-header-container",d),children:t.map((a,t)=>/* @__PURE__ */s(p,{label:a.label,badgeProps:a.badgeProps,onClick:()=>l(a.value),val:a.value,isSelected:e===a.value,dataTestId:(null==a?void 0:a.dataTestId)||(r?`${r}-item-${t}`:""),disabled:a.disabled,...i},a.value))})})};export{N as Tab};

package/components/Tab/TabItem.js

@@ -1,3 +1,3 @@
-import{jsxs as C,jsx as m}from"react/jsx-runtime";import{Badge as N}from"../Badge/Badge.js";import{noop as f}from"../../utils/helpers.js";import x from"classnames";const $=a=>{const{size:l="large",iconProps:s,badgeProps:e,label:o,className:n="",disabled:t=!1,isSelected:i,rightIconProps:c,val:r,onClick:d,dataId:p}=a;/* @__PURE__ */
-return C("div",{onClick:t?f:d,className:x("tab",{[`tab--${l}`]:l},{"tab--disabled":t},{"tab--selected":i},n),children:[null!=s&&s.Component?/* @__PURE__ */m(s.Component,{className:"tab__icon mr-8",size:""+("small"==l?"xsmall":"small"),...s}):null,
-/* @__PURE__ */m("span",{className:"tab__label","data-id":p,children:o}),null!=c&&c.Component?/* @__PURE__ */m(c.Component,{onClick:a=>{null!=c&&c.action&&(a.stopPropagation(),null==c||c.action(r))},className:"tab__icon ml-8",size:""+("small"==l?"xsmall":"small"),...c}):null,null!=e&&e.text?/* @__PURE__ */m(N,{className:"tab__badge ml-8",size:"small",type:"secondary",...e}):null]})};export{$ as TabItem};
+import{jsxs as C,jsx as t}from"react/jsx-runtime";import{Badge as N}from"../Badge/Badge.js";import{noop as f}from"../../utils/helpers.js";import x from"classnames";const k=a=>{const{size:l="large",iconProps:s,badgeProps:e,label:o,className:n="",disabled:m=!1,isSelected:i,rightIconProps:c,val:r,onClick:d,dataTestId:p}=a;/* @__PURE__ */
+return C("div",{"data-test-id":p,onClick:m?f:d,className:x("tab",{[`tab--${l}`]:l},{"tab--disabled":m},{"tab--selected":i},n),children:[null!=s&&s.Component?/* @__PURE__ */t(s.Component,{className:"tab__icon mr-8",size:""+("small"==l?"xsmall":"small"),...s}):null,
+/* @__PURE__ */t("span",{className:"tab__label","data-test-id":p?`${p}-label`:"",children:o}),null!=c&&c.Component?/* @__PURE__ */t(c.Component,{onClick:a=>{null!=c&&c.action&&(a.stopPropagation(),null==c||c.action(r))},className:"tab__icon ml-8",size:""+("small"==l?"xsmall":"small"),...c}):null,null!=e&&e.text?/* @__PURE__ */t(N,{className:"tab__badge ml-8",size:"small",type:"secondary",...e}):null]})};export{k as TabItem};

package/components/Tab/types.d.ts

@@ -1,8 +1,8 @@
+import { IBaseProps, IFormCompProps } from '../../type';
 import { TBadgeProps } from '../Badge/types';
-export type TTabItem = {
+export type TTabItem = IBaseProps & {
     value: number | string;
     label: string | React.ReactElement;
-    dataId?: string;
     disabled?: boolean;
     badgeProps?: TBadgeProps;
     iconProps?: {
@@ -25,8 +25,7 @@ export interface TTabProps extends IFormCompProps {
     selectedValue: number | string;
     onSelect: (value: string | number) => void;
 }
-export type TTabItemProps = {
-    dataId?: string;
+export type TTabItemProps = IBaseProps & {
     label?: string | React.ReactElement;
     size?: 'large' | 'medium' | 'small';
     className?: string;

package/components/Table/Header.d.ts

@@ -1,11 +1,12 @@
+import { IBaseProps } from '../../type';
 import { ReactElement } from 'react';
 import { HeaderGroup } from 'react-table';
-type Props = {
+type Props = IBaseProps & {
     fixedHeader?: boolean;
     withSelect: boolean;
     tableWidth: number;
     headerGroup: HeaderGroup;
     uniqueKey: string;
 };
-export declare function Header({ headerGroup, tableWidth, withSelect, uniqueKey, fixedHeader }: Props): ReactElement;
+export declare function Header({ headerGroup, tableWidth, withSelect, uniqueKey, fixedHeader, dataTestId }: Props): ReactElement;
 export {};

package/components/Table/Header.js

@@ -1,4 +1,4 @@
-import{jsx as t,jsxs as z}from"react/jsx-runtime";import c from"classnames";import{CHECKBOX_DEFAULT_WIDTH as x,calcColumnWidth as T,CHECKBOX_HEADER_ID as j}from"./utils.js";import{Text as v}from"../Text/Text.js";import o from"../SVGIcons/IconArrowDown.js";import B from"../SVGIcons/IconArrowUp.js";function L({headerGroup:e,tableWidth:r,withSelect:s,uniqueKey:i,fixedHeader:l=!1}){const{key:a,...d}=e.getHeaderGroupProps();/* @__PURE__ */
-return t("tr",{...d,className:c({fixed_header:l}),children:e.headers.map(({id:e,minWidth:l,maxWidth:a,width:d,widthInPercent:m,getHeaderProps:n,fixed:h,columnProps:f,render:u,isSorted:p,isSortedDesc:_,getSortByToggleProps:b},g,w)=>{var H;const I=e===j,N={width:I?x:T(m,r),left:!I&&s&&"left"===h?x:0,...!I&&l?{minWidth:l}:{},...!I&&a?{maxWidth:a}:{},...!I&&d?{width:d}:{}},{key:W,...D}=n(null!=f&&f.sortable?b():void 0);/* @__PURE__ */
-return t("th",{...D,className:c({fixed_column_left:"left"===h,fixed_column_right:"right"===h,fixed_checkbox:I&&"left"===(null==(H=w[g+1])?void 0:H.fixed),pointer:null==f?void 0:f.sortable}),style:N,children:/* @__PURE__ */z("div",{className:"flexbox align-items--center",children:[
-/* @__PURE__ */t(v,{weight:"bold",className:"table-header-title",children:u("Header")}),p&&_&&/* @__PURE__ */t(o,{size:"xsmall",className:"ml-4"}),p&&!_&&/* @__PURE__ */t(B,{size:"xsmall",className:"ml-4"}),!p&&(null==f?void 0:f.sortable)&&/* @__PURE__ */t(o,{size:"xsmall",className:"ml-4 unsorted__icon"})]})},`table_head_${i}_${g}`)})})}export{L as Header};
+import{jsx as t,jsxs as I}from"react/jsx-runtime";import o from"classnames";import{CHECKBOX_DEFAULT_WIDTH as n,calcColumnWidth as j,CHECKBOX_HEADER_ID as v}from"./utils.js";import{Text as B}from"../Text/Text.js";import b from"../SVGIcons/IconArrowDown.js";import G from"../SVGIcons/IconArrowUp.js";function R({headerGroup:e,tableWidth:r,withSelect:s,uniqueKey:a,fixedHeader:i=!1,dataTestId:l=""}){const{key:d,...m}=e.getHeaderGroupProps();/* @__PURE__ */
+return t("tr",{...m,className:o({fixed_header:i}),children:e.headers.map(({id:e,minWidth:i,maxWidth:d,width:m,widthInPercent:c,getHeaderProps:h,fixed:x,columnProps:f,render:u,isSorted:p,isSortedDesc:_,getSortByToggleProps:g},w,H)=>{var N;const T=e===v,W={width:T?n:j(c,r),left:!T&&s&&"left"===x?n:0,...!T&&i?{minWidth:i}:{},...!T&&d?{maxWidth:d}:{},...!T&&m?{width:m}:{}},{key:D,...S}=h(null!=f&&f.sortable?g():void 0);/* @__PURE__ */
+return t("th",{...S,"data-test-id":l?`${l}-header-${e??w}`:"",className:o({fixed_column_left:"left"===x,fixed_column_right:"right"===x,fixed_checkbox:T&&"left"===(null==(N=H[w+1])?void 0:N.fixed),pointer:null==f?void 0:f.sortable}),style:W,children:/* @__PURE__ */I("div",{className:"flexbox align-items--center",children:[
+/* @__PURE__ */t(B,{weight:"bold",className:"table-header-title",children:u("Header")}),p&&_&&/* @__PURE__ */t(b,{size:"xsmall",className:"ml-4"}),p&&!_&&/* @__PURE__ */t(G,{size:"xsmall",className:"ml-4"}),!p&&(null==f?void 0:f.sortable)&&/* @__PURE__ */t(b,{size:"xsmall",className:"ml-4 unsorted__icon"})]})},`table_head_${a}_${w}`)})})}export{R as Header};

package/components/Table/IndeterminateCheckbox.d.ts

@@ -1,5 +1,6 @@
+import { IBaseProps } from '../../type';
 import React from 'react';
-type IndeterminateCheckboxProps = {
+export declare const IndeterminateCheckbox: React.ForwardRefExoticComponent<IBaseProps & {
     indeterminate: boolean;
     checked: boolean;
     disabled: boolean;
@@ -8,6 +9,4 @@ type IndeterminateCheckboxProps = {
             checked: boolean;
         };
     }) => void;
-};
-export declare const IndeterminateCheckbox: React.ForwardRefExoticComponent<IndeterminateCheckboxProps & React.RefAttributes<HTMLInputElement>>;
-export {};
+} & React.RefAttributes<HTMLInputElement>>;

package/components/Table/IndeterminateCheckbox.js

@@ -1 +1 @@
-import{jsx as s}from"react/jsx-runtime";import{forwardRef as l,useRef as d,useEffect as m}from"react";import{Checkbox as h}from"../Checkbox/Checkbox.js";const i=l(({indeterminate:e,checked:t,onChange:r,disabled:a=!1},o)=>{const i=d(null),n=o||i;return m(()=>{n.current.indeterminate=e},[n,e]),/* @__PURE__ */s(h,{disabled:a,value:t,onClick:e=>{r({target:{checked:e}})},ref:n,stopPropagation:!0})});i.displayName="IndeterminateCheckbox";export{i as IndeterminateCheckbox};
+import{jsx as l}from"react/jsx-runtime";import{forwardRef as d,useRef as m,useEffect as h}from"react";import{Checkbox as i}from"../Checkbox/Checkbox.js";const u=d(({indeterminate:e,checked:t,onChange:a,disabled:r=!1,dataTestId:o=""},s)=>{const d=m(null),n=s||d;return h(()=>{n.current.indeterminate=e},[n,e]),/* @__PURE__ */l(i,{disabled:r,value:t,onClick:e=>{a({target:{checked:e}})},ref:n,dataTestId:o,stopPropagation:!0})});u.displayName="IndeterminateCheckbox";export{u as IndeterminateCheckbox};

package/components/Table/Row.d.ts

@@ -1,11 +1,12 @@
+import { IBaseProps } from '../../type';
 import { ReactElement } from 'react';
 import { Row as RowType } from 'react-table';
-type Props = {
+type Props = IBaseProps & {
     row: RowType;
     handleRowClick?: (row: any) => void;
     withSelect: boolean;
     selectedFlatRows: RowType[];
     uniqueKey: string;
 };
-export declare function Row({ row, selectedFlatRows, withSelect, uniqueKey, handleRowClick }: Props): ReactElement;
+export declare function Row({ row, selectedFlatRows, withSelect, uniqueKey, handleRowClick, dataTestId }: Props): ReactElement;
 export {};

package/components/Table/Row.js

@@ -1,3 +1,3 @@
-import{jsx as x}from"react/jsx-runtime";import{useMemo as E}from"react";import l from"classnames";import{CHECKBOX_HEADER_ID as D,CHECKBOX_DEFAULT_WIDTH as H}from"./utils.js";function I({row:e,selectedFlatRows:o,withSelect:i,uniqueKey:t,handleRowClick:n}){const r=E(()=>o.find(l=>l.id===e.id),[o]),{key:s,...c}=e.getRowProps();/* @__PURE__ */
-return x("tr",{...c,className:l({selected:!!r}),onClick:()=>null==n?void 0:n(e.original),children:e.cells.map(({getCellProps:e,column:o,render:n},r,s)=>{var c;const d=o.id===D,{key:a,...f}=e();/* @__PURE__ */
-return x("td",{...f,style:{left:!d&&i&&"left"===(null==o?void 0:o.fixed)?H:0},className:l({fixed_column_left:"left"===(null==o?void 0:o.fixed),fixed_column_right:"right"===(null==o?void 0:o.fixed),fixed_checkbox:d&&"left"===(null==(c=s[r+1].column)?void 0:c.fixed)}),onClick:e=>{d&&e.stopPropagation(),f.onClick&&f.onClick(e)},children:n("Cell")},`table_cell_${t}_${r}`)})})}export{I as Row};
+import{jsx as l}from"react/jsx-runtime";import{useMemo as E}from"react";import $ from"classnames";import{CHECKBOX_HEADER_ID as D,CHECKBOX_DEFAULT_WIDTH as H}from"./utils.js";function K({row:e,selectedFlatRows:i,withSelect:t,uniqueKey:o,handleRowClick:d,dataTestId:n=""}){const r=E(()=>i.find(l=>l.id===e.id),[i]),{key:s,...a}=e.getRowProps();/* @__PURE__ */
+return l("tr",{...a,"data-test-id":n?`${n}-row-${e.index}`:"",className:$({selected:!!r}),onClick:()=>null==d?void 0:d(e.original),children:e.cells.map(({getCellProps:i,column:d,render:r},s,a)=>{var c;const f=d.id===D,{key:m,...u}=i();/* @__PURE__ */
+return l("td",{...u,"data-test-id":n?`${n}-row-${e.index}-cell-${d.id??s}`:"",style:{left:!f&&t&&"left"===(null==d?void 0:d.fixed)?H:0},className:$({fixed_column_left:"left"===(null==d?void 0:d.fixed),fixed_column_right:"right"===(null==d?void 0:d.fixed),fixed_checkbox:f&&"left"===(null==(c=a[s+1].column)?void 0:c.fixed)}),onClick:e=>{f&&e.stopPropagation(),u.onClick&&u.onClick(e)},children:r("Cell")},`table_cell_${o}_${s}`)})})}export{K as Row};

package/components/Table/Table.d.ts

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 import { TTableProps } from './types';
-export declare function Table({ columns, data, onChange, fixedHeader, withSelect, handleRowClick, className, language, containerRefHandler, submitButtons }: TTableProps): ReactElement;
+export declare function Table({ columns, data, onChange, fixedHeader, withSelect, handleRowClick, className, language, containerRefHandler, submitButtons, dataTestId }: TTableProps): ReactElement;

package/components/Table/Table.js

@@ -1,6 +1,6 @@
-import{jsxs as u,jsx as s}from"react/jsx-runtime";import{useRef as W,useState as $,useId as j,useMemo as D,useCallback as T,useEffect as _}from"react";import{useTable as q,useSortBy as B,useRowSelect as F}from"react-table";import{setSelectedRows as G}from"./utils.js";import{Row as J}from"./Row.js";import{Header as K}from"./Header.js";import M from"classnames";import{useDispatchEventOnScroll as V}from"../../hooks/useDispatchEventOnScroll.js";import{Button as v}from"../Button/Button.js";import{TABLE_LOCALIZATION as Z}from"./localization.js";import{setTranslationValue as Q}from"../../utils/helpers.js";import U from"../SVGIcons/IconCheckmark.js";import X from"../SVGIcons/IconDismiss.js";function fe({columns:e,data:t,onChange:r,fixedHeader:o,withSelect:a=!1,handleRowClick:l,className:n,language:i="en",containerRefHandler:c,submitButtons:m}){const d=W(null),[p,f]=$(400),h=j(),w=V(),b=D(()=>{const t=e=>"left"===e.fixed,s=e=>"right"===e.fixed;return e.sort((e,r)=>t(e)&&!t(r)?-1:!t(e)&&t(r)||s(e)&&!s(r)?1:!s(e)&&s(r)?-1:0),[...e]},[e]),{getTableProps:g,getTableBodyProps:S,selectedFlatRows:x,headerGroups:y,rows:R,prepareRow:C,toggleAllRowsSelected:k,state:I}=q({columns:b,data:t},B,F,e=>G(e,a)),L=T(()=>{var e;d.current&&f(null==(e=d.current)?void 0:e.offsetWidth)},[d.current]);_(()=>{null==r||r(I)},[JSON.stringify(I)]),_(()=>{var e;return window.addEventListener("resize",L),d.current&&f(null==(e=d.current)?void 0:e.offsetWidth),()=>{window.removeEventListener("resize",L)}},[d.current]);const z=T(()=>{k(!1)},[]);/* @__PURE__ */
-return u("div",{ref:c,children:[a&&x.length>0&&/* @__PURE__ */u("div",{className:"table-wrapper__selected-rows",children:[
-/* @__PURE__ */s(v,{buttonText:Q(Z[i].n_selected||"",x.length),onClick:z,type:"tertiary",size:"medium",iconProps:{alignment:"left",Component:X}}),null==m?void 0:m.map(({buttonText:e,isLoading:t,onClick:r,iconProps:o})=>/* @__PURE__ */s(v,{iconProps:o||{alignment:"left",Component:U},onClick:e=>{r(e,I,z)},buttonText:e||"Submit",type:"secondary",size:"medium",className:"mr-8",isLoading:t}))]}),
-/* @__PURE__ */s("div",{onScroll:w,className:M("table-wrapper scrollbar scrollbar--horizontal scrollbar--vertical",n,{"table-row-clickable":!!l}),style:{maxHeight:null==o?void 0:o.y},children:/* @__PURE__ */u("table",{...g(),ref:d,children:[
-/* @__PURE__ */s("thead",{children:y.map((e,t)=>/* @__PURE__ */s(K,{withSelect:a,fixedHeader:!!o,headerGroup:e,tableWidth:p,uniqueKey:h},`table_head_${h}_${t}`))}),
-/* @__PURE__ */s("tbody",{...S(),children:R.map(e=>(C(e),/* @__PURE__ */s(J,{handleRowClick:l,withSelect:a,selectedFlatRows:x,row:e,uniqueKey:h},`table_row_${h}_${e.id}`)))})]})})]})}export{fe as Table};
+import{jsxs as b,jsx as s}from"react/jsx-runtime";import{useRef as D,useState as q,useId as B,useMemo as F,useCallback as v,useEffect as R}from"react";import{useTable as G,useSortBy as J,useRowSelect as K}from"react-table";import{setSelectedRows as M}from"./utils.js";import{Row as V}from"./Row.js";import{Header as Z}from"./Header.js";import I from"classnames";import{useDispatchEventOnScroll as Q}from"../../hooks/useDispatchEventOnScroll.js";import{Button as S}from"../Button/Button.js";import{TABLE_LOCALIZATION as U}from"./localization.js";import{setTranslationValue as X}from"../../utils/helpers.js";import Y from"../SVGIcons/IconCheckmark.js";import H from"../SVGIcons/IconDismiss.js";function ue({columns:e,data:t,onChange:r,fixedHeader:a,withSelect:o=!1,handleRowClick:l,className:n,language:i="en",containerRefHandler:c,submitButtons:d,dataTestId:m=""}){const u=D(null),[p,f]=q(400),h=B(),w=Q(),g=F(()=>{const t=e=>"left"===e.fixed,s=e=>"right"===e.fixed;return e.sort((e,r)=>t(e)&&!t(r)?-1:!t(e)&&t(r)||s(e)&&!s(r)?1:!s(e)&&s(r)?-1:0),[...e]},[e]),{getTableProps:T,getTableBodyProps:j,selectedFlatRows:x,headerGroups:y,rows:C,prepareRow:k,toggleAllRowsSelected:_,state:L}=G({columns:g,data:t},J,K,e=>M(e,o,m)),$=v(()=>{var e;u.current&&f(null==(e=u.current)?void 0:e.offsetWidth)},[u.current]);R(()=>{null==r||r(L)},[JSON.stringify(L)]),R(()=>{var e;return window.addEventListener("resize",$),u.current&&f(null==(e=u.current)?void 0:e.offsetWidth),()=>{window.removeEventListener("resize",$)}},[u.current]);const z=v(()=>{_(!1)},[]);/* @__PURE__ */
+return b("div",{ref:c,"data-test-id":m,children:[o&&x.length>0&&/* @__PURE__ */b("div",{className:"table-wrapper__selected-rows",children:[
+/* @__PURE__ */s(S,{buttonText:X(U[i].n_selected||"",x.length),onClick:z,type:"tertiary",size:"medium",iconProps:{alignment:"left",Component:H},dataTestId:m?`${m}-clear-selected`:""}),null==d?void 0:d.map(({buttonText:e,isLoading:t,onClick:r,iconProps:a},o)=>/* @__PURE__ */s(S,{iconProps:a||{alignment:"left",Component:Y},onClick:e=>{r(e,L,z)},buttonText:e||"Submit",type:"secondary",size:"medium",className:"mr-8",isLoading:t,dataTestId:m?`${m}-submit-${o}`:""}))]}),
+/* @__PURE__ */s("div",{onScroll:w,className:I("table-wrapper scrollbar scrollbar--horizontal scrollbar--vertical",n,{"table-row-clickable":!!l}),style:{maxHeight:null==a?void 0:a.y},children:/* @__PURE__ */b("table",{...T(),ref:u,children:[
+/* @__PURE__ */s("thead",{children:y.map((e,t)=>/* @__PURE__ */s(Z,{withSelect:o,fixedHeader:!!a,headerGroup:e,tableWidth:p,uniqueKey:h,dataTestId:m},`table_head_${h}_${t}`))}),
+/* @__PURE__ */s("tbody",{...j(),children:C.map(e=>(k(e),/* @__PURE__ */s(V,{handleRowClick:l,withSelect:o,selectedFlatRows:x,row:e,uniqueKey:h,dataTestId:m},`table_row_${h}_${e.id}`)))})]})})]})}export{ue as Table};

package/components/Table/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 import { Column, TableState } from 'react-table';
 import { TButtonPropTypes } from '../Button/types';
 type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;
@@ -15,7 +16,7 @@ export type TColumn = Column & TColumnFields;
 export interface IButtonPropTypes extends Omit<TButtonPropTypes, 'onClick'> {
     onClick: (event: TClickEventType, data: any, clearRowSelection?: () => void) => void;
 }
-export type TTableProps = {
+export type TTableProps = IBaseProps & {
     className?: string;
     columns: TColumn[];
     data: any[];

package/components/Table/utils.d.ts

@@ -1,5 +1,5 @@
 import { Hooks } from 'react-table';
 export declare const CHECKBOX_HEADER_ID = "selection";
 export declare const CHECKBOX_DEFAULT_WIDTH = 48;
-export declare function setSelectedRows(hooks: Hooks, withSelect: boolean): void;
+export declare function setSelectedRows(hooks: Hooks, withSelect: boolean, dataTestId?: string): void;
 export declare function calcColumnWidth(percent: number, tableWidth: number): number;

package/components/Table/utils.js

@@ -1,3 +1,3 @@
-import{jsx as s}from"react/jsx-runtime";import{IndeterminateCheckbox as r}from"./IndeterminateCheckbox.js";const u="selection",S=48;function E(e,t){t&&e.visibleColumns.push(e=>[{id:u,Header:({getToggleAllRowsSelectedProps:e,rows:t,state:o,toggleRowSelected:n})=>{const i=t.filter(e=>!("enableSelection"in e.original)||e.original.enableSelection),l=i.every(e=>o.selectedRowIds[e.id]),c=i.some(e=>o.selectedRowIds[e.id]);/* @__PURE__ */
-return s(r,{...e({checked:l,indeterminate:!l&&c,disabled:0===i.length}),onChange:e=>{const t=e.target.checked;i.forEach(e=>{n(e.id,t)})}})},Cell:({row:e})=>{const t="enableSelection"in e.original&&!e.original.enableSelection;/* @__PURE__ */
-return s(r,{...e.getToggleRowSelectedProps({disabled:t})})}},...e])}function R(e,t){return e*t/100}export{S as CHECKBOX_DEFAULT_WIDTH,u as CHECKBOX_HEADER_ID,R as calcColumnWidth,E as setSelectedRows};
+import{jsx as r}from"react/jsx-runtime";import{IndeterminateCheckbox as a}from"./IndeterminateCheckbox.js";const C="selection",E=48;function R(e,t,o=""){t&&e.visibleColumns.push(e=>[{id:C,Header:({getToggleAllRowsSelectedProps:e,rows:t,state:n,toggleRowSelected:l})=>{const i=t.filter(e=>!("enableSelection"in e.original)||e.original.enableSelection),s=i.every(e=>n.selectedRowIds[e.id]),c=i.some(e=>n.selectedRowIds[e.id]);/* @__PURE__ */
+return r(a,{...e({checked:s,indeterminate:!s&&c,disabled:0===i.length}),dataTestId:o?`${o}-select-all`:"",onChange:e=>{const t=e.target.checked;i.forEach(e=>{l(e.id,t)})}})},Cell:({row:e})=>{const t="enableSelection"in e.original&&!e.original.enableSelection;/* @__PURE__ */
+return r(a,{...e.getToggleRowSelectedProps({disabled:t}),dataTestId:o?`${o}-row-${e.index}-select`:""})}},...e])}function p(e,t){return e*t/100}export{E as CHECKBOX_DEFAULT_WIDTH,C as CHECKBOX_HEADER_ID,p as calcColumnWidth,R as setSelectedRows};

package/components/TableV2/AdvancedPagination.d.ts

@@ -1,8 +1,9 @@
+import { IBaseProps } from '../../type';
 import type { Table } from '@tanstack/react-table';
-interface PaginationProps<T> {
+interface PaginationProps<T> extends IBaseProps {
     table: Table<T>;
     totalCount: number;
     buttonText?: string;
 }
-export declare function AdvancedPagination<TData>({ table, totalCount, buttonText }: PaginationProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function AdvancedPagination<TData>({ table, totalCount, buttonText, dataTestId }: PaginationProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/TableV2/AdvancedPagination.js

@@ -1,12 +1,12 @@
-import{jsxs as r,jsx as i}from"react/jsx-runtime";import{useState as v,useEffect as C}from"react";import{Input as x}from"../Input/Input.js";import{Button as N}from"../Button/Button.js";import{Select as _}from"../Select/Select/Select.js";import"../Select/MultiSelect/MultiSelect.js";import I from"classnames";import{Text as z}from"../Text/Text.js";import"../../consts/index.js";import"../../context/types.js";import"../../hooks/useScreenSize.js";import"react-hook-form";import"dayjs";import"../../helperComponents/ErrorMessage/consts.js";import"../FileUpload/DropzoneFileUpload/DropzoneFileUpload.js";import"react-dom";import"../Checkbox/Checkbox.js";import"motion/react";import S from"../SVGIcons/IconChevronRight.js";import"../Collapse/CollapseGroup/CollapseGroup.js";import m from"../SVGIcons/IconMore.js";import"../Select/SharedComponents/ContentTop.js";import{OPTIONS as k}from"./constants/index.js";import $ from"../SVGIcons/IconChevronLeft.js";import y from"../SVGIcons/IconChevronDoubleLeft.js";import T from"../SVGIcons/IconChevronDoubleRight.js";function oe({table:e,totalCount:t,buttonText:o}){const[a,n]=v("1"),s=e.getState().pagination.pageIndex,l=e.getState().pagination.pageSize;return C(()=>{e.getPageCount()<Number(a)&&n("1")},[e.getPageCount(),e.getState().pagination]),/* @__PURE__ */r("div",{className:"advanced-table__pagination",children:[
-/* @__PURE__ */i(_,{setSelectedItem:t=>(t=>{t&&e.setPagination({pageIndex:0,pageSize:Number(t)})})(t),selectedItem:`${l}`,className:"no-border",options:k}),
-/* @__PURE__ */r("div",{className:"advanced-table__pagination__right",children:[
-/* @__PURE__ */r(z,{type:"tertiary",children:[s*l+1," - ",(s+1)*l," / ",t]}),
-/* @__PURE__ */r("div",{className:"flexbox align-items--center",children:[
-/* @__PURE__ */i(x,{currentValue:a,size:"small",onChange:t=>(t=>{(!t||/^[1-9]\d*$/.test(t)&&e.getPageCount()>=Number(t))&&n(t)})(t.target.value),className:"advanced-table__pagination__right__input mr-8"}),
-/* @__PURE__ */i(N,{onClick:()=>{const t=a?Number(a)-1:0;e.setPageIndex(t)},type:"secondary",size:"medium",buttonText:o??"Go to page"})]}),
-/* @__PURE__ */r("ul",{className:"pagination",children:[
-/* @__PURE__ */i("li",{className:"previous "+(e.getCanPreviousPage()?"":"disabled"),children:/* @__PURE__ */i("a",{rel:"prev",role:"button",onClick:()=>e.firstPage(),children:/* @__PURE__ */i(y,{size:"small"})})}),
-/* @__PURE__ */i("li",{className:"previous "+(e.getCanPreviousPage()?"":"disabled"),children:/* @__PURE__ */i("a",{rel:"prev",role:"button",onClick:()=>e.previousPage(),children:/* @__PURE__ */i($,{size:"small"})})}),(()=>{const t=s,o=e.getPageCount(),i=[];return o<=7?Array.from({length:o},(e,t)=>t+1):(i.push(1),t<=3?i.push(2,3,4,5,"+++",o):t>o-5?i.push("---",o-4,o-3,o-2,o-1,o):i.push("---",t,t+1,t+2,"+++",o),i)})().map((t,o)=>"---"===t?/* @__PURE__ */i("li",{className:"pagination__more",children:/* @__PURE__ */i("a",{role:"button",onClick:()=>e.setPageIndex(+s-3),children:/* @__PURE__ */i(m,{size:"small"})})},`ellipsis-${o}`):"+++"===t?/* @__PURE__ */i("li",{className:"pagination__more",children:/* @__PURE__ */i("a",{role:"button",onClick:()=>e.setPageIndex(+s+3),children:/* @__PURE__ */i(m,{size:"small"})})},`ellipsis-${o}`):/* @__PURE__ */i("li",{className:I({active:t===s+1}),children:/* @__PURE__ */i("a",{role:"button",onClick:()=>e.setPageIndex(+t-1),children:t})},t)),
-/* @__PURE__ */i("li",{className:"next "+(e.getCanNextPage()?"":"disabled"),children:/* @__PURE__ */i("a",{rel:"next",role:"button",onClick:()=>e.nextPage(),children:/* @__PURE__ */i(S,{size:"small"})})}),
-/* @__PURE__ */i("li",{className:"next "+(e.getCanNextPage()?"":"disabled"),children:/* @__PURE__ */i("a",{rel:"next",role:"button",onClick:()=>e.lastPage(),children:/* @__PURE__ */i(T,{size:"small"})})})]})]})]})}export{oe as AdvancedPagination};
+import{jsxs as a,jsx as o}from"react/jsx-runtime";import{useState as C,useEffect as x}from"react";import{Input as $}from"../Input/Input.js";import{Button as N}from"../Button/Button.js";import{Select as _}from"../Select/Select/Select.js";import"../Select/MultiSelect/MultiSelect.js";import z from"classnames";import{Text as S}from"../Text/Text.js";import"../../consts/index.js";import"../../context/types.js";import"../../hooks/useScreenSize.js";import"react-hook-form";import"dayjs";import"../../helperComponents/ErrorMessage/consts.js";import"../FileUpload/DropzoneFileUpload/DropzoneFileUpload.js";import"react-dom";import"../Checkbox/Checkbox.js";import"motion/react";import k from"../SVGIcons/IconChevronRight.js";import"../Collapse/CollapseGroup/CollapseGroup.js";import g from"../SVGIcons/IconMore.js";import"../Select/SharedComponents/ContentTop.js";import{OPTIONS as y}from"./constants/index.js";import R from"../SVGIcons/IconChevronLeft.js";import j from"../SVGIcons/IconChevronDoubleLeft.js";import A from"../SVGIcons/IconChevronDoubleRight.js";function te({table:e,totalCount:t,buttonText:s,dataTestId:i=""}){const[n,r]=C("1"),l=e.getState().pagination.pageIndex,c=e.getState().pagination.pageSize;return x(()=>{e.getPageCount()<Number(n)&&r("1")},[e.getPageCount(),e.getState().pagination]),/* @__PURE__ */a("div",{className:"advanced-table__pagination","data-test-id":i,children:[
+/* @__PURE__ */o(_,{setSelectedItem:t=>(t=>{t&&e.setPagination({pageIndex:0,pageSize:Number(t)})})(t),selectedItem:`${c}`,className:"no-border",options:y,dataTestId:i?`${i}-page-size`:""}),
+/* @__PURE__ */a("div",{className:"advanced-table__pagination__right",children:[
+/* @__PURE__ */a(S,{type:"tertiary",children:[l*c+1," - ",(l+1)*c," / ",t]}),
+/* @__PURE__ */a("div",{className:"flexbox align-items--center",children:[
+/* @__PURE__ */o($,{currentValue:n,size:"small",onChange:t=>(t=>{(!t||/^[1-9]\d*$/.test(t)&&e.getPageCount()>=Number(t))&&r(t)})(t.target.value),className:"advanced-table__pagination__right__input mr-8",dataTestId:i?`${i}-page-input`:""}),
+/* @__PURE__ */o(N,{onClick:()=>{const t=n?Number(n)-1:0;e.setPageIndex(t)},type:"secondary",size:"medium",buttonText:s??"Go to page",dataTestId:i?`${i}-goto`:""})]}),
+/* @__PURE__ */a("ul",{className:"pagination","data-test-id":i?`${i}-pagination`:"",children:[
+/* @__PURE__ */o("li",{className:"previous "+(e.getCanPreviousPage()?"":"disabled"),children:/* @__PURE__ */o("a",{rel:"prev",role:"button",onClick:()=>e.firstPage(),"data-test-id":i?`${i}-first`:"",children:/* @__PURE__ */o(j,{size:"small"})})}),
+/* @__PURE__ */o("li",{className:"previous "+(e.getCanPreviousPage()?"":"disabled"),children:/* @__PURE__ */o("a",{rel:"prev",role:"button",onClick:()=>e.previousPage(),"data-test-id":i?`${i}-prev`:"",children:/* @__PURE__ */o(R,{size:"small"})})}),(()=>{const t=l,a=e.getPageCount(),o=[];return a<=7?Array.from({length:a},(e,t)=>t+1):(o.push(1),t<=3?o.push(2,3,4,5,"+++",a):t>a-5?o.push("---",a-4,a-3,a-2,a-1,a):o.push("---",t,t+1,t+2,"+++",a),o)})().map((t,a)=>"---"===t?/* @__PURE__ */o("li",{className:"pagination__more",children:/* @__PURE__ */o("a",{role:"button",onClick:()=>e.setPageIndex(+l-3),"data-test-id":i?`${i}-ellipsis-prev`:"",children:/* @__PURE__ */o(g,{size:"small"})})},`ellipsis-${a}`):"+++"===t?/* @__PURE__ */o("li",{className:"pagination__more",children:/* @__PURE__ */o("a",{role:"button",onClick:()=>e.setPageIndex(+l+3),"data-test-id":i?`${i}-ellipsis-next`:"",children:/* @__PURE__ */o(g,{size:"small"})})},`ellipsis-${a}`):/* @__PURE__ */o("li",{className:z({active:t===l+1}),children:/* @__PURE__ */o("a",{role:"button",onClick:()=>e.setPageIndex(+t-1),"data-test-id":i?`${i}-page-${t}`:"",children:t})},t)),
+/* @__PURE__ */o("li",{className:"next "+(e.getCanNextPage()?"":"disabled"),children:/* @__PURE__ */o("a",{rel:"next",role:"button",onClick:()=>e.nextPage(),"data-test-id":i?`${i}-next`:"",children:/* @__PURE__ */o(k,{size:"small"})})}),
+/* @__PURE__ */o("li",{className:"next "+(e.getCanNextPage()?"":"disabled"),children:/* @__PURE__ */o("a",{rel:"next",role:"button",onClick:()=>e.lastPage(),"data-test-id":i?`${i}-last`:"",children:/* @__PURE__ */o(A,{size:"small"})})})]})]})]})}export{te as AdvancedPagination};

package/components/TableV2/ColumnHeader.d.ts

@@ -1,9 +1,10 @@
+import { IBaseProps } from '../../type';
 import type { CSSProperties } from 'react';
 import type { Header } from '@tanstack/react-table';
-interface DraggableColumnHeaderProps<TData> {
+interface DraggableColumnHeaderProps<TData> extends IBaseProps {
     header: Header<TData, unknown>;
     isPinned?: boolean;
     pinnedStyles: CSSProperties;
 }
-export declare function ColumnHeader<TData>({ header, pinnedStyles }: DraggableColumnHeaderProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function ColumnHeader<TData>({ header, pinnedStyles, dataTestId }: DraggableColumnHeaderProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/TableV2/ColumnHeader.js

@@ -1,6 +1,6 @@
-import{jsxs as i,jsx as t}from"react/jsx-runtime";import{flexRender as g}from"@tanstack/react-table";import{useSortable as u}from"@dnd-kit/sortable";import x from"../SVGIcons/IconArrowDown.js";import f from"../SVGIcons/IconArrowSort.js";import d from"../SVGIcons/IconArrowUp.js";import{Text as p}from"../Text/Text.js";import z from"classnames";function H({header:e,pinnedStyles:o}){const{attributes:n,listeners:s,setNodeRef:r,transform:a,transition:l,isDragging:c}=u({id:e.id}),m=a?{transform:`translate3d(${a.x}px, ${a.y}px, 0)`,transition:l,minWidth:e.getSize(),position:"relative",zIndex:c?1:0}:{minWidth:e.getSize(),position:"relative",zIndex:c?1:0};/* @__PURE__ */
-return i("th",{ref:r,style:{...m,...o},className:z("select-none",{"with-checkbox":"select"===e.column.id,"actions-header":"actions"===e.column.id,"cursor-pointer":e.column.getCanSort()}),...n,children:[
-/* @__PURE__ */i("div",{onClick:e.column.getToggleSortingHandler(),className:"flexbox align-items--center",children:[
-/* @__PURE__ */t("div",{...s,children:/* @__PURE__ */t(p,{className:"text-left",weight:"bold",children:g(e.column.columnDef.header,e.getContext())})}),
-/* @__PURE__ */t("span",{className:"ml-4",children:e.column.getCanSort()&&("asc"===e.column.getIsSorted()?/* @__PURE__ */t(d,{size:"xsmall"}):"desc"===e.column.getIsSorted()?/* @__PURE__ */t(x,{size:"xsmall"}):/* @__PURE__ */t(f,{size:"xsmall"}))})]}),
-/* @__PURE__ */t("div",{onMouseDown:e.getResizeHandler(),onTouchStart:e.getResizeHandler(),className:"resize-icon select-none touch-none"})]})}export{H as ColumnHeader};
+import{jsxs as s,jsx as t}from"react/jsx-runtime";import{flexRender as g}from"@tanstack/react-table";import{useSortable as x}from"@dnd-kit/sortable";import f from"../SVGIcons/IconArrowDown.js";import p from"../SVGIcons/IconArrowSort.js";import d from"../SVGIcons/IconArrowUp.js";import{Text as z}from"../Text/Text.js";import S from"classnames";function I({header:e,pinnedStyles:o,dataTestId:n=""}){const{attributes:r,listeners:i,setNodeRef:a,transform:l,transition:c,isDragging:m}=x({id:e.id}),u=l?{transform:`translate3d(${l.x}px, ${l.y}px, 0)`,transition:c,minWidth:e.getSize(),position:"relative",zIndex:m?1:0}:{minWidth:e.getSize(),position:"relative",zIndex:m?1:0};/* @__PURE__ */
+return s("th",{ref:a,"data-test-id":n?`${n}-header-${e.column.id}`:"",style:{...u,...o},className:S("select-none",{"with-checkbox":"select"===e.column.id,"actions-header":"actions"===e.column.id,"cursor-pointer":e.column.getCanSort()}),...r,children:[
+/* @__PURE__ */s("div",{onClick:e.column.getToggleSortingHandler(),"data-test-id":n?`${n}-sort-${e.column.id}`:"",className:"flexbox align-items--center",children:[
+/* @__PURE__ */t("div",{...i,children:/* @__PURE__ */t(z,{className:"text-left",weight:"bold",children:g(e.column.columnDef.header,e.getContext())})}),
+/* @__PURE__ */t("span",{className:"ml-4",children:e.column.getCanSort()&&("asc"===e.column.getIsSorted()?/* @__PURE__ */t(d,{size:"xsmall"}):"desc"===e.column.getIsSorted()?/* @__PURE__ */t(f,{size:"xsmall"}):/* @__PURE__ */t(p,{size:"xsmall"}))})]}),
+/* @__PURE__ */t("div",{onMouseDown:e.getResizeHandler(),onTouchStart:e.getResizeHandler(),className:"resize-icon select-none touch-none"})]})}export{I as ColumnHeader};

package/components/TableV2/IndeterminateCheckbox.d.ts

@@ -1,5 +1,6 @@
+import { IBaseProps } from '../../type';
 import React from 'react';
-type IndeterminateCheckboxProps = {
+export declare const IndeterminateCheckbox: React.ForwardRefExoticComponent<IBaseProps & {
     indeterminate: boolean;
     checked: boolean;
     onChange: (e: {
@@ -8,6 +9,4 @@ type IndeterminateCheckboxProps = {
         };
     }) => void;
     disabled?: boolean;
-};
-export declare const IndeterminateCheckbox: React.ForwardRefExoticComponent<IndeterminateCheckboxProps & React.RefAttributes<HTMLInputElement>>;
-export {};
+} & React.RefAttributes<HTMLInputElement>>;

package/components/TableV2/IndeterminateCheckbox.js

@@ -1,2 +1,2 @@
-import{jsx as c}from"react/jsx-runtime";import{forwardRef as m,useRef as f,useEffect as d}from"react";import{Checkbox as h}from"../Checkbox/Checkbox.js";import u from"classnames";const x=m(({indeterminate:e,checked:a,onChange:t,disabled:s},r)=>{const o=f(null),i=r??o;d(()=>{i.current.indeterminate=e},[i,e]);/* @__PURE__ */
-return c("div",{className:"actions-list",children:/* @__PURE__ */c(h,{className:u("actions-list__checkbox",{"active-checkbox":a}),value:a,disabled:s,onClick:e=>{t({target:{checked:e}})},ref:i})})});x.displayName="IndeterminateCheckbox";export{x as IndeterminateCheckbox};
+import{jsx as c}from"react/jsx-runtime";import{forwardRef as f,useRef as d,useEffect as h}from"react";import{Checkbox as u}from"../Checkbox/Checkbox.js";import x from"classnames";const k=f(({indeterminate:e,checked:a,onChange:t,disabled:s,dataTestId:r=""},o)=>{const i=d(null),n=o??i;h(()=>{n.current.indeterminate=e},[n,e]);/* @__PURE__ */
+return c("div",{className:"actions-list",children:/* @__PURE__ */c(u,{className:x("actions-list__checkbox",{"active-checkbox":a}),value:a,disabled:s,onClick:e=>{t({target:{checked:e}})},ref:n,dataTestId:r})})});k.displayName="IndeterminateCheckbox";export{k as IndeterminateCheckbox};

package/components/TableV2/Table.d.ts

@@ -1,3 +1,3 @@
 import type { TTableProps } from './types';
 import 'react-loading-skeleton/dist/skeleton.css';
-export declare function Table<TData>({ data, columns, isLoading, hasError, isActionsVisible, totalCount, emptyTitle, emptySubTitle, emptyIllustration, withSelect, withBorder, defaultPageIndex, defaultPageSize, defaultHiddenColumns, collapsibleRows, renderExpandedContent, renderHeader, renderFooter, onSortChange, onRowClick, tableSettings, onRowSelection, onColumnSizing, onPaginationChange }: TTableProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<TData>({ data, dataTestId, columns, isLoading, hasError, isActionsVisible, totalCount, emptyTitle, emptySubTitle, emptyIllustration, withSelect, withBorder, defaultPageIndex, defaultPageSize, defaultHiddenColumns, collapsibleRows, renderExpandedContent, renderHeader, renderFooter, onSortChange, onRowClick, tableSettings, onRowSelection, onColumnSizing, onPaginationChange }: TTableProps<TData>): import("react/jsx-runtime").JSX.Element;

package/components/TableV2/Table.js

@@ -1,8 +1,8 @@
-import{jsx as t,jsxs as h,Fragment as Q}from"react/jsx-runtime";import X,{useState as Y,useCallback as Z,useMemo as C}from"react";import{flexRender as y}from"@tanstack/react-table";import{DndContext as F,closestCenter as G,DragOverlay as ee}from"@dnd-kit/core";import{SortableContext as ne,horizontalListSortingStrategy as te}from"@dnd-kit/sortable";import{ColumnHeader as ie}from"./ColumnHeader.js";import le from"react-loading-skeleton";import{useTableControl as oe}from"./hooks/useTableControl.js";import{Text as ae}from"../Text/Text.js";import o from"classnames";import{Empty as se}from"../Empty/Empty.js";import{Button as re}from"../Button/Button.js";import ce from"../SVGIcons/IconChevronDown.js";import de from"../SVGIcons/IconChevronUp.js";import"react-loading-skeleton/dist/skeleton.css";const me=({row:e,expandedRows:n,onToggle:a})=>{var l,i,r;return(null==(l=e.original)?void 0:l.subRows)&&(null==(r=null==(i=e.original)?void 0:i.subRows)?void 0:r.length)>0?/* @__PURE__ */t(re,{type:"tertiary",size:"medium",className:o("advanced-table__expand-button"),iconProps:{Component:n.has(e.id)?de:ce},onClick:t=>{t.stopPropagation(),a(e.id)}}):null};function _e({data:e,columns:n,isLoading:a,hasError:l,isActionsVisible:i=!1,totalCount:r=0,emptyTitle:d,emptySubTitle:s,emptyIllustration:c,withSelect:m=!1,withBorder:g=!0,defaultPageIndex:u,defaultPageSize:p,defaultHiddenColumns:b,collapsibleRows:S=!1,renderExpandedContent:x,renderHeader:f,renderFooter:w,onSortChange:v,onRowClick:z,tableSettings:k,onRowSelection:D,onColumnSizing:I,onPaginationChange:P}){const[_,R]=Y(/* @__PURE__ */new Set),T=Z(e=>{R(t=>{const n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},[]),j=C(()=>({id:"expand",accessorKey:"expand",header:()=>/* @__PURE__ */t("span",{style:{display:"none"},children:"Expand"}),size:50,minSize:50,maxSize:50,cell:({row:e})=>/* @__PURE__ */t(me,{row:e,expandedRows:_,onToggle:T}),meta:{enableHiding:!1,enableColumnDragging:!1,enablePinning:!0,enableResizing:!1,headerVisible:!1,enableSorting:!1}}),[_,T]),{table:N,sensors:E,handleDragStart:H,handleDragEnd:V,handleDragCancel:A,activeHeader:B}=oe({data:e,tableSettings:k,columns:S?[j,...n]:n,withSelect:m,totalCount:r,defaultPageIndex:u,defaultPageSize:p,defaultHiddenColumns:b,onSortChange:v,onRowSelection:D,onColumnSizing:I,onPaginationChange:P}),M=null==f?void 0:f(N),$=null==w?void 0:w(N),L=e=>{const t=e.getIsPinned();return{left:"left"===t?`${e.getStart("left")}px`:void 0,right:"right"===t?`${e.getAfter("right")}px`:void 0,position:t?"sticky":"relative",backgroundColor:t?"white":void 0,minWidth:e.getSize(),zIndex:t?1:0}},W=C(()=>({minWidth:null!=e&&e.length?N.getCenterTotalSize():void 0}),[null==e?void 0:e.length,N]),K=C(()=>Array.from({length:N.getState().pagination.pageSize}),[N.getState().pagination.pageSize]);/* @__PURE__ */
-return h("div",{className:o("advanced-table",{"with-border":g}),children:[M,
-/* @__PURE__ */t("div",{className:o("advanced-table__inner scrollbar scrollbar--horizontal scrollbar--vertical"),children:/* @__PURE__ */h(F,{sensors:E,collisionDetection:G,onDragStart:H,onDragEnd:V,onDragCancel:A,children:[
-/* @__PURE__ */t("div",{children:/* @__PURE__ */t("table",{style:W,children:a||null!=e&&e.length&&!l?/* @__PURE__ */h(Q,{children:[
-/* @__PURE__ */t("thead",{className:o("advanced-table__thead"),children:N.getHeaderGroups().map(e=>/* @__PURE__ */t("tr",{children:/* @__PURE__ */t(ne,{items:e.headers.map(e=>e.id),strategy:te,children:e.headers.map(e=>"actions"!==e.id||i?/* @__PURE__ */t(ie,{pinnedStyles:{...L(e.column)},header:e},e.id):null)})},e.id))}),
-/* @__PURE__ */t("tbody",{children:a?K.map((e,n)=>/* @__PURE__ */t("tr",{children:N.getVisibleFlatColumns().map(e=>/* @__PURE__ */t("td",{className:o({"with-checkbox":"select"===e.id,"pinned-cell":e.getIsPinned(),"action-column":"actions"===e.id&&!i}),style:{...L(e)},children:/* @__PURE__ */t(le,{})},e.id))},`skeleton-row-${n}`)):N.getRowModel().rows.map(e=>/* @__PURE__ */h(X.Fragment,{children:[
-/* @__PURE__ */t("tr",{className:o({selected:e.getIsSelected()}),children:e.getVisibleCells().map(n=>/* @__PURE__ */t("td",{className:o({"with-checkbox":"select"===n.column.id,"pinned-cell":n.column.getIsPinned(),"action-column":"actions"===n.column.id&&!i,"expand-column":"expand"===n.column.id}),id:n.id,onClick:()=>((e,t)=>{"actions"!==e.id&&"select"!==e.id&&z&&z(t)})(n.column,e),style:{...L(n.column)},children:"actions"!==n.column.id||i?y(n.column.columnDef.cell,n.getContext()):/* @__PURE__ */t("div",{className:o("actions-list__right"),children:y(n.column.columnDef.cell,n.getContext())})},n.id))}),S&&_.has(e.id)&&x&&/* @__PURE__ */t("tr",{className:o("advanced-table__expanded-row"),children:/* @__PURE__ */t("td",{colSpan:e.getVisibleCells().length,children:x(e)})})]},e.id))})]}):/* @__PURE__ */t(se,{mainMessage:d,paragraphMessage:s,illustration:c})})}),
-/* @__PURE__ */t(ee,{dropAnimation:null,children:B&&/* @__PURE__ */t("table",{style:{width:B.getSize()},children:/* @__PURE__ */t("thead",{children:/* @__PURE__ */t("tr",{children:/* @__PURE__ */t("th",{className:o("draggable-col"),style:{width:B.getSize()},children:/* @__PURE__ */t(ae,{weight:"bold",children:y(B.column.columnDef.header,B.getContext())})})})})})})]})}),!!e.length&&!l&&$]})}export{_e as Table};
+import{jsx as t,jsxs as p,Fragment as Z}from"react/jsx-runtime";import F,{useState as G,useCallback as T,useMemo as y}from"react";import{flexRender as v}from"@tanstack/react-table";import{DndContext as I,closestCenter as ee,DragOverlay as ne}from"@dnd-kit/core";import{SortableContext as te,horizontalListSortingStrategy as ie}from"@dnd-kit/sortable";import{ColumnHeader as le}from"./ColumnHeader.js";import oe from"react-loading-skeleton";import{useTableControl as ae}from"./hooks/useTableControl.js";import{Text as se}from"../Text/Text.js";import a from"classnames";import{Empty as re}from"../Empty/Empty.js";import{Button as ce}from"../Button/Button.js";import de from"../SVGIcons/IconChevronDown.js";import me from"../SVGIcons/IconChevronUp.js";import"react-loading-skeleton/dist/skeleton.css";const ge=({row:e,expandedRows:n,onToggle:l,dataTestId:o=""})=>{var i,d,r;return(null==(i=e.original)?void 0:i.subRows)&&(null==(r=null==(d=e.original)?void 0:d.subRows)?void 0:r.length)>0?/* @__PURE__ */t(ce,{type:"tertiary",size:"medium",className:a("advanced-table__expand-button"),iconProps:{Component:n.has(e.id)?me:de},dataTestId:o?`${o}-expand-${e.index}`:"",onClick:t=>{t.stopPropagation(),l(e.id)}}):null};function _e({data:e,dataTestId:n="",columns:l,isLoading:o,hasError:i,isActionsVisible:d=!1,totalCount:r=0,emptyTitle:s,emptySubTitle:c,emptyIllustration:m,withSelect:g=!1,withBorder:h=!0,defaultPageIndex:u,defaultPageSize:b,defaultHiddenColumns:S,collapsibleRows:x=!1,renderExpandedContent:C,renderHeader:w,renderFooter:f,onSortChange:z,onRowClick:k,tableSettings:$,onRowSelection:D,onColumnSizing:P,onPaginationChange:_}){const[R,j]=G(/* @__PURE__ */new Set),N=T(e=>{j(t=>{const a=new Set(t);return a.has(e)?a.delete(e):a.add(e),a})},[]),E=y(()=>({id:"expand",accessorKey:"expand",header:()=>/* @__PURE__ */t("span",{style:{display:"none"},children:"Expand"}),size:50,minSize:50,maxSize:50,cell:({row:e})=>/* @__PURE__ */t(ge,{row:e,expandedRows:R,onToggle:N,dataTestId:n}),meta:{enableHiding:!1,enableColumnDragging:!1,enablePinning:!0,enableResizing:!1,headerVisible:!1,enableSorting:!1}}),[R,N,n]),{table:H,sensors:V,handleDragStart:A,handleDragEnd:B,handleDragCancel:M,activeHeader:L}=ae({data:e,dataTestId:n,tableSettings:$,columns:x?[E,...l]:l,withSelect:g,totalCount:r,defaultPageIndex:u,defaultPageSize:b,defaultHiddenColumns:S,onSortChange:z,onRowSelection:D,onColumnSizing:P,onPaginationChange:_}),W=null==w?void 0:w(H),K=null==f?void 0:f(H),O=e=>{const t=e.getIsPinned();return{left:"left"===t?`${e.getStart("left")}px`:void 0,right:"right"===t?`${e.getAfter("right")}px`:void 0,position:t?"sticky":"relative",backgroundColor:t?"white":void 0,minWidth:e.getSize(),zIndex:t?1:0}},U=y(()=>({minWidth:null!=e&&e.length?H.getCenterTotalSize():void 0}),[null==e?void 0:e.length,H]),q=y(()=>Array.from({length:H.getState().pagination.pageSize}),[H.getState().pagination.pageSize]);/* @__PURE__ */
+return p("div",{"data-test-id":n,className:a("advanced-table",{"with-border":h}),children:[W,
+/* @__PURE__ */t("div",{className:a("advanced-table__inner scrollbar scrollbar--horizontal scrollbar--vertical"),children:/* @__PURE__ */p(I,{sensors:V,collisionDetection:ee,onDragStart:A,onDragEnd:B,onDragCancel:M,children:[
+/* @__PURE__ */t("div",{children:/* @__PURE__ */t("table",{style:U,children:o||null!=e&&e.length&&!i?/* @__PURE__ */p(Z,{children:[
+/* @__PURE__ */t("thead",{className:a("advanced-table__thead"),children:H.getHeaderGroups().map(e=>/* @__PURE__ */t("tr",{children:/* @__PURE__ */t(te,{items:e.headers.map(e=>e.id),strategy:ie,children:e.headers.map(e=>"actions"!==e.id||d?/* @__PURE__ */t(le,{pinnedStyles:{...O(e.column)},header:e,dataTestId:n},e.id):null)})},e.id))}),
+/* @__PURE__ */t("tbody",{children:o?q.map((e,l)=>/* @__PURE__ */t("tr",{"data-test-id":n?`${n}-loader-row-${l}`:"",children:H.getVisibleFlatColumns().map(e=>/* @__PURE__ */t("td",{className:a({"with-checkbox":"select"===e.id,"pinned-cell":e.getIsPinned(),"action-column":"actions"===e.id&&!d}),style:{...O(e)},children:/* @__PURE__ */t(oe,{})},e.id))},`skeleton-row-${l}`)):H.getRowModel().rows.map(e=>/* @__PURE__ */p(F.Fragment,{children:[
+/* @__PURE__ */t("tr",{className:a({selected:e.getIsSelected()}),"data-test-id":n?`${n}-row-${e.index}`:"",children:e.getVisibleCells().map(l=>/* @__PURE__ */t("td",{className:a({"with-checkbox":"select"===l.column.id,"pinned-cell":l.column.getIsPinned(),"action-column":"actions"===l.column.id&&!d,"expand-column":"expand"===l.column.id}),id:l.id,"data-test-id":n?`${n}-row-${e.index}-cell-${l.column.id}`:"",onClick:()=>((e,t)=>{"actions"!==e.id&&"select"!==e.id&&k&&k(t)})(l.column,e),style:{...O(l.column)},children:"actions"!==l.column.id||d?v(l.column.columnDef.cell,l.getContext()):/* @__PURE__ */t("div",{className:a("actions-list__right"),children:v(l.column.columnDef.cell,l.getContext())})},l.id))}),x&&R.has(e.id)&&C&&/* @__PURE__ */t("tr",{className:a("advanced-table__expanded-row"),"data-test-id":n?`${n}-row-${e.index}-expanded`:"",children:/* @__PURE__ */t("td",{colSpan:e.getVisibleCells().length,children:C(e)})})]},e.id))})]}):/* @__PURE__ */t(re,{mainMessage:s,paragraphMessage:c,illustration:m,dataTestId:n?`${n}-empty`:""})})}),
+/* @__PURE__ */t(ne,{dropAnimation:null,children:L&&/* @__PURE__ */t("table",{style:{width:L.getSize()},children:/* @__PURE__ */t("thead",{children:/* @__PURE__ */t("tr",{children:/* @__PURE__ */t("th",{className:a("draggable-col"),style:{width:L.getSize()},children:/* @__PURE__ */t(se,{weight:"bold",children:v(L.column.columnDef.header,L.getContext())})})})})})})]})}),!!e.length&&!i&&K]})}export{_e as Table};

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, 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

@@ -1 +1 @@
-import{jsx as A}from"react/jsx-runtime";import{useReactTable as se,getPaginationRowModel as te,getSortedRowModel as ce,getCoreRowModel as re}from"@tanstack/react-table";import{useSensors as le,useSensor as L,MouseSensor as de,TouchSensor as me}from"@dnd-kit/core";import{useState as t,useMemo as P,useEffect as ae}from"react";import{IndeterminateCheckbox as D}from"../IndeterminateCheckbox.js";import{arrayMove as ue}from"@dnd-kit/sortable";import{loadTableSettings as ge}from"../loadTableSettings.js";import{useTableColumnSettings as fe}from"./useTableColumnSettings.js";import{STORAGE_TYPE as N,TABLE_NAME_PREFIX as he}from"../constants/index.js";function Se({withSelect:e,columns:n,data:o,tableSettings:i,totalCount:l=0,defaultPageSize:a=10,defaultPageIndex:s=0,defaultHiddenColumns:r=[],onSortChange:d,onRowSelection:c,onColumnSizing:u,onPaginationChange:g}){var m;const S=(null==i?void 0:i.persistColumnSettings)===N.LOCAL,C=(null==i?void 0:i.persistColumnSettings)===N.EXTERNAL,f=`${he}-${null==i?void 0:i.tableName}`,b=S&&f?ge(f):{columnVisibility:{},columnSizing:{},columnOrder:[]},[h,p]=t(null),[R,v]=t([]),[w,y]=t({}),[z,M]=t(b.columnSizing??{}),[T,E]=t({...r.reduce((e,n)=>(e[n]=!1,e),{}),...b.columnVisibility}),[O,x]=t({pageIndex:s,pageSize:a}),I=P(()=>{const t=[...n].map(e=>"actions"===e.id?{...e,enableColumnDragging:!1,enableSorting:!1,enableResizing:!1,enableHiding:!1}:e);return e&&t.unshift({id:"select",enableHiding:!1,enableColumnDragging:!1,enablePinning:!0,header:({table:e})=>/* @__PURE__ */A(D,{checked:e.getIsAllRowsSelected(),indeterminate:e.getIsSomeRowsSelected(),onChange:e.getToggleAllRowsSelectedHandler()}),cell:({row:e})=>/* @__PURE__ */A(D,{checked:e.getIsSelected(),disabled:!e.getCanSelect(),indeterminate:e.getIsSomeSelected(),onChange:e.getToggleSelectedHandler()})}),t},[n]),[k,H]=t(null!=(m=b.columnOrder)&&m.length&&b.columnOrder.length===I.length?b.columnOrder:I.map(e=>e.id)),j=k.map(e=>I.find(n=>n.id===e)),V=null==r?void 0:r.reduce((e,n)=>(e[n]=!1,e),{}),_=P(()=>{const e=[];return I.forEach(n=>{n.enablePinning&&n.id&&e.push(n.id)}),{left:e,right:["actions"]}},[I]),G=se({data:o,columns:j,pageCount:Math.ceil(l/O.pageSize),state:{sorting:R,pagination:O,columnOrder:k,columnSizing:z,rowSelection:w,columnVisibility:{...V,...T},columnPinning:_},onPaginationChange:e=>{const n="function"==typeof e?e(O):e;x(n),null==g||g(n)},onColumnSizingChange:e=>{const n="function"==typeof e?e(z):e;M(n),null==u||u(n)},onSortingChange:e=>{const n="function"==typeof e?e(R):e;v(n);const t=n.map(e=>({column:e.id??"",direction:e.desc?"desc":!!e.id&&"asc",timestamp:Date.now()}));null==d||d(t)},onRowSelectionChange:e=>{const n="function"==typeof e?e(w):e;y(n),null==c||c(n)},onColumnVisibilityChange:E,getCoreRowModel:re(),getSortedRowModel:ce(),getPaginationRowModel:te(),columnResizeMode:"onChange",manualSorting:!!d,manualPagination:!!g,enableRowSelection:!0,enableColumnResizing:!0,isMultiSortEvent:()=>!0});fe(G,f,S);const X=le(L(de,{activationConstraint:{distance:8}}),L(me,{activationConstraint:{delay:200,tolerance:5}})),$=h?G.getHeaderGroups()[0].headers.find(e=>e.id===h):null;return ae(()=>{var e;const n={columnVisibility:T,columnOrder:k,columnSizing:z};if(S&&i.tableName){const e=JSON.stringify(n);localStorage.setItem(f,e)}C&&(null==(e=null==i?void 0:i.onColumnSettingsChange)||e.call(i,n))},[T,k,z]),{table:G,activeHeader:$,sensors:X,memoizedColumns:I,handleDragCancel:()=>{p(null),document.body.classList.remove("select-none")},handleDragEnd:e=>{const{active:n,over:t}=e;if(t&&n.id!==t.id){const e=k.indexOf(n.id),o=k.indexOf(t.id),i=j[o];if(!1===(null==i?void 0:i.enableColumnDragging))return;const l=ue(k,e,o);H(l)}p(null),document.body.classList.remove("select-none")},handleDragStart:e=>{p(e.active.id),document.body.classList.add("select-none")}}}export{Se as useTableControl};
+import{jsx as L}from"react/jsx-runtime";import{useReactTable as te,getPaginationRowModel as ce,getSortedRowModel as le,getCoreRowModel as re}from"@tanstack/react-table";import{useSensors as me,useSensor as P,MouseSensor as de,TouchSensor as ae}from"@dnd-kit/core";import{useState as t,useMemo as D,useEffect as ue}from"react";import{IndeterminateCheckbox as N}from"../IndeterminateCheckbox.js";import{arrayMove as ge}from"@dnd-kit/sortable";import{loadTableSettings as fe}from"../loadTableSettings.js";import{useTableColumnSettings as he}from"./useTableColumnSettings.js";import{STORAGE_TYPE as b,TABLE_NAME_PREFIX as Ce}from"../constants/index.js";function ze({withSelect:e,columns:n,data:o,dataTestId:i="",tableSettings:a,totalCount:l=0,defaultPageSize:s=10,defaultPageIndex:d=0,defaultHiddenColumns:r=[],onSortChange:c,onRowSelection:u,onColumnSizing:g,onPaginationChange:m}){var S;const C=(null==a?void 0:a.persistColumnSettings)===b.LOCAL,f=(null==a?void 0:a.persistColumnSettings)===b.EXTERNAL,h=`${Ce}-${null==a?void 0:a.tableName}`,p=C&&h?fe(h):{columnVisibility:{},columnSizing:{},columnOrder:[]},[R,v]=t(null),[w,T]=t([]),[y,z]=t({}),[I,M]=t(p.columnSizing??{}),[x,E]=t({...r.reduce((e,n)=>(e[n]=!1,e),{}),...p.columnVisibility}),[O,k]=t({pageIndex:d,pageSize:s}),A=D(()=>{const t=[...n].map(e=>"actions"===e.id?{...e,enableColumnDragging:!1,enableSorting:!1,enableResizing:!1,enableHiding:!1}:e);return e&&t.unshift({id:"select",enableHiding:!1,enableColumnDragging:!1,enablePinning:!0,header:({table:e})=>/* @__PURE__ */L(N,{checked:e.getIsAllRowsSelected(),indeterminate:e.getIsSomeRowsSelected(),onChange:e.getToggleAllRowsSelectedHandler(),dataTestId:i?`${i}-select-all`:""}),cell:({row:e})=>/* @__PURE__ */L(N,{checked:e.getIsSelected(),disabled:!e.getCanSelect(),indeterminate:e.getIsSomeSelected(),onChange:e.getToggleSelectedHandler(),dataTestId:i?`${i}-row-${e.index}-select`:""})}),t},[n,i]),[H,j]=t(null!=(S=p.columnOrder)&&S.length&&p.columnOrder.length===A.length?p.columnOrder:A.map(e=>e.id)),V=H.map(e=>A.find(n=>n.id===e)),$=null==r?void 0:r.reduce((e,n)=>(e[n]=!1,e),{}),_=D(()=>{const e=[];return A.forEach(n=>{n.enablePinning&&n.id&&e.push(n.id)}),{left:e,right:["actions"]}},[A]),G=te({data:o,columns:V,pageCount:Math.ceil(l/O.pageSize),state:{sorting:w,pagination:O,columnOrder:H,columnSizing:I,rowSelection:y,columnVisibility:{...$,...x},columnPinning:_},onPaginationChange:e=>{const n="function"==typeof e?e(O):e;k(n),null==m||m(n)},onColumnSizingChange:e=>{const n="function"==typeof e?e(I):e;M(n),null==g||g(n)},onSortingChange:e=>{const n="function"==typeof e?e(w):e;T(n);const t=n.map(e=>({column:e.id??"",direction:e.desc?"desc":!!e.id&&"asc",timestamp:Date.now()}));null==c||c(t)},onRowSelectionChange:e=>{const n="function"==typeof e?e(y):e;z(n),null==u||u(n)},onColumnVisibilityChange:E,getCoreRowModel:re(),getSortedRowModel:le(),getPaginationRowModel:ce(),columnResizeMode:"onChange",manualSorting:!!c,manualPagination:!!m,enableRowSelection:!0,enableColumnResizing:!0,isMultiSortEvent:()=>!0});he(G,h,C);const X=me(P(de,{activationConstraint:{distance:8}}),P(ae,{activationConstraint:{delay:200,tolerance:5}})),B=R?G.getHeaderGroups()[0].headers.find(e=>e.id===R):null;return ue(()=>{var e;const n={columnVisibility:x,columnOrder:H,columnSizing:I};if(C&&a.tableName){const e=JSON.stringify(n);localStorage.setItem(h,e)}f&&(null==(e=null==a?void 0:a.onColumnSettingsChange)||e.call(a,n))},[x,H,I]),{table:G,activeHeader:B,sensors:X,memoizedColumns:A,handleDragCancel:()=>{v(null),document.body.classList.remove("select-none")},handleDragEnd:e=>{const{active:n,over:t}=e;if(t&&n.id!==t.id){const e=H.indexOf(n.id),o=H.indexOf(t.id),i=V[o];if(!1===(null==i?void 0:i.enableColumnDragging))return;const a=ge(H,e,o);j(a)}v(null),document.body.classList.remove("select-none")},handleDragStart:e=>{v(e.active.id),document.body.classList.add("select-none")}}}export{ze as useTableControl};

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>;
@@ -5,7 +6,7 @@ export type TRowSelectionState = RowSelectionState;
 export type TColumnSizingState = ColumnSizingState;
 export type TPaginationState = PaginationState;
 export type TPersistColumnSettings = 'localStorage' | 'external';
-export type TTableProps<TData> = {
+export type TTableProps<TData> = IBaseProps & {
     data: (TData & {
         subRows?: TData[];
     })[];
@@ -58,7 +59,7 @@ export interface TableData {
     subRows: TableData[];
     [key: string]: unknown;
 }
-export interface ExpandColumnProps<TData> {
+export interface ExpandColumnProps<TData> extends IBaseProps {
     row: Row<TData>;
     expandedRows: Set<string>;
     onToggle: (rowId: string) => void;

package/components/Text/Text.js

@@ -1,2 +1,2 @@
-import{jsx as p}from"react/jsx-runtime";import h from"classnames";import{noop as y}from"../../utils/helpers.js";const x=e=>{const{children:t,className:i="",type:r="primary",size:s="standard",weight:a="regular",lineHeight:o="medium",as:l="p",dataId:d="",onClick:m=y,id:n="",title:c}=e;/* @__PURE__ */
-return p(l,{id:n,title:c,"data-id":d,onClick:m,className:h("body",s&&`body-${s}`,r&&`color-${r}`,a,o&&`lh-${o}`,i),children:t})};export{x as Text};
+import{jsx as p}from"react/jsx-runtime";import h from"classnames";import{noop as y}from"../../utils/helpers.js";const x=t=>{const{children:e,className:s="",type:i="primary",size:r="standard",weight:a="regular",lineHeight:o="medium",as:l="p",dataTestId:d="",onClick:m=y,id:n="",title:c}=t;/* @__PURE__ */
+return p(l,{id:n,title:c,"data-test-id":d,onClick:m,className:h("body",r&&`body-${r}`,i&&`color-${i}`,a,o&&`lh-${o}`,s),children:e})};export{x as Text};