@hitachivantara/uikit-react-core 5.66.12 → 5.66.14
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/ActionsGeneric/ActionsGeneric.cjs +1 -2
- package/dist/cjs/AvatarGroup/AvatarGroup.cjs +1 -2
- package/dist/cjs/BaseDropdown/BaseDropdown.cjs +2 -4
- package/dist/cjs/Box/Box.cjs +13 -14
- package/dist/cjs/Button/Button.cjs +3 -6
- package/dist/cjs/Calendar/CalendarHeader/CalendarHeader.cjs +2 -4
- package/dist/cjs/Calendar/SingleCalendar/CalendarCell.cjs +1 -2
- package/dist/cjs/Calendar/SingleCalendar/SingleCalendar.cjs +4 -8
- package/dist/cjs/Calendar/utils.cjs +4 -8
- package/dist/cjs/Carousel/Carousel.cjs +26 -11
- package/dist/cjs/Carousel/CarouselControls.cjs +9 -2
- package/dist/cjs/ColorPicker/Fields/Fields.cjs +4 -8
- package/dist/cjs/DatePicker/DatePicker.cjs +6 -12
- package/dist/cjs/Dialog/Dialog.cjs +2 -4
- package/dist/cjs/Drawer/Drawer.cjs +1 -2
- package/dist/cjs/DropDownMenu/DropDownMenu.cjs +2 -4
- package/dist/cjs/Dropdown/Dropdown.cjs +1 -2
- package/dist/cjs/Dropdown/List/List.cjs +2 -4
- package/dist/cjs/Dropdown/utils.cjs +1 -2
- package/dist/cjs/FileUploader/DropZone/DropZone.cjs +3 -6
- package/dist/cjs/FileUploader/FileList/FileList.cjs +1 -2
- package/dist/cjs/FilterGroup/FilterContent/FilterContent.cjs +2 -4
- package/dist/cjs/Focus/Focus.cjs +7 -14
- package/dist/cjs/Forms/FormElement/utils/FormUtils.cjs +6 -4
- package/dist/cjs/GlobalActions/GlobalActions.styles.cjs +1 -2
- package/dist/cjs/Grid/Grid.cjs +7 -4
- package/dist/cjs/Header/Navigation/useSelectionPath.cjs +1 -2
- package/dist/cjs/Input/Input.cjs +2 -4
- package/dist/cjs/Link/Link.cjs +1 -2
- package/dist/cjs/List/List.cjs +12 -15
- package/dist/cjs/List/utils.cjs +1 -2
- package/dist/cjs/ListContainer/ListContainer.cjs +1 -2
- package/dist/cjs/ListContainer/ListContext/ListContext.cjs +1 -2
- package/dist/cjs/ListContainer/ListItem/ListItem.cjs +3 -6
- package/dist/cjs/LoadingContainer/LoadingContainer.cjs +2 -1
- package/dist/cjs/Pagination/Select.cjs +1 -2
- package/dist/cjs/QueryBuilder/Rule/Attribute/Attribute.cjs +1 -2
- package/dist/cjs/QueryBuilder/Rule/Value/NumericValue/NumericValue.cjs +2 -2
- package/dist/cjs/QueryBuilder/utils/reducer.cjs +1 -2
- package/dist/cjs/ScrollTo/Horizontal/ScrollToHorizontal.cjs +2 -2
- package/dist/cjs/ScrollTo/Vertical/ScrollToVertical.cjs +2 -2
- package/dist/cjs/Select/Select.cjs +2 -2
- package/dist/cjs/Skeleton/Skeleton.cjs +1 -2
- package/dist/cjs/Slider/Slider.cjs +1 -2
- package/dist/cjs/Slider/SliderInput/SliderInput.cjs +1 -2
- package/dist/cjs/Slider/utils.cjs +4 -8
- package/dist/cjs/Stack/Stack.cjs +1 -2
- package/dist/cjs/Table/TableContext.cjs +1 -2
- package/dist/cjs/Table/TableSectionContext.cjs +1 -2
- package/dist/cjs/Table/hooks/useBulkActions.cjs +1 -2
- package/dist/cjs/Table/hooks/useRowExpand.cjs +5 -1
- package/dist/cjs/Table/utils/fallbacks.cjs +1 -2
- package/dist/cjs/Tag/Tag.cjs +2 -4
- package/dist/cjs/TagsInput/TagsInput.cjs +2 -3
- package/dist/cjs/TextArea/TextArea.cjs +1 -2
- package/dist/cjs/TimeAgo/TimeAgo.cjs +1 -2
- package/dist/cjs/TimeAgo/useTimeout.cjs +1 -2
- package/dist/cjs/TimePicker/Placeholder.cjs +3 -6
- package/dist/cjs/TimePicker/TimePicker.cjs +3 -6
- package/dist/cjs/TreeView/TreeItem/TreeItem.cjs +2 -1
- package/dist/cjs/TreeView/TreeItem/useHvTreeItem.cjs +3 -6
- package/dist/cjs/TreeView/internals/DescendantProvider.cjs +1 -2
- package/dist/cjs/TreeView/internals/hooks/plugins/useTreeViewExpansion.cjs +1 -2
- package/dist/cjs/TreeView/internals/hooks/plugins/useTreeViewFocus.cjs +1 -2
- package/dist/cjs/TreeView/internals/hooks/plugins/useTreeViewKeyboardNavigation.cjs +1 -2
- package/dist/cjs/TreeView/internals/hooks/plugins/useTreeViewNodes.cjs +1 -2
- package/dist/cjs/TreeView/internals/hooks/plugins/useTreeViewSelection.cjs +1 -2
- package/dist/cjs/TreeView/internals/hooks/useInstanceEventHandler.cjs +1 -2
- package/dist/cjs/TreeView/internals/hooks/useTreeView.cjs +1 -2
- package/dist/cjs/TreeView/internals/hooks/useTreeViewInstanceEvents.cjs +1 -2
- package/dist/cjs/TreeView/internals/hooks/useTreeViewModels.cjs +1 -2
- package/dist/cjs/Typography/utils.cjs +1 -2
- package/dist/cjs/VerticalNavigation/Header/Header.cjs +1 -2
- package/dist/cjs/VerticalNavigation/Navigation/Navigation.cjs +2 -4
- package/dist/cjs/VerticalNavigation/TreeView/TreeView.cjs +3 -6
- package/dist/cjs/VerticalNavigation/TreeView/TreeViewItem.cjs +4 -8
- package/dist/cjs/hooks/useForkRef.cjs +1 -2
- package/dist/cjs/hooks/useUniqueId.cjs +2 -4
- package/dist/cjs/providers/Provider.cjs +2 -4
- package/dist/cjs/utils/classes.cjs +6 -3
- package/dist/cjs/utils/deepMerge.cjs +2 -1
- package/dist/cjs/utils/helpers.cjs +1 -2
- package/dist/cjs/utils/theme.cjs +1 -2
- package/dist/cjs/utils/useSavedState.cjs +1 -2
- package/dist/esm/ActionsGeneric/ActionsGeneric.js +1 -2
- package/dist/esm/ActionsGeneric/ActionsGeneric.js.map +1 -1
- package/dist/esm/AvatarGroup/AvatarGroup.js +1 -2
- package/dist/esm/AvatarGroup/AvatarGroup.js.map +1 -1
- package/dist/esm/BaseDropdown/BaseDropdown.js +2 -4
- package/dist/esm/BaseDropdown/BaseDropdown.js.map +1 -1
- package/dist/esm/Box/Box.js +13 -14
- package/dist/esm/Box/Box.js.map +1 -1
- package/dist/esm/Button/Button.js +3 -6
- package/dist/esm/Button/Button.js.map +1 -1
- package/dist/esm/Button/Button.styles.js.map +1 -1
- package/dist/esm/Calendar/CalendarHeader/CalendarHeader.js +2 -4
- package/dist/esm/Calendar/CalendarHeader/CalendarHeader.js.map +1 -1
- package/dist/esm/Calendar/SingleCalendar/CalendarCell.js +1 -2
- package/dist/esm/Calendar/SingleCalendar/CalendarCell.js.map +1 -1
- package/dist/esm/Calendar/SingleCalendar/SingleCalendar.js +4 -8
- package/dist/esm/Calendar/SingleCalendar/SingleCalendar.js.map +1 -1
- package/dist/esm/Calendar/utils.js +4 -8
- package/dist/esm/Calendar/utils.js.map +1 -1
- package/dist/esm/Card/Card.js.map +1 -1
- package/dist/esm/Carousel/Carousel.js +26 -11
- package/dist/esm/Carousel/Carousel.js.map +1 -1
- package/dist/esm/Carousel/CarouselControls.js +9 -2
- package/dist/esm/Carousel/CarouselControls.js.map +1 -1
- package/dist/esm/ColorPicker/Fields/Fields.js +3 -6
- package/dist/esm/ColorPicker/Fields/Fields.js.map +1 -1
- package/dist/esm/DatePicker/DatePicker.js +6 -12
- package/dist/esm/DatePicker/DatePicker.js.map +1 -1
- package/dist/esm/Dialog/Dialog.js +2 -4
- package/dist/esm/Dialog/Dialog.js.map +1 -1
- package/dist/esm/Drawer/Drawer.js +1 -2
- package/dist/esm/Drawer/Drawer.js.map +1 -1
- package/dist/esm/DropDownMenu/DropDownMenu.js +2 -4
- package/dist/esm/DropDownMenu/DropDownMenu.js.map +1 -1
- package/dist/esm/Dropdown/Dropdown.js +1 -2
- package/dist/esm/Dropdown/Dropdown.js.map +1 -1
- package/dist/esm/Dropdown/List/List.js +2 -4
- package/dist/esm/Dropdown/List/List.js.map +1 -1
- package/dist/esm/Dropdown/utils.js +1 -2
- package/dist/esm/Dropdown/utils.js.map +1 -1
- package/dist/esm/FileUploader/DropZone/DropZone.js +3 -6
- package/dist/esm/FileUploader/DropZone/DropZone.js.map +1 -1
- package/dist/esm/FileUploader/FileList/FileList.js +1 -2
- package/dist/esm/FileUploader/FileList/FileList.js.map +1 -1
- package/dist/esm/FilterGroup/FilterContent/FilterContent.js +2 -4
- package/dist/esm/FilterGroup/FilterContent/FilterContent.js.map +1 -1
- package/dist/esm/Focus/Focus.js +7 -14
- package/dist/esm/Focus/Focus.js.map +1 -1
- package/dist/esm/Forms/FormElement/FormElement.js.map +1 -1
- package/dist/esm/Forms/FormElement/context/FormElementContext.js.map +1 -1
- package/dist/esm/Forms/FormElement/context/FormElementDescriptorsContext.js.map +1 -1
- package/dist/esm/Forms/FormElement/utils/FormUtils.js +6 -4
- package/dist/esm/Forms/FormElement/utils/FormUtils.js.map +1 -1
- package/dist/esm/GlobalActions/GlobalActions.styles.js +1 -2
- package/dist/esm/GlobalActions/GlobalActions.styles.js.map +1 -1
- package/dist/esm/Grid/Grid.js +7 -4
- package/dist/esm/Grid/Grid.js.map +1 -1
- package/dist/esm/Header/Navigation/useSelectionPath.js +1 -2
- package/dist/esm/Header/Navigation/useSelectionPath.js.map +1 -1
- package/dist/esm/Input/Input.js +2 -4
- package/dist/esm/Input/Input.js.map +1 -1
- package/dist/esm/Link/Link.js +1 -2
- package/dist/esm/Link/Link.js.map +1 -1
- package/dist/esm/List/List.js +12 -15
- package/dist/esm/List/List.js.map +1 -1
- package/dist/esm/List/utils.js +1 -2
- package/dist/esm/List/utils.js.map +1 -1
- package/dist/esm/ListContainer/ListContainer.js +4 -5
- package/dist/esm/ListContainer/ListContainer.js.map +1 -1
- package/dist/esm/ListContainer/ListContext/ListContext.js +1 -2
- package/dist/esm/ListContainer/ListContext/ListContext.js.map +1 -1
- package/dist/esm/ListContainer/ListItem/ListItem.js +5 -8
- package/dist/esm/ListContainer/ListItem/ListItem.js.map +1 -1
- package/dist/esm/Loading/Loading.js.map +1 -1
- package/dist/esm/LoadingContainer/LoadingContainer.js +2 -1
- package/dist/esm/LoadingContainer/LoadingContainer.js.map +1 -1
- package/dist/esm/MultiButton/MultiButton.js.map +1 -1
- package/dist/esm/Pagination/Select.js +1 -2
- package/dist/esm/Pagination/Select.js.map +1 -1
- package/dist/esm/QueryBuilder/Rule/Attribute/Attribute.js +1 -2
- package/dist/esm/QueryBuilder/Rule/Attribute/Attribute.js.map +1 -1
- package/dist/esm/QueryBuilder/Rule/Operator/Operator.js.map +1 -1
- package/dist/esm/QueryBuilder/Rule/Value/NumericValue/NumericValue.js +2 -2
- package/dist/esm/QueryBuilder/Rule/Value/NumericValue/NumericValue.js.map +1 -1
- package/dist/esm/QueryBuilder/utils/index.js.map +1 -1
- package/dist/esm/QueryBuilder/utils/reducer.js +1 -2
- package/dist/esm/QueryBuilder/utils/reducer.js.map +1 -1
- package/dist/esm/ScrollTo/Horizontal/ScrollToHorizontal.js +2 -2
- package/dist/esm/ScrollTo/Horizontal/ScrollToHorizontal.js.map +1 -1
- package/dist/esm/ScrollTo/Vertical/ScrollToVertical.js +2 -2
- package/dist/esm/ScrollTo/Vertical/ScrollToVertical.js.map +1 -1
- package/dist/esm/Section/Section.js.map +1 -1
- package/dist/esm/Select/Select.js +2 -2
- package/dist/esm/Select/Select.js.map +1 -1
- package/dist/esm/SimpleGrid/SimpleGrid.styles.js.map +1 -1
- package/dist/esm/Skeleton/Skeleton.js +1 -2
- package/dist/esm/Skeleton/Skeleton.js.map +1 -1
- package/dist/esm/Slider/Slider.js +1 -2
- package/dist/esm/Slider/Slider.js.map +1 -1
- package/dist/esm/Slider/SliderInput/SliderInput.js +1 -2
- package/dist/esm/Slider/SliderInput/SliderInput.js.map +1 -1
- package/dist/esm/Slider/utils.js +4 -8
- package/dist/esm/Slider/utils.js.map +1 -1
- package/dist/esm/Snackbar/Snackbar.js.map +1 -1
- package/dist/esm/Stack/Stack.js +1 -2
- package/dist/esm/Stack/Stack.js.map +1 -1
- package/dist/esm/Table/TableCell/TableCell.js.map +1 -1
- package/dist/esm/Table/TableContext.js +1 -2
- package/dist/esm/Table/TableContext.js.map +1 -1
- package/dist/esm/Table/TableHeader/TableHeader.js.map +1 -1
- package/dist/esm/Table/TableRow/TableRow.js.map +1 -1
- package/dist/esm/Table/TableSectionContext.js +1 -2
- package/dist/esm/Table/TableSectionContext.js.map +1 -1
- package/dist/esm/Table/hooks/useBulkActions.js +1 -2
- package/dist/esm/Table/hooks/useBulkActions.js.map +1 -1
- package/dist/esm/Table/hooks/useHeaderGroups.js.map +1 -1
- package/dist/esm/Table/hooks/usePagination.js.map +1 -1
- package/dist/esm/Table/hooks/useResizeColumns.js.map +1 -1
- package/dist/esm/Table/hooks/useRowExpand.js +5 -1
- package/dist/esm/Table/hooks/useRowExpand.js.map +1 -1
- package/dist/esm/Table/hooks/useRowSelection.js.map +1 -1
- package/dist/esm/Table/hooks/useSortBy.js.map +1 -1
- package/dist/esm/Table/hooks/useSticky.js.map +1 -1
- package/dist/esm/Table/hooks/useTableStyles.js.map +1 -1
- package/dist/esm/Table/utils/fallbacks.js +1 -2
- package/dist/esm/Table/utils/fallbacks.js.map +1 -1
- package/dist/esm/Tag/Tag.js +2 -4
- package/dist/esm/Tag/Tag.js.map +1 -1
- package/dist/esm/TagsInput/TagsInput.js +2 -3
- package/dist/esm/TagsInput/TagsInput.js.map +1 -1
- package/dist/esm/TextArea/TextArea.js +1 -2
- package/dist/esm/TextArea/TextArea.js.map +1 -1
- package/dist/esm/TimeAgo/TimeAgo.js +1 -2
- package/dist/esm/TimeAgo/TimeAgo.js.map +1 -1
- package/dist/esm/TimeAgo/useTimeout.js +1 -2
- package/dist/esm/TimeAgo/useTimeout.js.map +1 -1
- package/dist/esm/TimePicker/Placeholder.js +3 -6
- package/dist/esm/TimePicker/Placeholder.js.map +1 -1
- package/dist/esm/TimePicker/TimePicker.js +3 -6
- package/dist/esm/TimePicker/TimePicker.js.map +1 -1
- package/dist/esm/TreeView/TreeItem/TreeItem.js +2 -1
- package/dist/esm/TreeView/TreeItem/TreeItem.js.map +1 -1
- package/dist/esm/TreeView/TreeItem/useHvTreeItem.js +2 -4
- package/dist/esm/TreeView/TreeItem/useHvTreeItem.js.map +1 -1
- package/dist/esm/Typography/utils.js +1 -2
- package/dist/esm/Typography/utils.js.map +1 -1
- package/dist/esm/VerticalNavigation/Header/Header.js +1 -2
- package/dist/esm/VerticalNavigation/Header/Header.js.map +1 -1
- package/dist/esm/VerticalNavigation/Navigation/Navigation.js +2 -4
- package/dist/esm/VerticalNavigation/Navigation/Navigation.js.map +1 -1
- package/dist/esm/VerticalNavigation/NavigationSlider/utils/NavigationSlider.utils.js.map +1 -1
- package/dist/esm/VerticalNavigation/TreeView/TreeView.js +3 -6
- package/dist/esm/VerticalNavigation/TreeView/TreeView.js.map +1 -1
- package/dist/esm/VerticalNavigation/TreeView/TreeViewContext.js.map +1 -1
- package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.js +4 -8
- package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.js.map +1 -1
- package/dist/esm/VerticalNavigation/VerticalNavigation.js.map +1 -1
- package/dist/esm/VerticalNavigation/VerticalNavigationContext.js.map +1 -1
- package/dist/esm/hocs/withTooltip.js.map +1 -1
- package/dist/esm/hooks/useComputation.js.map +1 -1
- package/dist/esm/hooks/useCss.js.map +1 -1
- package/dist/esm/hooks/useForkRef.js.map +1 -1
- package/dist/esm/hooks/useUniqueId.js +1 -2
- package/dist/esm/hooks/useUniqueId.js.map +1 -1
- package/dist/esm/providers/Provider.js +2 -4
- package/dist/esm/providers/Provider.js.map +1 -1
- package/dist/esm/types/generic.js.map +1 -1
- package/dist/esm/utils/classes.js +6 -3
- package/dist/esm/utils/classes.js.map +1 -1
- package/dist/esm/utils/deepMerge.js +2 -1
- package/dist/esm/utils/deepMerge.js.map +1 -1
- package/dist/esm/utils/helpers.js +1 -2
- package/dist/esm/utils/helpers.js.map +1 -1
- package/dist/esm/utils/theme.js +1 -2
- package/dist/esm/utils/theme.js.map +1 -1
- package/dist/esm/utils/useSavedState.js +1 -2
- package/dist/esm/utils/useSavedState.js.map +1 -1
- package/dist/types/index.d.ts +299 -365
- package/package.json +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Navigation.js","sources":["../../../../src/VerticalNavigation/Navigation/Navigation.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useState } from \"react\";\n\nimport { useControlled } from \"../../hooks/useControlled\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { uniqueId } from \"../../utils/helpers\";\nimport { setId } from \"../../utils/setId\";\nimport { NavigationPopupContainer } from \"../NavigationPopup/NavigationPopupContainer\";\nimport {\n HvVerticalNavigationSlider,\n HvVerticalNavigationSliderProps,\n} from \"../NavigationSlider\";\nimport { getParentItemById } from \"../NavigationSlider/utils/NavigationSlider.utils\";\nimport {\n HvVerticalNavigationTreeView,\n HvVerticalNavigationTreeViewItem,\n NavigationMode,\n} from \"../TreeView\";\nimport {\n NavigationData,\n VerticalNavigationContext,\n} from \"../VerticalNavigationContext\";\nimport { staticClasses, useClasses } from \"./Navigation.styles\";\n\nexport { staticClasses as verticalNavigationTreeClasses };\n\nexport type HvVerticalNavigationTreeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationTreeProps\n extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvVerticalNavigationTreeClasses;\n /** Modus operandi (role) of the widget instance. */\n mode?: NavigationMode;\n /** Can non-leaf nodes be collapsed / expanded. */\n collapsible?: boolean;\n /** The ID of the selected page. */\n selected?: string;\n /** When uncontrolled, defines the initial selected page ID. */\n defaultSelected?: string;\n /** Callback fired when a navigation item is selected. */\n onChange?: (\n event:\n | React.MouseEvent<HTMLLIElement>\n | React.KeyboardEvent<HTMLUListElement>,\n page: NavigationData,\n ) => void;\n /** Expanded nodes' ids. */\n expanded?: string[];\n /**\n * When uncontrolled, defines the initial expanded nodes' ids.\n *\n * It also supports `true` for starting with all nodes expanded.\n * With `false` all nodes will be collapsed.\n *\n * By default it expands the needed nodes to display the current selection, if any.\n */\n defaultExpanded?: string[] | boolean;\n /** Callback fired when tree items are expanded/collapsed. */\n onToggle?: (\n event: React.KeyboardEvent<HTMLUListElement>,\n nodeIds: string[],\n ) => void;\n /**\n * An array containing the data for each menu item.\n *\n * id - the id to be applied to the root element.\n * label - the label to be rendered on the menu item.\n * data - sub-menu items\n * href - the url used for navigation.\n * target - the behavior when opening an url.\n */\n data?: NavigationData[];\n /** Aria label to apply to the navigate to submenu button on the navigation slider list items. */\n sliderForwardButtonAriaLabel?: string;\n}\n\nconst createListHierarchy = (\n items,\n id,\n classes?: HvVerticalNavigationTreeClasses,\n mouseEnterHandler?: (event, item) => void,\n disableTooltip = false,\n) =>\n items.map((item) => {\n const {\n id: itemId,\n label: itemLabel,\n icon,\n data: children,\n selectable,\n disabled,\n href,\n target,\n } = item;\n\n const itemMouseEnterHandler = (event) => {\n mouseEnterHandler?.(event, item);\n };\n\n return (\n <HvVerticalNavigationTreeViewItem\n id={setId(id, itemId)}\n className={classes?.listItem}\n href={href}\n target={target}\n key={itemId}\n nodeId={itemId}\n label={itemLabel}\n icon={icon}\n payload={item}\n selectable={selectable}\n disabled={disabled}\n onMouseEnter={itemMouseEnterHandler}\n disableTooltip={disableTooltip}\n >\n {children\n ? createListHierarchy(\n children,\n id,\n classes,\n mouseEnterHandler,\n disableTooltip,\n )\n : undefined}\n </HvVerticalNavigationTreeViewItem>\n );\n });\n\nconst getAllParents = (items) => {\n const parents = items.filter(\n (item) => item.data != null && item.data.length > 0,\n );\n const childParents = parents.flatMap((item) => getAllParents(item.data));\n\n return [...parents, ...childParents];\n};\n\nfunction pathToElement(data, targetId) {\n const path: string[] = [];\n\n if (data != null && data.length > 0) {\n for (let i = 0; i !== data.length; ++i) {\n const item = data[i];\n if (item.id === targetId) {\n path.push(item.id);\n break;\n }\n\n const subPaths = pathToElement(item.data, targetId);\n if (subPaths.length > 0) {\n path.push(item.id);\n path.push(...subPaths);\n break;\n }\n }\n }\n\n return path;\n}\n\nexport const HvVerticalNavigationTree = (\n props: HvVerticalNavigationTreeProps,\n) => {\n const {\n id,\n className,\n classes: classesProp,\n data,\n mode = \"navigation\",\n collapsible = false,\n expanded: expandedProp,\n defaultExpanded,\n onToggle,\n selected: selectedProp,\n defaultSelected,\n onChange,\n sliderForwardButtonAriaLabel = \"Navigate to submenu\",\n ...others\n } = useDefaultProps(\"HvVerticalNavigationTree\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [selected, setSelected] = useControlled(selectedProp, defaultSelected);\n const [expanded, setExpanded] = useControlled(expandedProp, () => {\n if (defaultExpanded === true) {\n // all parent nodes will be expanded by default\n return getAllParents(data).map((item) => item.id);\n }\n\n if (defaultExpanded === false) {\n // all parent nodes will be collapsed by default\n return [];\n }\n\n if (defaultExpanded == null) {\n if (selected != null) {\n // the path to the selected node will be expanded (default behaviour)\n const path = pathToElement(data, selected);\n return path.slice(0, -1);\n }\n\n // nothing is expanded\n return [];\n }\n\n return defaultExpanded;\n });\n\n const {\n isOpen,\n useIcons,\n slider,\n\n parentItem,\n setParentItem,\n withParentData,\n navigateToChildHandler,\n\n setParentData,\n setParentSelected,\n } = useContext(VerticalNavigationContext);\n\n const [navigationPopup, setNavigationPopup] = useState<{\n // This value is needed to guarantee that the NavigationPopup is fully re-rendered with keeping any previous values\n uniqueKey: string;\n anchorEl: HTMLElement | null;\n fixedMode: boolean;\n data: NavigationData[];\n } | null>(null);\n\n const handleChange = useCallback(\n (\n event:\n | React.MouseEvent<HTMLLIElement>\n | React.KeyboardEvent<HTMLUListElement>,\n selectedId: string | string[],\n selectedItem: NavigationData,\n ) => {\n if (useIcons && !isOpen && selectedItem.data) {\n const currentEventTarget = event.currentTarget;\n setNavigationPopup((prevState) => {\n // We want to close the popup in case the clicked element is the same as the previous one\n return prevState?.anchorEl === currentEventTarget\n ? null\n : {\n uniqueKey: uniqueId(),\n anchorEl: currentEventTarget,\n fixedMode: true,\n data: selectedItem.data as NavigationData[],\n };\n });\n\n // We need this stopPropagation or else the Popup will close due to the clickaway being triggered\n event.stopPropagation();\n } else {\n setSelected(selectedId as string);\n setExpanded((prevState) => {\n if (!isOpen) {\n return [...prevState, ...pathToElement(data, selectedId)];\n }\n return [...prevState];\n });\n setNavigationPopup(null);\n onChange?.(event, selectedItem);\n }\n },\n [onChange, setSelected, setExpanded, isOpen, useIcons, data],\n );\n\n const treeViewItemMouseEnterHandler = useCallback(\n (event, item) => {\n const isCollapsed = useIcons && !isOpen;\n\n if (isCollapsed && item.data && !navigationPopup?.fixedMode) {\n const currentEventTarget = event.currentTarget;\n\n setNavigationPopup?.({\n uniqueKey: uniqueId(),\n anchorEl: currentEventTarget,\n fixedMode: false,\n data: item.data,\n });\n } else if (isCollapsed && !item.data && !navigationPopup?.fixedMode) {\n setNavigationPopup(null);\n }\n },\n [isOpen, useIcons, navigationPopup],\n );\n\n const handleToggle = useCallback(\n (event: React.KeyboardEvent<HTMLUListElement>, newExpanded: string[]) => {\n setExpanded(newExpanded);\n onToggle?.(event, newExpanded);\n },\n [onToggle, setExpanded],\n );\n\n const children = useMemo(\n () =>\n data &&\n createListHierarchy(\n data,\n id,\n classes,\n treeViewItemMouseEnterHandler,\n navigationPopup?.fixedMode,\n ),\n [classes, data, id, navigationPopup, treeViewItemMouseEnterHandler],\n );\n\n useEffect(() => {\n if (!isOpen) {\n setNavigationPopup?.(null);\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (setParentSelected) setParentSelected(selected);\n }, [selected, setSelected, setParentSelected]);\n\n useEffect(() => {\n if (setParentData) setParentData(data);\n }, [data, setParentData]);\n\n useEffect(() => {\n if (\n withParentData &&\n selected &&\n setParentItem &&\n getParentItemById(withParentData, selected)\n ) {\n setParentItem(getParentItemById(withParentData, selected));\n }\n }, [withParentData, selected, setParentItem]);\n\n const navigateToTargetHandler: HvVerticalNavigationSliderProps[\"onNavigateToTarget\"] =\n (event, selectedItem) => handleChange(event, selectedItem.id, selectedItem);\n\n const handleNavigationPopupClose = () => setNavigationPopup(null);\n\n const handleStyledNavMouseLeave = () => {\n if (useIcons && !isOpen && !navigationPopup?.fixedMode) {\n setNavigationPopup(null);\n }\n };\n\n const handleNavigationPopupMouseLeave = () => {\n if (!navigationPopup?.fixedMode) {\n handleNavigationPopupClose();\n }\n };\n\n const handleNavigationPopupChange: HvVerticalNavigationTreeProps[\"onChange\"] =\n (event, selectedItem) => {\n handleChange(event, selectedItem.id, selectedItem);\n };\n\n return (\n <nav\n id={id}\n className={cx(\n classes.root,\n { [classes.collapsed]: !isOpen && !useIcons },\n className,\n )}\n onMouseLeave={handleStyledNavMouseLeave}\n {...others}\n >\n {slider ? (\n <HvVerticalNavigationSlider\n data={parentItem.data || withParentData}\n selected={selected}\n onNavigateToTarget={navigateToTargetHandler}\n onNavigateToChild={navigateToChildHandler}\n forwardButtonAriaLabel={sliderForwardButtonAriaLabel}\n />\n ) : (\n <HvVerticalNavigationTreeView\n id={setId(id, \"tree\")}\n className={classes.list}\n selectable\n mode={mode}\n collapsible={collapsible}\n selected={selected}\n onChange={handleChange}\n expanded={expanded}\n onToggle={handleToggle}\n >\n {useIcons && !isOpen && navigationPopup && (\n <NavigationPopupContainer\n anchorEl={navigationPopup.anchorEl}\n onClose={handleNavigationPopupClose}\n key={navigationPopup.uniqueKey}\n className={classes.navigationPopup}\n >\n <HvVerticalNavigationTree\n className={classes.popup}\n id={setId(id, \"navigation-popup-tree\")}\n collapsible\n defaultExpanded\n selected={selected}\n data={navigationPopup.data}\n onChange={handleNavigationPopupChange}\n onMouseLeave={handleNavigationPopupMouseLeave}\n />\n </NavigationPopupContainer>\n )}\n {children}\n </HvVerticalNavigationTreeView>\n )}\n </nav>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Navigation.js","sources":["../../../../src/VerticalNavigation/Navigation/Navigation.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useState } from \"react\";\n\nimport { useControlled } from \"../../hooks/useControlled\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { uniqueId } from \"../../utils/helpers\";\nimport { setId } from \"../../utils/setId\";\nimport { NavigationPopupContainer } from \"../NavigationPopup/NavigationPopupContainer\";\nimport {\n HvVerticalNavigationSlider,\n HvVerticalNavigationSliderProps,\n} from \"../NavigationSlider\";\nimport { getParentItemById } from \"../NavigationSlider/utils/NavigationSlider.utils\";\nimport {\n HvVerticalNavigationTreeView,\n HvVerticalNavigationTreeViewItem,\n NavigationMode,\n} from \"../TreeView\";\nimport {\n NavigationData,\n VerticalNavigationContext,\n} from \"../VerticalNavigationContext\";\nimport { staticClasses, useClasses } from \"./Navigation.styles\";\n\nexport { staticClasses as verticalNavigationTreeClasses };\n\nexport type HvVerticalNavigationTreeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationTreeProps\n extends HvBaseProps<HTMLDivElement, \"onChange\" | \"onToggle\"> {\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvVerticalNavigationTreeClasses;\n /** Modus operandi (role) of the widget instance. */\n mode?: NavigationMode;\n /** Can non-leaf nodes be collapsed / expanded. */\n collapsible?: boolean;\n /** The ID of the selected page. */\n selected?: string;\n /** When uncontrolled, defines the initial selected page ID. */\n defaultSelected?: string;\n /** Callback fired when a navigation item is selected. */\n onChange?: (\n event:\n | React.MouseEvent<HTMLLIElement>\n | React.KeyboardEvent<HTMLUListElement>,\n page: NavigationData,\n ) => void;\n /** Expanded nodes' ids. */\n expanded?: string[];\n /**\n * When uncontrolled, defines the initial expanded nodes' ids.\n *\n * It also supports `true` for starting with all nodes expanded.\n * With `false` all nodes will be collapsed.\n *\n * By default it expands the needed nodes to display the current selection, if any.\n */\n defaultExpanded?: string[] | boolean;\n /** Callback fired when tree items are expanded/collapsed. */\n onToggle?: (\n event: React.KeyboardEvent<HTMLUListElement>,\n nodeIds: string[],\n ) => void;\n /**\n * An array containing the data for each menu item.\n *\n * id - the id to be applied to the root element.\n * label - the label to be rendered on the menu item.\n * data - sub-menu items\n * href - the url used for navigation.\n * target - the behavior when opening an url.\n */\n data?: NavigationData[];\n /** Aria label to apply to the navigate to submenu button on the navigation slider list items. */\n sliderForwardButtonAriaLabel?: string;\n}\n\nconst createListHierarchy = (\n items: NavigationData[],\n id: string | undefined,\n classes?: HvVerticalNavigationTreeClasses,\n mouseEnterHandler?: (event: any, item: any) => void,\n disableTooltip = false,\n) =>\n items.map((item) => {\n const {\n id: itemId,\n label: itemLabel,\n icon,\n data: children,\n selectable,\n disabled,\n href,\n target,\n } = item;\n\n const itemMouseEnterHandler = (event: any) => {\n mouseEnterHandler?.(event, item);\n };\n\n return (\n <HvVerticalNavigationTreeViewItem\n id={setId(id, itemId)}\n className={classes?.listItem}\n href={href}\n target={target}\n key={itemId}\n nodeId={itemId}\n label={itemLabel}\n icon={icon}\n payload={item}\n selectable={selectable}\n disabled={disabled}\n onMouseEnter={itemMouseEnterHandler}\n disableTooltip={disableTooltip}\n >\n {children\n ? createListHierarchy(\n children,\n id,\n classes,\n mouseEnterHandler,\n disableTooltip,\n )\n : undefined}\n </HvVerticalNavigationTreeViewItem>\n );\n });\n\nconst getAllParents = (items: any) => {\n const parents = items.filter(\n (item: any) => item.data != null && item.data.length > 0,\n );\n const childParents = parents.flatMap((item: any) => getAllParents(item.data));\n\n return [...parents, ...childParents];\n};\n\nfunction pathToElement(data: any, targetId: any) {\n const path: string[] = [];\n\n if (data != null && data.length > 0) {\n for (let i = 0; i !== data.length; ++i) {\n const item = data[i];\n if (item.id === targetId) {\n path.push(item.id);\n break;\n }\n\n const subPaths = pathToElement(item.data, targetId);\n if (subPaths.length > 0) {\n path.push(item.id);\n path.push(...subPaths);\n break;\n }\n }\n }\n\n return path;\n}\n\nexport const HvVerticalNavigationTree = (\n props: HvVerticalNavigationTreeProps,\n) => {\n const {\n id,\n className,\n classes: classesProp,\n data,\n mode = \"navigation\",\n collapsible = false,\n expanded: expandedProp,\n defaultExpanded,\n onToggle,\n selected: selectedProp,\n defaultSelected,\n onChange,\n sliderForwardButtonAriaLabel = \"Navigate to submenu\",\n ...others\n } = useDefaultProps(\"HvVerticalNavigationTree\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [selected, setSelected] = useControlled(selectedProp, defaultSelected);\n const [expanded, setExpanded] = useControlled(expandedProp, () => {\n if (defaultExpanded === true) {\n // all parent nodes will be expanded by default\n return getAllParents(data).map((item) => item.id);\n }\n\n if (defaultExpanded === false) {\n // all parent nodes will be collapsed by default\n return [];\n }\n\n if (defaultExpanded == null) {\n if (selected != null) {\n // the path to the selected node will be expanded (default behaviour)\n const path = pathToElement(data, selected);\n return path.slice(0, -1);\n }\n\n // nothing is expanded\n return [];\n }\n\n return defaultExpanded;\n });\n\n const {\n isOpen,\n useIcons,\n slider,\n\n parentItem,\n setParentItem,\n withParentData,\n navigateToChildHandler,\n\n setParentData,\n setParentSelected,\n } = useContext(VerticalNavigationContext);\n\n const [navigationPopup, setNavigationPopup] = useState<{\n // This value is needed to guarantee that the NavigationPopup is fully re-rendered with keeping any previous values\n uniqueKey: string;\n anchorEl: HTMLElement | null;\n fixedMode: boolean;\n data: NavigationData[];\n } | null>(null);\n\n const handleChange = useCallback(\n (\n event:\n | React.MouseEvent<HTMLLIElement>\n | React.KeyboardEvent<HTMLUListElement>,\n selectedId: string | string[],\n selectedItem: NavigationData,\n ) => {\n if (useIcons && !isOpen && selectedItem.data) {\n const currentEventTarget = event.currentTarget;\n setNavigationPopup((prevState) => {\n // We want to close the popup in case the clicked element is the same as the previous one\n return prevState?.anchorEl === currentEventTarget\n ? null\n : {\n uniqueKey: uniqueId(),\n anchorEl: currentEventTarget,\n fixedMode: true,\n data: selectedItem.data as NavigationData[],\n };\n });\n\n // We need this stopPropagation or else the Popup will close due to the clickaway being triggered\n event.stopPropagation();\n } else {\n setSelected(selectedId as string);\n setExpanded((prevState) => {\n if (!isOpen) {\n return [...prevState, ...pathToElement(data, selectedId)];\n }\n return [...prevState];\n });\n setNavigationPopup(null);\n onChange?.(event, selectedItem);\n }\n },\n [onChange, setSelected, setExpanded, isOpen, useIcons, data],\n );\n\n const treeViewItemMouseEnterHandler = useCallback(\n (event: any, item: any) => {\n const isCollapsed = useIcons && !isOpen;\n\n if (isCollapsed && item.data && !navigationPopup?.fixedMode) {\n const currentEventTarget = event.currentTarget;\n\n setNavigationPopup?.({\n uniqueKey: uniqueId(),\n anchorEl: currentEventTarget,\n fixedMode: false,\n data: item.data,\n });\n } else if (isCollapsed && !item.data && !navigationPopup?.fixedMode) {\n setNavigationPopup(null);\n }\n },\n [isOpen, useIcons, navigationPopup],\n );\n\n const handleToggle = useCallback(\n (event: React.KeyboardEvent<HTMLUListElement>, newExpanded: string[]) => {\n setExpanded(newExpanded);\n onToggle?.(event, newExpanded);\n },\n [onToggle, setExpanded],\n );\n\n const children = useMemo(\n () =>\n data &&\n createListHierarchy(\n data,\n id,\n classes,\n treeViewItemMouseEnterHandler,\n navigationPopup?.fixedMode,\n ),\n [classes, data, id, navigationPopup, treeViewItemMouseEnterHandler],\n );\n\n useEffect(() => {\n if (!isOpen) {\n setNavigationPopup?.(null);\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (setParentSelected) setParentSelected(selected);\n }, [selected, setSelected, setParentSelected]);\n\n useEffect(() => {\n if (setParentData) setParentData(data);\n }, [data, setParentData]);\n\n useEffect(() => {\n if (\n withParentData &&\n selected &&\n setParentItem &&\n getParentItemById(withParentData, selected)\n ) {\n setParentItem(getParentItemById(withParentData, selected));\n }\n }, [withParentData, selected, setParentItem]);\n\n const navigateToTargetHandler: HvVerticalNavigationSliderProps[\"onNavigateToTarget\"] =\n (event, selectedItem) => handleChange(event, selectedItem.id, selectedItem);\n\n const handleNavigationPopupClose = () => setNavigationPopup(null);\n\n const handleStyledNavMouseLeave = () => {\n if (useIcons && !isOpen && !navigationPopup?.fixedMode) {\n setNavigationPopup(null);\n }\n };\n\n const handleNavigationPopupMouseLeave = () => {\n if (!navigationPopup?.fixedMode) {\n handleNavigationPopupClose();\n }\n };\n\n const handleNavigationPopupChange: HvVerticalNavigationTreeProps[\"onChange\"] =\n (event, selectedItem) => {\n handleChange(event, selectedItem.id, selectedItem);\n };\n\n return (\n <nav\n id={id}\n className={cx(\n classes.root,\n { [classes.collapsed]: !isOpen && !useIcons },\n className,\n )}\n onMouseLeave={handleStyledNavMouseLeave}\n {...others}\n >\n {slider ? (\n <HvVerticalNavigationSlider\n data={parentItem.data || withParentData}\n selected={selected}\n onNavigateToTarget={navigateToTargetHandler}\n onNavigateToChild={navigateToChildHandler}\n forwardButtonAriaLabel={sliderForwardButtonAriaLabel}\n />\n ) : (\n <HvVerticalNavigationTreeView\n id={setId(id, \"tree\")}\n className={classes.list}\n selectable\n mode={mode}\n collapsible={collapsible}\n selected={selected}\n onChange={handleChange}\n expanded={expanded}\n onToggle={handleToggle}\n >\n {useIcons && !isOpen && navigationPopup && (\n <NavigationPopupContainer\n anchorEl={navigationPopup.anchorEl}\n onClose={handleNavigationPopupClose}\n key={navigationPopup.uniqueKey}\n className={classes.navigationPopup}\n >\n <HvVerticalNavigationTree\n className={classes.popup}\n id={setId(id, \"navigation-popup-tree\")}\n collapsible\n defaultExpanded\n selected={selected}\n data={navigationPopup.data}\n onChange={handleNavigationPopupChange}\n onMouseLeave={handleNavigationPopupMouseLeave}\n />\n </NavigationPopupContainer>\n )}\n {children}\n </HvVerticalNavigationTreeView>\n )}\n </nav>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationSlider.utils.js","sources":["../../../../../src/VerticalNavigation/NavigationSlider/utils/NavigationSlider.utils.tsx"],"sourcesContent":["/**\n * Recursively searches in a collection the first element where the property matches the specified value.\n *\n * @param collection - Collection where the search will be performed\n * @param childrenPropName - The children property name where the recursive search will be performed\n * @param propName - The name of the property to be used on the search\n * @param propValue - The value of the property to be used on the search\n * @returns The element that matches the requirement or null if none is found\n */\nconst searchInCollection = (\n collection,\n childrenPropName,\n propName,\n propValue,\n) => {\n if (collection[propName] === propValue) {\n return collection;\n }\n\n const items = collection[childrenPropName] || collection;\n\n let foundItem = null;\n for (let index = 0; foundItem === null && index < items.length; index += 1) {\n foundItem = searchInCollection(\n items[index],\n childrenPropName,\n propName,\n propValue,\n );\n }\n return foundItem;\n};\n\n/**\n * Returns the navigation item with the specified id.\n *\n * @param navigationItems - The collection of navigation items.\n * @param navigationItemId - The id to be used on the search\n * @returns The navigation item with the specified id.\n */\nconst getNavigationItemById = (navigationItems, navigationItemId) => {\n return searchInCollection(navigationItems, \"data\", \"id\", navigationItemId);\n};\n\n/**\n * Returns the parent item for the received item id.\n *\n * @param navigationItems - The collection of navigation items.\n * @param navigationItemId - The id to be used on the search\n * @returns The parent navigation item.\n */\nconst getParentItemById = (navigationItems, navigationItemId) => {\n const parentId = getNavigationItemById(\n navigationItems,\n navigationItemId,\n )?.parent;\n return getNavigationItemById(navigationItems, parentId);\n};\n\n/**\n * Fills the data structure with the parent id on each one of the nodes.\n *\n * @param navigationItems - The collection of navigation items.\n * @param parentItemId - The parent id to be added.\n * @returns The structure now filled with the parent id.\n */\nconst fillDataWithParentId = (navigationItems, parentItemId
|
|
1
|
+
{"version":3,"file":"NavigationSlider.utils.js","sources":["../../../../../src/VerticalNavigation/NavigationSlider/utils/NavigationSlider.utils.tsx"],"sourcesContent":["/**\n * Recursively searches in a collection the first element where the property matches the specified value.\n *\n * @param collection - Collection where the search will be performed\n * @param childrenPropName - The children property name where the recursive search will be performed\n * @param propName - The name of the property to be used on the search\n * @param propValue - The value of the property to be used on the search\n * @returns The element that matches the requirement or null if none is found\n */\nconst searchInCollection = (\n collection: any,\n childrenPropName: any,\n propName: any,\n propValue: any,\n): any => {\n if (collection[propName] === propValue) {\n return collection;\n }\n\n const items = collection[childrenPropName] || collection;\n\n let foundItem = null;\n for (let index = 0; foundItem === null && index < items.length; index += 1) {\n foundItem = searchInCollection(\n items[index],\n childrenPropName,\n propName,\n propValue,\n );\n }\n return foundItem;\n};\n\n/**\n * Returns the navigation item with the specified id.\n *\n * @param navigationItems - The collection of navigation items.\n * @param navigationItemId - The id to be used on the search\n * @returns The navigation item with the specified id.\n */\nconst getNavigationItemById = (navigationItems: any, navigationItemId: any) => {\n return searchInCollection(navigationItems, \"data\", \"id\", navigationItemId);\n};\n\n/**\n * Returns the parent item for the received item id.\n *\n * @param navigationItems - The collection of navigation items.\n * @param navigationItemId - The id to be used on the search\n * @returns The parent navigation item.\n */\nconst getParentItemById = (navigationItems: any, navigationItemId: any) => {\n const parentId = getNavigationItemById(\n navigationItems,\n navigationItemId,\n )?.parent;\n return getNavigationItemById(navigationItems, parentId);\n};\n\n/**\n * Fills the data structure with the parent id on each one of the nodes.\n *\n * @param navigationItems - The collection of navigation items.\n * @param parentItemId - The parent id to be added.\n * @returns The structure now filled with the parent id.\n */\nconst fillDataWithParentId = (navigationItems: any, parentItemId?: any) => {\n return navigationItems.map((item: any) => {\n if (item?.data?.length > 0) {\n return {\n ...item,\n parent: parentItemId,\n data: fillDataWithParentId(item.data, item.id),\n };\n }\n return { ...item, parent: parentItemId };\n });\n};\n\nexport { getNavigationItemById, getParentItemById, fillDataWithParentId };\n"],"names":[],"mappings":"AASA,MAAM,qBAAqB,CACzB,YACA,kBACA,UACA,cACQ;AACJ,MAAA,WAAW,QAAQ,MAAM,WAAW;AAC/B,WAAA;AAAA,EACT;AAEM,QAAA,QAAQ,WAAW,gBAAgB,KAAK;AAE9C,MAAI,YAAY;AACP,WAAA,QAAQ,GAAG,cAAc,QAAQ,QAAQ,MAAM,QAAQ,SAAS,GAAG;AAC9D,gBAAA;AAAA,MACV,MAAM,KAAK;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AACO,SAAA;AACT;AASM,MAAA,wBAAwB,CAAC,iBAAsB,qBAA0B;AAC7E,SAAO,mBAAmB,iBAAiB,QAAQ,MAAM,gBAAgB;AAC3E;AASM,MAAA,oBAAoB,CAAC,iBAAsB,qBAA0B;AACzE,QAAM,WAAW;AAAA,IACf;AAAA,IACA;AAAA,EACC,GAAA;AACI,SAAA,sBAAsB,iBAAiB,QAAQ;AACxD;AASM,MAAA,uBAAuB,CAAC,iBAAsB,iBAAuB;AAClE,SAAA,gBAAgB,IAAI,CAAC,SAAc;AACpC,QAAA,MAAM,MAAM,SAAS,GAAG;AACnB,aAAA;AAAA,QACL,GAAG;AAAA,QACH,QAAQ;AAAA,QACR,MAAM,qBAAqB,KAAK,MAAM,KAAK,EAAE;AAAA,MAAA;AAAA,IAEjD;AACA,WAAO,EAAE,GAAG,MAAM,QAAQ,aAAa;AAAA,EAAA,CACxC;AACH;"}
|
|
@@ -255,8 +255,7 @@ const HvVerticalNavigationTreeView = forwardRef((props, ref) => {
|
|
|
255
255
|
};
|
|
256
256
|
const toggleExpansion = useCallback(
|
|
257
257
|
(event, value = focusedNodeId) => {
|
|
258
|
-
if (!value)
|
|
259
|
-
return;
|
|
258
|
+
if (!value) return;
|
|
260
259
|
const newExpanded = expanded.includes(value) ? expanded.filter((id) => id !== value) : [value].concat(expanded);
|
|
261
260
|
onToggle?.(event, newExpanded);
|
|
262
261
|
setExpandedState(newExpanded);
|
|
@@ -482,8 +481,7 @@ const HvVerticalNavigationTreeView = forwardRef((props, ref) => {
|
|
|
482
481
|
firstCharMap.current = newMap;
|
|
483
482
|
}, []);
|
|
484
483
|
const handleNextArrow = (event) => {
|
|
485
|
-
if (!focusedNodeId)
|
|
486
|
-
return false;
|
|
484
|
+
if (!focusedNodeId) return false;
|
|
487
485
|
if (isExpandable(focusedNodeId)) {
|
|
488
486
|
if (isExpanded(focusedNodeId)) {
|
|
489
487
|
focusNextNode(event, focusedNodeId);
|
|
@@ -494,8 +492,7 @@ const HvVerticalNavigationTreeView = forwardRef((props, ref) => {
|
|
|
494
492
|
return true;
|
|
495
493
|
};
|
|
496
494
|
const handlePreviousArrow = (event) => {
|
|
497
|
-
if (!focusedNodeId)
|
|
498
|
-
return false;
|
|
495
|
+
if (!focusedNodeId) return false;
|
|
499
496
|
if (isExpanded(focusedNodeId) && !isDisabled(focusedNodeId)) {
|
|
500
497
|
toggleExpansion(event, focusedNodeId);
|
|
501
498
|
return true;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeView.js","sources":["../../../../src/VerticalNavigation/TreeView/TreeView.tsx"],"sourcesContent":["import { forwardRef, useCallback, useMemo, useRef, useState } from \"react\";\n\nimport { useControlled } from \"../../hooks/useControlled\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { DescendantProvider } from \"../../TreeView/internals/DescendantProvider\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { staticClasses, useClasses } from \"./TreeView.styles\";\nimport {\n NavigationMode,\n TreeViewControlContext,\n TreeViewStateContext,\n} from \"./TreeViewContext\";\n\nexport { staticClasses as treeViewClasses };\n\nexport type HvVerticalNavigationTreeViewClasses = ExtractNames<\n typeof useClasses\n>;\n\nexport interface HvVerticalNavigationTreeViewProps\n extends HvBaseProps<HTMLUListElement, \"onChange\"> {\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvVerticalNavigationTreeViewClasses;\n /** Modus operandi (role) of the widget instance. */\n mode?: NavigationMode;\n /** Enables selection. @default false */\n selectable?: boolean;\n /** Enables the simultaneous selection of multiple items. @default false */\n multiSelect?: boolean;\n /** The selected nodes' ids. When `multiSelect` is true this takes an array of strings; when false (default) a string. */\n selected?: string[] | string;\n /**\n * When uncontrolled, defines the initial selected nodes' ids.\n * When `multiSelect` is true this takes an array of strings; when false (default) a string.\n * @default []\n */\n defaultSelected?: string[] | string;\n /** Can non-leaf nodes be collapsed / expanded. */\n collapsible?: boolean;\n /** Callback fired when a tree item is selected. */\n onChange?: (\n event: React.KeyboardEvent<HTMLUListElement>,\n nodeId: string | string[],\n payloads: any,\n ) => void;\n /** Expanded nodes' ids. */\n expanded?: string[];\n /** When uncontrolled, defines the initial expanded nodes' ids. @default [] */\n defaultExpanded?: string[];\n /** Callback fired when tree items are expanded/collapsed. */\n onToggle?: (\n event: React.KeyboardEvent<HTMLUListElement>,\n nodeIds: string[],\n ) => void;\n /** If `true`, will allow focus on disabled items. @default false */\n disabledItemsFocusable?: boolean;\n}\nfunction isPrintableCharacter(string: string) {\n return string && string.length === 1 && string.match(/\\S/);\n}\n\nfunction findNextFirstChar(\n firstChars: string[],\n startIndex: number,\n char: string,\n) {\n return firstChars.slice(startIndex).findIndex((c) => c === char);\n}\n\nfunction noopSelection() {\n return false;\n}\n\nexport const HvVerticalNavigationTreeView = forwardRef<\n HTMLUListElement,\n HvVerticalNavigationTreeViewProps\n>((props, ref) => {\n const {\n id: idProp,\n className,\n classes: classesProp,\n mode = \"treeview\",\n collapsible = false,\n expanded: expandedProp,\n defaultExpanded = [],\n onToggle,\n selectable = false,\n multiSelect: multiSelectProp = false,\n selected: selectedProp,\n defaultSelected = [],\n onChange,\n disabledItemsFocusable = false,\n onFocus,\n onBlur,\n onKeyDown,\n children,\n ...others\n } = useDefaultProps(\"HvVerticalNavigationTreeView\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const treeviewMode = mode === \"treeview\";\n const multiSelect = selectable && multiSelectProp;\n\n const treeId = useUniqueId(idProp);\n const treeRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(treeRef, ref);\n\n const [expanded, setExpandedState] = useControlled(\n expandedProp,\n defaultExpanded,\n );\n\n const [selected, setSelectedState] = useControlled(\n selectedProp,\n defaultSelected,\n );\n\n const [focusedNodeId, setFocusedNodeId] = useState<string | null>(null);\n\n const nodeMap = useRef<Record<string, any>>({});\n\n const firstCharMap = useRef<Record<string, any>>({});\n\n const isExpanded = useCallback(\n (id: string) =>\n !collapsible ||\n (Array.isArray(expanded) ? expanded.indexOf(id) !== -1 : false),\n [collapsible, expanded],\n );\n\n const isExpandable = useCallback(\n (id: string) =>\n collapsible && nodeMap.current[id] && nodeMap.current[id].expandable,\n [collapsible],\n );\n\n const isSelected = useCallback(\n (id: string) =>\n selectable &&\n (Array.isArray(selected) ? selected.indexOf(id) !== -1 : selected === id),\n [selectable, selected],\n );\n\n const isSelectable = useCallback(\n (id: string) =>\n selectable && nodeMap.current[id] && nodeMap.current[id].selectable,\n [selectable],\n );\n\n const isDisabled = useCallback((id: string) => {\n let node = nodeMap.current[id];\n\n // This can be called before the node has been added to the node map.\n if (!node) {\n return false;\n }\n\n if (node.disabled) {\n return true;\n }\n\n while (node.parentId != null) {\n node = nodeMap.current[node.parentId];\n if (node.disabled) {\n return true;\n }\n }\n\n return false;\n }, []);\n\n const isFocused = useCallback(\n (id: string) => focusedNodeId === id,\n [focusedNodeId],\n );\n\n const isChildSelected = useCallback(\n // the second part of the condition is to ensure that the id we're\n // looking at is actually of a child (ie, there's at least one \"-\")\n (id: string) => {\n return Array<string>()\n .concat(selected)\n .some((s) => s.startsWith(id) && s.includes(\"-\"));\n },\n [selected],\n );\n\n const getChildrenIds = (id: string | null) =>\n Object.keys(nodeMap.current)\n .map((key) => {\n return nodeMap.current[key];\n })\n .filter((node) => node.parentId === id)\n .sort((a, b) => a.index - b.index)\n .map((child) => child.id);\n\n const getNavigableChildrenIds = useCallback(\n (id: string | null) => {\n let childrenIds = getChildrenIds(id);\n\n if (!disabledItemsFocusable) {\n childrenIds = childrenIds.filter((node) => !isDisabled(node));\n }\n return childrenIds;\n },\n [disabledItemsFocusable, isDisabled],\n );\n\n const getNextNode = useCallback(\n (id: string) => {\n // If expanded get first child\n if (isExpanded(id) && getNavigableChildrenIds(id).length > 0) {\n return getNavigableChildrenIds(id)[0];\n }\n\n let node = nodeMap.current[id];\n while (node != null) {\n // Try to get next sibling\n const siblings = getNavigableChildrenIds(node.parentId);\n const nextSibling = siblings[siblings.indexOf(node.id) + 1];\n\n if (nextSibling) {\n return nextSibling;\n }\n\n // If the sibling does not exist, go up a level to the parent and try again.\n node = nodeMap.current[node.parentId];\n }\n\n return null;\n },\n [getNavigableChildrenIds, isExpanded],\n );\n\n const getPreviousNode = (id: string) => {\n const node = nodeMap.current[id];\n const siblings = getNavigableChildrenIds(node.parentId);\n const nodeIndex = siblings.indexOf(id);\n\n if (nodeIndex === 0) {\n return node.parentId;\n }\n\n let currentNode = siblings[nodeIndex - 1];\n while (\n isExpanded(currentNode) &&\n getNavigableChildrenIds(currentNode).length > 0\n ) {\n currentNode = getNavigableChildrenIds(currentNode).pop();\n }\n\n return currentNode;\n };\n\n const getLastNode = () => {\n let lastNode = getNavigableChildrenIds(null).pop();\n\n while (isExpanded(lastNode)) {\n lastNode = getNavigableChildrenIds(lastNode).pop();\n }\n return lastNode;\n };\n const getFirstNode = () => getNavigableChildrenIds(null)[0];\n const getParent = (id) => nodeMap.current[id].parentId;\n\n /**\n * This is used to determine the start and end of a selection range so\n * we can get the nodes between the two border nodes.\n *\n * It finds the nodes' common ancestor using\n * a naive implementation of a lowest common ancestor algorithm\n * (https://en.wikipedia.org/wiki/Lowest_common_ancestor).\n * Then compares the ancestor's 2 children that are ancestors of nodeA and NodeB\n * so we can compare their indexes to work out which node comes first in a depth first search.\n * (https://en.wikipedia.org/wiki/Depth-first_search)\n *\n * Another way to put it is which node is shallower in a trémaux tree\n * https://en.wikipedia.org/wiki/Tr%C3%A9maux_tree\n */\n const findOrderInTremauxTree = useCallback(\n (nodeAId: string, nodeBId: string) => {\n if (nodeAId === nodeBId) {\n return [nodeAId, nodeBId];\n }\n\n const nodeA = nodeMap.current[nodeAId];\n const nodeB = nodeMap.current[nodeBId];\n\n if (nodeA.parentId === nodeB.id || nodeB.parentId === nodeA.id) {\n return nodeB.parentId === nodeA.id\n ? [nodeA.id, nodeB.id]\n : [nodeB.id, nodeA.id];\n }\n\n const aFamily = [nodeA.id];\n const bFamily = [nodeB.id];\n\n let aAncestor = nodeA.parentId;\n let bAncestor = nodeB.parentId;\n\n let aAncestorIsCommon = bFamily.indexOf(aAncestor) !== -1;\n let bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;\n\n let continueA = true;\n let continueB = true;\n\n while (!bAncestorIsCommon && !aAncestorIsCommon) {\n if (continueA) {\n aFamily.push(aAncestor);\n aAncestorIsCommon = bFamily.indexOf(aAncestor) !== -1;\n continueA = aAncestor !== null;\n if (!aAncestorIsCommon && continueA) {\n aAncestor = nodeMap.current[aAncestor].parentId;\n }\n }\n\n if (continueB && !aAncestorIsCommon) {\n bFamily.push(bAncestor);\n bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;\n continueB = bAncestor !== null;\n if (!bAncestorIsCommon && continueB) {\n bAncestor = nodeMap.current[bAncestor].parentId;\n }\n }\n }\n\n const commonAncestor = aAncestorIsCommon ? aAncestor : bAncestor;\n const ancestorFamily = getChildrenIds(commonAncestor);\n\n const aSide = aFamily[aFamily.indexOf(commonAncestor) - 1];\n const bSide = bFamily[bFamily.indexOf(commonAncestor) - 1];\n\n return ancestorFamily.indexOf(aSide) < ancestorFamily.indexOf(bSide)\n ? [nodeAId, nodeBId]\n : [nodeBId, nodeAId];\n },\n [],\n );\n\n const getNodesInRange = useCallback(\n (nodeA: string, nodeB: string) => {\n if (nodeA && nodeB) {\n const [first, last] = findOrderInTremauxTree(nodeA, nodeB);\n const nodes = [first];\n\n let current = first;\n\n while (current !== last) {\n current = getNextNode(current);\n nodes.push(current);\n }\n\n return nodes;\n }\n return [];\n },\n [findOrderInTremauxTree, getNextNode],\n );\n\n const focus = (\n event:\n | React.KeyboardEvent<HTMLUListElement>\n | React.FocusEvent<HTMLUListElement>,\n id,\n ) => {\n if (id) {\n setFocusedNodeId(id);\n\n if (nodeMap.current[id]?.onFocus) {\n nodeMap.current[id].onFocus(event);\n }\n }\n };\n\n const focusNextNode = (event: React.KeyboardEvent<HTMLUListElement>, id) =>\n focus(event, getNextNode(id));\n const focusPreviousNode = (\n event: React.KeyboardEvent<HTMLUListElement>,\n id,\n ) => focus(event, getPreviousNode(id));\n const focusFirstNode = (event: React.KeyboardEvent<HTMLUListElement>) =>\n focus(event, getFirstNode());\n const focusLastNode = (event: React.KeyboardEvent<HTMLUListElement>) =>\n focus(event, getLastNode());\n\n const focusByFirstCharacter = (\n event: React.KeyboardEvent<HTMLUListElement>,\n id,\n char,\n ) => {\n let start;\n let index;\n const lowercaseChar = char.toLowerCase();\n\n const firstCharIds: string[] = [];\n const firstChars: string[] = [];\n // This really only works since the ids are strings\n Object.keys(firstCharMap.current).forEach((nodeId) => {\n const firstChar = firstCharMap.current[nodeId];\n const map = nodeMap.current[nodeId];\n const visible = map.parentId ? isExpanded(map.parentId) : true;\n const shouldBeSkipped = disabledItemsFocusable\n ? false\n : isDisabled(nodeId);\n\n if (visible && !shouldBeSkipped) {\n firstCharIds.push(nodeId);\n firstChars.push(firstChar);\n }\n });\n\n // Get start index for search based on position of currentItem\n start = firstCharIds.indexOf(id) + 1;\n if (start >= firstCharIds.length) {\n start = 0;\n }\n\n // Check remaining slots in the menu\n index = findNextFirstChar(firstChars, start, lowercaseChar);\n\n // If not found in remaining slots, check from beginning\n if (index === -1) {\n index = findNextFirstChar(firstChars, 0, lowercaseChar);\n }\n\n // If match was found...\n if (index > -1) {\n focus(event, firstCharIds[index]);\n }\n };\n\n const toggleExpansion = useCallback(\n (event: React.KeyboardEvent<HTMLUListElement>, value = focusedNodeId) => {\n if (!value) return;\n\n const newExpanded = expanded.includes(value)\n ? expanded.filter((id) => id !== value)\n : [value].concat(expanded);\n\n onToggle?.(event, newExpanded);\n\n setExpandedState(newExpanded);\n },\n [expanded, focusedNodeId, onToggle, setExpandedState],\n );\n\n const expandAllSiblings = (\n event: React.KeyboardEvent<HTMLUListElement>,\n id,\n ) => {\n const map = nodeMap.current[id];\n const siblings = getChildrenIds(map.parentId);\n\n const diff = siblings.filter(\n (child) => isExpandable(child) && !isExpanded(child),\n );\n\n const newExpanded = expanded.concat(diff);\n\n if (diff.length > 0) {\n setExpandedState(newExpanded);\n onToggle?.(event, newExpanded);\n }\n };\n\n const lastSelectedNode = useRef<HTMLDivElement | null>(null);\n const lastSelectionWasRange = useRef(false);\n const currentRangeSelection = useRef<HTMLDivElement[]>([]);\n\n const isDivElement = (element): element is HTMLDivElement => {\n return (element as HTMLDivElement).nodeType === 1;\n };\n\n const handleRangeArrowSelect = useCallback(\n (\n event: React.KeyboardEvent<HTMLUListElement>,\n nodes: { start?; next?; current? },\n ) => {\n let base = Array<string>().concat(selected);\n const { start, next, current } = nodes;\n\n if (!next || !current) {\n return;\n }\n\n if (\n isDivElement(current) &&\n currentRangeSelection.current.indexOf(current) === -1\n ) {\n currentRangeSelection.current = [];\n }\n\n if (lastSelectionWasRange.current) {\n if (\n isDivElement(next) &&\n currentRangeSelection.current.indexOf(next) !== -1\n ) {\n base = base.filter((id) => id === start || id !== current);\n currentRangeSelection.current = currentRangeSelection.current.filter(\n (id) => id === start || id !== current,\n );\n } else {\n base.push(next);\n currentRangeSelection.current.push(next);\n }\n } else {\n base.push(next);\n currentRangeSelection.current.push(current, next);\n }\n onChange?.(\n event,\n base,\n base.map((id) => nodeMap.current[id]?.payload),\n );\n setSelectedState(base);\n },\n [onChange, selected, setSelectedState],\n );\n\n const handleRangeSelect = useCallback(\n (\n event: React.KeyboardEvent<HTMLUListElement>,\n nodes: { start?; end?; current? },\n ) => {\n let base = Array<string>().concat(selected);\n const { start, end } = nodes;\n // If last selection was a range selection ignore nodes that were selected.\n if (lastSelectionWasRange.current) {\n base = base.filter(\n (id) => !currentRangeSelection.current.includes(id as any),\n );\n }\n\n let range = getNodesInRange(start, end);\n range = range.filter((node) => !isDisabled(node));\n currentRangeSelection.current = range;\n let newSelected = base.concat(range);\n newSelected = newSelected.filter(\n (id, i) => newSelected.indexOf(id) === i,\n );\n\n onChange?.(\n event,\n newSelected,\n newSelected.map((id) => nodeMap.current[id]?.payload),\n );\n\n setSelectedState(newSelected);\n },\n [getNodesInRange, isDisabled, onChange, selected, setSelectedState],\n );\n\n const handleMultipleSelect = useCallback(\n (event: React.KeyboardEvent<HTMLUListElement>, value) => {\n const newSelected = selected.includes(value)\n ? (selected as string[]).filter((id) => id !== value)\n : [value].concat(selected);\n onChange?.(\n event,\n newSelected,\n newSelected.map((id) => nodeMap.current[id]?.payload),\n );\n setSelectedState(newSelected);\n },\n [onChange, selected, setSelectedState],\n );\n\n const handleSingleSelect = useCallback(\n (event: React.KeyboardEvent<HTMLUListElement>, value) => {\n const newSelected = multiSelect ? [value] : value;\n if (onChange) {\n const nodeValue = nodeMap.current[newSelected]?.payload;\n onChange(event, newSelected, multiSelect ? [nodeValue] : nodeValue);\n }\n\n setSelectedState(newSelected);\n },\n [multiSelect, onChange, setSelectedState],\n );\n\n const selectNode = useCallback(\n (event: React.KeyboardEvent<HTMLUListElement>, id, multiple = false) => {\n if (id && isSelectable(id)) {\n if (multiple) {\n handleMultipleSelect(event, id);\n } else {\n handleSingleSelect(event, id);\n }\n lastSelectedNode.current = id;\n lastSelectionWasRange.current = false;\n currentRangeSelection.current = [];\n\n return true;\n }\n return false;\n },\n [handleMultipleSelect, handleSingleSelect, isSelectable],\n );\n\n const selectRange = useCallback(\n (\n event: React.KeyboardEvent<HTMLUListElement>,\n nodes: { start?; end?; current?: HTMLDivElement | null },\n stacked = false,\n ) => {\n const { start = lastSelectedNode.current, end, current } = nodes;\n if (stacked) {\n handleRangeArrowSelect(event, { start, next: end, current });\n } else if (start != null && end != null) {\n handleRangeSelect(event, { start, end });\n }\n lastSelectionWasRange.current = true;\n },\n [handleRangeArrowSelect, handleRangeSelect],\n );\n\n const rangeSelectToFirst = (\n event: React.KeyboardEvent<HTMLUListElement>,\n id,\n ) => {\n if (!lastSelectedNode.current) {\n lastSelectedNode.current = id;\n }\n\n const start = lastSelectionWasRange.current ? lastSelectedNode.current : id;\n\n selectRange(event, {\n start,\n end: getFirstNode(),\n });\n };\n\n const rangeSelectToLast = (\n event: React.KeyboardEvent<HTMLUListElement>,\n id,\n ) => {\n if (!lastSelectedNode.current) {\n lastSelectedNode.current = id;\n }\n\n const start = lastSelectionWasRange.current ? lastSelectedNode.current : id;\n\n selectRange(event, {\n start,\n end: getLastNode(),\n });\n };\n\n const selectNextNode = (event: React.KeyboardEvent<HTMLUListElement>, id) => {\n if (!isDisabled(getNextNode(id))) {\n selectRange(\n event,\n {\n end: getNextNode(id),\n current: id,\n },\n true,\n );\n }\n };\n\n const selectPreviousNode = (\n event: React.KeyboardEvent<HTMLUListElement>,\n id,\n ) => {\n if (!isDisabled(getPreviousNode(id))) {\n selectRange(\n event,\n {\n end: getPreviousNode(id),\n current: id,\n },\n true,\n );\n }\n };\n\n const selectAllNodes = (event: React.KeyboardEvent<HTMLUListElement>) => {\n selectRange(event, { start: getFirstNode(), end: getLastNode() });\n };\n\n /*\n * Mapping Helpers\n */\n const registerNode = useCallback((node) => {\n const {\n id,\n index,\n parentId,\n expandable,\n idAttribute,\n disabled,\n selectable: nodeSelectable,\n onFocus: nodeOnFocus,\n payload,\n } = node;\n\n nodeMap.current[id] = {\n id,\n index,\n parentId,\n expandable,\n idAttribute,\n disabled,\n selectable: nodeSelectable,\n onFocus: nodeOnFocus,\n payload,\n };\n }, []);\n\n const unregisterNode = useCallback((id) => {\n const newMap = { ...nodeMap.current };\n delete newMap[id];\n nodeMap.current = newMap;\n\n setFocusedNodeId((oldFocusedNodeId) => {\n if (\n oldFocusedNodeId === id &&\n treeRef.current &&\n treeRef.current ===\n (treeRef.current.ownerDocument || document).activeElement\n ) {\n return getChildrenIds(null)[0];\n }\n return oldFocusedNodeId;\n });\n }, []);\n\n const mapFirstChar = useCallback((id, firstChar) => {\n firstCharMap.current[id] = firstChar;\n }, []);\n\n const unMapFirstChar = useCallback((id) => {\n const newMap = { ...firstCharMap.current };\n delete newMap[id];\n firstCharMap.current = newMap;\n }, []);\n\n /**\n * Event handlers and Navigation\n */\n const handleNextArrow = (event: React.KeyboardEvent<HTMLUListElement>) => {\n if (!focusedNodeId) return false;\n if (isExpandable(focusedNodeId)) {\n if (isExpanded(focusedNodeId)) {\n focusNextNode(event, focusedNodeId);\n } else if (!isDisabled(focusedNodeId)) {\n toggleExpansion(event);\n }\n }\n return true;\n };\n\n const handlePreviousArrow = (\n event: React.KeyboardEvent<HTMLUListElement>,\n ) => {\n if (!focusedNodeId) return false;\n if (isExpanded(focusedNodeId) && !isDisabled(focusedNodeId)) {\n toggleExpansion(event, focusedNodeId);\n return true;\n }\n\n const parent = getParent(focusedNodeId);\n if (parent) {\n focus(event, parent);\n return true;\n }\n return false;\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>) => {\n let flag = false;\n const { key } = event;\n\n // If the tree is empty there will be no focused node\n if (\n event.altKey ||\n event.currentTarget !== event.target ||\n !focusedNodeId\n ) {\n return;\n }\n\n const ctrlPressed = event.ctrlKey || event.metaKey;\n switch (key) {\n case \" \":\n if (isSelectable(focusedNodeId) && !isDisabled(focusedNodeId)) {\n if (multiSelect && event.shiftKey) {\n selectRange(event, { end: focusedNodeId });\n flag = true;\n } else if (multiSelect) {\n flag = selectNode(event, focusedNodeId, true);\n } else {\n flag = selectNode(event, focusedNodeId);\n }\n }\n event.stopPropagation();\n break;\n case \"Enter\":\n if (!isDisabled(focusedNodeId)) {\n if (isExpandable(focusedNodeId)) {\n toggleExpansion(event);\n flag = true;\n } else if (isSelectable(focusedNodeId)) {\n if (multiSelect && event.shiftKey) {\n selectRange(event, { end: focusedNodeId });\n flag = true;\n } else if (multiSelect) {\n flag = selectNode(event, focusedNodeId, true);\n } else {\n flag = selectNode(event, focusedNodeId);\n }\n }\n }\n event.stopPropagation();\n break;\n case \"ArrowDown\":\n if (multiSelect && event.shiftKey) {\n selectNextNode(event, focusedNodeId);\n }\n focusNextNode(event, focusedNodeId);\n flag = true;\n break;\n case \"ArrowUp\":\n if (multiSelect && event.shiftKey) {\n selectPreviousNode(event, focusedNodeId);\n }\n focusPreviousNode(event, focusedNodeId);\n flag = true;\n break;\n case \"ArrowRight\":\n flag = handleNextArrow(event);\n break;\n case \"ArrowLeft\":\n flag = handlePreviousArrow(event);\n break;\n case \"Home\":\n if (\n multiSelect &&\n ctrlPressed &&\n event.shiftKey &&\n !isDisabled(focusedNodeId)\n ) {\n rangeSelectToFirst(event, focusedNodeId);\n }\n focusFirstNode(event);\n flag = true;\n break;\n case \"End\":\n if (\n multiSelect &&\n ctrlPressed &&\n event.shiftKey &&\n !isDisabled(focusedNodeId)\n ) {\n rangeSelectToLast(event, focusedNodeId);\n }\n focusLastNode(event);\n flag = true;\n break;\n default:\n if (key === \"*\") {\n expandAllSiblings(event, focusedNodeId);\n flag = true;\n } else if (multiSelect && ctrlPressed && key.toLowerCase() === \"a\") {\n selectAllNodes(event);\n flag = true;\n } else if (\n !ctrlPressed &&\n !event.shiftKey &&\n isPrintableCharacter(key)\n ) {\n focusByFirstCharacter(event, focusedNodeId, key);\n flag = true;\n }\n }\n if (flag) {\n event.preventDefault();\n event.stopPropagation();\n }\n onKeyDown?.(event);\n };\n\n const handleFocus = (event: React.FocusEvent<HTMLUListElement>) => {\n // if the event bubbled (which is React specific) we don't want to steal focus\n if (event.target === event.currentTarget) {\n const firstSelected = Array.isArray(selected) ? selected[0] : selected;\n focus(event, firstSelected || getNavigableChildrenIds(null)[0]);\n }\n onFocus?.(event);\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLUListElement>) => {\n setFocusedNodeId(null);\n onBlur?.(event);\n };\n\n const activeDescendant =\n focusedNodeId && nodeMap.current[focusedNodeId]\n ? nodeMap.current[focusedNodeId].idAttribute\n : null;\n\n const treeControlContext = useMemo(\n () => ({\n treeId,\n mode,\n collapsible,\n toggleExpansion,\n multiSelect,\n selectNode: selectable ? selectNode : noopSelection,\n selectRange: selectable ? selectRange : noopSelection,\n disabledItemsFocusable,\n registerNode,\n unregisterNode,\n mapFirstChar,\n unMapFirstChar,\n focus,\n }),\n [\n registerNode,\n unregisterNode,\n mapFirstChar,\n unMapFirstChar,\n toggleExpansion,\n selectable,\n selectNode,\n selectRange,\n mode,\n collapsible,\n multiSelect,\n disabledItemsFocusable,\n treeId,\n ],\n );\n\n const treeStateContext = useMemo(\n () => ({\n isExpanded,\n isSelected,\n isFocused,\n isDisabled,\n isChildSelected,\n }),\n [isDisabled, isExpanded, isFocused, isSelected, isChildSelected],\n );\n\n return (\n <TreeViewControlContext.Provider value={treeControlContext}>\n <TreeViewStateContext.Provider value={treeStateContext}>\n <DescendantProvider>\n <ul\n ref={handleRef}\n id={idProp}\n className={cx(classes.root, className)}\n {...(treeviewMode && {\n id: treeId,\n role: \"tree\",\n \"aria-multiselectable\": multiSelect,\n \"aria-activedescendant\": activeDescendant,\n tabIndex: 0,\n onFocus: handleFocus,\n onBlur: handleBlur,\n onKeyDown: handleKeyDown,\n })}\n {...others}\n >\n {children}\n </ul>\n </DescendantProvider>\n </TreeViewStateContext.Provider>\n </TreeViewControlContext.Provider>\n );\n});\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TreeView.js","sources":["../../../../src/VerticalNavigation/TreeView/TreeView.tsx"],"sourcesContent":["import { forwardRef, useCallback, useMemo, useRef, useState } from \"react\";\n\nimport { useControlled } from \"../../hooks/useControlled\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { DescendantProvider } from \"../../TreeView/internals/DescendantProvider\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { staticClasses, useClasses } from \"./TreeView.styles\";\nimport {\n NavigationMode,\n TreeViewControlContext,\n TreeViewStateContext,\n} from \"./TreeViewContext\";\n\nexport { staticClasses as treeViewClasses };\n\nexport type HvVerticalNavigationTreeViewClasses = ExtractNames<\n typeof useClasses\n>;\n\nexport interface HvVerticalNavigationTreeViewProps\n extends HvBaseProps<HTMLUListElement, \"onChange\" | \"onToggle\"> {\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvVerticalNavigationTreeViewClasses;\n /** Modus operandi (role) of the widget instance. */\n mode?: NavigationMode;\n /** Enables selection. @default false */\n selectable?: boolean;\n /** Enables the simultaneous selection of multiple items. @default false */\n multiSelect?: boolean;\n /** The selected nodes' ids. When `multiSelect` is true this takes an array of strings; when false (default) a string. */\n selected?: string[] | string;\n /**\n * When uncontrolled, defines the initial selected nodes' ids.\n * When `multiSelect` is true this takes an array of strings; when false (default) a string.\n * @default []\n */\n defaultSelected?: string[] | string;\n /** Can non-leaf nodes be collapsed / expanded. */\n collapsible?: boolean;\n /** Callback fired when a tree item is selected. */\n onChange?: (\n event: React.KeyboardEvent<HTMLUListElement>,\n nodeId: string | string[],\n payloads: any,\n ) => void;\n /** Expanded nodes' ids. */\n expanded?: string[];\n /** When uncontrolled, defines the initial expanded nodes' ids. @default [] */\n defaultExpanded?: string[];\n /** Callback fired when tree items are expanded/collapsed. */\n onToggle?: (\n event: React.KeyboardEvent<HTMLUListElement>,\n nodeIds: string[],\n ) => void;\n /** If `true`, will allow focus on disabled items. @default false */\n disabledItemsFocusable?: boolean;\n}\nfunction isPrintableCharacter(string: string) {\n return string && string.length === 1 && string.match(/\\S/);\n}\n\nfunction findNextFirstChar(\n firstChars: string[],\n startIndex: number,\n char: string,\n) {\n return firstChars.slice(startIndex).findIndex((c) => c === char);\n}\n\nfunction noopSelection() {\n return false;\n}\n\nexport const HvVerticalNavigationTreeView = forwardRef<\n HTMLUListElement,\n HvVerticalNavigationTreeViewProps\n>((props, ref) => {\n const {\n id: idProp,\n className,\n classes: classesProp,\n mode = \"treeview\",\n collapsible = false,\n expanded: expandedProp,\n defaultExpanded = [],\n onToggle,\n selectable = false,\n multiSelect: multiSelectProp = false,\n selected: selectedProp,\n defaultSelected = [],\n onChange,\n disabledItemsFocusable = false,\n onFocus,\n onBlur,\n onKeyDown,\n children,\n ...others\n } = useDefaultProps(\"HvVerticalNavigationTreeView\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const treeviewMode = mode === \"treeview\";\n const multiSelect = selectable && multiSelectProp;\n\n const treeId = useUniqueId(idProp);\n const treeRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(treeRef, ref);\n\n const [expanded, setExpandedState] = useControlled(\n expandedProp,\n defaultExpanded,\n );\n\n const [selected, setSelectedState] = useControlled(\n selectedProp,\n defaultSelected,\n );\n\n const [focusedNodeId, setFocusedNodeId] = useState<string | null>(null);\n\n const nodeMap = useRef<Record<string, any>>({});\n\n const firstCharMap = useRef<Record<string, any>>({});\n\n const isExpanded = useCallback(\n (id: string) =>\n !collapsible ||\n (Array.isArray(expanded) ? expanded.indexOf(id) !== -1 : false),\n [collapsible, expanded],\n );\n\n const isExpandable = useCallback(\n (id: string) =>\n collapsible && nodeMap.current[id] && nodeMap.current[id].expandable,\n [collapsible],\n );\n\n const isSelected = useCallback(\n (id: string) =>\n selectable &&\n (Array.isArray(selected) ? selected.indexOf(id) !== -1 : selected === id),\n [selectable, selected],\n );\n\n const isSelectable = useCallback(\n (id: string) =>\n selectable && nodeMap.current[id] && nodeMap.current[id].selectable,\n [selectable],\n );\n\n const isDisabled = useCallback((id: string) => {\n let node = nodeMap.current[id];\n\n // This can be called before the node has been added to the node map.\n if (!node) {\n return false;\n }\n\n if (node.disabled) {\n return true;\n }\n\n while (node.parentId != null) {\n node = nodeMap.current[node.parentId];\n if (node.disabled) {\n return true;\n }\n }\n\n return false;\n }, []);\n\n const isFocused = useCallback(\n (id: string) => focusedNodeId === id,\n [focusedNodeId],\n );\n\n const isChildSelected = useCallback(\n // the second part of the condition is to ensure that the id we're\n // looking at is actually of a child (ie, there's at least one \"-\")\n (id: string) => {\n return Array<string>()\n .concat(selected)\n .some((s) => s.startsWith(id) && s.includes(\"-\"));\n },\n [selected],\n );\n\n const getChildrenIds = (id: string | null) =>\n Object.keys(nodeMap.current)\n .map((key) => {\n return nodeMap.current[key];\n })\n .filter((node) => node.parentId === id)\n .sort((a, b) => a.index - b.index)\n .map((child) => child.id);\n\n const getNavigableChildrenIds = useCallback(\n (id: string | null) => {\n let childrenIds = getChildrenIds(id);\n\n if (!disabledItemsFocusable) {\n childrenIds = childrenIds.filter((node) => !isDisabled(node));\n }\n return childrenIds;\n },\n [disabledItemsFocusable, isDisabled],\n );\n\n const getNextNode = useCallback(\n (id: string) => {\n // If expanded get first child\n if (isExpanded(id) && getNavigableChildrenIds(id).length > 0) {\n return getNavigableChildrenIds(id)[0];\n }\n\n let node = nodeMap.current[id];\n while (node != null) {\n // Try to get next sibling\n const siblings = getNavigableChildrenIds(node.parentId);\n const nextSibling = siblings[siblings.indexOf(node.id) + 1];\n\n if (nextSibling) {\n return nextSibling;\n }\n\n // If the sibling does not exist, go up a level to the parent and try again.\n node = nodeMap.current[node.parentId];\n }\n\n return null;\n },\n [getNavigableChildrenIds, isExpanded],\n );\n\n const getPreviousNode = (id: string) => {\n const node = nodeMap.current[id];\n const siblings = getNavigableChildrenIds(node.parentId);\n const nodeIndex = siblings.indexOf(id);\n\n if (nodeIndex === 0) {\n return node.parentId;\n }\n\n let currentNode = siblings[nodeIndex - 1];\n while (\n isExpanded(currentNode) &&\n getNavigableChildrenIds(currentNode).length > 0\n ) {\n currentNode = getNavigableChildrenIds(currentNode).pop();\n }\n\n return currentNode;\n };\n\n const getLastNode = () => {\n let lastNode = getNavigableChildrenIds(null).pop();\n\n while (isExpanded(lastNode)) {\n lastNode = getNavigableChildrenIds(lastNode).pop();\n }\n return lastNode;\n };\n const getFirstNode = () => getNavigableChildrenIds(null)[0];\n const getParent = (id: any) => nodeMap.current[id].parentId;\n\n /**\n * This is used to determine the start and end of a selection range so\n * we can get the nodes between the two border nodes.\n *\n * It finds the nodes' common ancestor using\n * a naive implementation of a lowest common ancestor algorithm\n * (https://en.wikipedia.org/wiki/Lowest_common_ancestor).\n * Then compares the ancestor's 2 children that are ancestors of nodeA and NodeB\n * so we can compare their indexes to work out which node comes first in a depth first search.\n * (https://en.wikipedia.org/wiki/Depth-first_search)\n *\n * Another way to put it is which node is shallower in a trémaux tree\n * https://en.wikipedia.org/wiki/Tr%C3%A9maux_tree\n */\n const findOrderInTremauxTree = useCallback(\n (nodeAId: string, nodeBId: string) => {\n if (nodeAId === nodeBId) {\n return [nodeAId, nodeBId];\n }\n\n const nodeA = nodeMap.current[nodeAId];\n const nodeB = nodeMap.current[nodeBId];\n\n if (nodeA.parentId === nodeB.id || nodeB.parentId === nodeA.id) {\n return nodeB.parentId === nodeA.id\n ? [nodeA.id, nodeB.id]\n : [nodeB.id, nodeA.id];\n }\n\n const aFamily = [nodeA.id];\n const bFamily = [nodeB.id];\n\n let aAncestor = nodeA.parentId;\n let bAncestor = nodeB.parentId;\n\n let aAncestorIsCommon = bFamily.indexOf(aAncestor) !== -1;\n let bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;\n\n let continueA = true;\n let continueB = true;\n\n while (!bAncestorIsCommon && !aAncestorIsCommon) {\n if (continueA) {\n aFamily.push(aAncestor);\n aAncestorIsCommon = bFamily.indexOf(aAncestor) !== -1;\n continueA = aAncestor !== null;\n if (!aAncestorIsCommon && continueA) {\n aAncestor = nodeMap.current[aAncestor].parentId;\n }\n }\n\n if (continueB && !aAncestorIsCommon) {\n bFamily.push(bAncestor);\n bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;\n continueB = bAncestor !== null;\n if (!bAncestorIsCommon && continueB) {\n bAncestor = nodeMap.current[bAncestor].parentId;\n }\n }\n }\n\n const commonAncestor = aAncestorIsCommon ? aAncestor : bAncestor;\n const ancestorFamily = getChildrenIds(commonAncestor);\n\n const aSide = aFamily[aFamily.indexOf(commonAncestor) - 1];\n const bSide = bFamily[bFamily.indexOf(commonAncestor) - 1];\n\n return ancestorFamily.indexOf(aSide) < ancestorFamily.indexOf(bSide)\n ? [nodeAId, nodeBId]\n : [nodeBId, nodeAId];\n },\n [],\n );\n\n const getNodesInRange = useCallback(\n (nodeA: string, nodeB: string) => {\n if (nodeA && nodeB) {\n const [first, last] = findOrderInTremauxTree(nodeA, nodeB);\n const nodes = [first];\n\n let current = first;\n\n while (current !== last) {\n current = getNextNode(current);\n nodes.push(current);\n }\n\n return nodes;\n }\n return [];\n },\n [findOrderInTremauxTree, getNextNode],\n );\n\n const focus = (\n event:\n | React.KeyboardEvent<HTMLUListElement>\n | React.FocusEvent<HTMLUListElement>,\n id: any,\n ) => {\n if (id) {\n setFocusedNodeId(id);\n\n if (nodeMap.current[id]?.onFocus) {\n nodeMap.current[id].onFocus(event);\n }\n }\n };\n\n const focusNextNode = (\n event: React.KeyboardEvent<HTMLUListElement>,\n id: any,\n ) => focus(event, getNextNode(id));\n const focusPreviousNode = (\n event: React.KeyboardEvent<HTMLUListElement>,\n id: any,\n ) => focus(event, getPreviousNode(id));\n const focusFirstNode = (event: React.KeyboardEvent<HTMLUListElement>) =>\n focus(event, getFirstNode());\n const focusLastNode = (event: React.KeyboardEvent<HTMLUListElement>) =>\n focus(event, getLastNode());\n\n const focusByFirstCharacter = (\n event: React.KeyboardEvent<HTMLUListElement>,\n id: any,\n char: any,\n ) => {\n let start;\n let index;\n const lowercaseChar = char.toLowerCase();\n\n const firstCharIds: string[] = [];\n const firstChars: string[] = [];\n // This really only works since the ids are strings\n Object.keys(firstCharMap.current).forEach((nodeId) => {\n const firstChar = firstCharMap.current[nodeId];\n const map = nodeMap.current[nodeId];\n const visible = map.parentId ? isExpanded(map.parentId) : true;\n const shouldBeSkipped = disabledItemsFocusable\n ? false\n : isDisabled(nodeId);\n\n if (visible && !shouldBeSkipped) {\n firstCharIds.push(nodeId);\n firstChars.push(firstChar);\n }\n });\n\n // Get start index for search based on position of currentItem\n start = firstCharIds.indexOf(id) + 1;\n if (start >= firstCharIds.length) {\n start = 0;\n }\n\n // Check remaining slots in the menu\n index = findNextFirstChar(firstChars, start, lowercaseChar);\n\n // If not found in remaining slots, check from beginning\n if (index === -1) {\n index = findNextFirstChar(firstChars, 0, lowercaseChar);\n }\n\n // If match was found...\n if (index > -1) {\n focus(event, firstCharIds[index]);\n }\n };\n\n const toggleExpansion = useCallback(\n (event: React.KeyboardEvent<HTMLUListElement>, value = focusedNodeId) => {\n if (!value) return;\n\n const newExpanded = expanded.includes(value)\n ? expanded.filter((id) => id !== value)\n : [value].concat(expanded);\n\n onToggle?.(event, newExpanded);\n\n setExpandedState(newExpanded);\n },\n [expanded, focusedNodeId, onToggle, setExpandedState],\n );\n\n const expandAllSiblings = (\n event: React.KeyboardEvent<HTMLUListElement>,\n id: any,\n ) => {\n const map = nodeMap.current[id];\n const siblings = getChildrenIds(map.parentId);\n\n const diff = siblings.filter(\n (child) => isExpandable(child) && !isExpanded(child),\n );\n\n const newExpanded = expanded.concat(diff);\n\n if (diff.length > 0) {\n setExpandedState(newExpanded);\n onToggle?.(event, newExpanded);\n }\n };\n\n const lastSelectedNode = useRef<HTMLDivElement | null>(null);\n const lastSelectionWasRange = useRef(false);\n const currentRangeSelection = useRef<HTMLDivElement[]>([]);\n\n const isDivElement = (element: any): element is HTMLDivElement => {\n return (element as HTMLDivElement).nodeType === 1;\n };\n\n const handleRangeArrowSelect = useCallback(\n (\n event: React.KeyboardEvent<HTMLUListElement>,\n nodes: { start?: any; next?: any; current?: any },\n ) => {\n let base = Array<string>().concat(selected);\n const { start, next, current } = nodes;\n\n if (!next || !current) {\n return;\n }\n\n if (\n isDivElement(current) &&\n currentRangeSelection.current.indexOf(current) === -1\n ) {\n currentRangeSelection.current = [];\n }\n\n if (lastSelectionWasRange.current) {\n if (\n isDivElement(next) &&\n currentRangeSelection.current.indexOf(next) !== -1\n ) {\n base = base.filter((id) => id === start || id !== current);\n currentRangeSelection.current = currentRangeSelection.current.filter(\n (id) => id === start || id !== current,\n );\n } else {\n base.push(next);\n currentRangeSelection.current.push(next);\n }\n } else {\n base.push(next);\n currentRangeSelection.current.push(current, next);\n }\n onChange?.(\n event,\n base,\n base.map((id) => nodeMap.current[id]?.payload),\n );\n setSelectedState(base);\n },\n [onChange, selected, setSelectedState],\n );\n\n const handleRangeSelect = useCallback(\n (\n event: React.KeyboardEvent<HTMLUListElement>,\n nodes: { start?: any; end?: any; current?: any },\n ) => {\n let base = Array<string>().concat(selected);\n const { start, end } = nodes;\n // If last selection was a range selection ignore nodes that were selected.\n if (lastSelectionWasRange.current) {\n base = base.filter(\n (id) => !currentRangeSelection.current.includes(id as any),\n );\n }\n\n let range = getNodesInRange(start, end);\n range = range.filter((node) => !isDisabled(node));\n currentRangeSelection.current = range;\n let newSelected = base.concat(range);\n newSelected = newSelected.filter(\n (id, i) => newSelected.indexOf(id) === i,\n );\n\n onChange?.(\n event,\n newSelected,\n newSelected.map((id) => nodeMap.current[id]?.payload),\n );\n\n setSelectedState(newSelected);\n },\n [getNodesInRange, isDisabled, onChange, selected, setSelectedState],\n );\n\n const handleMultipleSelect = useCallback(\n (event: React.KeyboardEvent<HTMLUListElement>, value: any) => {\n const newSelected = selected.includes(value)\n ? (selected as string[]).filter((id) => id !== value)\n : [value].concat(selected);\n onChange?.(\n event,\n newSelected,\n newSelected.map((id) => nodeMap.current[id]?.payload),\n );\n setSelectedState(newSelected);\n },\n [onChange, selected, setSelectedState],\n );\n\n const handleSingleSelect = useCallback(\n (event: React.KeyboardEvent<HTMLUListElement>, value: any) => {\n const newSelected = multiSelect ? [value] : value;\n if (onChange) {\n const nodeValue = nodeMap.current[newSelected]?.payload;\n onChange(event, newSelected, multiSelect ? [nodeValue] : nodeValue);\n }\n\n setSelectedState(newSelected);\n },\n [multiSelect, onChange, setSelectedState],\n );\n\n const selectNode = useCallback(\n (\n event: React.KeyboardEvent<HTMLUListElement>,\n id: any,\n multiple = false,\n ) => {\n if (id && isSelectable(id)) {\n if (multiple) {\n handleMultipleSelect(event, id);\n } else {\n handleSingleSelect(event, id);\n }\n lastSelectedNode.current = id;\n lastSelectionWasRange.current = false;\n currentRangeSelection.current = [];\n\n return true;\n }\n return false;\n },\n [handleMultipleSelect, handleSingleSelect, isSelectable],\n );\n\n const selectRange = useCallback(\n (\n event: React.KeyboardEvent<HTMLUListElement>,\n nodes: { start?: any; end?: any; current?: HTMLDivElement | null },\n stacked = false,\n ) => {\n const { start = lastSelectedNode.current, end, current } = nodes;\n if (stacked) {\n handleRangeArrowSelect(event, { start, next: end, current });\n } else if (start != null && end != null) {\n handleRangeSelect(event, { start, end });\n }\n lastSelectionWasRange.current = true;\n },\n [handleRangeArrowSelect, handleRangeSelect],\n );\n\n const rangeSelectToFirst = (\n event: React.KeyboardEvent<HTMLUListElement>,\n id: any,\n ) => {\n if (!lastSelectedNode.current) {\n lastSelectedNode.current = id;\n }\n\n const start = lastSelectionWasRange.current ? lastSelectedNode.current : id;\n\n selectRange(event, {\n start,\n end: getFirstNode(),\n });\n };\n\n const rangeSelectToLast = (\n event: React.KeyboardEvent<HTMLUListElement>,\n id: any,\n ) => {\n if (!lastSelectedNode.current) {\n lastSelectedNode.current = id;\n }\n\n const start = lastSelectionWasRange.current ? lastSelectedNode.current : id;\n\n selectRange(event, {\n start,\n end: getLastNode(),\n });\n };\n\n const selectNextNode = (\n event: React.KeyboardEvent<HTMLUListElement>,\n id: any,\n ) => {\n if (!isDisabled(getNextNode(id))) {\n selectRange(\n event,\n {\n end: getNextNode(id),\n current: id,\n },\n true,\n );\n }\n };\n\n const selectPreviousNode = (\n event: React.KeyboardEvent<HTMLUListElement>,\n id: any,\n ) => {\n if (!isDisabled(getPreviousNode(id))) {\n selectRange(\n event,\n {\n end: getPreviousNode(id),\n current: id,\n },\n true,\n );\n }\n };\n\n const selectAllNodes = (event: React.KeyboardEvent<HTMLUListElement>) => {\n selectRange(event, { start: getFirstNode(), end: getLastNode() });\n };\n\n /*\n * Mapping Helpers\n */\n const registerNode = useCallback((node: any) => {\n const {\n id,\n index,\n parentId,\n expandable,\n idAttribute,\n disabled,\n selectable: nodeSelectable,\n onFocus: nodeOnFocus,\n payload,\n } = node;\n\n nodeMap.current[id] = {\n id,\n index,\n parentId,\n expandable,\n idAttribute,\n disabled,\n selectable: nodeSelectable,\n onFocus: nodeOnFocus,\n payload,\n };\n }, []);\n\n const unregisterNode = useCallback((id: any) => {\n const newMap = { ...nodeMap.current };\n delete newMap[id];\n nodeMap.current = newMap;\n\n setFocusedNodeId((oldFocusedNodeId) => {\n if (\n oldFocusedNodeId === id &&\n treeRef.current &&\n treeRef.current ===\n (treeRef.current.ownerDocument || document).activeElement\n ) {\n return getChildrenIds(null)[0];\n }\n return oldFocusedNodeId;\n });\n }, []);\n\n const mapFirstChar = useCallback((id: any, firstChar: any) => {\n firstCharMap.current[id] = firstChar;\n }, []);\n\n const unMapFirstChar = useCallback((id: any) => {\n const newMap = { ...firstCharMap.current };\n delete newMap[id];\n firstCharMap.current = newMap;\n }, []);\n\n /**\n * Event handlers and Navigation\n */\n const handleNextArrow = (event: React.KeyboardEvent<HTMLUListElement>) => {\n if (!focusedNodeId) return false;\n if (isExpandable(focusedNodeId)) {\n if (isExpanded(focusedNodeId)) {\n focusNextNode(event, focusedNodeId);\n } else if (!isDisabled(focusedNodeId)) {\n toggleExpansion(event);\n }\n }\n return true;\n };\n\n const handlePreviousArrow = (\n event: React.KeyboardEvent<HTMLUListElement>,\n ) => {\n if (!focusedNodeId) return false;\n if (isExpanded(focusedNodeId) && !isDisabled(focusedNodeId)) {\n toggleExpansion(event, focusedNodeId);\n return true;\n }\n\n const parent = getParent(focusedNodeId);\n if (parent) {\n focus(event, parent);\n return true;\n }\n return false;\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>) => {\n let flag = false;\n const { key } = event;\n\n // If the tree is empty there will be no focused node\n if (\n event.altKey ||\n event.currentTarget !== event.target ||\n !focusedNodeId\n ) {\n return;\n }\n\n const ctrlPressed = event.ctrlKey || event.metaKey;\n switch (key) {\n case \" \":\n if (isSelectable(focusedNodeId) && !isDisabled(focusedNodeId)) {\n if (multiSelect && event.shiftKey) {\n selectRange(event, { end: focusedNodeId });\n flag = true;\n } else if (multiSelect) {\n flag = selectNode(event, focusedNodeId, true);\n } else {\n flag = selectNode(event, focusedNodeId);\n }\n }\n event.stopPropagation();\n break;\n case \"Enter\":\n if (!isDisabled(focusedNodeId)) {\n if (isExpandable(focusedNodeId)) {\n toggleExpansion(event);\n flag = true;\n } else if (isSelectable(focusedNodeId)) {\n if (multiSelect && event.shiftKey) {\n selectRange(event, { end: focusedNodeId });\n flag = true;\n } else if (multiSelect) {\n flag = selectNode(event, focusedNodeId, true);\n } else {\n flag = selectNode(event, focusedNodeId);\n }\n }\n }\n event.stopPropagation();\n break;\n case \"ArrowDown\":\n if (multiSelect && event.shiftKey) {\n selectNextNode(event, focusedNodeId);\n }\n focusNextNode(event, focusedNodeId);\n flag = true;\n break;\n case \"ArrowUp\":\n if (multiSelect && event.shiftKey) {\n selectPreviousNode(event, focusedNodeId);\n }\n focusPreviousNode(event, focusedNodeId);\n flag = true;\n break;\n case \"ArrowRight\":\n flag = handleNextArrow(event);\n break;\n case \"ArrowLeft\":\n flag = handlePreviousArrow(event);\n break;\n case \"Home\":\n if (\n multiSelect &&\n ctrlPressed &&\n event.shiftKey &&\n !isDisabled(focusedNodeId)\n ) {\n rangeSelectToFirst(event, focusedNodeId);\n }\n focusFirstNode(event);\n flag = true;\n break;\n case \"End\":\n if (\n multiSelect &&\n ctrlPressed &&\n event.shiftKey &&\n !isDisabled(focusedNodeId)\n ) {\n rangeSelectToLast(event, focusedNodeId);\n }\n focusLastNode(event);\n flag = true;\n break;\n default:\n if (key === \"*\") {\n expandAllSiblings(event, focusedNodeId);\n flag = true;\n } else if (multiSelect && ctrlPressed && key.toLowerCase() === \"a\") {\n selectAllNodes(event);\n flag = true;\n } else if (\n !ctrlPressed &&\n !event.shiftKey &&\n isPrintableCharacter(key)\n ) {\n focusByFirstCharacter(event, focusedNodeId, key);\n flag = true;\n }\n }\n if (flag) {\n event.preventDefault();\n event.stopPropagation();\n }\n onKeyDown?.(event);\n };\n\n const handleFocus = (event: React.FocusEvent<HTMLUListElement>) => {\n // if the event bubbled (which is React specific) we don't want to steal focus\n if (event.target === event.currentTarget) {\n const firstSelected = Array.isArray(selected) ? selected[0] : selected;\n focus(event, firstSelected || getNavigableChildrenIds(null)[0]);\n }\n onFocus?.(event);\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLUListElement>) => {\n setFocusedNodeId(null);\n onBlur?.(event);\n };\n\n const activeDescendant =\n focusedNodeId && nodeMap.current[focusedNodeId]\n ? nodeMap.current[focusedNodeId].idAttribute\n : null;\n\n const treeControlContext = useMemo(\n () => ({\n treeId,\n mode,\n collapsible,\n toggleExpansion,\n multiSelect,\n selectNode: selectable ? selectNode : noopSelection,\n selectRange: selectable ? selectRange : noopSelection,\n disabledItemsFocusable,\n registerNode,\n unregisterNode,\n mapFirstChar,\n unMapFirstChar,\n focus,\n }),\n [\n registerNode,\n unregisterNode,\n mapFirstChar,\n unMapFirstChar,\n toggleExpansion,\n selectable,\n selectNode,\n selectRange,\n mode,\n collapsible,\n multiSelect,\n disabledItemsFocusable,\n treeId,\n ],\n );\n\n const treeStateContext = useMemo(\n () => ({\n isExpanded,\n isSelected,\n isFocused,\n isDisabled,\n isChildSelected,\n }),\n [isDisabled, isExpanded, isFocused, isSelected, isChildSelected],\n );\n\n return (\n <TreeViewControlContext.Provider value={treeControlContext}>\n <TreeViewStateContext.Provider value={treeStateContext}>\n <DescendantProvider>\n <ul\n ref={handleRef}\n id={idProp}\n className={cx(classes.root, className)}\n {...(treeviewMode && {\n id: treeId,\n role: \"tree\",\n \"aria-multiselectable\": multiSelect,\n \"aria-activedescendant\": activeDescendant,\n tabIndex: 0,\n onFocus: handleFocus,\n onBlur: handleBlur,\n onKeyDown: handleKeyDown,\n })}\n {...others}\n >\n {children}\n </ul>\n </DescendantProvider>\n </TreeViewStateContext.Provider>\n </TreeViewControlContext.Provider>\n );\n});\n"],"names":[],"mappings":";;;;;;;;;;AA4DA,SAAS,qBAAqB,QAAgB;AAC5C,SAAO,UAAU,OAAO,WAAW,KAAK,OAAO,MAAM,IAAI;AAC3D;AAEA,SAAS,kBACP,YACA,YACA,MACA;AACO,SAAA,WAAW,MAAM,UAAU,EAAE,UAAU,CAAC,MAAM,MAAM,IAAI;AACjE;AAEA,SAAS,gBAAgB;AAChB,SAAA;AACT;AAEO,MAAM,+BAA+B,WAG1C,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,OAAO;AAAA,IACP,cAAc;AAAA,IACd,UAAU;AAAA,IACV,kBAAkB,CAAC;AAAA,IACnB;AAAA,IACA,aAAa;AAAA,IACb,aAAa,kBAAkB;AAAA,IAC/B,UAAU;AAAA,IACV,kBAAkB,CAAC;AAAA,IACnB;AAAA,IACA,yBAAyB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,gCAAgC,KAAK;AAEzD,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,eAAe,SAAS;AAC9B,QAAM,cAAc,cAAc;AAE5B,QAAA,SAAS,YAAY,MAAM;AAC3B,QAAA,UAAU,OAAuB,IAAI;AACrC,QAAA,YAAY,WAAW,SAAS,GAAG;AAEnC,QAAA,CAAC,UAAU,gBAAgB,IAAI;AAAA,IACnC;AAAA,IACA;AAAA,EAAA;AAGI,QAAA,CAAC,UAAU,gBAAgB,IAAI;AAAA,IACnC;AAAA,IACA;AAAA,EAAA;AAGF,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAwB,IAAI;AAEhE,QAAA,UAAU,OAA4B,CAAA,CAAE;AAExC,QAAA,eAAe,OAA4B,CAAA,CAAE;AAEnD,QAAM,aAAa;AAAA,IACjB,CAAC,OACC,CAAC,gBACA,MAAM,QAAQ,QAAQ,IAAI,SAAS,QAAQ,EAAE,MAAM,KAAK;AAAA,IAC3D,CAAC,aAAa,QAAQ;AAAA,EAAA;AAGxB,QAAM,eAAe;AAAA,IACnB,CAAC,OACC,eAAe,QAAQ,QAAQ,EAAE,KAAK,QAAQ,QAAQ,EAAE,EAAE;AAAA,IAC5D,CAAC,WAAW;AAAA,EAAA;AAGd,QAAM,aAAa;AAAA,IACjB,CAAC,OACC,eACC,MAAM,QAAQ,QAAQ,IAAI,SAAS,QAAQ,EAAE,MAAM,KAAK,aAAa;AAAA,IACxE,CAAC,YAAY,QAAQ;AAAA,EAAA;AAGvB,QAAM,eAAe;AAAA,IACnB,CAAC,OACC,cAAc,QAAQ,QAAQ,EAAE,KAAK,QAAQ,QAAQ,EAAE,EAAE;AAAA,IAC3D,CAAC,UAAU;AAAA,EAAA;AAGP,QAAA,aAAa,YAAY,CAAC,OAAe;AACzC,QAAA,OAAO,QAAQ,QAAQ,EAAE;AAG7B,QAAI,CAAC,MAAM;AACF,aAAA;AAAA,IACT;AAEA,QAAI,KAAK,UAAU;AACV,aAAA;AAAA,IACT;AAEO,WAAA,KAAK,YAAY,MAAM;AACrB,aAAA,QAAQ,QAAQ,KAAK,QAAQ;AACpC,UAAI,KAAK,UAAU;AACV,eAAA;AAAA,MACT;AAAA,IACF;AAEO,WAAA;AAAA,EACT,GAAG,CAAE,CAAA;AAEL,QAAM,YAAY;AAAA,IAChB,CAAC,OAAe,kBAAkB;AAAA,IAClC,CAAC,aAAa;AAAA,EAAA;AAGhB,QAAM,kBAAkB;AAAA;AAAA;AAAA,IAGtB,CAAC,OAAe;AACd,aAAO,MAAc,EAClB,OAAO,QAAQ,EACf,KAAK,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,GAAG,CAAC;AAAA,IACpD;AAAA,IACA,CAAC,QAAQ;AAAA,EAAA;AAGL,QAAA,iBAAiB,CAAC,OACtB,OAAO,KAAK,QAAQ,OAAO,EACxB,IAAI,CAAC,QAAQ;AACL,WAAA,QAAQ,QAAQ,GAAG;AAAA,EAAA,CAC3B,EACA,OAAO,CAAC,SAAS,KAAK,aAAa,EAAE,EACrC,KAAK,CAAC,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK,EAChC,IAAI,CAAC,UAAU,MAAM,EAAE;AAE5B,QAAM,0BAA0B;AAAA,IAC9B,CAAC,OAAsB;AACjB,UAAA,cAAc,eAAe,EAAE;AAEnC,UAAI,CAAC,wBAAwB;AAC3B,sBAAc,YAAY,OAAO,CAAC,SAAS,CAAC,WAAW,IAAI,CAAC;AAAA,MAC9D;AACO,aAAA;AAAA,IACT;AAAA,IACA,CAAC,wBAAwB,UAAU;AAAA,EAAA;AAGrC,QAAM,cAAc;AAAA,IAClB,CAAC,OAAe;AAEd,UAAI,WAAW,EAAE,KAAK,wBAAwB,EAAE,EAAE,SAAS,GAAG;AACrD,eAAA,wBAAwB,EAAE,EAAE,CAAC;AAAA,MACtC;AAEI,UAAA,OAAO,QAAQ,QAAQ,EAAE;AAC7B,aAAO,QAAQ,MAAM;AAEb,cAAA,WAAW,wBAAwB,KAAK,QAAQ;AACtD,cAAM,cAAc,SAAS,SAAS,QAAQ,KAAK,EAAE,IAAI,CAAC;AAE1D,YAAI,aAAa;AACR,iBAAA;AAAA,QACT;AAGO,eAAA,QAAQ,QAAQ,KAAK,QAAQ;AAAA,MACtC;AAEO,aAAA;AAAA,IACT;AAAA,IACA,CAAC,yBAAyB,UAAU;AAAA,EAAA;AAGhC,QAAA,kBAAkB,CAAC,OAAe;AAChC,UAAA,OAAO,QAAQ,QAAQ,EAAE;AACzB,UAAA,WAAW,wBAAwB,KAAK,QAAQ;AAChD,UAAA,YAAY,SAAS,QAAQ,EAAE;AAErC,QAAI,cAAc,GAAG;AACnB,aAAO,KAAK;AAAA,IACd;AAEI,QAAA,cAAc,SAAS,YAAY,CAAC;AACxC,WACE,WAAW,WAAW,KACtB,wBAAwB,WAAW,EAAE,SAAS,GAC9C;AACc,oBAAA,wBAAwB,WAAW,EAAE,IAAI;AAAA,IACzD;AAEO,WAAA;AAAA,EAAA;AAGT,QAAM,cAAc,MAAM;AACxB,QAAI,WAAW,wBAAwB,IAAI,EAAE,IAAI;AAE1C,WAAA,WAAW,QAAQ,GAAG;AAChB,iBAAA,wBAAwB,QAAQ,EAAE,IAAI;AAAA,IACnD;AACO,WAAA;AAAA,EAAA;AAET,QAAM,eAAe,MAAM,wBAAwB,IAAI,EAAE,CAAC;AAC1D,QAAM,YAAY,CAAC,OAAY,QAAQ,QAAQ,EAAE,EAAE;AAgBnD,QAAM,yBAAyB;AAAA,IAC7B,CAAC,SAAiB,YAAoB;AACpC,UAAI,YAAY,SAAS;AAChB,eAAA,CAAC,SAAS,OAAO;AAAA,MAC1B;AAEM,YAAA,QAAQ,QAAQ,QAAQ,OAAO;AAC/B,YAAA,QAAQ,QAAQ,QAAQ,OAAO;AAErC,UAAI,MAAM,aAAa,MAAM,MAAM,MAAM,aAAa,MAAM,IAAI;AAC9D,eAAO,MAAM,aAAa,MAAM,KAC5B,CAAC,MAAM,IAAI,MAAM,EAAE,IACnB,CAAC,MAAM,IAAI,MAAM,EAAE;AAAA,MACzB;AAEM,YAAA,UAAU,CAAC,MAAM,EAAE;AACnB,YAAA,UAAU,CAAC,MAAM,EAAE;AAEzB,UAAI,YAAY,MAAM;AACtB,UAAI,YAAY,MAAM;AAEtB,UAAI,oBAAoB,QAAQ,QAAQ,SAAS,MAAM;AACvD,UAAI,oBAAoB,QAAQ,QAAQ,SAAS,MAAM;AAEvD,UAAI,YAAY;AAChB,UAAI,YAAY;AAET,aAAA,CAAC,qBAAqB,CAAC,mBAAmB;AAC/C,YAAI,WAAW;AACb,kBAAQ,KAAK,SAAS;AACF,8BAAA,QAAQ,QAAQ,SAAS,MAAM;AACnD,sBAAY,cAAc;AACtB,cAAA,CAAC,qBAAqB,WAAW;AACvB,wBAAA,QAAQ,QAAQ,SAAS,EAAE;AAAA,UACzC;AAAA,QACF;AAEI,YAAA,aAAa,CAAC,mBAAmB;AACnC,kBAAQ,KAAK,SAAS;AACF,8BAAA,QAAQ,QAAQ,SAAS,MAAM;AACnD,sBAAY,cAAc;AACtB,cAAA,CAAC,qBAAqB,WAAW;AACvB,wBAAA,QAAQ,QAAQ,SAAS,EAAE;AAAA,UACzC;AAAA,QACF;AAAA,MACF;AAEM,YAAA,iBAAiB,oBAAoB,YAAY;AACjD,YAAA,iBAAiB,eAAe,cAAc;AAEpD,YAAM,QAAQ,QAAQ,QAAQ,QAAQ,cAAc,IAAI,CAAC;AACzD,YAAM,QAAQ,QAAQ,QAAQ,QAAQ,cAAc,IAAI,CAAC;AAEzD,aAAO,eAAe,QAAQ,KAAK,IAAI,eAAe,QAAQ,KAAK,IAC/D,CAAC,SAAS,OAAO,IACjB,CAAC,SAAS,OAAO;AAAA,IACvB;AAAA,IACA,CAAC;AAAA,EAAA;AAGH,QAAM,kBAAkB;AAAA,IACtB,CAAC,OAAe,UAAkB;AAChC,UAAI,SAAS,OAAO;AAClB,cAAM,CAAC,OAAO,IAAI,IAAI,uBAAuB,OAAO,KAAK;AACnD,cAAA,QAAQ,CAAC,KAAK;AAEpB,YAAI,UAAU;AAEd,eAAO,YAAY,MAAM;AACvB,oBAAU,YAAY,OAAO;AAC7B,gBAAM,KAAK,OAAO;AAAA,QACpB;AAEO,eAAA;AAAA,MACT;AACA,aAAO;IACT;AAAA,IACA,CAAC,wBAAwB,WAAW;AAAA,EAAA;AAGhC,QAAA,QAAQ,CACZ,OAGA,OACG;AACH,QAAI,IAAI;AACN,uBAAiB,EAAE;AAEnB,UAAI,QAAQ,QAAQ,EAAE,GAAG,SAAS;AAChC,gBAAQ,QAAQ,EAAE,EAAE,QAAQ,KAAK;AAAA,MACnC;AAAA,IACF;AAAA,EAAA;AAGI,QAAA,gBAAgB,CACpB,OACA,OACG,MAAM,OAAO,YAAY,EAAE,CAAC;AAC3B,QAAA,oBAAoB,CACxB,OACA,OACG,MAAM,OAAO,gBAAgB,EAAE,CAAC;AACrC,QAAM,iBAAiB,CAAC,UACtB,MAAM,OAAO,cAAc;AAC7B,QAAM,gBAAgB,CAAC,UACrB,MAAM,OAAO,aAAa;AAE5B,QAAM,wBAAwB,CAC5B,OACA,IACA,SACG;AACC,QAAA;AACA,QAAA;AACE,UAAA,gBAAgB,KAAK;AAE3B,UAAM,eAAyB,CAAA;AAC/B,UAAM,aAAuB,CAAA;AAE7B,WAAO,KAAK,aAAa,OAAO,EAAE,QAAQ,CAAC,WAAW;AAC9C,YAAA,YAAY,aAAa,QAAQ,MAAM;AACvC,YAAA,MAAM,QAAQ,QAAQ,MAAM;AAClC,YAAM,UAAU,IAAI,WAAW,WAAW,IAAI,QAAQ,IAAI;AAC1D,YAAM,kBAAkB,yBACpB,QACA,WAAW,MAAM;AAEjB,UAAA,WAAW,CAAC,iBAAiB;AAC/B,qBAAa,KAAK,MAAM;AACxB,mBAAW,KAAK,SAAS;AAAA,MAC3B;AAAA,IAAA,CACD;AAGO,YAAA,aAAa,QAAQ,EAAE,IAAI;AAC/B,QAAA,SAAS,aAAa,QAAQ;AACxB,cAAA;AAAA,IACV;AAGQ,YAAA,kBAAkB,YAAY,OAAO,aAAa;AAG1D,QAAI,UAAU,IAAI;AACR,cAAA,kBAAkB,YAAY,GAAG,aAAa;AAAA,IACxD;AAGA,QAAI,QAAQ,IAAI;AACR,YAAA,OAAO,aAAa,KAAK,CAAC;AAAA,IAClC;AAAA,EAAA;AAGF,QAAM,kBAAkB;AAAA,IACtB,CAAC,OAA8C,QAAQ,kBAAkB;AACvE,UAAI,CAAC,MAAO;AAEZ,YAAM,cAAc,SAAS,SAAS,KAAK,IACvC,SAAS,OAAO,CAAC,OAAO,OAAO,KAAK,IACpC,CAAC,KAAK,EAAE,OAAO,QAAQ;AAE3B,iBAAW,OAAO,WAAW;AAE7B,uBAAiB,WAAW;AAAA,IAC9B;AAAA,IACA,CAAC,UAAU,eAAe,UAAU,gBAAgB;AAAA,EAAA;AAGhD,QAAA,oBAAoB,CACxB,OACA,OACG;AACG,UAAA,MAAM,QAAQ,QAAQ,EAAE;AACxB,UAAA,WAAW,eAAe,IAAI,QAAQ;AAE5C,UAAM,OAAO,SAAS;AAAA,MACpB,CAAC,UAAU,aAAa,KAAK,KAAK,CAAC,WAAW,KAAK;AAAA,IAAA;AAG/C,UAAA,cAAc,SAAS,OAAO,IAAI;AAEpC,QAAA,KAAK,SAAS,GAAG;AACnB,uBAAiB,WAAW;AAC5B,iBAAW,OAAO,WAAW;AAAA,IAC/B;AAAA,EAAA;AAGI,QAAA,mBAAmB,OAA8B,IAAI;AACrD,QAAA,wBAAwB,OAAO,KAAK;AACpC,QAAA,wBAAwB,OAAyB,CAAA,CAAE;AAEnD,QAAA,eAAe,CAAC,YAA4C;AAChE,WAAQ,QAA2B,aAAa;AAAA,EAAA;AAGlD,QAAM,yBAAyB;AAAA,IAC7B,CACE,OACA,UACG;AACH,UAAI,OAAO,MAAA,EAAgB,OAAO,QAAQ;AAC1C,YAAM,EAAE,OAAO,MAAM,QAAA,IAAY;AAE7B,UAAA,CAAC,QAAQ,CAAC,SAAS;AACrB;AAAA,MACF;AAGE,UAAA,aAAa,OAAO,KACpB,sBAAsB,QAAQ,QAAQ,OAAO,MAAM,IACnD;AACA,8BAAsB,UAAU;MAClC;AAEA,UAAI,sBAAsB,SAAS;AAE/B,YAAA,aAAa,IAAI,KACjB,sBAAsB,QAAQ,QAAQ,IAAI,MAAM,IAChD;AACA,iBAAO,KAAK,OAAO,CAAC,OAAO,OAAO,SAAS,OAAO,OAAO;AACnC,gCAAA,UAAU,sBAAsB,QAAQ;AAAA,YAC5D,CAAC,OAAO,OAAO,SAAS,OAAO;AAAA,UAAA;AAAA,QACjC,OACK;AACL,eAAK,KAAK,IAAI;AACQ,gCAAA,QAAQ,KAAK,IAAI;AAAA,QACzC;AAAA,MAAA,OACK;AACL,aAAK,KAAK,IAAI;AACQ,8BAAA,QAAQ,KAAK,SAAS,IAAI;AAAA,MAClD;AACA;AAAA,QACE;AAAA,QACA;AAAA,QACA,KAAK,IAAI,CAAC,OAAO,QAAQ,QAAQ,EAAE,GAAG,OAAO;AAAA,MAAA;AAE/C,uBAAiB,IAAI;AAAA,IACvB;AAAA,IACA,CAAC,UAAU,UAAU,gBAAgB;AAAA,EAAA;AAGvC,QAAM,oBAAoB;AAAA,IACxB,CACE,OACA,UACG;AACH,UAAI,OAAO,MAAA,EAAgB,OAAO,QAAQ;AACpC,YAAA,EAAE,OAAO,IAAQ,IAAA;AAEvB,UAAI,sBAAsB,SAAS;AACjC,eAAO,KAAK;AAAA,UACV,CAAC,OAAO,CAAC,sBAAsB,QAAQ,SAAS,EAAS;AAAA,QAAA;AAAA,MAE7D;AAEI,UAAA,QAAQ,gBAAgB,OAAO,GAAG;AACtC,cAAQ,MAAM,OAAO,CAAC,SAAS,CAAC,WAAW,IAAI,CAAC;AAChD,4BAAsB,UAAU;AAC5B,UAAA,cAAc,KAAK,OAAO,KAAK;AACnC,oBAAc,YAAY;AAAA,QACxB,CAAC,IAAI,MAAM,YAAY,QAAQ,EAAE,MAAM;AAAA,MAAA;AAGzC;AAAA,QACE;AAAA,QACA;AAAA,QACA,YAAY,IAAI,CAAC,OAAO,QAAQ,QAAQ,EAAE,GAAG,OAAO;AAAA,MAAA;AAGtD,uBAAiB,WAAW;AAAA,IAC9B;AAAA,IACA,CAAC,iBAAiB,YAAY,UAAU,UAAU,gBAAgB;AAAA,EAAA;AAGpE,QAAM,uBAAuB;AAAA,IAC3B,CAAC,OAA8C,UAAe;AAC5D,YAAM,cAAc,SAAS,SAAS,KAAK,IACtC,SAAsB,OAAO,CAAC,OAAO,OAAO,KAAK,IAClD,CAAC,KAAK,EAAE,OAAO,QAAQ;AAC3B;AAAA,QACE;AAAA,QACA;AAAA,QACA,YAAY,IAAI,CAAC,OAAO,QAAQ,QAAQ,EAAE,GAAG,OAAO;AAAA,MAAA;AAEtD,uBAAiB,WAAW;AAAA,IAC9B;AAAA,IACA,CAAC,UAAU,UAAU,gBAAgB;AAAA,EAAA;AAGvC,QAAM,qBAAqB;AAAA,IACzB,CAAC,OAA8C,UAAe;AAC5D,YAAM,cAAc,cAAc,CAAC,KAAK,IAAI;AAC5C,UAAI,UAAU;AACZ,cAAM,YAAY,QAAQ,QAAQ,WAAW,GAAG;AAChD,iBAAS,OAAO,aAAa,cAAc,CAAC,SAAS,IAAI,SAAS;AAAA,MACpE;AAEA,uBAAiB,WAAW;AAAA,IAC9B;AAAA,IACA,CAAC,aAAa,UAAU,gBAAgB;AAAA,EAAA;AAG1C,QAAM,aAAa;AAAA,IACjB,CACE,OACA,IACA,WAAW,UACR;AACC,UAAA,MAAM,aAAa,EAAE,GAAG;AAC1B,YAAI,UAAU;AACZ,+BAAqB,OAAO,EAAE;AAAA,QAAA,OACzB;AACL,6BAAmB,OAAO,EAAE;AAAA,QAC9B;AACA,yBAAiB,UAAU;AAC3B,8BAAsB,UAAU;AAChC,8BAAsB,UAAU;AAEzB,eAAA;AAAA,MACT;AACO,aAAA;AAAA,IACT;AAAA,IACA,CAAC,sBAAsB,oBAAoB,YAAY;AAAA,EAAA;AAGzD,QAAM,cAAc;AAAA,IAClB,CACE,OACA,OACA,UAAU,UACP;AACH,YAAM,EAAE,QAAQ,iBAAiB,SAAS,KAAK,QAAY,IAAA;AAC3D,UAAI,SAAS;AACX,+BAAuB,OAAO,EAAE,OAAO,MAAM,KAAK,SAAS;AAAA,MAClD,WAAA,SAAS,QAAQ,OAAO,MAAM;AACvC,0BAAkB,OAAO,EAAE,OAAO,IAAK,CAAA;AAAA,MACzC;AACA,4BAAsB,UAAU;AAAA,IAClC;AAAA,IACA,CAAC,wBAAwB,iBAAiB;AAAA,EAAA;AAGtC,QAAA,qBAAqB,CACzB,OACA,OACG;AACC,QAAA,CAAC,iBAAiB,SAAS;AAC7B,uBAAiB,UAAU;AAAA,IAC7B;AAEA,UAAM,QAAQ,sBAAsB,UAAU,iBAAiB,UAAU;AAEzE,gBAAY,OAAO;AAAA,MACjB;AAAA,MACA,KAAK,aAAa;AAAA,IAAA,CACnB;AAAA,EAAA;AAGG,QAAA,oBAAoB,CACxB,OACA,OACG;AACC,QAAA,CAAC,iBAAiB,SAAS;AAC7B,uBAAiB,UAAU;AAAA,IAC7B;AAEA,UAAM,QAAQ,sBAAsB,UAAU,iBAAiB,UAAU;AAEzE,gBAAY,OAAO;AAAA,MACjB;AAAA,MACA,KAAK,YAAY;AAAA,IAAA,CAClB;AAAA,EAAA;AAGG,QAAA,iBAAiB,CACrB,OACA,OACG;AACH,QAAI,CAAC,WAAW,YAAY,EAAE,CAAC,GAAG;AAChC;AAAA,QACE;AAAA,QACA;AAAA,UACE,KAAK,YAAY,EAAE;AAAA,UACnB,SAAS;AAAA,QACX;AAAA,QACA;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAGI,QAAA,qBAAqB,CACzB,OACA,OACG;AACH,QAAI,CAAC,WAAW,gBAAgB,EAAE,CAAC,GAAG;AACpC;AAAA,QACE;AAAA,QACA;AAAA,UACE,KAAK,gBAAgB,EAAE;AAAA,UACvB,SAAS;AAAA,QACX;AAAA,QACA;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAGI,QAAA,iBAAiB,CAAC,UAAiD;AAC3D,gBAAA,OAAO,EAAE,OAAO,gBAAgB,KAAK,eAAe;AAAA,EAAA;AAM5D,QAAA,eAAe,YAAY,CAAC,SAAc;AACxC,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,SAAS;AAAA,MACT;AAAA,IACE,IAAA;AAEI,YAAA,QAAQ,EAAE,IAAI;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,SAAS;AAAA,MACT;AAAA,IAAA;AAAA,EAEJ,GAAG,CAAE,CAAA;AAEC,QAAA,iBAAiB,YAAY,CAAC,OAAY;AAC9C,UAAM,SAAS,EAAE,GAAG,QAAQ,QAAQ;AACpC,WAAO,OAAO,EAAE;AAChB,YAAQ,UAAU;AAElB,qBAAiB,CAAC,qBAAqB;AAEnC,UAAA,qBAAqB,MACrB,QAAQ,WACR,QAAQ,aACL,QAAQ,QAAQ,iBAAiB,UAAU,eAC9C;AACO,eAAA,eAAe,IAAI,EAAE,CAAC;AAAA,MAC/B;AACO,aAAA;AAAA,IAAA,CACR;AAAA,EACH,GAAG,CAAE,CAAA;AAEL,QAAM,eAAe,YAAY,CAAC,IAAS,cAAmB;AAC/C,iBAAA,QAAQ,EAAE,IAAI;AAAA,EAC7B,GAAG,CAAE,CAAA;AAEC,QAAA,iBAAiB,YAAY,CAAC,OAAY;AAC9C,UAAM,SAAS,EAAE,GAAG,aAAa,QAAQ;AACzC,WAAO,OAAO,EAAE;AAChB,iBAAa,UAAU;AAAA,EACzB,GAAG,CAAE,CAAA;AAKC,QAAA,kBAAkB,CAAC,UAAiD;AACpE,QAAA,CAAC,cAAsB,QAAA;AACvB,QAAA,aAAa,aAAa,GAAG;AAC3B,UAAA,WAAW,aAAa,GAAG;AAC7B,sBAAc,OAAO,aAAa;AAAA,MAAA,WACzB,CAAC,WAAW,aAAa,GAAG;AACrC,wBAAgB,KAAK;AAAA,MACvB;AAAA,IACF;AACO,WAAA;AAAA,EAAA;AAGH,QAAA,sBAAsB,CAC1B,UACG;AACC,QAAA,CAAC,cAAsB,QAAA;AAC3B,QAAI,WAAW,aAAa,KAAK,CAAC,WAAW,aAAa,GAAG;AAC3D,sBAAgB,OAAO,aAAa;AAC7B,aAAA;AAAA,IACT;AAEM,UAAA,SAAS,UAAU,aAAa;AACtC,QAAI,QAAQ;AACV,YAAM,OAAO,MAAM;AACZ,aAAA;AAAA,IACT;AACO,WAAA;AAAA,EAAA;AAGH,QAAA,gBAAgB,CAAC,UAAiD;AACtE,QAAI,OAAO;AACL,UAAA,EAAE,IAAQ,IAAA;AAGhB,QACE,MAAM,UACN,MAAM,kBAAkB,MAAM,UAC9B,CAAC,eACD;AACA;AAAA,IACF;AAEM,UAAA,cAAc,MAAM,WAAW,MAAM;AAC3C,YAAQ,KAAK;AAAA,MACX,KAAK;AACH,YAAI,aAAa,aAAa,KAAK,CAAC,WAAW,aAAa,GAAG;AACzD,cAAA,eAAe,MAAM,UAAU;AACjC,wBAAY,OAAO,EAAE,KAAK,cAAe,CAAA;AAClC,mBAAA;AAAA,qBACE,aAAa;AACf,mBAAA,WAAW,OAAO,eAAe,IAAI;AAAA,UAAA,OACvC;AACE,mBAAA,WAAW,OAAO,aAAa;AAAA,UACxC;AAAA,QACF;AACA,cAAM,gBAAgB;AACtB;AAAA,MACF,KAAK;AACC,YAAA,CAAC,WAAW,aAAa,GAAG;AAC1B,cAAA,aAAa,aAAa,GAAG;AAC/B,4BAAgB,KAAK;AACd,mBAAA;AAAA,UAAA,WACE,aAAa,aAAa,GAAG;AAClC,gBAAA,eAAe,MAAM,UAAU;AACjC,0BAAY,OAAO,EAAE,KAAK,cAAe,CAAA;AAClC,qBAAA;AAAA,uBACE,aAAa;AACf,qBAAA,WAAW,OAAO,eAAe,IAAI;AAAA,YAAA,OACvC;AACE,qBAAA,WAAW,OAAO,aAAa;AAAA,YACxC;AAAA,UACF;AAAA,QACF;AACA,cAAM,gBAAgB;AACtB;AAAA,MACF,KAAK;AACC,YAAA,eAAe,MAAM,UAAU;AACjC,yBAAe,OAAO,aAAa;AAAA,QACrC;AACA,sBAAc,OAAO,aAAa;AAC3B,eAAA;AACP;AAAA,MACF,KAAK;AACC,YAAA,eAAe,MAAM,UAAU;AACjC,6BAAmB,OAAO,aAAa;AAAA,QACzC;AACA,0BAAkB,OAAO,aAAa;AAC/B,eAAA;AACP;AAAA,MACF,KAAK;AACH,eAAO,gBAAgB,KAAK;AAC5B;AAAA,MACF,KAAK;AACH,eAAO,oBAAoB,KAAK;AAChC;AAAA,MACF,KAAK;AACH,YACE,eACA,eACA,MAAM,YACN,CAAC,WAAW,aAAa,GACzB;AACA,6BAAmB,OAAO,aAAa;AAAA,QACzC;AACA,uBAAe,KAAK;AACb,eAAA;AACP;AAAA,MACF,KAAK;AACH,YACE,eACA,eACA,MAAM,YACN,CAAC,WAAW,aAAa,GACzB;AACA,4BAAkB,OAAO,aAAa;AAAA,QACxC;AACA,sBAAc,KAAK;AACZ,eAAA;AACP;AAAA,MACF;AACE,YAAI,QAAQ,KAAK;AACf,4BAAkB,OAAO,aAAa;AAC/B,iBAAA;AAAA,QAAA,WACE,eAAe,eAAe,IAAI,YAAA,MAAkB,KAAK;AAClE,yBAAe,KAAK;AACb,iBAAA;AAAA,QAAA,WAEP,CAAC,eACD,CAAC,MAAM,YACP,qBAAqB,GAAG,GACxB;AACsB,gCAAA,OAAO,eAAe,GAAG;AACxC,iBAAA;AAAA,QACT;AAAA,IACJ;AACA,QAAI,MAAM;AACR,YAAM,eAAe;AACrB,YAAM,gBAAgB;AAAA,IACxB;AACA,gBAAY,KAAK;AAAA,EAAA;AAGb,QAAA,cAAc,CAAC,UAA8C;AAE7D,QAAA,MAAM,WAAW,MAAM,eAAe;AACxC,YAAM,gBAAgB,MAAM,QAAQ,QAAQ,IAAI,SAAS,CAAC,IAAI;AAC9D,YAAM,OAAO,iBAAiB,wBAAwB,IAAI,EAAE,CAAC,CAAC;AAAA,IAChE;AACA,cAAU,KAAK;AAAA,EAAA;AAGX,QAAA,aAAa,CAAC,UAA8C;AAChE,qBAAiB,IAAI;AACrB,aAAS,KAAK;AAAA,EAAA;AAGV,QAAA,mBACJ,iBAAiB,QAAQ,QAAQ,aAAa,IAC1C,QAAQ,QAAQ,aAAa,EAAE,cAC/B;AAEN,QAAM,qBAAqB;AAAA,IACzB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY,aAAa,aAAa;AAAA,MACtC,aAAa,aAAa,cAAc;AAAA,MACxC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGF,QAAM,mBAAmB;AAAA,IACvB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY,YAAY,WAAW,YAAY,eAAe;AAAA,EAAA;AAGjE,SACG,oBAAA,uBAAuB,UAAvB,EAAgC,OAAO,oBACtC,UAAC,oBAAA,qBAAqB,UAArB,EAA8B,OAAO,kBACpC,8BAAC,oBACC,EAAA,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACpC,GAAI,gBAAgB;AAAA,QACnB,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,wBAAwB;AAAA,QACxB,yBAAyB;AAAA,QACzB,UAAU;AAAA,QACV,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,WAAW;AAAA,MACb;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA,GAEL,GACF,EACF,CAAA;AAEJ,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeViewContext.js","sources":["../../../../src/VerticalNavigation/TreeView/TreeViewContext.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type NavigationMode = \"treeview\" | \"navigation\" | \"slider\";\n\nconst TreeViewControlContext = createContext<TreeViewControlContextValue>({});\nTreeViewControlContext.displayName = \"TreeViewControlContext\";\n\nconst TreeViewStateContext = createContext<TreeviewStateContextValue>({});\nTreeViewStateContext.displayName = \"TreeViewStateContext\";\n\nexport { TreeViewControlContext, TreeViewStateContext };\n\ninterface TreeviewStateContextValue {\n isExpanded?: (id: any) => boolean;\n isSelected?: (id: any) => boolean;\n isFocused?: (id: any) => boolean;\n isDisabled?: (id: any) => boolean;\n isChildSelected?: (id: any) => boolean;\n}\n\ninterface TreeViewControlContextValue {\n treeId?: any;\n mode?: NavigationMode;\n collapsible?: boolean;\n toggleExpansion?: (event, value
|
|
1
|
+
{"version":3,"file":"TreeViewContext.js","sources":["../../../../src/VerticalNavigation/TreeView/TreeViewContext.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type NavigationMode = \"treeview\" | \"navigation\" | \"slider\";\n\nconst TreeViewControlContext = createContext<TreeViewControlContextValue>({});\nTreeViewControlContext.displayName = \"TreeViewControlContext\";\n\nconst TreeViewStateContext = createContext<TreeviewStateContextValue>({});\nTreeViewStateContext.displayName = \"TreeViewStateContext\";\n\nexport { TreeViewControlContext, TreeViewStateContext };\n\ninterface TreeviewStateContextValue {\n isExpanded?: (id: any) => boolean;\n isSelected?: (id: any) => boolean;\n isFocused?: (id: any) => boolean;\n isDisabled?: (id: any) => boolean;\n isChildSelected?: (id: any) => boolean;\n}\n\ninterface TreeViewControlContextValue {\n treeId?: any;\n mode?: NavigationMode;\n collapsible?: boolean;\n toggleExpansion?: (event: any, value?: any) => void;\n multiSelect?: boolean;\n selectNode?: (event: any, id: any, multiple?: any) => boolean;\n selectRange?: (event: any, nodes: any, stacked?: boolean) => void;\n disabledItemsFocusable?: boolean;\n registerNode?: (node: any) => void;\n unregisterNode?: (id: any) => void;\n mapFirstChar?: (id: any, firstChar: any) => void;\n unMapFirstChar?: (id: any, firstChar?: any) => void;\n focus?: (id: any, firstChar: any) => void;\n}\n"],"names":[],"mappings":";AAIM,MAAA,yBAAyB,cAA2C,EAAE;AAC5E,uBAAuB,cAAc;AAE/B,MAAA,uBAAuB,cAAyC,EAAE;AACxE,qBAAqB,cAAc;"}
|
|
@@ -153,8 +153,7 @@ const HvVerticalNavigationTreeViewItem = forwardRef(
|
|
|
153
153
|
}
|
|
154
154
|
const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
|
|
155
155
|
if (expandable && isOpen && !(multiple && isExpanded && isExpanded(nodeId))) {
|
|
156
|
-
if (toggleExpansion)
|
|
157
|
-
toggleExpansion(event, nodeId);
|
|
156
|
+
if (toggleExpansion) toggleExpansion(event, nodeId);
|
|
158
157
|
}
|
|
159
158
|
}
|
|
160
159
|
},
|
|
@@ -180,12 +179,9 @@ const HvVerticalNavigationTreeViewItem = forwardRef(
|
|
|
180
179
|
const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
|
|
181
180
|
if (multiple) {
|
|
182
181
|
if (event.shiftKey) {
|
|
183
|
-
if (selectRange)
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
return selectNode(event, nodeId, true);
|
|
187
|
-
} else if (selectNode)
|
|
188
|
-
return selectNode(event, nodeId);
|
|
182
|
+
if (selectRange) return selectRange(event, { end: nodeId });
|
|
183
|
+
} else if (selectNode) return selectNode(event, nodeId, true);
|
|
184
|
+
} else if (selectNode) return selectNode(event, nodeId);
|
|
189
185
|
} else {
|
|
190
186
|
return false;
|
|
191
187
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeViewItem.js","sources":["../../../../src/VerticalNavigation/TreeView/TreeViewItem.tsx"],"sourcesContent":["import {\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { HvTooltip } from \"../../Tooltip\";\nimport {\n DescendantProvider,\n useDescendant,\n} from \"../../TreeView/internals/DescendantProvider\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { IconWrapper } from \"./IconWrapper\";\nimport {\n TreeViewControlContext,\n TreeViewStateContext,\n} from \"./TreeViewContext\";\nimport { staticClasses, useClasses } from \"./TreeViewItem.styles\";\n\nexport { staticClasses as treeViewItemClasses };\n\nexport type HvVerticalNavigationTreeViewItemClasses = ExtractNames<\n typeof useClasses\n>;\n\nexport interface HvVerticalNavigationTreeViewItemProps {\n /**\n * Id to be applied to the root node.\n */\n id?: string;\n /**\n * Class names to be applied.\n */\n className?: string;\n /**\n * A Jss Object used to override or extend the styles applied to the Radio button.\n */\n classes?: HvVerticalNavigationTreeViewItemClasses;\n /**\n * Is the node disabled.\n */\n disabled?: boolean;\n /**\n * Can the node be selected.\n */\n selectable?: boolean;\n /**\n * The id of the node.\n */\n nodeId?: string;\n /**\n * The icon to display next to the node's label.\n */\n icon?: React.ReactNode;\n /**\n * The item label.\n */\n label?: React.ReactNode;\n /**\n * The url for the link.\n */\n href?: string;\n /**\n * The behavior when opening a link.\n */\n target?: string;\n /**\n * The node payload.\n */\n payload?: any;\n /**\n * @ignore\n */\n onClick?: any;\n /**\n * @ignore\n */\n onMouseDown?: any;\n /**\n * @ignore\n */\n onFocus?: any;\n /**\n * The content of the component.\n */\n children?: React.ReactNode;\n /**\n * @ignore\n */\n onMouseEnter?: any;\n /**\n * Disables the appearence of a tooltip on hovering an element ( Only applicable when the in collapsed mode)\n */\n disableTooltip?: boolean;\n}\n\nconst preventSelection = (event, disabled) => {\n if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {\n // Prevent text selection\n event.preventDefault();\n }\n};\n\nexport const HvVerticalNavigationTreeViewItem = forwardRef(\n (props: HvVerticalNavigationTreeViewItemProps, ref) => {\n const {\n id: idProp,\n className,\n classes: classesProp,\n\n disabled: disabledProp = false,\n\n selectable: selectableProp,\n\n nodeId,\n icon = null,\n label,\n href,\n target,\n payload,\n\n onClick,\n onMouseDown,\n onFocus,\n\n children,\n\n disableTooltip,\n\n ...others\n } = useDefaultProps(\"HvVerticalNavigationTreeViewItem\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const treeViewControlContext = useContext(TreeViewControlContext);\n const { isExpanded, isSelected, isFocused, isDisabled, isChildSelected } =\n useContext(TreeViewStateContext);\n\n const {\n treeId,\n mode,\n collapsible,\n toggleExpansion,\n multiSelect,\n selectNode,\n selectRange,\n disabledItemsFocusable,\n registerNode,\n unregisterNode,\n mapFirstChar,\n unMapFirstChar,\n focus,\n } = treeViewControlContext;\n\n const treeviewMode = mode === \"treeview\";\n\n let id: string | null = null;\n\n if (idProp != null) {\n id = idProp;\n } else if (treeId && nodeId) {\n id = `${treeId}-${nodeId}`;\n }\n\n const [treeitemElement, setTreeitemElement] = useState<HTMLLIElement>();\n const contentRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(setTreeitemElement, ref);\n\n const descendant = useMemo(\n () => ({\n element: treeitemElement!,\n id: nodeId!,\n }),\n [nodeId, treeitemElement],\n );\n\n const { isOpen, useIcons, hasAnyChildWithData } = useContext(\n VerticalNavigationContext,\n );\n\n const { index, parentId, level } = useDescendant(descendant);\n\n const expandable = collapsible && Array.isArray(children);\n const expanded = isExpanded ? isExpanded(nodeId) : false;\n const focused = isFocused ? isFocused(nodeId) : false;\n const selected = isSelected ? isSelected(nodeId) : false;\n const disabled = isDisabled ? isDisabled(nodeId) : false;\n\n const selectable =\n selectableProp != null\n ? selectableProp\n : !collapsible || !expandable || !isOpen;\n\n useEffect(() => {\n // On the first render a node's index will be -1. We want to wait for the real index.\n if (registerNode && unregisterNode && index !== -1) {\n registerNode({\n id: nodeId,\n idAttribute: id,\n index,\n parentId,\n selectable,\n expandable,\n disabled: disabledProp,\n onFocus,\n payload,\n });\n\n return () => {\n unregisterNode(nodeId);\n };\n }\n\n return undefined;\n }, [\n registerNode,\n unregisterNode,\n parentId,\n index,\n nodeId,\n expandable,\n disabledProp,\n id,\n selectable,\n onFocus,\n payload,\n ]);\n\n useEffect(() => {\n if (\n mapFirstChar &&\n unMapFirstChar &&\n label &&\n contentRef.current?.textContent\n ) {\n mapFirstChar(\n nodeId,\n contentRef.current?.textContent.substring(0, 1).toLowerCase(),\n );\n\n return () => {\n unMapFirstChar(nodeId);\n };\n }\n return undefined;\n }, [mapFirstChar, unMapFirstChar, nodeId, label]);\n\n let ariaSelected;\n if (multiSelect) {\n ariaSelected = selected;\n } else if (selected) {\n /* single-selection trees unset aria-selected on un-selected items.\n *\n * If the tree does not support multiple selection, aria-selected\n * is set to true for the selected node and it is not present on any other node in the tree.\n * Source: https://www.w3.org/TR/wai-aria-practices/#TreeView\n */\n ariaSelected = true;\n }\n\n const handleFocus = useCallback(\n (event) => {\n // DOM focus stays on the tree which manages focus with aria-activedescendant\n if (event.target === event.currentTarget) {\n (event.target.ownerDocument || document)\n .getElementById(treeId)\n .focus({ preventScroll: true });\n }\n\n const unfocusable = !disabledItemsFocusable && disabled;\n if (\n !focused &&\n event.currentTarget === event.target &&\n !unfocusable &&\n focus\n ) {\n focus(event, nodeId);\n }\n },\n [disabled, disabledItemsFocusable, focus, focused, nodeId, treeId],\n );\n\n const handleExpansion = useCallback(\n (event) => {\n if (!disabled) {\n if (treeviewMode && !focused && focus) {\n focus(event, nodeId);\n }\n\n const multiple =\n multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);\n\n // If already expanded and trying to toggle selection don't close\n if (\n expandable &&\n isOpen &&\n !(multiple && isExpanded && isExpanded(nodeId))\n ) {\n if (toggleExpansion) toggleExpansion(event, nodeId);\n }\n }\n },\n [\n disabled,\n expandable,\n focus,\n focused,\n isExpanded,\n multiSelect,\n nodeId,\n toggleExpansion,\n treeviewMode,\n isOpen,\n ],\n );\n\n const handleSelection = useCallback(\n (event) => {\n if (selectable && !disabled) {\n if (treeviewMode && !focused && focus) {\n focus(event, nodeId);\n }\n\n const multiple =\n multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);\n\n if (multiple) {\n if (event.shiftKey) {\n if (selectRange) return selectRange(event, { end: nodeId });\n } else if (selectNode) return selectNode(event, nodeId, true);\n } else if (selectNode) return selectNode(event, nodeId);\n } else {\n return false;\n }\n },\n [\n disabled,\n focus,\n focused,\n multiSelect,\n nodeId,\n selectNode,\n selectRange,\n selectable,\n treeviewMode,\n ],\n );\n\n const handleMouseDown = useCallback(\n (event) => {\n preventSelection(event, disabled);\n\n if (onMouseDown) {\n onMouseDown(event);\n }\n },\n [disabled, onMouseDown],\n );\n\n const handleClick = useCallback(\n (event) => {\n if (!disabled) {\n if (expandable && isOpen) {\n handleExpansion(event);\n }\n\n if (selectable) {\n handleSelection(event);\n }\n }\n\n if (onClick) {\n onClick(event);\n }\n },\n [\n disabled,\n expandable,\n handleExpansion,\n handleSelection,\n onClick,\n selectable,\n isOpen,\n ],\n );\n\n const handleKeyDown = useCallback(\n (event) => {\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 if (contentRef.current === event.currentTarget) {\n if (key === \"Enter\" || key === \" \") {\n if (expandable && isOpen) {\n isEventHandled = handleExpansion(event) as unknown as boolean;\n }\n\n if (selectable) {\n isEventHandled = handleSelection(event) as boolean;\n }\n }\n\n if (isEventHandled) {\n event.preventDefault();\n event.stopPropagation();\n }\n }\n },\n [expandable, handleExpansion, handleSelection, selectable, isOpen],\n );\n\n const renderedContent = useMemo(() => {\n const buttonLinkProps = {\n href,\n target,\n };\n\n const hasChildren = !!children;\n const showTooltip = !hasChildren && !isOpen && !disableTooltip;\n\n const isLink = href !== undefined && !disabled;\n\n return (\n <HvTooltip placement=\"right\" title={showTooltip && label}>\n <HvTypography\n id={setId(id, \"button\")}\n component={isLink ? \"a\" : \"div\"}\n {...(isLink ? buttonLinkProps : null)}\n ref={contentRef}\n className={cx(classes.content, {\n [classes.link]: isLink,\n [classes.minimized]: !isOpen,\n })}\n variant=\"body\"\n disabled={disabled}\n onClick={handleClick}\n onMouseDown={handleMouseDown}\n style={{\n paddingLeft:\n (useIcons || !isOpen ? 0 : 10) +\n level * (collapsible ? 16 : 10),\n }}\n role={isLink ? undefined : \"button\"}\n {...(treeviewMode\n ? {\n tabIndex: -1,\n onFocus: handleFocus,\n }\n : {\n tabIndex: selectable || expandable ? 0 : -1,\n onKeyDown: handleKeyDown,\n \"aria-current\":\n (selectable && selected) ||\n (!isOpen && isChildSelected?.(nodeId))\n ? href\n ? \"page\"\n : true\n : undefined,\n \"aria-expanded\": expandable ? expanded : undefined,\n \"aria-controls\":\n isOpen && expandable ? setId(id, \"group\") : undefined,\n \"aria-label\": payload?.label,\n })}\n >\n <IconWrapper\n icon={useIcons && icon}\n label={payload?.label}\n hasChildren={hasChildren}\n showAvatar={!icon && useIcons}\n isOpen={isOpen}\n hasAnyChildWithData={hasAnyChildWithData}\n style={{\n // @ts-ignore\n \"--icon-margin-left\": hasAnyChildWithData ? \"auto\" : \"unset\",\n }}\n className={classes.icon}\n />\n\n {isOpen && (\n <div\n className={cx(classes.label, {\n [classes.labelIcon]: useIcons,\n [classes.labelExpandable]: !!expandable,\n })}\n >\n <HvOverflowTooltip data={label} />\n </div>\n )}\n\n {isOpen && expandable && (expanded ? <DropUpXS /> : <DropDownXS />)}\n </HvTypography>\n </HvTooltip>\n );\n }, [\n href,\n target,\n children,\n isOpen,\n disableTooltip,\n disabled,\n label,\n id,\n cx,\n classes.content,\n classes.link,\n classes.minimized,\n classes.icon,\n classes.label,\n classes.labelIcon,\n classes.labelExpandable,\n handleClick,\n handleMouseDown,\n useIcons,\n level,\n collapsible,\n treeviewMode,\n handleFocus,\n selectable,\n expandable,\n handleKeyDown,\n selected,\n isChildSelected,\n nodeId,\n expanded,\n payload?.label,\n icon,\n hasAnyChildWithData,\n ]);\n\n const renderedChildren = useMemo(\n () =>\n children && (\n <ul\n id={setId(id, \"group\")}\n className={classes.group}\n role={treeviewMode ? \"group\" : undefined}\n >\n {children}\n </ul>\n ),\n [children, classes?.group, id, treeviewMode],\n );\n\n return (\n <li\n ref={handleRef}\n id={id ?? undefined}\n className={cx(\n classes.node,\n {\n [classes.disabled]: disabled,\n [classes.expandable]: expandable,\n [classes.collapsed]: expandable && !expanded,\n [classes.expanded]: expandable && expanded,\n [classes.selectable]: selectable && !disabled,\n [classes.unselectable]: !disabled && !selectable,\n [classes.selected]:\n (!disabled && selectable && selected) ||\n (!isOpen &&\n useIcons &&\n isChildSelected &&\n isChildSelected(nodeId)),\n [classes.unselected]: !disabled && selectable && !selected,\n [classes.focused]: focused,\n [classes.hide]: !isOpen && !useIcons,\n },\n className,\n )}\n data-hasicon={icon != null ? true : undefined}\n {...(mode === \"treeview\" && {\n role: \"treeitem\",\n \"aria-selected\": ariaSelected,\n \"aria-expanded\": expandable ? expanded : undefined,\n \"aria-disabled\": disabled ? true : undefined,\n })}\n {...others}\n >\n {renderedContent}\n {isOpen && (\n <DescendantProvider id={nodeId} level={level + 1}>\n {renderedChildren}\n </DescendantProvider>\n )}\n </li>\n );\n },\n);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TreeViewItem.js","sources":["../../../../src/VerticalNavigation/TreeView/TreeViewItem.tsx"],"sourcesContent":["import {\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { HvTooltip } from \"../../Tooltip\";\nimport {\n DescendantProvider,\n useDescendant,\n} from \"../../TreeView/internals/DescendantProvider\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { IconWrapper } from \"./IconWrapper\";\nimport {\n TreeViewControlContext,\n TreeViewStateContext,\n} from \"./TreeViewContext\";\nimport { staticClasses, useClasses } from \"./TreeViewItem.styles\";\n\nexport { staticClasses as treeViewItemClasses };\n\nexport type HvVerticalNavigationTreeViewItemClasses = ExtractNames<\n typeof useClasses\n>;\n\nexport interface HvVerticalNavigationTreeViewItemProps {\n /**\n * Id to be applied to the root node.\n */\n id?: string;\n /**\n * Class names to be applied.\n */\n className?: string;\n /**\n * A Jss Object used to override or extend the styles applied to the Radio button.\n */\n classes?: HvVerticalNavigationTreeViewItemClasses;\n /**\n * Is the node disabled.\n */\n disabled?: boolean;\n /**\n * Can the node be selected.\n */\n selectable?: boolean;\n /**\n * The id of the node.\n */\n nodeId?: string;\n /**\n * The icon to display next to the node's label.\n */\n icon?: React.ReactNode;\n /**\n * The item label.\n */\n label?: React.ReactNode;\n /**\n * The url for the link.\n */\n href?: string;\n /**\n * The behavior when opening a link.\n */\n target?: string;\n /**\n * The node payload.\n */\n payload?: any;\n /**\n * @ignore\n */\n onClick?: any;\n /**\n * @ignore\n */\n onMouseDown?: any;\n /**\n * @ignore\n */\n onFocus?: any;\n /**\n * The content of the component.\n */\n children?: React.ReactNode;\n /**\n * @ignore\n */\n onMouseEnter?: any;\n /**\n * Disables the appearence of a tooltip on hovering an element ( Only applicable when the in collapsed mode)\n */\n disableTooltip?: boolean;\n}\n\nconst preventSelection = (event: any, disabled: any) => {\n if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {\n // Prevent text selection\n event.preventDefault();\n }\n};\n\nexport const HvVerticalNavigationTreeViewItem = forwardRef(\n (props: HvVerticalNavigationTreeViewItemProps, ref) => {\n const {\n id: idProp,\n className,\n classes: classesProp,\n\n disabled: disabledProp = false,\n\n selectable: selectableProp,\n\n nodeId,\n icon = null,\n label,\n href,\n target,\n payload,\n\n onClick,\n onMouseDown,\n onFocus,\n\n children,\n\n disableTooltip,\n\n ...others\n } = useDefaultProps(\"HvVerticalNavigationTreeViewItem\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const treeViewControlContext = useContext(TreeViewControlContext);\n const { isExpanded, isSelected, isFocused, isDisabled, isChildSelected } =\n useContext(TreeViewStateContext);\n\n const {\n treeId,\n mode,\n collapsible,\n toggleExpansion,\n multiSelect,\n selectNode,\n selectRange,\n disabledItemsFocusable,\n registerNode,\n unregisterNode,\n mapFirstChar,\n unMapFirstChar,\n focus,\n } = treeViewControlContext;\n\n const treeviewMode = mode === \"treeview\";\n\n let id: string | null = null;\n\n if (idProp != null) {\n id = idProp;\n } else if (treeId && nodeId) {\n id = `${treeId}-${nodeId}`;\n }\n\n const [treeitemElement, setTreeitemElement] = useState<HTMLLIElement>();\n const contentRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(setTreeitemElement, ref);\n\n const descendant = useMemo(\n () => ({\n element: treeitemElement!,\n id: nodeId!,\n }),\n [nodeId, treeitemElement],\n );\n\n const { isOpen, useIcons, hasAnyChildWithData } = useContext(\n VerticalNavigationContext,\n );\n\n const { index, parentId, level } = useDescendant(descendant);\n\n const expandable = collapsible && Array.isArray(children);\n const expanded = isExpanded ? isExpanded(nodeId) : false;\n const focused = isFocused ? isFocused(nodeId) : false;\n const selected = isSelected ? isSelected(nodeId) : false;\n const disabled = isDisabled ? isDisabled(nodeId) : false;\n\n const selectable =\n selectableProp != null\n ? selectableProp\n : !collapsible || !expandable || !isOpen;\n\n useEffect(() => {\n // On the first render a node's index will be -1. We want to wait for the real index.\n if (registerNode && unregisterNode && index !== -1) {\n registerNode({\n id: nodeId,\n idAttribute: id,\n index,\n parentId,\n selectable,\n expandable,\n disabled: disabledProp,\n onFocus,\n payload,\n });\n\n return () => {\n unregisterNode(nodeId);\n };\n }\n\n return undefined;\n }, [\n registerNode,\n unregisterNode,\n parentId,\n index,\n nodeId,\n expandable,\n disabledProp,\n id,\n selectable,\n onFocus,\n payload,\n ]);\n\n useEffect(() => {\n if (\n mapFirstChar &&\n unMapFirstChar &&\n label &&\n contentRef.current?.textContent\n ) {\n mapFirstChar(\n nodeId,\n contentRef.current?.textContent.substring(0, 1).toLowerCase(),\n );\n\n return () => {\n unMapFirstChar(nodeId);\n };\n }\n return undefined;\n }, [mapFirstChar, unMapFirstChar, nodeId, label]);\n\n let ariaSelected;\n if (multiSelect) {\n ariaSelected = selected;\n } else if (selected) {\n /* single-selection trees unset aria-selected on un-selected items.\n *\n * If the tree does not support multiple selection, aria-selected\n * is set to true for the selected node and it is not present on any other node in the tree.\n * Source: https://www.w3.org/TR/wai-aria-practices/#TreeView\n */\n ariaSelected = true;\n }\n\n const handleFocus = useCallback(\n (event: any) => {\n // DOM focus stays on the tree which manages focus with aria-activedescendant\n if (event.target === event.currentTarget) {\n (event.target.ownerDocument || document)\n .getElementById(treeId)\n .focus({ preventScroll: true });\n }\n\n const unfocusable = !disabledItemsFocusable && disabled;\n if (\n !focused &&\n event.currentTarget === event.target &&\n !unfocusable &&\n focus\n ) {\n focus(event, nodeId);\n }\n },\n [disabled, disabledItemsFocusable, focus, focused, nodeId, treeId],\n );\n\n const handleExpansion = useCallback(\n (event: any) => {\n if (!disabled) {\n if (treeviewMode && !focused && focus) {\n focus(event, nodeId);\n }\n\n const multiple =\n multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);\n\n // If already expanded and trying to toggle selection don't close\n if (\n expandable &&\n isOpen &&\n !(multiple && isExpanded && isExpanded(nodeId))\n ) {\n if (toggleExpansion) toggleExpansion(event, nodeId);\n }\n }\n },\n [\n disabled,\n expandable,\n focus,\n focused,\n isExpanded,\n multiSelect,\n nodeId,\n toggleExpansion,\n treeviewMode,\n isOpen,\n ],\n );\n\n const handleSelection = useCallback(\n (event: any) => {\n if (selectable && !disabled) {\n if (treeviewMode && !focused && focus) {\n focus(event, nodeId);\n }\n\n const multiple =\n multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);\n\n if (multiple) {\n if (event.shiftKey) {\n if (selectRange) return selectRange(event, { end: nodeId });\n } else if (selectNode) return selectNode(event, nodeId, true);\n } else if (selectNode) return selectNode(event, nodeId);\n } else {\n return false;\n }\n },\n [\n disabled,\n focus,\n focused,\n multiSelect,\n nodeId,\n selectNode,\n selectRange,\n selectable,\n treeviewMode,\n ],\n );\n\n const handleMouseDown = useCallback(\n (event: any) => {\n preventSelection(event, disabled);\n\n if (onMouseDown) {\n onMouseDown(event);\n }\n },\n [disabled, onMouseDown],\n );\n\n const handleClick = useCallback(\n (event: any) => {\n if (!disabled) {\n if (expandable && isOpen) {\n handleExpansion(event);\n }\n\n if (selectable) {\n handleSelection(event);\n }\n }\n\n if (onClick) {\n onClick(event);\n }\n },\n [\n disabled,\n expandable,\n handleExpansion,\n handleSelection,\n onClick,\n selectable,\n isOpen,\n ],\n );\n\n const handleKeyDown = useCallback(\n (event: any) => {\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 if (contentRef.current === event.currentTarget) {\n if (key === \"Enter\" || key === \" \") {\n if (expandable && isOpen) {\n isEventHandled = handleExpansion(event) as unknown as boolean;\n }\n\n if (selectable) {\n isEventHandled = handleSelection(event) as boolean;\n }\n }\n\n if (isEventHandled) {\n event.preventDefault();\n event.stopPropagation();\n }\n }\n },\n [expandable, handleExpansion, handleSelection, selectable, isOpen],\n );\n\n const renderedContent = useMemo(() => {\n const buttonLinkProps = {\n href,\n target,\n };\n\n const hasChildren = !!children;\n const showTooltip = !hasChildren && !isOpen && !disableTooltip;\n\n const isLink = href !== undefined && !disabled;\n\n return (\n <HvTooltip placement=\"right\" title={showTooltip && label}>\n <HvTypography\n id={setId(id, \"button\")}\n component={isLink ? \"a\" : \"div\"}\n {...(isLink ? buttonLinkProps : null)}\n ref={contentRef}\n className={cx(classes.content, {\n [classes.link]: isLink,\n [classes.minimized]: !isOpen,\n })}\n variant=\"body\"\n disabled={disabled}\n onClick={handleClick}\n onMouseDown={handleMouseDown}\n style={{\n paddingLeft:\n (useIcons || !isOpen ? 0 : 10) +\n level * (collapsible ? 16 : 10),\n }}\n role={isLink ? undefined : \"button\"}\n {...(treeviewMode\n ? {\n tabIndex: -1,\n onFocus: handleFocus,\n }\n : {\n tabIndex: selectable || expandable ? 0 : -1,\n onKeyDown: handleKeyDown,\n \"aria-current\":\n (selectable && selected) ||\n (!isOpen && isChildSelected?.(nodeId))\n ? href\n ? \"page\"\n : true\n : undefined,\n \"aria-expanded\": expandable ? expanded : undefined,\n \"aria-controls\":\n isOpen && expandable ? setId(id, \"group\") : undefined,\n \"aria-label\": payload?.label,\n })}\n >\n <IconWrapper\n icon={useIcons && icon}\n label={payload?.label}\n hasChildren={hasChildren}\n showAvatar={!icon && useIcons}\n isOpen={isOpen}\n hasAnyChildWithData={hasAnyChildWithData}\n style={{\n // @ts-ignore\n \"--icon-margin-left\": hasAnyChildWithData ? \"auto\" : \"unset\",\n }}\n className={classes.icon}\n />\n\n {isOpen && (\n <div\n className={cx(classes.label, {\n [classes.labelIcon]: useIcons,\n [classes.labelExpandable]: !!expandable,\n })}\n >\n <HvOverflowTooltip data={label} />\n </div>\n )}\n\n {isOpen && expandable && (expanded ? <DropUpXS /> : <DropDownXS />)}\n </HvTypography>\n </HvTooltip>\n );\n }, [\n href,\n target,\n children,\n isOpen,\n disableTooltip,\n disabled,\n label,\n id,\n cx,\n classes.content,\n classes.link,\n classes.minimized,\n classes.icon,\n classes.label,\n classes.labelIcon,\n classes.labelExpandable,\n handleClick,\n handleMouseDown,\n useIcons,\n level,\n collapsible,\n treeviewMode,\n handleFocus,\n selectable,\n expandable,\n handleKeyDown,\n selected,\n isChildSelected,\n nodeId,\n expanded,\n payload?.label,\n icon,\n hasAnyChildWithData,\n ]);\n\n const renderedChildren = useMemo(\n () =>\n children && (\n <ul\n id={setId(id, \"group\")}\n className={classes.group}\n role={treeviewMode ? \"group\" : undefined}\n >\n {children}\n </ul>\n ),\n [children, classes?.group, id, treeviewMode],\n );\n\n return (\n <li\n ref={handleRef}\n id={id ?? undefined}\n className={cx(\n classes.node,\n {\n [classes.disabled]: disabled,\n [classes.expandable]: expandable,\n [classes.collapsed]: expandable && !expanded,\n [classes.expanded]: expandable && expanded,\n [classes.selectable]: selectable && !disabled,\n [classes.unselectable]: !disabled && !selectable,\n [classes.selected]:\n (!disabled && selectable && selected) ||\n (!isOpen &&\n useIcons &&\n isChildSelected &&\n isChildSelected(nodeId)),\n [classes.unselected]: !disabled && selectable && !selected,\n [classes.focused]: focused,\n [classes.hide]: !isOpen && !useIcons,\n },\n className,\n )}\n data-hasicon={icon != null ? true : undefined}\n {...(mode === \"treeview\" && {\n role: \"treeitem\",\n \"aria-selected\": ariaSelected,\n \"aria-expanded\": expandable ? expanded : undefined,\n \"aria-disabled\": disabled ? true : undefined,\n })}\n {...others}\n >\n {renderedContent}\n {isOpen && (\n <DescendantProvider id={nodeId} level={level + 1}>\n {renderedChildren}\n </DescendantProvider>\n )}\n </li>\n );\n },\n);\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VerticalNavigation.js","sources":["../../../src/VerticalNavigation/VerticalNavigation.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport {\n fillDataWithParentId,\n getNavigationItemById,\n getParentItemById,\n} from \"./NavigationSlider/utils\";\nimport { hasChildNavigationItems } from \"./utils/VerticalNavigation.utils\";\nimport { staticClasses, useClasses } from \"./VerticalNavigation.styles\";\nimport {\n NavigationData,\n VerticalNavigationContext,\n} from \"./VerticalNavigationContext\";\n\nexport { staticClasses as verticalNavigationClasses };\n\nexport type HvVerticalNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport type HvVerticalNavigationMode = \"icon\" | \"simple\";\n\nexport type HvVerticalNavigationPosition =\n | \"static\"\n | \"relative\"\n | \"fixed\"\n | \"absolute\";\n\nexport interface HvVerticalNavigationProps extends HvBaseProps<HTMLDivElement> {\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvVerticalNavigationClasses;\n /** Current State of the Vertical Navigation Collapse */\n open?: boolean;\n /**\n * Collapsed Mode for the Vertical Navigation, the default value is \"simple\".\n *\n * @deprecated - `useIcons` property should be used instead.\n */\n collapsedMode?: HvVerticalNavigationMode;\n /** Boolean to determine if treeview is in slider mode (for mobile navigation), the default value is false. */\n slider?: boolean;\n /**\n * Boolean to determine if icons should be displayed in the navigation menu.\n * When `true` a icon will always be displayed, if no icon is provided the first letter of the label will be\n * displayed inside an Avatar component.\n * When `false` no icons will be shown, even if an icon is provided.\n */\n useIcons?: boolean;\n}\n\n/**\n * Navigation enables users to move through an app to complete tasks.\n *\n * It is recommended to use vertical navigation when your application requires global navigation that is displayed on the left.\n * While vertical navigation menus generally consume more space than their horizontal counterparts, they have become more popular as desktop monitors move to wide-screen formats.\n *\n * Although both the hierarchically organized data and the visual style resemble a treeview-like structure, the [Treeview Design Pattern](https://w3c.github.io/aria-practices/#TreeView)\n * isn't necessarily the most appropriate.\n *\n * The tree role provides complex functionality that is not needed for typical site navigation, and changes the most common keyboard navigation using TAB.\n *\n * The [Disclosure Design Pattern](https://w3c.github.io/aria-practices/#disclosure) is more suited for typical site navigation, with expandable groups of links.\n * However it can be tedious to TAB through all navigation items to reach the actions panel.\n *\n * Both modes are available via the `mode` property and each app should choose the most appropriate.\n */\nexport const HvVerticalNavigation = (props: HvVerticalNavigationProps) => {\n const {\n id,\n className,\n classes: classesProp,\n children,\n open = true,\n slider = false,\n useIcons = false,\n ...others\n } = useDefaultProps(\"HvVerticalNavigation\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const [parentData, setParentData] = useState<NavigationData[]>([]);\n\n const [parentSelected, setParentSelected] = useState();\n\n const [headerTitle, setHeaderTitle] = useState<string | undefined>();\n\n // navigationSlider\n const withParentData = useMemo(\n () => fillDataWithParentId(parentData),\n [parentData],\n );\n\n const initialParentItem = useMemo(\n () => getParentItemById(withParentData, parentSelected),\n [withParentData, parentSelected],\n );\n\n const [parentItem, setParentItem] = useState(initialParentItem);\n\n const hasAnyChildWithData = useMemo(\n () => hasChildNavigationItems(parentData),\n [parentData],\n );\n\n useEffect(\n () => setHeaderTitle(parentItem?.label),\n [parentItem, setParentItem],\n );\n\n const navigateToParentHandler = useCallback(() => {\n setParentItem(getParentItemById(withParentData, parentItem.id));\n }, [parentItem, setParentItem, withParentData]);\n\n const navigateToChildHandler = useCallback(\n (event, item) => {\n setParentItem(getNavigationItemById(withParentData, item.id));\n event.stopPropagation();\n },\n [setParentItem, withParentData],\n );\n\n const value = useMemo(\n () => ({\n isOpen: open,\n useIcons,\n slider,\n headerTitle,\n setHeaderTitle,\n\n parentItem,\n setParentItem,\n withParentData,\n navigateToChildHandler,\n navigateToParentHandler,\n\n parentData,\n setParentData,\n parentSelected,\n setParentSelected,\n hasAnyChildWithData,\n }),\n [\n open,\n useIcons,\n slider,\n headerTitle,\n setHeaderTitle,\n parentItem,\n setParentItem,\n withParentData,\n navigateToChildHandler,\n navigateToParentHandler,\n hasAnyChildWithData,\n parentData,\n parentSelected,\n ],\n );\n\n const content = (\n <VerticalNavigationContext.Provider value={value}>\n <div\n id={id}\n className={cx(\n classes.root,\n {\n [classes.collapsed]: !open,\n [classes.slider]: slider,\n [classes.childData]: hasAnyChildWithData,\n },\n className,\n )}\n {...others}\n >\n {children}\n </div>\n </VerticalNavigationContext.Provider>\n );\n\n return content;\n};\n"],"names":[],"mappings":";;;;;;;;AAmEa,MAAA,uBAAuB,CAAC,UAAqC;AAClE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,OAAO;AAAA,IACP,SAAS;AAAA,IACT,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,wBAAwB,KAAK;AACjD,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,CAAC,YAAY,aAAa,IAAI,SAA2B,CAAE,CAAA;AAEjE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS;AAErD,QAAM,CAAC,aAAa,cAAc,IAAI,SAA6B;AAGnE,QAAM,iBAAiB;AAAA,IACrB,MAAM,qBAAqB,UAAU;AAAA,IACrC,CAAC,UAAU;AAAA,EAAA;AAGb,QAAM,oBAAoB;AAAA,IACxB,MAAM,kBAAkB,gBAAgB,cAAc;AAAA,IACtD,CAAC,gBAAgB,cAAc;AAAA,EAAA;AAGjC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,iBAAiB;AAE9D,QAAM,sBAAsB;AAAA,IAC1B,MAAM,wBAAwB,UAAU;AAAA,IACxC,CAAC,UAAU;AAAA,EAAA;AAGb;AAAA,IACE,MAAM,eAAe,YAAY,KAAK;AAAA,IACtC,CAAC,YAAY,aAAa;AAAA,EAAA;AAGtB,QAAA,0BAA0B,YAAY,MAAM;AAChD,kBAAc,kBAAkB,gBAAgB,WAAW,EAAE,CAAC;AAAA,EAC7D,GAAA,CAAC,YAAY,eAAe,cAAc,CAAC;AAE9C,QAAM,yBAAyB;AAAA,IAC7B,CAAC,
|
|
1
|
+
{"version":3,"file":"VerticalNavigation.js","sources":["../../../src/VerticalNavigation/VerticalNavigation.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport {\n fillDataWithParentId,\n getNavigationItemById,\n getParentItemById,\n} from \"./NavigationSlider/utils\";\nimport { hasChildNavigationItems } from \"./utils/VerticalNavigation.utils\";\nimport { staticClasses, useClasses } from \"./VerticalNavigation.styles\";\nimport {\n NavigationData,\n VerticalNavigationContext,\n} from \"./VerticalNavigationContext\";\n\nexport { staticClasses as verticalNavigationClasses };\n\nexport type HvVerticalNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport type HvVerticalNavigationMode = \"icon\" | \"simple\";\n\nexport type HvVerticalNavigationPosition =\n | \"static\"\n | \"relative\"\n | \"fixed\"\n | \"absolute\";\n\nexport interface HvVerticalNavigationProps extends HvBaseProps<HTMLDivElement> {\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvVerticalNavigationClasses;\n /** Current State of the Vertical Navigation Collapse */\n open?: boolean;\n /**\n * Collapsed Mode for the Vertical Navigation, the default value is \"simple\".\n *\n * @deprecated - `useIcons` property should be used instead.\n */\n collapsedMode?: HvVerticalNavigationMode;\n /** Boolean to determine if treeview is in slider mode (for mobile navigation), the default value is false. */\n slider?: boolean;\n /**\n * Boolean to determine if icons should be displayed in the navigation menu.\n * When `true` a icon will always be displayed, if no icon is provided the first letter of the label will be\n * displayed inside an Avatar component.\n * When `false` no icons will be shown, even if an icon is provided.\n */\n useIcons?: boolean;\n}\n\n/**\n * Navigation enables users to move through an app to complete tasks.\n *\n * It is recommended to use vertical navigation when your application requires global navigation that is displayed on the left.\n * While vertical navigation menus generally consume more space than their horizontal counterparts, they have become more popular as desktop monitors move to wide-screen formats.\n *\n * Although both the hierarchically organized data and the visual style resemble a treeview-like structure, the [Treeview Design Pattern](https://w3c.github.io/aria-practices/#TreeView)\n * isn't necessarily the most appropriate.\n *\n * The tree role provides complex functionality that is not needed for typical site navigation, and changes the most common keyboard navigation using TAB.\n *\n * The [Disclosure Design Pattern](https://w3c.github.io/aria-practices/#disclosure) is more suited for typical site navigation, with expandable groups of links.\n * However it can be tedious to TAB through all navigation items to reach the actions panel.\n *\n * Both modes are available via the `mode` property and each app should choose the most appropriate.\n */\nexport const HvVerticalNavigation = (props: HvVerticalNavigationProps) => {\n const {\n id,\n className,\n classes: classesProp,\n children,\n open = true,\n slider = false,\n useIcons = false,\n ...others\n } = useDefaultProps(\"HvVerticalNavigation\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const [parentData, setParentData] = useState<NavigationData[]>([]);\n\n const [parentSelected, setParentSelected] = useState();\n\n const [headerTitle, setHeaderTitle] = useState<string | undefined>();\n\n // navigationSlider\n const withParentData = useMemo(\n () => fillDataWithParentId(parentData),\n [parentData],\n );\n\n const initialParentItem = useMemo(\n () => getParentItemById(withParentData, parentSelected),\n [withParentData, parentSelected],\n );\n\n const [parentItem, setParentItem] = useState(initialParentItem);\n\n const hasAnyChildWithData = useMemo(\n () => hasChildNavigationItems(parentData),\n [parentData],\n );\n\n useEffect(\n () => setHeaderTitle(parentItem?.label),\n [parentItem, setParentItem],\n );\n\n const navigateToParentHandler = useCallback(() => {\n setParentItem(getParentItemById(withParentData, parentItem.id));\n }, [parentItem, setParentItem, withParentData]);\n\n const navigateToChildHandler = useCallback(\n (event: any, item: any) => {\n setParentItem(getNavigationItemById(withParentData, item.id));\n event.stopPropagation();\n },\n [setParentItem, withParentData],\n );\n\n const value = useMemo(\n () => ({\n isOpen: open,\n useIcons,\n slider,\n headerTitle,\n setHeaderTitle,\n\n parentItem,\n setParentItem,\n withParentData,\n navigateToChildHandler,\n navigateToParentHandler,\n\n parentData,\n setParentData,\n parentSelected,\n setParentSelected,\n hasAnyChildWithData,\n }),\n [\n open,\n useIcons,\n slider,\n headerTitle,\n setHeaderTitle,\n parentItem,\n setParentItem,\n withParentData,\n navigateToChildHandler,\n navigateToParentHandler,\n hasAnyChildWithData,\n parentData,\n parentSelected,\n ],\n );\n\n const content = (\n <VerticalNavigationContext.Provider value={value}>\n <div\n id={id}\n className={cx(\n classes.root,\n {\n [classes.collapsed]: !open,\n [classes.slider]: slider,\n [classes.childData]: hasAnyChildWithData,\n },\n className,\n )}\n {...others}\n >\n {children}\n </div>\n </VerticalNavigationContext.Provider>\n );\n\n return content;\n};\n"],"names":[],"mappings":";;;;;;;;AAmEa,MAAA,uBAAuB,CAAC,UAAqC;AAClE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,OAAO;AAAA,IACP,SAAS;AAAA,IACT,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,wBAAwB,KAAK;AACjD,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,CAAC,YAAY,aAAa,IAAI,SAA2B,CAAE,CAAA;AAEjE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS;AAErD,QAAM,CAAC,aAAa,cAAc,IAAI,SAA6B;AAGnE,QAAM,iBAAiB;AAAA,IACrB,MAAM,qBAAqB,UAAU;AAAA,IACrC,CAAC,UAAU;AAAA,EAAA;AAGb,QAAM,oBAAoB;AAAA,IACxB,MAAM,kBAAkB,gBAAgB,cAAc;AAAA,IACtD,CAAC,gBAAgB,cAAc;AAAA,EAAA;AAGjC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,iBAAiB;AAE9D,QAAM,sBAAsB;AAAA,IAC1B,MAAM,wBAAwB,UAAU;AAAA,IACxC,CAAC,UAAU;AAAA,EAAA;AAGb;AAAA,IACE,MAAM,eAAe,YAAY,KAAK;AAAA,IACtC,CAAC,YAAY,aAAa;AAAA,EAAA;AAGtB,QAAA,0BAA0B,YAAY,MAAM;AAChD,kBAAc,kBAAkB,gBAAgB,WAAW,EAAE,CAAC;AAAA,EAC7D,GAAA,CAAC,YAAY,eAAe,cAAc,CAAC;AAE9C,QAAM,yBAAyB;AAAA,IAC7B,CAAC,OAAY,SAAc;AACzB,oBAAc,sBAAsB,gBAAgB,KAAK,EAAE,CAAC;AAC5D,YAAM,gBAAgB;AAAA,IACxB;AAAA,IACA,CAAC,eAAe,cAAc;AAAA,EAAA;AAGhC,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGF,QAAM,UACJ,oBAAC,0BAA0B,UAA1B,EAAmC,OAClC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,SAAS,GAAG,CAAC;AAAA,UACtB,CAAC,QAAQ,MAAM,GAAG;AAAA,UAClB,CAAC,QAAQ,SAAS,GAAG;AAAA,QACvB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAEL,EAAA,CAAA;AAGK,SAAA;AACT;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VerticalNavigationContext.js","sources":["../../../src/VerticalNavigation/VerticalNavigationContext.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type NavigationData<T extends React.ElementType = \"a\"> =\n React.ComponentProps<T> &\n Record<string, any> & {\n /** The id to be applied to the root element. */\n id: string;\n /** The label to be rendered on the menu item. */\n label: string;\n /** The icon to be rendered. */\n icon?: React.ReactNode;\n /** The Data children subset. */\n data?: NavigationData<T>[];\n /** Whether the item is disabled and not interactive. */\n disabled?: boolean;\n /** Whether the item has a selected state. */\n selectable?: boolean;\n };\n\ninterface VerticalNavigationContextValue {\n isOpen: boolean;\n useIcons: boolean;\n slider?: boolean;\n headerTitle?: string;\n setHeaderTitle?: React.Dispatch<React.SetStateAction<string | undefined>>;\n\n parentItem
|
|
1
|
+
{"version":3,"file":"VerticalNavigationContext.js","sources":["../../../src/VerticalNavigation/VerticalNavigationContext.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type NavigationData<T extends React.ElementType = \"a\"> =\n React.ComponentProps<T> &\n Record<string, any> & {\n /** The id to be applied to the root element. */\n id: string;\n /** The label to be rendered on the menu item. */\n label: string;\n /** The icon to be rendered. */\n icon?: React.ReactNode;\n /** The Data children subset. */\n data?: NavigationData<T>[];\n /** Whether the item is disabled and not interactive. */\n disabled?: boolean;\n /** Whether the item has a selected state. */\n selectable?: boolean;\n };\n\ninterface VerticalNavigationContextValue {\n isOpen: boolean;\n useIcons: boolean;\n slider?: boolean;\n headerTitle?: string;\n setHeaderTitle?: React.Dispatch<React.SetStateAction<string | undefined>>;\n\n parentItem?: any;\n setParentItem?: React.Dispatch<React.SetStateAction<any>>;\n withParentData?: any;\n navigateToChildHandler?: (event: any, item: any) => void;\n navigateToParentHandler?: () => void;\n\n parentData?: NavigationData[];\n setParentData?: React.Dispatch<React.SetStateAction<any>>;\n parentSelected?: any;\n setParentSelected?: React.Dispatch<React.SetStateAction<any>>;\n\n hasAnyChildWithData?: boolean;\n}\n\nconst VerticalNavigationContext = createContext<VerticalNavigationContextValue>(\n {\n isOpen: true,\n useIcons: false,\n slider: false,\n },\n);\n\nexport { VerticalNavigationContext };\n"],"names":[],"mappings":";AAwCA,MAAM,4BAA4B;AAAA,EAChC;AAAA,IACE,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AACF;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"withTooltip.js","sources":["../../../src/hocs/withTooltip.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { HvTooltip, HvTooltipPlacementType, HvTooltipProps } from \"../Tooltip\";\nimport { HvBaseProps } from \"../types/generic\";\n\nconst styles: { truncate: React.CSSProperties } = {\n truncate: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n },\n};\n\nexport const withTooltip =\n (\n Component: React.FunctionComponent,\n // eslint-disable-next-line @typescript-eslint/default-param-last\n label = \"\",\n placement: HvTooltipPlacementType,\n hideTooltip?: (event: React.MouseEvent<HTMLDivElement>) => boolean,\n tooltipProps?: Partial<HvTooltipProps>,\n tooltipContainerProps?: HvBaseProps,\n ) =>\n (props) => {\n const [isHoverDisabled, setIsHoverDisabled] = useState<boolean | undefined>(\n false,\n );\n const [open, setOpen] = useState<boolean>(false);\n\n const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {\n const isHidden = hideTooltip?.(event);\n setIsHoverDisabled(isHidden);\n setOpen(!isHidden);\n };\n\n const handleMouseLeave = () => {\n setIsHoverDisabled(false);\n setOpen(false);\n };\n\n return (\n <HvTooltip\n style={{ ...styles.truncate }}\n disableHoverListener={isHoverDisabled}\n disableFocusListener\n disableTouchListener\n title={label}\n open={open}\n placement={placement}\n {...tooltipProps}\n >\n <div\n {...tooltipContainerProps}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n <Component {...props} />\n </div>\n </HvTooltip>\n );\n };\n"],"names":[],"mappings":";;;AAKA,MAAM,SAA4C;AAAA,EAChD,UAAU;AAAA,IACR,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AACF;AAEa,MAAA,cACX,CACE,WAEA,QAAQ,IACR,WACA,aACA,cACA,0BAEF,CAAC,
|
|
1
|
+
{"version":3,"file":"withTooltip.js","sources":["../../../src/hocs/withTooltip.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { HvTooltip, HvTooltipPlacementType, HvTooltipProps } from \"../Tooltip\";\nimport { HvBaseProps } from \"../types/generic\";\n\nconst styles: { truncate: React.CSSProperties } = {\n truncate: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n },\n};\n\nexport const withTooltip =\n (\n Component: React.FunctionComponent,\n // eslint-disable-next-line @typescript-eslint/default-param-last\n label = \"\",\n placement: HvTooltipPlacementType,\n hideTooltip?: (event: React.MouseEvent<HTMLDivElement>) => boolean,\n tooltipProps?: Partial<HvTooltipProps>,\n tooltipContainerProps?: HvBaseProps,\n ) =>\n (props: any) => {\n const [isHoverDisabled, setIsHoverDisabled] = useState<boolean | undefined>(\n false,\n );\n const [open, setOpen] = useState<boolean>(false);\n\n const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {\n const isHidden = hideTooltip?.(event);\n setIsHoverDisabled(isHidden);\n setOpen(!isHidden);\n };\n\n const handleMouseLeave = () => {\n setIsHoverDisabled(false);\n setOpen(false);\n };\n\n return (\n <HvTooltip\n style={{ ...styles.truncate }}\n disableHoverListener={isHoverDisabled}\n disableFocusListener\n disableTouchListener\n title={label}\n open={open}\n placement={placement}\n {...tooltipProps}\n >\n <div\n {...tooltipContainerProps}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n <Component {...props} />\n </div>\n </HvTooltip>\n );\n };\n"],"names":[],"mappings":";;;AAKA,MAAM,SAA4C;AAAA,EAChD,UAAU;AAAA,IACR,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AACF;AAEa,MAAA,cACX,CACE,WAEA,QAAQ,IACR,WACA,aACA,cACA,0BAEF,CAAC,UAAe;AACR,QAAA,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,IAC5C;AAAA,EAAA;AAEF,QAAM,CAAC,MAAM,OAAO,IAAI,SAAkB,KAAK;AAEzC,QAAA,mBAAmB,CAAC,UAA4C;AAC9D,UAAA,WAAW,cAAc,KAAK;AACpC,uBAAmB,QAAQ;AAC3B,YAAQ,CAAC,QAAQ;AAAA,EAAA;AAGnB,QAAM,mBAAmB,MAAM;AAC7B,uBAAmB,KAAK;AACxB,YAAQ,KAAK;AAAA,EAAA;AAIb,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,EAAE,GAAG,OAAO,SAAS;AAAA,MAC5B,sBAAsB;AAAA,MACtB,sBAAoB;AAAA,MACpB,sBAAoB;AAAA,MACpB,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,cAAc;AAAA,UACd,cAAc;AAAA,UAEd,UAAA,oBAAC,WAAW,EAAA,GAAG,MAAO,CAAA;AAAA,QAAA;AAAA,MACxB;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useComputation.js","sources":["../../../src/hooks/useComputation.ts"],"sourcesContent":["import { useRef, useState } from \"react\";\n\nexport const useComputation = (valueFn, valueFallback
|
|
1
|
+
{"version":3,"file":"useComputation.js","sources":["../../../src/hooks/useComputation.ts"],"sourcesContent":["import { useRef, useState } from \"react\";\n\nexport const useComputation = (valueFn: Function, valueFallback?: Function) => {\n const computed = useRef<any>(null);\n const [value, setValue] = useState(valueFallback);\n\n const computeValue = () => {\n if (!computed.current) {\n setValue(valueFn?.());\n computed.current = true;\n }\n };\n\n return [value, computeValue];\n};\n"],"names":[],"mappings":";AAEa,MAAA,iBAAiB,CAAC,SAAmB,kBAA6B;AACvE,QAAA,WAAW,OAAY,IAAI;AACjC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,aAAa;AAEhD,QAAM,eAAe,MAAM;AACrB,QAAA,CAAC,SAAS,SAAS;AACrB,eAAS,WAAW;AACpB,eAAS,UAAU;AAAA,IACrB;AAAA,EAAA;AAGK,SAAA,CAAC,OAAO,YAAY;AAC7B;"}
|