@hitachivantara/uikit-react-core 5.63.2 → 5.63.3
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.
|
@@ -23,6 +23,15 @@ const HvMultiButton = (props) => {
|
|
|
23
23
|
return [];
|
|
24
24
|
return result.map((x) => x.toLowerCase());
|
|
25
25
|
}, [variant]);
|
|
26
|
+
const buttons = React.useMemo(() => {
|
|
27
|
+
const btns = [];
|
|
28
|
+
React.Children.forEach(children, (child) => {
|
|
29
|
+
if (child && React.isValidElement(child)) {
|
|
30
|
+
btns.push(child);
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
return btns;
|
|
34
|
+
}, [children]);
|
|
26
35
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
27
36
|
"div",
|
|
28
37
|
{
|
|
@@ -39,38 +48,36 @@ const HvMultiButton = (props) => {
|
|
|
39
48
|
className
|
|
40
49
|
),
|
|
41
50
|
...others,
|
|
42
|
-
children:
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
] });
|
|
73
|
-
}
|
|
51
|
+
children: buttons.map((child, index) => {
|
|
52
|
+
const childIsSelected = !!child.props.selected;
|
|
53
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
54
|
+
React.cloneElement(child, {
|
|
55
|
+
variant,
|
|
56
|
+
disabled: disabled || child.props.disabled,
|
|
57
|
+
size,
|
|
58
|
+
className: cx(child.props.className, classes.button, {
|
|
59
|
+
[classes.firstButton]: index === 0,
|
|
60
|
+
[classes.lastButton]: index === buttons.length - 1,
|
|
61
|
+
[classes.selected]: childIsSelected
|
|
62
|
+
})
|
|
63
|
+
}),
|
|
64
|
+
split && index < buttons.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
65
|
+
"div",
|
|
66
|
+
{
|
|
67
|
+
className: cx(
|
|
68
|
+
classes.splitContainer,
|
|
69
|
+
color && css(MultiButton_styles.getSplitContainerColor(color, type, disabled)),
|
|
70
|
+
size && css(MultiButton_styles.getSplitContainerHeight(size)),
|
|
71
|
+
{
|
|
72
|
+
[classes.splitDisabled]: disabled
|
|
73
|
+
},
|
|
74
|
+
classes[variant]
|
|
75
|
+
// TODO - remove in v6
|
|
76
|
+
),
|
|
77
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.split })
|
|
78
|
+
}
|
|
79
|
+
)
|
|
80
|
+
] });
|
|
74
81
|
})
|
|
75
82
|
}
|
|
76
83
|
);
|
|
@@ -22,6 +22,15 @@ const HvMultiButton = (props) => {
|
|
|
22
22
|
return [];
|
|
23
23
|
return result.map((x) => x.toLowerCase());
|
|
24
24
|
}, [variant]);
|
|
25
|
+
const buttons = useMemo(() => {
|
|
26
|
+
const btns = [];
|
|
27
|
+
Children.forEach(children, (child) => {
|
|
28
|
+
if (child && isValidElement(child)) {
|
|
29
|
+
btns.push(child);
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
return btns;
|
|
33
|
+
}, [children]);
|
|
25
34
|
return /* @__PURE__ */ jsx(
|
|
26
35
|
"div",
|
|
27
36
|
{
|
|
@@ -38,38 +47,36 @@ const HvMultiButton = (props) => {
|
|
|
38
47
|
className
|
|
39
48
|
),
|
|
40
49
|
...others,
|
|
41
|
-
children:
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
] });
|
|
72
|
-
}
|
|
50
|
+
children: buttons.map((child, index) => {
|
|
51
|
+
const childIsSelected = !!child.props.selected;
|
|
52
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
53
|
+
cloneElement(child, {
|
|
54
|
+
variant,
|
|
55
|
+
disabled: disabled || child.props.disabled,
|
|
56
|
+
size,
|
|
57
|
+
className: cx(child.props.className, classes.button, {
|
|
58
|
+
[classes.firstButton]: index === 0,
|
|
59
|
+
[classes.lastButton]: index === buttons.length - 1,
|
|
60
|
+
[classes.selected]: childIsSelected
|
|
61
|
+
})
|
|
62
|
+
}),
|
|
63
|
+
split && index < buttons.length - 1 && /* @__PURE__ */ jsx(
|
|
64
|
+
"div",
|
|
65
|
+
{
|
|
66
|
+
className: cx(
|
|
67
|
+
classes.splitContainer,
|
|
68
|
+
color && css(getSplitContainerColor(color, type, disabled)),
|
|
69
|
+
size && css(getSplitContainerHeight(size)),
|
|
70
|
+
{
|
|
71
|
+
[classes.splitDisabled]: disabled
|
|
72
|
+
},
|
|
73
|
+
classes[variant]
|
|
74
|
+
// TODO - remove in v6
|
|
75
|
+
),
|
|
76
|
+
children: /* @__PURE__ */ jsx("div", { className: classes.split })
|
|
77
|
+
}
|
|
78
|
+
)
|
|
79
|
+
] });
|
|
73
80
|
})
|
|
74
81
|
}
|
|
75
82
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiButton.js","sources":["../../../src/MultiButton/MultiButton.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"MultiButton.js","sources":["../../../src/MultiButton/MultiButton.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n isValidElement,\n ReactElement,\n useMemo,\n} from \"react\";\n\nimport { HvButtonSize, HvButtonVariant } from \"../Button\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport {\n getSplitContainerColor,\n getSplitContainerHeight,\n staticClasses,\n useClasses,\n} from \"./MultiButton.styles\";\n\nexport { staticClasses as multiButtonClasses };\nexport type HvMultiButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvMultiButtonProps extends HvBaseProps {\n /** If all the buttons are disabled. */\n disabled?: boolean;\n /** If the MultiButton is to be displayed vertically. */\n vertical?: boolean;\n /** Category of button to use */\n variant?: HvButtonVariant;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvMultiButtonClasses;\n /** Button size. */\n size?: HvButtonSize;\n /** Add a split between buttons */\n split?: boolean;\n}\n\nexport const HvMultiButton = (props: HvMultiButtonProps) => {\n const {\n className,\n children,\n classes: classesProp,\n disabled = false,\n vertical = false,\n variant = \"secondarySubtle\",\n size,\n split,\n ...others\n } = useDefaultProps(\"HvMultiButton\", props);\n const { classes, cx, css } = useClasses(classesProp);\n\n const [color, type] = useMemo(() => {\n const result = variant.split(/(?=[A-Z])/);\n if (\n result[0] === \"ghost\" ||\n result[0] === \"semantic\" ||\n (result[0] === \"secondary\" && !result[1])\n )\n return [];\n return result.map((x) => x.toLowerCase());\n }, [variant]);\n\n // Filter children: remove invalid and undefined/null\n const buttons = useMemo(() => {\n const btns: ReactElement[] = [];\n Children.forEach(children, (child) => {\n if (child && isValidElement(child)) {\n btns.push(child);\n }\n });\n return btns;\n }, [children]);\n\n return (\n <div\n className={cx(\n classes.root,\n {\n [classes.multiple]: !split,\n [classes.vertical]: vertical,\n [classes[variant]]: variant, // TODO - remove in v6\n [classes.splitGroup]: split,\n [classes.splitGroupDisabled]: split && disabled,\n },\n className,\n )}\n {...others}\n >\n {buttons.map((child, index) => {\n const childIsSelected = !!child.props.selected;\n return (\n <>\n {cloneElement(child, {\n variant,\n disabled: disabled || child.props.disabled,\n size,\n className: cx(child.props.className, classes.button, {\n [classes.firstButton]: index === 0,\n [classes.lastButton]: index === buttons.length - 1,\n [classes.selected]: childIsSelected,\n }),\n })}\n {split && index < buttons.length - 1 && (\n <div\n className={cx(\n classes.splitContainer,\n color && css(getSplitContainerColor(color, type, disabled)),\n size && css(getSplitContainerHeight(size)),\n {\n [classes.splitDisabled]: disabled,\n },\n classes[variant], // TODO - remove in v6\n )}\n >\n <div className={classes.split} />\n </div>\n )}\n </>\n );\n })}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;AAqCa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,QAAM,CAAC,OAAO,IAAI,IAAI,QAAQ,MAAM;AAC5B,UAAA,SAAS,QAAQ,MAAM,WAAW;AACxC,QACE,OAAO,CAAC,MAAM,WACd,OAAO,CAAC,MAAM,cACb,OAAO,CAAC,MAAM,eAAe,CAAC,OAAO,CAAC;AAEvC,aAAO;AACT,WAAO,OAAO,IAAI,CAAC,MAAM,EAAE,aAAa;AAAA,EAAA,GACvC,CAAC,OAAO,CAAC;AAGN,QAAA,UAAU,QAAQ,MAAM;AAC5B,UAAM,OAAuB,CAAA;AACpB,aAAA,QAAQ,UAAU,CAAC,UAAU;AAChC,UAAA,SAAS,eAAe,KAAK,GAAG;AAClC,aAAK,KAAK,KAAK;AAAA,MACjB;AAAA,IAAA,CACD;AACM,WAAA;AAAA,EAAA,GACN,CAAC,QAAQ,CAAC;AAGX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG,CAAC;AAAA,UACrB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,OAAO,CAAC,GAAG;AAAA;AAAA,UACpB,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,kBAAkB,GAAG,SAAS;AAAA,QACzC;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAAQ,QAAA,IAAI,CAAC,OAAO,UAAU;AAC7B,cAAM,kBAAkB,CAAC,CAAC,MAAM,MAAM;AACtC,eAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,UAAA,aAAa,OAAO;AAAA,YACnB;AAAA,YACA,UAAU,YAAY,MAAM,MAAM;AAAA,YAClC;AAAA,YACA,WAAW,GAAG,MAAM,MAAM,WAAW,QAAQ,QAAQ;AAAA,cACnD,CAAC,QAAQ,WAAW,GAAG,UAAU;AAAA,cACjC,CAAC,QAAQ,UAAU,GAAG,UAAU,QAAQ,SAAS;AAAA,cACjD,CAAC,QAAQ,QAAQ,GAAG;AAAA,YAAA,CACrB;AAAA,UAAA,CACF;AAAA,UACA,SAAS,QAAQ,QAAQ,SAAS,KACjC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT,QAAQ;AAAA,gBACR,SAAS,IAAI,uBAAuB,OAAO,MAAM,QAAQ,CAAC;AAAA,gBAC1D,QAAQ,IAAI,wBAAwB,IAAI,CAAC;AAAA,gBACzC;AAAA,kBACE,CAAC,QAAQ,aAAa,GAAG;AAAA,gBAC3B;AAAA,gBACA,QAAQ,OAAO;AAAA;AAAA,cACjB;AAAA,cAEA,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,OAAO;AAAA,YAAA;AAAA,UACjC;AAAA,QAEJ,EAAA,CAAA;AAAA,MAAA,CAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-core",
|
|
3
|
-
"version": "5.63.
|
|
3
|
+
"version": "5.63.3",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Core React components for the NEXT Design System.",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"access": "public",
|
|
63
63
|
"directory": "package"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "fecc39b18d92c0e39b519af0675e5404a52aa562",
|
|
66
66
|
"main": "dist/cjs/index.cjs",
|
|
67
67
|
"exports": {
|
|
68
68
|
".": {
|