@hitachivantara/uikit-react-core 5.64.6 → 5.65.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.
|
@@ -23,6 +23,7 @@ const HvAccordion = (props) => {
|
|
|
23
23
|
defaultExpanded = false,
|
|
24
24
|
containerProps,
|
|
25
25
|
labelVariant = "label",
|
|
26
|
+
disableEventHandling,
|
|
26
27
|
...others
|
|
27
28
|
} = useDefaultProps.useDefaultProps("HvAccordion", props);
|
|
28
29
|
const id = useUniqueId.useUniqueId(idProp);
|
|
@@ -42,10 +43,12 @@ const HvAccordion = (props) => {
|
|
|
42
43
|
const handleClick = React.useCallback(
|
|
43
44
|
(event) => {
|
|
44
45
|
handleAction(event);
|
|
45
|
-
|
|
46
|
-
|
|
46
|
+
if (!disableEventHandling) {
|
|
47
|
+
event.preventDefault();
|
|
48
|
+
event.stopPropagation();
|
|
49
|
+
}
|
|
47
50
|
},
|
|
48
|
-
[handleAction]
|
|
51
|
+
[disableEventHandling, handleAction]
|
|
49
52
|
);
|
|
50
53
|
const handleKeyDown = React.useCallback(
|
|
51
54
|
(event) => {
|
|
@@ -62,12 +65,12 @@ const HvAccordion = (props) => {
|
|
|
62
65
|
default:
|
|
63
66
|
return;
|
|
64
67
|
}
|
|
65
|
-
if (isEventHandled) {
|
|
68
|
+
if (isEventHandled && !disableEventHandling) {
|
|
66
69
|
event.preventDefault();
|
|
67
70
|
event.stopPropagation();
|
|
68
71
|
}
|
|
69
72
|
},
|
|
70
|
-
[handleAction]
|
|
73
|
+
[disableEventHandling, handleAction]
|
|
71
74
|
);
|
|
72
75
|
const accordionHeaderId = setId.setId(id, "button");
|
|
73
76
|
const accordionContainer = setId.setId(id, "container");
|
|
@@ -22,6 +22,7 @@ const HvAccordion = (props) => {
|
|
|
22
22
|
defaultExpanded = false,
|
|
23
23
|
containerProps,
|
|
24
24
|
labelVariant = "label",
|
|
25
|
+
disableEventHandling,
|
|
25
26
|
...others
|
|
26
27
|
} = useDefaultProps("HvAccordion", props);
|
|
27
28
|
const id = useUniqueId(idProp);
|
|
@@ -41,10 +42,12 @@ const HvAccordion = (props) => {
|
|
|
41
42
|
const handleClick = useCallback(
|
|
42
43
|
(event) => {
|
|
43
44
|
handleAction(event);
|
|
44
|
-
|
|
45
|
-
|
|
45
|
+
if (!disableEventHandling) {
|
|
46
|
+
event.preventDefault();
|
|
47
|
+
event.stopPropagation();
|
|
48
|
+
}
|
|
46
49
|
},
|
|
47
|
-
[handleAction]
|
|
50
|
+
[disableEventHandling, handleAction]
|
|
48
51
|
);
|
|
49
52
|
const handleKeyDown = useCallback(
|
|
50
53
|
(event) => {
|
|
@@ -61,12 +64,12 @@ const HvAccordion = (props) => {
|
|
|
61
64
|
default:
|
|
62
65
|
return;
|
|
63
66
|
}
|
|
64
|
-
if (isEventHandled) {
|
|
67
|
+
if (isEventHandled && !disableEventHandling) {
|
|
65
68
|
event.preventDefault();
|
|
66
69
|
event.stopPropagation();
|
|
67
70
|
}
|
|
68
71
|
},
|
|
69
|
-
[handleAction]
|
|
72
|
+
[disableEventHandling, handleAction]
|
|
70
73
|
);
|
|
71
74
|
const accordionHeaderId = setId(id, "button");
|
|
72
75
|
const accordionContainer = setId(id, "container");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sources":["../../../src/Accordion/Accordion.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography, HvTypographyVariants } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Accordion.styles\";\n\nexport { staticClasses as accordionClasses };\n\nexport type HvAccordionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAccordionProps\n extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n
|
|
1
|
+
{"version":3,"file":"Accordion.js","sources":["../../../src/Accordion/Accordion.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography, HvTypographyVariants } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Accordion.styles\";\n\nexport { staticClasses as accordionClasses };\n\nexport type HvAccordionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAccordionProps\n extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n /** Content to be rendered. */\n children: React.ReactNode;\n /** The accordion label button. */\n label?: string;\n /** The function that will be executed whenever the accordion toggles. It will receive the state of the accordion. */\n onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n /** Whether the accordion is open or not. If this property is defined the accordion must be fully controlled. */\n expanded?: boolean;\n /** When uncontrolled, defines the initial expanded state. */\n defaultExpanded?: boolean;\n /** An object containing props to be passed onto container holding the accordion children. */\n containerProps?: React.HTMLAttributes<HTMLDivElement>;\n /** Heading level to apply to accordion button. If ´undefined´ the button won't have a header wrapper. */\n headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n /** Whether the accordion is disabled. */\n disabled?: boolean;\n /** Typography variant for the label. */\n labelVariant?: HvTypographyVariants;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvAccordionClasses;\n /** Whether to disable the internal usage of `preventDefault` and `stopPropagation` when the `onChange` event is triggered. */\n disableEventHandling?: boolean; // TODO - remove in v6 as this should be the default behavior: `preventDefault` and `stopPropagation` shouldn't be triggered internally\n}\n\n/**\n * A accordion is a design element that expands in place to expose hidden information.\n */\nexport const HvAccordion = (props: HvAccordionProps) => {\n const {\n id: idProp,\n className,\n classes: classesProp,\n disabled = false,\n label,\n onChange,\n children,\n expanded,\n headingLevel,\n defaultExpanded = false,\n containerProps,\n labelVariant = \"label\",\n disableEventHandling,\n ...others\n } = useDefaultProps(\"HvAccordion\", props);\n\n const id = useUniqueId(idProp);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n const handleAction = useCallback(\n (event: React.SyntheticEvent) => {\n if (!disabled) {\n onChange?.(event, isOpen);\n setIsOpen(!isOpen);\n return true;\n }\n return false;\n },\n [disabled, onChange, isOpen, setIsOpen],\n );\n\n const handleClick = useCallback(\n (event: React.SyntheticEvent) => {\n handleAction(event);\n if (!disableEventHandling) {\n event.preventDefault();\n event.stopPropagation();\n }\n },\n [disableEventHandling, handleAction],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n let isEventHandled = false;\n const { key } = event;\n\n if (\n event.altKey ||\n event.ctrlKey ||\n event.metaKey ||\n event.currentTarget !== event.target\n ) {\n return;\n }\n switch (key) {\n case \"Enter\":\n case \" \":\n isEventHandled = handleAction(event);\n break;\n default:\n return;\n }\n\n if (isEventHandled && !disableEventHandling) {\n event.preventDefault();\n event.stopPropagation();\n }\n },\n [disableEventHandling, handleAction],\n );\n\n const accordionHeaderId = setId(id, \"button\");\n const accordionContainer = setId(id, \"container\");\n const accordionHeader = useMemo(() => {\n const color = disabled ? \"secondary_60\" : undefined;\n\n const accordionButton = (\n <HvTypography\n id={accordionHeaderId}\n component=\"div\"\n role=\"button\"\n className={cx(classes.label, { [classes.disabled]: disabled })}\n disabled={disabled}\n tabIndex={0}\n onKeyDown={handleKeyDown}\n onClick={handleClick}\n variant={labelVariant}\n aria-expanded={isOpen}\n aria-disabled={disabled}\n >\n {isOpen ? <DropUpXS color={color} /> : <DropDownXS color={color} />}\n {label}\n </HvTypography>\n );\n\n return headingLevel === undefined ? (\n accordionButton\n ) : (\n <HvTypography component={`h${headingLevel}`} variant={labelVariant}>\n {accordionButton}\n </HvTypography>\n );\n }, [\n cx,\n classes,\n handleClick,\n handleKeyDown,\n label,\n accordionHeaderId,\n disabled,\n headingLevel,\n isOpen,\n labelVariant,\n ]);\n\n return (\n <div id={id} className={cx(classes.root, className)} {...others}>\n {accordionHeader}\n <div\n id={accordionContainer}\n role=\"region\"\n aria-labelledby={accordionHeaderId}\n className={cx(classes.container, { [classes.hidden]: !isOpen })}\n hidden={!isOpen}\n {...containerProps}\n >\n {children}\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1130,46 +1130,28 @@ export declare const HvAccordion: (props: HvAccordionProps) => JSX_3.Element;
|
|
|
1130
1130
|
export declare type HvAccordionClasses = ExtractNames<typeof useClasses_19>;
|
|
1131
1131
|
|
|
1132
1132
|
export declare interface HvAccordionProps extends HvBaseProps<HTMLDivElement, "onChange" | "children"> {
|
|
1133
|
-
/**
|
|
1134
|
-
* Content to be rendered
|
|
1135
|
-
*/
|
|
1133
|
+
/** Content to be rendered. */
|
|
1136
1134
|
children: React.ReactNode;
|
|
1137
|
-
/**
|
|
1138
|
-
* The accordion label button.
|
|
1139
|
-
*/
|
|
1135
|
+
/** The accordion label button. */
|
|
1140
1136
|
label?: string;
|
|
1141
|
-
/**
|
|
1142
|
-
* The function that will be executed whenever the accordion toggles it will receive the state of the accordion
|
|
1143
|
-
*/
|
|
1137
|
+
/** The function that will be executed whenever the accordion toggles. It will receive the state of the accordion. */
|
|
1144
1138
|
onChange?: (event: React.SyntheticEvent, value: boolean) => void;
|
|
1145
|
-
/**
|
|
1146
|
-
* Whether the accordion is open or not, if this property is defined the accordion must be fully controlled.
|
|
1147
|
-
*/
|
|
1139
|
+
/** Whether the accordion is open or not. If this property is defined the accordion must be fully controlled. */
|
|
1148
1140
|
expanded?: boolean;
|
|
1149
|
-
/**
|
|
1150
|
-
* When uncontrolled, defines the initial expanded state.
|
|
1151
|
-
*/
|
|
1141
|
+
/** When uncontrolled, defines the initial expanded state. */
|
|
1152
1142
|
defaultExpanded?: boolean;
|
|
1153
|
-
/**
|
|
1154
|
-
* An object containing props to be passed onto container holding the accordion children.
|
|
1155
|
-
*/
|
|
1143
|
+
/** An object containing props to be passed onto container holding the accordion children. */
|
|
1156
1144
|
containerProps?: React.HTMLAttributes<HTMLDivElement>;
|
|
1157
|
-
/**
|
|
1158
|
-
* Heading Level to apply to accordion button if ´undefined´ the button won't have a header wrapper.
|
|
1159
|
-
*/
|
|
1145
|
+
/** Heading level to apply to accordion button. If ´undefined´ the button won't have a header wrapper. */
|
|
1160
1146
|
headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
|
|
1161
|
-
/**
|
|
1162
|
-
* Is the accordion disabled.
|
|
1163
|
-
*/
|
|
1147
|
+
/** Whether the accordion is disabled. */
|
|
1164
1148
|
disabled?: boolean;
|
|
1165
|
-
/**
|
|
1166
|
-
* Typography variant for the label.
|
|
1167
|
-
*/
|
|
1149
|
+
/** Typography variant for the label. */
|
|
1168
1150
|
labelVariant?: HvTypographyVariants;
|
|
1169
|
-
/**
|
|
1170
|
-
* A Jss Object used to override or extend the styles applied.
|
|
1171
|
-
*/
|
|
1151
|
+
/** A Jss Object used to override or extend the styles applied. */
|
|
1172
1152
|
classes?: HvAccordionClasses;
|
|
1153
|
+
/** Whether to disable the internal usage of `preventDefault` and `stopPropagation` when the `onChange` event is triggered. */
|
|
1154
|
+
disableEventHandling?: boolean;
|
|
1173
1155
|
}
|
|
1174
1156
|
|
|
1175
1157
|
export declare const HvActionBar: (props: HvActionBarProps) => JSX_3.Element;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-core",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.65.0",
|
|
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": "cb05193961d5b75c15c779f8f573e0e5f07becee",
|
|
66
66
|
"exports": {
|
|
67
67
|
".": {
|
|
68
68
|
"require": "./dist/cjs/index.cjs",
|