@hitachivantara/uikit-react-core 5.82.0 → 5.82.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.
|
@@ -64,7 +64,6 @@ const HvDropDownMenu = React.forwardRef(function HvDropDownMenu2(props, ref) {
|
|
|
64
64
|
const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
|
|
65
65
|
const [open, setOpen] = useControlled.useControlled(expanded, Boolean(defaultExpanded));
|
|
66
66
|
const id = useUniqueId.useUniqueId(idProp);
|
|
67
|
-
const focusNodes = focusableElementFinder.getPrevNextFocus(setId.setId(id, "icon-button"));
|
|
68
67
|
const listId = setId.setId(id, "list");
|
|
69
68
|
const handleClose = (event) => {
|
|
70
69
|
setOpen(false);
|
|
@@ -72,6 +71,7 @@ const HvDropDownMenu = React.forwardRef(function HvDropDownMenu2(props, ref) {
|
|
|
72
71
|
};
|
|
73
72
|
const handleKeyDown = (event) => {
|
|
74
73
|
if (keyboardUtils.isKey(event, "Tab")) {
|
|
74
|
+
const focusNodes = focusableElementFinder.getPrevNextFocus(setId.setId(id, "icon-button"));
|
|
75
75
|
const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;
|
|
76
76
|
if (node) setTimeout(() => node.focus(), 0);
|
|
77
77
|
handleClose(event);
|
|
@@ -63,7 +63,6 @@ const HvDropDownMenu = forwardRef(function HvDropDownMenu2(props, ref) {
|
|
|
63
63
|
const labels = useLabels(DEFAULT_LABELS, labelsProp);
|
|
64
64
|
const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));
|
|
65
65
|
const id = useUniqueId(idProp);
|
|
66
|
-
const focusNodes = getPrevNextFocus(setId(id, "icon-button"));
|
|
67
66
|
const listId = setId(id, "list");
|
|
68
67
|
const handleClose = (event) => {
|
|
69
68
|
setOpen(false);
|
|
@@ -71,6 +70,7 @@ const HvDropDownMenu = forwardRef(function HvDropDownMenu2(props, ref) {
|
|
|
71
70
|
};
|
|
72
71
|
const handleKeyDown = (event) => {
|
|
73
72
|
if (isKey(event, "Tab")) {
|
|
73
|
+
const focusNodes = getPrevNextFocus(setId(id, "icon-button"));
|
|
74
74
|
const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;
|
|
75
75
|
if (node) setTimeout(() => node.focus(), 0);
|
|
76
76
|
handleClose(event);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropDownMenu.js","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseDropdown } from \"../BaseDropdown\";\nimport { useBaseDropdownContext } from \"../BaseDropdown/context\";\nimport { HvButtonVariant } from \"../Button\";\nimport { HvDropdownButton, HvDropdownButtonProps } from \"../DropdownButton\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvList, HvListProps, HvListValue } from \"../List\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { getPrevNextFocus } from \"../utils/focusableElementFinder\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n dropdownMenu: \"Dropdown menu\",\n};\n\nexport interface HvDropDownMenuProps\n extends HvBaseProps<HTMLDivElement, \"onClick\" | \"onToggle\"> {\n /** Icon. */\n icon?: React.ReactElement;\n /**\n * A list containing the elements to be rendered.\n *\n * - label: The label of the element to be rendered.\n * - selected: The selection state of the element.\n * - disabled: The disabled state of the element.\n * - icon: The icon node to be rendered on the left.\n * - showNavIcon: If true renders the navigation icon on the right.\n */\n dataList: HvListValue[];\n /** Placement of the dropdown. */\n placement?: \"left\" | \"right\";\n /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n disablePortal?: boolean;\n /** Function executed on toggle of the dropdown. Should receive the open status. */\n onToggle?: (\n event:\n | Event\n | React.KeyboardEvent<HTMLUListElement>\n | React.ChangeEvent<HTMLInputElement>\n | React.MouseEvent<HTMLLIElement>,\n open: boolean,\n ) => void;\n /** Function executed in each onClick. Should received the clicked element. */\n onClick?: (\n event:\n | React.ChangeEvent<HTMLInputElement>\n | React.MouseEvent<HTMLLIElement>,\n value: HvListValue,\n ) => void;\n /** Keep the Dropdown Menu opened after clicking one option */\n keepOpened?: boolean;\n /** Defines if the component is disabled. */\n disabled?: boolean;\n /** If true it should be displayed open. */\n expanded?: boolean;\n /** When uncontrolled, defines the initial expanded state. */\n defaultExpanded?: boolean;\n /**\n * The variant to be used in the header.\n * @deprecated Use `variant` instead\n */\n category?: HvButtonVariant;\n /** The variant to be used in the header. */\n variant?: HvButtonVariant;\n /** Button size. */\n size?: HvSize;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDropDownMenuClasses;\n /** An object containing all the labels. */\n labels?: Partial<typeof DEFAULT_LABELS>;\n}\n\nconst HeaderComponent = forwardRef<HTMLButtonElement, HvDropdownButtonProps>(\n (props, ref) => {\n const { open, icon, disabled, ...others } = props;\n const { popperPlacement } = useBaseDropdownContext();\n\n return (\n <HvDropdownButton\n icon\n ref={ref}\n open={open}\n disabled={disabled}\n aria-expanded={open}\n aria-haspopup=\"menu\"\n placement={popperPlacement}\n {...others}\n >\n {icon || <MoreOptionsVertical role=\"presentation\" />}\n </HvDropdownButton>\n );\n },\n);\n\n/**\n * A dropdown menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = forwardRef<\n React.ComponentRef<typeof HvBaseDropdown>,\n HvDropDownMenuProps\n>(function HvDropDownMenu(props, ref) {\n const {\n id: idProp,\n classes: classesProp,\n className,\n icon,\n placement = \"right\",\n dataList,\n disablePortal = false,\n onToggle,\n onClick,\n keepOpened = true,\n disabled = false,\n expanded,\n defaultExpanded = false,\n category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n variant,\n size = \"md\",\n labels: labelsProp,\n ...others\n } = useDefaultProps(\"HvDropDownMenu\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n const id = useUniqueId(idProp);\n
|
|
1
|
+
{"version":3,"file":"DropDownMenu.js","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseDropdown } from \"../BaseDropdown\";\nimport { useBaseDropdownContext } from \"../BaseDropdown/context\";\nimport { HvButtonVariant } from \"../Button\";\nimport { HvDropdownButton, HvDropdownButtonProps } from \"../DropdownButton\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvList, HvListProps, HvListValue } from \"../List\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { getPrevNextFocus } from \"../utils/focusableElementFinder\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n dropdownMenu: \"Dropdown menu\",\n};\n\nexport interface HvDropDownMenuProps\n extends HvBaseProps<HTMLDivElement, \"onClick\" | \"onToggle\"> {\n /** Icon. */\n icon?: React.ReactElement;\n /**\n * A list containing the elements to be rendered.\n *\n * - label: The label of the element to be rendered.\n * - selected: The selection state of the element.\n * - disabled: The disabled state of the element.\n * - icon: The icon node to be rendered on the left.\n * - showNavIcon: If true renders the navigation icon on the right.\n */\n dataList: HvListValue[];\n /** Placement of the dropdown. */\n placement?: \"left\" | \"right\";\n /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n disablePortal?: boolean;\n /** Function executed on toggle of the dropdown. Should receive the open status. */\n onToggle?: (\n event:\n | Event\n | React.KeyboardEvent<HTMLUListElement>\n | React.ChangeEvent<HTMLInputElement>\n | React.MouseEvent<HTMLLIElement>,\n open: boolean,\n ) => void;\n /** Function executed in each onClick. Should received the clicked element. */\n onClick?: (\n event:\n | React.ChangeEvent<HTMLInputElement>\n | React.MouseEvent<HTMLLIElement>,\n value: HvListValue,\n ) => void;\n /** Keep the Dropdown Menu opened after clicking one option */\n keepOpened?: boolean;\n /** Defines if the component is disabled. */\n disabled?: boolean;\n /** If true it should be displayed open. */\n expanded?: boolean;\n /** When uncontrolled, defines the initial expanded state. */\n defaultExpanded?: boolean;\n /**\n * The variant to be used in the header.\n * @deprecated Use `variant` instead\n */\n category?: HvButtonVariant;\n /** The variant to be used in the header. */\n variant?: HvButtonVariant;\n /** Button size. */\n size?: HvSize;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDropDownMenuClasses;\n /** An object containing all the labels. */\n labels?: Partial<typeof DEFAULT_LABELS>;\n}\n\nconst HeaderComponent = forwardRef<HTMLButtonElement, HvDropdownButtonProps>(\n (props, ref) => {\n const { open, icon, disabled, ...others } = props;\n const { popperPlacement } = useBaseDropdownContext();\n\n return (\n <HvDropdownButton\n icon\n ref={ref}\n open={open}\n disabled={disabled}\n aria-expanded={open}\n aria-haspopup=\"menu\"\n placement={popperPlacement}\n {...others}\n >\n {icon || <MoreOptionsVertical role=\"presentation\" />}\n </HvDropdownButton>\n );\n },\n);\n\n/**\n * A dropdown menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = forwardRef<\n React.ComponentRef<typeof HvBaseDropdown>,\n HvDropDownMenuProps\n>(function HvDropDownMenu(props, ref) {\n const {\n id: idProp,\n classes: classesProp,\n className,\n icon,\n placement = \"right\",\n dataList,\n disablePortal = false,\n onToggle,\n onClick,\n keepOpened = true,\n disabled = false,\n expanded,\n defaultExpanded = false,\n category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n variant,\n size = \"md\",\n labels: labelsProp,\n ...others\n } = useDefaultProps(\"HvDropDownMenu\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n const id = useUniqueId(idProp);\n\n const listId = setId(id, \"list\");\n\n const handleClose = (\n event:\n | React.KeyboardEvent<HTMLUListElement>\n | React.ChangeEvent<HTMLInputElement>\n | React.MouseEvent<HTMLLIElement>,\n ) => {\n // this will only run if uncontrolled\n setOpen(false);\n onToggle?.(event, false);\n };\n\n // If the ESCAPE key is pressed inside the list, the close handler must be called.\n const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n if (isKey(event, \"Tab\")) {\n const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n if (node) setTimeout(() => node.focus(), 0);\n handleClose(event);\n }\n event.preventDefault();\n };\n\n const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n\n return (\n <HvBaseDropdown\n ref={ref}\n id={id}\n className={cx(classes.container, classes.icon, className, {\n [classes.iconSelected]: open,\n })}\n classes={{\n root: classes.root,\n container: classes.baseContainer,\n panel: classes.menuListRoot,\n }}\n expanded={open && !disabled}\n headerComponent={HeaderComponent}\n // @ts-expect-error infer HeaderComponent typings\n size={size}\n variant={variant ?? category}\n open={open}\n aria-label={labels.dropdownMenu}\n icon={icon}\n placement={placement}\n variableWidth\n disablePortal={disablePortal}\n onToggle={(e, s) => {\n // this will only run if uncontrolled\n setOpen(s);\n onToggle?.(e, s);\n }}\n disabled={disabled}\n onContainerCreation={(containerEl) => {\n containerEl?.getElementsByTagName(\"li\")[0]?.focus();\n }}\n {...others}\n >\n <HvList\n id={listId}\n values={dataList}\n selectable={false}\n condensed={condensed}\n onClick={(event, item) => {\n if (!keepOpened) handleClose(event);\n onClick?.(event, item);\n }}\n onKeyDown={handleKeyDown}\n classes={{\n root: classes.menuList,\n }}\n />\n </HvBaseDropdown>\n );\n});\n"],"names":["HvDropDownMenu"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-core",
|
|
3
|
-
"version": "5.82.
|
|
3
|
+
"version": "5.82.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Core React components for the NEXT Design System.",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"@emotion/serialize": "^1.1.2",
|
|
35
35
|
"@hitachivantara/uikit-react-icons": "^5.13.0",
|
|
36
36
|
"@hitachivantara/uikit-react-shared": "^5.3.16",
|
|
37
|
-
"@hitachivantara/uikit-react-utils": "^0.2.
|
|
37
|
+
"@hitachivantara/uikit-react-utils": "^0.2.17",
|
|
38
38
|
"@hitachivantara/uikit-styles": "^5.40.2",
|
|
39
39
|
"@internationalized/date": "^3.2.0",
|
|
40
40
|
"@mui/base": "^5.0.0-beta.40",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"access": "public",
|
|
63
63
|
"directory": "package"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "682ed1b9811e2a937a1c3fa0423d9ed2a544cb95",
|
|
66
66
|
"exports": {
|
|
67
67
|
".": {
|
|
68
68
|
"types": "./dist/types/index.d.ts",
|