@hitachivantara/uikit-react-core 5.7.3 → 5.7.4
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/components/Banner/BannerContent/BannerContent.cjs +1 -1
- package/dist/cjs/components/Banner/BannerContent/BannerContent.cjs.map +1 -1
- package/dist/cjs/components/Dialog/Dialog.cjs +24 -20
- package/dist/cjs/components/Dialog/Dialog.cjs.map +1 -1
- package/dist/cjs/components/Dialog/Dialog.styles.cjs +6 -28
- package/dist/cjs/components/Dialog/Dialog.styles.cjs.map +1 -1
- package/dist/cjs/components/Dialog/Title/Title.cjs +1 -1
- package/dist/cjs/components/Dialog/Title/Title.cjs.map +1 -1
- package/dist/cjs/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.cjs +1 -1
- package/dist/cjs/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.cjs.map +1 -1
- package/dist/cjs/components/VerticalNavigation/NavigationSlider/NavigationSlider.cjs +7 -4
- package/dist/cjs/components/VerticalNavigation/NavigationSlider/NavigationSlider.cjs.map +1 -1
- package/dist/cjs/components/VerticalNavigation/TreeView/TreeView.cjs +6 -1
- package/dist/cjs/components/VerticalNavigation/TreeView/TreeView.cjs.map +1 -1
- package/dist/cjs/utils/iconVariant.cjs.map +1 -1
- package/dist/esm/components/Banner/BannerContent/BannerContent.js +1 -1
- package/dist/esm/components/Banner/BannerContent/BannerContent.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.js +25 -21
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.styles.js +7 -29
- package/dist/esm/components/Dialog/Dialog.styles.js.map +1 -1
- package/dist/esm/components/Dialog/Title/Title.js +1 -1
- package/dist/esm/components/Dialog/Title/Title.js.map +1 -1
- package/dist/esm/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.js +1 -1
- package/dist/esm/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.js.map +1 -1
- package/dist/esm/components/VerticalNavigation/NavigationSlider/NavigationSlider.js +7 -4
- package/dist/esm/components/VerticalNavigation/NavigationSlider/NavigationSlider.js.map +1 -1
- package/dist/esm/components/VerticalNavigation/TreeView/TreeView.js +6 -1
- package/dist/esm/components/VerticalNavigation/TreeView/TreeView.js.map +1 -1
- package/dist/esm/utils/iconVariant.js.map +1 -1
- package/dist/types/index.d.ts +6 -1
- package/package.json +2 -2
|
@@ -25,7 +25,7 @@ const HvBannerContent = React.forwardRef(({
|
|
|
25
25
|
actionProps,
|
|
26
26
|
...others
|
|
27
27
|
}, ref) => {
|
|
28
|
-
const icon = customIcon || showIcon && iconVariant.default(variant, "base_dark"
|
|
28
|
+
const icon = customIcon || showIcon && iconVariant.default(variant, "base_dark");
|
|
29
29
|
const effectiveActionsPosition = actionsPosition === "auto" ? "inline" : actionsPosition;
|
|
30
30
|
return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
|
|
31
31
|
children: ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerContent.cjs","sources":["../../../../../src/components/Banner/BannerContent/BannerContent.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport SnackbarContent, {\n SnackbarContentProps as MuiSnackbarContentProps,\n} from \"@mui/material/SnackbarContent\";\nimport { HvBaseProps } from \"@core/types\";\nimport { iconVariant } from \"@core/utils\";\nimport {\n HvActionGeneric,\n HvBannerActionPosition,\n HvBannerVariant,\n} from \"@core/components\";\nimport bannerContentClasses, {\n HvBannerContentClasses,\n} from \"./bannerContentClasses\";\nimport { HvActionContainer, HvActionContainerProps } from \"./ActionContainer\";\nimport { HvMessageContainer } from \"./MessageContainer\";\nimport { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./BannerContent.styles\";\n\nexport interface HvBannerContentProps\n extends Omit<MuiSnackbarContentProps, \"variant\" | \"classes\" | \"onClose\">,\n HvBaseProps {\n /** The message to display. */\n content?: string;\n /** Variant of the snackbar. */\n variant?: HvBannerVariant;\n /** Controls if the associated icon to the variant should be shown. */\n showIcon?: boolean;\n /** Custom icon to replace the variant default. */\n customIcon?: React.ReactNode;\n /** onClose function. */\n onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n /** Actions to display on the right side. */\n actions?: React.ReactNode | HvActionGeneric[];\n /** The callback function ran when an action is triggered, receiving `action` as param */\n actionsCallback?: (\n event: React.SyntheticEvent,\n id: string,\n action: HvActionGeneric\n ) => void;\n /** The position property of the header. */\n actionsPosition?: HvBannerActionPosition;\n /** The props to pass down to the Action Container. */\n actionProps?: HvActionContainerProps;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvBannerContentClasses;\n}\n\nexport const HvBannerContent = forwardRef<HTMLDivElement, HvBannerContentProps>(\n (\n {\n id,\n classes,\n showIcon = false,\n customIcon,\n variant = \"default\",\n onClose,\n actions,\n actionsCallback,\n actionsPosition = \"auto\",\n content,\n actionProps,\n ...others\n },\n ref\n ) => {\n const icon
|
|
1
|
+
{"version":3,"file":"BannerContent.cjs","sources":["../../../../../src/components/Banner/BannerContent/BannerContent.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport SnackbarContent, {\n SnackbarContentProps as MuiSnackbarContentProps,\n} from \"@mui/material/SnackbarContent\";\nimport { HvBaseProps } from \"@core/types\";\nimport { iconVariant } from \"@core/utils\";\nimport {\n HvActionGeneric,\n HvBannerActionPosition,\n HvBannerVariant,\n} from \"@core/components\";\nimport bannerContentClasses, {\n HvBannerContentClasses,\n} from \"./bannerContentClasses\";\nimport { HvActionContainer, HvActionContainerProps } from \"./ActionContainer\";\nimport { HvMessageContainer } from \"./MessageContainer\";\nimport { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./BannerContent.styles\";\n\nexport interface HvBannerContentProps\n extends Omit<MuiSnackbarContentProps, \"variant\" | \"classes\" | \"onClose\">,\n HvBaseProps {\n /** The message to display. */\n content?: string;\n /** Variant of the snackbar. */\n variant?: HvBannerVariant;\n /** Controls if the associated icon to the variant should be shown. */\n showIcon?: boolean;\n /** Custom icon to replace the variant default. */\n customIcon?: React.ReactNode;\n /** onClose function. */\n onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n /** Actions to display on the right side. */\n actions?: React.ReactNode | HvActionGeneric[];\n /** The callback function ran when an action is triggered, receiving `action` as param */\n actionsCallback?: (\n event: React.SyntheticEvent,\n id: string,\n action: HvActionGeneric\n ) => void;\n /** The position property of the header. */\n actionsPosition?: HvBannerActionPosition;\n /** The props to pass down to the Action Container. */\n actionProps?: HvActionContainerProps;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvBannerContentClasses;\n}\n\nexport const HvBannerContent = forwardRef<HTMLDivElement, HvBannerContentProps>(\n (\n {\n id,\n classes,\n showIcon = false,\n customIcon,\n variant = \"default\",\n onClose,\n actions,\n actionsCallback,\n actionsPosition = \"auto\",\n content,\n actionProps,\n ...others\n },\n ref\n ) => {\n const icon = customIcon || (showIcon && iconVariant(variant, \"base_dark\"));\n\n // default to inline\n // this might try to be more intelligent in the future,\n // taking into account the content length, available space,\n // number of actions, etc..\n const effectiveActionsPosition =\n actionsPosition === \"auto\" ? \"inline\" : actionsPosition;\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <div\n className={cx(\n bannerContentClasses.outContainer,\n css(styles.outContainer),\n classes?.outContainer\n )}\n >\n <SnackbarContent\n ref={ref}\n id={id}\n classes={{\n root: cx(\n bannerContentClasses.root,\n css(styles.root),\n classes?.root\n ),\n message: cx(\n bannerContentClasses.message,\n css(styles.message),\n classes?.message\n ),\n action: cx(\n bannerContentClasses.action,\n css(styles.action),\n classes?.action\n ),\n }}\n className={cx(\n bannerContentClasses.baseVariant,\n bannerContentClasses[variant],\n css(styles.baseVariant),\n css(styles[variant]),\n classes?.baseVariant,\n classes?.[variant]\n )}\n message={\n <HvMessageContainer\n id={id}\n icon={icon}\n {...(effectiveActionsPosition === \"inline\" && {\n actionsOnMessage: actions,\n actionsOnMessageCallback: actionsCallback,\n })}\n message={content}\n />\n }\n action={\n <HvActionContainer\n id={id}\n onClose={onClose}\n {...(effectiveActionsPosition === \"bottom-right\" && {\n action: actions,\n actionCallback: actionsCallback,\n })}\n {...actionProps}\n />\n }\n {...others}\n />\n </div>\n )}\n </ClassNames>\n );\n }\n);\n"],"names":["HvBannerContent","forwardRef","id","classes","showIcon","customIcon","variant","onClose","actions","actionsCallback","actionsPosition","content","actionProps","others","ref","icon","iconVariant","effectiveActionsPosition","ClassNames","children","css","cx","className","bannerContentClasses","outContainer","styles","SnackbarContent","root","message","action","baseVariant","HvMessageContainer","actionsOnMessage","actionsOnMessageCallback","HvActionContainer","actionCallback"],"mappings":";;;;;;;;;;;;;AAgDaA,MAAAA,kBAAkBC,iBAC7B,CACE;AAAA,EACEC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,EACXC;AAAAA,EACAC,UAAU;AAAA,EACVC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,kBAAkB;AAAA,EAClBC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACL,GACAC,QACG;AACH,QAAMC,OAAOV,cAAeD,YAAYY,YAAAA,QAAYV,SAAS,WAAW;AAMlEW,QAAAA,2BACJP,oBAAoB,SAAS,WAAWA;AAE1C,wCACGQ,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,qCACP,OAAA;AAAA,MACEC,WAAWD,GACTE,qBAAqBC,QAAAA,cACrBJ,IAAIK,qBAAAA,OAAOD,YAAY,GACvBrB,mCAASqB,YAAY;AAAA,MACrBL,yCAEDO,kCAAe;AAAA,QACdZ;AAAAA,QACAZ;AAAAA,QACAC,SAAS;AAAA,UACPwB,MAAMN,GACJE,qBAAqBI,QAAAA,MACrBP,IAAIK,qBAAAA,OAAOE,IAAI,GACfxB,mCAASwB,IAAI;AAAA,UAEfC,SAASP,GACPE,qBAAqBK,QAAAA,SACrBR,IAAIK,qBAAAA,OAAOG,OAAO,GAClBzB,mCAASyB,OAAO;AAAA,UAElBC,QAAQR,GACNE,qBAAqBM,QAAAA,QACrBT,IAAIK,qBAAAA,OAAOI,MAAM,GACjB1B,mCAAS0B,MAAM;AAAA,QAEnB;AAAA,QACAP,WAAWD,GACTE,qBAAAA,QAAqBO,aACrBP,6BAAqBjB,OAAO,GAC5Bc,IAAIK,4BAAOK,WAAW,GACtBV,IAAIK,qBAAAA,OAAOnB,OAAO,CAAC,GACnBH,mCAAS2B,aACT3B,mCAAUG,QAAQ;AAAA,QAEpBsB,wCACGG,qCAAkB;AAAA,UACjB7B;AAAAA,UACAa;AAAAA,UAAW,GACNE,6BAA6B,YAAY;AAAA,YAC5Ce,kBAAkBxB;AAAAA,YAClByB,0BAA0BxB;AAAAA,UAC5B;AAAA,UACAmB,SAASjB;AAAAA,QAAAA,CAEZ;AAAA,QACDkB,uCACGK,mCAAiB;AAAA,UAChBhC;AAAAA,UACAK;AAAAA,UAAiB,GACZU,6BAA6B,kBAAkB;AAAA,YAClDY,QAAQrB;AAAAA,YACR2B,gBAAgB1B;AAAAA,UAClB;AAAA,UAAC,GACGG;AAAAA,QAAAA,CAEP;AAAA,QAAA,GACGC;AAAAA,MAAAA,CAAM;AAAA,IAAA,CACV;AAAA,EAAA,CAGK;AAEjB,CAAC;;"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const React = require("react");
|
|
4
|
+
const react = require("@emotion/react");
|
|
4
5
|
const MuiDialog = require("@mui/material/Dialog");
|
|
6
|
+
const isNil = require("lodash/isNil");
|
|
5
7
|
const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
|
|
6
8
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
7
|
-
const isNil = require("lodash/isNil");
|
|
8
|
-
const Dialog_styles = require("./Dialog.styles.cjs");
|
|
9
9
|
const dialogClasses = require("./dialogClasses.cjs");
|
|
10
|
-
const
|
|
10
|
+
const Dialog_styles = require("./Dialog.styles.cjs");
|
|
11
11
|
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
12
12
|
const focusableElementFinder = require("../../utils/focusableElementFinder.cjs");
|
|
13
13
|
const withTooltip = require("../../hocs/withTooltip.cjs");
|
|
@@ -19,6 +19,17 @@ const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
|
|
19
19
|
const React__default = /* @__PURE__ */ _interopDefault(React);
|
|
20
20
|
const MuiDialog__default = /* @__PURE__ */ _interopDefault(MuiDialog);
|
|
21
21
|
const isNil__default = /* @__PURE__ */ _interopDefault(isNil);
|
|
22
|
+
const DialogBackdrop = (backdropProps) => {
|
|
23
|
+
var _a;
|
|
24
|
+
const {
|
|
25
|
+
activeTheme,
|
|
26
|
+
selectedMode
|
|
27
|
+
} = useTheme.useTheme();
|
|
28
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Dialog_styles.StyledBackdrop, {
|
|
29
|
+
$backColor: ((_a = activeTheme == null ? void 0 : activeTheme.colors) == null ? void 0 : _a.modes[selectedMode].atmo4) || uikitStyles.theme.colors.atmo4,
|
|
30
|
+
...backdropProps
|
|
31
|
+
});
|
|
32
|
+
};
|
|
22
33
|
const HvDialog = ({
|
|
23
34
|
classes,
|
|
24
35
|
className,
|
|
@@ -34,21 +45,19 @@ const HvDialog = ({
|
|
|
34
45
|
}) => {
|
|
35
46
|
delete others.fullScreen;
|
|
36
47
|
const {
|
|
37
|
-
activeTheme,
|
|
38
|
-
selectedMode,
|
|
39
48
|
rootId
|
|
40
49
|
} = useTheme.useTheme();
|
|
41
50
|
const focusableQueue = React.useRef({
|
|
42
51
|
first: void 0,
|
|
43
52
|
last: void 0
|
|
44
53
|
});
|
|
45
|
-
const wrappedClose = (event, bypassValidation = false, reason) => {
|
|
54
|
+
const wrappedClose = React.useCallback((event, bypassValidation = false, reason) => {
|
|
46
55
|
if (bypassValidation) {
|
|
47
56
|
onClose == null ? void 0 : onClose(event, reason);
|
|
48
57
|
} else if (!disableBackdropClick) {
|
|
49
58
|
onClose == null ? void 0 : onClose(event, reason);
|
|
50
59
|
}
|
|
51
|
-
};
|
|
60
|
+
}, [onClose]);
|
|
52
61
|
const measuredRef = React.useCallback((node) => {
|
|
53
62
|
if (node) {
|
|
54
63
|
const focusableList = focusableElementFinder.getFocusableList(node);
|
|
@@ -94,6 +103,13 @@ const HvDialog = ({
|
|
|
94
103
|
role: "presentation"
|
|
95
104
|
});
|
|
96
105
|
const CloseButtonTooltipWrapper = buttonTitle ? withTooltip.default(closeButtonDisplay, buttonTitle, "top") : closeButtonDisplay;
|
|
106
|
+
const slots = React.useMemo(() => ({
|
|
107
|
+
backdrop: (backdropProps) => /* @__PURE__ */ jsxRuntime.jsx(DialogBackdrop, {
|
|
108
|
+
open,
|
|
109
|
+
onClick: wrappedClose,
|
|
110
|
+
...backdropProps
|
|
111
|
+
})
|
|
112
|
+
}), [open, wrappedClose]);
|
|
97
113
|
return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
|
|
98
114
|
children: ({
|
|
99
115
|
css,
|
|
@@ -107,19 +123,7 @@ const HvDialog = ({
|
|
|
107
123
|
fullScreen: fullscreen,
|
|
108
124
|
onClose: (event, reason) => wrappedClose(event, void 0, reason),
|
|
109
125
|
onKeyDown: keyDownHandler,
|
|
110
|
-
|
|
111
|
-
maxWidth: false,
|
|
112
|
-
slots: {
|
|
113
|
-
backdrop: (backdropProps) => {
|
|
114
|
-
var _a;
|
|
115
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Dialog_styles.StyledBackdrop, {
|
|
116
|
-
open,
|
|
117
|
-
onClick: (event) => wrappedClose(event),
|
|
118
|
-
$backColor: ((_a = activeTheme == null ? void 0 : activeTheme.colors) == null ? void 0 : _a.modes[selectedMode].atmo4) || uikitStyles.theme.colors.atmo4,
|
|
119
|
-
...backdropProps
|
|
120
|
-
});
|
|
121
|
-
}
|
|
122
|
-
},
|
|
126
|
+
slots,
|
|
123
127
|
classes: {
|
|
124
128
|
container: css({
|
|
125
129
|
position: "relative"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.cjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import React, { useCallback, useRef } from \"react\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport isNil from \"lodash/isNil\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { StyledBackdrop, StyledClose, styles } from \"./Dialog.styles\";\nimport {\n isKeypress,\n keyboardCodes,\n setId,\n getFocusableList,\n} from \"@core/utils\";\nimport { withTooltip } from \"@core/hocs\";\nimport dialogClasses, { HvDialogClasses } from \"./dialogClasses\";\nimport { useTheme } from \"@core/hooks\";\nimport { ClassNames } from \"@emotion/react\";\n\nexport interface HvDialogProps\n extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\">,\n HvBaseProps {\n /** Id to be applied to the root node. */\n id?: string;\n /** Current state of the Dialog. */\n open?: boolean;\n /** Function executed on close. */\n onClose?: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => void;\n /** Element id that should be focus when the Dialog opens. */\n firstFocusable?: string;\n /** Title for the button close. */\n buttonTitle?: string;\n /** Set the dialog to fullscreen mode. */\n fullscreen?: boolean;\n /** Prevent closing the dialog when clicking on the backdrop. */\n disableBackdropClick?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDialogClasses;\n}\n\nexport const HvDialog = ({\n classes,\n className,\n id,\n children,\n open = false,\n onClose,\n firstFocusable,\n buttonTitle = \"Close\",\n fullscreen = false,\n disableBackdropClick = false,\n ...others\n}: HvDialogProps) => {\n delete (others as any).fullScreen;\n\n const { activeTheme, selectedMode, rootId } = useTheme();\n\n const focusableQueue = useRef<{\n first?: HTMLElement;\n last?: HTMLElement;\n }>({ first: undefined, last: undefined });\n\n // Because the `disableBackdropClick` property was deprecated in MUI5\n // and we want to maintain that functionality to the user we're wrapping\n // the onClose call here to make that check.\n const wrappedClose = (\n event,\n bypassValidation: boolean = false,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => {\n if (bypassValidation) {\n onClose?.(event, reason);\n } else if (!disableBackdropClick) {\n onClose?.(event, reason);\n }\n };\n\n const measuredRef = useCallback(\n (node) => {\n if (node) {\n const focusableList = getFocusableList(node);\n focusableQueue.current = {\n first: focusableList[1],\n last: focusableList[focusableList.length - 2],\n };\n if (isNil(firstFocusable)) focusableList[1].focus();\n else {\n const element =\n firstFocusable && document.getElementById(firstFocusable);\n if (element) element.focus();\n else {\n console.warn(`firstFocusable element ${firstFocusable} not found.`);\n\n focusableList[1].focus();\n }\n }\n }\n },\n [firstFocusable]\n );\n\n const keyDownHandler = (event) => {\n if (\n isKeypress(event, keyboardCodes.Tab) &&\n !isNil(event.target) &&\n !isNil(focusableQueue)\n ) {\n if (event.shiftKey && event.target === focusableQueue.current.first) {\n focusableQueue.current.last?.focus();\n event.preventDefault();\n }\n if (!event.shiftKey && event.target === focusableQueue.current.last) {\n focusableQueue.current.first?.focus();\n event.preventDefault();\n }\n }\n // Needed as this handler overrides the one in the material ui Modal.\n else if (isKeypress(event, keyboardCodes.Esc)) {\n if (\n \"onEscapeKeyDown\" in others &&\n typeof others.onEscapeKeyDown === \"function\"\n ) {\n others.onEscapeKeyDown(event);\n }\n\n if (!others.disableEscapeKeyDown) {\n // Swallow the event, in case someone is listening for the escape key on the body.\n event.stopPropagation();\n\n wrappedClose(event, true, \"escapeKeyDown\");\n }\n }\n };\n\n const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n const CloseButtonTooltipWrapper = buttonTitle\n ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n : closeButtonDisplay;\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <MuiDialog\n container={document.getElementById(rootId || \"\") || document.body}\n className={cx(dialogClasses.root, className, classes?.root)}\n id={id}\n ref={measuredRef}\n open={open}\n fullScreen={fullscreen}\n onClose={(event, reason) => wrappedClose(event, undefined, reason)}\n onKeyDown={keyDownHandler}\n fullWidth\n maxWidth={false}\n slots={{\n backdrop: (backdropProps) => (\n <StyledBackdrop\n open={open}\n onClick={(event) => wrappedClose(event)}\n $backColor={\n activeTheme?.colors?.modes[selectedMode].atmo4 ||\n theme.colors.atmo4\n }\n {...backdropProps}\n />\n ),\n }}\n classes={{ container: css({ position: \"relative\" }) }}\n BackdropProps={{\n classes: {\n root: cx(dialogClasses.background, classes?.background),\n },\n }}\n PaperProps={{\n classes: {\n root: cx(\n dialogClasses.paper,\n fullscreen && cx(dialogClasses.fullscreen, \"fullscreen\"),\n css(styles.paper),\n css({ position: \"absolute\" }),\n classes?.paper,\n fullscreen && classes?.fullscreen\n ),\n },\n }}\n aria-modal\n {...others}\n >\n <StyledClose\n id={setId(id, \"close\")}\n className={cx(dialogClasses.closeButton, classes?.closeButton)}\n variant=\"secondaryGhost\"\n onClick={(event) => wrappedClose(event, true, undefined)}\n aria-label={buttonTitle}\n >\n <CloseButtonTooltipWrapper />\n </StyledClose>\n {children && typeof children === \"object\"\n ? React.Children.map(\n children,\n (c: React.ReactNode) =>\n c &&\n React.cloneElement(c as React.ReactElement, { fullscreen })\n )\n : children}\n </MuiDialog>\n )}\n </ClassNames>\n );\n};\n"],"names":["HvDialog","classes","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","fullScreen","activeTheme","selectedMode","rootId","useTheme","focusableQueue","useRef","first","undefined","last","wrappedClose","event","bypassValidation","reason","measuredRef","useCallback","node","focusableList","getFocusableList","current","length","isNil","focus","element","document","getElementById","warn","keyDownHandler","isKeypress","keyboardCodes","Tab","target","shiftKey","preventDefault","Esc","onEscapeKeyDown","disableEscapeKeyDown","stopPropagation","closeButtonDisplay","_jsx","Close","role","CloseButtonTooltipWrapper","withTooltip","ClassNames","css","cx","MuiDialog","container","body","dialogClasses","root","ref","onKeyDown","fullWidth","maxWidth","slots","backdrop","backdropProps","StyledBackdrop","onClick","$backColor","colors","modes","atmo4","theme","position","BackdropProps","background","PaperProps","paper","styles","StyledClose","setId","closeButton","variant","React","Children","map","c","cloneElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Dialog.cjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { BackdropProps } from \"@mui/material\";\nimport isNil from \"lodash/isNil\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport {\n isKeypress,\n keyboardCodes,\n setId,\n getFocusableList,\n} from \"@core/utils\";\nimport { withTooltip } from \"@core/hocs\";\nimport { useTheme } from \"@core/hooks\";\nimport dialogClasses, { HvDialogClasses } from \"./dialogClasses\";\nimport { StyledBackdrop, StyledClose, styles } from \"./Dialog.styles\";\n\nexport interface HvDialogProps\n extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\">,\n HvBaseProps {\n /** Id to be applied to the root node. */\n id?: string;\n /** Current state of the Dialog. */\n open?: boolean;\n /** Function executed on close. */\n onClose?: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => void;\n /** @inheritdoc */\n maxWidth?: MuiDialogProps[\"maxWidth\"];\n /** @inheritdoc */\n fullWidth?: MuiDialogProps[\"fullWidth\"];\n /** Element id that should be focus when the Dialog opens. */\n firstFocusable?: string;\n /** Title for the button close. */\n buttonTitle?: string;\n /** Set the dialog to fullscreen mode. */\n fullscreen?: boolean;\n /** Prevent closing the dialog when clicking on the backdrop. */\n disableBackdropClick?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDialogClasses;\n}\n\nconst DialogBackdrop = (backdropProps: BackdropProps) => {\n const { activeTheme, selectedMode } = useTheme();\n return (\n <StyledBackdrop\n $backColor={\n activeTheme?.colors?.modes[selectedMode].atmo4 || theme.colors.atmo4\n }\n {...backdropProps}\n />\n );\n};\n\nexport const HvDialog = ({\n classes,\n className,\n id,\n children,\n open = false,\n onClose,\n firstFocusable,\n buttonTitle = \"Close\",\n fullscreen = false,\n disableBackdropClick = false,\n ...others\n}: HvDialogProps) => {\n delete (others as any).fullScreen;\n\n const { rootId } = useTheme();\n\n const focusableQueue = useRef<{\n first?: HTMLElement;\n last?: HTMLElement;\n }>({ first: undefined, last: undefined });\n\n // Because the `disableBackdropClick` property was deprecated in MUI5\n // and we want to maintain that functionality to the user we're wrapping\n // the onClose call here to make that check.\n const wrappedClose = useCallback(\n (\n event,\n bypassValidation: boolean = false,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => {\n if (bypassValidation) {\n onClose?.(event, reason);\n } else if (!disableBackdropClick) {\n onClose?.(event, reason);\n }\n },\n [onClose]\n );\n\n const measuredRef = useCallback(\n (node) => {\n if (node) {\n const focusableList = getFocusableList(node);\n focusableQueue.current = {\n first: focusableList[1],\n last: focusableList[focusableList.length - 2],\n };\n if (isNil(firstFocusable)) focusableList[1].focus();\n else {\n const element =\n firstFocusable && document.getElementById(firstFocusable);\n if (element) element.focus();\n else {\n console.warn(`firstFocusable element ${firstFocusable} not found.`);\n\n focusableList[1].focus();\n }\n }\n }\n },\n [firstFocusable]\n );\n\n const keyDownHandler = (event) => {\n if (\n isKeypress(event, keyboardCodes.Tab) &&\n !isNil(event.target) &&\n !isNil(focusableQueue)\n ) {\n if (event.shiftKey && event.target === focusableQueue.current.first) {\n focusableQueue.current.last?.focus();\n event.preventDefault();\n }\n if (!event.shiftKey && event.target === focusableQueue.current.last) {\n focusableQueue.current.first?.focus();\n event.preventDefault();\n }\n }\n // Needed as this handler overrides the one in the material ui Modal.\n else if (isKeypress(event, keyboardCodes.Esc)) {\n if (\n \"onEscapeKeyDown\" in others &&\n typeof others.onEscapeKeyDown === \"function\"\n ) {\n others.onEscapeKeyDown(event);\n }\n\n if (!others.disableEscapeKeyDown) {\n // Swallow the event, in case someone is listening for the escape key on the body.\n event.stopPropagation();\n\n wrappedClose(event, true, \"escapeKeyDown\");\n }\n }\n };\n\n const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n const CloseButtonTooltipWrapper = buttonTitle\n ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n : closeButtonDisplay;\n\n const slots = useMemo<MuiDialogProps[\"slots\"]>(\n () => ({\n backdrop: (backdropProps) => (\n <DialogBackdrop open={open} onClick={wrappedClose} {...backdropProps} />\n ),\n }),\n [open, wrappedClose]\n );\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <MuiDialog\n container={document.getElementById(rootId || \"\") || document.body}\n className={cx(dialogClasses.root, className, classes?.root)}\n id={id}\n ref={measuredRef}\n open={open}\n fullScreen={fullscreen}\n onClose={(event, reason) => wrappedClose(event, undefined, reason)}\n onKeyDown={keyDownHandler}\n slots={slots}\n classes={{ container: css({ position: \"relative\" }) }}\n BackdropProps={{\n classes: {\n root: cx(dialogClasses.background, classes?.background),\n },\n }}\n PaperProps={{\n classes: {\n root: cx(\n dialogClasses.paper,\n fullscreen && cx(dialogClasses.fullscreen, \"fullscreen\"),\n css(styles.paper),\n css({ position: \"absolute\" }),\n classes?.paper,\n fullscreen && classes?.fullscreen\n ),\n },\n }}\n aria-modal\n {...others}\n >\n <StyledClose\n id={setId(id, \"close\")}\n className={cx(dialogClasses.closeButton, classes?.closeButton)}\n variant=\"secondaryGhost\"\n onClick={(event) => wrappedClose(event, true, undefined)}\n aria-label={buttonTitle}\n >\n <CloseButtonTooltipWrapper />\n </StyledClose>\n {children && typeof children === \"object\"\n ? React.Children.map(\n children,\n (c: React.ReactNode) =>\n c &&\n React.cloneElement(c as React.ReactElement, { fullscreen })\n )\n : children}\n </MuiDialog>\n )}\n </ClassNames>\n );\n};\n"],"names":["DialogBackdrop","backdropProps","activeTheme","selectedMode","useTheme","StyledBackdrop","$backColor","colors","modes","atmo4","theme","HvDialog","classes","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","fullScreen","rootId","focusableQueue","useRef","first","undefined","last","wrappedClose","useCallback","event","bypassValidation","reason","measuredRef","node","focusableList","getFocusableList","current","length","isNil","focus","element","document","getElementById","warn","keyDownHandler","isKeypress","keyboardCodes","Tab","target","shiftKey","preventDefault","Esc","onEscapeKeyDown","disableEscapeKeyDown","stopPropagation","closeButtonDisplay","_jsx","Close","role","CloseButtonTooltipWrapper","withTooltip","slots","useMemo","backdrop","onClick","ClassNames","css","cx","MuiDialog","container","body","dialogClasses","root","ref","onKeyDown","position","BackdropProps","background","PaperProps","paper","styles","StyledClose","setId","closeButton","variant","React","Children","map","c","cloneElement"],"mappings":"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"}
|
|
@@ -26,32 +26,10 @@ function _extends() {
|
|
|
26
26
|
}
|
|
27
27
|
const styles = {
|
|
28
28
|
paper: {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
color: uikitStyles.theme.colors.secondary,
|
|
34
|
-
flex: "0 0 83.3333333%",
|
|
35
|
-
backgroundColor: uikitStyles.theme.colors.atmo1,
|
|
36
|
-
padding: "0px",
|
|
37
|
-
overflow: "auto",
|
|
38
|
-
boxShadow: ["none", "0 2px 12px rgba(65,65,65,0.12)"],
|
|
39
|
-
borderRadius: uikitStyles.theme.dialog.borderRadius,
|
|
40
|
-
[`&.${material.paperClasses.root}`]: {
|
|
41
|
-
// width: "inherit",
|
|
42
|
-
minWidth: "33.3333333%",
|
|
43
|
-
maxWidth: "83.3333333%",
|
|
44
|
-
"&.fullscreen": {
|
|
45
|
-
flex: "1",
|
|
46
|
-
borderRadius: "0",
|
|
47
|
-
width: "inherit",
|
|
48
|
-
minWidth: "100%",
|
|
49
|
-
maxWidth: "100%",
|
|
50
|
-
minHeight: "100%",
|
|
51
|
-
maxHeight: "100%"
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
}
|
|
29
|
+
color: uikitStyles.theme.colors.secondary,
|
|
30
|
+
backgroundColor: uikitStyles.theme.colors.atmo1,
|
|
31
|
+
boxShadow: ["none", uikitStyles.theme.colors.shadow],
|
|
32
|
+
borderRadius: uikitStyles.theme.dialog.borderRadius
|
|
55
33
|
}
|
|
56
34
|
};
|
|
57
35
|
const StyledBackdrop = /* @__PURE__ */ _styled__default.default(material.Backdrop, process.env.NODE_ENV === "production" ? _extends({}, {
|
|
@@ -63,7 +41,7 @@ const StyledBackdrop = /* @__PURE__ */ _styled__default.default(material.Backdro
|
|
|
63
41
|
$backColor
|
|
64
42
|
}) => ({
|
|
65
43
|
background: hexToRgbA.default($backColor, 0.8)
|
|
66
|
-
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
44
|
+
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRGlhbG9nL0RpYWxvZy5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1COEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9EaWFsb2cvRGlhbG9nLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IEJhY2tkcm9wIGFzIE11aUJhY2tkcm9wIH0gZnJvbSBcIkBtdWkvbWF0ZXJpYWxcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuaW1wb3J0IGZhZGUgZnJvbSBcIkBjb3JlL3V0aWxzL2hleFRvUmdiQVwiO1xuaW1wb3J0IHsgSHZCdXR0b24sIEh2QnV0dG9uUHJvcHMgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50c1wiO1xuaW1wb3J0IHsgZm9yd2FyZFJlZiwgUmVmIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBDU1NJbnRlcnBvbGF0aW9uIH0gZnJvbSBcIkBlbW90aW9uL3NlcmlhbGl6ZVwiO1xuaW1wb3J0IHsgSHZEaWFsb2dDbGFzc2VzIH0gZnJvbSBcIi4vZGlhbG9nQ2xhc3Nlc1wiO1xuXG5leHBvcnQgY29uc3Qgc3R5bGVzID0ge1xuICBwYXBlcjoge1xuICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5LFxuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8xLFxuICAgIGJveFNoYWRvdzogW1wibm9uZVwiLCB0aGVtZS5jb2xvcnMuc2hhZG93XSxcbiAgICBib3JkZXJSYWRpdXM6IHRoZW1lLmRpYWxvZy5ib3JkZXJSYWRpdXMsXG4gIH0sXG59IHNhdGlzZmllcyBQYXJ0aWFsPFJlY29yZDxrZXlvZiBIdkRpYWxvZ0NsYXNzZXMsIENTU0ludGVycG9sYXRpb24+PjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEJhY2tkcm9wID0gc3R5bGVkKFxuICBNdWlCYWNrZHJvcCxcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkYmFja0NvbG9yIH06IHsgJGJhY2tDb2xvcjogc3RyaW5nIH0pID0+ICh7XG4gIGJhY2tncm91bmQ6IGZhZGUoJGJhY2tDb2xvciwgMC44KSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENsb3NlID0gc3R5bGVkKFxuICBmb3J3YXJkUmVmKChwcm9wczogSHZCdXR0b25Qcm9wcywgcmVmPzogUmVmPEhUTUxCdXR0b25FbGVtZW50PikgPT4ge1xuICAgIHJldHVybiA8SHZCdXR0b24gey4uLnByb3BzfSByZWY9e3JlZn0gLz47XG4gIH0pXG4pKHtcbiAgcGFkZGluZzogMCxcbiAgbWluV2lkdGg6IFwiYXV0b1wiLFxuICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICB0b3A6IHRoZW1lLnNwYWNlLnNtLFxuICByaWdodDogdGhlbWUuc3BhY2Uuc20sXG4gIHdpZHRoOiAzMixcbiAgaGVpZ2h0OiAzMixcbn0pO1xuIl19 */");
|
|
67
45
|
const StyledClose = /* @__PURE__ */ _styled__default.default(React.forwardRef((props, ref) => {
|
|
68
46
|
return /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
|
|
69
47
|
...props,
|
|
@@ -82,7 +60,7 @@ const StyledClose = /* @__PURE__ */ _styled__default.default(React.forwardRef((p
|
|
|
82
60
|
right: uikitStyles.theme.space.sm,
|
|
83
61
|
width: 32,
|
|
84
62
|
height: 32
|
|
85
|
-
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
63
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRGlhbG9nL0RpYWxvZy5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBCMkIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9EaWFsb2cvRGlhbG9nLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IEJhY2tkcm9wIGFzIE11aUJhY2tkcm9wIH0gZnJvbSBcIkBtdWkvbWF0ZXJpYWxcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuaW1wb3J0IGZhZGUgZnJvbSBcIkBjb3JlL3V0aWxzL2hleFRvUmdiQVwiO1xuaW1wb3J0IHsgSHZCdXR0b24sIEh2QnV0dG9uUHJvcHMgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50c1wiO1xuaW1wb3J0IHsgZm9yd2FyZFJlZiwgUmVmIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBDU1NJbnRlcnBvbGF0aW9uIH0gZnJvbSBcIkBlbW90aW9uL3NlcmlhbGl6ZVwiO1xuaW1wb3J0IHsgSHZEaWFsb2dDbGFzc2VzIH0gZnJvbSBcIi4vZGlhbG9nQ2xhc3Nlc1wiO1xuXG5leHBvcnQgY29uc3Qgc3R5bGVzID0ge1xuICBwYXBlcjoge1xuICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5LFxuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8xLFxuICAgIGJveFNoYWRvdzogW1wibm9uZVwiLCB0aGVtZS5jb2xvcnMuc2hhZG93XSxcbiAgICBib3JkZXJSYWRpdXM6IHRoZW1lLmRpYWxvZy5ib3JkZXJSYWRpdXMsXG4gIH0sXG59IHNhdGlzZmllcyBQYXJ0aWFsPFJlY29yZDxrZXlvZiBIdkRpYWxvZ0NsYXNzZXMsIENTU0ludGVycG9sYXRpb24+PjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEJhY2tkcm9wID0gc3R5bGVkKFxuICBNdWlCYWNrZHJvcCxcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkYmFja0NvbG9yIH06IHsgJGJhY2tDb2xvcjogc3RyaW5nIH0pID0+ICh7XG4gIGJhY2tncm91bmQ6IGZhZGUoJGJhY2tDb2xvciwgMC44KSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENsb3NlID0gc3R5bGVkKFxuICBmb3J3YXJkUmVmKChwcm9wczogSHZCdXR0b25Qcm9wcywgcmVmPzogUmVmPEhUTUxCdXR0b25FbGVtZW50PikgPT4ge1xuICAgIHJldHVybiA8SHZCdXR0b24gey4uLnByb3BzfSByZWY9e3JlZn0gLz47XG4gIH0pXG4pKHtcbiAgcGFkZGluZzogMCxcbiAgbWluV2lkdGg6IFwiYXV0b1wiLFxuICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICB0b3A6IHRoZW1lLnNwYWNlLnNtLFxuICByaWdodDogdGhlbWUuc3BhY2Uuc20sXG4gIHdpZHRoOiAzMixcbiAgaGVpZ2h0OiAzMixcbn0pO1xuIl19 */");
|
|
86
64
|
exports.StyledBackdrop = StyledBackdrop;
|
|
87
65
|
exports.StyledClose = StyledClose;
|
|
88
66
|
exports.styles = styles;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.styles.cjs","sources":["../../../../src/components/Dialog/Dialog.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport {
|
|
1
|
+
{"version":3,"file":"Dialog.styles.cjs","sources":["../../../../src/components/Dialog/Dialog.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { Backdrop as MuiBackdrop } from \"@mui/material\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { HvButton, HvButtonProps } from \"@core/components\";\nimport { forwardRef, Ref } from \"react\";\nimport { CSSInterpolation } from \"@emotion/serialize\";\nimport { HvDialogClasses } from \"./dialogClasses\";\n\nexport const styles = {\n paper: {\n color: theme.colors.secondary,\n backgroundColor: theme.colors.atmo1,\n boxShadow: [\"none\", theme.colors.shadow],\n borderRadius: theme.dialog.borderRadius,\n },\n} satisfies Partial<Record<keyof HvDialogClasses, CSSInterpolation>>;\n\nexport const StyledBackdrop = styled(\n MuiBackdrop,\n transientOptions\n)(({ $backColor }: { $backColor: string }) => ({\n background: fade($backColor, 0.8),\n}));\n\nexport const StyledClose = styled(\n forwardRef((props: HvButtonProps, ref?: Ref<HTMLButtonElement>) => {\n return <HvButton {...props} ref={ref} />;\n })\n)({\n padding: 0,\n minWidth: \"auto\",\n position: \"absolute\",\n top: theme.space.sm,\n right: theme.space.sm,\n width: 32,\n height: 32,\n});\n"],"names":["styles","paper","color","theme","colors","secondary","backgroundColor","atmo1","boxShadow","shadow","borderRadius","dialog","StyledBackdrop","MuiBackdrop","process","env","NODE_ENV","_extends","target","transientOptions","label","$backColor","background","fade","StyledClose","_styled","forwardRef","props","ref","HvButton","padding","minWidth","position","top","space","sm","right","width","height"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAMA,SAAS;AAAA,EACpBC,OAAO;AAAA,IACLC,OAAOC,YAAAA,MAAMC,OAAOC;AAAAA,IACpBC,iBAAiBH,YAAAA,MAAMC,OAAOG;AAAAA,IAC9BC,WAAW,CAAC,QAAQL,kBAAMC,OAAOK,MAAM;AAAA,IACvCC,cAAcP,YAAAA,MAAMQ,OAAOD;AAAAA,EAC7B;AACF;AAEaE,MAAAA,0DACXC,SAAAA,UAAWC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACXC,iBAAgB,gBAAA,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,iBAAAA,gBAAgB,CACjB,EAAC,CAAC;AAAA,EAAEE;AAAmC,OAAO;AAAA,EAC7CC,YAAYC,UAAAA,QAAKF,YAAY,GAAG;AAClC,IAAEP,QAAAC,IAAAC,aAAC,eAAA,KAAA,qmEAAA;AAEI,MAAMQ,cAAcC,iCAAAA,QACzBC,MAAAA,WAAW,CAACC,OAAsBC,QAAiC;AACjE,wCAAQC,OAAAA,UAAQ;AAAA,IAAA,GAAKF;AAAAA,IAAOC;AAAAA,EAAAA,CAAY;AAC1C,CAAC,GAACd,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAE,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAE,OAAA;AAAA,CAAA,EACF;AAAA,EACAU,SAAS;AAAA,EACTC,UAAU;AAAA,EACVC,UAAU;AAAA,EACVC,KAAK9B,YAAAA,MAAM+B,MAAMC;AAAAA,EACjBC,OAAOjC,YAAAA,MAAM+B,MAAMC;AAAAA,EACnBE,OAAO;AAAA,EACPC,QAAQ;AACV,GAACxB,QAAAC,IAAAC,aAAC,eAAA,KAAA,qmEAAA;;;;"}
|
|
@@ -24,7 +24,7 @@ const HvDialogTitle = ({
|
|
|
24
24
|
fullscreen
|
|
25
25
|
} = others;
|
|
26
26
|
delete others.fullscreen;
|
|
27
|
-
const icon = customIcon || showIcon && iconVariant.default(variant
|
|
27
|
+
const icon = customIcon || showIcon && iconVariant.default(variant);
|
|
28
28
|
return /* @__PURE__ */ jsxRuntime.jsx(Title_styles.StyledTitle, {
|
|
29
29
|
className: clsx.clsx(titleClasses.default.root, classes == null ? void 0 : classes.root, className, fullscreen && clsx.clsx(titleClasses.default.fullscreen, classes == null ? void 0 : classes.fullscreen)),
|
|
30
30
|
$fullscreen: fullscreen,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Title.cjs","sources":["../../../../../src/components/Dialog/Title/Title.tsx"],"sourcesContent":["import { DialogTitleProps as MuiDialogTitleProps } from \"@mui/material/DialogTitle\";\nimport { clsx } from \"clsx\";\nimport { HvTypography } from \"@core/components\";\nimport { HvBaseProps } from \"@core/types\";\nimport { iconVariant } from \"@core/utils\";\nimport {\n StyledTitle,\n StyledMessageContainer,\n StyledTextWithIcon,\n} from \"./Title.styles\";\nimport dialogTitleClasses, { HvDialogTitleClasses } from \"./titleClasses\";\nimport { useTheme } from \"@core/hooks\";\n\nexport type HvDialogTitleVariant =\n | \"success\"\n | \"warning\"\n | \"error\"\n | \"info\"\n | \"default\";\n\nexport interface HvDialogTitleProps\n extends Omit<MuiDialogTitleProps, \"variant\" | \"classes\">,\n HvBaseProps<HTMLSpanElement, \"color\"> {\n /** Variant of the Dialog. */\n variant?: HvDialogTitleVariant;\n /** Controls if the associated icon to the variant should be shown. */\n showIcon?: boolean;\n /** Custom icon to replace the variant default. */\n customIcon?: React.ReactNode;\n classes?: HvDialogTitleClasses;\n}\n\nexport const HvDialogTitle = ({\n classes,\n className,\n children,\n variant = \"default\",\n showIcon = true,\n customIcon = null,\n ...others\n}: HvDialogTitleProps) => {\n const { activeTheme } = useTheme();\n\n const isString = typeof children === \"string\";\n\n const { fullscreen } = others as any;\n delete (others as any).fullscreen;\n\n const icon = customIcon || (showIcon && iconVariant(variant
|
|
1
|
+
{"version":3,"file":"Title.cjs","sources":["../../../../../src/components/Dialog/Title/Title.tsx"],"sourcesContent":["import { DialogTitleProps as MuiDialogTitleProps } from \"@mui/material/DialogTitle\";\nimport { clsx } from \"clsx\";\nimport { HvTypography } from \"@core/components\";\nimport { HvBaseProps } from \"@core/types\";\nimport { iconVariant } from \"@core/utils\";\nimport {\n StyledTitle,\n StyledMessageContainer,\n StyledTextWithIcon,\n} from \"./Title.styles\";\nimport dialogTitleClasses, { HvDialogTitleClasses } from \"./titleClasses\";\nimport { useTheme } from \"@core/hooks\";\n\nexport type HvDialogTitleVariant =\n | \"success\"\n | \"warning\"\n | \"error\"\n | \"info\"\n | \"default\";\n\nexport interface HvDialogTitleProps\n extends Omit<MuiDialogTitleProps, \"variant\" | \"classes\">,\n HvBaseProps<HTMLSpanElement, \"color\"> {\n /** Variant of the Dialog. */\n variant?: HvDialogTitleVariant;\n /** Controls if the associated icon to the variant should be shown. */\n showIcon?: boolean;\n /** Custom icon to replace the variant default. */\n customIcon?: React.ReactNode;\n classes?: HvDialogTitleClasses;\n}\n\nexport const HvDialogTitle = ({\n classes,\n className,\n children,\n variant = \"default\",\n showIcon = true,\n customIcon = null,\n ...others\n}: HvDialogTitleProps) => {\n const { activeTheme } = useTheme();\n\n const isString = typeof children === \"string\";\n\n const { fullscreen } = others as any;\n delete (others as any).fullscreen;\n\n const icon = customIcon || (showIcon && iconVariant(variant));\n\n return (\n <StyledTitle\n className={clsx(\n dialogTitleClasses.root,\n classes?.root,\n className,\n fullscreen && clsx(dialogTitleClasses.fullscreen, classes?.fullscreen)\n )}\n $fullscreen={fullscreen}\n {...others}\n >\n <StyledMessageContainer\n className={clsx(\n dialogTitleClasses.messageContainer,\n classes?.messageContainer\n )}\n >\n {icon}\n <StyledTextWithIcon\n className={\n !!icon\n ? clsx(dialogTitleClasses.textWithIcon, classes?.textWithIcon)\n : undefined\n }\n $hasIcon={!!icon}\n >\n {!isString && children}\n {isString && (\n <HvTypography variant={activeTheme?.dialog.titleVariant}>\n {children}\n </HvTypography>\n )}\n </StyledTextWithIcon>\n </StyledMessageContainer>\n </StyledTitle>\n );\n};\n"],"names":["HvDialogTitle","classes","className","children","variant","showIcon","customIcon","others","activeTheme","useTheme","isString","fullscreen","icon","iconVariant","StyledTitle","clsx","dialogTitleClasses","root","$fullscreen","StyledMessageContainer","messageContainer","_jsxs","StyledTextWithIcon","textWithIcon","undefined","$hasIcon","HvTypography","dialog","titleVariant"],"mappings":";;;;;;;;;AAgCO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,UAAU;AAAA,EACVC,WAAW;AAAA,EACXC,aAAa;AAAA,EACb,GAAGC;AACe,MAAM;AAClB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAU,SAAA;AAE5BC,QAAAA,WAAW,OAAOP,aAAa;AAE/B,QAAA;AAAA,IAAEQ;AAAAA,EAAeJ,IAAAA;AACvB,SAAQA,OAAeI;AAEvB,QAAMC,OAAON,cAAeD,YAAYQ,YAAAA,QAAYT,OAAO;AAE3D,wCACGU,aAAAA,aAAW;AAAA,IACVZ,WAAWa,KAAAA,KACTC,aAAAA,QAAmBC,MACnBhB,mCAASgB,MACTf,WACAS,cAAcI,KAAKC,KAAAA,aAAAA,QAAmBL,YAAYV,mCAASU,UAAU,CAAC;AAAA,IAExEO,aAAaP;AAAAA,IAAW,GACpBJ;AAAAA,IAAMJ,0CAETgB,qCAAsB;AAAA,MACrBjB,WAAWa,KAAAA,KACTC,aAAAA,QAAmBI,kBACnBnB,mCAASmB,gBAAgB;AAAA,MACzBjB,UAEDS,CAAAA,MACDS,2BAAAA,KAACC,iCAAkB;AAAA,QACjBpB,WACE,CAAC,CAACU,OACEG,UAAKC,aAAAA,QAAmBO,cAActB,mCAASsB,YAAY,IAC3DC;AAAAA,QAENC,UAAU,CAAC,CAACb;AAAAA,QAAKT,UAAA,CAEhB,CAACO,YAAYP,UACbO,2CACEgB,yBAAY;AAAA,UAACtB,SAASI,2CAAamB,OAAOC;AAAAA,UAAazB;AAAAA,QAAAA,CAGzD,CAAA;AAAA,MAAA,CACkB,CAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAEX;AAElB;;"}
|
|
@@ -20,7 +20,7 @@ const HvSnackbarContent = React.forwardRef(({
|
|
|
20
20
|
actionCallback,
|
|
21
21
|
...others
|
|
22
22
|
}, ref) => {
|
|
23
|
-
const icon = customIcon || showIcon && iconVariant.default(variant, "base_dark"
|
|
23
|
+
const icon = customIcon || showIcon && iconVariant.default(variant, "base_dark");
|
|
24
24
|
const innerAction = React.isValidElement(action) ? action : [action];
|
|
25
25
|
return /* @__PURE__ */ jsxRuntime.jsx(SnackbarContentWrapper_styles.StyledSnackbarContent, {
|
|
26
26
|
ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SnackbarContentWrapper.cjs","sources":["../../../../../src/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef, isValidElement } from \"react\";\nimport { SnackbarContentProps as MuiSnackbarContentProps } from \"@mui/material/SnackbarContent\";\nimport { iconVariant, setId } from \"@core/utils\";\nimport { HvBaseProps } from \"@core/types\";\nimport { HvActionsGeneric, HvActionGeneric } from \"@core/components\";\nimport { HvSnackbarVariant } from \"../Snackbar\";\nimport {\n StyledMessageSpan,\n StyledSnackbarContent,\n StyledMessageText,\n StyledAction,\n} from \"./SnackbarContentWrapper.styles\";\nimport snackbarContentClasses, {\n HvSnackbarContentClasses,\n} from \"./snackbarContentWrapperClasses\";\n\nexport interface HvSnackbarContentProps\n extends Omit<MuiSnackbarContentProps, \"variant\" | \"action\" | \"classes\">,\n HvBaseProps {\n /** The message to display. */\n label?: React.ReactNode;\n /** Variant of the snackbar. */\n variant: HvSnackbarVariant;\n /** Controls if the associated icon to the variant should be shown. */\n showIcon?: boolean;\n /** Custom icon to replace the variant default. */\n customIcon?: React.ReactNode;\n /** Action to display. */\n action?: React.ReactNode | HvActionGeneric;\n /** The callback function ran when an action is triggered, receiving `action` as param */\n actionCallback?: (\n event: React.SyntheticEvent,\n id: string,\n action: HvActionGeneric\n ) => void;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvSnackbarContentClasses;\n}\n\nconst HvSnackbarContent = forwardRef<HTMLDivElement, HvSnackbarContentProps>(\n (\n {\n className,\n id,\n classes,\n label,\n variant,\n showIcon,\n customIcon,\n action,\n actionCallback,\n ...others\n },\n ref\n ) => {\n const icon
|
|
1
|
+
{"version":3,"file":"SnackbarContentWrapper.cjs","sources":["../../../../../src/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef, isValidElement } from \"react\";\nimport { SnackbarContentProps as MuiSnackbarContentProps } from \"@mui/material/SnackbarContent\";\nimport { iconVariant, setId } from \"@core/utils\";\nimport { HvBaseProps } from \"@core/types\";\nimport { HvActionsGeneric, HvActionGeneric } from \"@core/components\";\nimport { HvSnackbarVariant } from \"../Snackbar\";\nimport {\n StyledMessageSpan,\n StyledSnackbarContent,\n StyledMessageText,\n StyledAction,\n} from \"./SnackbarContentWrapper.styles\";\nimport snackbarContentClasses, {\n HvSnackbarContentClasses,\n} from \"./snackbarContentWrapperClasses\";\n\nexport interface HvSnackbarContentProps\n extends Omit<MuiSnackbarContentProps, \"variant\" | \"action\" | \"classes\">,\n HvBaseProps {\n /** The message to display. */\n label?: React.ReactNode;\n /** Variant of the snackbar. */\n variant: HvSnackbarVariant;\n /** Controls if the associated icon to the variant should be shown. */\n showIcon?: boolean;\n /** Custom icon to replace the variant default. */\n customIcon?: React.ReactNode;\n /** Action to display. */\n action?: React.ReactNode | HvActionGeneric;\n /** The callback function ran when an action is triggered, receiving `action` as param */\n actionCallback?: (\n event: React.SyntheticEvent,\n id: string,\n action: HvActionGeneric\n ) => void;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvSnackbarContentClasses;\n}\n\nconst HvSnackbarContent = forwardRef<HTMLDivElement, HvSnackbarContentProps>(\n (\n {\n className,\n id,\n classes,\n label,\n variant,\n showIcon,\n customIcon,\n action,\n actionCallback,\n ...others\n },\n ref\n ) => {\n const icon = customIcon || (showIcon && iconVariant(variant, \"base_dark\"));\n const innerAction: any = isValidElement(action) ? action : [action];\n\n return (\n <StyledSnackbarContent\n ref={ref}\n id={id}\n classes={{\n root: clsx(snackbarContentClasses.root, classes?.root),\n message: clsx(snackbarContentClasses.message, classes?.message),\n }}\n className={clsx(\n className,\n classes?.[variant],\n snackbarContentClasses[variant]\n )}\n message={\n <StyledMessageSpan\n id={setId(id, \"message\")}\n className={clsx(\n snackbarContentClasses.messageSpan,\n classes?.messageSpan\n )}\n >\n {icon && (\n <div\n className={clsx(\n snackbarContentClasses.iconVariant,\n classes?.iconVariant\n )}\n >\n {icon}\n </div>\n )}\n <StyledMessageText\n className={clsx(\n snackbarContentClasses.messageText,\n classes?.messageText\n )}\n >\n {label}\n </StyledMessageText>\n {action && (\n <StyledAction\n id={setId(id, \"action\")}\n className={clsx(snackbarContentClasses.action, classes?.action)}\n >\n <HvActionsGeneric\n id={id}\n category=\"secondaryGhost\"\n actions={innerAction}\n actionsCallback={actionCallback}\n />\n </StyledAction>\n )}\n </StyledMessageSpan>\n }\n $variant={variant}\n {...others}\n />\n );\n }\n);\n\nexport default HvSnackbarContent;\n"],"names":["HvSnackbarContent","forwardRef","className","id","classes","label","variant","showIcon","customIcon","action","actionCallback","others","ref","icon","iconVariant","innerAction","isValidElement","StyledSnackbarContent","root","clsx","snackbarContentClasses","message","StyledMessageSpan","setId","messageSpan","children","_jsx","StyledMessageText","messageText","StyledAction","HvActionsGeneric","category","actions","actionsCallback","$variant"],"mappings":";;;;;;;;;;AAwCA,MAAMA,oBAAoBC,iBACxB,CACE;AAAA,EACEC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACL,GACAC,QACG;AACH,QAAMC,OAAOL,cAAeD,YAAYO,YAAAA,QAAYR,SAAS,WAAW;AACxE,QAAMS,cAAmBC,MAAAA,eAAeP,MAAM,IAAIA,SAAS,CAACA,MAAM;AAElE,wCACGQ,8BAAAA,uBAAqB;AAAA,IACpBL;AAAAA,IACAT;AAAAA,IACAC,SAAS;AAAA,MACPc,MAAMC,KAAAA,KAAKC,8BAAAA,QAAuBF,MAAMd,mCAASc,IAAI;AAAA,MACrDG,SAASF,KAAAA,KAAKC,8BAAAA,QAAuBC,SAASjB,mCAASiB,OAAO;AAAA,IAChE;AAAA,IACAnB,WAAWiB,UACTjB,WACAE,mCAAUE,UACVc,8BAAAA,QAAuBd,OAAO,CAAC;AAAA,IAEjCe,yCACGC,iDAAiB;AAAA,MAChBnB,IAAIoB,MAAAA,MAAMpB,IAAI,SAAS;AAAA,MACvBD,WAAWiB,KAAAA,KACTC,8BAAAA,QAAuBI,aACvBpB,mCAASoB,WAAW;AAAA,MACpBC,UAAA,CAEDZ,QACCa,2BAAAA,IAAA,OAAA;AAAA,QACExB,WAAWiB,KAAAA,KACTC,8BAAAA,QAAuBN,aACvBV,mCAASU,WAAW;AAAA,QACpBW,UAEDZ;AAAAA,MAAAA,CAEJ,GACDa,2BAAAA,IAACC,iDAAiB;AAAA,QAChBzB,WAAWiB,KAAAA,KACTC,8BAAAA,QAAuBQ,aACvBxB,mCAASwB,WAAW;AAAA,QACpBH,UAEDpB;AAAAA,MAAAA,CAAK,GAEPI,UACCiB,2BAAAA,IAACG,4CAAY;AAAA,QACX1B,IAAIoB,MAAAA,MAAMpB,IAAI,QAAQ;AAAA,QACtBD,WAAWiB,KAAAA,KAAKC,8BAAAA,QAAuBX,QAAQL,mCAASK,MAAM;AAAA,QAAEgB,yCAE/DK,iCAAgB;AAAA,UACf3B;AAAAA,UACA4B,UAAS;AAAA,UACTC,SAASjB;AAAAA,UACTkB,iBAAiBvB;AAAAA,QAAAA,CAAe;AAAA,MAAA,CAGrC,CAAA;AAAA,IAAA,CAEJ;AAAA,IACDwB,UAAU5B;AAAAA,IAAQ,GACdK;AAAAA,EAAAA,CACJ;AAEN,CAAC;AAGH,MAAA,sBAAeX;;"}
|
|
@@ -7,6 +7,7 @@ const navigationSliderClasses = require("./navigationSliderClasses.cjs");
|
|
|
7
7
|
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
8
8
|
const ListContainer = require("../../ListContainer/ListContainer.cjs");
|
|
9
9
|
const Button = require("../../Button/Button.cjs");
|
|
10
|
+
const OverflowTooltip = require("../../OverflowTooltip/OverflowTooltip.cjs");
|
|
10
11
|
const HvVerticalNavigationSlider = ({
|
|
11
12
|
id,
|
|
12
13
|
classes,
|
|
@@ -28,7 +29,9 @@ const HvVerticalNavigationSlider = ({
|
|
|
28
29
|
onNavigateToTarget(event, item);
|
|
29
30
|
},
|
|
30
31
|
selected: selected === item.id,
|
|
31
|
-
startAdornment:
|
|
32
|
+
startAdornment: /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
33
|
+
children: item.icon
|
|
34
|
+
}),
|
|
32
35
|
endAdornment: item.data && item.data.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
|
|
33
36
|
variant: "secondaryGhost",
|
|
34
37
|
icon: true,
|
|
@@ -37,9 +40,9 @@ const HvVerticalNavigationSlider = ({
|
|
|
37
40
|
onNavigateToChild(event, item);
|
|
38
41
|
},
|
|
39
42
|
children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropRightXS, {})
|
|
40
|
-
}) :
|
|
41
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
42
|
-
|
|
43
|
+
}) : void 0,
|
|
44
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, {
|
|
45
|
+
data: item.label
|
|
43
46
|
})
|
|
44
47
|
}, item.id))
|
|
45
48
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationSlider.cjs","sources":["../../../../../src/components/VerticalNavigation/NavigationSlider/NavigationSlider.tsx"],"sourcesContent":["import { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\nimport { clsx } from \"clsx\";\nimport {
|
|
1
|
+
{"version":3,"file":"NavigationSlider.cjs","sources":["../../../../../src/components/VerticalNavigation/NavigationSlider/NavigationSlider.tsx"],"sourcesContent":["import { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\nimport { clsx } from \"clsx\";\nimport {\n HvButton,\n HvListContainer,\n HvOverflowTooltip,\n NavigationData,\n} from \"@core/components\";\nimport { StyledListItem } from \"./NavigationSlider.styles\";\nimport verticalNavigationSliderClasses, {\n HvVerticalNavigationSliderClasses,\n} from \"./navigationSliderClasses\";\n\nexport interface HvVerticalNavigationSliderProps {\n /**\n * Id to be applied to the root node of the panel.\n */\n id?: string;\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes?: HvVerticalNavigationSliderClasses;\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 * icon - the icon react element\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 /**\n * The selected item id.\n */\n selected?: string;\n /**\n * Triggered when the item is clicked.\n */\n onNavigateToTarget?: (\n event: React.MouseEvent<HTMLLIElement>,\n item: NavigationData\n ) => void;\n /**\n * Triggered when the navigate to child button is clicked.\n */\n onNavigateToChild?: (\n event: React.MouseEvent<HTMLButtonElement>,\n item: NavigationData\n ) => void;\n}\n\nexport const HvVerticalNavigationSlider = ({\n id,\n classes,\n data,\n selected,\n onNavigateToTarget,\n onNavigateToChild,\n}: HvVerticalNavigationSliderProps) => {\n return (\n <HvListContainer interactive id={id}>\n {data &&\n data.map((item) => (\n <StyledListItem\n key={item.id}\n classes={{\n root: classes?.root,\n selected: clsx(\n classes?.listItemSelected,\n verticalNavigationSliderClasses.listItemSelected\n ),\n }}\n onClick={(event) => {\n if (onNavigateToTarget) onNavigateToTarget(event, item);\n }}\n selected={selected === item.id}\n startAdornment={<div>{item.icon}</div>}\n endAdornment={\n item.data && item.data.length > 0 ? (\n <HvButton\n variant=\"secondaryGhost\"\n icon\n onClick={(event) => {\n if (onNavigateToChild) onNavigateToChild(event, item);\n }}\n >\n <DropRightXS />\n </HvButton>\n ) : undefined\n }\n >\n <HvOverflowTooltip data={item.label} />\n </StyledListItem>\n ))}\n </HvListContainer>\n );\n};\n"],"names":["HvVerticalNavigationSlider","id","classes","data","selected","onNavigateToTarget","onNavigateToChild","HvListContainer","interactive","children","map","item","StyledListItem","root","clsx","listItemSelected","verticalNavigationSliderClasses","onClick","event","startAdornment","icon","endAdornment","length","HvButton","variant","_jsx","DropRightXS","undefined","HvOverflowTooltip","label"],"mappings":";;;;;;;;;;AAqDO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAC+B,MAAM;AACrC,wCACGC,cAAAA,iBAAe;AAAA,IAACC,aAAW;AAAA,IAACP;AAAAA,IAAOQ,UACjCN,QACCA,KAAKO,IAAKC,CAAAA,wCACPC,wCAAc;AAAA,MAEbV,SAAS;AAAA,QACPW,MAAMX,mCAASW;AAAAA,QACfT,UAAUU,KAAAA,KACRZ,mCAASa,kBACTC,wBAAAA,QAAgCD,gBAAgB;AAAA,MAEpD;AAAA,MACAE,SAAUC,CAAU,UAAA;AACdb,YAAAA;AAAoBA,6BAAmBa,OAAOP,IAAI;AAAA,MACxD;AAAA,MACAP,UAAUA,aAAaO,KAAKV;AAAAA,MAC5BkB,+CAAgB,OAAA;AAAA,QAAAV,UAAME,KAAKS;AAAAA,MAAAA,CAAY;AAAA,MACvCC,cACEV,KAAKR,QAAQQ,KAAKR,KAAKmB,SAAS,mCAC7BC,iBAAQ;AAAA,QACPC,SAAQ;AAAA,QACRJ,MAAI;AAAA,QACJH,SAAUC,CAAU,UAAA;AACdZ,cAAAA;AAAmBA,8BAAkBY,OAAOP,IAAI;AAAA,QACtD;AAAA,QAAEF,UAEFgB,2BAAAA,IAACC,gBAAW,aAAA,EAAA;AAAA,MAAG,CAAA,IAEfC;AAAAA,MACLlB,yCAEAmB,mCAAiB;AAAA,QAACzB,MAAMQ,KAAKkB;AAAAA,MAAAA,CAAM;AAAA,IAAA,GA3B/BlB,KAAKV,EAAE,CA6Bf;AAAA,EAAA,CACa;AAEtB;;"}
|
|
@@ -77,7 +77,12 @@ const HvVerticalNavigationTreeView = React.forwardRef((props, ref) => {
|
|
|
77
77
|
return false;
|
|
78
78
|
}, []);
|
|
79
79
|
const isFocused = React.useCallback((id) => focusedNodeId === id, [focusedNodeId]);
|
|
80
|
-
const isChildSelected = React.useCallback(
|
|
80
|
+
const isChildSelected = React.useCallback(
|
|
81
|
+
// the second part of the condition is to ensure that the id we're
|
|
82
|
+
// looking at is actually of a child (ie, there's at least one "-")
|
|
83
|
+
(id) => selected.startsWith(id) && selected.includes("-"),
|
|
84
|
+
[selected]
|
|
85
|
+
);
|
|
81
86
|
const getChildrenIds = (id) => Object.keys(nodeMap.current).map((key) => {
|
|
82
87
|
return nodeMap.current[key];
|
|
83
88
|
}).filter((node) => node.parentId === id).sort((a, b) => a.index - b.index).map((child) => child.id);
|