@hitachivantara/uikit-react-core 5.64.6 → 5.65.1
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 +8 -5
- package/dist/cjs/ActionsGeneric/ActionsGeneric.cjs +3 -3
- package/dist/esm/Accordion/Accordion.js +8 -5
- package/dist/esm/Accordion/Accordion.js.map +1 -1
- package/dist/esm/ActionsGeneric/ActionsGeneric.js +3 -3
- package/dist/esm/ActionsGeneric/ActionsGeneric.js.map +1 -1
- package/dist/types/index.d.ts +12 -30
- package/package.json +2 -2
|
@@ -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");
|
|
@@ -46,7 +46,6 @@ const HvActionsGeneric = (props) => {
|
|
|
46
46
|
const actionId = setId.setId(idProp, idx, "action", action.id);
|
|
47
47
|
const renderedIcon = React.isValidElement(icon) ? icon : icon?.({ isDisabled: disabled });
|
|
48
48
|
const commonButtonProps = {
|
|
49
|
-
key: actionId || idx,
|
|
50
49
|
id: actionId,
|
|
51
50
|
variant,
|
|
52
51
|
className: classes.button,
|
|
@@ -54,11 +53,12 @@ const HvActionsGeneric = (props) => {
|
|
|
54
53
|
onClick: (event) => handleCallback(event, idProp || "", action),
|
|
55
54
|
...other
|
|
56
55
|
};
|
|
56
|
+
const key = actionId || idx;
|
|
57
57
|
const isIcon = iconOnly ?? iconOnlyProp;
|
|
58
58
|
if (isIcon) {
|
|
59
|
-
return /* @__PURE__ */ jsxRuntime.jsx(IconButton.HvIconButton, { ...commonButtonProps, title: label, children: renderedIcon });
|
|
59
|
+
return /* @__PURE__ */ jsxRuntime.jsx(IconButton.HvIconButton, { ...commonButtonProps, title: label, children: renderedIcon }, key);
|
|
60
60
|
}
|
|
61
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { ...commonButtonProps, startIcon: renderedIcon, children: label });
|
|
61
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { ...commonButtonProps, startIcon: renderedIcon, children: label }, key);
|
|
62
62
|
};
|
|
63
63
|
const renderActionsGrid = () => {
|
|
64
64
|
const actsVisible = actions.slice(0, maxVisibleActions);
|
|
@@ -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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"}
|
|
@@ -45,7 +45,6 @@ const HvActionsGeneric = (props) => {
|
|
|
45
45
|
const actionId = setId(idProp, idx, "action", action.id);
|
|
46
46
|
const renderedIcon = isValidElement(icon) ? icon : icon?.({ isDisabled: disabled });
|
|
47
47
|
const commonButtonProps = {
|
|
48
|
-
key: actionId || idx,
|
|
49
48
|
id: actionId,
|
|
50
49
|
variant,
|
|
51
50
|
className: classes.button,
|
|
@@ -53,11 +52,12 @@ const HvActionsGeneric = (props) => {
|
|
|
53
52
|
onClick: (event) => handleCallback(event, idProp || "", action),
|
|
54
53
|
...other
|
|
55
54
|
};
|
|
55
|
+
const key = actionId || idx;
|
|
56
56
|
const isIcon = iconOnly ?? iconOnlyProp;
|
|
57
57
|
if (isIcon) {
|
|
58
|
-
return /* @__PURE__ */ jsx(HvIconButton, { ...commonButtonProps, title: label, children: renderedIcon });
|
|
58
|
+
return /* @__PURE__ */ jsx(HvIconButton, { ...commonButtonProps, title: label, children: renderedIcon }, key);
|
|
59
59
|
}
|
|
60
|
-
return /* @__PURE__ */ jsx(HvButton, { ...commonButtonProps, startIcon: renderedIcon, children: label });
|
|
60
|
+
return /* @__PURE__ */ jsx(HvButton, { ...commonButtonProps, startIcon: renderedIcon, children: label }, key);
|
|
61
61
|
};
|
|
62
62
|
const renderActionsGrid = () => {
|
|
63
63
|
const actsVisible = actions.slice(0, maxVisibleActions);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionsGeneric.js","sources":["../../../src/ActionsGeneric/ActionsGeneric.tsx"],"sourcesContent":["import { isValidElement } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton, HvButtonProps, HvButtonVariant } from \"../Button\";\nimport { HvDropDownMenu } from \"../DropDownMenu\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvIconButton } from \"../IconButton\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./ActionsGeneric.styles\";\n\nexport { staticClasses as actionsGenericClasses };\n\nexport type HvActionsGenericClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionGeneric {\n /** Action id. */\n id: string;\n /** Action label. */\n label: string;\n /** Action icon. */\n icon?:\n | React.ReactNode\n | ((params: { isDisabled?: boolean }) => React.ReactNode);\n /** Whether the action is disabled or not. */\n disabled?: boolean;\n /** When set to `true`, the button will have the icon has its content and a tooltip with the label will appear when the button is visible and hovered. */\n iconOnly?: boolean;\n}\n\nexport interface HvActionsGenericProps extends HvBaseProps {\n /**\n * The button category for all actions.\n *\n * @deprecated Use `variant` instead.\n */\n category?: HvButtonVariant;\n /** The button variant for all actions. */\n variant?: HvButtonVariant;\n /** Whether the actions should be all disabled. */\n disabled?: boolean;\n /** Whether the actions should be all icon buttons when visible. */\n iconOnly?: boolean;\n /** The renderable content inside the actions slot of the footer, or an array of actions. */\n actions: React.ReactNode | HvActionGeneric[];\n /**\n * The callback function called when an action is triggered, receiving the `action` as parameter.\n *\n * @deprecated Use `onAction` instead.\n * */\n actionsCallback?: (\n event: React.SyntheticEvent,\n id: string,\n action: HvActionGeneric,\n ) => void;\n /** The callback function called when an action is triggered, receiving the `action` as parameter. */\n onAction?: (event: React.SyntheticEvent, action: HvActionGeneric) => void;\n /** The maximum number of visible actions before they're collapsed into a dropdown menu. */\n maxVisibleActions?: number;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvActionsGenericClasses;\n}\n\nexport const HvActionsGeneric = (props: HvActionsGenericProps) => {\n const {\n id: idProp,\n classes: classesProp,\n className,\n category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n variant: variantProp,\n disabled = false,\n actions = [],\n actionsCallback, // TODO - remove in v6\n onAction,\n maxVisibleActions = Infinity,\n iconOnly: iconOnlyProp,\n ...others\n } = useDefaultProps(\"HvActionsGeneric\", props);\n\n const variant = variantProp || category;\n\n const { classes, cx } = useClasses(classesProp);\n\n const handleCallback: HvActionsGenericProps[\"actionsCallback\"] = (\n event,\n id,\n action,\n ) => {\n actionsCallback?.(event, id, action);\n onAction?.(event, action);\n };\n\n if (!Array.isArray(actions)) return isValidElement(actions) ? actions : null;\n\n const renderButton = (action: HvActionGeneric, idx: number) => {\n const {\n disabled: actDisabled,\n id: actId,\n icon,\n label,\n iconOnly,\n ...other\n } = action;\n const actionId = setId(idProp, idx, \"action\", action.id);\n\n const renderedIcon = isValidElement(icon)\n ? icon\n : (icon as Function)?.({ isDisabled: disabled });\n\n const commonButtonProps: HvButtonProps = {\n
|
|
1
|
+
{"version":3,"file":"ActionsGeneric.js","sources":["../../../src/ActionsGeneric/ActionsGeneric.tsx"],"sourcesContent":["import { isValidElement } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton, HvButtonProps, HvButtonVariant } from \"../Button\";\nimport { HvDropDownMenu } from \"../DropDownMenu\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvIconButton } from \"../IconButton\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./ActionsGeneric.styles\";\n\nexport { staticClasses as actionsGenericClasses };\n\nexport type HvActionsGenericClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionGeneric {\n /** Action id. */\n id: string;\n /** Action label. */\n label: string;\n /** Action icon. */\n icon?:\n | React.ReactNode\n | ((params: { isDisabled?: boolean }) => React.ReactNode);\n /** Whether the action is disabled or not. */\n disabled?: boolean;\n /** When set to `true`, the button will have the icon has its content and a tooltip with the label will appear when the button is visible and hovered. */\n iconOnly?: boolean;\n}\n\nexport interface HvActionsGenericProps extends HvBaseProps {\n /**\n * The button category for all actions.\n *\n * @deprecated Use `variant` instead.\n */\n category?: HvButtonVariant;\n /** The button variant for all actions. */\n variant?: HvButtonVariant;\n /** Whether the actions should be all disabled. */\n disabled?: boolean;\n /** Whether the actions should be all icon buttons when visible. */\n iconOnly?: boolean;\n /** The renderable content inside the actions slot of the footer, or an array of actions. */\n actions: React.ReactNode | HvActionGeneric[];\n /**\n * The callback function called when an action is triggered, receiving the `action` as parameter.\n *\n * @deprecated Use `onAction` instead.\n * */\n actionsCallback?: (\n event: React.SyntheticEvent,\n id: string,\n action: HvActionGeneric,\n ) => void;\n /** The callback function called when an action is triggered, receiving the `action` as parameter. */\n onAction?: (event: React.SyntheticEvent, action: HvActionGeneric) => void;\n /** The maximum number of visible actions before they're collapsed into a dropdown menu. */\n maxVisibleActions?: number;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvActionsGenericClasses;\n}\n\nexport const HvActionsGeneric = (props: HvActionsGenericProps) => {\n const {\n id: idProp,\n classes: classesProp,\n className,\n category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n variant: variantProp,\n disabled = false,\n actions = [],\n actionsCallback, // TODO - remove in v6\n onAction,\n maxVisibleActions = Infinity,\n iconOnly: iconOnlyProp,\n ...others\n } = useDefaultProps(\"HvActionsGeneric\", props);\n\n const variant = variantProp || category;\n\n const { classes, cx } = useClasses(classesProp);\n\n const handleCallback: HvActionsGenericProps[\"actionsCallback\"] = (\n event,\n id,\n action,\n ) => {\n actionsCallback?.(event, id, action);\n onAction?.(event, action);\n };\n\n if (!Array.isArray(actions)) return isValidElement(actions) ? actions : null;\n\n const renderButton = (action: HvActionGeneric, idx: number) => {\n const {\n disabled: actDisabled,\n id: actId,\n icon,\n label,\n iconOnly,\n ...other\n } = action;\n const actionId = setId(idProp, idx, \"action\", action.id);\n\n const renderedIcon = isValidElement(icon)\n ? icon\n : (icon as Function)?.({ isDisabled: disabled });\n\n const commonButtonProps: HvButtonProps = {\n id: actionId,\n variant,\n className: classes.button,\n disabled: actDisabled ?? disabled,\n onClick: (event) => handleCallback(event, idProp || \"\", action),\n ...other,\n };\n\n const key = actionId || idx;\n const isIcon = iconOnly ?? iconOnlyProp;\n\n if (isIcon) {\n return (\n <HvIconButton key={key} {...commonButtonProps} title={label}>\n {renderedIcon}\n </HvIconButton>\n );\n }\n\n return (\n <HvButton key={key} {...commonButtonProps} startIcon={renderedIcon}>\n {label}\n </HvButton>\n );\n };\n\n const renderActionsGrid = () => {\n const actsVisible = actions.slice(0, maxVisibleActions);\n const actsDropdown = actions.slice(maxVisibleActions);\n\n const semantic = variant === \"semantic\";\n const iconColor =\n (disabled && \"secondary_60\") || (semantic && \"base_dark\") || undefined;\n\n return (\n <>\n {actsVisible.map((action, idx) => renderButton(action, idx))}\n <HvDropDownMenu\n id={setId(idProp, \"menu\")}\n disabled={disabled}\n variant={variant}\n classes={{\n root: classes.dropDownMenu,\n icon: classes.dropDownMenuButton,\n iconSelected: classes.dropDownMenuButtonSelected,\n }}\n icon={<MoreOptionsVertical color={iconColor} />}\n placement=\"left\"\n onClick={(event, action) =>\n handleCallback(event, idProp || \"\", action as HvActionGeneric)\n }\n dataList={actsDropdown}\n keepOpened={false}\n disablePortal={false}\n />\n </>\n );\n };\n\n const actionOverflow = actions.length > maxVisibleActions;\n\n return (\n <div\n className={cx(\n classes.root,\n { [classes.actionContainer]: actionOverflow },\n className,\n )}\n {...others}\n >\n {actionOverflow\n ? renderActionsGrid()\n : actions.map((action, idx) => renderButton(action, idx))}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAgEa,MAAA,mBAAmB,CAAC,UAAiC;AAC1D,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,WAAW;AAAA;AAAA,IACX,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU,CAAC;AAAA,IACX;AAAA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACD,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,UAAU,eAAe;AAE/B,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,iBAA2D,CAC/D,OACA,IACA,WACG;AACe,sBAAA,OAAO,IAAI,MAAM;AACnC,eAAW,OAAO,MAAM;AAAA,EAAA;AAGtB,MAAA,CAAC,MAAM,QAAQ,OAAO;AAAU,WAAA,eAAe,OAAO,IAAI,UAAU;AAElE,QAAA,eAAe,CAAC,QAAyB,QAAgB;AACvD,UAAA;AAAA,MACJ,UAAU;AAAA,MACV,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AACJ,UAAM,WAAW,MAAM,QAAQ,KAAK,UAAU,OAAO,EAAE;AAEjD,UAAA,eAAe,eAAe,IAAI,IACpC,OACC,OAAoB,EAAE,YAAY,SAAA,CAAU;AAEjD,UAAM,oBAAmC;AAAA,MACvC,IAAI;AAAA,MACJ;AAAA,MACA,WAAW,QAAQ;AAAA,MACnB,UAAU,eAAe;AAAA,MACzB,SAAS,CAAC,UAAU,eAAe,OAAO,UAAU,IAAI,MAAM;AAAA,MAC9D,GAAG;AAAA,IAAA;AAGL,UAAM,MAAM,YAAY;AACxB,UAAM,SAAS,YAAY;AAE3B,QAAI,QAAQ;AACV,iCACG,cAAwB,EAAA,GAAG,mBAAmB,OAAO,OACnD,0BADgB,GAEnB;AAAA,IAEJ;AAEA,+BACG,UAAoB,EAAA,GAAG,mBAAmB,WAAW,cACnD,mBADY,GAEf;AAAA,EAAA;AAIJ,QAAM,oBAAoB,MAAM;AAC9B,UAAM,cAAc,QAAQ,MAAM,GAAG,iBAAiB;AAChD,UAAA,eAAe,QAAQ,MAAM,iBAAiB;AAEpD,UAAM,WAAW,YAAY;AAC7B,UAAM,YACH,YAAY,kBAAoB,YAAY,eAAgB;AAE/D,WAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA,YAAY,IAAI,CAAC,QAAQ,QAAQ,aAAa,QAAQ,GAAG,CAAC;AAAA,MAC3D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,QAAQ,MAAM;AAAA,UACxB;AAAA,UACA;AAAA,UACA,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,YACd,MAAM,QAAQ;AAAA,YACd,cAAc,QAAQ;AAAA,UACxB;AAAA,UACA,MAAM,oBAAC,qBAAoB,EAAA,OAAO,UAAW,CAAA;AAAA,UAC7C,WAAU;AAAA,UACV,SAAS,CAAC,OAAO,WACf,eAAe,OAAO,UAAU,IAAI,MAAyB;AAAA,UAE/D,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,eAAe;AAAA,QAAA;AAAA,MACjB;AAAA,IACF,EAAA,CAAA;AAAA,EAAA;AAIE,QAAA,iBAAiB,QAAQ,SAAS;AAGtC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,eAAe,GAAG,eAAe;AAAA,QAC5C;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAAA,iBACG,kBAAkB,IAClB,QAAQ,IAAI,CAAC,QAAQ,QAAQ,aAAa,QAAQ,GAAG,CAAC;AAAA,IAAA;AAAA,EAAA;AAGhE;"}
|
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.1",
|
|
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": "1502305db73d20325c3997f89e82efb9c7468e26",
|
|
66
66
|
"exports": {
|
|
67
67
|
".": {
|
|
68
68
|
"require": "./dist/cjs/index.cjs",
|