@scality/core-ui 0.185.0 → 0.186.0

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.
Files changed (7) hide show
  1. package/.storybook/preview.js +1 -7
  2. package/dist/components/tooltip/Tooltip.component.d.ts.map +1 -1
  3. package/dist/components/tooltip/Tooltip.component.js +16 -29
  4. package/package.json +1 -1
  5. package/src/lib/components/tooltip/Tooltip.component.tsx +37 -47
  6. package/stories/common.tsx +1 -1
  7. package/stories/tablev2.stories.tsx +1 -1
package/.storybook/preview.js CHANGED
@@ -45,13 +45,7 @@ const withThemeProvider = (Story, context) => {
45
45
  <QueryClientProvider client={new QueryClient()}>
46
46
  <CoreUiThemeProvider theme={theme}>
47
47
  {/* Wrapper to make the stories take the full screen but not in docs */}
48
- <div
49
- style={
50
- viewMode === 'story'
51
- ? { height: 100 + 'vh', overflow: 'scroll' }
52
- : null
53
- }
54
- >
48
+ <div style={viewMode === 'story' ? { height: 100 + 'vh' } : null}>
55
49
  <ToastProvider>
56
50
  <Wrapper style={{ backgroundColor: background }}>
57
51
  <Story {...context} />
package/dist/components/tooltip/Tooltip.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tooltip/Tooltip.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAA+B,MAAM,OAAO,CAAC;AAKnE,eAAO,MAAM,GAAG,QAAQ,CAAC;AACzB,eAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,eAAO,MAAM,IAAI,SAAS,CAAC;AAC3B,eAAO,MAAM,QAAQ,cAAc,CAAC;AACpC,eAAO,MAAM,MAAM,YAAY,CAAC;AAChC,eAAO,MAAM,KAAK,UAAU,CAAC;AAC7B,eAAO,MAAM,UAAU,gBAAgB,CAAC;AACxC,eAAO,MAAM,QAAQ,cAAc,CAAC;AACpC,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,eAAO,MAAM,WAAW,iBAAiB,CAAC;AAC1C,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,eAAO,MAAM,OAAO,aAAa,CAAC;AAClC,MAAM,MAAM,QAAQ,GAChB,OAAO,GAAG,GACV,OAAO,MAAM,GACb,OAAO,IAAI,GACX,OAAO,KAAK,GACZ,OAAO,QAAQ,GACf,OAAO,MAAM,GACb,OAAO,UAAU,GACjB,OAAO,QAAQ,GACf,OAAO,SAAS,GAChB,OAAO,WAAW,GAClB,OAAO,OAAO,GACd,OAAO,SAAS,CAAC;AACrB,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AA4CF,iBAAS,OAAO,CAAC,EACf,SAAe,EACf,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,GAAG,IAAI,EACR,EAAE,KAAK,2CA+CP;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}
1
+ {"version":3,"file":"Tooltip.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tooltip/Tooltip.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAY,MAAM,OAAO,CAAC;AAMhD,eAAO,MAAM,GAAG,QAAQ,CAAC;AACzB,eAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,eAAO,MAAM,IAAI,SAAS,CAAC;AAC3B,eAAO,MAAM,QAAQ,cAAc,CAAC;AACpC,eAAO,MAAM,MAAM,YAAY,CAAC;AAChC,eAAO,MAAM,KAAK,UAAU,CAAC;AAC7B,eAAO,MAAM,UAAU,gBAAgB,CAAC;AACxC,eAAO,MAAM,QAAQ,cAAc,CAAC;AACpC,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,eAAO,MAAM,WAAW,iBAAiB,CAAC;AAC1C,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,eAAO,MAAM,OAAO,aAAa,CAAC;AAClC,MAAM,MAAM,QAAQ,GAChB,OAAO,GAAG,GACV,OAAO,MAAM,GACb,OAAO,IAAI,GACX,OAAO,KAAK,GACZ,OAAO,QAAQ,GACf,OAAO,MAAM,GACb,OAAO,UAAU,GACjB,OAAO,QAAQ,GACf,OAAO,SAAS,GAChB,OAAO,WAAW,GAClB,OAAO,OAAO,GACd,OAAO,SAAS,CAAC;AACrB,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AA0CF,iBAAS,OAAO,CAAC,EACf,SAAe,EACf,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,GAAG,IAAI,EACR,EAAE,KAAK,2CAsCP;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}
package/dist/components/tooltip/Tooltip.component.js CHANGED
@@ -1,6 +1,7 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { computePosition, flip, offset, shift } from '@floating-ui/dom';
3
- import { useEffect, useRef, useState } from 'react';
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { flip, offset, shift, useFloating } from '@floating-ui/react';
3
+ import { useState } from 'react';
4
+ import { createPortal } from 'react-dom';
4
5
  import styled from 'styled-components';
5
6
  import { spacing } from '../../spacing';
6
7
  import { fontSize, zIndex } from '../../style/theme';
@@ -23,8 +24,6 @@ const TooltipContainer = styled.div `
23
24
  `;
24
25
  const TooltipOverLayContainer = styled.div `
25
26
  display: inline-block;
26
- opacity: 0;
27
- position: fixed;
28
27
  width: max-content;
29
28
  border: 1px solid ${getThemePropSelector('border')};
30
29
  background-color: ${(props) => (props && props.style && props.style.backgroundColor) ||
@@ -53,30 +52,18 @@ const TooltipText = styled.div `
53
52
  }
54
53
  `;
55
54
  function Tooltip({ placement = TOP, overlayStyle, children, overlay, ...rest }) {
56
- const childrenRef = useRef(null);
57
- const tooltipRef = useRef(null);
58
55
  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
59
- useEffect(() => {
60
- if (childrenRef.current && tooltipRef.current) {
61
- computePosition(childrenRef.current, tooltipRef.current, {
62
- placement,
63
- middleware: [offset(5), shift(), flip()],
64
- }).then(({ x, y }) => {
65
- if (tooltipRef.current) {
66
- Object.assign(tooltipRef.current.style, {
67
- opacity: '1',
68
- // we set opacity to 1 to make sure the tooltip is not displayed before the position is computed
69
- left: `${x}px`,
70
- top: `${y}px`,
71
- });
72
- }
73
- });
74
- }
75
- }, [tooltipRef.current, childrenRef.current, isTooltipVisible]);
76
- return (_jsxs(TooltipContainer, { className: "sc-tooltip", onPointerEnter: () => {
77
- setIsTooltipVisible(true);
78
- }, onPointerLeave: () => {
79
- setIsTooltipVisible(false);
80
- }, children: [isTooltipVisible && overlay ? (_jsx(TooltipOverLayContainer, { ref: tooltipRef, className: "sc-tooltip-overlay", placement: placement, style: overlayStyle, children: _jsx(TooltipText, { className: "sc-tooltip-overlay-text", children: overlay }) })) : null, _jsx("div", { ref: childrenRef, children: children })] }));
56
+ const { refs, floatingStyles } = useFloating({
57
+ placement,
58
+ open: isTooltipVisible,
59
+ middleware: [offset(5), shift(), flip()],
60
+ });
61
+ return (_jsxs(_Fragment, { children: [_jsx(TooltipContainer, { className: "sc-tooltip", onPointerEnter: () => {
62
+ setIsTooltipVisible(true);
63
+ }, onPointerLeave: () => {
64
+ setIsTooltipVisible(false);
65
+ }, children: _jsx("div", { ref: refs.setReference, children: children }) }), isTooltipVisible &&
66
+ overlay &&
67
+ createPortal(_jsx(TooltipOverLayContainer, { ref: refs.setFloating, className: "sc-tooltip-overlay", placement: placement, style: { ...floatingStyles, ...overlayStyle }, children: _jsx(TooltipText, { className: "sc-tooltip-overlay-text", children: overlay }) }), document.body)] }));
81
68
  }
82
69
  export { Tooltip };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scality/core-ui",
3
- "version": "0.185.0",
3
+ "version": "0.186.0",
4
4
  "description": "Scality common React component library",
5
5
  "author": "Scality Engineering",
6
6
  "license": "SEE LICENSE IN LICENSE",
package/src/lib/components/tooltip/Tooltip.component.tsx CHANGED
@@ -1,5 +1,6 @@
1
- import { computePosition, flip, offset, shift } from '@floating-ui/dom';
2
- import { CSSProperties, useEffect, useRef, useState } from 'react';
1
+ import { flip, offset, shift, useFloating } from '@floating-ui/react';
2
+ import { CSSProperties, useState } from 'react';
3
+ import { createPortal } from 'react-dom';
3
4
  import styled from 'styled-components';
4
5
  import { spacing } from '../../spacing';
5
6
  import { fontSize, zIndex } from '../../style/theme';
@@ -44,8 +45,6 @@ const TooltipOverLayContainer = styled.div<{
44
45
  style?: CSSProperties;
45
46
  }>`
46
47
  display: inline-block;
47
- opacity: 0;
48
- position: fixed;
49
48
  width: max-content;
50
49
  border: 1px solid ${getThemePropSelector('border')};
51
50
  background-color: ${(props) =>
@@ -85,51 +84,42 @@ function Tooltip({
85
84
  overlay,
86
85
  ...rest
87
86
  }: Props) {
88
- const childrenRef = useRef<HTMLDivElement | null>(null);
89
- const tooltipRef = useRef<HTMLDivElement | null>(null);
90
-
91
87
  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
92
- useEffect(() => {
93
- if (childrenRef.current && tooltipRef.current) {
94
- computePosition(childrenRef.current, tooltipRef.current, {
95
- placement,
96
- middleware: [offset(5), shift(), flip()],
97
- }).then(({ x, y }) => {
98
- if (tooltipRef.current) {
99
- Object.assign(tooltipRef.current.style, {
100
- opacity: '1',
101
- // we set opacity to 1 to make sure the tooltip is not displayed before the position is computed
102
- left: `${x}px`,
103
- top: `${y}px`,
104
- });
105
- }
106
- });
107
- }
108
- }, [tooltipRef.current, childrenRef.current, isTooltipVisible]);
88
+
89
+ const { refs, floatingStyles } = useFloating({
90
+ placement,
91
+ open: isTooltipVisible,
92
+ middleware: [offset(5), shift(), flip()],
93
+ });
109
94
  return (
110
- <TooltipContainer
111
- className="sc-tooltip"
112
- onPointerEnter={() => {
113
- setIsTooltipVisible(true);
114
- }}
115
- onPointerLeave={() => {
116
- setIsTooltipVisible(false);
117
- }}
118
- >
119
- {isTooltipVisible && overlay ? (
120
- <TooltipOverLayContainer
121
- ref={tooltipRef}
122
- className="sc-tooltip-overlay"
123
- placement={placement}
124
- style={overlayStyle}
125
- >
126
- <TooltipText className="sc-tooltip-overlay-text">
127
- {overlay}
128
- </TooltipText>
129
- </TooltipOverLayContainer>
130
- ) : null}
131
- <div ref={childrenRef}>{children}</div>
132
- </TooltipContainer>
95
+ <>
96
+ <TooltipContainer
97
+ className="sc-tooltip"
98
+ onPointerEnter={() => {
99
+ setIsTooltipVisible(true);
100
+ }}
101
+ onPointerLeave={() => {
102
+ setIsTooltipVisible(false);
103
+ }}
104
+ >
105
+ <div ref={refs.setReference}>{children}</div>
106
+ </TooltipContainer>
107
+ {isTooltipVisible &&
108
+ overlay &&
109
+ createPortal(
110
+ <TooltipOverLayContainer
111
+ ref={refs.setFloating}
112
+ className="sc-tooltip-overlay"
113
+ placement={placement}
114
+ style={{ ...floatingStyles, ...overlayStyle }}
115
+ >
116
+ <TooltipText className="sc-tooltip-overlay-text">
117
+ {overlay}
118
+ </TooltipText>
119
+ </TooltipOverLayContainer>,
120
+ document.body,
121
+ )}
122
+ </>
133
123
  );
134
124
  }
135
125
 
package/stories/common.tsx CHANGED
@@ -10,7 +10,7 @@ const StyledWrapper = styled.div`
10
10
  background-color: ${theme[style?.backgroundColor || 'backgroundLevel3']};
11
11
  color: ${theme.textPrimary};
12
12
  box-sizing: border-box;
13
- overflow: scroll;
13
+ overflow: auto;
14
14
  `;
15
15
  }}
16
16
  `;
package/stories/tablev2.stories.tsx CHANGED
@@ -651,7 +651,7 @@ export const TableWithSyncButton = {
651
651
  };
652
652
 
653
653
  return (
654
- <Box>
654
+ <Box width="500px" height="250px">
655
655
  <Title>Table with Sync Button</Title>
656
656
  <Box
657
657
  display="flex"