@hitachivantara/uikit-react-core 5.24.1 → 5.24.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/dist/cjs/components/BulkActions/BulkActions.cjs +0 -4
- package/dist/cjs/components/BulkActions/BulkActions.cjs.map +1 -1
- package/dist/cjs/components/Card/Card.styles.cjs +1 -1
- package/dist/cjs/components/Card/Card.styles.cjs.map +1 -1
- package/dist/cjs/components/CheckBoxGroup/CheckBoxGroup.styles.cjs +0 -4
- package/dist/cjs/components/CheckBoxGroup/CheckBoxGroup.styles.cjs.map +1 -1
- package/dist/cjs/components/DropDownMenu/DropDownMenu.styles.cjs +1 -1
- package/dist/cjs/components/DropDownMenu/DropDownMenu.styles.cjs.map +1 -1
- package/dist/cjs/components/FilterGroup/RightPanel/RightPanel.styles.cjs +0 -4
- package/dist/cjs/components/FilterGroup/RightPanel/RightPanel.styles.cjs.map +1 -1
- package/dist/cjs/components/GlobalActions/GlobalActions.cjs +38 -17
- package/dist/cjs/components/GlobalActions/GlobalActions.cjs.map +1 -1
- package/dist/cjs/components/GlobalActions/GlobalActions.styles.cjs +42 -89
- package/dist/cjs/components/GlobalActions/GlobalActions.styles.cjs.map +1 -1
- package/dist/cjs/components/List/List.styles.cjs +11 -26
- package/dist/cjs/components/List/List.styles.cjs.map +1 -1
- package/dist/cjs/components/Loading/Loading.cjs +18 -13
- package/dist/cjs/components/Loading/Loading.cjs.map +1 -1
- package/dist/cjs/components/Loading/Loading.styles.cjs +44 -96
- package/dist/cjs/components/Loading/Loading.styles.cjs.map +1 -1
- package/dist/cjs/components/RadioGroup/RadioGroup.styles.cjs +0 -4
- package/dist/cjs/components/RadioGroup/RadioGroup.styles.cjs.map +1 -1
- package/dist/cjs/components/SelectionList/SelectionList.cjs +25 -15
- package/dist/cjs/components/SelectionList/SelectionList.cjs.map +1 -1
- package/dist/cjs/components/SelectionList/SelectionList.styles.cjs +41 -119
- package/dist/cjs/components/SelectionList/SelectionList.styles.cjs.map +1 -1
- package/dist/cjs/components/Stack/Stack.cjs +8 -7
- package/dist/cjs/components/Stack/Stack.cjs.map +1 -1
- package/dist/cjs/components/Stack/Stack.styles.cjs +18 -37
- package/dist/cjs/components/Stack/Stack.styles.cjs.map +1 -1
- package/dist/cjs/components/Table/Table.styles.cjs +6 -7
- package/dist/cjs/components/Table/Table.styles.cjs.map +1 -1
- package/dist/cjs/components/Table/TableRow/TableRow.styles.cjs +6 -22
- package/dist/cjs/components/Table/TableRow/TableRow.styles.cjs.map +1 -1
- package/dist/cjs/components/Table/hooks/useSticky.cjs +5 -1
- package/dist/cjs/components/Table/hooks/useSticky.cjs.map +1 -1
- package/dist/cjs/components/Table/utils/utils.cjs +15 -42
- package/dist/cjs/components/Table/utils/utils.cjs.map +1 -1
- package/dist/cjs/components/Tabs/Tabs.cjs +11 -8
- package/dist/cjs/components/Tabs/Tabs.cjs.map +1 -1
- package/dist/cjs/components/Tabs/Tabs.styles.cjs +16 -20
- package/dist/cjs/components/Tabs/Tabs.styles.cjs.map +1 -1
- package/dist/cjs/components/TextArea/TextArea.cjs +32 -21
- package/dist/cjs/components/TextArea/TextArea.cjs.map +1 -1
- package/dist/cjs/components/TextArea/TextArea.styles.cjs +45 -142
- package/dist/cjs/components/TextArea/TextArea.styles.cjs.map +1 -1
- package/dist/cjs/components/VerticalNavigation/TreeView/TreeViewItem.styles.cjs +4 -11
- package/dist/cjs/components/VerticalNavigation/TreeView/TreeViewItem.styles.cjs.map +1 -1
- package/dist/cjs/components/VerticalNavigation/TreeView/descendants.cjs +1 -9
- package/dist/cjs/components/VerticalNavigation/TreeView/descendants.cjs.map +1 -1
- package/dist/cjs/index.cjs +12 -12
- package/dist/esm/components/BulkActions/BulkActions.js +0 -4
- package/dist/esm/components/BulkActions/BulkActions.js.map +1 -1
- package/dist/esm/components/Card/Card.styles.js +1 -1
- package/dist/esm/components/Card/Card.styles.js.map +1 -1
- package/dist/esm/components/CheckBoxGroup/CheckBoxGroup.styles.js +0 -4
- package/dist/esm/components/CheckBoxGroup/CheckBoxGroup.styles.js.map +1 -1
- package/dist/esm/components/DropDownMenu/DropDownMenu.styles.js +1 -1
- package/dist/esm/components/DropDownMenu/DropDownMenu.styles.js.map +1 -1
- package/dist/esm/components/FilterGroup/RightPanel/RightPanel.styles.js +0 -4
- package/dist/esm/components/FilterGroup/RightPanel/RightPanel.styles.js.map +1 -1
- package/dist/esm/components/GlobalActions/GlobalActions.js +44 -22
- package/dist/esm/components/GlobalActions/GlobalActions.js.map +1 -1
- package/dist/esm/components/GlobalActions/GlobalActions.styles.js +42 -87
- package/dist/esm/components/GlobalActions/GlobalActions.styles.js.map +1 -1
- package/dist/esm/components/List/List.styles.js +11 -26
- package/dist/esm/components/List/List.styles.js.map +1 -1
- package/dist/esm/components/Loading/Loading.js +21 -15
- package/dist/esm/components/Loading/Loading.js.map +1 -1
- package/dist/esm/components/Loading/Loading.styles.js +44 -94
- package/dist/esm/components/Loading/Loading.styles.js.map +1 -1
- package/dist/esm/components/RadioGroup/RadioGroup.styles.js +0 -4
- package/dist/esm/components/RadioGroup/RadioGroup.styles.js.map +1 -1
- package/dist/esm/components/SelectionList/SelectionList.js +28 -17
- package/dist/esm/components/SelectionList/SelectionList.js.map +1 -1
- package/dist/esm/components/SelectionList/SelectionList.styles.js +41 -117
- package/dist/esm/components/SelectionList/SelectionList.styles.js.map +1 -1
- package/dist/esm/components/Stack/Stack.js +11 -9
- package/dist/esm/components/Stack/Stack.js.map +1 -1
- package/dist/esm/components/Stack/Stack.styles.js +18 -35
- package/dist/esm/components/Stack/Stack.styles.js.map +1 -1
- package/dist/esm/components/Table/Table.styles.js +6 -7
- package/dist/esm/components/Table/Table.styles.js.map +1 -1
- package/dist/esm/components/Table/TableRow/TableRow.styles.js +6 -22
- package/dist/esm/components/Table/TableRow/TableRow.styles.js.map +1 -1
- package/dist/esm/components/Table/hooks/useSticky.js +5 -1
- package/dist/esm/components/Table/hooks/useSticky.js.map +1 -1
- package/dist/esm/components/Table/utils/utils.js +15 -42
- package/dist/esm/components/Table/utils/utils.js.map +1 -1
- package/dist/esm/components/Tabs/Tabs.js +14 -10
- package/dist/esm/components/Tabs/Tabs.js.map +1 -1
- package/dist/esm/components/Tabs/Tabs.styles.js +16 -18
- package/dist/esm/components/Tabs/Tabs.styles.js.map +1 -1
- package/dist/esm/components/TextArea/TextArea.js +35 -23
- package/dist/esm/components/TextArea/TextArea.js.map +1 -1
- package/dist/esm/components/TextArea/TextArea.styles.js +45 -140
- package/dist/esm/components/TextArea/TextArea.styles.js.map +1 -1
- package/dist/esm/components/VerticalNavigation/TreeView/TreeViewItem.styles.js +4 -11
- package/dist/esm/components/VerticalNavigation/TreeView/TreeViewItem.styles.js.map +1 -1
- package/dist/esm/components/VerticalNavigation/TreeView/descendants.js +1 -9
- package/dist/esm/components/VerticalNavigation/TreeView/descendants.js.map +1 -1
- package/dist/esm/index.js +220 -220
- package/dist/types/index.d.ts +387 -346
- package/package.json +2 -2
- package/dist/cjs/components/GlobalActions/globalActionsClasses.cjs +0 -8
- package/dist/cjs/components/GlobalActions/globalActionsClasses.cjs.map +0 -1
- package/dist/cjs/components/Loading/loadingClasses.cjs +0 -8
- package/dist/cjs/components/Loading/loadingClasses.cjs.map +0 -1
- package/dist/cjs/components/SelectionList/selectionListClasses.cjs +0 -8
- package/dist/cjs/components/SelectionList/selectionListClasses.cjs.map +0 -1
- package/dist/cjs/components/Stack/stackClasses.cjs +0 -8
- package/dist/cjs/components/Stack/stackClasses.cjs.map +0 -1
- package/dist/cjs/components/Tabs/tabsClasses.cjs +0 -8
- package/dist/cjs/components/Tabs/tabsClasses.cjs.map +0 -1
- package/dist/cjs/components/TextArea/textAreaClasses.cjs +0 -8
- package/dist/cjs/components/TextArea/textAreaClasses.cjs.map +0 -1
- package/dist/esm/components/GlobalActions/globalActionsClasses.js +0 -8
- package/dist/esm/components/GlobalActions/globalActionsClasses.js.map +0 -1
- package/dist/esm/components/Loading/loadingClasses.js +0 -8
- package/dist/esm/components/Loading/loadingClasses.js.map +0 -1
- package/dist/esm/components/SelectionList/selectionListClasses.js +0 -8
- package/dist/esm/components/SelectionList/selectionListClasses.js.map +0 -1
- package/dist/esm/components/Stack/stackClasses.js +0 -8
- package/dist/esm/components/Stack/stackClasses.js.map +0 -1
- package/dist/esm/components/Tabs/tabsClasses.js +0 -8
- package/dist/esm/components/Tabs/tabsClasses.js.map +0 -1
- package/dist/esm/components/TextArea/textAreaClasses.js +0 -8
- package/dist/esm/components/TextArea/textAreaClasses.js.map +0 -1
|
@@ -1,55 +1,36 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const _styled = require("@emotion/styled/base");
|
|
4
3
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
5
|
-
const
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
target[key] = source[key];
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
return target;
|
|
19
|
-
};
|
|
20
|
-
return _extends.apply(this, arguments);
|
|
21
|
-
}
|
|
22
|
-
const StyledRoot = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? _extends({}, {
|
|
23
|
-
target: "evwozt80"
|
|
24
|
-
}, transientOptions.transientOptions) : _extends({}, {
|
|
25
|
-
target: "evwozt80",
|
|
26
|
-
label: "StyledRoot"
|
|
27
|
-
}, transientOptions.transientOptions))(({
|
|
28
|
-
$direction,
|
|
29
|
-
$breakpoint
|
|
30
|
-
}) => ({
|
|
31
|
-
display: "flex",
|
|
32
|
-
...$direction === "column" && {
|
|
4
|
+
const classes = require("../../utils/classes.cjs");
|
|
5
|
+
const {
|
|
6
|
+
staticClasses,
|
|
7
|
+
useClasses
|
|
8
|
+
} = classes.createClasses("HvStack", {
|
|
9
|
+
root: {
|
|
10
|
+
display: "flex"
|
|
11
|
+
},
|
|
12
|
+
column: {
|
|
33
13
|
flexDirection: "column"
|
|
34
14
|
},
|
|
35
|
-
|
|
15
|
+
row: {
|
|
36
16
|
flexDirection: "row"
|
|
37
17
|
},
|
|
38
|
-
|
|
18
|
+
xs: {
|
|
39
19
|
gap: uikitStyles.theme.space.xs
|
|
40
20
|
},
|
|
41
|
-
|
|
21
|
+
sm: {
|
|
42
22
|
gap: uikitStyles.theme.space.sm
|
|
43
23
|
},
|
|
44
|
-
|
|
24
|
+
md: {
|
|
45
25
|
gap: uikitStyles.theme.spacing(4)
|
|
46
26
|
},
|
|
47
|
-
|
|
27
|
+
lg: {
|
|
48
28
|
gap: uikitStyles.theme.spacing(6)
|
|
49
29
|
},
|
|
50
|
-
|
|
30
|
+
xl: {
|
|
51
31
|
gap: uikitStyles.theme.spacing(11)
|
|
52
32
|
}
|
|
53
|
-
})
|
|
54
|
-
exports.
|
|
33
|
+
});
|
|
34
|
+
exports.staticClasses = staticClasses;
|
|
35
|
+
exports.useClasses = useClasses;
|
|
55
36
|
//# sourceMappingURL=Stack.styles.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.styles.cjs","sources":["../../../../src/components/Stack/Stack.styles.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"Stack.styles.cjs","sources":["../../../../src/components/Stack/Stack.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvStack\", {\n root: {\n display: \"flex\",\n },\n column: {\n flexDirection: \"column\",\n },\n row: {\n flexDirection: \"row\",\n },\n xs: {\n gap: theme.space.xs,\n },\n sm: {\n gap: theme.space.sm,\n },\n md: {\n gap: theme.spacing(4),\n },\n lg: {\n gap: theme.spacing(6),\n },\n xl: {\n gap: theme.spacing(11),\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","column","flexDirection","row","xs","gap","theme","space","sm","md","spacing","lg","xl"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,WAAW;AAAA,EACpEC,MAAM;AAAA,IACJC,SAAS;AAAA,EACX;AAAA,EACAC,QAAQ;AAAA,IACNC,eAAe;AAAA,EACjB;AAAA,EACAC,KAAK;AAAA,IACHD,eAAe;AAAA,EACjB;AAAA,EACAE,IAAI;AAAA,IACFC,KAAKC,YAAAA,MAAMC,MAAMH;AAAAA,EACnB;AAAA,EACAI,IAAI;AAAA,IACFH,KAAKC,YAAAA,MAAMC,MAAMC;AAAAA,EACnB;AAAA,EACAC,IAAI;AAAA,IACFJ,KAAKC,YAAAA,MAAMI,QAAQ,CAAC;AAAA,EACtB;AAAA,EACAC,IAAI;AAAA,IACFN,KAAKC,YAAAA,MAAMI,QAAQ,CAAC;AAAA,EACtB;AAAA,EACAE,IAAI;AAAA,IACFP,KAAKC,YAAAA,MAAMI,QAAQ,EAAE;AAAA,EACvB;AACF,CAAC;;;"}
|
|
@@ -10,9 +10,7 @@ const {
|
|
|
10
10
|
position: "relative",
|
|
11
11
|
width: "100%",
|
|
12
12
|
...uikitStyles.theme.typography.body,
|
|
13
|
-
|
|
14
|
-
borderSpacing: 0
|
|
15
|
-
},
|
|
13
|
+
borderSpacing: 0,
|
|
16
14
|
"& caption": {
|
|
17
15
|
...uikitStyles.theme.typography.body,
|
|
18
16
|
padding: uikitStyles.theme.space.xs,
|
|
@@ -22,12 +20,13 @@ const {
|
|
|
22
20
|
},
|
|
23
21
|
stickyHeader: {},
|
|
24
22
|
stickyColumns: {
|
|
25
|
-
backgroundColor: uikitStyles.theme.colors.atmo2
|
|
23
|
+
backgroundColor: uikitStyles.theme.colors.atmo2,
|
|
24
|
+
"&": {
|
|
25
|
+
borderSpacing: 0
|
|
26
|
+
}
|
|
26
27
|
},
|
|
27
28
|
listRow: {
|
|
28
|
-
|
|
29
|
-
borderSpacing: `0 ${uikitStyles.theme.space.xs}`
|
|
30
|
-
}
|
|
29
|
+
borderSpacing: `0 ${uikitStyles.theme.space.xs}`
|
|
31
30
|
}
|
|
32
31
|
});
|
|
33
32
|
exports.staticClasses = staticClasses;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.styles.cjs","sources":["../../../../src/components/Table/Table.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTable\", {\n root: {\n position: \"relative\",\n width: \"100%\",\n\n ...theme.typography.body,\n\n
|
|
1
|
+
{"version":3,"file":"Table.styles.cjs","sources":["../../../../src/components/Table/Table.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTable\", {\n root: {\n position: \"relative\",\n width: \"100%\",\n\n ...theme.typography.body,\n\n borderSpacing: 0,\n\n \"& caption\": {\n ...theme.typography.body,\n padding: theme.space.xs,\n textAlign: \"left\",\n captionSide: \"bottom\",\n },\n },\n stickyHeader: {},\n stickyColumns: {\n backgroundColor: theme.colors.atmo2,\n \"&\": {\n borderSpacing: 0,\n },\n },\n listRow: {\n borderSpacing: `0 ${theme.space.xs}`,\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","position","width","theme","typography","body","borderSpacing","padding","space","xs","textAlign","captionSide","stickyHeader","stickyColumns","backgroundColor","colors","atmo2","listRow"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,WAAW;AAAA,EACpEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,OAAO;AAAA,IAEP,GAAGC,YAAAA,MAAMC,WAAWC;AAAAA,IAEpBC,eAAe;AAAA,IAEf,aAAa;AAAA,MACX,GAAGH,YAAAA,MAAMC,WAAWC;AAAAA,MACpBE,SAASJ,YAAAA,MAAMK,MAAMC;AAAAA,MACrBC,WAAW;AAAA,MACXC,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACAC,cAAc,CAAC;AAAA,EACfC,eAAe;AAAA,IACbC,iBAAiBX,YAAAA,MAAMY,OAAOC;AAAAA,IAC9B,KAAK;AAAA,MACHV,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACAW,SAAS;AAAA,IACPX,eAAgB,KAAIH,YAAAA,MAAMK,MAAMC;AAAAA,EAClC;AACF,CAAC;;;"}
|
|
@@ -12,21 +12,10 @@ const {
|
|
|
12
12
|
color: "inherit",
|
|
13
13
|
backgroundColor: uikitStyles.theme.table.rowBackgroundColor,
|
|
14
14
|
verticalAlign: "middle",
|
|
15
|
-
outline: 0
|
|
16
|
-
minHeight: 32,
|
|
17
|
-
"tr&": {
|
|
18
|
-
height: 32
|
|
19
|
-
}
|
|
15
|
+
outline: 0
|
|
20
16
|
},
|
|
21
17
|
/** Styles applied to the component root when inside a `HvTableHead`. */
|
|
22
|
-
head: {
|
|
23
|
-
"&:first-of-type": {
|
|
24
|
-
height: 52
|
|
25
|
-
},
|
|
26
|
-
"tr&:first-of-type": {
|
|
27
|
-
height: 52
|
|
28
|
-
}
|
|
29
|
-
},
|
|
18
|
+
head: {},
|
|
30
19
|
/** Styles applied to the component root when inside a `HvTableBody`. */
|
|
31
20
|
body: {},
|
|
32
21
|
/** Styles applied to the component root when inside a `HvTableFooter`. */
|
|
@@ -53,9 +42,11 @@ const {
|
|
|
53
42
|
},
|
|
54
43
|
/** Styles applied to the component root when its table variant is list. */
|
|
55
44
|
variantList: {
|
|
45
|
+
// only applied on custom `display`
|
|
46
|
+
marginBottom: uikitStyles.theme.space.xs,
|
|
47
|
+
borderRadius: uikitStyles.theme.table.rowListBorderRadius,
|
|
56
48
|
...utils.getBorderStyles("row", uikitStyles.theme.table.rowListBorderColor, uikitStyles.theme.table.rowListBorderRadius),
|
|
57
49
|
backgroundColor: uikitStyles.theme.colors.atmo1,
|
|
58
|
-
height: 52,
|
|
59
50
|
"&$selected": {
|
|
60
51
|
...utils.getBorderStyles("row", uikitStyles.theme.colors.secondary, uikitStyles.theme.table.rowListBorderRadius),
|
|
61
52
|
"&:hover": {
|
|
@@ -71,14 +62,7 @@ const {
|
|
|
71
62
|
},
|
|
72
63
|
/** Styles applied to the component root when its table variant is list. */
|
|
73
64
|
variantListHead: {
|
|
74
|
-
backgroundColor: uikitStyles.theme.table.rowListBackgroundColor
|
|
75
|
-
height: 16,
|
|
76
|
-
"&:first-of-type": {
|
|
77
|
-
height: 16
|
|
78
|
-
},
|
|
79
|
-
"tr&:first-of-type": {
|
|
80
|
-
height: 16
|
|
81
|
-
}
|
|
65
|
+
backgroundColor: uikitStyles.theme.table.rowListBackgroundColor
|
|
82
66
|
}
|
|
83
67
|
});
|
|
84
68
|
exports.staticClasses = staticClasses;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableRow.styles.cjs","sources":["../../../../../src/components/Table/TableRow/TableRow.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nimport { getBorderStyles } from \"../utils/utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableRow\", {\n /** Styles applied to the component root class. */\n root: {\n color: \"inherit\",\n backgroundColor: theme.table.rowBackgroundColor,\n verticalAlign: \"middle\",\n outline: 0,\n
|
|
1
|
+
{"version":3,"file":"TableRow.styles.cjs","sources":["../../../../../src/components/Table/TableRow/TableRow.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nimport { getBorderStyles } from \"../utils/utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableRow\", {\n /** Styles applied to the component root class. */\n root: {\n color: \"inherit\",\n backgroundColor: theme.table.rowBackgroundColor,\n verticalAlign: \"middle\",\n outline: 0,\n },\n /** Styles applied to the component root when inside a `HvTableHead`. */\n head: {},\n /** Styles applied to the component root when inside a `HvTableBody`. */\n body: {},\n /** Styles applied to the component root when inside a `HvTableFooter`. */\n footer: {},\n /** Styles applied to the component root when selected. */\n selected: {\n backgroundColor: theme.table.selectedRowBackgroundColor,\n },\n /** Styles applied to the component root when expanded. */\n expanded: {\n backgroundColor: theme.colors.atmo1,\n \"& > *[role=cell]\": {\n borderBottom: \"none\",\n },\n },\n /** Styles applied to the component root when striped. */\n striped: {},\n /** Styles applied to the component root on hover. */\n hover: {\n transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n \"&:hover\": {\n backgroundColor: theme.table.rowHoverColor,\n },\n },\n /** Styles applied to the component root when its table variant is list. */\n variantList: {\n // only applied on custom `display`\n marginBottom: theme.space.xs,\n borderRadius: theme.table.rowListBorderRadius,\n\n ...getBorderStyles(\n \"row\",\n theme.table.rowListBorderColor,\n theme.table.rowListBorderRadius\n ),\n backgroundColor: theme.colors.atmo1,\n \"&$selected\": {\n ...getBorderStyles(\n \"row\",\n theme.colors.secondary,\n theme.table.rowListBorderRadius\n ),\n\n \"&:hover\": {\n ...getBorderStyles(\n \"row\",\n theme.table.rowHoverBorderColor,\n theme.table.rowListBorderRadius\n ),\n },\n },\n\n \"&:hover\": {\n ...getBorderStyles(\n \"row\",\n theme.table.rowHoverBorderColor,\n theme.table.rowListBorderRadius\n ),\n },\n \"&.HvIsFocused\": {\n borderRadius: theme.table.rowListBorderRadius,\n },\n },\n /** Styles applied to the component root when its table variant is list. */\n variantListHead: {\n backgroundColor: theme.table.rowListBackgroundColor,\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","color","backgroundColor","theme","table","rowBackgroundColor","verticalAlign","outline","head","body","footer","selected","selectedRowBackgroundColor","expanded","colors","atmo1","borderBottom","striped","hover","transition","rowHoverColor","variantList","marginBottom","space","xs","borderRadius","rowListBorderRadius","getBorderStyles","rowListBorderColor","secondary","rowHoverBorderColor","variantListHead","rowListBackgroundColor"],"mappings":";;;;;AAMa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,cAAc;AAAA;AAAA,EAEvEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,iBAAiBC,YAAAA,MAAMC,MAAMC;AAAAA,IAC7BC,eAAe;AAAA,IACfC,SAAS;AAAA,EACX;AAAA;AAAA,EAEAC,MAAM,CAAC;AAAA;AAAA,EAEPC,MAAM,CAAC;AAAA;AAAA,EAEPC,QAAQ,CAAC;AAAA;AAAA,EAETC,UAAU;AAAA,IACRT,iBAAiBC,YAAAA,MAAMC,MAAMQ;AAAAA,EAC/B;AAAA;AAAA,EAEAC,UAAU;AAAA,IACRX,iBAAiBC,YAAAA,MAAMW,OAAOC;AAAAA,IAC9B,oBAAoB;AAAA,MAClBC,cAAc;AAAA,IAChB;AAAA,EACF;AAAA;AAAA,EAEAC,SAAS,CAAC;AAAA;AAAA,EAEVC,OAAO;AAAA,IACLC,YAAY;AAAA,IACZ,WAAW;AAAA,MACTjB,iBAAiBC,YAAAA,MAAMC,MAAMgB;AAAAA,IAC/B;AAAA,EACF;AAAA;AAAA,EAEAC,aAAa;AAAA;AAAA,IAEXC,cAAcnB,YAAAA,MAAMoB,MAAMC;AAAAA,IAC1BC,cAActB,YAAAA,MAAMC,MAAMsB;AAAAA,IAE1B,GAAGC,sBACD,OACAxB,kBAAMC,MAAMwB,oBACZzB,YAAAA,MAAMC,MAAMsB,mBACd;AAAA,IACAxB,iBAAiBC,YAAAA,MAAMW,OAAOC;AAAAA,IAC9B,cAAc;AAAA,MACZ,GAAGY,sBACD,OACAxB,kBAAMW,OAAOe,WACb1B,YAAAA,MAAMC,MAAMsB,mBACd;AAAA,MAEA,WAAW;AAAA,QACT,GAAGC,sBACD,OACAxB,kBAAMC,MAAM0B,qBACZ3B,YAAAA,MAAMC,MAAMsB,mBACd;AAAA,MACF;AAAA,IACF;AAAA,IAEA,WAAW;AAAA,MACT,GAAGC,sBACD,OACAxB,kBAAMC,MAAM0B,qBACZ3B,YAAAA,MAAMC,MAAMsB,mBACd;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACfD,cAActB,YAAAA,MAAMC,MAAMsB;AAAAA,IAC5B;AAAA,EACF;AAAA;AAAA,EAEAK,iBAAiB;AAAA,IACf7B,iBAAiBC,YAAAA,MAAMC,MAAM4B;AAAAA,EAC/B;AACF,CAAC;;;"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
3
|
const reactTable = require("react-table");
|
|
4
|
+
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
4
5
|
const isSticky = (value) => /left|right/i.test(value);
|
|
5
6
|
const getStickyValue = ({
|
|
6
7
|
sticky,
|
|
@@ -119,7 +120,10 @@ const getCellProps = (header, isHeaderCell) => {
|
|
|
119
120
|
alignItems: isHeaderCell ? "start" : "center",
|
|
120
121
|
justifyContent: header.align,
|
|
121
122
|
width: `${header.totalWidth}px`,
|
|
122
|
-
minWidth: `${header.totalMinWidth}px
|
|
123
|
+
minWidth: `${header.totalMinWidth}px`,
|
|
124
|
+
...isHeaderCell && {
|
|
125
|
+
backgroundColor: uikitStyles.theme.colors.atmo2
|
|
126
|
+
}
|
|
123
127
|
}
|
|
124
128
|
};
|
|
125
129
|
if (header.sticky != null) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSticky.cjs","sources":["../../../../../src/components/Table/hooks/useSticky.ts"],"sourcesContent":["import {\n makePropGetter,\n useGetLatest,\n Hooks,\n PropGetter,\n TableCommonProps,\n} from \"react-table\";\nimport { CSSProperties } from \"react\";\n\n// #region ##### TYPES #####\n\nexport interface UseHvTableStickyTableHeadProps extends TableCommonProps {\n stickyHeader?: boolean;\n}\n\nexport type HvTableHeadPropGetter<D extends object> = PropGetter<\n D,\n UseHvTableStickyTableHeadProps\n>;\n\nexport type UseHvTableStickyTableOptions = {\n stickyHeader?: boolean;\n stickyColumns?: boolean;\n};\n\nexport interface UseHvTableStickyHooks<D extends object> {\n getTableHeadProps: Array<HvTableHeadPropGetter<D>>;\n}\n\nexport interface UseHvTableStickyTableInstance<D extends object> {\n getTableHeadProps: (\n propGetter?: HvTableHeadPropGetter<D>\n ) => UseHvTableStickyTableHeadProps;\n\n totalRight?: number;\n hasStickyColumns?: boolean;\n}\n\n// props target: <table>\nexport interface UseHvTableStickyTableProps {\n stickyHeader?: boolean;\n stickyColumns?: boolean;\n}\n\n// props target: <table><thead><tr><th>\nexport interface UseHvTableStickyColumnProps {\n stickyColumn?: boolean;\n stickyColumnMostLeft?: boolean;\n stickyColumnLeastRight?: boolean;\n}\n\n// props target: <table><tbody><tr><td>\nexport interface UseHvTableStickyCellProps {\n stickyColumn?: boolean;\n stickyColumnMostLeft?: boolean;\n stickyColumnLeastRight?: boolean;\n}\n\nexport type UseHvTableSticky = (<D extends object = Record<string, unknown>>(\n hooks: Hooks<D>\n) => void) & { pluginName: string };\n\n// #endregion ##### TYPES #####\n\nconst isSticky = (value) => /left|right/i.test(value);\n\nconst getStickyValue = ({ sticky, parent }) => {\n if (isSticky(sticky)) {\n return sticky;\n }\n\n if (parent != null) {\n // check if parent is sticky\n sticky = getStickyValue(parent);\n if (isSticky(sticky)) {\n return sticky;\n }\n\n const { columns } = parent;\n // check if any column in the same group is sticky\n if (columns?.length > 0) {\n sticky = columns?.find((col) => col.sticky != null)?.sticky;\n if (isSticky(sticky)) {\n return sticky;\n }\n }\n }\n\n return undefined;\n};\n\nconst updateColumnAndParent = (column, props) => {\n Object.assign(column, props);\n\n if (column.parent != null) {\n updateColumnAndParent(column.parent, props);\n }\n};\n\nconst visibleColumnsHook = (columns, { instance }) => {\n const toTheLeft: any[] = [];\n const toTheRight: any[] = [];\n const others: any[] = [];\n\n columns.forEach((column) => {\n const sticky = getStickyValue(column)?.toLowerCase();\n\n updateColumnAndParent(column, { sticky });\n\n if (sticky === \"left\") {\n toTheLeft.push(column);\n } else if (sticky === \"right\") {\n toTheRight.push(column);\n } else {\n others.push(column);\n }\n });\n\n if (others.length > 0) {\n const [firstNotSticky] = others;\n updateColumnAndParent(firstNotSticky, { isFirstNotSticky: true });\n\n const lastNotSticky = others[others.length - 1];\n updateColumnAndParent(lastNotSticky, { isLastNotSticky: true });\n }\n\n const hasLeftSticky = toTheLeft.length > 0;\n if (hasLeftSticky) {\n const lastLeftSticky = toTheLeft[toTheLeft.length - 1];\n\n updateColumnAndParent(lastLeftSticky, { isLastLeftSticky: true });\n }\n\n const hasRightSticky = toTheRight.length > 0;\n if (hasRightSticky) {\n const [firstRightSticky] = toTheRight;\n\n updateColumnAndParent(firstRightSticky, { isFirstRightSticky: true });\n }\n\n instance.hasStickyColumns = hasLeftSticky || hasRightSticky;\n\n return [...toTheLeft, ...others, ...toTheRight];\n};\n\nconst calculateHeaderWidthsToTheRight = (headers, right = 0) => {\n if (!headers?.length) {\n return;\n }\n\n for (let i = headers.length - 1; i !== -1; i -= 1) {\n const header = headers[i];\n\n header.totalRight = right;\n\n const { headers: subHeaders } = header;\n if (subHeaders?.length > 0) {\n calculateHeaderWidthsToTheRight(subHeaders, right);\n }\n\n if (header.isVisible) {\n right += header.totalWidth;\n }\n }\n};\n\nconst useInstanceHook = (instance) => {\n calculateHeaderWidthsToTheRight(instance.headers);\n\n const getInstance = useGetLatest(instance);\n instance.getTableHeadProps = makePropGetter(\n instance.getHooks().getTableHeadProps,\n {\n instance: getInstance(),\n }\n );\n};\n\nconst getRowProps = () => ({\n style: {\n display: \"flex\",\n flex: \"1 0 auto\",\n },\n});\n\nconst getCellProps = (header, isHeaderCell) => {\n const props: UseHvTableStickyCellProps & { style: CSSProperties } = {\n style: {\n display: \"inline-flex\",\n flex: `${header.totalWidth} ${header.totalMinWidth} auto`,\n alignItems: isHeaderCell ? \"start\" : \"center\",\n justifyContent: header.align,\n\n width: `${header.totalWidth}px`,\n minWidth: `${header.totalMinWidth}px`,\n },\n };\n\n if (header.sticky != null) {\n props.stickyColumn = true;\n\n const margin =\n header.sticky === \"left\" ? header.totalLeft : header.totalRight;\n\n props.style[header.sticky] = `${margin}px`;\n\n if (header.isLastLeftSticky) {\n props.stickyColumnMostLeft = true;\n }\n\n if (header.isFirstRightSticky) {\n props.stickyColumnLeastRight = true;\n }\n } else {\n if (header.isFirstNotSticky) {\n props.style.borderLeft = 0;\n }\n\n if (header.isLastNotSticky) {\n props.style.borderRight = 0;\n }\n }\n\n return props;\n};\n\n/*\n * STICKY POSITION MANAGEMENT\n * <thead>: sticky if stickyHeader: true\n * <tr>: never sticky\n * <th>: sticky only if that particular column is sticky (left or right)\n */\n\n/*\n * We need to hide the last non sticky column right border, to avoid issues with double borders.\n *\n * This could be done with css, using the `:has()` selector:\n * - \".not-sticky:has(+ .first-right-sticky)\": { border-right: 0 }\n *\n * Until the `:has()` selector is supported by modern browsers,\n * that at the moment is just a proposal https://developer.mozilla.org/en-US/docs/Web/CSS/:has,\n * we need to override the last not sticky column \"borderRight\" here.\n */\n\n// props target: <table>\nconst getTablePropsHook = (props, { instance }) => {\n const nextProps: UseHvTableStickyTableProps = {\n stickyHeader: instance.stickyHeader,\n stickyColumns: instance.hasStickyColumns,\n };\n\n return [props, nextProps];\n};\n\n// props target: <table><thead>\nexport const getTableHeadPropsHook = (props, { instance }) => {\n const nextProps = {\n stickyHeader: instance.stickyHeader,\n };\n\n return [props, nextProps];\n};\n\n// props target: <table><thead><tr>\nexport const getHeaderGroupPropsHook = (props, { instance }) => {\n const nextProps = instance.hasStickyColumns ? getRowProps() : {};\n\n return [props, nextProps];\n};\n\n// props target: <table><thead><tr><th>\nconst getHeaderPropsHook = (props, { instance, column }) => {\n const nextProps = instance.hasStickyColumns ? getCellProps(column, true) : {};\n\n return [props, nextProps];\n};\n\n// props target: <table><tbody><tr>\nconst getRowPropsHook = (props, { instance }) => {\n const nextProps = instance.hasStickyColumns ? getRowProps() : {};\n\n return [props, nextProps];\n};\n\n// props target: <table><tbody><tr><td>\nconst getCellPropsHook = (props, { instance, cell }) => {\n const nextProps: UseHvTableStickyCellProps = instance.hasStickyColumns\n ? getCellProps(cell.column, false)\n : {};\n\n return [props, nextProps];\n};\n\nconst useSticky: UseHvTableSticky = (hooks) => {\n hooks.visibleColumns.push(visibleColumnsHook);\n hooks.useInstance.push(useInstanceHook);\n\n // props target: <table>\n hooks.getTableProps.push(getTablePropsHook);\n // props target: <table><thead>\n hooks.getTableHeadProps = [getTableHeadPropsHook];\n // props target: <table><thead><tr>\n hooks.getHeaderGroupProps.push(getHeaderGroupPropsHook);\n // props target: <table><thead><tr><th>\n hooks.getHeaderProps.push(getHeaderPropsHook);\n // props target: <table><tbody><tr>\n hooks.getRowProps.push(getRowPropsHook);\n // props target: <table><tbody><tr><td>\n hooks.getCellProps.push(getCellPropsHook);\n};\n\nuseSticky.pluginName = \"useHvTableSticky\";\n\nexport default useSticky;\n"],"names":["isSticky","value","test","getStickyValue","sticky","parent","columns","length","find","col","undefined","updateColumnAndParent","column","props","assign","visibleColumnsHook","instance","toTheLeft","toTheRight","others","forEach","toLowerCase","push","firstNotSticky","isFirstNotSticky","lastNotSticky","isLastNotSticky","hasLeftSticky","lastLeftSticky","isLastLeftSticky","hasRightSticky","firstRightSticky","isFirstRightSticky","hasStickyColumns","calculateHeaderWidthsToTheRight","headers","right","i","header","totalRight","subHeaders","isVisible","totalWidth","useInstanceHook","getInstance","useGetLatest","getTableHeadProps","makePropGetter","getHooks","getRowProps","style","display","flex","getCellProps","isHeaderCell","totalMinWidth","alignItems","justifyContent","align","width","minWidth","stickyColumn","margin","totalLeft","stickyColumnMostLeft","stickyColumnLeastRight","borderLeft","borderRight","getTablePropsHook","nextProps","stickyHeader","stickyColumns","getTableHeadPropsHook","getHeaderGroupPropsHook","getHeaderPropsHook","getRowPropsHook","getCellPropsHook","cell","useSticky","hooks","visibleColumns","useInstance","getTableProps","getHeaderGroupProps","getHeaderProps","pluginName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useSticky.cjs","sources":["../../../../../src/components/Table/hooks/useSticky.ts"],"sourcesContent":["import {\n makePropGetter,\n useGetLatest,\n Hooks,\n PropGetter,\n TableCommonProps,\n} from \"react-table\";\nimport { CSSProperties } from \"react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\n// #region ##### TYPES #####\n\nexport interface UseHvTableStickyTableHeadProps extends TableCommonProps {\n stickyHeader?: boolean;\n}\n\nexport type HvTableHeadPropGetter<D extends object> = PropGetter<\n D,\n UseHvTableStickyTableHeadProps\n>;\n\nexport type UseHvTableStickyTableOptions = {\n stickyHeader?: boolean;\n stickyColumns?: boolean;\n};\n\nexport interface UseHvTableStickyHooks<D extends object> {\n getTableHeadProps: Array<HvTableHeadPropGetter<D>>;\n}\n\nexport interface UseHvTableStickyTableInstance<D extends object> {\n getTableHeadProps: (\n propGetter?: HvTableHeadPropGetter<D>\n ) => UseHvTableStickyTableHeadProps;\n\n totalRight?: number;\n hasStickyColumns?: boolean;\n}\n\n// props target: <table>\nexport interface UseHvTableStickyTableProps {\n stickyHeader?: boolean;\n stickyColumns?: boolean;\n}\n\n// props target: <table><thead><tr><th>\nexport interface UseHvTableStickyColumnProps {\n stickyColumn?: boolean;\n stickyColumnMostLeft?: boolean;\n stickyColumnLeastRight?: boolean;\n}\n\n// props target: <table><tbody><tr><td>\nexport interface UseHvTableStickyCellProps {\n stickyColumn?: boolean;\n stickyColumnMostLeft?: boolean;\n stickyColumnLeastRight?: boolean;\n}\n\nexport type UseHvTableSticky = (<D extends object = Record<string, unknown>>(\n hooks: Hooks<D>\n) => void) & { pluginName: string };\n\n// #endregion ##### TYPES #####\n\nconst isSticky = (value) => /left|right/i.test(value);\n\nconst getStickyValue = ({ sticky, parent }) => {\n if (isSticky(sticky)) {\n return sticky;\n }\n\n if (parent != null) {\n // check if parent is sticky\n sticky = getStickyValue(parent);\n if (isSticky(sticky)) {\n return sticky;\n }\n\n const { columns } = parent;\n // check if any column in the same group is sticky\n if (columns?.length > 0) {\n sticky = columns?.find((col) => col.sticky != null)?.sticky;\n if (isSticky(sticky)) {\n return sticky;\n }\n }\n }\n\n return undefined;\n};\n\nconst updateColumnAndParent = (column, props) => {\n Object.assign(column, props);\n\n if (column.parent != null) {\n updateColumnAndParent(column.parent, props);\n }\n};\n\nconst visibleColumnsHook = (columns, { instance }) => {\n const toTheLeft: any[] = [];\n const toTheRight: any[] = [];\n const others: any[] = [];\n\n columns.forEach((column) => {\n const sticky = getStickyValue(column)?.toLowerCase();\n\n updateColumnAndParent(column, { sticky });\n\n if (sticky === \"left\") {\n toTheLeft.push(column);\n } else if (sticky === \"right\") {\n toTheRight.push(column);\n } else {\n others.push(column);\n }\n });\n\n if (others.length > 0) {\n const [firstNotSticky] = others;\n updateColumnAndParent(firstNotSticky, { isFirstNotSticky: true });\n\n const lastNotSticky = others[others.length - 1];\n updateColumnAndParent(lastNotSticky, { isLastNotSticky: true });\n }\n\n const hasLeftSticky = toTheLeft.length > 0;\n if (hasLeftSticky) {\n const lastLeftSticky = toTheLeft[toTheLeft.length - 1];\n\n updateColumnAndParent(lastLeftSticky, { isLastLeftSticky: true });\n }\n\n const hasRightSticky = toTheRight.length > 0;\n if (hasRightSticky) {\n const [firstRightSticky] = toTheRight;\n\n updateColumnAndParent(firstRightSticky, { isFirstRightSticky: true });\n }\n\n instance.hasStickyColumns = hasLeftSticky || hasRightSticky;\n\n return [...toTheLeft, ...others, ...toTheRight];\n};\n\nconst calculateHeaderWidthsToTheRight = (headers, right = 0) => {\n if (!headers?.length) {\n return;\n }\n\n for (let i = headers.length - 1; i !== -1; i -= 1) {\n const header = headers[i];\n\n header.totalRight = right;\n\n const { headers: subHeaders } = header;\n if (subHeaders?.length > 0) {\n calculateHeaderWidthsToTheRight(subHeaders, right);\n }\n\n if (header.isVisible) {\n right += header.totalWidth;\n }\n }\n};\n\nconst useInstanceHook = (instance) => {\n calculateHeaderWidthsToTheRight(instance.headers);\n\n const getInstance = useGetLatest(instance);\n instance.getTableHeadProps = makePropGetter(\n instance.getHooks().getTableHeadProps,\n {\n instance: getInstance(),\n }\n );\n};\n\nconst getRowProps = () => ({\n style: {\n display: \"flex\",\n flex: \"1 0 auto\",\n },\n});\n\nconst getCellProps = (header, isHeaderCell: boolean) => {\n const props: UseHvTableStickyCellProps & { style: CSSProperties } = {\n style: {\n display: \"inline-flex\",\n flex: `${header.totalWidth} ${header.totalMinWidth} auto`,\n alignItems: isHeaderCell ? \"start\" : \"center\",\n justifyContent: header.align,\n\n width: `${header.totalWidth}px`,\n minWidth: `${header.totalMinWidth}px`,\n ...(isHeaderCell && { backgroundColor: theme.colors.atmo2 }),\n },\n };\n\n if (header.sticky != null) {\n props.stickyColumn = true;\n\n const margin =\n header.sticky === \"left\" ? header.totalLeft : header.totalRight;\n\n props.style[header.sticky] = `${margin}px`;\n\n if (header.isLastLeftSticky) {\n props.stickyColumnMostLeft = true;\n }\n\n if (header.isFirstRightSticky) {\n props.stickyColumnLeastRight = true;\n }\n } else {\n if (header.isFirstNotSticky) {\n props.style.borderLeft = 0;\n }\n\n if (header.isLastNotSticky) {\n props.style.borderRight = 0;\n }\n }\n\n return props;\n};\n\n/*\n * STICKY POSITION MANAGEMENT\n * <thead>: sticky if stickyHeader: true\n * <tr>: never sticky\n * <th>: sticky only if that particular column is sticky (left or right)\n */\n\n/*\n * We need to hide the last non sticky column right border, to avoid issues with double borders.\n *\n * This could be done with css, using the `:has()` selector:\n * - \".not-sticky:has(+ .first-right-sticky)\": { border-right: 0 }\n *\n * Until the `:has()` selector is supported by modern browsers,\n * that at the moment is just a proposal https://developer.mozilla.org/en-US/docs/Web/CSS/:has,\n * we need to override the last not sticky column \"borderRight\" here.\n */\n\n// props target: <table>\nconst getTablePropsHook = (props, { instance }) => {\n const nextProps: UseHvTableStickyTableProps = {\n stickyHeader: instance.stickyHeader,\n stickyColumns: instance.hasStickyColumns,\n };\n\n return [props, nextProps];\n};\n\n// props target: <table><thead>\nexport const getTableHeadPropsHook = (props, { instance }) => {\n const nextProps = {\n stickyHeader: instance.stickyHeader,\n };\n\n return [props, nextProps];\n};\n\n// props target: <table><thead><tr>\nexport const getHeaderGroupPropsHook = (props, { instance }) => {\n const nextProps = instance.hasStickyColumns ? getRowProps() : {};\n\n return [props, nextProps];\n};\n\n// props target: <table><thead><tr><th>\nconst getHeaderPropsHook = (props, { instance, column }) => {\n const nextProps = instance.hasStickyColumns ? getCellProps(column, true) : {};\n\n return [props, nextProps];\n};\n\n// props target: <table><tbody><tr>\nconst getRowPropsHook = (props, { instance }) => {\n const nextProps = instance.hasStickyColumns ? getRowProps() : {};\n\n return [props, nextProps];\n};\n\n// props target: <table><tbody><tr><td>\nconst getCellPropsHook = (props, { instance, cell }) => {\n const nextProps: UseHvTableStickyCellProps = instance.hasStickyColumns\n ? getCellProps(cell.column, false)\n : {};\n\n return [props, nextProps];\n};\n\nconst useSticky: UseHvTableSticky = (hooks) => {\n hooks.visibleColumns.push(visibleColumnsHook);\n hooks.useInstance.push(useInstanceHook);\n\n // props target: <table>\n hooks.getTableProps.push(getTablePropsHook);\n // props target: <table><thead>\n hooks.getTableHeadProps = [getTableHeadPropsHook];\n // props target: <table><thead><tr>\n hooks.getHeaderGroupProps.push(getHeaderGroupPropsHook);\n // props target: <table><thead><tr><th>\n hooks.getHeaderProps.push(getHeaderPropsHook);\n // props target: <table><tbody><tr>\n hooks.getRowProps.push(getRowPropsHook);\n // props target: <table><tbody><tr><td>\n hooks.getCellProps.push(getCellPropsHook);\n};\n\nuseSticky.pluginName = \"useHvTableSticky\";\n\nexport default useSticky;\n"],"names":["isSticky","value","test","getStickyValue","sticky","parent","columns","length","find","col","undefined","updateColumnAndParent","column","props","assign","visibleColumnsHook","instance","toTheLeft","toTheRight","others","forEach","toLowerCase","push","firstNotSticky","isFirstNotSticky","lastNotSticky","isLastNotSticky","hasLeftSticky","lastLeftSticky","isLastLeftSticky","hasRightSticky","firstRightSticky","isFirstRightSticky","hasStickyColumns","calculateHeaderWidthsToTheRight","headers","right","i","header","totalRight","subHeaders","isVisible","totalWidth","useInstanceHook","getInstance","useGetLatest","getTableHeadProps","makePropGetter","getHooks","getRowProps","style","display","flex","getCellProps","isHeaderCell","totalMinWidth","alignItems","justifyContent","align","width","minWidth","backgroundColor","theme","colors","atmo2","stickyColumn","margin","totalLeft","stickyColumnMostLeft","stickyColumnLeastRight","borderLeft","borderRight","getTablePropsHook","nextProps","stickyHeader","stickyColumns","getTableHeadPropsHook","getHeaderGroupPropsHook","getHeaderPropsHook","getRowPropsHook","getCellPropsHook","cell","useSticky","hooks","visibleColumns","useInstance","getTableProps","getHeaderGroupProps","getHeaderProps","pluginName"],"mappings":"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"}
|
|
@@ -1,48 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
4
|
-
const getBorderStyles = (type, color,
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
},
|
|
20
|
-
"& td:not(:first-of-type):not(:last-child)": {
|
|
21
|
-
borderTop: `1px solid ${color}`,
|
|
22
|
-
borderBottom: `1px solid ${color}`
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
}
|
|
26
|
-
if (type === "cell") {
|
|
27
|
-
return {
|
|
28
|
-
":first-of-type&": {
|
|
29
|
-
borderLeft: `1px solid ${uikitStyles.theme.table.rowBorderColor}`,
|
|
30
|
-
borderTop: `1px solid ${uikitStyles.theme.table.rowBorderColor}`,
|
|
31
|
-
borderBottom: `1px solid ${uikitStyles.theme.table.rowBorderColor}`,
|
|
32
|
-
borderRadius: `${rowBorderRadius} 0 0 ${rowBorderRadius}`
|
|
33
|
-
},
|
|
34
|
-
":last-child&": {
|
|
35
|
-
borderRight: `1px solid ${uikitStyles.theme.table.rowBorderColor}`,
|
|
36
|
-
borderTop: `1px solid ${uikitStyles.theme.table.rowBorderColor}`,
|
|
37
|
-
borderBottom: `1px solid ${uikitStyles.theme.table.rowBorderColor}`,
|
|
38
|
-
borderRadius: `0 ${rowBorderRadius} ${rowBorderRadius} 0`
|
|
39
|
-
},
|
|
40
|
-
":not(:first-of-type):not(:last-child)&": {
|
|
41
|
-
borderTop: `1px solid ${uikitStyles.theme.table.rowBorderColor}`,
|
|
42
|
-
borderBottom: `1px solid ${uikitStyles.theme.table.rowBorderColor}`
|
|
43
|
-
}
|
|
44
|
-
};
|
|
45
|
-
}
|
|
4
|
+
const getBorderStyles = (type, color = uikitStyles.theme.table.rowBorderColor, rowBorderRadius = uikitStyles.theme.table.rowBorderRadius) => {
|
|
5
|
+
return {
|
|
6
|
+
"& td": {
|
|
7
|
+
borderTop: `1px solid ${color}`,
|
|
8
|
+
borderBottom: `1px solid ${color}`
|
|
9
|
+
},
|
|
10
|
+
"& td:first-of-type": {
|
|
11
|
+
borderLeft: `1px solid ${color}`,
|
|
12
|
+
borderRadius: `${rowBorderRadius} 0 0 ${rowBorderRadius}`
|
|
13
|
+
},
|
|
14
|
+
"& td:last-of-type": {
|
|
15
|
+
borderRight: `1px solid ${color}`,
|
|
16
|
+
borderRadius: `0 ${rowBorderRadius} ${rowBorderRadius} 0`
|
|
17
|
+
}
|
|
18
|
+
};
|
|
46
19
|
};
|
|
47
20
|
exports.getBorderStyles = getBorderStyles;
|
|
48
21
|
//# sourceMappingURL=utils.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.cjs","sources":["../../../../../src/components/Table/utils/utils.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const getBorderStyles = (\n type:
|
|
1
|
+
{"version":3,"file":"utils.cjs","sources":["../../../../../src/components/Table/utils/utils.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const getBorderStyles = (\n type: \"row\",\n color = theme.table.rowBorderColor,\n rowBorderRadius = theme.table.rowBorderRadius\n) => {\n return {\n \"& td\": {\n borderTop: `1px solid ${color}`,\n borderBottom: `1px solid ${color}`,\n },\n \"& td:first-of-type\": {\n borderLeft: `1px solid ${color}`,\n borderRadius: `${rowBorderRadius} 0 0 ${rowBorderRadius}`,\n },\n \"& td:last-of-type\": {\n borderRight: `1px solid ${color}`,\n borderRadius: `0 ${rowBorderRadius} ${rowBorderRadius} 0`,\n },\n };\n};\n"],"names":["getBorderStyles","type","color","theme","table","rowBorderColor","rowBorderRadius","borderTop","borderBottom","borderLeft","borderRadius","borderRight"],"mappings":";;;AAEaA,MAAAA,kBAAkBA,CAC7BC,MACAC,QAAQC,kBAAMC,MAAMC,gBACpBC,kBAAkBH,YAAAA,MAAMC,MAAME,oBAC3B;AACI,SAAA;AAAA,IACL,QAAQ;AAAA,MACNC,WAAY,aAAYL;AAAAA,MACxBM,cAAe,aAAYN;AAAAA,IAC7B;AAAA,IACA,sBAAsB;AAAA,MACpBO,YAAa,aAAYP;AAAAA,MACzBQ,cAAe,GAAEJ,uBAAuBA;AAAAA,IAC1C;AAAA,IACA,qBAAqB;AAAA,MACnBK,aAAc,aAAYT;AAAAA,MAC1BQ,cAAe,KAAIJ,mBAAmBA;AAAAA,IACxC;AAAA,EAAA;AAEJ;;"}
|
|
@@ -1,21 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const material = require("@mui/material");
|
|
3
4
|
const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
|
|
4
|
-
const clsx = require("clsx");
|
|
5
5
|
const Tabs_styles = require("./Tabs.styles.cjs");
|
|
6
|
-
const tabsClasses = require("./tabsClasses.cjs");
|
|
7
6
|
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
8
7
|
const HvTabs = (props) => {
|
|
9
8
|
const {
|
|
10
|
-
classes,
|
|
9
|
+
classes: classesProp,
|
|
11
10
|
...others
|
|
12
11
|
} = useDefaultProps.useDefaultProps("HvTabs", props);
|
|
13
|
-
|
|
12
|
+
const {
|
|
13
|
+
classes
|
|
14
|
+
} = Tabs_styles.useClasses(classesProp);
|
|
15
|
+
return /* @__PURE__ */ jsxRuntime.jsx(material.Tabs, {
|
|
14
16
|
classes: {
|
|
15
|
-
root:
|
|
16
|
-
flexContainer:
|
|
17
|
-
indicator:
|
|
18
|
-
scroller:
|
|
17
|
+
root: classes.root,
|
|
18
|
+
flexContainer: classes.flexContainer,
|
|
19
|
+
indicator: classes.indicator,
|
|
20
|
+
scroller: classes.scroller
|
|
19
21
|
},
|
|
20
22
|
TabIndicatorProps: {
|
|
21
23
|
children: /* @__PURE__ */ jsxRuntime.jsx("div", {})
|
|
@@ -23,5 +25,6 @@ const HvTabs = (props) => {
|
|
|
23
25
|
...others
|
|
24
26
|
});
|
|
25
27
|
};
|
|
28
|
+
exports.tabsClasses = Tabs_styles.staticClasses;
|
|
26
29
|
exports.HvTabs = HvTabs;
|
|
27
30
|
//# sourceMappingURL=Tabs.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.cjs","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { TabsProps as MuiTabsProps } from \"@mui/material\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\
|
|
1
|
+
{"version":3,"file":"Tabs.cjs","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { Tabs, TabsProps as MuiTabsProps } from \"@mui/material\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { staticClasses, useClasses } from \"./Tabs.styles\";\n\nexport { staticClasses as tabsClasses };\n\nexport type HvTabsClasses = ExtractNames<typeof useClasses>;\n\n// Mui Tabs props: https://mui.com/material-ui/api/tabs/#props\nexport interface HvTabsProps\n extends MuiTabsProps,\n HvBaseProps<HTMLButtonElement, \"onChange\"> {\n /**\n * The value of the currently selected Tab. If you don't want any selected Tab, you can set this property to `false`.\n */\n value?: any;\n /**\n * Callback fired when the value changes.\n */\n onChange?: (event: React.SyntheticEvent, value: any) => void;\n /**\n * A Jss Object used to override or extend the component styles.\n */\n classes?: HvTabsClasses;\n}\n\n/**\n * A Tab is a graphical control element that allows multiple documents or panels to be contained within a single window.\n * Tabs can be used as a navigational widget for switching between sets of documents.\n */\nexport const HvTabs = (props: HvTabsProps) => {\n const { classes: classesProp, ...others } = useDefaultProps(\"HvTabs\", props);\n\n const { classes } = useClasses(classesProp);\n\n return (\n <Tabs\n classes={{\n root: classes.root,\n flexContainer: classes.flexContainer,\n indicator: classes.indicator,\n scroller: classes.scroller,\n }}\n TabIndicatorProps={{ children: <div /> }}\n {...others}\n />\n );\n};\n"],"names":["HvTabs","props","classes","classesProp","others","useDefaultProps","useClasses","Tabs","root","flexContainer","indicator","scroller","TabIndicatorProps","children","_jsx"],"mappings":";;;;;;AAgCaA,MAAAA,SAASA,CAACC,UAAuB;AACtC,QAAA;AAAA,IAAEC,SAASC;AAAAA,IAAa,GAAGC;AAAAA,EAAAA,IAAWC,gBAAgB,gBAAA,UAAUJ,KAAK;AAErE,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAYI,YAAAA,WAAWH,WAAW;AAE1C,wCACGI,SAAAA,MAAI;AAAA,IACHL,SAAS;AAAA,MACPM,MAAMN,QAAQM;AAAAA,MACdC,eAAeP,QAAQO;AAAAA,MACvBC,WAAWR,QAAQQ;AAAAA,MACnBC,UAAUT,QAAQS;AAAAA,IACpB;AAAA,IACAC,mBAAmB;AAAA,MAAEC,UAAUC,2BAAAA,IAAM,OAAA,EAAA;AAAA,IAAE;AAAA,IAAE,GACrCV;AAAAA,EAAAA,CACL;AAEL;;;"}
|
|
@@ -1,38 +1,34 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const _styled = require("@emotion/styled/base");
|
|
4
3
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
5
|
-
const
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
minHeight: 0,
|
|
16
|
-
overflow: "visible",
|
|
17
|
-
// Override Mui styling: https://mui.com/material-ui/api/tabs/#css
|
|
18
|
-
"& .MuiTabs-indicator": {
|
|
4
|
+
const classes = require("../../utils/classes.cjs");
|
|
5
|
+
const {
|
|
6
|
+
staticClasses,
|
|
7
|
+
useClasses
|
|
8
|
+
} = classes.createClasses("HvTabs", {
|
|
9
|
+
root: {
|
|
10
|
+
minHeight: 0,
|
|
11
|
+
overflow: "visible"
|
|
12
|
+
},
|
|
13
|
+
indicator: {
|
|
19
14
|
display: "flex",
|
|
20
15
|
justifyContent: "center",
|
|
21
16
|
backgroundColor: "transparent",
|
|
22
17
|
"& > div": {
|
|
23
18
|
width: "100%",
|
|
24
|
-
backgroundColor: uikitStyles.theme.colors.secondary
|
|
19
|
+
backgroundColor: `${uikitStyles.theme.colors.secondary}`
|
|
25
20
|
},
|
|
26
21
|
height: 2
|
|
27
22
|
},
|
|
28
|
-
|
|
23
|
+
scroller: {
|
|
29
24
|
overflow: "visible !important"
|
|
30
25
|
},
|
|
31
|
-
|
|
26
|
+
flexContainer: {
|
|
32
27
|
"& button:first-of-type": {
|
|
33
28
|
marginLeft: "3px"
|
|
34
29
|
}
|
|
35
30
|
}
|
|
36
|
-
}
|
|
37
|
-
exports.
|
|
31
|
+
});
|
|
32
|
+
exports.staticClasses = staticClasses;
|
|
33
|
+
exports.useClasses = useClasses;
|
|
38
34
|
//# sourceMappingURL=Tabs.styles.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.styles.cjs","sources":["../../../../src/components/Tabs/Tabs.styles.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"Tabs.styles.cjs","sources":["../../../../src/components/Tabs/Tabs.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTabs\", {\n root: {\n minHeight: 0,\n overflow: \"visible\",\n },\n indicator: {\n display: \"flex\",\n justifyContent: \"center\",\n backgroundColor: \"transparent\",\n \"& > div\": {\n width: \"100%\",\n backgroundColor: `${theme.colors.secondary}`,\n },\n height: 2,\n },\n scroller: {\n overflow: \"visible !important\",\n },\n flexContainer: {\n \"& button:first-of-type\": {\n marginLeft: \"3px\",\n },\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","minHeight","overflow","indicator","display","justifyContent","backgroundColor","width","theme","colors","secondary","height","scroller","flexContainer","marginLeft"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,UAAU;AAAA,EACnEC,MAAM;AAAA,IACJC,WAAW;AAAA,IACXC,UAAU;AAAA,EACZ;AAAA,EACAC,WAAW;AAAA,IACTC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,iBAAiB;AAAA,IACjB,WAAW;AAAA,MACTC,OAAO;AAAA,MACPD,iBAAkB,GAAEE,YAAAA,MAAMC,OAAOC;AAAAA,IACnC;AAAA,IACAC,QAAQ;AAAA,EACV;AAAA,EACAC,UAAU;AAAA,IACRV,UAAU;AAAA,EACZ;AAAA,EACAW,eAAe;AAAA,IACb,0BAA0B;AAAA,MACxBC,YAAY;AAAA,IACd;AAAA,EACF;AACF,CAAC;;;"}
|