@hitachivantara/uikit-react-core 5.73.2 → 5.75.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/cjs/Accordion/Accordion.cjs +23 -55
- package/dist/cjs/Accordion/Accordion.styles.cjs +2 -27
- package/dist/cjs/ActionsGeneric/ActionsGeneric.styles.cjs +4 -8
- package/dist/cjs/Badge/Badge.cjs +18 -13
- package/dist/cjs/Badge/Badge.styles.cjs +25 -14
- package/dist/cjs/Banner/BannerContent/ActionContainer/ActionContainer.cjs +0 -1
- package/dist/cjs/BaseDropdown/BaseDropdown.cjs +4 -0
- package/dist/cjs/BaseDropdown/BaseDropdownContext/BaseDropdownContext.cjs +1 -2
- package/dist/cjs/BreadCrumb/BreadCrumb.cjs +6 -10
- package/dist/cjs/ButtonBase/ButtonBase.cjs +53 -0
- package/dist/cjs/ButtonBase/ButtonBase.styles.cjs +34 -0
- package/dist/cjs/Calendar/CalendarNavigation/MonthSelector/MonthSelector.cjs +6 -22
- package/dist/cjs/Calendar/CalendarNavigation/MonthSelector/MonthSelector.styles.cjs +6 -38
- package/dist/cjs/Calendar/SingleCalendar/CalendarCell.cjs +4 -10
- package/dist/cjs/Calendar/SingleCalendar/CalendarCell.styles.cjs +1 -20
- package/dist/cjs/ColorPicker/SavedColors/SavedColors.cjs +0 -1
- package/dist/cjs/DatePicker/DatePicker.cjs +2 -1
- package/dist/cjs/DatePicker/DatePicker.styles.cjs +2 -1
- package/dist/cjs/InlineEditor/InlineEditor.cjs +2 -1
- package/dist/cjs/Loading/Loading.cjs +12 -7
- package/dist/cjs/Loading/Loading.styles.cjs +33 -82
- package/dist/cjs/LoadingContainer/LoadingContainer.cjs +4 -2
- package/dist/cjs/LoadingContainer/LoadingContainer.styles.cjs +1 -1
- package/dist/cjs/Section/Section.cjs +10 -14
- package/dist/cjs/Table/hooks/useBulkActions.cjs +1 -2
- package/dist/cjs/Table/hooks/useFilters.cjs +1 -2
- package/dist/cjs/Table/hooks/useGlobalFilter.cjs +1 -2
- package/dist/cjs/Table/hooks/useHeaderGroups.cjs +1 -2
- package/dist/cjs/Table/hooks/usePagination.cjs +1 -2
- package/dist/cjs/Table/hooks/useResizeColumns.cjs +1 -2
- package/dist/cjs/Table/hooks/useRowExpand.cjs +1 -2
- package/dist/cjs/Table/hooks/useRowSelection.cjs +1 -2
- package/dist/cjs/Table/hooks/useRowState.cjs +1 -2
- package/dist/cjs/Table/hooks/useSortBy.cjs +1 -2
- package/dist/cjs/Table/hooks/useSticky.cjs +1 -2
- package/dist/cjs/Table/hooks/useTableStyles.cjs +1 -2
- package/dist/cjs/TextArea/TextArea.styles.cjs +1 -1
- package/dist/cjs/hooks/useExpandable.cjs +32 -0
- package/dist/cjs/hooks/useUniqueId.cjs +2 -1
- package/dist/cjs/index.cjs +41 -37
- package/dist/esm/Accordion/Accordion.js +24 -56
- package/dist/esm/Accordion/Accordion.js.map +1 -1
- package/dist/esm/Accordion/Accordion.styles.js +2 -27
- package/dist/esm/Accordion/Accordion.styles.js.map +1 -1
- package/dist/esm/ActionsGeneric/ActionsGeneric.styles.js +4 -8
- package/dist/esm/ActionsGeneric/ActionsGeneric.styles.js.map +1 -1
- package/dist/esm/Badge/Badge.js +18 -13
- package/dist/esm/Badge/Badge.js.map +1 -1
- package/dist/esm/Badge/Badge.styles.js +25 -14
- package/dist/esm/Badge/Badge.styles.js.map +1 -1
- package/dist/esm/Banner/BannerContent/ActionContainer/ActionContainer.js +0 -1
- package/dist/esm/Banner/BannerContent/ActionContainer/ActionContainer.js.map +1 -1
- package/dist/esm/BaseDropdown/BaseDropdown.js +4 -0
- package/dist/esm/BaseDropdown/BaseDropdown.js.map +1 -1
- package/dist/esm/BaseDropdown/BaseDropdownContext/BaseDropdownContext.js +1 -2
- package/dist/esm/BaseDropdown/BaseDropdownContext/BaseDropdownContext.js.map +1 -1
- package/dist/esm/BreadCrumb/BreadCrumb.js +6 -10
- package/dist/esm/BreadCrumb/BreadCrumb.js.map +1 -1
- package/dist/esm/ButtonBase/ButtonBase.js +54 -0
- package/dist/esm/ButtonBase/ButtonBase.js.map +1 -0
- package/dist/esm/ButtonBase/ButtonBase.styles.js +34 -0
- package/dist/esm/ButtonBase/ButtonBase.styles.js.map +1 -0
- package/dist/esm/Calendar/CalendarNavigation/MonthSelector/MonthSelector.js +6 -22
- package/dist/esm/Calendar/CalendarNavigation/MonthSelector/MonthSelector.js.map +1 -1
- package/dist/esm/Calendar/CalendarNavigation/MonthSelector/MonthSelector.styles.js +6 -38
- package/dist/esm/Calendar/CalendarNavigation/MonthSelector/MonthSelector.styles.js.map +1 -1
- package/dist/esm/Calendar/SingleCalendar/CalendarCell.js +4 -10
- package/dist/esm/Calendar/SingleCalendar/CalendarCell.js.map +1 -1
- package/dist/esm/Calendar/SingleCalendar/CalendarCell.styles.js +1 -20
- package/dist/esm/Calendar/SingleCalendar/CalendarCell.styles.js.map +1 -1
- package/dist/esm/ColorPicker/SavedColors/SavedColors.js +0 -1
- package/dist/esm/ColorPicker/SavedColors/SavedColors.js.map +1 -1
- package/dist/esm/DatePicker/DatePicker.js +2 -1
- package/dist/esm/DatePicker/DatePicker.js.map +1 -1
- package/dist/esm/DatePicker/DatePicker.styles.js +2 -1
- package/dist/esm/DatePicker/DatePicker.styles.js.map +1 -1
- package/dist/esm/InlineEditor/InlineEditor.js +3 -2
- package/dist/esm/InlineEditor/InlineEditor.js.map +1 -1
- package/dist/esm/Loading/Loading.js +13 -8
- package/dist/esm/Loading/Loading.js.map +1 -1
- package/dist/esm/Loading/Loading.styles.js +33 -82
- package/dist/esm/Loading/Loading.styles.js.map +1 -1
- package/dist/esm/LoadingContainer/LoadingContainer.js +4 -2
- package/dist/esm/LoadingContainer/LoadingContainer.js.map +1 -1
- package/dist/esm/LoadingContainer/LoadingContainer.styles.js +1 -1
- package/dist/esm/LoadingContainer/LoadingContainer.styles.js.map +1 -1
- package/dist/esm/Section/Section.js +11 -15
- package/dist/esm/Section/Section.js.map +1 -1
- package/dist/esm/Table/hooks/useBulkActions.js +1 -2
- package/dist/esm/Table/hooks/useBulkActions.js.map +1 -1
- package/dist/esm/Table/hooks/useFilters.js +1 -2
- package/dist/esm/Table/hooks/useFilters.js.map +1 -1
- package/dist/esm/Table/hooks/useGlobalFilter.js +1 -2
- package/dist/esm/Table/hooks/useGlobalFilter.js.map +1 -1
- package/dist/esm/Table/hooks/useHeaderGroups.js +1 -2
- package/dist/esm/Table/hooks/useHeaderGroups.js.map +1 -1
- package/dist/esm/Table/hooks/usePagination.js +1 -2
- package/dist/esm/Table/hooks/usePagination.js.map +1 -1
- package/dist/esm/Table/hooks/useResizeColumns.js +1 -2
- package/dist/esm/Table/hooks/useResizeColumns.js.map +1 -1
- package/dist/esm/Table/hooks/useRowExpand.js +1 -2
- package/dist/esm/Table/hooks/useRowExpand.js.map +1 -1
- package/dist/esm/Table/hooks/useRowSelection.js +1 -2
- package/dist/esm/Table/hooks/useRowSelection.js.map +1 -1
- package/dist/esm/Table/hooks/useRowState.js +1 -2
- package/dist/esm/Table/hooks/useRowState.js.map +1 -1
- package/dist/esm/Table/hooks/useSortBy.js +1 -2
- package/dist/esm/Table/hooks/useSortBy.js.map +1 -1
- package/dist/esm/Table/hooks/useSticky.js +1 -2
- package/dist/esm/Table/hooks/useSticky.js.map +1 -1
- package/dist/esm/Table/hooks/useTable.js +2 -2
- package/dist/esm/Table/hooks/useTable.js.map +1 -1
- package/dist/esm/Table/hooks/useTableStyles.js +1 -2
- package/dist/esm/Table/hooks/useTableStyles.js.map +1 -1
- package/dist/esm/TextArea/TextArea.styles.js +1 -1
- package/dist/esm/TextArea/TextArea.styles.js.map +1 -1
- package/dist/esm/hooks/useExpandable.js +32 -0
- package/dist/esm/hooks/useExpandable.js.map +1 -0
- package/dist/esm/hooks/useUniqueId.js +2 -1
- package/dist/esm/hooks/useUniqueId.js.map +1 -1
- package/dist/esm/index.js +254 -250
- package/dist/esm/index.js.map +1 -1
- package/dist/types/index.d.ts +2175 -2112
- package/package.json +7 -7
|
@@ -42,7 +42,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDatePicke
|
|
|
42
42
|
dateText: {
|
|
43
43
|
color: "inherit",
|
|
44
44
|
fontWeight: uikitStyles.theme.typography.label.fontWeight
|
|
45
|
-
}
|
|
45
|
+
},
|
|
46
|
+
container: {}
|
|
46
47
|
});
|
|
47
48
|
exports.staticClasses = staticClasses;
|
|
48
49
|
exports.useClasses = useClasses;
|
|
@@ -5,6 +5,7 @@ const React = require("react");
|
|
|
5
5
|
const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
|
|
6
6
|
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
7
7
|
const useControlled = require("../hooks/useControlled.cjs");
|
|
8
|
+
const useEnhancedEffect = require("../hooks/useEnhancedEffect.cjs");
|
|
8
9
|
const generic = require("../types/generic.cjs");
|
|
9
10
|
const keyboardUtils = require("../utils/keyboardUtils.cjs");
|
|
10
11
|
const InlineEditor_styles = require("./InlineEditor.styles.cjs");
|
|
@@ -37,7 +38,7 @@ const HvInlineEditor = generic.fixedForwardRef(function HvInlineEditor2(props, r
|
|
|
37
38
|
const { activeTheme } = uikitReactUtils.useTheme();
|
|
38
39
|
const typographyStyles = activeTheme?.typography[variant] || {};
|
|
39
40
|
const { lineHeight } = typographyStyles;
|
|
40
|
-
|
|
41
|
+
useEnhancedEffect.useEnhancedEffect(() => {
|
|
41
42
|
const input = inputRef.current;
|
|
42
43
|
if (editMode && input) {
|
|
43
44
|
input.focus();
|
|
@@ -13,20 +13,21 @@ const HvLoading = (props) => {
|
|
|
13
13
|
small,
|
|
14
14
|
label,
|
|
15
15
|
classes: classesProp,
|
|
16
|
+
style,
|
|
16
17
|
className,
|
|
17
18
|
...others
|
|
18
19
|
} = uikitReactUtils.useDefaultProps("HvLoading", props);
|
|
19
20
|
const { classes, cx } = Loading_styles.useClasses(classesProp);
|
|
20
21
|
const size = small ? "small" : "regular";
|
|
21
|
-
const colorVariant = color
|
|
22
|
-
const variant = `${size}${colorVariant}`;
|
|
23
|
-
const inline = {
|
|
24
|
-
backgroundColor: uikitStyles.getColor(color, small ? "secondary" : "brand")
|
|
25
|
-
};
|
|
22
|
+
const colorVariant = color && `${size}Color`;
|
|
26
23
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
27
24
|
"div",
|
|
28
25
|
{
|
|
29
26
|
hidden: !!hidden,
|
|
27
|
+
style: uikitReactUtils.mergeStyles(style, {
|
|
28
|
+
color: uikitStyles.getColor(color, small ? "secondary" : "brand"),
|
|
29
|
+
"--customColor": uikitStyles.getColor(color)
|
|
30
|
+
}),
|
|
30
31
|
className: cx(
|
|
31
32
|
classes.root,
|
|
32
33
|
{
|
|
@@ -39,8 +40,12 @@ const HvLoading = (props) => {
|
|
|
39
40
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.barContainer, children: helpers.range(3).map((e) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
40
41
|
"div",
|
|
41
42
|
{
|
|
42
|
-
|
|
43
|
-
|
|
43
|
+
className: cx(
|
|
44
|
+
classes.loadingBar,
|
|
45
|
+
// TODO: hoist to parent & remove unused `colorVariant` in v6
|
|
46
|
+
classes[size],
|
|
47
|
+
classes[colorVariant]
|
|
48
|
+
)
|
|
44
49
|
},
|
|
45
50
|
e
|
|
46
51
|
)) }),
|
|
@@ -1,104 +1,55 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const react = require("@emotion/react");
|
|
4
3
|
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
5
4
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
6
|
-
const interval = 0.11;
|
|
7
|
-
const bars = {
|
|
8
|
-
"&:nth-of-type(1)": {
|
|
9
|
-
animationDelay: "0"
|
|
10
|
-
},
|
|
11
|
-
"&:nth-of-type(2)": {
|
|
12
|
-
animationDelay: `${interval * 2}s`
|
|
13
|
-
},
|
|
14
|
-
"&:nth-of-type(3)": {
|
|
15
|
-
animationDelay: `${interval * 4}s`
|
|
16
|
-
}
|
|
17
|
-
};
|
|
18
|
-
const small = {
|
|
19
|
-
width: "2px",
|
|
20
|
-
height: "18px",
|
|
21
|
-
margin: "0px 2px",
|
|
22
|
-
...bars
|
|
23
|
-
};
|
|
24
|
-
const regular = {
|
|
25
|
-
width: "4px",
|
|
26
|
-
height: "30px",
|
|
27
|
-
margin: "0 3px",
|
|
28
|
-
...bars
|
|
29
|
-
};
|
|
30
|
-
const regularAnimation = react.keyframes`
|
|
31
|
-
0% {
|
|
32
|
-
transform: scale(1);
|
|
33
|
-
background-color: ${uikitStyles.theme.colors.brand};
|
|
34
|
-
}
|
|
35
|
-
50% {
|
|
36
|
-
transform: scale(1, 0.6);
|
|
37
|
-
background-color: ${uikitStyles.theme.colors.secondary};
|
|
38
|
-
}
|
|
39
|
-
`;
|
|
40
|
-
const regularColorAnimation = react.keyframes`
|
|
41
|
-
0% {
|
|
42
|
-
transform: scale(1);
|
|
43
|
-
}
|
|
44
|
-
50% {
|
|
45
|
-
transform: scale(1, 0.6);
|
|
46
|
-
}
|
|
47
|
-
`;
|
|
48
|
-
const smallAnimation = react.keyframes`
|
|
49
|
-
0% {
|
|
50
|
-
transform: scale(1);
|
|
51
|
-
}
|
|
52
|
-
50% {
|
|
53
|
-
transform: scale(1, 0.223);
|
|
54
|
-
}
|
|
55
|
-
100%: {},
|
|
56
|
-
`;
|
|
57
|
-
const smallColorAnimation = react.keyframes`
|
|
58
|
-
0% {
|
|
59
|
-
transform: scale(1);
|
|
60
|
-
}
|
|
61
|
-
50% {
|
|
62
|
-
transform: scale(1, 0.223);
|
|
63
|
-
}
|
|
64
|
-
`;
|
|
65
5
|
const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvLoading", {
|
|
66
6
|
root: {
|
|
67
7
|
display: "flex",
|
|
68
8
|
flexDirection: "column",
|
|
69
9
|
alignItems: "center",
|
|
70
|
-
justifyContent: "center"
|
|
10
|
+
justifyContent: "center",
|
|
11
|
+
gap: uikitStyles.theme.space.xs
|
|
12
|
+
},
|
|
13
|
+
barContainer: {
|
|
14
|
+
display: "flex",
|
|
15
|
+
justifyContent: "space-around",
|
|
16
|
+
":has($regular)": {
|
|
17
|
+
width: 30,
|
|
18
|
+
height: 30
|
|
19
|
+
},
|
|
20
|
+
":has($small)": {
|
|
21
|
+
"--scaleY": "0.223",
|
|
22
|
+
width: 18,
|
|
23
|
+
height: 18
|
|
24
|
+
}
|
|
71
25
|
},
|
|
72
|
-
barContainer: { display: "flex" },
|
|
73
26
|
loadingBar: {
|
|
27
|
+
backgroundColor: "currentcolor",
|
|
74
28
|
display: "inline-block",
|
|
75
|
-
"
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
29
|
+
animation: "loading 1s ease-in-out infinite",
|
|
30
|
+
// TODO: make this the default when it has better support
|
|
31
|
+
width: "round(up, 0.11em, 2px)",
|
|
32
|
+
"@keyframes loading": {
|
|
79
33
|
"50%": {
|
|
80
|
-
transform: "scale(1,0.
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
}
|
|
34
|
+
transform: "scale(1, var(--scaleY, 0.6))",
|
|
35
|
+
backgroundColor: `var(--customColor, ${uikitStyles.theme.colors.secondary})`
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
":nth-of-type(2)": { animationDelay: "0.22s" },
|
|
39
|
+
":nth-of-type(3)": { animationDelay: "0.44s" }
|
|
84
40
|
},
|
|
85
|
-
label: {
|
|
41
|
+
label: {},
|
|
86
42
|
overlay: {},
|
|
87
43
|
blur: {},
|
|
88
44
|
hidden: { display: "none" },
|
|
89
|
-
small: {
|
|
90
|
-
|
|
91
|
-
animation: `${regularAnimation} 1s ease-in-out infinite`,
|
|
92
|
-
...regular
|
|
45
|
+
small: {
|
|
46
|
+
width: 2
|
|
93
47
|
},
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
...small
|
|
48
|
+
regular: {
|
|
49
|
+
width: 4
|
|
97
50
|
},
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
...regular
|
|
101
|
-
}
|
|
51
|
+
smallColor: {},
|
|
52
|
+
regularColor: {}
|
|
102
53
|
});
|
|
103
54
|
exports.staticClasses = staticClasses;
|
|
104
55
|
exports.useClasses = useClasses;
|
|
@@ -17,7 +17,7 @@ const HvLoadingContainer = (props) => {
|
|
|
17
17
|
...others
|
|
18
18
|
} = uikitReactUtils.useDefaultProps("HvLoadingContainer", props);
|
|
19
19
|
const { classes, cx } = LoadingContainer_styles.useClasses(classesProp);
|
|
20
|
-
const ariaLabel = ariaLabelProp || typeof label === "string" && label
|
|
20
|
+
const ariaLabel = ariaLabelProp || typeof label === "string" && label || "Loading";
|
|
21
21
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.root, className), ...others, children: [
|
|
22
22
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
23
23
|
Loading.HvLoading,
|
|
@@ -28,7 +28,9 @@ const HvLoadingContainer = (props) => {
|
|
|
28
28
|
label,
|
|
29
29
|
hidden,
|
|
30
30
|
"aria-label": ariaLabel,
|
|
31
|
-
style: uikitReactUtils.mergeStyles(
|
|
31
|
+
style: uikitReactUtils.mergeStyles(void 0, {
|
|
32
|
+
"--opacity": opacity && `${opacity * 100}%`
|
|
33
|
+
})
|
|
32
34
|
}
|
|
33
35
|
),
|
|
34
36
|
children
|
|
@@ -13,7 +13,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvLoadingCo
|
|
|
13
13
|
inset: 0,
|
|
14
14
|
zIndex: uikitStyles.theme.zIndices.overlay,
|
|
15
15
|
transition: "background-color .2s ease",
|
|
16
|
-
backgroundColor: uikitStyles.theme.alpha("atmo1", "var(--opacity,
|
|
16
|
+
backgroundColor: uikitStyles.theme.alpha("atmo1", "var(--opacity, 80%)")
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
19
|
exports.staticClasses = staticClasses;
|
|
@@ -4,9 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
|
|
|
4
4
|
const React = require("react");
|
|
5
5
|
const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
|
|
6
6
|
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
7
|
-
const
|
|
8
|
-
const useUniqueId = require("../hooks/useUniqueId.cjs");
|
|
9
|
-
const setId = require("../utils/setId.cjs");
|
|
7
|
+
const useExpandable = require("../hooks/useExpandable.cjs");
|
|
10
8
|
const Section_styles = require("./Section.styles.cjs");
|
|
11
9
|
const Button = require("../Button/Button.cjs");
|
|
12
10
|
const HvSection = React.forwardRef(
|
|
@@ -28,18 +26,17 @@ const HvSection = React.forwardRef(
|
|
|
28
26
|
...others
|
|
29
27
|
} = uikitReactUtils.useDefaultProps("HvSection", props);
|
|
30
28
|
const { classes, cx } = Section_styles.useClasses(classesProp);
|
|
31
|
-
const
|
|
29
|
+
const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable.useExpandable({
|
|
30
|
+
id,
|
|
32
31
|
expanded,
|
|
33
|
-
|
|
34
|
-
);
|
|
35
|
-
const elementId = useUniqueId.useUniqueId(id);
|
|
36
|
-
const contentId = setId.setId(elementId, "content");
|
|
32
|
+
defaultExpanded
|
|
33
|
+
});
|
|
37
34
|
const showContent = expandable ? !!isOpen : true;
|
|
38
35
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
39
36
|
"div",
|
|
40
37
|
{
|
|
41
38
|
ref,
|
|
42
|
-
id
|
|
39
|
+
id,
|
|
43
40
|
className: cx(classes.root, className),
|
|
44
41
|
...others,
|
|
45
42
|
children: [
|
|
@@ -55,14 +52,13 @@ const HvSection = React.forwardRef(
|
|
|
55
52
|
{
|
|
56
53
|
icon: true,
|
|
57
54
|
onClick: (event) => {
|
|
58
|
-
|
|
55
|
+
toggleOpen();
|
|
59
56
|
onToggle?.(event, !isOpen);
|
|
60
57
|
},
|
|
61
|
-
"aria-expanded": isOpen,
|
|
62
|
-
"aria-controls": contentId,
|
|
63
58
|
"aria-label": isOpen ? "Collapse" : "Expand",
|
|
59
|
+
...buttonProps,
|
|
64
60
|
...expandButtonProps,
|
|
65
|
-
children:
|
|
61
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Down, { style: { rotate: isOpen ? "180deg" : void 0 } })
|
|
66
62
|
}
|
|
67
63
|
),
|
|
68
64
|
title,
|
|
@@ -74,12 +70,12 @@ const HvSection = React.forwardRef(
|
|
|
74
70
|
"div",
|
|
75
71
|
{
|
|
76
72
|
ref: contentRef,
|
|
77
|
-
id: contentId,
|
|
78
73
|
hidden: !isOpen,
|
|
79
74
|
className: cx(classes.content, {
|
|
80
75
|
[classes.hidden]: !showContent,
|
|
81
76
|
[classes.spaceTop]: !(title || actions || expandable)
|
|
82
77
|
}),
|
|
78
|
+
...expandable && regionProps,
|
|
83
79
|
children
|
|
84
80
|
}
|
|
85
81
|
)
|
|
@@ -91,6 +91,5 @@ const useBulkActions = (hooks) => {
|
|
|
91
91
|
hooks.useInstance.push(useInstanceHook);
|
|
92
92
|
};
|
|
93
93
|
useBulkActions.pluginName = "useHvBulkActions";
|
|
94
|
-
|
|
95
|
-
exports.default = useBulkActions$1;
|
|
94
|
+
exports.default = useBulkActions;
|
|
96
95
|
exports.defaultgetHvBulkActionsProps = defaultgetHvBulkActionsProps;
|
|
@@ -3,5 +3,4 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
|
|
|
3
3
|
const reactTable = require("react-table");
|
|
4
4
|
const useHvFilters = reactTable.useFilters.bind({});
|
|
5
5
|
useHvFilters.pluginName = "useHvFilters";
|
|
6
|
-
|
|
7
|
-
exports.default = useHvFilters$1;
|
|
6
|
+
exports.default = useHvFilters;
|
|
@@ -3,5 +3,4 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
|
|
|
3
3
|
const reactTable = require("react-table");
|
|
4
4
|
const useHvGlobalFilter = reactTable.useGlobalFilter.bind({});
|
|
5
5
|
useHvGlobalFilter.pluginName = "useHvGlobalFilter";
|
|
6
|
-
|
|
7
|
-
exports.default = useHvGlobalFilter$1;
|
|
6
|
+
exports.default = useHvGlobalFilter;
|
|
@@ -52,6 +52,5 @@ const usePagination = (hooks) => {
|
|
|
52
52
|
hooks.useInstance.push(useInstanceHook);
|
|
53
53
|
};
|
|
54
54
|
usePagination.pluginName = "useHvPagination";
|
|
55
|
-
|
|
56
|
-
exports.default = usePagination$1;
|
|
55
|
+
exports.default = usePagination;
|
|
57
56
|
exports.defaultGetHvPaginationProps = defaultGetHvPaginationProps;
|
|
@@ -34,5 +34,4 @@ const useResizeColumns = (hooks) => {
|
|
|
34
34
|
hooks.useInstance.push(useInstanceHook);
|
|
35
35
|
};
|
|
36
36
|
useResizeColumns.pluginName = "useHvResizeColumns";
|
|
37
|
-
|
|
38
|
-
exports.default = useResizeColumns$1;
|
|
37
|
+
exports.default = useResizeColumns;
|
|
@@ -73,6 +73,5 @@ const useRowExpand = (hooks) => {
|
|
|
73
73
|
hooks.getRowProps.push(getRowPropsHook);
|
|
74
74
|
};
|
|
75
75
|
useRowExpand.pluginName = "useHvRowExpand";
|
|
76
|
-
const useRowExpand$1 = useRowExpand;
|
|
77
76
|
exports.CellWithExpandButton = CellWithExpandButton;
|
|
78
|
-
exports.default = useRowExpand
|
|
77
|
+
exports.default = useRowExpand;
|
|
@@ -439,9 +439,8 @@ const useRowSelection = (hooks) => {
|
|
|
439
439
|
hooks.prepareRow.push(prepareRow);
|
|
440
440
|
};
|
|
441
441
|
useRowSelection.pluginName = "useHvRowSelection";
|
|
442
|
-
const useRowSelection$1 = useRowSelection;
|
|
443
442
|
exports.CellWithCheckBox = CellWithCheckBox;
|
|
444
|
-
exports.default = useRowSelection
|
|
443
|
+
exports.default = useRowSelection;
|
|
445
444
|
exports.defaultGetToggleAllPageRowsSelectedProps = defaultGetToggleAllPageRowsSelectedProps;
|
|
446
445
|
exports.defaultGetToggleAllRowsSelectedProps = defaultGetToggleAllRowsSelectedProps;
|
|
447
446
|
exports.defaultGetToggleRowSelectedProps = defaultGetToggleRowSelectedProps;
|
|
@@ -3,5 +3,4 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
|
|
|
3
3
|
const reactTable = require("react-table");
|
|
4
4
|
const useHvRowState = reactTable.useRowState.bind({});
|
|
5
5
|
useHvRowState.pluginName = "useHvRowState";
|
|
6
|
-
|
|
7
|
-
exports.default = useHvRowState$1;
|
|
6
|
+
exports.default = useHvRowState;
|
|
@@ -166,7 +166,6 @@ const useSticky = (hooks) => {
|
|
|
166
166
|
hooks.getCellProps.push(getCellPropsHook);
|
|
167
167
|
};
|
|
168
168
|
useSticky.pluginName = "useHvTableSticky";
|
|
169
|
-
|
|
170
|
-
exports.default = useSticky$1;
|
|
169
|
+
exports.default = useSticky;
|
|
171
170
|
exports.getHeaderGroupPropsHook = getHeaderGroupPropsHook;
|
|
172
171
|
exports.getTableHeadPropsHook = getTableHeadPropsHook;
|
|
@@ -86,6 +86,5 @@ const useTableStyles = (hooks) => {
|
|
|
86
86
|
hooks.getCellProps.push(getCellPropsHook);
|
|
87
87
|
};
|
|
88
88
|
useTableStyles.pluginName = "useHvTableStyles";
|
|
89
|
-
|
|
90
|
-
exports.default = useHvTableStyles;
|
|
89
|
+
exports.default = useTableStyles;
|
|
91
90
|
exports.getHeaderFooterPropsHook = getHeaderFooterPropsHook;
|
|
@@ -4,7 +4,7 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
|
4
4
|
const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTextArea", {
|
|
5
5
|
root: { display: "inline-block", width: "100%" },
|
|
6
6
|
disabled: {},
|
|
7
|
-
resizable: { width: "
|
|
7
|
+
resizable: { width: "fit-content" },
|
|
8
8
|
invalid: {},
|
|
9
9
|
baseInput: { clear: "both", float: "left" },
|
|
10
10
|
input: {},
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const setId = require("../utils/setId.cjs");
|
|
4
|
+
const useControlled = require("./useControlled.cjs");
|
|
5
|
+
const useUniqueId = require("./useUniqueId.cjs");
|
|
6
|
+
function useExpandable({
|
|
7
|
+
id: idProp,
|
|
8
|
+
disabled,
|
|
9
|
+
expanded,
|
|
10
|
+
defaultExpanded
|
|
11
|
+
}) {
|
|
12
|
+
const [isOpen, setIsOpen] = useControlled.useControlled(expanded, Boolean(defaultExpanded));
|
|
13
|
+
const id = useUniqueId.useUniqueId(idProp);
|
|
14
|
+
const buttonId = setId.setId(id, "button");
|
|
15
|
+
const regionId = setId.setId(id, "container");
|
|
16
|
+
return {
|
|
17
|
+
isOpen,
|
|
18
|
+
toggleOpen: (newOpen) => setIsOpen((o) => newOpen ?? !o),
|
|
19
|
+
buttonProps: {
|
|
20
|
+
id: buttonId,
|
|
21
|
+
"aria-disabled": disabled,
|
|
22
|
+
"aria-expanded": isOpen,
|
|
23
|
+
"aria-controls": isOpen ? regionId : void 0
|
|
24
|
+
},
|
|
25
|
+
regionProps: {
|
|
26
|
+
id: regionId,
|
|
27
|
+
role: "region",
|
|
28
|
+
"aria-labelledby": buttonId
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
exports.useExpandable = useExpandable;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const React = require("react");
|
|
4
|
+
const useEnhancedEffect = require("./useEnhancedEffect.cjs");
|
|
4
5
|
function _interopNamespace(e) {
|
|
5
6
|
if (e && e.__esModule) return e;
|
|
6
7
|
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
|
@@ -23,7 +24,7 @@ const useReactId = React__namespace["useId".toString()] || (() => void 0);
|
|
|
23
24
|
let count = 0;
|
|
24
25
|
const useUniqueId = (deterministicId, idPrefix) => {
|
|
25
26
|
const [id, setId] = React__namespace.useState(useReactId());
|
|
26
|
-
|
|
27
|
+
useEnhancedEffect.useEnhancedEffect(() => {
|
|
27
28
|
if (!deterministicId) setId((reactId) => reactId ?? String(count++));
|
|
28
29
|
}, [deterministicId, idPrefix]);
|
|
29
30
|
return deterministicId || (idPrefix ? idPrefix + id : id ?? "");
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -33,10 +33,24 @@ const useSavedState = require("./utils/useSavedState.cjs");
|
|
|
33
33
|
const wrapperTooltip = require("./utils/wrapperTooltip.cjs");
|
|
34
34
|
const helpers = require("./utils/helpers.cjs");
|
|
35
35
|
const useTable = require("./Table/hooks/useTable.cjs");
|
|
36
|
+
const useTableStyles = require("./Table/hooks/useTableStyles.cjs");
|
|
37
|
+
const useSortBy = require("./Table/hooks/useSortBy.cjs");
|
|
38
|
+
const useSticky = require("./Table/hooks/useSticky.cjs");
|
|
39
|
+
const usePagination = require("./Table/hooks/usePagination.cjs");
|
|
40
|
+
const useRowSelection = require("./Table/hooks/useRowSelection.cjs");
|
|
41
|
+
const useBulkActions = require("./Table/hooks/useBulkActions.cjs");
|
|
42
|
+
const useRowExpand = require("./Table/hooks/useRowExpand.cjs");
|
|
43
|
+
const useHeaderGroups = require("./Table/hooks/useHeaderGroups.cjs");
|
|
44
|
+
const useResizeColumns = require("./Table/hooks/useResizeColumns.cjs");
|
|
45
|
+
const useGlobalFilter = require("./Table/hooks/useGlobalFilter.cjs");
|
|
46
|
+
const useFilters = require("./Table/hooks/useFilters.cjs");
|
|
47
|
+
const useRowState = require("./Table/hooks/useRowState.cjs");
|
|
36
48
|
const utils = require("./Typography/utils.cjs");
|
|
37
49
|
const Typography_styles = require("./Typography/Typography.styles.cjs");
|
|
38
50
|
const Typography = require("./Typography/Typography.cjs");
|
|
39
51
|
const Box = require("./Box/Box.cjs");
|
|
52
|
+
const ButtonBase_styles = require("./ButtonBase/ButtonBase.styles.cjs");
|
|
53
|
+
const ButtonBase = require("./ButtonBase/ButtonBase.cjs");
|
|
40
54
|
const Focus_styles = require("./Focus/Focus.styles.cjs");
|
|
41
55
|
const Focus = require("./Focus/Focus.cjs");
|
|
42
56
|
const ListContainer_styles = require("./ListContainer/ListContainer.styles.cjs");
|
|
@@ -251,18 +265,6 @@ const TableRow_styles = require("./Table/TableRow/TableRow.styles.cjs");
|
|
|
251
265
|
const TableRow = require("./Table/TableRow/TableRow.cjs");
|
|
252
266
|
const TableCell_styles = require("./Table/TableCell/TableCell.styles.cjs");
|
|
253
267
|
const TableCell = require("./Table/TableCell/TableCell.cjs");
|
|
254
|
-
const useTableStyles = require("./Table/hooks/useTableStyles.cjs");
|
|
255
|
-
const useSortBy = require("./Table/hooks/useSortBy.cjs");
|
|
256
|
-
const useSticky = require("./Table/hooks/useSticky.cjs");
|
|
257
|
-
const usePagination = require("./Table/hooks/usePagination.cjs");
|
|
258
|
-
const useRowSelection = require("./Table/hooks/useRowSelection.cjs");
|
|
259
|
-
const useBulkActions = require("./Table/hooks/useBulkActions.cjs");
|
|
260
|
-
const useRowExpand = require("./Table/hooks/useRowExpand.cjs");
|
|
261
|
-
const useHeaderGroups = require("./Table/hooks/useHeaderGroups.cjs");
|
|
262
|
-
const useResizeColumns = require("./Table/hooks/useResizeColumns.cjs");
|
|
263
|
-
const useGlobalFilter = require("./Table/hooks/useGlobalFilter.cjs");
|
|
264
|
-
const useFilters = require("./Table/hooks/useFilters.cjs");
|
|
265
|
-
const useRowState = require("./Table/hooks/useRowState.cjs");
|
|
266
268
|
const renderers = require("./Table/renderers/renderers.cjs");
|
|
267
269
|
const DateColumnCell = require("./Table/renderers/DateColumnCell/DateColumnCell.cjs");
|
|
268
270
|
const DropdownColumnCell = require("./Table/renderers/DropdownColumnCell/DropdownColumnCell.cjs");
|
|
@@ -389,10 +391,37 @@ exports.wrapperTooltip = wrapperTooltip.wrapperTooltip;
|
|
|
389
391
|
exports.uniqueId = helpers.uniqueId;
|
|
390
392
|
exports.useHvData = useTable.default;
|
|
391
393
|
exports.useHvTable = useTable.default;
|
|
394
|
+
exports.getHeaderFooterPropsHook = useTableStyles.getHeaderFooterPropsHook;
|
|
395
|
+
exports.useHvTableStyles = useTableStyles.default;
|
|
396
|
+
exports.useHvSortBy = useSortBy.default;
|
|
397
|
+
exports.getHeaderGroupPropsHook = useSticky.getHeaderGroupPropsHook;
|
|
398
|
+
exports.getTableHeadPropsHook = useSticky.getTableHeadPropsHook;
|
|
399
|
+
exports.useHvTableSticky = useSticky.default;
|
|
400
|
+
exports.defaultGetHvPaginationProps = usePagination.defaultGetHvPaginationProps;
|
|
401
|
+
exports.useHvPagination = usePagination.default;
|
|
402
|
+
exports.CellWithCheckBox = useRowSelection.CellWithCheckBox;
|
|
403
|
+
exports.defaultGetToggleAllPageRowsSelectedProps = useRowSelection.defaultGetToggleAllPageRowsSelectedProps;
|
|
404
|
+
exports.defaultGetToggleAllRowsSelectedProps = useRowSelection.defaultGetToggleAllRowsSelectedProps;
|
|
405
|
+
exports.defaultGetToggleRowSelectedProps = useRowSelection.defaultGetToggleRowSelectedProps;
|
|
406
|
+
exports.prepareRow = useRowSelection.prepareRow;
|
|
407
|
+
exports.reducer = useRowSelection.reducer;
|
|
408
|
+
exports.useHvRowSelection = useRowSelection.default;
|
|
409
|
+
exports.useInstance = useRowSelection.useInstance;
|
|
410
|
+
exports.defaultgetHvBulkActionsProps = useBulkActions.defaultgetHvBulkActionsProps;
|
|
411
|
+
exports.useHvBulkActions = useBulkActions.default;
|
|
412
|
+
exports.CellWithExpandButton = useRowExpand.CellWithExpandButton;
|
|
413
|
+
exports.useHvRowExpand = useRowExpand.default;
|
|
414
|
+
exports.useHvHeaderGroups = useHeaderGroups.default;
|
|
415
|
+
exports.useHvResizeColumns = useResizeColumns.default;
|
|
416
|
+
exports.useHvGlobalFilter = useGlobalFilter.default;
|
|
417
|
+
exports.useHvFilters = useFilters.default;
|
|
418
|
+
exports.useHvRowState = useRowState.default;
|
|
392
419
|
exports.typographyVariants = utils.typographyVariants;
|
|
393
420
|
exports.typographyClasses = Typography_styles.staticClasses;
|
|
394
421
|
exports.HvTypography = Typography.HvTypography;
|
|
395
422
|
exports.HvBox = Box.HvBox;
|
|
423
|
+
exports.buttonBaseClasses = ButtonBase_styles.staticClasses;
|
|
424
|
+
exports.HvButtonBase = ButtonBase.HvButtonBase;
|
|
396
425
|
exports.focusClasses = Focus_styles.staticClasses;
|
|
397
426
|
exports.HvFocus = Focus.HvFocus;
|
|
398
427
|
exports.listContainerClasses = ListContainer_styles.staticClasses;
|
|
@@ -627,31 +656,6 @@ exports.tableRowClasses = TableRow_styles.staticClasses;
|
|
|
627
656
|
exports.HvTableRow = TableRow.HvTableRow;
|
|
628
657
|
exports.tableCellClasses = TableCell_styles.staticClasses;
|
|
629
658
|
exports.HvTableCell = TableCell.HvTableCell;
|
|
630
|
-
exports.getHeaderFooterPropsHook = useTableStyles.getHeaderFooterPropsHook;
|
|
631
|
-
exports.useHvTableStyles = useTableStyles.default;
|
|
632
|
-
exports.useHvSortBy = useSortBy.default;
|
|
633
|
-
exports.getHeaderGroupPropsHook = useSticky.getHeaderGroupPropsHook;
|
|
634
|
-
exports.getTableHeadPropsHook = useSticky.getTableHeadPropsHook;
|
|
635
|
-
exports.useHvTableSticky = useSticky.default;
|
|
636
|
-
exports.defaultGetHvPaginationProps = usePagination.defaultGetHvPaginationProps;
|
|
637
|
-
exports.useHvPagination = usePagination.default;
|
|
638
|
-
exports.CellWithCheckBox = useRowSelection.CellWithCheckBox;
|
|
639
|
-
exports.defaultGetToggleAllPageRowsSelectedProps = useRowSelection.defaultGetToggleAllPageRowsSelectedProps;
|
|
640
|
-
exports.defaultGetToggleAllRowsSelectedProps = useRowSelection.defaultGetToggleAllRowsSelectedProps;
|
|
641
|
-
exports.defaultGetToggleRowSelectedProps = useRowSelection.defaultGetToggleRowSelectedProps;
|
|
642
|
-
exports.prepareRow = useRowSelection.prepareRow;
|
|
643
|
-
exports.reducer = useRowSelection.reducer;
|
|
644
|
-
exports.useHvRowSelection = useRowSelection.default;
|
|
645
|
-
exports.useInstance = useRowSelection.useInstance;
|
|
646
|
-
exports.defaultgetHvBulkActionsProps = useBulkActions.defaultgetHvBulkActionsProps;
|
|
647
|
-
exports.useHvBulkActions = useBulkActions.default;
|
|
648
|
-
exports.CellWithExpandButton = useRowExpand.CellWithExpandButton;
|
|
649
|
-
exports.useHvRowExpand = useRowExpand.default;
|
|
650
|
-
exports.useHvHeaderGroups = useHeaderGroups.default;
|
|
651
|
-
exports.useHvResizeColumns = useResizeColumns.default;
|
|
652
|
-
exports.useHvGlobalFilter = useGlobalFilter.default;
|
|
653
|
-
exports.useHvFilters = useFilters.default;
|
|
654
|
-
exports.useHvRowState = useRowState.default;
|
|
655
659
|
exports.hvDateColumn = renderers.hvDateColumn;
|
|
656
660
|
exports.hvDropdownColumn = renderers.hvDropdownColumn;
|
|
657
661
|
exports.hvExpandColumn = renderers.hvExpandColumn;
|