@scality/core-ui 0.134.0 → 0.136.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.
- package/dist/components/constrainedtext/Constrainedtext.component.d.ts.map +1 -1
- package/dist/components/constrainedtext/Constrainedtext.component.js +4 -1
- package/dist/components/icon/Icon.component.d.ts.map +1 -1
- package/dist/components/icon/Icon.component.js +9 -3
- package/dist/components/searchinput/SearchInput.component.d.ts +0 -1
- package/dist/components/searchinput/SearchInput.component.d.ts.map +1 -1
- package/dist/components/searchinput/SearchInput.component.js +1 -1
- package/dist/components/selectv2/Selectv2.component.d.ts +1 -1
- package/dist/components/selectv2/Selectv2.component.d.ts.map +1 -1
- package/dist/components/selectv2/Selectv2.component.js +5 -9
- package/dist/components/tablev2/Search.d.ts +1 -1
- package/dist/components/tablev2/Search.d.ts.map +1 -1
- package/dist/components/tablev2/Search.js +1 -1
- package/dist/components/tablev2/TableCommon.d.ts +1 -1
- package/dist/components/tablev2/TableCommon.js +3 -3
- package/dist/components/tablev2/Tablestyle.d.ts +1 -1
- package/dist/components/tablev2/Tablestyle.d.ts.map +1 -1
- package/dist/components/tablev2/Tablev2.component.d.ts +5 -1
- package/dist/components/tablev2/Tablev2.component.d.ts.map +1 -1
- package/dist/components/tablev2/Tablev2.component.js +6 -0
- package/dist/components/tablev2/useSyncedScroll.d.ts +2 -1
- package/dist/components/tablev2/useSyncedScroll.d.ts.map +1 -1
- package/dist/components/tablev2/useSyncedScroll.js +17 -19
- package/dist/components/tabsv2/StyledTabs.d.ts +1 -1
- package/dist/components/tabsv2/StyledTabs.d.ts.map +1 -1
- package/dist/components/tabsv2/Tabsv2.component.js +5 -1
- package/dist/components/toggle/Toggle.component.d.ts +1 -1
- package/dist/components/toggle/Toggle.component.d.ts.map +1 -1
- package/dist/components/toggle/Toggle.component.js +8 -11
- package/dist/organisms/attachments/AttachmentTable.d.ts.map +1 -1
- package/dist/organisms/attachments/AttachmentTable.js +2 -2
- package/package.json +2 -2
- package/src/lib/components/constrainedtext/Constrainedtext.component.tsx +4 -1
- package/src/lib/components/icon/Icon.component.tsx +12 -5
- package/src/lib/components/searchinput/SearchInput.component.tsx +0 -2
- package/src/lib/components/searchinput/SearchInput.test.tsx +88 -0
- package/src/lib/components/selectv2/Selectv2.component.tsx +7 -11
- package/src/lib/components/selectv2/selectv2.test.tsx +190 -200
- package/src/lib/components/tablev2/Search.tsx +1 -2
- package/src/lib/components/tablev2/TableCommon.tsx +5 -5
- package/src/lib/components/tablev2/Tablestyle.tsx +1 -1
- package/src/lib/components/tablev2/Tablev2.component.tsx +14 -0
- package/src/lib/components/tablev2/useSyncedScroll.ts +22 -24
- package/src/lib/components/tabsv2/StyledTabs.ts +1 -1
- package/src/lib/components/tabsv2/Tabsv2.component.tsx +1 -1
- package/src/lib/components/toggle/Toggle.component.tsx +9 -12
- package/src/lib/components/toggle/Toggle.test.tsx +56 -0
- package/src/lib/organisms/attachments/AttachmentTable.tsx +0 -2
- package/stories/SearchInput/searchinput.guideline.mdx +20 -0
- package/stories/{searchinput.stories.tsx → SearchInput/searchinput.stories.tsx} +13 -20
- package/stories/Select/selectv2.stories.tsx +23 -5
- package/stories/Toggle/toggle.guideline.mdx +20 -0
- package/stories/{toggle.stories.tsx → Toggle/toggle.stories.tsx} +17 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Constrainedtext.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/constrainedtext/Constrainedtext.component.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAErE,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACpD,YAAY,CAAC,EAAE,aAAa,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;IAC3D,gBAAgB,CAAC,EAAE,aAAa,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;
|
|
1
|
+
{"version":3,"file":"Constrainedtext.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/constrainedtext/Constrainedtext.component.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAErE,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACpD,YAAY,CAAC,EAAE,aAAa,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;IAC3D,gBAAgB,CAAC,EAAE,aAAa,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAiDF,iBAAS,eAAe,CAAC,EACvB,IAAI,EACJ,YAAY,EACZ,gBAAgB,EAChB,SAAa,GACd,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAuBrB;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}
|
|
@@ -15,9 +15,12 @@ const ConstrainedTextContainer = styled.div `
|
|
|
15
15
|
-webkit-line-clamp: ${props.lineClamp};
|
|
16
16
|
-webkit-box-orient: vertical;
|
|
17
17
|
overflow-wrap: break-word;
|
|
18
|
+
word-break: break-all;
|
|
18
19
|
`
|
|
19
20
|
: `overflow-wrap: break-word;
|
|
20
|
-
white-space: nowrap
|
|
21
|
+
white-space: nowrap;
|
|
22
|
+
word-break: break-all;
|
|
23
|
+
`};
|
|
21
24
|
`;
|
|
22
25
|
const BlockTooltip = styled.div `
|
|
23
26
|
width: stretch;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,aAAa,EAKd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAG7D,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0HrB,CAAC;
|
|
1
|
+
{"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,aAAa,EAKd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAG7D,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0HrB,CAAC;AASF,eAAO,MAAM,WAAW;;;;;;;;;;;CAqCvB,CAAC;AAaF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACzE,MAAM,MAAM,SAAS,GAAG,MAAM,WAAW,CAAC;AAC1C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AAuEF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,eAU7C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useState, } from 'react';
|
|
3
|
-
import styled, { css } from 'styled-components';
|
|
3
|
+
import styled, { css, useTheme } from 'styled-components';
|
|
4
4
|
import { Loader } from '../loader/Loader.component';
|
|
5
5
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
6
6
|
import { useQuery } from 'react-query';
|
|
@@ -127,9 +127,15 @@ export const iconTable = {
|
|
|
127
127
|
DarkMode: 'fas faMoon',
|
|
128
128
|
News: 'fas faBullhorn',
|
|
129
129
|
};
|
|
130
|
+
const getColor = (color) => {
|
|
131
|
+
const theme = useTheme();
|
|
132
|
+
if (!color)
|
|
133
|
+
return 'currentColor';
|
|
134
|
+
return theme[color] || color;
|
|
135
|
+
};
|
|
130
136
|
export const customIcons = {
|
|
131
|
-
'Remote-user': ({ ariaLabel, color, size }) => (_jsxs("svg", { viewBox: "0 0 19 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: 'svg-inline--fa ' + (size ? `fa-${size}` : ''), "aria-label": ariaLabel, children: [_jsx("path", { d: "M16.5902 0.5C17.4071 0.5 18.0984 1.1875 18.0984 2V12C18.0984 12.8438 17.4071 13.5 16.5902 13.5H10.5574L11.0601 15H13.3224C13.7309 15 14.0765 15.3438 14.0765 15.75C14.0765 16.1875 13.7309 16.5 13.3224 16.5H4.77596C4.33607 16.5 4.02186 16.1875 4.02186 15.75C4.02186 15.3438 4.33607 15 4.77596 15H7.03825L7.54098 13.5H1.5082C0.659836 13.5 0 12.8438 0 12V2C0 1.1875 0.659836 0.5 1.5082 0.5H16.5902ZM16.0874 11.5V2.5H2.01093V11.5H16.0874Z", fill: color
|
|
132
|
-
'Remote-group': ({ ariaLabel, color, size }) => (_jsxs("svg", { viewBox: "0 0 19 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: 'svg-inline--fa ' + (size ? `fa-${size}` : ''), "aria-label": ariaLabel, children: [_jsx("path", { d: "M16.5902 0.5C17.4071 0.5 18.0984 1.1875 18.0984 2V12C18.0984 12.8438 17.4071 13.5 16.5902 13.5H10.5574L11.0601 15H13.3224C13.7309 15 14.0765 15.3438 14.0765 15.75C14.0765 16.1875 13.7309 16.5 13.3224 16.5H4.77596C4.33607 16.5 4.02186 16.1875 4.02186 15.75C4.02186 15.3438 4.33607 15 4.77596 15H7.03825L7.54098 13.5H1.5082C0.659836 13.5 0 12.8438 0 12V2C0 1.1875 0.659836 0.5 1.5082 0.5H16.5902ZM16.0874 11.5V2.5H2.01093V11.5H16.0874Z", fill: color
|
|
137
|
+
'Remote-user': ({ ariaLabel, color, size }) => (_jsxs("svg", { viewBox: "0 0 19 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: 'svg-inline--fa ' + (size ? `fa-${size}` : ''), "aria-label": ariaLabel, children: [_jsx("path", { d: "M16.5902 0.5C17.4071 0.5 18.0984 1.1875 18.0984 2V12C18.0984 12.8438 17.4071 13.5 16.5902 13.5H10.5574L11.0601 15H13.3224C13.7309 15 14.0765 15.3438 14.0765 15.75C14.0765 16.1875 13.7309 16.5 13.3224 16.5H4.77596C4.33607 16.5 4.02186 16.1875 4.02186 15.75C4.02186 15.3438 4.33607 15 4.77596 15H7.03825L7.54098 13.5H1.5082C0.659836 13.5 0 12.8438 0 12V2C0 1.1875 0.659836 0.5 1.5082 0.5H16.5902ZM16.0874 11.5V2.5H2.01093V11.5H16.0874Z", fill: getColor(color) }), _jsx("path", { d: "M9.18043 7.97631C8.0165 7.97631 7.08207 7.01268 7.08207 5.81237C7.08207 4.62897 8.0165 3.64844 9.18043 3.64844C10.328 3.64844 11.2788 4.62897 11.2788 5.81237C11.2788 7.01268 10.328 7.97631 9.18043 7.97631ZM10.6394 8.51729C11.8526 8.51729 12.8526 9.54854 12.8526 10.7996V11.4927C12.8526 11.9492 12.4919 12.3042 12.0657 12.3042H6.29519C5.85256 12.3042 5.5083 11.9492 5.5083 11.4927V10.7996C5.5083 9.54854 6.49191 8.51729 7.70502 8.51729H7.98371C8.34437 8.70325 8.7542 8.78778 9.18043 8.78778C9.60666 8.78778 10.0001 8.70325 10.3608 8.51729H10.6394Z", fill: getColor(color) })] })),
|
|
138
|
+
'Remote-group': ({ ariaLabel, color, size }) => (_jsxs("svg", { viewBox: "0 0 19 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: 'svg-inline--fa ' + (size ? `fa-${size}` : ''), "aria-label": ariaLabel, children: [_jsx("path", { d: "M16.5902 0.5C17.4071 0.5 18.0984 1.1875 18.0984 2V12C18.0984 12.8438 17.4071 13.5 16.5902 13.5H10.5574L11.0601 15H13.3224C13.7309 15 14.0765 15.3438 14.0765 15.75C14.0765 16.1875 13.7309 16.5 13.3224 16.5H4.77596C4.33607 16.5 4.02186 16.1875 4.02186 15.75C4.02186 15.3438 4.33607 15 4.77596 15H7.03825L7.54098 13.5H1.5082C0.659836 13.5 0 12.8438 0 12V2C0 1.1875 0.659836 0.5 1.5082 0.5H16.5902ZM16.0874 11.5V2.5H2.01093V11.5H16.0874Z", fill: getColor(color) }), _jsx("path", { d: "M4.8 7.85714C4.125 7.85714 3.6 7.29464 3.6 6.57143C3.6 5.8683 4.125 5.28571 4.8 5.28571C5.45625 5.28571 6 5.8683 6 6.57143C6 7.29464 5.45625 7.85714 4.8 7.85714ZM13.2 7.85714C12.525 7.85714 12 7.29464 12 6.57143C12 5.8683 12.525 5.28571 13.2 5.28571C13.8563 5.28571 14.4 5.8683 14.4 6.57143C14.4 7.29464 13.8563 7.85714 13.2 7.85714ZM13.8 8.5C14.4563 8.5 15 9.08259 15 9.78571V10.4286C15 10.7902 14.7188 11.0714 14.4 11.0714H13.1625C13.0313 10.1272 12.5063 9.32366 11.7375 8.8817C11.9625 8.66071 12.2625 8.5 12.6 8.5H13.8ZM9 8.5C7.8375 8.5 6.9 7.49554 6.9 6.25C6.9 5.02455 7.8375 4 9 4C10.1438 4 11.1 5.02455 11.1 6.25C11.1 7.49554 10.1438 8.5 9 8.5ZM10.425 9.14286C11.625 9.14286 12.6 10.1875 12.6 11.4732V12.0357C12.6 12.5781 12.1875 13 11.7 13H6.3C5.79375 13 5.4 12.5781 5.4 12.0357V11.4732C5.4 10.1875 6.35625 9.14286 7.55625 9.14286H7.70625C8.1 9.34375 8.53125 9.46429 9 9.46429C9.45 9.46429 9.88125 9.34375 10.275 9.14286H10.425ZM6.24375 8.8817C5.475 9.32366 4.95 10.1272 4.81875 11.0714H3.6C3.2625 11.0714 3 10.7902 3 10.4286V9.78571C3 9.08259 3.525 8.5 4.2 8.5H5.4C5.71875 8.5 6.01875 8.66071 6.24375 8.8817Z", fill: getColor(color) })] })),
|
|
133
139
|
};
|
|
134
140
|
const IconStyled = styled(FontAwesomeIcon) `
|
|
135
141
|
${(props) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/searchinput/SearchInput.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAA2C,MAAM,OAAO,CAAC;AAG7E,OAAO,EAAS,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGtD,MAAM,MAAM,KAAK,GAAG;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,
|
|
1
|
+
{"version":3,"file":"SearchInput.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/searchinput/SearchInput.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAA2C,MAAM,OAAO,CAAC;AAG7E,OAAO,EAAS,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGtD,MAAM,MAAM,KAAK,GAAG;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;CAC7B,CAAC;AAuCF,QAAA,MAAM,WAAW,uEAuFhB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -38,7 +38,7 @@ const ClearButton = styled.div `
|
|
|
38
38
|
right: 1px;
|
|
39
39
|
top: 0px;
|
|
40
40
|
`;
|
|
41
|
-
const SearchInput = forwardRef(({
|
|
41
|
+
const SearchInput = forwardRef(({ placeholder, value, onChange, onReset, disabled, id, size, autoComplete = 'on', ...rest }, forwardedRef) => {
|
|
42
42
|
const myInputRef = useRef(null);
|
|
43
43
|
const debounce = useRef(null);
|
|
44
44
|
const [debouncedValue, setDebouncedValue] = useState(value);
|
|
@@ -13,7 +13,6 @@ export type SelectProps = {
|
|
|
13
13
|
placeholder?: string;
|
|
14
14
|
disabled?: boolean;
|
|
15
15
|
children?: React.ReactNode;
|
|
16
|
-
defaultValue?: string;
|
|
17
16
|
value?: string;
|
|
18
17
|
onFocus?: (event: FocusEvent) => void;
|
|
19
18
|
onBlur?: (event: FocusEvent) => void;
|
|
@@ -21,6 +20,7 @@ export type SelectProps = {
|
|
|
21
20
|
variant?: 'default' | 'rounded';
|
|
22
21
|
size?: '1' | '2/3' | '1/2' | '1/3';
|
|
23
22
|
className?: string;
|
|
23
|
+
/** use menuPositon='fixed' inside modal to avoid display issue */
|
|
24
24
|
menuPosition?: 'fixed' | 'absolute';
|
|
25
25
|
};
|
|
26
26
|
declare function SelectWithOptionContext(props: SelectProps): JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Selectv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/selectv2/Selectv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAcf,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC,CAAC;AAkBF,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA0B3B;
|
|
1
|
+
{"version":3,"file":"Selectv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/selectv2/Selectv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAcf,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC,CAAC;AAkBF,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA0B3B;AAiOD,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,IAAI,CAAC,EAAE,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,YAAY,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;CACrC,CAAC;AAgBF,iBAAS,uBAAuB,CAAC,KAAK,EAAE,WAAW,eAyBlD;kBAzBQ,uBAAuB;;;AAyJhC,eAAO,MAAM,MAAM,gCAA0B,CAAC"}
|
|
@@ -89,7 +89,7 @@ const InternalOption = (width, isDefaultVariant) => (props) => {
|
|
|
89
89
|
const highlightStyle = part.toLowerCase() === inputValue.toLowerCase()
|
|
90
90
|
? 'sc-highlighted-matching-text'
|
|
91
91
|
: '';
|
|
92
|
-
return (_jsx("span", { className: highlightStyle, children: part }, i));
|
|
92
|
+
return (_jsx("span", { role: highlightStyle ? 'mark' : undefined, className: highlightStyle, children: part }, i));
|
|
93
93
|
}) }));
|
|
94
94
|
}
|
|
95
95
|
else {
|
|
@@ -148,7 +148,6 @@ const MenuList = (props) => {
|
|
|
148
148
|
const initialOffset = selectedIndex * optionHeight - (ITEMS_PER_SCROLL_WINDOW - 1) * optionHeight;
|
|
149
149
|
useEffect(() => {
|
|
150
150
|
if (listRef && listRef.current) {
|
|
151
|
-
// @ts-ignore
|
|
152
151
|
listRef.current.scrollTo(getScrollOffset(listRef.current, focusedIndex, children.length, optionHeight / 2));
|
|
153
152
|
}
|
|
154
153
|
}, [children.length, focusedIndex, optionHeight, listRef]);
|
|
@@ -168,6 +167,7 @@ const ValueContainer = ({ children, ...props }) => {
|
|
|
168
167
|
const icon = selectedOption ? selectedOption.icon : null;
|
|
169
168
|
const ariaProps = {
|
|
170
169
|
innerProps: {
|
|
170
|
+
disabled: true,
|
|
171
171
|
role: props.selectProps.isSearchable ? 'combobox' : 'listbox',
|
|
172
172
|
'aria-expanded': props.selectProps.menuIsOpen,
|
|
173
173
|
'aria-autocomplete': 'list',
|
|
@@ -193,10 +193,7 @@ function SelectWithOptionContext(props) {
|
|
|
193
193
|
};
|
|
194
194
|
return (_jsx(OptionContext.Provider, { value: { options, register, unregister }, children: _jsxs(_Fragment, { children: [_jsx(SelectBox, { ...props }), props.children] }) }));
|
|
195
195
|
}
|
|
196
|
-
function SelectBox({ placeholder = 'Select...', disabled = false,
|
|
197
|
-
if (defaultValue && value) {
|
|
198
|
-
console.error('The `defaultValue` will be overridden by the `value` if they are set at the same time.');
|
|
199
|
-
}
|
|
196
|
+
function SelectBox({ placeholder = 'Select...', disabled = false, value, onChange, variant = 'default', className, size = '1', id, ...rest }) {
|
|
200
197
|
const [keyboardFocusEnabled, setKeyboardFocusEnabled] = useState(false);
|
|
201
198
|
const [searchSelection, setSearchSelection] = useState('');
|
|
202
199
|
const [searchValue, setSearchValue] = useState('');
|
|
@@ -236,15 +233,14 @@ function SelectBox({ placeholder = 'Select...', disabled = false, defaultValue,
|
|
|
236
233
|
const isEmptyStringInOptions = options.find((option) => option.value === '');
|
|
237
234
|
// Force to reset the value
|
|
238
235
|
useEffect(() => {
|
|
239
|
-
if (!
|
|
240
|
-
!isEmptyStringInOptions &&
|
|
236
|
+
if (!isEmptyStringInOptions &&
|
|
241
237
|
value === '' &&
|
|
242
238
|
selectRef.current &&
|
|
243
239
|
selectRef.current.select) {
|
|
244
240
|
selectRef.current.select.clearValue();
|
|
245
241
|
}
|
|
246
242
|
}, [value, selectRef, isEmptyStringInOptions]);
|
|
247
|
-
return (_jsx(ScrollbarWrapper, { children: _jsx(_Fragment, { children: options && (_jsx(SelectStyle, { inputId: id, className: ['sc-select', className].join(' '), classNamePrefix: "sc-select", name: "sc-select", value: searchSelection || options.find((opt) => opt.value === value),
|
|
243
|
+
return (_jsx(ScrollbarWrapper, { children: _jsx(_Fragment, { children: options && (_jsx(SelectStyle, { inputId: id, className: ['sc-select', className].join(' '), classNamePrefix: "sc-select", name: "sc-select", value: searchSelection || options.find((opt) => opt.value === value), inputValue: options.length > NOPT_SEARCH ? searchValue : undefined, selectedOption: options.find((opt) => opt.value === value), keyboardFocusEnabled: keyboardFocusEnabled, options: options, isDisabled: disabled, placeholder: customPlaceholder, menuPlacement: "auto", isSearchable: options.length > NOPT_SEARCH, components: {
|
|
248
244
|
Input: Input,
|
|
249
245
|
Option: InternalOption(convertSizeToRem(size), isDefaultVariant),
|
|
250
246
|
Menu: Menu,
|
|
@@ -10,7 +10,7 @@ export type SearchProps = {
|
|
|
10
10
|
value?: string;
|
|
11
11
|
locale?: TableLocalType;
|
|
12
12
|
totalCount?: number;
|
|
13
|
-
} & Omit<Props, '
|
|
13
|
+
} & Omit<Props, 'onChange'>;
|
|
14
14
|
export declare const TableItemCount: ({ entity, count, locale, }: {
|
|
15
15
|
entity: {
|
|
16
16
|
singular: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/Search.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAE7D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,IAAI,CAAC,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/Search.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAE7D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;AA0B5B,eAAO,MAAM,cAAc;YAKjB;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;WACrC,MAAM;YACL,IAAI,GAAG,IAAI;iBAapB,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,WAAW,eAiC7C"}
|
|
@@ -40,7 +40,7 @@ export function TableSearch(props) {
|
|
|
40
40
|
React.useEffect(() => {
|
|
41
41
|
setGlobalFilter(value);
|
|
42
42
|
}, [value, setGlobalFilter, preGlobalFilteredRows]);
|
|
43
|
-
return (_jsxs(SearchContainer, { children: [_jsx(TableItemCount, { entity: entityName[locale] || entityName.en, count: totalDispayedRows, locale: locale }), _jsx(SearchInput, { value: value, placeholder: translations[locale].search,
|
|
43
|
+
return (_jsxs(SearchContainer, { children: [_jsx(TableItemCount, { entity: entityName[locale] || entityName.en, count: totalDispayedRows, locale: locale }), _jsx(SearchInput, { value: value, placeholder: translations[locale].search, size: "1", onChange: (evt) => {
|
|
44
44
|
if (typeof onChange === 'function') {
|
|
45
45
|
onChange(evt.target.value);
|
|
46
46
|
}
|
|
@@ -16,7 +16,7 @@ type VirtualizedRowsType<DATA_ROW extends Record<string, unknown> = Record<strin
|
|
|
16
16
|
};
|
|
17
17
|
export declare const VirtualizedRows: <DATA_ROW extends Record<string, unknown> = Record<string, unknown>>({ rows, rowHeight, setHasScrollbar, onBottom, onBottomOffset, RenderRow, listRef, itemKey, }: VirtualizedRowsType<DATA_ROW>) => JSX.Element;
|
|
18
18
|
export declare const useTableScrollbar: () => {
|
|
19
|
-
hasScrollbar: boolean;
|
|
19
|
+
hasScrollbar: boolean | undefined;
|
|
20
20
|
setHasScrollbar: React.Dispatch<React.SetStateAction<boolean>>;
|
|
21
21
|
scrollBarWidth: number;
|
|
22
22
|
handleScrollbarWidth: (node: any) => void;
|
|
@@ -6,8 +6,8 @@ import { convertRemToPixels, tableRowHeight, } from './TableUtils';
|
|
|
6
6
|
import { useTableContext } from './Tablev2.component';
|
|
7
7
|
import useSyncedScroll from './useSyncedScroll';
|
|
8
8
|
import { UnsuccessfulResult } from '../UnsuccessfulResult.component';
|
|
9
|
-
export const VirtualizedRows = ({ rows, rowHeight, setHasScrollbar, onBottom, onBottomOffset, RenderRow, listRef, itemKey, }) => (_jsx(AutoSizer, { children: ({ height
|
|
10
|
-
return (_jsx(List, { height: height, itemCount: rows.length, itemSize: convertRemToPixels(tableRowHeight[rowHeight]), width:
|
|
9
|
+
export const VirtualizedRows = ({ rows, rowHeight, setHasScrollbar, onBottom, onBottomOffset, RenderRow, listRef, itemKey, }) => (_jsx(AutoSizer, { disableWidth: true, children: ({ height }) => {
|
|
10
|
+
return (_jsx(List, { height: height - 1, itemCount: rows.length, itemSize: convertRemToPixels(tableRowHeight[rowHeight]), width: '100%', itemKey: itemKey, itemData: rows, ref: listRef, onItemsRendered: ({ visibleStartIndex, visibleStopIndex, overscanStopIndex, }) => {
|
|
11
11
|
setHasScrollbar(visibleStopIndex - visibleStartIndex < overscanStopIndex);
|
|
12
12
|
if (onBottom &&
|
|
13
13
|
onBottomOffset != null &&
|
|
@@ -17,7 +17,7 @@ export const VirtualizedRows = ({ rows, rowHeight, setHasScrollbar, onBottom, on
|
|
|
17
17
|
}, children: RenderRow }));
|
|
18
18
|
} }));
|
|
19
19
|
export const useTableScrollbar = () => {
|
|
20
|
-
const
|
|
20
|
+
const { hasScrollbar, setHasScrollbar } = useTableContext();
|
|
21
21
|
const [scrollBarWidth, setScrollBarWidth] = useState(0);
|
|
22
22
|
const handleScrollbarWidth = useCallback((node) => {
|
|
23
23
|
if (node) {
|
|
@@ -8,7 +8,7 @@ export declare const TableHeader: import("styled-components").StyledComponent<"d
|
|
|
8
8
|
tabIndex: number | undefined;
|
|
9
9
|
}, never>;
|
|
10
10
|
type HeadRowType = {
|
|
11
|
-
hasScrollBar
|
|
11
|
+
hasScrollBar?: boolean;
|
|
12
12
|
scrollBarWidth: number;
|
|
13
13
|
rowHeight: TableHeightKeyType;
|
|
14
14
|
separationLineVariant: TableVariantType;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tablestyle.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/Tablestyle.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,kBAAkB,EAElB,gBAAgB,EACjB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAO1C,eAAO,MAAM,aAAa,0GAGzB,CAAC;AACF,eAAO,MAAM,gBAAgB,0GAG5B,CAAC;AACF,eAAO,MAAM,WAAW;;cAEZ,MAAM,GAAG,SAAS;SAkB7B,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,YAAY,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Tablestyle.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/Tablestyle.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,kBAAkB,EAElB,gBAAgB,EACjB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAO1C,eAAO,MAAM,aAAa,0GAGzB,CAAC;AACF,eAAO,MAAM,gBAAgB,0GAG5B,CAAC;AACF,eAAO,MAAM,WAAW;;cAEZ,MAAM,GAAG,SAAS;SAkB7B,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,kBAAkB,CAAC;IAC9B,qBAAqB,EAAE,gBAAgB,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,OAAO,kHAmBnB,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB,EAAE,gBAAgB,CAAC;CACzC,CAAC;AACF,eAAO,MAAM,QAAQ,mHAmCpB,CAAC;AAEF,KAAK,2BAA2B,GAAG;IACjC,UAAU,EAAE,OAAO,CAAC;IACpB,qBAAqB,EAAE,gBAAgB,CAAC;CACzC,CAAC;AACF,eAAO,MAAM,uBAAuB,kIAqBnC,CAAC;AAEF,eAAO,MAAM,SAAS,yGAKrB,CAAC;AACF,eAAO,MAAM,YAAY,yGAKxB,CAAC;AACF,eAAO,MAAM,cAAc,yGAI1B,CAAC;AAEF,eAAO,MAAM,SAAS;;wBAsBrB,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference path="react-table-config.d.ts" />
|
|
2
|
-
|
|
2
|
+
import * as React from 'react';
|
|
3
3
|
import { CellProps as TableCellProps, CoreUIColumn, HeaderGroup, Row, SortByFn, TableBodyPropGetter, TableBodyProps } from 'react-table';
|
|
4
4
|
import { TableHeightKeyType } from './TableUtils';
|
|
5
5
|
type UpdateTableData<DATA_ROW extends Record<string, unknown> = Record<string, unknown>> = {
|
|
@@ -64,6 +64,10 @@ type TableContextType<DATA_ROW extends Record<string, unknown> = Record<string,
|
|
|
64
64
|
plural: string;
|
|
65
65
|
};
|
|
66
66
|
};
|
|
67
|
+
syncScrollListener: ((event: Event) => void) | null;
|
|
68
|
+
setSyncScrollListener: (listener: (event: Event) => void) => void;
|
|
69
|
+
setHasScrollbar: React.Dispatch<React.SetStateAction<boolean>>;
|
|
70
|
+
hasScrollbar?: boolean;
|
|
67
71
|
};
|
|
68
72
|
export declare const useTableContext: <DATA_ROW extends Record<string, unknown> = Record<string, unknown>>() => TableContextType<DATA_ROW>;
|
|
69
73
|
export declare const EmptyCell: ({ tooltipContent, mr, }: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tablev2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/Tablev2.component.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tablev2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/Tablev2.component.tsx"],"names":[],"mappings":"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"}
|
|
@@ -69,6 +69,8 @@ function Table({ columns, data, defaultSortingKey, getRowId, children, sortTypes
|
|
|
69
69
|
return {};
|
|
70
70
|
}, []);
|
|
71
71
|
const [rowHeight, setRowHeight] = React.useState('h40');
|
|
72
|
+
const [syncScrollListener, setSyncScrollListener] = React.useState(null);
|
|
73
|
+
const [hasScrollbar, setHasScrollbar] = React.useState(false);
|
|
72
74
|
const { headerGroups, rows, prepareRow, selectedFlatRows, getTableBodyProps, state: { selectedRowIds }, preGlobalFilteredRows, setGlobalFilter, setFilter, setAllFilters, setHiddenColumns, isAllRowsSelected, toggleAllRowsSelected, } = useTable({
|
|
73
75
|
defaultColumn: {
|
|
74
76
|
...defaultColumn,
|
|
@@ -132,6 +134,10 @@ function Table({ columns, data, defaultSortingKey, getRowId, children, sortTypes
|
|
|
132
134
|
toggleAllRowsSelected,
|
|
133
135
|
status,
|
|
134
136
|
entityName,
|
|
137
|
+
syncScrollListener,
|
|
138
|
+
setSyncScrollListener,
|
|
139
|
+
setHasScrollbar,
|
|
140
|
+
hasScrollbar,
|
|
135
141
|
};
|
|
136
142
|
return (_jsx(TableContext.Provider
|
|
137
143
|
//@ts-ignore
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { Row } from 'react-table';
|
|
2
3
|
import { FixedSizeList } from 'react-window';
|
|
3
4
|
export default function useSyncedScroll<DATA_ROW extends Record<string, unknown> = Record<string, unknown>>(): {
|
|
4
5
|
headerRef: (element: HTMLDivElement) => void;
|
|
5
|
-
bodyRef:
|
|
6
|
+
bodyRef: React.RefObject<FixedSizeList<Row<DATA_ROW>[]>>;
|
|
6
7
|
};
|
|
7
8
|
//# sourceMappingURL=useSyncedScroll.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSyncedScroll.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/useSyncedScroll.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"useSyncedScroll.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/useSyncedScroll.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7C,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC/D;IACH,SAAS,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;CAC1D,CAmDA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { useEffect,
|
|
1
|
+
import { useEffect, useCallback, useRef } from 'react';
|
|
2
|
+
import { useTableContext } from './Tablev2.component';
|
|
2
3
|
export default function useSyncedScroll() {
|
|
3
|
-
const
|
|
4
|
-
const [tableBody, setTableBody] = useState(null);
|
|
4
|
+
const { syncScrollListener, setSyncScrollListener } = useTableContext();
|
|
5
5
|
const headerRef = useCallback((element) => {
|
|
6
6
|
if (element) {
|
|
7
7
|
const callback = (event) => {
|
|
@@ -12,32 +12,30 @@ export default function useSyncedScroll() {
|
|
|
12
12
|
});
|
|
13
13
|
}
|
|
14
14
|
};
|
|
15
|
-
if (!
|
|
16
|
-
|
|
15
|
+
if (!syncScrollListener) {
|
|
16
|
+
setSyncScrollListener(() => {
|
|
17
17
|
return callback;
|
|
18
18
|
});
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
|
-
}, [
|
|
22
|
-
const bodyRef =
|
|
23
|
-
setTableBody(tableBody);
|
|
24
|
-
}, []);
|
|
21
|
+
}, [syncScrollListener]);
|
|
22
|
+
const bodyRef = useRef(null);
|
|
25
23
|
useEffect(() => {
|
|
26
|
-
if (
|
|
24
|
+
if (bodyRef.current && syncScrollListener) {
|
|
27
25
|
/*
|
|
28
26
|
We intentionally use _outerRef prop here despite the fact that it is
|
|
29
27
|
internal use only and not typed, as it is the only way for us to access to the scrollable element
|
|
30
28
|
*/
|
|
31
29
|
//@ts-expect-error
|
|
32
|
-
|
|
33
|
-
return () => {
|
|
34
|
-
//@ts-expect-error
|
|
35
|
-
if (tableBody && tableBody._outerRef) {
|
|
36
|
-
//@ts-expect-error
|
|
37
|
-
tableBody._outerRef.removeEventListener('scroll', listener);
|
|
38
|
-
}
|
|
39
|
-
};
|
|
30
|
+
bodyRef.current._outerRef.addEventListener('scroll', syncScrollListener);
|
|
40
31
|
}
|
|
41
|
-
|
|
32
|
+
return () => {
|
|
33
|
+
//@ts-expect-error
|
|
34
|
+
if (bodyRef.current && bodyRef.current._outerRef) {
|
|
35
|
+
//@ts-expect-error
|
|
36
|
+
bodyRef.current._outerRef.removeEventListener('scroll', syncScrollListener);
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
}, [bodyRef.current, syncScrollListener]);
|
|
42
40
|
return { headerRef, bodyRef };
|
|
43
41
|
}
|
|
@@ -8,7 +8,7 @@ export declare const TabItem: import("styled-components").StyledComponent<"div",
|
|
|
8
8
|
}, never>;
|
|
9
9
|
export declare const TabsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
10
10
|
tabLineColor?: string | undefined;
|
|
11
|
-
separatorColor
|
|
11
|
+
separatorColor?: string | undefined;
|
|
12
12
|
}, never>;
|
|
13
13
|
export declare const TabContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
14
14
|
tabContentColor?: string | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StyledTabs.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tabsv2/StyledTabs.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,yGAGlB,CAAC;AACF,eAAO,MAAM,OAAO;;;;;;SAkDnB,CAAC;AACF,eAAO,MAAM,aAAa
|
|
1
|
+
{"version":3,"file":"StyledTabs.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tabsv2/StyledTabs.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,yGAGlB,CAAC;AACF,eAAO,MAAM,OAAO;;;;;;SAkDnB,CAAC;AACF,eAAO,MAAM,aAAa;;;SA2BzB,CAAC;AACF,eAAO,MAAM,UAAU;;;SAatB,CAAC;AACF,eAAO,MAAM,mBAAmB,yGAE/B,CAAC;AACF,eAAO,MAAM,YAAY,yGAYxB,CAAC"}
|
|
@@ -78,7 +78,11 @@ function Tabs({ activeTabColor, activeTabSeparator, tabLineColor, inactiveTabCol
|
|
|
78
78
|
}
|
|
79
79
|
}, ...childRest, children: [icon && _jsx(TabIcon, { label: label, children: icon }), isSelected ? (_jsx(BasicText, { children: label })) : (_jsx(SecondaryText, { children: label })), textBadge && _jsx(EmphaseText, { children: textBadge })] }, index));
|
|
80
80
|
});
|
|
81
|
-
return (_jsx(TabsContext.Provider, { value: true, children: _jsxs(TabsContainer
|
|
81
|
+
return (_jsx(TabsContext.Provider, { value: true, children: _jsxs(TabsContainer
|
|
82
|
+
// @ts-expect-error containerType is not yet a valid prop for react
|
|
83
|
+
, {
|
|
84
|
+
// @ts-expect-error containerType is not yet a valid prop for react
|
|
85
|
+
style: { containerType: 'size' }, className: ['sc-tabs', className].join(' '), tabLineColor: tabLineColor, separatorColor: separatorColor, ...rest, children: [_jsxs(ScrollableContainer, { children: [displayScroll.start && (_jsx(ScrollButton, { ref: scrollButtonStartRef, direction: "left", onClick: handleStartScrollClick })), _jsx(TabsScroller, { ref: tabsRef, onScroll: handleTabsScroll, children: _jsx(TabBar, { onKeyDown: handleKeyDown, ref: tabsListRef, className: "sc-tabs-bar", role: "tablist", children: tabItems }) }), displayScroll.end && (_jsx(ScrollButton, { ref: scrollButtonEndRef, direction: "right", onClick: handleEndScrollClick }))] }), filteredTabsChildren.map((tab, index) => (_jsx(Route, { exact: tab.props.exact, sensitive: tab.props.sensitive, strict: tab.props.strict, path: tab.props.path.startsWith('/')
|
|
82
86
|
? tab.props.path
|
|
83
87
|
: url + '/' + tab.props.path, children: !tab.props.query ||
|
|
84
88
|
(tab.props.query && matchQuery(tab.props.query)) ? (_jsx(TabContent, { className: "sc-tabs-item-content", tabContentColor: tabContentColor, withoutPadding: tab.props.withoutPadding, children: tab.props.children })) : (_jsx(_Fragment, {})) }, index)))] }) }));
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ChangeEvent, InputHTMLAttributes } from 'react';
|
|
2
|
-
type Props = InputHTMLAttributes<HTMLInputElement> & {
|
|
2
|
+
export type Props = InputHTMLAttributes<HTMLInputElement> & {
|
|
3
3
|
toggle: boolean;
|
|
4
4
|
onChange: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
5
5
|
label?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toggle/Toggle.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAU,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Toggle.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toggle/Toggle.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAU,MAAM,OAAO,CAAC;AAOjE,MAAM,MAAM,KAAK,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;IAC1D,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA2DF,iBAAS,YAAY,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAmD1E;AAED,eAAO,MAAM,MAAM,qBAAe,CAAC"}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useRef } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
|
-
import { spacing } from '../../style/theme';
|
|
5
4
|
import { LABEL_PREFIX, useFieldContext } from '../form/Form.component';
|
|
6
|
-
import { Stack } from '../../spacing';
|
|
5
|
+
import { Stack, spacing } from '../../spacing';
|
|
7
6
|
import { Text } from '../text/Text.component';
|
|
8
7
|
const ToggleContainer = styled.span `
|
|
9
8
|
display: inline-flex;
|
|
@@ -13,8 +12,7 @@ const ToggleContainer = styled.span `
|
|
|
13
12
|
`;
|
|
14
13
|
const Switch = styled.label `
|
|
15
14
|
position: relative;
|
|
16
|
-
width: ${spacing.
|
|
17
|
-
height: ${spacing.sp14};
|
|
15
|
+
width: ${spacing.r24};
|
|
18
16
|
align-self: center;
|
|
19
17
|
${(props) => {
|
|
20
18
|
return css `
|
|
@@ -32,22 +30,21 @@ const Slider = styled.div `
|
|
|
32
30
|
width: 100%;
|
|
33
31
|
height: 1rem;
|
|
34
32
|
background-color: ${(props) => props.theme.backgroundLevel1};
|
|
35
|
-
border: ${spacing.
|
|
33
|
+
border: ${spacing.r1} solid
|
|
36
34
|
${(props) => props.theme[props.toggle ? 'selectedActive' : 'infoPrimary']};
|
|
37
|
-
border-radius: ${spacing.
|
|
35
|
+
border-radius: ${spacing.r8};
|
|
38
36
|
transition: 0.4s;
|
|
39
|
-
|
|
37
|
+
|
|
40
38
|
&:before {
|
|
41
39
|
border-radius: 100%;
|
|
42
40
|
position: absolute;
|
|
43
41
|
content: '';
|
|
44
|
-
height: ${spacing.
|
|
45
|
-
width: ${spacing.
|
|
42
|
+
height: ${spacing.r10};
|
|
43
|
+
width: ${spacing.r10};
|
|
46
44
|
left: 3px;
|
|
47
45
|
top: 3.5px;
|
|
48
46
|
background-color: ${(props) => props.theme[props.toggle ? 'textSecondary' : 'textPrimary']};
|
|
49
47
|
transition: 0.4s;
|
|
50
|
-
-moz-transform: rotate(0.02deg);
|
|
51
48
|
}
|
|
52
49
|
`;
|
|
53
50
|
const ToggleInput = styled.input `
|
|
@@ -55,7 +52,7 @@ const ToggleInput = styled.input `
|
|
|
55
52
|
background-color: ${(props) => props.theme.selectedActive};
|
|
56
53
|
}
|
|
57
54
|
&:checked + ${Slider}:before {
|
|
58
|
-
transform: translateX(${spacing.
|
|
55
|
+
transform: translateX(${spacing.r10});
|
|
59
56
|
}
|
|
60
57
|
display: none;
|
|
61
58
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AttachmentTable.d.ts","sourceRoot":"","sources":["../../../src/lib/organisms/attachments/AttachmentTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAef,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EAEpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAY,eAAe,EAAE,MAAM,aAAa,CAAC;AAQxD,MAAM,MAAM,oBAAoB,CAAC,WAAW,IAAI;IAC9C,yBAAyB,EAAE,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAC;IAC3D,+BAA+B,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1E,2BAA2B,EAAE,mBAAmB,CAAC,WAAW,CAAC,EAAE,CAAC;IAChE,UAAU,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IACjD,YAAY,CAAC,EAAE,CACb,MAAM,EAAE,gBAAgB,CAAC,WAAW,CAAC,KAClC,eAAe,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;IAC/C,uBAAuB,EAAE,MAAM,CAAC;IAChC,8BAA8B,EAAE,CAC9B,oBAAoB,EAAE,mBAAmB,CAAC,WAAW,CAAC,EAAE,KACrD,IAAI,CAAC;IACV,gBAAgB,EACZ;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,GAClB;QACE,MAAM,EAAE,SAAS,GAAG,OAAO,CAAC;QAC5B,IAAI,CAAC,EAAE;YAAE,MAAM,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAA;SAAE,CAAC;KACtE,GACD;QACE,MAAM,EAAE,SAAS,CAAC;QAClB,IAAI,EAAE;YAAE,MAAM,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAA;SAAE,CAAC;KACrE,CAAC;IACN,oBAAoB,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD,CAAC;AAmFF,eAAO,MAAM,kBAAkB,+CAE5B,kBAAkB,EAAE,CAAC,gBAmBvB,CAAC;AAEF,eAAO,MAAM,uBAAuB;sDA5BL,iBAAiB,GAAG,CAAC,EAAE,+BACrB,oBAAoB,GAAG,CAAC,EAAE,KACpD,IAAI;CAkCV,CAAC;AAEF,eAAO,MAAM,eAAe,
|
|
1
|
+
{"version":3,"file":"AttachmentTable.d.ts","sourceRoot":"","sources":["../../../src/lib/organisms/attachments/AttachmentTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAef,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EAEpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAY,eAAe,EAAE,MAAM,aAAa,CAAC;AAQxD,MAAM,MAAM,oBAAoB,CAAC,WAAW,IAAI;IAC9C,yBAAyB,EAAE,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAC;IAC3D,+BAA+B,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1E,2BAA2B,EAAE,mBAAmB,CAAC,WAAW,CAAC,EAAE,CAAC;IAChE,UAAU,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IACjD,YAAY,CAAC,EAAE,CACb,MAAM,EAAE,gBAAgB,CAAC,WAAW,CAAC,KAClC,eAAe,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;IAC/C,uBAAuB,EAAE,MAAM,CAAC;IAChC,8BAA8B,EAAE,CAC9B,oBAAoB,EAAE,mBAAmB,CAAC,WAAW,CAAC,EAAE,KACrD,IAAI,CAAC;IACV,gBAAgB,EACZ;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,GAClB;QACE,MAAM,EAAE,SAAS,GAAG,OAAO,CAAC;QAC5B,IAAI,CAAC,EAAE;YAAE,MAAM,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAA;SAAE,CAAC;KACtE,GACD;QACE,MAAM,EAAE,SAAS,CAAC;QAClB,IAAI,EAAE;YAAE,MAAM,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAA;SAAE,CAAC;KACrE,CAAC;IACN,oBAAoB,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD,CAAC;AAmFF,eAAO,MAAM,kBAAkB,+CAE5B,kBAAkB,EAAE,CAAC,gBAmBvB,CAAC;AAEF,eAAO,MAAM,uBAAuB;sDA5BL,iBAAiB,GAAG,CAAC,EAAE,+BACrB,oBAAoB,GAAG,CAAC,EAAE,KACpD,IAAI;CAkCV,CAAC;AAEF,eAAO,MAAM,eAAe,0RAmiB3B,CAAC"}
|
|
@@ -338,7 +338,7 @@ export const AttachmentTable = ({ initiallyAttachedEntities, initiallyAttachedEn
|
|
|
338
338
|
setSearchInputIsFocused(true);
|
|
339
339
|
}, onBlur: () => {
|
|
340
340
|
setSearchInputIsFocused(false);
|
|
341
|
-
},
|
|
341
|
+
}, disabled: filteredEntities.status === 'error' }), _jsx(Loader, {})] }) })) : (_jsx(StyledSearchInput, { autoComplete: "off", placeholder: searchEntityPlaceholder, ...getInputProps({
|
|
342
342
|
ref: (element) => {
|
|
343
343
|
if (element)
|
|
344
344
|
searchInputRef.current = element;
|
|
@@ -348,7 +348,7 @@ export const AttachmentTable = ({ initiallyAttachedEntities, initiallyAttachedEn
|
|
|
348
348
|
setSearchInputIsFocused(true);
|
|
349
349
|
}, onBlur: () => {
|
|
350
350
|
setSearchInputIsFocused(false);
|
|
351
|
-
},
|
|
351
|
+
}, searchInputIsFocused: searchInputIsFocused })), _jsxs(MenuContainer, { ...getMenuProps(), width: searchWidth, isOpen: isOpen, searchInputIsFocused: searchInputIsFocused, children: [isOpen &&
|
|
352
352
|
filteredEntities.status === 'success' &&
|
|
353
353
|
((_a = filteredEntities.data) === null || _a === void 0 ? void 0 : _a.entities.map((item, index) => (_jsx("li", { ...getItemProps({ item, index }), children: _jsx(Text, { children: item.name }) }, `${item.id}${index}`)))), isOpen && filteredEntities.status === 'loading' && (_jsx("li", { children: _jsx(Text, { children: "Searching..." }) })), isOpen && filteredEntities.status === 'error' && (_jsx("li", { children: _jsx(Text, { color: "statusCritical", children: "An error occured while searching" }) })), isOpen &&
|
|
354
354
|
filteredEntities.status === 'success' &&
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@scality/core-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.136.0",
|
|
4
4
|
"description": "Scality common React component library",
|
|
5
5
|
"author": "Scality Engineering",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE",
|
|
@@ -119,7 +119,7 @@
|
|
|
119
119
|
"react-select": "4.3.1",
|
|
120
120
|
"react-table": "^7.7.0",
|
|
121
121
|
"react-virtualized": "9.22.3",
|
|
122
|
-
"react-virtualized-auto-sizer": "^1.0.
|
|
122
|
+
"react-virtualized-auto-sizer": "^1.0.24",
|
|
123
123
|
"react-window": "^1.8.6",
|
|
124
124
|
"styled-components": "^5.2.1",
|
|
125
125
|
"styled-system": "^5.1.5",
|
|
@@ -26,9 +26,12 @@ const ConstrainedTextContainer = styled.div`
|
|
|
26
26
|
-webkit-line-clamp: ${props.lineClamp};
|
|
27
27
|
-webkit-box-orient: vertical;
|
|
28
28
|
overflow-wrap: break-word;
|
|
29
|
+
word-break: break-all;
|
|
29
30
|
`
|
|
30
31
|
: `overflow-wrap: break-word;
|
|
31
|
-
white-space: nowrap
|
|
32
|
+
white-space: nowrap;
|
|
33
|
+
word-break: break-all;
|
|
34
|
+
`};
|
|
32
35
|
`;
|
|
33
36
|
const BlockTooltip = styled.div`
|
|
34
37
|
width: stretch;
|