@hitachivantara/uikit-react-core 5.84.0 → 5.84.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.
|
@@ -1 +1 @@
|
|
|
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\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButtonVariant } from \"../Button\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } 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 /** Button variant to use when in `split` mode */\n variant?: HvButtonVariant;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvMultiButtonClasses;\n /** Button size when in `split` mode. */\n size?: HvSize;\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 } = useClasses(classesProp);\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]: !split && vertical,\n [classes[variant as keyof HvMultiButtonClasses]]: 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 return cloneElement(child, {\n key: index,\n variant,\n disabled: disabled || child.props.disabled,\n size,\n className: cx(classes.button, child.props.className, {\n [classes.firstButton]: index === 0,\n [classes.lastButton]: index === buttons.length - 1,\n [classes.selected]: child.props.selected,\n }),\n });\n })}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;
|
|
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\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButtonVariant } from \"../Button\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } 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 /** Button variant to use when in `split` mode */\n variant?: HvButtonVariant;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvMultiButtonClasses;\n /** Button size when in `split` mode. */\n size?: HvSize;\n /** Add a split between buttons */\n split?: boolean;\n}\n\n/**\n * Multi-buttons are grouped sets of buttons displayed horizontally or vertically in the same container.\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 } = useClasses(classesProp);\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]: !split && vertical,\n [classes[variant as keyof HvMultiButtonClasses]]: 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 return cloneElement(child, {\n key: index,\n variant,\n disabled: disabled || child.props.disabled,\n size,\n className: cx(classes.button, child.props.className, {\n [classes.firstButton]: index === 0,\n [classes.lastButton]: index === buttons.length - 1,\n [classes.selected]: child.props.selected,\n }),\n });\n })}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;AAsCa,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,OAAO,WAAW,WAAW;AAGxC,QAAA,UAAU,QAAQ,MAAM;AAC5B,UAAM,OAAuB,CAAC;AACrB,aAAA,QAAQ,UAAU,CAAC,UAAU;AAChC,UAAA,SAAS,eAAe,KAAK,GAAG;AAClC,aAAK,KAAK,KAAK;AAAA,MAAA;AAAA,IACjB,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,CAAC,SAAS;AAAA,UAC9B,CAAC,QAAQ,OAAqC,CAAC,GAAG;AAAA;AAAA,UAClD,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,eAAO,aAAa,OAAO;AAAA,UACzB,KAAK;AAAA,UACL;AAAA,UACA,UAAU,YAAY,MAAM,MAAM;AAAA,UAClC;AAAA,UACA,WAAW,GAAG,QAAQ,QAAQ,MAAM,MAAM,WAAW;AAAA,YACnD,CAAC,QAAQ,WAAW,GAAG,UAAU;AAAA,YACjC,CAAC,QAAQ,UAAU,GAAG,UAAU,QAAQ,SAAS;AAAA,YACjD,CAAC,QAAQ,QAAQ,GAAG,MAAM,MAAM;AAAA,UACjC,CAAA;AAAA,QAAA,CACF;AAAA,MACF,CAAA;AAAA,IAAA;AAAA,EACH;AAEJ;"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -4605,6 +4605,9 @@ declare interface HvMetaBase<D extends object = Record<string, unknown>, H exten
|
|
|
4605
4605
|
userProps: any;
|
|
4606
4606
|
}
|
|
4607
4607
|
|
|
4608
|
+
/**
|
|
4609
|
+
* Multi-buttons are grouped sets of buttons displayed horizontally or vertically in the same container.
|
|
4610
|
+
*/
|
|
4608
4611
|
export declare const HvMultiButton: (props: HvMultiButtonProps) => JSX_3.Element;
|
|
4609
4612
|
|
|
4610
4613
|
export declare type HvMultiButtonClasses = ExtractNames<typeof useClasses_92>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-core",
|
|
3
|
-
"version": "5.84.
|
|
3
|
+
"version": "5.84.2",
|
|
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": "76b8a03a01d67b9b46ec17fdd7ac04ae2977723d",
|
|
66
66
|
"exports": {
|
|
67
67
|
".": {
|
|
68
68
|
"types": "./dist/types/index.d.ts",
|