@hitachivantara/uikit-react-core 5.44.5 → 5.44.6
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/AppSwitcher/Action/Action.cjs +1 -1
- package/dist/cjs/AppSwitcher/Action/Action.cjs.map +1 -1
- package/dist/cjs/Input/Input.cjs +1 -2
- package/dist/cjs/Input/Input.cjs.map +1 -1
- package/dist/cjs/ScrollTo/Vertical/ScrollToVertical.cjs +18 -29
- package/dist/cjs/ScrollTo/Vertical/ScrollToVertical.cjs.map +1 -1
- package/dist/cjs/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.cjs +8 -15
- package/dist/cjs/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.cjs.map +1 -1
- package/dist/cjs/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs +2 -7
- package/dist/cjs/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs.map +1 -1
- package/dist/cjs/VerticalNavigation/TreeView/IconWrapper/IconWrapper.cjs +14 -23
- package/dist/cjs/VerticalNavigation/TreeView/IconWrapper/IconWrapper.cjs.map +1 -1
- package/dist/cjs/VerticalNavigation/TreeView/TreeViewItem.cjs +7 -5
- package/dist/cjs/VerticalNavigation/TreeView/TreeViewItem.cjs.map +1 -1
- package/dist/cjs/hocs/withTooltip.cjs +1 -3
- package/dist/cjs/hocs/withTooltip.cjs.map +1 -1
- package/dist/esm/AppSwitcher/Action/Action.js +1 -1
- package/dist/esm/AppSwitcher/Action/Action.js.map +1 -1
- package/dist/esm/Input/Input.js +1 -2
- package/dist/esm/Input/Input.js.map +1 -1
- package/dist/esm/ScrollTo/Vertical/ScrollToVertical.js +18 -29
- package/dist/esm/ScrollTo/Vertical/ScrollToVertical.js.map +1 -1
- package/dist/esm/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.js +8 -15
- package/dist/esm/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.js.map +1 -1
- package/dist/esm/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.js +2 -7
- package/dist/esm/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.js.map +1 -1
- package/dist/esm/VerticalNavigation/TreeView/IconWrapper/IconWrapper.js +15 -24
- package/dist/esm/VerticalNavigation/TreeView/IconWrapper/IconWrapper.js.map +1 -1
- package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.js +8 -6
- package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.js.map +1 -1
- package/dist/esm/hocs/withTooltip.js +1 -3
- package/dist/esm/hocs/withTooltip.js.map +1 -1
- package/package.json +2 -2
- package/dist/cjs/VerticalNavigation/TreeView/TooltipWrapper/TooltipWrapper.cjs +0 -25
- package/dist/cjs/VerticalNavigation/TreeView/TooltipWrapper/TooltipWrapper.cjs.map +0 -1
- package/dist/esm/VerticalNavigation/TreeView/TooltipWrapper/TooltipWrapper.js +0 -25
- package/dist/esm/VerticalNavigation/TreeView/TooltipWrapper/TooltipWrapper.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VerticalScrollListItem.js","sources":["../../../../../src/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.tsx"],"sourcesContent":["import { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"../../../types/generic\";\nimport {
|
|
1
|
+
{"version":3,"file":"VerticalScrollListItem.js","sources":["../../../../../src/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.tsx"],"sourcesContent":["import { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"../../../types/generic\";\nimport { HvTooltip, HvTooltipProps } from \"../../../Tooltip\";\nimport { ExtractNames } from \"../../../utils/classes\";\nimport { useTheme } from \"../../../hooks/useTheme\";\nimport { useDefaultProps } from \"../../../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./VerticalScrollListItem.styles\";\n\nexport { staticClasses as verticalScrollListItemClasses };\n\nexport type HvVerticalScrollListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalScrollListItemProps\n extends HvBaseProps<HTMLDivElement> {\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvVerticalScrollListItemClasses;\n /** Whether the element is selected. */\n selected?: boolean;\n label?: React.ReactNode;\n tooltipPlacement?: HvTooltipProps[\"placement\"];\n}\n\n/**\n * HvVerticalScrollListItem a focusable item to be used as part of the vertical scroll\n */\nexport const HvVerticalScrollListItem = (\n props: HvVerticalScrollListItemProps\n) => {\n const {\n id,\n className,\n classes: classesProp,\n selected,\n label,\n onClick,\n onKeyDown,\n tooltipPlacement = \"left\",\n ...others\n } = useDefaultProps(\"HvVerticalScrollListItem\", props);\n const { classes, cx } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n\n const icon = selected ? (\n <CurrentStep\n height={activeTheme?.scrollTo.dotSelectedSize}\n width={activeTheme?.scrollTo.dotSelectedSize}\n />\n ) : (\n <div className={classes.notSelected} />\n );\n\n return (\n <li id={id} className={cx(classes.root, className)} aria-current={selected}>\n <HvTooltip title={label} placement={tooltipPlacement}>\n <div\n role=\"button\"\n tabIndex={0}\n onClick={onClick}\n onKeyDown={onKeyDown}\n className={cx(classes.button, classes.text)}\n {...others}\n >\n {icon}\n </div>\n </HvTooltip>\n </li>\n );\n};\n"],"names":[],"mappings":";;;;;;;AA2Ba,MAAA,2BAA2B,CACtC,UACG;AACG,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,GAAG;AAAA,EAAA,IACD,gBAAgB,4BAA4B,KAAK;AACrD,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,QAAA,EAAE,gBAAgB;AAExB,QAAM,OAAO,WACX;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,QAAQ,aAAa,SAAS;AAAA,MAC9B,OAAO,aAAa,SAAS;AAAA,IAAA;AAAA,EAAA,IAG/B,oBAAC,OAAI,EAAA,WAAW,QAAQ,YAAa,CAAA;AAGvC,6BACG,MAAG,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAG,gBAAc,UAChE,UAAC,oBAAA,WAAA,EAAU,OAAO,OAAO,WAAW,kBAClC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAW,GAAG,QAAQ,QAAQ,QAAQ,IAAI;AAAA,MACzC,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA,EAEL,CAAA,EACF,CAAA;AAEJ;"}
|
|
@@ -18,13 +18,8 @@ const { staticClasses, useClasses } = createClasses(name, {
|
|
|
18
18
|
display: "inline-block",
|
|
19
19
|
backgroundColor: theme.colors.secondary_60
|
|
20
20
|
},
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
width: "16px",
|
|
24
|
-
display: "flex",
|
|
25
|
-
justifyContent: "center",
|
|
26
|
-
alignItems: "center"
|
|
27
|
-
},
|
|
21
|
+
// TODO: remove in v6 (use classes.button)
|
|
22
|
+
text: {},
|
|
28
23
|
button: {
|
|
29
24
|
display: "flex",
|
|
30
25
|
justifyContent: "center",
|
package/dist/esm/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VerticalScrollListItem.styles.js","sources":["../../../../../src/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../../utils/focusUtils\";\n\nimport { createClasses } from \"../../../utils/classes\";\n\nconst name = \"HvVerticalScrollListItem\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n root: {\n padding: \"0\",\n height: \"32px\",\n width: \"32px\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n notSelected: {\n height: \"4px\",\n width: \"4px\",\n borderRadius: \"50%\",\n display: \"inline-block\",\n backgroundColor: theme.colors.secondary_60,\n },\n
|
|
1
|
+
{"version":3,"file":"VerticalScrollListItem.styles.js","sources":["../../../../../src/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../../utils/focusUtils\";\n\nimport { createClasses } from \"../../../utils/classes\";\n\nconst name = \"HvVerticalScrollListItem\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n root: {\n padding: \"0\",\n height: \"32px\",\n width: \"32px\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n notSelected: {\n height: \"4px\",\n width: \"4px\",\n borderRadius: \"50%\",\n display: \"inline-block\",\n backgroundColor: theme.colors.secondary_60,\n },\n // TODO: remove in v6 (use classes.button)\n text: {},\n button: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height: \"16px\",\n width: \"16px\",\n borderRadius: \"50%\",\n cursor: \"pointer\",\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n\n \"& $notSelected\": {\n height: \"6px\",\n width: \"6px\",\n backgroundColor: theme.colors.secondary,\n },\n },\n \"&:focus\": {\n outline: \"none\",\n },\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n },\n});\n"],"names":[],"mappings":";;;AAMA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA,EACA,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,cAAc;AAAA,IACd,SAAS;AAAA,IACT,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA;AAAA,EAEA,MAAM,CAAC;AAAA,EACP,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAE9B,kBAAkB;AAAA,QAChB,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAG;AAAA,IACL;AAAA,EACF;AACF,CAAC;"}
|
|
@@ -1,39 +1,30 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsxs, jsx } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { useContext } from "react";
|
|
3
3
|
import { Forwards } from "@hitachivantara/uikit-react-icons";
|
|
4
4
|
import { VerticalNavigationContext } from "../../VerticalNavigationContext.js";
|
|
5
5
|
import { StyledIconsContainer, SpacerDiv } from "./IconWrapper.styles.js";
|
|
6
|
-
import { TooltipWrapper } from "../TooltipWrapper/TooltipWrapper.js";
|
|
7
6
|
import { HvAvatar } from "../../../Avatar/Avatar.js";
|
|
8
7
|
const IconWrapper = ({
|
|
9
8
|
icon,
|
|
10
9
|
label,
|
|
11
10
|
hasChildren,
|
|
12
11
|
showAvatar,
|
|
13
|
-
isOpen
|
|
14
|
-
disableTooltip
|
|
12
|
+
isOpen
|
|
15
13
|
}) => {
|
|
16
14
|
const { hasAnyChildWithData } = useContext(VerticalNavigationContext);
|
|
17
|
-
return /* @__PURE__ */
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
children: label.substring(0, 1)
|
|
31
|
-
}
|
|
32
|
-
) : icon,
|
|
33
|
-
hasChildren && !isOpen ? /* @__PURE__ */ jsx(Forwards, { iconSize: "XS" }) : hasAnyChildWithData && !isOpen && /* @__PURE__ */ jsx(SpacerDiv, {})
|
|
34
|
-
] })
|
|
35
|
-
}
|
|
36
|
-
);
|
|
15
|
+
return /* @__PURE__ */ jsxs(StyledIconsContainer, { hasAnyChildWithData, children: [
|
|
16
|
+
showAvatar ? /* @__PURE__ */ jsx(
|
|
17
|
+
HvAvatar,
|
|
18
|
+
{
|
|
19
|
+
variant: "square",
|
|
20
|
+
size: "xs",
|
|
21
|
+
backgroundColor: "secondary_80",
|
|
22
|
+
style: { fontSize: "15px" },
|
|
23
|
+
children: label.substring(0, 1)
|
|
24
|
+
}
|
|
25
|
+
) : icon,
|
|
26
|
+
hasChildren && !isOpen ? /* @__PURE__ */ jsx(Forwards, { iconSize: "XS" }) : hasAnyChildWithData && !isOpen && /* @__PURE__ */ jsx(SpacerDiv, {})
|
|
27
|
+
] });
|
|
37
28
|
};
|
|
38
29
|
export {
|
|
39
30
|
IconWrapper
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconWrapper.js","sources":["../../../../../src/VerticalNavigation/TreeView/IconWrapper/IconWrapper.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { Forwards } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvAvatar } from \"../../../Avatar\";\n\nimport { VerticalNavigationContext } from \"../../VerticalNavigationContext\";\nimport {
|
|
1
|
+
{"version":3,"file":"IconWrapper.js","sources":["../../../../../src/VerticalNavigation/TreeView/IconWrapper/IconWrapper.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { Forwards } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvAvatar } from \"../../../Avatar\";\n\nimport { VerticalNavigationContext } from \"../../VerticalNavigationContext\";\nimport { SpacerDiv, StyledIconsContainer } from \"./IconWrapper.styles\";\n\nexport const IconWrapper = ({\n icon,\n label,\n hasChildren,\n showAvatar,\n isOpen,\n}) => {\n const { hasAnyChildWithData } = useContext(VerticalNavigationContext);\n return (\n <StyledIconsContainer hasAnyChildWithData={hasAnyChildWithData}>\n {showAvatar ? (\n <HvAvatar\n variant=\"square\"\n size=\"xs\"\n backgroundColor=\"secondary_80\"\n style={{ fontSize: \"15px\" }}\n >\n {label.substring(0, 1)}\n </HvAvatar>\n ) : (\n icon\n )}\n\n {hasChildren && !isOpen ? (\n <Forwards iconSize=\"XS\" />\n ) : (\n hasAnyChildWithData && !isOpen && <SpacerDiv />\n )}\n </StyledIconsContainer>\n );\n};\n"],"names":[],"mappings":";;;;;;AAQO,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,oBAAA,IAAwB,WAAW,yBAAyB;AAElE,SAAA,qBAAC,wBAAqB,qBACnB,UAAA;AAAA,IACC,aAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,iBAAgB;AAAA,QAChB,OAAO,EAAE,UAAU,OAAO;AAAA,QAEzB,UAAA,MAAM,UAAU,GAAG,CAAC;AAAA,MAAA;AAAA,IAAA,IAGvB;AAAA,IAGD,eAAe,CAAC,SACf,oBAAC,UAAS,EAAA,UAAS,MAAK,IAExB,uBAAuB,CAAC,UAAU,oBAAC,WAAU,CAAA,CAAA;AAAA,EAEjD,EAAA,CAAA;AAEJ;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useContext, useState, useRef, useMemo, useEffect, useCallback } from "react";
|
|
3
3
|
import { DropUpXS, DropDownXS } from "@hitachivantara/uikit-react-icons";
|
|
4
4
|
import { useForkRef } from "../../hooks/useForkRef.js";
|
|
@@ -10,6 +10,7 @@ import { useDescendant, DescendantProvider } from "./descendants.js";
|
|
|
10
10
|
import { TreeViewControlContext, TreeViewStateContext } from "./TreeViewContext.js";
|
|
11
11
|
import { VerticalNavigationContext } from "../VerticalNavigationContext.js";
|
|
12
12
|
import { IconWrapper } from "./IconWrapper/IconWrapper.js";
|
|
13
|
+
import { HvTooltip } from "../../Tooltip/Tooltip.js";
|
|
13
14
|
import { HvTypography } from "../../Typography/Typography.js";
|
|
14
15
|
const preventSelection = (event, disabled) => {
|
|
15
16
|
if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {
|
|
@@ -260,7 +261,9 @@ const HvVerticalNavigationTreeViewItem = forwardRef(
|
|
|
260
261
|
href,
|
|
261
262
|
target
|
|
262
263
|
};
|
|
263
|
-
|
|
264
|
+
const hasChildren = !!children;
|
|
265
|
+
const showTooltip = !hasChildren && !isOpen && !disableTooltip;
|
|
266
|
+
return /* @__PURE__ */ jsx(HvTooltip, { placement: "right", title: showTooltip && label, children: /* @__PURE__ */ jsxs(
|
|
264
267
|
HvTypography,
|
|
265
268
|
{
|
|
266
269
|
id: setId(id, "button"),
|
|
@@ -296,10 +299,9 @@ const HvVerticalNavigationTreeViewItem = forwardRef(
|
|
|
296
299
|
{
|
|
297
300
|
icon: useIcons && icon,
|
|
298
301
|
label: payload?.label,
|
|
299
|
-
hasChildren
|
|
302
|
+
hasChildren,
|
|
300
303
|
showAvatar: !icon && useIcons,
|
|
301
|
-
isOpen
|
|
302
|
-
disableTooltip
|
|
304
|
+
isOpen
|
|
303
305
|
}
|
|
304
306
|
),
|
|
305
307
|
isOpen && /* @__PURE__ */ jsx(
|
|
@@ -315,7 +317,7 @@ const HvVerticalNavigationTreeViewItem = forwardRef(
|
|
|
315
317
|
isOpen && expandable && (expanded ? /* @__PURE__ */ jsx(DropUpXS, {}) : /* @__PURE__ */ jsx(DropDownXS, {}))
|
|
316
318
|
]
|
|
317
319
|
}
|
|
318
|
-
);
|
|
320
|
+
) });
|
|
319
321
|
}, [
|
|
320
322
|
id,
|
|
321
323
|
href,
|
|
@@ -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\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { setId } from \"../../utils/setId\";\n\nimport { ExtractNames } from \"../../utils/classes\";\nimport { HvTypography } from \"../../Typography\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./TreeViewItem.styles\";\nimport { DescendantProvider, useDescendant } from \"./descendants\";\nimport {\n TreeViewControlContext,\n TreeViewStateContext,\n} from \"./TreeViewContext\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { IconWrapper } from \"./IconWrapper\";\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(null);\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 } = useContext(VerticalNavigationContext);\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 return (\n <HvTypography\n id={setId(id, \"button\")}\n component={href ? \"a\" : \"div\"}\n {...(href ? buttonLinkProps : null)}\n ref={contentRef}\n className={cx(classes.content, {\n [classes.link]: href != null,\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) + level * (collapsible ? 16 : 10),\n }}\n role={href ? 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={Boolean(children)}\n showAvatar={!icon && useIcons}\n isOpen={isOpen}\n disableTooltip={disableTooltip}\n />\n\n {isOpen && (\n <div\n className={cx(classes.label, {\n [classes.labelIcon]: useIcons,\n [classes.labelExpandable]: !!expandable,\n })}\n >\n {label}\n </div>\n )}\n\n {isOpen && expandable && (expanded ? <DropUpXS /> : <DropDownXS />)}\n </HvTypography>\n );\n }, [\n id,\n href,\n target,\n cx,\n classes.content,\n classes.link,\n classes.minimized,\n classes.label,\n classes.labelIcon,\n classes.labelExpandable,\n disabled,\n handleClick,\n handleMouseDown,\n expandable,\n icon,\n level,\n collapsible,\n treeviewMode,\n handleFocus,\n selectable,\n handleKeyDown,\n selected,\n expanded,\n label,\n disableTooltip,\n payload?.label,\n children,\n isOpen,\n useIcons,\n isChildSelected,\n nodeId,\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(classes.node, {\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 && useIcons && isChildSelected && isChildSelected(nodeId)),\n [classes.unselected]: !disabled && selectable && !selected,\n [classes.focused]: focused,\n [classes.hide]: !isOpen && !useIcons,\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\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { setId } from \"../../utils/setId\";\n\nimport { ExtractNames } from \"../../utils/classes\";\nimport { HvTypography } from \"../../Typography\";\nimport { HvTooltip } from \"../../Tooltip\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./TreeViewItem.styles\";\nimport { DescendantProvider, useDescendant } from \"./descendants\";\nimport {\n TreeViewControlContext,\n TreeViewStateContext,\n} from \"./TreeViewContext\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { IconWrapper } from \"./IconWrapper\";\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(null);\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 } = useContext(VerticalNavigationContext);\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 return (\n <HvTooltip placement=\"right\" title={showTooltip && label}>\n <HvTypography\n id={setId(id, \"button\")}\n component={href ? \"a\" : \"div\"}\n {...(href ? buttonLinkProps : null)}\n ref={contentRef}\n className={cx(classes.content, {\n [classes.link]: href != null,\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={href ? 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 />\n\n {isOpen && (\n <div\n className={cx(classes.label, {\n [classes.labelIcon]: useIcons,\n [classes.labelExpandable]: !!expandable,\n })}\n >\n {label}\n </div>\n )}\n\n {isOpen && expandable && (expanded ? <DropUpXS /> : <DropDownXS />)}\n </HvTypography>\n </HvTooltip>\n );\n }, [\n id,\n href,\n target,\n cx,\n classes.content,\n classes.link,\n classes.minimized,\n classes.label,\n classes.labelIcon,\n classes.labelExpandable,\n disabled,\n handleClick,\n handleMouseDown,\n expandable,\n icon,\n level,\n collapsible,\n treeviewMode,\n handleFocus,\n selectable,\n handleKeyDown,\n selected,\n expanded,\n label,\n disableTooltip,\n payload?.label,\n children,\n isOpen,\n useIcons,\n isChildSelected,\n nodeId,\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(classes.node, {\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 && useIcons && isChildSelected && isChildSelected(nodeId)),\n [classes.unselected]: !disabled && selectable && !selected,\n [classes.focused]: focused,\n [classes.hide]: !isOpen && !useIcons,\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,7 +1,6 @@
|
|
|
1
1
|
import { jsx } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { useState } from "react";
|
|
3
3
|
import { HvTooltip } from "../Tooltip/Tooltip.js";
|
|
4
|
-
import { HvTypography } from "../Typography/Typography.js";
|
|
5
4
|
const styles = {
|
|
6
5
|
truncate: {
|
|
7
6
|
overflow: "hidden",
|
|
@@ -14,7 +13,6 @@ const withTooltip = (Component, label = "", placement, hideTooltip, tooltipProps
|
|
|
14
13
|
false
|
|
15
14
|
);
|
|
16
15
|
const [open, setOpen] = useState(false);
|
|
17
|
-
const title = /* @__PURE__ */ jsx(HvTypography, { children: label });
|
|
18
16
|
const handleMouseEnter = (event) => {
|
|
19
17
|
const isHidden = hideTooltip?.(event);
|
|
20
18
|
setIsHoverDisabled(isHidden);
|
|
@@ -31,7 +29,7 @@ const withTooltip = (Component, label = "", placement, hideTooltip, tooltipProps
|
|
|
31
29
|
disableHoverListener: isHoverDisabled,
|
|
32
30
|
disableFocusListener: true,
|
|
33
31
|
disableTouchListener: true,
|
|
34
|
-
title,
|
|
32
|
+
title: label,
|
|
35
33
|
open,
|
|
36
34
|
placement,
|
|
37
35
|
...tooltipProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"withTooltip.js","sources":["../../../src/hocs/withTooltip.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport {
|
|
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,UAAU;AACH,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;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-core",
|
|
3
|
-
"version": "5.44.
|
|
3
|
+
"version": "5.44.6",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Core React components for the NEXT Design System.",
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"access": "public",
|
|
64
64
|
"directory": "package"
|
|
65
65
|
},
|
|
66
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "4828c1d153d4e136e9f519f2e1e1b1f7e10a89ae",
|
|
67
67
|
"main": "dist/cjs/index.cjs",
|
|
68
68
|
"exports": {
|
|
69
69
|
".": {
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
4
|
-
const Tooltip = require("../../../Tooltip/Tooltip.cjs");
|
|
5
|
-
const Typography = require("../../../Typography/Typography.cjs");
|
|
6
|
-
const TooltipWrapper = ({
|
|
7
|
-
showTooltip,
|
|
8
|
-
label,
|
|
9
|
-
children,
|
|
10
|
-
placement = "right"
|
|
11
|
-
}) => {
|
|
12
|
-
if (showTooltip) {
|
|
13
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
14
|
-
Tooltip.HvTooltip,
|
|
15
|
-
{
|
|
16
|
-
title: /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { children: label }),
|
|
17
|
-
placement,
|
|
18
|
-
children
|
|
19
|
-
}
|
|
20
|
-
);
|
|
21
|
-
}
|
|
22
|
-
return children;
|
|
23
|
-
};
|
|
24
|
-
exports.TooltipWrapper = TooltipWrapper;
|
|
25
|
-
//# sourceMappingURL=TooltipWrapper.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipWrapper.cjs","sources":["../../../../../src/VerticalNavigation/TreeView/TooltipWrapper/TooltipWrapper.tsx"],"sourcesContent":["import { HvTooltip, HvTooltipPlacementType } from \"../../../Tooltip\";\nimport { HvTypography } from \"../../../Typography\";\n\ninterface TooltipWrapperProps {\n showTooltip: boolean;\n label: string;\n children: React.ReactElement;\n placement?: HvTooltipPlacementType;\n}\n\nexport const TooltipWrapper = ({\n showTooltip,\n label,\n children,\n placement = \"right\",\n}: TooltipWrapperProps) => {\n if (showTooltip) {\n return (\n <HvTooltip\n title={<HvTypography>{label}</HvTypography>}\n placement={placement}\n >\n {children}\n </HvTooltip>\n );\n }\n return children;\n};\n"],"names":["jsx","HvTooltip","HvTypography"],"mappings":";;;;;AAUO,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AACd,MAA2B;AACzB,MAAI,aAAa;AAEb,WAAAA,2BAAA;AAAA,MAACC,QAAA;AAAA,MAAA;AAAA,QACC,OAAQD,2BAAAA,IAAAE,WAAAA,cAAA,EAAc,UAAM,MAAA,CAAA;AAAA,QAC5B;AAAA,QAEC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACO,SAAA;AACT;;"}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
-
import { HvTooltip } from "../../../Tooltip/Tooltip.js";
|
|
3
|
-
import { HvTypography } from "../../../Typography/Typography.js";
|
|
4
|
-
const TooltipWrapper = ({
|
|
5
|
-
showTooltip,
|
|
6
|
-
label,
|
|
7
|
-
children,
|
|
8
|
-
placement = "right"
|
|
9
|
-
}) => {
|
|
10
|
-
if (showTooltip) {
|
|
11
|
-
return /* @__PURE__ */ jsx(
|
|
12
|
-
HvTooltip,
|
|
13
|
-
{
|
|
14
|
-
title: /* @__PURE__ */ jsx(HvTypography, { children: label }),
|
|
15
|
-
placement,
|
|
16
|
-
children
|
|
17
|
-
}
|
|
18
|
-
);
|
|
19
|
-
}
|
|
20
|
-
return children;
|
|
21
|
-
};
|
|
22
|
-
export {
|
|
23
|
-
TooltipWrapper
|
|
24
|
-
};
|
|
25
|
-
//# sourceMappingURL=TooltipWrapper.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipWrapper.js","sources":["../../../../../src/VerticalNavigation/TreeView/TooltipWrapper/TooltipWrapper.tsx"],"sourcesContent":["import { HvTooltip, HvTooltipPlacementType } from \"../../../Tooltip\";\nimport { HvTypography } from \"../../../Typography\";\n\ninterface TooltipWrapperProps {\n showTooltip: boolean;\n label: string;\n children: React.ReactElement;\n placement?: HvTooltipPlacementType;\n}\n\nexport const TooltipWrapper = ({\n showTooltip,\n label,\n children,\n placement = \"right\",\n}: TooltipWrapperProps) => {\n if (showTooltip) {\n return (\n <HvTooltip\n title={<HvTypography>{label}</HvTypography>}\n placement={placement}\n >\n {children}\n </HvTooltip>\n );\n }\n return children;\n};\n"],"names":[],"mappings":";;;AAUO,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AACd,MAA2B;AACzB,MAAI,aAAa;AAEb,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAQ,oBAAA,cAAA,EAAc,UAAM,MAAA,CAAA;AAAA,QAC5B;AAAA,QAEC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACO,SAAA;AACT;"}
|