@hazelcast/ui 4.0.1-canary.1 → 4.0.1-canary.2
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/components/AppSidebar/AppSidebarItem/AppSidebarItem.js +11 -10
- package/lib/components/AppSidebar/AppSidebarItem/AppSidebarItem.js.map +1 -1
- package/lib/components/Button.d.ts +3 -3
- package/lib/components/Button.js +22 -22
- package/lib/components/Button.js.map +1 -1
- package/lib/components/Error.d.ts +2 -2
- package/lib/components/Help.d.ts +2 -2
- package/lib/components/Help.js +4 -3
- package/lib/components/Help.js.map +1 -1
- package/lib/components/IconButton.d.ts +3 -3
- package/lib/components/IconButton.js +10 -10
- package/lib/components/IconButton.js.map +1 -1
- package/lib/components/Table/Cell.js +7 -8
- package/lib/components/Table/Cell.js.map +1 -1
- package/lib/components/TextField.d.ts +2 -2
- package/lib/components/TruncatedText.d.ts +2 -2
- package/lib/components/TruncatedText.js +4 -4
- package/lib/components/TruncatedText.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useContext } from 'react';
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
import { Icon } from '../../Icon';
|
|
4
|
-
import { Tooltip } from '../../
|
|
4
|
+
import { Tooltip } from '../../Tooltip';
|
|
5
5
|
import { Button } from '../../Button';
|
|
6
6
|
import { appSidebarContext } from '../appSidebarContext';
|
|
7
7
|
import { AppSidebarFavoriteButton } from '../AppSidebarFavoriteButton';
|
|
@@ -10,14 +10,15 @@ import styles from './AppSidebarItem.module.scss';
|
|
|
10
10
|
export const AppSidebarItem = ({ id, title, className, active, icon, iconAriaLabel, disabled, disabledTooltip, onClick, color = 'light', adornment, available, adornmentClassName, 'data-test': dataTest, }) => {
|
|
11
11
|
const { isOpen } = useContext(appSidebarContext);
|
|
12
12
|
const ctx = useContext(appSidebarSectionContext);
|
|
13
|
-
return (React.createElement(Tooltip, { arrow: false,
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
React.createElement(
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
adornment,
|
|
21
|
-
|
|
13
|
+
return (React.createElement(Tooltip, { arrow: false, side: "right", align: "start", color: "dark", open: isOpen ? false : undefined, content: iconAriaLabel },
|
|
14
|
+
React.createElement("div", { className: cn(styles.root, { [styles.collapsed]: !isOpen, [styles.nested]: !!ctx }), "data-test": dataTest },
|
|
15
|
+
id && ctx && React.createElement(AppSidebarFavoriteButton, { id: id, className: styles.favorite }),
|
|
16
|
+
React.createElement(Button, { variant: "text", color: color, active: active, truncate: false, onClick: onClick, outline: "inset", disabled: disabled, disabledTooltip: disabledTooltip, bodyClassName: styles.content, "data-test": "sidebar-menu-item-title", className: cn(styles.button, { [styles.active]: active }, className) },
|
|
17
|
+
React.createElement(React.Fragment, null,
|
|
18
|
+
icon && React.createElement(Icon, { size: "medium", icon: icon, ariaLabel: iconAriaLabel, className: styles.icon }),
|
|
19
|
+
title,
|
|
20
|
+
(adornment || available !== undefined) && (React.createElement("div", { className: cn(styles.adornment, adornmentClassName) },
|
|
21
|
+
adornment,
|
|
22
|
+
available !== undefined && React.createElement("span", { className: cn(styles.status, { [styles.available]: available }) }))))))));
|
|
22
23
|
};
|
|
23
24
|
//# sourceMappingURL=AppSidebarItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppSidebarItem.js","sourceRoot":"","sources":["../../../../src/components/AppSidebar/AppSidebarItem/AppSidebarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,UAAU,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,MAAM,YAAY,CAAA;AAI3B,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"AppSidebarItem.js","sourceRoot":"","sources":["../../../../src/components/AppSidebar/AppSidebarItem/AppSidebarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,UAAU,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,MAAM,YAAY,CAAA;AAI3B,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,MAAM,EAAe,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACxD,OAAO,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAA;AACtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,+CAA+C,CAAA;AAExF,OAAO,MAAM,MAAM,8BAA8B,CAAA;AAgBjD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,EAAE,EACF,KAAK,EACL,SAAS,EACT,MAAM,EACN,IAAI,EACJ,aAAa,EACb,QAAQ,EACR,eAAe,EACf,OAAO,EACP,KAAK,GAAG,OAAO,EACf,SAAS,EACT,SAAS,EACT,kBAAkB,EAClB,WAAW,EAAE,QAAQ,GACD,EAAE,EAAE;IACxB,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAA;IAChD,MAAM,GAAG,GAAG,UAAU,CAAC,wBAAwB,CAAC,CAAA;IAEhD,OAAO,CACL,oBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,aAAa;QACrH,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,eAAa,QAAQ;YAC1G,EAAE,IAAI,GAAG,IAAI,oBAAC,wBAAwB,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,GAAI;YAC9E,oBAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,KAAK,EACf,OAAO,EAAE,OAAO,EAChB,OAAO,EAAC,OAAO,EACf,QAAQ,EAAE,QAAmB,EAC7B,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,MAAM,CAAC,OAAO,eACnB,yBAAyB,EACnC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE,SAAS,CAAC;gBAEpE;oBACG,IAAI,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI;oBAC5F,KAAK;oBACL,CAAC,SAAS,IAAI,SAAS,KAAK,SAAS,CAAC,IAAI,CACzC,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,kBAAkB,CAAC;wBACrD,SAAS;wBACT,SAAS,KAAK,SAAS,IAAI,8BAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,CAAC,GAAI,CACjG,CACP,CACA,CACI,CACL,CACE,CACX,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';
|
|
2
2
|
import { IconProps, IconSize } from './Icon';
|
|
3
|
-
import {
|
|
3
|
+
import { TooltipSide } from './Tooltip';
|
|
4
4
|
import { LinkRel, LinkTarget } from './Link';
|
|
5
5
|
import { DataTestProp } from '../helpers/types';
|
|
6
6
|
export type ButtonVariant = 'contained' | 'outlined' | 'text';
|
|
@@ -38,7 +38,7 @@ export type ButtonDisabledProps = {
|
|
|
38
38
|
disabledTooltip?: string;
|
|
39
39
|
disabled: boolean;
|
|
40
40
|
disabledTooltipVisible?: boolean;
|
|
41
|
-
disabledTooltipPlacement?:
|
|
41
|
+
disabledTooltipPlacement?: TooltipSide;
|
|
42
42
|
};
|
|
43
43
|
export type ButtonOutlineType = 'outline' | 'inset';
|
|
44
44
|
export type ButtonCommonProps = {
|
|
@@ -52,7 +52,7 @@ export type ButtonCommonProps = {
|
|
|
52
52
|
outlineClassName?: string;
|
|
53
53
|
outline?: ButtonOutlineType;
|
|
54
54
|
tooltip?: string;
|
|
55
|
-
tooltipColor?:
|
|
55
|
+
tooltipColor?: 'dark' | 'secondary';
|
|
56
56
|
active?: boolean;
|
|
57
57
|
truncate?: boolean;
|
|
58
58
|
} & (ButtonDisabledProps | ButtonNotDisabledProps) & Pick<HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, 'className' | 'onClick' | 'tabIndex' | 'style'>;
|
package/lib/components/Button.js
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react';
|
|
2
2
|
import cn from 'classnames';
|
|
3
|
-
import mergeRefs from 'react-merge-refs';
|
|
4
3
|
import { useUID } from 'react-uid';
|
|
5
4
|
import { Icon } from './Icon';
|
|
6
5
|
import { TruncatedText } from './TruncatedText';
|
|
7
|
-
import { Tooltip } from './
|
|
6
|
+
import { Tooltip } from './Tooltip';
|
|
8
7
|
import { Loader } from './Loader';
|
|
9
8
|
import styles from './Button.module.scss';
|
|
10
9
|
const capitalizeFirstCharacter = (str) => `${str[0].toUpperCase()}${str.slice(1)}`;
|
|
@@ -39,26 +38,27 @@ iconRight, iconRightAriaLabel, iconRightColor, iconRightClassName, rel = 'noopen
|
|
|
39
38
|
const iconSize = propIconSize || (size === 'medium' ? 'smallMedium' : 'small');
|
|
40
39
|
const relFinal = Array.isArray(rel) ? rel.join(' ') : rel;
|
|
41
40
|
const loadingAnimationOnRight = loading && iconRight && iconRightAriaLabel && !(iconLeft && iconLeftAriaLabel);
|
|
42
|
-
return (React.createElement(Tooltip, { id: tooltipId, color: tooltipColor, content: disabled ? disabledTooltip : tooltip,
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
41
|
+
return (React.createElement(Tooltip, { id: tooltipId, color: tooltipColor, content: disabled ? disabledTooltip : tooltip, open: disabled && disabledTooltipVisible, side: disabledTooltipPlacement },
|
|
42
|
+
React.createElement(Component, { "data-test": "button", className: cn(styles.button, {
|
|
43
|
+
[styles[`color${capitalizeFirstCharacter(color)}`]]: true,
|
|
44
|
+
[styles[`variant${capitalizeFirstCharacter(variant)}`]]: true,
|
|
45
|
+
[styles.active]: active,
|
|
46
|
+
[styles[size]]: size !== 'small',
|
|
47
|
+
}, className), "aria-describedby": disabled ? tooltipId : undefined, disabled: disabled !== null && disabled !== void 0 ? disabled : loading, rel: Component === 'a' ? relFinal : undefined, target: Component === 'a' ? target : undefined, type: Component === 'button' ? type : undefined, ref: ref, ...rest },
|
|
48
|
+
React.createElement("span", { "data-test": "button-outline", className: cn(styles.outline, { [styles.inset]: outline === 'inset' }, outlineClassName) }),
|
|
49
|
+
React.createElement("span", { className: cn(styles.body, bodyClassName) },
|
|
50
|
+
loading && !loadingAnimationOnRight && React.createElement(Loader, { className: styles.iconLeft, size: iconSize }),
|
|
51
|
+
iconLeft && iconLeftAriaLabel && !loading && (React.createElement(Icon, { icon: iconLeft, ariaLabel: iconLeftAriaLabel, "data-test": "button-icon-left", className: cn(styles.iconLeft, iconLeftClassName), size: iconSize, color: iconLeftColor })),
|
|
52
|
+
truncate ? (React.createElement(TruncatedText, { text: capitalize && typeof children === 'string' ? children.toUpperCase() : children,
|
|
53
|
+
/*
|
|
54
|
+
If a button is disabled and text is long we don't want to show 2 popups.
|
|
55
|
+
1. In case a button is disabled and no `disabledTooltipVisible` is enforced, we just hide truncated popup.
|
|
56
|
+
2. In case a button is disabled and disabledTooltip is hidden with a false flag, there is a space to show
|
|
57
|
+
the truncated popup -> setting it to undefined will leave the default behaviour.
|
|
58
|
+
*/
|
|
59
|
+
tooltipVisible: disabled && disabledTooltipVisible !== false ? false : undefined })) : (children),
|
|
60
|
+
loadingAnimationOnRight && React.createElement(Loader, { className: styles.iconRight, size: iconSize }),
|
|
61
|
+
!loadingAnimationOnRight && iconRight && iconRightAriaLabel && (React.createElement(Icon, { icon: iconRight, ariaLabel: iconRightAriaLabel, "data-test": "button-icon-right", className: cn(styles.iconRight, iconRightClassName), size: iconSize, color: iconRightColor }))))));
|
|
62
62
|
});
|
|
63
63
|
Button.displayName = 'Button';
|
|
64
64
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAwB,UAAU,EAAgC,MAAM,OAAO,CAAA;AAC7F,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAwB,UAAU,EAAgC,MAAM,OAAO,CAAA;AAC7F,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,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,EAAe,MAAM,WAAW,CAAA;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAGjC,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAgGzC,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;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,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,IAAI,EAAE,QAAQ,IAAI,sBAAsB,EACxC,IAAI,EAAE,wBAAwB;QAE9B,oBAAC,SAAS,iBACE,QAAQ,EAClB,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,MAAM,EACb;gBACE,CAAC,MAAM,CAAC,QAAQ,wBAAwB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI;gBACzD,CAAC,MAAM,CAAC,UAAU,wBAAwB,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI;gBAC7D,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM;gBACvB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,KAAK,OAAO;aACjC,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,GAAuD,KACxD,IAAI;YAER,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;YAC7H,8BAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,aAAa,CAAC;gBAC5C,OAAO,IAAI,CAAC,uBAAuB,IAAI,oBAAC,MAAM,IAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,IAAI,EAAE,QAAQ,GAAI;gBAC7F,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;gBACA,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;oBACpF;;;;;sBAKE;oBACF,cAAc,EAAE,QAAQ,IAAI,sBAAsB,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GAChF,CACH,CAAC,CAAC,CAAC,CACF,QAAQ,CACT;gBACA,uBAAuB,IAAI,oBAAC,MAAM,IAAC,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,GAAI;gBAClF,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,CACJ,CACX,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import { DataTestProp } from '../helpers/types';
|
|
3
|
-
import {
|
|
3
|
+
import { TooltipSide } from './Tooltip';
|
|
4
4
|
export declare const errorId: (inputId: string) => string;
|
|
5
5
|
interface ErrorProps extends DataTestProp {
|
|
6
6
|
error?: string;
|
|
7
7
|
className?: string;
|
|
8
8
|
inputId: string;
|
|
9
9
|
truncated?: boolean;
|
|
10
|
-
tooltipPlacement?:
|
|
10
|
+
tooltipPlacement?: TooltipSide;
|
|
11
11
|
}
|
|
12
12
|
export declare const Error: FC<ErrorProps>;
|
|
13
13
|
export {};
|
package/lib/components/Help.d.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { CSSProperties, FC, ReactElement } from 'react';
|
|
2
2
|
import { IconSize } from './Icon';
|
|
3
|
-
import {
|
|
3
|
+
import { TooltipSide } from './Tooltip';
|
|
4
4
|
import { DataTestProp } from '../helpers/types';
|
|
5
5
|
export declare const helpTooltipId: (inputId: string) => string;
|
|
6
6
|
export interface HelpProps extends DataTestProp {
|
|
7
7
|
parentId: string;
|
|
8
8
|
helperText: string | ReactElement;
|
|
9
|
-
placement?:
|
|
9
|
+
placement?: TooltipSide;
|
|
10
10
|
className?: string;
|
|
11
11
|
size?: IconSize;
|
|
12
12
|
tooltipWordBreak?: CSSProperties['wordBreak'];
|
package/lib/components/Help.js
CHANGED
|
@@ -2,13 +2,14 @@ import React from 'react';
|
|
|
2
2
|
import { HelpCircle } from 'react-feather';
|
|
3
3
|
import cn from 'classnames';
|
|
4
4
|
import { Icon } from './Icon';
|
|
5
|
-
import { Tooltip } from './
|
|
5
|
+
import { Tooltip } from './Tooltip';
|
|
6
6
|
import styleConsts from '../../styles/constants/export.module.scss';
|
|
7
7
|
import styles from './Help.module.scss';
|
|
8
8
|
export const helpTooltipId = (inputId) => `${inputId}-help`;
|
|
9
9
|
export const Help = ({ helperText, placement = 'top', parentId, className, tooltipWordBreak, size = 'small', 'data-test': dataTest = 'help', }) => {
|
|
10
10
|
const tooltipId = helpTooltipId(parentId);
|
|
11
|
-
return (React.createElement(Tooltip, {
|
|
12
|
-
React.createElement(
|
|
11
|
+
return (React.createElement(Tooltip, { side: placement, content: helperText, id: tooltipId, wordBreak: tooltipWordBreak },
|
|
12
|
+
React.createElement("div", { "data-test": dataTest, className: cn(styles.container, className) },
|
|
13
|
+
React.createElement(Icon, { ariaLabel: "Help", "aria-describedby": tooltipId, color: styleConsts.colorPrimary, icon: HelpCircle, className: styles.icon, size: size }))));
|
|
13
14
|
};
|
|
14
15
|
//# sourceMappingURL=Help.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Help.js","sourceRoot":"","sources":["../../src/components/Help.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAY,MAAM,QAAQ,CAAA;AACvC,OAAO,EAAE,OAAO,
|
|
1
|
+
{"version":3,"file":"Help.js","sourceRoot":"","sources":["../../src/components/Help.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAY,MAAM,QAAQ,CAAA;AACvC,OAAO,EAAE,OAAO,EAAe,MAAM,WAAW,CAAA;AAGhD,OAAO,WAAW,MAAM,2CAA2C,CAAA;AACnE,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAEvC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAe,EAAU,EAAE,CAAC,GAAG,OAAO,OAAO,CAAA;AAW3E,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,UAAU,EACV,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,IAAI,GAAG,OAAO,EACd,WAAW,EAAE,QAAQ,GAAG,MAAM,GAC/B,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAA;IAEzC,OAAO,CACL,oBAAC,OAAO,IAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB;QACvF,0CAAgB,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC;YAClE,oBAAC,IAAI,IACH,SAAS,EAAC,MAAM,sBACE,SAAS,EAC3B,KAAK,EAAE,WAAW,CAAC,YAAY,EAC/B,IAAI,EAAE,UAAU,EAChB,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,IAAI,EAAE,IAAI,GACV,CACE,CACE,CACX,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { ButtonHTMLAttributes } from 'react';
|
|
2
2
|
import { Icon as FeatherIcon } from 'react-feather';
|
|
3
3
|
import { IconProps, IconAriaProps } from './Icon';
|
|
4
|
-
import {
|
|
4
|
+
import { TooltipSide } from './Tooltip';
|
|
5
5
|
import { LinkRel, LinkTarget } from './Link';
|
|
6
6
|
import { DataTestProp } from '../helpers/types';
|
|
7
7
|
export type IconButtonKind = 'primary' | 'transparent';
|
|
@@ -16,7 +16,7 @@ type IconButtonCommonProps = {
|
|
|
16
16
|
padding?: 'normal';
|
|
17
17
|
tooltip?: string;
|
|
18
18
|
tooltipVisible?: boolean;
|
|
19
|
-
tooltipPlacement?:
|
|
19
|
+
tooltipPlacement?: TooltipSide;
|
|
20
20
|
} & DataTestProp & IconAriaProps & Pick<ButtonHTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, 'onClick' | 'onMouseDown' | 'className' | 'tabIndex' | 'style'>;
|
|
21
21
|
export type IconButtonNotDisabledProps = {
|
|
22
22
|
disabledTooltip?: never;
|
|
@@ -27,7 +27,7 @@ export type IconButtonNotDisabledProps = {
|
|
|
27
27
|
export type IconButtonDisabledProps = {
|
|
28
28
|
disabledTooltip: string;
|
|
29
29
|
disabled: boolean;
|
|
30
|
-
disabledTooltipPlacement?:
|
|
30
|
+
disabledTooltipPlacement?: TooltipSide;
|
|
31
31
|
disabledTooltipVisible?: boolean;
|
|
32
32
|
};
|
|
33
33
|
type IconButtonComponentProps = ({
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react';
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
import { useUID } from 'react-uid';
|
|
4
|
-
import mergeRefs from 'react-merge-refs';
|
|
5
4
|
import { Icon } from './Icon';
|
|
6
|
-
import { Tooltip } from './
|
|
5
|
+
import { Tooltip } from './Tooltip';
|
|
7
6
|
import { Loader } from './Loader';
|
|
8
7
|
import styles from './IconButton.module.scss';
|
|
9
8
|
export const IconButton = forwardRef(({ component: Component = 'button', icon, iconClassName, iconColor, iconRole, loaderRole, className, size, kind = 'transparent', ariaHidden, ariaLabelledBy, ariaLabel,
|
|
@@ -12,14 +11,15 @@ disabled, disabledTooltip, disabledTooltipVisible, disabledTooltipPlacement, rel
|
|
|
12
11
|
const tooltipId = useUID();
|
|
13
12
|
const relFinal = Array.isArray(rel) ? rel.join(' ') : rel;
|
|
14
13
|
const labelledByFinal = [ariaLabelledBy, disabled ? tooltipId : undefined].filter(Boolean).join(' ');
|
|
15
|
-
return (React.createElement(Tooltip, { id: tooltipId, content: disabled ? disabledTooltip : tooltip,
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
14
|
+
return (React.createElement(Tooltip, { id: tooltipId, content: disabled ? disabledTooltip : tooltip, side: disabled ? disabledTooltipPlacement : tooltipPlacement, open: disabled ? disabledTooltipVisible : tooltipVisible },
|
|
15
|
+
React.createElement(Component, { className: cn(styles.iconButton, {
|
|
16
|
+
[styles.primary]: kind === 'primary',
|
|
17
|
+
[styles.transparent]: kind === 'transparent',
|
|
18
|
+
[styles.paddingNormal]: padding === 'normal',
|
|
19
|
+
}, className), "aria-hidden": ariaHidden, "aria-label": ariaLabel, "aria-labelledby": labelledByFinal, disabled: disabled !== null && disabled !== void 0 ? disabled : loading, rel: Component === 'a' ? relFinal : undefined, target: Component === 'a' ? target : undefined, type: Component === 'button' ? type : undefined, "data-test": dataTest, ...rest },
|
|
20
|
+
React.createElement("span", { className: styles.body, ref: ref },
|
|
21
|
+
loading && React.createElement(Loader, { role: loaderRole, size: size }),
|
|
22
|
+
!loading && (React.createElement(Icon, { role: iconRole, className: iconClassName, color: iconColor, "data-test": `${dataTest}-icon`, icon: icon, size: size, ariaHidden: true }))))));
|
|
23
23
|
});
|
|
24
24
|
IconButton.displayName = 'IconButton';
|
|
25
25
|
//# sourceMappingURL=IconButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../src/components/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAwB,UAAU,EAAE,MAAM,OAAO,CAAA;AAC/D,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;
|
|
1
|
+
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../src/components/IconButton.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,20 +1,19 @@
|
|
|
1
1
|
import React, { useEffect, useRef } from 'react';
|
|
2
2
|
import { AlertTriangle } from 'react-feather';
|
|
3
|
-
import { useUID } from 'react-uid';
|
|
4
3
|
import cn from 'classnames';
|
|
5
4
|
import { Icon } from '../Icon';
|
|
6
|
-
import { Tooltip } from '../
|
|
5
|
+
import { Tooltip } from '../Tooltip';
|
|
7
6
|
import { useOpenCloseState } from '../../hooks';
|
|
8
7
|
import { CellCopyablePopover } from './features/columnsSelection';
|
|
9
8
|
import styles from './Cell.module.scss';
|
|
10
9
|
export const CellWarning = ({ align, warning }) => {
|
|
11
|
-
const id = useUID();
|
|
12
10
|
const dataTest = 'cell-warning-content';
|
|
13
|
-
return (React.createElement(Tooltip, {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
11
|
+
return (React.createElement(Tooltip, { content: warning },
|
|
12
|
+
React.createElement("div", { "data-test": dataTest, className: cn(styles.warningIcon, {
|
|
13
|
+
[styles.left]: align === 'left',
|
|
14
|
+
[styles.right]: align === 'right',
|
|
15
|
+
}) },
|
|
16
|
+
React.createElement(Icon, { "data-test": `${dataTest}-icon`, icon: AlertTriangle, ariaLabel: warning, size: "small" }))));
|
|
18
17
|
};
|
|
19
18
|
export const Cell = ({ align = 'left', warning, colSpan, children, style, className, role = 'cell', cellId, onClickSelection, selected, onMouseEnterSelection, selectionStartedRef, }) => {
|
|
20
19
|
const rootRef = useRef(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Cell.js","sourceRoot":"","sources":["../../../src/components/Table/Cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA+D,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAC7G,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAC7C,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Cell.js","sourceRoot":"","sources":["../../../src/components/Table/Cell.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ import { Icon as IconType } from 'react-feather';
|
|
|
3
3
|
import { DataTestProp } from '../helpers/types';
|
|
4
4
|
import { FieldHeaderProps } from './FieldHeader';
|
|
5
5
|
import { IconSize } from './Icon';
|
|
6
|
-
import {
|
|
6
|
+
import { TooltipSide } from './Tooltip';
|
|
7
7
|
export type TextFieldSize = 'medium' | 'small' | 'large';
|
|
8
8
|
export type TextFieldVariant = 'primary' | 'secondary';
|
|
9
9
|
type TextFieldTrailingIcon = {
|
|
@@ -40,7 +40,7 @@ export type TextFieldExtraProps<T extends TextFieldTypes> = {
|
|
|
40
40
|
type?: T;
|
|
41
41
|
readOnly?: boolean;
|
|
42
42
|
clearable?: boolean;
|
|
43
|
-
errorTooltipPlacement?:
|
|
43
|
+
errorTooltipPlacement?: TooltipSide;
|
|
44
44
|
children?: React.ReactNode;
|
|
45
45
|
} & DataTestProp & Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'autoFocus' | 'disabled' | 'autoComplete' | 'required' | 'placeholder'> & TextFieldTrailingIcon & Omit<FieldHeaderProps, 'id'>;
|
|
46
46
|
export type TextFieldProps<T extends TextFieldTypes> = TextFieldCoreProps<T> & TextFieldExtraProps<T>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FC, ReactNode } from 'react';
|
|
2
2
|
import { DataTestProp } from '../helpers/types';
|
|
3
|
-
import {
|
|
3
|
+
import { TooltipSide } from './Tooltip';
|
|
4
4
|
interface TruncatedTextProps extends DataTestProp {
|
|
5
5
|
text: ReactNode;
|
|
6
6
|
forceUpdateToken?: string | number | boolean;
|
|
@@ -8,7 +8,7 @@ interface TruncatedTextProps extends DataTestProp {
|
|
|
8
8
|
multiline?: boolean;
|
|
9
9
|
tooltipVisible?: boolean;
|
|
10
10
|
tooltipClassName?: string;
|
|
11
|
-
tooltipPlacement?:
|
|
11
|
+
tooltipPlacement?: TooltipSide;
|
|
12
12
|
}
|
|
13
13
|
export declare const TruncatedText: FC<TruncatedTextProps>;
|
|
14
14
|
export {};
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import React, { useRef, useState } from 'react';
|
|
2
|
-
import mergeRefs from 'react-merge-refs';
|
|
3
2
|
import cn from 'classnames';
|
|
4
3
|
import useIsomorphicLayoutEffect from 'react-use/lib/useIsomorphicLayoutEffect';
|
|
5
4
|
import { useUID } from 'react-uid';
|
|
6
|
-
import { Tooltip } from './
|
|
5
|
+
import { Tooltip } from './Tooltip';
|
|
7
6
|
import styles from './TruncatedText.module.scss';
|
|
8
7
|
export const TruncatedText = ({ text, forceUpdateToken, className, tooltipVisible, tooltipPlacement = 'top', multiline, tooltipClassName, 'data-test': dataTest, }) => {
|
|
9
8
|
const textRef = useRef(null);
|
|
@@ -17,7 +16,8 @@ export const TruncatedText = ({ text, forceUpdateToken, className, tooltipVisibl
|
|
|
17
16
|
// https://codepen.io/triple-j/pen/wadKQB
|
|
18
17
|
setTooltip(span.offsetWidth < span.scrollWidth || span.offsetHeight < span.scrollHeight ? text : undefined);
|
|
19
18
|
}, [text, forceUpdateToken]);
|
|
20
|
-
return (React.createElement(Tooltip, { id: idTooltip, content: tooltip,
|
|
21
|
-
React.createElement("
|
|
19
|
+
return (React.createElement(Tooltip, { id: idTooltip, content: tooltip, open: tooltipVisible, className: tooltipClassName, side: tooltipPlacement },
|
|
20
|
+
React.createElement("div", { ref: textRef, className: cn(styles.truncatedText, { [styles.multiline]: multiline }, className) },
|
|
21
|
+
React.createElement("span", { "data-test": dataTest, "aria-labelledby": tooltip ? idTooltip : undefined }, text))));
|
|
22
22
|
};
|
|
23
23
|
//# sourceMappingURL=TruncatedText.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TruncatedText.js","sourceRoot":"","sources":["../../src/components/TruncatedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,MAAM,EAAE,QAAQ,EAAa,MAAM,OAAO,CAAA;AAC9D,OAAO,
|
|
1
|
+
{"version":3,"file":"TruncatedText.js","sourceRoot":"","sources":["../../src/components/TruncatedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,MAAM,EAAE,QAAQ,EAAa,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAE,OAAO,EAAe,MAAM,WAAW,CAAA;AAEhD,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAahD,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,IAAI,EACJ,gBAAgB,EAChB,SAAS,EACT,cAAc,EACd,gBAAgB,GAAG,KAAK,EACxB,SAAS,EACT,gBAAgB,EAChB,WAAW,EAAE,QAAQ,GACtB,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC5C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAAyB,CAAA;IAC/D,MAAM,SAAS,GAAG,MAAM,EAAE,CAAA;IAE1B,yBAAyB,CAAC,GAAG,EAAE;QAC7B,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAA;QAE5B,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,yCAAyC;QACzC,UAAU,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IAC7G,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAA;IAE5B,OAAO,CACL,oBAAC,OAAO,IAAC,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,gBAAgB;QACjH,6BAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE,SAAS,CAAC;YAClG,2CAAiB,QAAQ,qBAAmB,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,IACxE,IAAI,CACA,CACH,CACE,CACX,CAAA;AACH,CAAC,CAAA"}
|