@hazelcast/ui 1.3.3-next.6 → 1.3.3-next.7
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/Overlay.js +3 -1
- package/lib/Overlay.js.map +1 -1
- package/lib/Overlay.module.scss +3 -1
- package/lib/TruncatedText.d.ts +1 -0
- package/lib/TruncatedText.js +3 -3
- package/lib/TruncatedText.js.map +1 -1
- package/lib/TruncatedText.module.scss +4 -0
- package/package.json +2 -2
- package/styles/helpers/_text.scss +9 -0
package/lib/Overlay.js
CHANGED
|
@@ -5,6 +5,7 @@ import cn from 'classnames';
|
|
|
5
5
|
import useIsomorphicLayoutEffect from 'react-use/lib/useIsomorphicLayoutEffect';
|
|
6
6
|
import { Icon } from './Icon';
|
|
7
7
|
import { Link } from './Link';
|
|
8
|
+
import { TruncatedText } from './TruncatedText';
|
|
8
9
|
import styles from './Overlay.module.scss';
|
|
9
10
|
/*
|
|
10
11
|
* ### Purpose
|
|
@@ -28,7 +29,8 @@ export const Overlay = ({ 'data-test': dataTest, children, className, headerClas
|
|
|
28
29
|
React.createElement("div", { "data-test": "overlay-wrapper", className: cn(styles.wrapper, { [styles.normal]: contentWidth === 'normal', [styles.fullscreen]: contentWidth === 'fullscreen' }, wrapperClassName) },
|
|
29
30
|
React.createElement("div", { "data-test": "overlay-header", className: cn(styles.header, headerClassName) },
|
|
30
31
|
icon && React.createElement(Icon, { "data-test": "overlay-header-icon", className: styles.icon, size: "medium", icon: icon, ariaHidden: true }),
|
|
31
|
-
title && (React.createElement("h1", { "data-test": "overlay-header-title", className: styles.title },
|
|
32
|
+
title && (React.createElement("h1", { "data-test": "overlay-header-title", className: styles.title },
|
|
33
|
+
React.createElement(TruncatedText, { multiline: true, text: title }))),
|
|
32
34
|
headingContent,
|
|
33
35
|
closable && (React.createElement(Link, { "data-test": "overlay-header-cancel-button", className: styles.close, component: "button", onClick: onClose, size: "small", iconClassName: styles.closeIcon, icon: X, ariaLabel: closeText || 'Cancel' }, !!closeText && React.createElement("span", { className: styles.closeText }, closeText)))),
|
|
34
36
|
React.createElement("div", { "data-test": "overlay-content", className: cn(styles.content, contentClassName) }, children),
|
package/lib/Overlay.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Overlay.js","sourceRoot":"","sources":["../src/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,UAAwC,MAAM,aAAa,CAAA;AAClE,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AACjC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAI/E,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;
|
|
1
|
+
{"version":3,"file":"Overlay.js","sourceRoot":"","sources":["../src/Overlay.tsx"],"names":[],"mappings":"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"}
|
package/lib/Overlay.module.scss
CHANGED
|
@@ -62,7 +62,8 @@
|
|
|
62
62
|
display: flex;
|
|
63
63
|
justify-content: center;
|
|
64
64
|
align-items: center;
|
|
65
|
-
|
|
65
|
+
overflow: hidden;
|
|
66
|
+
min-height: c.$grid * 16;
|
|
66
67
|
margin-bottom: c.$grid * 9;
|
|
67
68
|
padding: 0 c.$grid * 21; // close button width
|
|
68
69
|
|
|
@@ -93,6 +94,7 @@
|
|
|
93
94
|
|
|
94
95
|
.title {
|
|
95
96
|
margin: 0;
|
|
97
|
+
overflow: hidden;
|
|
96
98
|
word-break: break-word;
|
|
97
99
|
}
|
|
98
100
|
}
|
package/lib/TruncatedText.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ interface TruncatedTextProps {
|
|
|
4
4
|
text: ReactText | ((...arg: unknown[]) => string) | ReactElement;
|
|
5
5
|
forceUpdateToken?: ReactText | boolean;
|
|
6
6
|
className?: string;
|
|
7
|
+
multiline?: boolean;
|
|
7
8
|
tooltipVisible?: boolean;
|
|
8
9
|
hoverAbleTooltip?: boolean;
|
|
9
10
|
tooltipPlacement?: TooltipProps['placement'];
|
package/lib/TruncatedText.js
CHANGED
|
@@ -5,7 +5,7 @@ import useIsomorphicLayoutEffect from 'react-use/lib/useIsomorphicLayoutEffect';
|
|
|
5
5
|
import { useUID } from 'react-uid';
|
|
6
6
|
import { Tooltip } from './Tooltip';
|
|
7
7
|
import styles from './TruncatedText.module.scss';
|
|
8
|
-
export const TruncatedText = ({ text, forceUpdateToken, className, tooltipVisible, tooltipPlacement = 'top', hoverAbleTooltip, }) => {
|
|
8
|
+
export const TruncatedText = ({ text, forceUpdateToken, className, tooltipVisible, tooltipPlacement = 'top', hoverAbleTooltip, multiline, }) => {
|
|
9
9
|
const textRef = useRef(null);
|
|
10
10
|
const [tooltip, setTooltip] = useState();
|
|
11
11
|
const idTooltip = useUID();
|
|
@@ -15,9 +15,9 @@ export const TruncatedText = ({ text, forceUpdateToken, className, tooltipVisibl
|
|
|
15
15
|
return;
|
|
16
16
|
}
|
|
17
17
|
// https://codepen.io/triple-j/pen/wadKQB
|
|
18
|
-
setTooltip(span.offsetWidth < span.scrollWidth ? text : undefined);
|
|
18
|
+
setTooltip(span.offsetWidth < span.scrollWidth || span.offsetHeight < span.scrollHeight ? text : undefined);
|
|
19
19
|
}, [text, forceUpdateToken]);
|
|
20
|
-
return (React.createElement(Tooltip, { id: idTooltip, content: tooltip, visible: tooltipVisible, placement: tooltipPlacement, updateToken: forceUpdateToken, hoverAbleTooltip: hoverAbleTooltip }, (ref) => (React.createElement("div", { ref: mergeRefs([textRef, ref]), className: cn(styles.truncatedText, className) },
|
|
20
|
+
return (React.createElement(Tooltip, { id: idTooltip, content: tooltip, visible: tooltipVisible, placement: tooltipPlacement, updateToken: forceUpdateToken, hoverAbleTooltip: hoverAbleTooltip }, (ref) => (React.createElement("div", { ref: mergeRefs([textRef, ref]), className: cn(styles.truncatedText, { [styles.multiline]: multiline }, className) },
|
|
21
21
|
React.createElement("span", { "aria-labelledby": tooltip ? idTooltip : undefined }, text)))));
|
|
22
22
|
};
|
|
23
23
|
//# sourceMappingURL=TruncatedText.js.map
|
package/lib/TruncatedText.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TruncatedText.js","sourceRoot":"","sources":["../src/TruncatedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,MAAM,EAAE,QAAQ,EAAuC,MAAM,OAAO,CAAA;AACxF,OAAO,SAAS,MAAM,kBAAkB,CAAA;AACxC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAA;AAEjD,OAAO,MAAM,MAAM,6BAA6B,CAAA;
|
|
1
|
+
{"version":3,"file":"TruncatedText.js","sourceRoot":"","sources":["../src/TruncatedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,MAAM,EAAE,QAAQ,EAAuC,MAAM,OAAO,CAAA;AACxF,OAAO,SAAS,MAAM,kBAAkB,CAAA;AACxC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAA;AAEjD,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,gBAAgB,EAChB,SAAS,GACV,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC5C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAA0B,CAAA;IAChE,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;YACjB,OAAM;SACP;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,IACN,EAAE,EAAE,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,gBAAgB,EAC3B,WAAW,EAAE,gBAAgB,EAC7B,gBAAgB,EAAE,gBAAgB,IAEjC,CAAC,GAAG,EAAE,EAAE,CAAC,CACR,6BAAK,GAAG,EAAE,SAAS,CAAC,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE,SAAS,CAAC;QACpH,iDAAuB,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,IAAG,IAAI,CAAQ,CACjE,CACP,CACO,CACX,CAAA;AACH,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hazelcast/ui",
|
|
3
|
-
"version": "1.3.3-next.
|
|
3
|
+
"version": "1.3.3-next.7+572cfb3",
|
|
4
4
|
"description": "Hazelcast design system components",
|
|
5
5
|
"author": "",
|
|
6
6
|
"homepage": "https://github.com/hazelcast/frontend-shared#readme",
|
|
@@ -115,5 +115,5 @@
|
|
|
115
115
|
"react": "^17 || ^18",
|
|
116
116
|
"react-dom": "^17 || ^18"
|
|
117
117
|
},
|
|
118
|
-
"gitHead": "
|
|
118
|
+
"gitHead": "572cfb37318b0aa4314f1fa07e8bd24c46d53ed6"
|
|
119
119
|
}
|