@hazelcast/ui 1.3.3-next.25 → 1.3.3-next.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/Button.d.ts +2 -1
- package/lib/Button.js.map +1 -1
- package/lib/Icon.d.ts +2 -1
- package/lib/Icon.js +2 -2
- package/lib/Icon.js.map +1 -1
- package/lib/Pagination.js +9 -9
- package/lib/Pagination.js.map +1 -1
- package/lib/Table/Cell.d.ts +5 -3
- package/lib/Table/Cell.js +1 -1
- package/lib/Table/Cell.js.map +1 -1
- package/lib/Table/Cell.module.scss +4 -0
- package/lib/Table/CellWrapper.d.ts +6 -6
- package/lib/Table/CellWrapper.js +6 -6
- package/lib/Table/CellWrapper.js.map +1 -1
- package/lib/Table/EnhancedRenderers.d.ts +8 -10
- package/lib/Table/EnhancedRenderers.js +6 -10
- package/lib/Table/EnhancedRenderers.js.map +1 -1
- package/lib/Table/Header.d.ts +9 -5
- package/lib/Table/Header.js +12 -7
- package/lib/Table/Header.js.map +1 -1
- package/lib/Table/Header.module.scss +6 -2
- package/lib/Table/Row.d.ts +5 -3
- package/lib/Table/Row.js +4 -4
- package/lib/Table/Row.js.map +1 -1
- package/lib/Table/Row.module.scss +8 -0
- package/lib/Table/Table.d.ts +21 -36
- package/lib/Table/Table.js +102 -93
- package/lib/Table/Table.js.map +1 -1
- package/lib/Table/Table.module.scss +4 -0
- package/lib/Table/TableContent.d.ts +7 -7
- package/lib/Table/TableContent.js +20 -14
- package/lib/Table/TableContent.js.map +1 -1
- package/lib/Table/helpers.d.ts +2 -0
- package/lib/Table/helpers.js +10 -0
- package/lib/Table/helpers.js.map +1 -0
- package/lib/Table/tableTypes.d.ts +80 -0
- package/lib/Table/tableTypes.js +2 -0
- package/lib/Table/tableTypes.js.map +1 -0
- package/lib/Table/useTrackTableState.d.ts +3 -0
- package/lib/Table/useTrackTableState.js +30 -0
- package/lib/Table/useTrackTableState.js.map +1 -0
- package/lib/Table/utils.d.ts +16 -0
- package/lib/Table/utils.js +121 -0
- package/lib/Table/utils.js.map +1 -0
- package/package.json +7 -6
package/lib/Button.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import React, { ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react
|
|
|
2
2
|
import { IconProps, IconSize } from './Icon';
|
|
3
3
|
import { TooltipProps } from './Tooltip';
|
|
4
4
|
import { LinkRel, LinkTarget } from './Link';
|
|
5
|
+
import { DataTestProp } from '@hazelcast/helpers';
|
|
5
6
|
export type ButtonKind = 'primary' | 'secondary' | 'danger' | 'transparent';
|
|
6
7
|
export type ButtonVariant = 'contained' | 'outlined' | 'text';
|
|
7
8
|
export type ButtonColor = 'primary' | 'secondary' | 'warning' | 'brand' | 'authPrimary' | 'authSecondary' | 'light';
|
|
@@ -76,7 +77,7 @@ export type ButtonTypeButtonProps = {
|
|
|
76
77
|
loading?: boolean;
|
|
77
78
|
} & Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'autoFocus' | 'type'>;
|
|
78
79
|
export type ButtonTypeProps = ButtonTypeAnchorProps | ButtonTypeButtonProps;
|
|
79
|
-
export type ButtonProps<T = ButtonTypeProps> = ButtonCommonProps & T & ButtonAccessibleIconLeftProps & ButtonAccessibleIconRightProps;
|
|
80
|
+
export type ButtonProps<T = ButtonTypeProps> = ButtonCommonProps & T & ButtonAccessibleIconLeftProps & ButtonAccessibleIconRightProps & DataTestProp;
|
|
80
81
|
/**
|
|
81
82
|
* ### Purpose
|
|
82
83
|
* Make it clear what users should do to continue with their main flow by using buttons to highlight the main actions they can take.
|
package/lib/Button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAwB,UAAU,EAAgC,MAAM,OAAO,CAAA;AAC7F,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,SAAS,MAAM,kBAAkB,CAAA;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,OAAO,EAAE,IAAI,EAAuB,MAAM,QAAQ,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAA;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,MAAM,MAAM,sBAAsB,CAAA;
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAwB,UAAU,EAAgC,MAAM,OAAO,CAAA;AAC7F,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,SAAS,MAAM,kBAAkB,CAAA;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,OAAO,EAAE,IAAI,EAAuB,MAAM,QAAQ,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAA;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAuGzC,MAAM,wBAAwB,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;AAE1F,MAAM,uBAAuB,GAAG,CAAC,IAAgB,EAAwB,EAAE;IACzE,QAAQ,IAAI,EAAE;QACZ,KAAK,WAAW;YACd,OAAO;gBACL,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,IAAI;gBAC3B,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE,IAAI;aAC/B,CAAA;QACH,KAAK,aAAa;YAChB,OAAO;gBACL,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,IAAI;gBAC3B,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,IAAI;aAC3B,CAAA;QACH,KAAK,QAAQ,CAAC,CAAC;YACb,OAAO;gBACL,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,IAAI;gBAC7B,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,IAAI;aAChC,CAAA;SACF;QACD;YACE,OAAO;gBACL,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,IAAI;gBAC3B,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,IAAI;aAChC,CAAA;KACJ;AACH,CAAC,CAAA;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,IAAI,EACJ,SAAS,EAAE,SAAS,GAAG,QAAQ,EAC/B,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,UAAU,GAAG,IAAI;AACjB,mBAAmB;AACnB,QAAQ,EACR,eAAe,EACf,sBAAsB,EACtB,wBAAwB;AACxB,YAAY;AACZ,QAAQ,EACR,iBAAiB,EACjB,aAAa,EACb,iBAAiB;AACjB,aAAa;AACb,SAAS,EACT,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,GAAG,GAAG,UAAU,EAChB,MAAM,EACN,IAAI,GAAG,QAAQ,EACf,OAAO,EACP,OAAO,GAAG,WAAW,EACrB,KAAK,GAAG,SAAS,EACjB,OAAO,EACP,IAAI,GAAG,OAAO,EACd,MAAM,EACN,QAAQ,GAAG,IAAI,EACf,QAAQ,EAAE,YAAY,EACtB,YAAY,EACZ,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,MAAM,EAAE,CAAA;IAC1B,MAAM,QAAQ,GAAa,YAAY,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IACxF,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAA;IACzD,MAAM,uBAAuB,GAAG,OAAO,IAAI,SAAS,IAAI,kBAAkB,IAAI,CAAC,CAAC,QAAQ,IAAI,iBAAiB,CAAC,CAAA;IAE9G,OAAO,CACL,oBAAC,OAAO,IACN,EAAE,EAAE,SAAS,EACb,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,EAC7C,OAAO,EAAE,QAAQ,IAAI,sBAAsB,EAC3C,SAAS,EAAE,wBAAwB,IAElC,CAAC,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,CAAC,CAC3C,oBAAC,SAAS,iBACE,QAAQ,EAClB,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,MAAM,EACb;YACE,GAAG,CAAC,IAAI,KAAK,SAAS;gBACpB,CAAC,CAAC,uBAAuB,CAAC,IAAI,CAAC;gBAC/B,CAAC,CAAC;oBACE,CAAC,MAAM,CAAC,QAAQ,wBAAwB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI;oBACzD,CAAC,MAAM,CAAC,UAAU,wBAAwB,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI;iBAC9D,CAAC;YACN,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM;YACvB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,KAAK,OAAO;SACjC,EACD,SAAS,CACV,sBACiB,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAClD,QAAQ,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,OAAO,EAC7B,GAAG,EAAE,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC7C,MAAM,EAAE,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC9C,IAAI,EAAE,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC/C,GAAG,EAAE,SAAS,CAAC,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,KAC7B,IAAI;QAER,2CAAgB,gBAAgB,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,OAAO,EAAE,EAAE,gBAAgB,CAAC,GAAI;QAC7H,8BAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,aAAa,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY;YACpG,OAAO,IAAI,CAAC,uBAAuB,IAAI,oBAAC,MAAM,IAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,IAAI,EAAE,QAAQ,GAAI;YAC7F,QAAQ,IAAI,iBAAiB,IAAI,CAAC,OAAO,IAAI,CAC5C,oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,EACd,SAAS,EAAE,iBAAiB,eAClB,kBAAkB,EAC5B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,CAAC,EACjD,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,aAAa,GACpB,CACH;YACA,QAAQ,CAAC,CAAC,CAAC,CACV,oBAAC,aAAa,IACZ,IAAI,EAAE,UAAU,IAAI,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,QAAQ;gBACpF;;;;;gBAKA;gBACA,cAAc,EAAE,QAAQ,IAAI,sBAAsB,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GAChF,CACH,CAAC,CAAC,CAAC,CACF,QAAQ,CACT;YACA,uBAAuB,IAAI,oBAAC,MAAM,IAAC,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,GAAI;YAClF,CAAC,uBAAuB,IAAI,SAAS,IAAI,kBAAkB,IAAI,CAC9D,oBAAC,IAAI,IACH,IAAI,EAAE,SAAS,EACf,SAAS,EAAE,kBAAkB,eACnB,mBAAmB,EAC7B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,kBAAkB,CAAC,EACnD,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,cAAc,GACrB,CACH,CACI,CACG,CACb,CACO,CACX,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA"}
|
package/lib/Icon.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React, { FC, SVGAttributes } from 'react';
|
|
2
|
+
import { DataTestProp } from '@hazelcast/helpers';
|
|
2
3
|
export type IconSize = 'small' | 'smallMedium' | 'medium' | 'large' | 'xlarge';
|
|
3
4
|
export type IconAriaProps = {
|
|
4
5
|
ariaLabel: string | undefined;
|
|
@@ -25,5 +26,5 @@ export type IconProps = {
|
|
|
25
26
|
containerClassName?: string;
|
|
26
27
|
bold?: boolean;
|
|
27
28
|
role?: string;
|
|
28
|
-
} & IconAriaProps;
|
|
29
|
+
} & IconAriaProps & DataTestProp;
|
|
29
30
|
export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLDivElement>>;
|
package/lib/Icon.js
CHANGED
|
@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
|
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
import styleConsts from '../styles/constants/export.module.scss';
|
|
4
4
|
import styles from './Icon.module.scss';
|
|
5
|
-
export const Icon = forwardRef(({ color, icon: IconElement, ariaLabel, ariaLabelledBy, ariaHidden, className, containerClassName, size = 'medium', bold = false, role = 'img', }, ref) => {
|
|
5
|
+
export const Icon = forwardRef(({ color, icon: IconElement, ariaLabel, ariaLabelledBy, ariaHidden, className, containerClassName, size = 'medium', bold = false, role = 'img', 'data-test': dataTest, }, ref) => {
|
|
6
6
|
const iconStroke = bold ? styleConsts.iconStrokeWidthBold : styleConsts.iconStrokeWidth;
|
|
7
7
|
const props = {
|
|
8
8
|
'aria-label': ariaLabel || 'icon',
|
|
@@ -20,7 +20,7 @@ export const Icon = forwardRef(({ color, icon: IconElement, ariaLabel, ariaLabel
|
|
|
20
20
|
}, className),
|
|
21
21
|
strokeWidth: iconStroke,
|
|
22
22
|
};
|
|
23
|
-
return (React.createElement("div", { className: cn(styles.iconContainer, containerClassName), ref: ref },
|
|
23
|
+
return (React.createElement("div", { className: cn(styles.iconContainer, containerClassName), "data-test": dataTest, ref: ref },
|
|
24
24
|
React.createElement(IconElement, { role: role, ...props })));
|
|
25
25
|
});
|
|
26
26
|
Icon.displayName = 'Icon';
|
package/lib/Icon.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../src/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,UAAU,EAA2B,MAAM,OAAO,CAAA;AACtE,OAAO,EAAE,MAAM,YAAY,CAAA;
|
|
1
|
+
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../src/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,UAAU,EAA2B,MAAM,OAAO,CAAA;AACtE,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,WAAW,MAAM,wCAAwC,CAAA;AAChE,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAwCvC,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,EACE,KAAK,EACL,IAAI,EAAE,WAAW,EACjB,SAAS,EACT,cAAc,EACd,UAAU,EACV,SAAS,EACT,kBAAkB,EAClB,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,KAAK,EACZ,IAAI,GAAG,KAAK,EACZ,WAAW,EAAE,QAAQ,GACtB,EACD,GAAG,EACH,EAAE;IACF,MAAM,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC,CAAC,WAAW,CAAC,eAAe,CAAA;IAEvF,MAAM,KAAK,GAAyB;QAClC,YAAY,EAAE,SAAS,IAAI,MAAM;QACjC,iBAAiB,EAAE,cAAc;QACjC,aAAa,EAAE,UAAU;QACzB,KAAK;QACL,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,SAAS,EAAE,EAAE,CACX;YACE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;YAChC,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,IAAI,KAAK,aAAa;YAC5C,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,KAAK,QAAQ;YAClC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;YAChC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,KAAK,QAAQ;SACnC,EACD,SAAS,CACV;QACD,WAAW,EAAE,UAAU;KACxB,CAAA;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,kBAAkB,CAAC,eAAa,QAAQ,EAAE,GAAG,EAAE,GAAG;QACzF,oBAAC,WAAW,IAAC,IAAI,EAAE,IAAI,KAAM,KAAK,GAAI,CAClC,CACP,CAAA;AACH,CAAC,CACF,CAAA;AACD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA"}
|
package/lib/Pagination.js
CHANGED
|
@@ -58,30 +58,30 @@ export const Pagination = ({ pageCount, currentPage, canPreviousPage, canNextPag
|
|
|
58
58
|
setPageSize(pageSize);
|
|
59
59
|
}
|
|
60
60
|
}, [setPageSize]);
|
|
61
|
-
const RowsPerPageSelect = useMemo(() => (React.createElement(SelectField, { className: styles.rowsPerPage, label: "Rows", labelClassName: styles.label, name: "rowsPerPage", value: pageSize, options: rowsPerPageOptions, onChange: onChangeWrapped, isSearchable: false, size: "small" })), [rowsPerPageOptions, pageSize, onChangeWrapped]);
|
|
61
|
+
const RowsPerPageSelect = useMemo(() => (React.createElement(SelectField, { className: styles.rowsPerPage, label: "Rows", labelClassName: styles.label, name: "rowsPerPage", value: pageSize, options: rowsPerPageOptions, onChange: onChangeWrapped, isSearchable: false, size: "small", "data-test": "pagination-rows-per-page-select" })), [rowsPerPageOptions, pageSize, onChangeWrapped]);
|
|
62
62
|
const submitPageJump = useCallback(() => {
|
|
63
63
|
goToPage(currentPageValue || 0);
|
|
64
64
|
}, [goToPage, currentPageValue]);
|
|
65
65
|
const PageJumpForm = useMemo(() => {
|
|
66
66
|
if (pageCount > 1) {
|
|
67
|
-
return (React.createElement("div", { className: styles.pageJumpForm },
|
|
68
|
-
React.createElement(NumberField, { showIconButtons: false, inputContainerClassName: styles.inputContainer, name: "page", label: "Go to page", showAriaLabel: true, min: 1, max: pageCount, size: "small", value: currentPageValue, onChange: setCurrentPageValue }),
|
|
69
|
-
React.createElement(Link, { size: "small", component: "button", type: "submit", onClick: submitPageJump }, "Go")));
|
|
67
|
+
return (React.createElement("div", { "data-test": "pagination-jump-from", className: styles.pageJumpForm },
|
|
68
|
+
React.createElement(NumberField, { showIconButtons: false, inputContainerClassName: styles.inputContainer, name: "page", label: "Go to page", showAriaLabel: true, min: 1, max: pageCount, size: "small", value: currentPageValue, "data-test": "pagination-jump-from-input-field", onChange: setCurrentPageValue }),
|
|
69
|
+
React.createElement(Link, { "data-test": "pagination-jump-from-button", size: "small", component: "button", type: "submit", onClick: submitPageJump }, "Go")));
|
|
70
70
|
}
|
|
71
71
|
}, [currentPageValue, pageCount, submitPageJump]);
|
|
72
72
|
const PageButtons = useDeepCompareMemo(() => {
|
|
73
73
|
if (pageCount > 1) {
|
|
74
74
|
return (React.createElement("div", { "data-test": "pagination-buttons", className: styles.buttons }, pages.map((page, i) => {
|
|
75
75
|
if (page === 'previous') {
|
|
76
|
-
return canPreviousPage ? (React.createElement(IconButton, { key: "previous", kind: "primary", icon: ChevronLeft, ariaLabel: "Previous page", className: styles.iconButton, onClick: previousPage })) : null;
|
|
76
|
+
return canPreviousPage ? (React.createElement(IconButton, { key: "previous", kind: "primary", icon: ChevronLeft, ariaLabel: "Previous page", className: styles.iconButton, onClick: previousPage, "data-test": "pagination-buttons-previous-page" })) : null;
|
|
77
77
|
}
|
|
78
78
|
if (page === 'next') {
|
|
79
|
-
return canNextPage ? (React.createElement(IconButton, { key: "next", kind: "primary", icon: ChevronRight, ariaLabel: "Next page", className: styles.iconButton, onClick: nextPage })) : null;
|
|
79
|
+
return canNextPage ? (React.createElement(IconButton, { key: "next", kind: "primary", icon: ChevronRight, ariaLabel: "Next page", className: styles.iconButton, onClick: nextPage, "data-test": "pagination-buttons-next-page" })) : null;
|
|
80
80
|
}
|
|
81
81
|
if (page === 'ellipsis') {
|
|
82
|
-
return React.createElement("span", { key: `ellipsis-${i}` }, "\u2013");
|
|
82
|
+
return (React.createElement("span", { "data-test": "pagination-buttons-ellipsis", key: `ellipsis-${i}` }, "\u2013"));
|
|
83
83
|
}
|
|
84
|
-
return (React.createElement(Button, { key: page, type: "button", variant: "text", className: cn(styles.button, {
|
|
84
|
+
return (React.createElement(Button, { key: page, type: "button", variant: "text", "data-test": "pagination-buttons-go-to-page", className: cn(styles.button, {
|
|
85
85
|
[styles.selected]: page === currentPage,
|
|
86
86
|
}), bodyClassName: styles.body, outlineClassName: styles.outline, capitalize: false, onClick: () => {
|
|
87
87
|
goToPage(page);
|
|
@@ -90,7 +90,7 @@ export const Pagination = ({ pageCount, currentPage, canPreviousPage, canNextPag
|
|
|
90
90
|
}
|
|
91
91
|
}, [canNextPage, canPreviousPage, currentPage, goToPage, nextPage, previousPage, pageCount, pages]);
|
|
92
92
|
const [moreOptions, setMoreOptions] = useState(false);
|
|
93
|
-
return (React.createElement("div", { ref: containerWidthRef, className: styles.container },
|
|
93
|
+
return (React.createElement("div", { "data-test": "pagination", ref: containerWidthRef, className: styles.container },
|
|
94
94
|
displaySmall && moreOptions && !isSimpleView ? (React.createElement(React.Fragment, null,
|
|
95
95
|
PageJumpForm,
|
|
96
96
|
RowsPerPageSelect)) : (PageButtons),
|
package/lib/Pagination.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../src/Pagination.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../src/Pagination.tsx"],"names":[],"mappings":"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"}
|
package/lib/Table/Cell.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import { FC, RefObject } from 'react';
|
|
2
|
-
import { TableCellProps } from 'react-table';
|
|
1
|
+
import { CSSProperties, FC, RefObject } from 'react';
|
|
3
2
|
export type CellWarningProps = {
|
|
4
3
|
align: 'left' | 'right';
|
|
5
4
|
warning: string;
|
|
@@ -15,11 +14,14 @@ export type CellProps = {
|
|
|
15
14
|
warning?: string;
|
|
16
15
|
colSpan?: number;
|
|
17
16
|
cellId?: string;
|
|
17
|
+
style?: CSSProperties;
|
|
18
|
+
role?: string;
|
|
19
|
+
className?: string;
|
|
18
20
|
selectionStartedRef?: RefObject<boolean>;
|
|
19
21
|
onMouseEnterSelection?: (id: string) => void;
|
|
20
22
|
onClickSelection?: (id: string, modifiers: {
|
|
21
23
|
ctrl: boolean;
|
|
22
24
|
shift: boolean;
|
|
23
25
|
}) => void;
|
|
24
|
-
}
|
|
26
|
+
};
|
|
25
27
|
export declare const Cell: FC<CellProps>;
|
package/lib/Table/Cell.js
CHANGED
|
@@ -15,7 +15,7 @@ export const CellWarning = ({ align, warning }) => {
|
|
|
15
15
|
}) },
|
|
16
16
|
React.createElement(Icon, { icon: AlertTriangle, ariaLabelledBy: id, size: "small" })))));
|
|
17
17
|
};
|
|
18
|
-
export const Cell = ({ align = 'left', warning, colSpan, children, style, className, role, cellId, onClickSelection, selected, onMouseEnterSelection, selectionStartedRef, }) => {
|
|
18
|
+
export const Cell = ({ align = 'left', warning, colSpan, children, style, className, role = 'cell', cellId, onClickSelection, selected, onMouseEnterSelection, selectionStartedRef, }) => {
|
|
19
19
|
const rootRef = useRef(null);
|
|
20
20
|
const { isOpen, open, close } = useOpenCloseState();
|
|
21
21
|
const handleClick = (e) => {
|
package/lib/Table/Cell.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Cell.js","sourceRoot":"","sources":["../../src/Table/Cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"Cell.js","sourceRoot":"","sources":["../../src/Table/Cell.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,12 +5,16 @@
|
|
|
5
5
|
.td {
|
|
6
6
|
position: relative;
|
|
7
7
|
display: flex;
|
|
8
|
+
box-sizing: border-box;
|
|
8
9
|
align-items: center;
|
|
9
10
|
height: c.$grid * 12;
|
|
10
11
|
padding-right: c.$grid * 5;
|
|
11
12
|
padding-left: c.$grid * 5;
|
|
12
13
|
color: c.$colorText;
|
|
13
14
|
background-color: inherit;
|
|
15
|
+
flex-grow: 1;
|
|
16
|
+
flex-basis: auto;
|
|
17
|
+
flex-shrink: 0;
|
|
14
18
|
font-family: 'Ubuntu Mono', monospace;
|
|
15
19
|
|
|
16
20
|
@include h.overflowEllipsis;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { RefObject } from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { CSSProperties, RefObject } from 'react';
|
|
2
|
+
import { Cell } from '@tanstack/react-table';
|
|
3
3
|
import { CellProps } from './Cell';
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
import { RowData } from './tableTypes';
|
|
5
|
+
export type CellWrapperProps<D extends RowData> = CellProps & {
|
|
6
|
+
cell: Cell<D, unknown>;
|
|
6
7
|
selectable?: boolean;
|
|
7
|
-
|
|
8
|
+
style: CSSProperties;
|
|
8
9
|
selectedColumnValuesRef?: RefObject<(string | undefined)[][]>;
|
|
9
|
-
columnResizing: UseResizeColumnsState<D>['columnResizing'];
|
|
10
10
|
};
|
|
11
11
|
export declare const CellWrapper: <D extends object>(props: CellWrapperProps<D>) => JSX.Element;
|
package/lib/Table/CellWrapper.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import React, { useEffect } from 'react';
|
|
2
|
+
import { flexRender } from '@tanstack/react-table';
|
|
2
3
|
import { ROW_EXPANDER_COLUMN_ID } from './constants';
|
|
3
4
|
import { Cell as TableCell } from './Cell';
|
|
4
|
-
import { EnhancedCellRenderer } from './EnhancedRenderers';
|
|
5
5
|
export const CellWrapper = (props) => {
|
|
6
|
-
|
|
7
|
-
const
|
|
6
|
+
var _a;
|
|
7
|
+
const { selectable, cell, selectedColumnValuesRef, onClickSelection, onMouseEnterSelection, selectionStartedRef, ...rest } = props;
|
|
8
|
+
const isSelectable = selectable && ((_a = cell.column) === null || _a === void 0 ? void 0 : _a.id) !== ROW_EXPANDER_COLUMN_ID;
|
|
8
9
|
useEffect(() => {
|
|
9
10
|
if (rest.cellId) {
|
|
10
11
|
const [rowIndex, cellIndex] = rest.cellId.split(':');
|
|
@@ -12,7 +13,7 @@ export const CellWrapper = (props) => {
|
|
|
12
13
|
if (rest.selected) {
|
|
13
14
|
const row = selectedColumnValuesRef.current[Number(rowIndex)];
|
|
14
15
|
if (row) {
|
|
15
|
-
row[Number(cellIndex)] = typeof cell.
|
|
16
|
+
row[Number(cellIndex)] = typeof cell.getValue() !== 'object' ? String(cell.getValue()) : '';
|
|
16
17
|
}
|
|
17
18
|
}
|
|
18
19
|
else {
|
|
@@ -23,7 +24,6 @@ export const CellWrapper = (props) => {
|
|
|
23
24
|
}
|
|
24
25
|
}
|
|
25
26
|
}, [rest, cell, selectedColumnValuesRef]);
|
|
26
|
-
|
|
27
|
-
return (React.createElement(TableCell, { onClickSelection: isSelectable ? onClickSelection : undefined, selectionStartedRef: isSelectable ? selectionStartedRef : undefined, onMouseEnterSelection: isSelectable ? onMouseEnterSelection : undefined, ...rest }, content));
|
|
27
|
+
return (React.createElement(TableCell, { onClickSelection: isSelectable ? onClickSelection : undefined, selectionStartedRef: isSelectable ? selectionStartedRef : undefined, onMouseEnterSelection: isSelectable ? onMouseEnterSelection : undefined, ...rest }, flexRender(cell.column.columnDef.cell, cell.getContext())));
|
|
28
28
|
};
|
|
29
29
|
//# sourceMappingURL=CellWrapper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CellWrapper.js","sourceRoot":"","sources":["../../src/Table/CellWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"CellWrapper.js","sourceRoot":"","sources":["../../src/Table/CellWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA4B,SAAS,EAAE,MAAM,OAAO,CAAA;AAClE,OAAO,EAAQ,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAExD,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAA;AACpD,OAAO,EAAa,IAAI,IAAI,SAAS,EAAE,MAAM,QAAQ,CAAA;AAUrD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAmB,KAA0B,EAAE,EAAE;;IAC1E,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IAElI,MAAM,YAAY,GAAG,UAAU,IAAI,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,EAAE,MAAK,sBAAsB,CAAA;IAE7E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAqB,CAAA;YAExE,IAAI,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,OAAO,EAAE;gBACpC,IAAI,IAAI,CAAC,QAAQ,EAAE;oBACjB,MAAM,GAAG,GAAG,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAA;oBAC7D,IAAI,GAAG,EAAE;wBACP,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,QAAQ,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;qBAC5F;iBACF;qBAAM;oBACL,IAAI,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE;wBAC7H,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,SAAS,CAAA;qBACjF;iBACF;aACF;SACF;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,uBAAuB,CAAC,CAAC,CAAA;IAEzC,OAAO,CACL,oBAAC,SAAS,IACR,gBAAgB,EAAE,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,EAC7D,mBAAmB,EAAE,YAAY,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,EACnE,qBAAqB,EAAE,YAAY,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,KACnE,IAAI,IAEP,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAChD,CACb,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
import { Cell as CellType,
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { Cell as CellType, HeaderContext } from '@tanstack/react-table';
|
|
3
3
|
/**
|
|
4
4
|
* Few notes about text truncation:
|
|
5
5
|
* We try to enhance Header, Footer and Cell with text truncation and a tooltip using TruncatedText.
|
|
@@ -10,14 +10,12 @@ import { Cell as CellType, HeaderGroup, UseResizeColumnsState } from 'react-tabl
|
|
|
10
10
|
* Here's how react-table renderers are made: https://github.com/tannerlinsley/react-table/blob/6e2fe31ac028e543ce0f9d56168d5f922389fbbc/src/publicUtils.js#L199
|
|
11
11
|
*/
|
|
12
12
|
export type EnhancedHeaderFooterRendererProps<D extends object> = {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
type: 'Header' | 'Footer';
|
|
13
|
+
context: HeaderContext<D, unknown>;
|
|
14
|
+
type: 'header' | 'footer';
|
|
16
15
|
};
|
|
17
|
-
export declare const EnhancedHeaderFooterRenderer: <D extends object>({
|
|
16
|
+
export declare const EnhancedHeaderFooterRenderer: <D extends object>({ context, type }: EnhancedHeaderFooterRendererProps<D>) => JSX.Element;
|
|
18
17
|
export type EnhancedCellRendererProps<D extends object> = {
|
|
19
|
-
cell: CellType<D,
|
|
20
|
-
|
|
21
|
-
columnResizing: UseResizeColumnsState<D>['columnResizing'];
|
|
18
|
+
cell: CellType<D, unknown>;
|
|
19
|
+
columnResizing: boolean;
|
|
22
20
|
};
|
|
23
|
-
export declare const EnhancedCellRenderer: <D extends object>({ cell,
|
|
21
|
+
export declare const EnhancedCellRenderer: <D extends object>({ cell, columnResizing }: EnhancedCellRendererProps<D>) => JSX.Element;
|
|
@@ -1,17 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { flexRender } from '@tanstack/react-table';
|
|
2
3
|
import { TruncatedText } from '../TruncatedText';
|
|
3
4
|
import styles from './Cell.module.scss';
|
|
4
|
-
export const EnhancedHeaderFooterRenderer = ({
|
|
5
|
-
const value = column[type];
|
|
5
|
+
export const EnhancedHeaderFooterRenderer = ({ context, type }) => {
|
|
6
|
+
const value = context.column.columnDef[type];
|
|
6
7
|
if (typeof value === 'string') {
|
|
7
|
-
return React.createElement(TruncatedText, { text: value, forceUpdateToken:
|
|
8
|
+
return React.createElement(TruncatedText, { text: value, forceUpdateToken: context.column.getIsResizing() });
|
|
8
9
|
}
|
|
9
|
-
return
|
|
10
|
-
};
|
|
11
|
-
export const EnhancedCellRenderer = ({ cell, hasCellRenderer, columnResizing }) => {
|
|
12
|
-
if (hasCellRenderer) {
|
|
13
|
-
return cell.render('Cell');
|
|
14
|
-
}
|
|
15
|
-
return React.createElement(TruncatedText, { text: cell.value, forceUpdateToken: columnResizing.isResizingColumn, tooltipClassName: styles.truncated });
|
|
10
|
+
return React.createElement(React.Fragment, null, flexRender(value, context));
|
|
16
11
|
};
|
|
12
|
+
export const EnhancedCellRenderer = ({ cell, columnResizing }) => (React.createElement(TruncatedText, { text: cell.renderValue(), forceUpdateToken: columnResizing, tooltipClassName: styles.truncated }));
|
|
17
13
|
//# sourceMappingURL=EnhancedRenderers.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EnhancedRenderers.js","sourceRoot":"","sources":["../../src/Table/EnhancedRenderers.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"EnhancedRenderers.js","sourceRoot":"","sources":["../../src/Table/EnhancedRenderers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAoB,UAAU,EAAiB,MAAM,uBAAuB,CAAA;AAEnF,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAEhD,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAiBvC,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAmB,EAAE,OAAO,EAAE,IAAI,EAAwC,EAAE,EAAE;IACxH,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;IAE5C,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,OAAO,oBAAC,aAAa,IAAC,IAAI,EAAE,KAAK,EAAE,gBAAgB,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,GAAI,CAAA;KACxF;IAED,OAAO,0CAAG,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC,CAAI,CAAA;AAC1C,CAAC,CAAA;AAOD,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAmB,EAAE,IAAI,EAAE,cAAc,EAAgC,EAAE,EAAE,CAAC,CAChH,oBAAC,aAAa,IAAC,IAAI,EAAE,IAAI,CAAC,WAAW,EAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,CAAC,SAAS,GAAI,CAC5H,CAAA"}
|
package/lib/Table/Header.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { TableHeaderProps, TableResizerProps } from 'react-table';
|
|
1
|
+
import React, { MouseEvent, KeyboardEvent, DragEvent, CSSProperties } from 'react';
|
|
3
2
|
export type HeaderProps = {
|
|
4
3
|
/**
|
|
5
4
|
* Number fields should be right aligned as that allows
|
|
@@ -13,9 +12,14 @@ export type HeaderProps = {
|
|
|
13
12
|
onClick?: (event: MouseEvent | KeyboardEvent) => void;
|
|
14
13
|
canResize: boolean;
|
|
15
14
|
isResizing: boolean;
|
|
16
|
-
|
|
15
|
+
size?: number;
|
|
17
16
|
index: number;
|
|
17
|
+
style?: CSSProperties;
|
|
18
|
+
role: string;
|
|
19
|
+
className?: string;
|
|
20
|
+
children?: React.ReactNode;
|
|
21
|
+
resizeHandler: (e: unknown) => void;
|
|
18
22
|
onDragStart?: (e: DragEvent) => void;
|
|
19
23
|
onDrop?: (e: DragEvent, index: number) => void;
|
|
20
|
-
}
|
|
21
|
-
export declare const Header:
|
|
24
|
+
};
|
|
25
|
+
export declare const Header: ({ align, colSpan, children, canSort, isSorted, isSortedDesc, canResize, isResizing, onClick, style, className, role, index, size, onDragStart, onDrop, resizeHandler, }: HeaderProps) => JSX.Element;
|
package/lib/Table/Header.js
CHANGED
|
@@ -4,7 +4,7 @@ import cn from 'classnames';
|
|
|
4
4
|
import { Icon } from '../Icon';
|
|
5
5
|
import { keyIsOneOf } from '../utils/keyboard';
|
|
6
6
|
import styles from './Header.module.scss';
|
|
7
|
-
export const Header = ({ align = 'left', colSpan, children, canSort, isSorted, isSortedDesc, canResize, isResizing,
|
|
7
|
+
export const Header = ({ align = 'left', colSpan, children, canSort, isSorted, isSortedDesc, canResize, isResizing, onClick, style, className, role, index, size, onDragStart, onDrop, resizeHandler, }) => {
|
|
8
8
|
const rootRef = useRef(null);
|
|
9
9
|
const isDragStarterRef = useRef(false);
|
|
10
10
|
const counterRef = useRef(0);
|
|
@@ -13,13 +13,13 @@ export const Header = ({ align = 'left', colSpan, children, canSort, isSorted, i
|
|
|
13
13
|
if (isSorted) {
|
|
14
14
|
ariaSort = isSortedDesc ? 'descending' : 'ascending';
|
|
15
15
|
}
|
|
16
|
-
const Chevron = useMemo(() => (React.createElement(Icon, { className: cn(styles.sortingIcon, {
|
|
16
|
+
const Chevron = useMemo(() => (React.createElement(Icon, { "data-test": "chevron", className: cn(styles.sortingIcon, {
|
|
17
17
|
[styles.left]: align === 'left',
|
|
18
18
|
[styles.right]: align === 'right',
|
|
19
19
|
[styles.isSorted]: isSorted,
|
|
20
20
|
}), icon: !isSorted ? ChevronUp : isSortedDesc ? ChevronDown : ChevronUp, ariaLabel: !isSorted ? 'Not Sorted' : isSortedDesc ? 'Descending' : 'Ascending', size: "smallMedium" })), [align, isSorted, isSortedDesc]);
|
|
21
21
|
const DraggableIcon = (React.createElement(Icon, { icon: Menu, size: "small", ariaLabel: "draggable-indicator", className: cn(styles.dragIcon, { [styles.dragIconRight]: align === 'right' }) }));
|
|
22
|
-
const
|
|
22
|
+
const onKeyDown = useCallback((event) => {
|
|
23
23
|
event.preventDefault();
|
|
24
24
|
if (keyIsOneOf(event, 'Enter') && onClick) {
|
|
25
25
|
onClick(event);
|
|
@@ -28,10 +28,13 @@ export const Header = ({ align = 'left', colSpan, children, canSort, isSorted, i
|
|
|
28
28
|
const buttonRoleProps = {
|
|
29
29
|
tabIndex: onClick ? 0 : undefined,
|
|
30
30
|
role: onClick ? 'button' : undefined,
|
|
31
|
-
|
|
31
|
+
onKeyDown: onClick ? onKeyDown : undefined,
|
|
32
32
|
onClick,
|
|
33
33
|
};
|
|
34
|
-
return (React.createElement("div", { ref: rootRef, "data-test": "table-header-container", className: cn(styles.container, className), style:
|
|
34
|
+
return (React.createElement("div", { ref: rootRef, "data-test": "table-header-container", className: cn(styles.container, className), style: {
|
|
35
|
+
...style,
|
|
36
|
+
...(size != null ? { width: size } : {}),
|
|
37
|
+
}, role: role, "aria-colspan": colSpan, "aria-sort": ariaSort },
|
|
35
38
|
React.createElement("div", { draggable: draggable, "data-test": "table-header-content", className: cn(styles.th, {
|
|
36
39
|
[styles.sortable]: canSort,
|
|
37
40
|
[styles.alignLeft]: align === 'left',
|
|
@@ -75,8 +78,10 @@ export const Header = ({ align = 'left', colSpan, children, canSort, isSorted, i
|
|
|
75
78
|
children,
|
|
76
79
|
canSort && (align === 'left' || align === 'center') && Chevron,
|
|
77
80
|
draggable && (align === 'left' || align === 'center') && DraggableIcon),
|
|
78
|
-
canResize && (
|
|
79
|
-
|
|
81
|
+
canResize && (
|
|
82
|
+
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
83
|
+
React.createElement("div", { "data-test": "table-header-column-resizer-container", className: styles.resizer, onMouseDown: resizeHandler, onTouchStart: resizeHandler },
|
|
84
|
+
React.createElement("div", { "data-test": "table-header-column-resizer", className: cn('resizer', styles.separator, {
|
|
80
85
|
[styles.resizing]: isResizing,
|
|
81
86
|
}) })))));
|
|
82
87
|
};
|
package/lib/Table/Header.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/Table/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/Table/Header.tsx"],"names":[],"mappings":"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"}
|
|
@@ -22,7 +22,6 @@
|
|
|
22
22
|
.separator {
|
|
23
23
|
width: 1px;
|
|
24
24
|
height: 100%;
|
|
25
|
-
background: c.$colorNeutralWhite;
|
|
26
25
|
}
|
|
27
26
|
|
|
28
27
|
.resizing,
|
|
@@ -33,6 +32,11 @@
|
|
|
33
32
|
|
|
34
33
|
.container {
|
|
35
34
|
position: relative;
|
|
35
|
+
flex-grow: 1;
|
|
36
|
+
flex-basis: auto;
|
|
37
|
+
flex-shrink: 0;
|
|
38
|
+
background: #e9f0f9;
|
|
39
|
+
border-right: 1px solid c.$colorNeutralWhite;
|
|
36
40
|
|
|
37
41
|
.th {
|
|
38
42
|
display: flex;
|
|
@@ -41,7 +45,7 @@
|
|
|
41
45
|
padding-left: c.$grid * 5;
|
|
42
46
|
padding-right: c.$grid * 5;
|
|
43
47
|
color: c.$colorText;
|
|
44
|
-
|
|
48
|
+
box-sizing: border-box;
|
|
45
49
|
|
|
46
50
|
@include c.typographyBodySmall('bold');
|
|
47
51
|
@include h.overflowEllipsis;
|
package/lib/Table/Row.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import { FC, AnchorHTMLAttributes } from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { FC, AnchorHTMLAttributes, CSSProperties } from 'react';
|
|
2
|
+
type RowBase = {
|
|
3
|
+
className?: string;
|
|
4
|
+
style?: CSSProperties;
|
|
5
|
+
role?: string;
|
|
4
6
|
ariaRowIndex?: number;
|
|
5
7
|
};
|
|
6
8
|
export type RowProps = RowBase & {
|
package/lib/Table/Row.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React, { useCallback } from 'react';
|
|
2
2
|
import cn from 'classnames';
|
|
3
|
-
import styles from './Row.module.scss';
|
|
4
3
|
import { useUID } from 'react-uid';
|
|
5
4
|
import { keyIsOneOf } from '../utils/keyboard';
|
|
5
|
+
import styles from './Row.module.scss';
|
|
6
6
|
export const Row = ({ children, className, style, role, ariaRowIndex, onClick }) => {
|
|
7
|
-
const
|
|
7
|
+
const onKeyDown = useCallback((event) => {
|
|
8
8
|
event.preventDefault();
|
|
9
9
|
if (keyIsOneOf(event, 'Enter') && onClick) {
|
|
10
10
|
onClick();
|
|
@@ -12,7 +12,7 @@ export const Row = ({ children, className, style, role, ariaRowIndex, onClick })
|
|
|
12
12
|
}, [onClick]);
|
|
13
13
|
return (React.createElement("div", { "data-test": "table-cell-row", className: cn(styles.row, {
|
|
14
14
|
[styles.clickable]: !!onClick,
|
|
15
|
-
}, className), style: style, "aria-rowindex": ariaRowIndex, role: role, tabIndex: onClick ? 0 : undefined,
|
|
15
|
+
}, className), style: style, "aria-rowindex": ariaRowIndex, role: role, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick ? onKeyDown : undefined, onClick: onClick }, children));
|
|
16
16
|
};
|
|
17
17
|
// eslint-disable-next-line jsx-a11y/anchor-has-content
|
|
18
18
|
const DefaultAnchor = (props) => React.createElement("a", { ...props });
|
|
@@ -21,5 +21,5 @@ export const LinkRow = ({ children, className, style, role, ariaRowIndex, href,
|
|
|
21
21
|
return (React.createElement("div", { "data-test": "table-cell-row", className: cn(styles.linkRow, className), role: role, "aria-rowindex": ariaRowIndex, "aria-owns": anchorId },
|
|
22
22
|
React.createElement(AnchorComponent, { className: styles.link, style: style, href: href, id: anchorId }, children)));
|
|
23
23
|
};
|
|
24
|
-
export const HeaderRow = ({ children, className, style, role, ariaRowIndex }) => (React.createElement("div", { "data-test": "table-header-row", className: cn(styles.
|
|
24
|
+
export const HeaderRow = ({ children, className, style, role, ariaRowIndex }) => (React.createElement("div", { "data-test": "table-header-row", className: cn(styles.row, className), style: style, role: role, "aria-rowindex": ariaRowIndex }, children));
|
|
25
25
|
//# sourceMappingURL=Row.js.map
|
package/lib/Table/Row.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../src/Table/Row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../src/Table/Row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,WAAW,EAAsD,MAAM,OAAO,CAAA;AAClG,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAE9C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAOtC,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,EAAE,EAAE;IAC/F,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,KAAoC,EAAE,EAAE;QACvC,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,IAAI,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,OAAO,EAAE;YACzC,OAAO,EAAE,CAAA;SACV;IACH,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAA;IAED,OAAO,CACL,0CACY,gBAAgB,EAC1B,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,GAAG,EACV;YACE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO;SAC9B,EACD,SAAS,CACV,EACD,KAAK,EAAE,KAAK,mBACG,YAAY,EAC3B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACjC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAC1C,OAAO,EAAE,OAAO,IAEf,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,uDAAuD;AACvD,MAAM,aAAa,GAAgD,CAAC,KAAK,EAAE,EAAE,CAAC,8BAAO,KAAK,GAAI,CAAA;AAE9F,MAAM,CAAC,MAAM,OAAO,GAAqB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,eAAe,GAAG,aAAa,EAAE,EAAE,EAAE;IACrI,MAAM,QAAQ,GAAG,MAAM,EAAE,CAAA;IAEzB,OAAO,CACL,0CAAe,gBAAgB,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,IAAI,EAAE,IAAI,mBAAiB,YAAY,eAAa,QAAQ;QACpI,oBAAC,eAAe,IAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,QAAQ,IAC5E,QAAQ,CACO,CACd,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CACnG,0CAAe,kBAAkB,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,mBAAiB,YAAY,IAC1H,QAAQ,CACL,CACP,CAAA"}
|
|
@@ -1,8 +1,14 @@
|
|
|
1
1
|
@use '../../styles/constants' as c;
|
|
2
2
|
@use '../../styles/helpers' as h;
|
|
3
3
|
|
|
4
|
+
@mixin rowBase {
|
|
5
|
+
display: flex;
|
|
6
|
+
width: 100%;
|
|
7
|
+
}
|
|
8
|
+
|
|
4
9
|
.row {
|
|
5
10
|
@include c.typographyBodySmall;
|
|
11
|
+
@include rowBase;
|
|
6
12
|
|
|
7
13
|
&.clickable {
|
|
8
14
|
cursor: pointer;
|
|
@@ -25,10 +31,12 @@
|
|
|
25
31
|
|
|
26
32
|
.linkRow {
|
|
27
33
|
cursor: pointer;
|
|
34
|
+
@include rowBase;
|
|
28
35
|
|
|
29
36
|
.link {
|
|
30
37
|
text-decoration: none;
|
|
31
38
|
background-color: inherit;
|
|
39
|
+
@include rowBase;
|
|
32
40
|
|
|
33
41
|
&:focus-visible {
|
|
34
42
|
@include h.outlineSimple;
|