@hitachivantara/uikit-react-core 5.18.4 → 5.18.5
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/BreadCrumb/BreadCrumb.cjs +1 -3
- package/dist/cjs/components/BreadCrumb/BreadCrumb.cjs.map +1 -1
- package/dist/cjs/components/BreadCrumb/Page/Page.cjs +1 -4
- package/dist/cjs/components/BreadCrumb/Page/Page.cjs.map +1 -1
- package/dist/cjs/components/Drawer/Drawer.cjs +81 -0
- package/dist/cjs/components/Drawer/Drawer.cjs.map +1 -0
- package/dist/cjs/components/Drawer/Drawer.styles.cjs +27 -0
- package/dist/cjs/components/Drawer/Drawer.styles.cjs.map +1 -0
- package/dist/cjs/components/Table/TableRow/TableRow.cjs +1 -1
- package/dist/cjs/index.cjs +4 -0
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/esm/components/BreadCrumb/BreadCrumb.js +1 -2
- package/dist/esm/components/BreadCrumb/BreadCrumb.js.map +1 -1
- package/dist/esm/components/BreadCrumb/Page/Page.js +1 -2
- package/dist/esm/components/BreadCrumb/Page/Page.js.map +1 -1
- package/dist/esm/components/Drawer/Drawer.js +82 -0
- package/dist/esm/components/Drawer/Drawer.js.map +1 -0
- package/dist/esm/components/Drawer/Drawer.styles.js +27 -0
- package/dist/esm/components/Drawer/Drawer.styles.js.map +1 -0
- package/dist/esm/components/Table/TableRow/TableRow.js +1 -1
- package/dist/esm/index.js +50 -46
- package/dist/esm/index.js.map +1 -1
- package/dist/types/index.d.ts +159 -91
- package/package.json +5 -5
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const clsx = require("clsx");
|
|
4
4
|
const isNil = require("lodash/isNil");
|
|
5
|
-
const startCase = require("lodash/startCase");
|
|
6
5
|
const React = require("react");
|
|
7
6
|
const breadCrumbClasses = require("./breadCrumbClasses.cjs");
|
|
8
7
|
const BreadCrumb_styles = require("./BreadCrumb.styles.cjs");
|
|
@@ -12,7 +11,6 @@ const PathElement = require("./PathElement/PathElement.cjs");
|
|
|
12
11
|
const Page = require("./Page/Page.cjs");
|
|
13
12
|
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
|
14
13
|
const isNil__default = /* @__PURE__ */ _interopDefault(isNil);
|
|
15
|
-
const startCase__default = /* @__PURE__ */ _interopDefault(startCase);
|
|
16
14
|
const HvBreadCrumb = ({
|
|
17
15
|
classes,
|
|
18
16
|
className,
|
|
@@ -56,7 +54,7 @@ const HvBreadCrumb = ({
|
|
|
56
54
|
children: React.isValidElement(elem) && elem || isLast && /* @__PURE__ */ jsxRuntime.jsx(BreadCrumb_styles.StyledTypography, {
|
|
57
55
|
className: clsx.clsx(breadCrumbClasses.default.currentPage, classes == null ? void 0 : classes.currentPage),
|
|
58
56
|
variant: "body",
|
|
59
|
-
children:
|
|
57
|
+
children: utils.removeExtension(elem.label)
|
|
60
58
|
}) || /* @__PURE__ */ jsxRuntime.jsx(Page.HvPage, {
|
|
61
59
|
elem,
|
|
62
60
|
classes: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BreadCrumb.cjs","sources":["../../../../src/components/BreadCrumb/BreadCrumb.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport isNil from \"lodash/isNil\";\nimport
|
|
1
|
+
{"version":3,"file":"BreadCrumb.cjs","sources":["../../../../src/components/BreadCrumb/BreadCrumb.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport isNil from \"lodash/isNil\";\nimport { isValidElement, MouseEvent } from \"react\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvDropDownMenuProps } from \"@core/components\";\nimport breadCrumbClasses, { HvBreadCrumbClasses } from \"./breadCrumbClasses\";\nimport { HvPathElement } from \"./PathElement\";\nimport { HvPage } from \"./Page\";\nimport {\n StyledOrderedList,\n StyledRoot,\n StyledTypography,\n} from \"./BreadCrumb.styles\";\nimport { pathWithSubMenu, removeExtension } from \"./utils\";\n\nexport interface HvBreadCrumbPathElement extends Record<string, any> {\n label: string;\n path: string;\n}\n\nexport interface HvBreadCrumbProps\n extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n /** List of breadcrumb. */\n listRoute?: HvBreadCrumbPathElement[];\n /** URL to build the breadcrumb. */\n url?: string;\n /** Number of pages visible. */\n maxVisible?: number;\n /** The component used for the link node. Either a string to use a DOM element or a component. */\n component?: React.ElementType;\n /** Function passed to the component. If defined the component prop is used as the link node. */\n onClick?: (event: MouseEvent<HTMLElement>, data: any) => void;\n /** Props passed down to the DropDownMenu sub-menu component. */\n dropDownMenuProps?: Partial<HvDropDownMenuProps>;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvBreadCrumbClasses;\n}\n\n/**\n * A breadcrumb is a graphical control element frequently used as a navigational aid.\n */\nexport const HvBreadCrumb = ({\n classes,\n className,\n id,\n listRoute = [],\n maxVisible,\n url,\n onClick,\n component,\n dropDownMenuProps,\n ...others\n}: HvBreadCrumbProps) => {\n const maxVisibleElem = maxVisible && maxVisible < 2 ? 2 : maxVisible;\n let listPath = listRoute.slice();\n\n // build the listPath object list\n if (!isNil(url)) {\n listPath = [];\n\n // get the domain\n const baseUrl = url.match(/^.*\\/\\/[^/]+/);\n\n // get url without domain\n const urlWithoutDomain = url.replace(/^.*\\/\\/[^/]+/, \"\");\n\n const pathNames = urlWithoutDomain.split(\"/\").filter((x) => x);\n\n pathNames.map((elem, index) =>\n listPath.push({\n label: decodeURI(elem),\n path: `${baseUrl}/${pathNames.slice(0, index + 1).join(\"/\")}`,\n })\n );\n }\n\n const breadcrumbPath =\n maxVisibleElem && listPath.length > maxVisibleElem\n ? pathWithSubMenu(\n id,\n onClick,\n listPath,\n maxVisibleElem,\n dropDownMenuProps\n )\n : listPath;\n\n return (\n <StyledRoot\n id={id}\n className={clsx(breadCrumbClasses.root, classes?.root, className)}\n {...others}\n >\n <StyledOrderedList\n className={clsx(breadCrumbClasses.orderedList, classes?.orderedList)}\n >\n {listPath.map((elem, index) => {\n const key = `key_${index}`;\n const isLast = index === breadcrumbPath.length - 1;\n\n return (\n <HvPathElement\n classes={{\n centerContainer: clsx(\n breadCrumbClasses.centerContainer,\n classes?.centerContainer\n ),\n separatorContainer: clsx(\n breadCrumbClasses.separatorContainer,\n classes?.separatorContainer\n ),\n }}\n key={key}\n last={isLast}\n >\n {(isValidElement(elem) && elem) ||\n (isLast && (\n <StyledTypography\n className={clsx(\n breadCrumbClasses.currentPage,\n classes?.currentPage\n )}\n variant=\"body\"\n >\n {removeExtension(elem.label)}\n </StyledTypography>\n )) || (\n <HvPage\n elem={elem}\n classes={{\n a: clsx(breadCrumbClasses.a, classes?.a),\n link: clsx(breadCrumbClasses.link, classes?.link),\n }}\n component={component}\n onClick={onClick}\n />\n )}\n </HvPathElement>\n );\n })}\n </StyledOrderedList>\n </StyledRoot>\n );\n};\n"],"names":["HvBreadCrumb","classes","className","id","listRoute","maxVisible","url","onClick","component","dropDownMenuProps","others","maxVisibleElem","listPath","slice","isNil","baseUrl","match","urlWithoutDomain","replace","pathNames","split","filter","x","map","elem","index","push","label","decodeURI","path","join","breadcrumbPath","length","pathWithSubMenu","StyledRoot","clsx","breadCrumbClasses","root","children","StyledOrderedList","orderedList","key","isLast","HvPathElement","centerContainer","separatorContainer","last","isValidElement","StyledTypography","currentPage","variant","removeExtension","_jsx","HvPage","a","link"],"mappings":";;;;;;;;;;;;;AAyCO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,YAAY,CAAE;AAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACc,MAAM;AACvB,QAAMC,iBAAiBN,cAAcA,aAAa,IAAI,IAAIA;AACtDO,MAAAA,WAAWR,UAAUS;AAGrB,MAAA,CAACC,eAAAA,QAAMR,GAAG,GAAG;AACfM,eAAW,CAAA;AAGLG,UAAAA,UAAUT,IAAIU,MAAM,cAAc;AAGxC,UAAMC,mBAAmBX,IAAIY,QAAQ,gBAAgB,EAAE;AAEvD,UAAMC,YAAYF,iBAAiBG,MAAM,GAAG,EAAEC,OAAQC,OAAMA,CAAC;AAE7DH,cAAUI,IAAI,CAACC,MAAMC,UACnBb,SAASc,KAAK;AAAA,MACZC,OAAOC,UAAUJ,IAAI;AAAA,MACrBK,MAAO,GAAEd,WAAWI,UAAUN,MAAM,GAAGY,QAAQ,CAAC,EAAEK,KAAK,GAAG;AAAA,IAC3D,CAAA,CACH;AAAA,EACF;AAEMC,QAAAA,iBACJpB,kBAAkBC,SAASoB,SAASrB,iBAChCsB,MAAAA,gBACE9B,IACAI,SACAK,UACAD,gBACAF,iBACF,IACAG;AAEN,wCACGsB,kBAAAA,YAAU;AAAA,IACT/B;AAAAA,IACAD,WAAWiC,KAAKC,KAAAA,kBAAAA,QAAkBC,MAAMpC,mCAASoC,MAAMnC,SAAS;AAAA,IAAE,GAC9DQ;AAAAA,IAAM4B,yCAETC,qCAAiB;AAAA,MAChBrC,WAAWiC,KAAAA,KAAKC,kBAAAA,QAAkBI,aAAavC,mCAASuC,WAAW;AAAA,MAAEF,UAEpE1B,SAASW,IAAI,CAACC,MAAMC,UAAU;AAC7B,cAAMgB,MAAO,OAAMhB;AACbiB,cAAAA,SAASjB,UAAUM,eAAeC,SAAS;AAEjD,8CACGW,YAAAA,eAAa;AAAA,UACZ1C,SAAS;AAAA,YACP2C,iBAAiBT,KAAAA,KACfC,kBAAAA,QAAkBQ,iBAClB3C,mCAAS2C,eACX;AAAA,YACAC,oBAAoBV,KAAAA,KAClBC,kBAAAA,QAAkBS,oBAClB5C,mCAAS4C,kBACX;AAAA,UACF;AAAA,UAEAC,MAAMJ;AAAAA,UAAOJ,UAEXS,MAAevB,eAAAA,IAAI,KAAKA,QACvBkB,yCACEM,oCAAgB;AAAA,YACf9C,WAAWiC,KAAAA,KACTC,kBAAAA,QAAkBa,aAClBhD,mCAASgD,WACX;AAAA,YACAC,SAAQ;AAAA,YAAMZ,UAEba,MAAAA,gBAAgB3B,KAAKG,KAAK;AAAA,UAAA,CACX,KAElByB,2BAAAA,IAACC,aAAM;AAAA,YACL7B;AAAAA,YACAvB,SAAS;AAAA,cACPqD,GAAGnB,KAAAA,KAAKC,kBAAAA,QAAkBkB,GAAGrD,mCAASqD,CAAC;AAAA,cACvCC,MAAMpB,KAAAA,KAAKC,kBAAAA,QAAkBmB,MAAMtD,mCAASsD,IAAI;AAAA,YAClD;AAAA,YACA/C;AAAAA,YACAD;AAAAA,UAAAA,CACD;AAAA,WAvBAkC,GAyBQ;AAAA,MAAA,CAElB;AAAA,IAAA,CACgB;AAAA,EAAA,CACT;AAEhB;;"}
|
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const startCase = require("lodash/startCase");
|
|
4
3
|
const Page_styles = require("./Page.styles.cjs");
|
|
5
4
|
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
6
5
|
const OverflowTooltip = require("../../OverflowTooltip/OverflowTooltip.cjs");
|
|
7
6
|
const Typography = require("../../Typography/Typography.cjs");
|
|
8
|
-
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
|
9
|
-
const startCase__default = /* @__PURE__ */ _interopDefault(startCase);
|
|
10
7
|
const HvPage = ({
|
|
11
8
|
component,
|
|
12
9
|
onClick,
|
|
@@ -35,7 +32,7 @@ const HvPage = ({
|
|
|
35
32
|
className: cx(classes.link, classes.label, classes.a),
|
|
36
33
|
...others,
|
|
37
34
|
children: /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, {
|
|
38
|
-
data:
|
|
35
|
+
data: elem.label
|
|
39
36
|
})
|
|
40
37
|
});
|
|
41
38
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Page.cjs","sources":["../../../../../src/components/BreadCrumb/Page/Page.tsx"],"sourcesContent":["import {\n HvBreadCrumbPathElement,\n HvOverflowTooltip,\n HvTypography,\n} from \"@core/components\";\nimport { ExtractNames } from \"@core/utils\";\nimport
|
|
1
|
+
{"version":3,"file":"Page.cjs","sources":["../../../../../src/components/BreadCrumb/Page/Page.tsx"],"sourcesContent":["import {\n HvBreadCrumbPathElement,\n HvOverflowTooltip,\n HvTypography,\n} from \"@core/components\";\nimport { ExtractNames } from \"@core/utils\";\nimport { MouseEvent } from \"react\";\nimport { staticClasses, useClasses } from \"./Page.styles\";\n\nexport { staticClasses as pageClasses };\n\nexport type HvPageClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvPageProps {\n component?: React.ElementType;\n onClick?: (event: MouseEvent<HTMLElement>, data: any) => void;\n elem: HvBreadCrumbPathElement;\n classes?: HvPageClasses;\n}\n\nexport const HvPage = ({\n component,\n onClick,\n elem,\n classes: classesProp,\n}: HvPageProps) => {\n const { classes, cx } = useClasses(classesProp);\n const { label, path, ...others } = elem;\n const handleClick = (event: MouseEvent<HTMLElement>) => {\n event.preventDefault();\n onClick?.(event, elem);\n };\n\n return (\n <HvTypography\n noWrap\n variant=\"label\"\n component={component || \"a\"}\n href={elem.path}\n onClick={onClick && handleClick}\n className={cx(classes.link, classes.label, classes.a)}\n {...others}\n >\n <HvOverflowTooltip data={elem.label} />\n </HvTypography>\n );\n};\n"],"names":["HvPage","component","onClick","elem","classes","classesProp","cx","useClasses","label","path","others","handleClick","event","preventDefault","HvTypography","noWrap","variant","href","className","link","a","children","HvOverflowTooltip","data"],"mappings":";;;;;;AAoBO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AACE,MAAM;AACX,QAAA;AAAA,IAAED;AAAAA,IAASE;AAAAA,EAAAA,IAAOC,YAAAA,WAAWF,WAAW;AACxC,QAAA;AAAA,IAAEG;AAAAA,IAAOC;AAAAA,IAAM,GAAGC;AAAAA,EAAWP,IAAAA;AAC7BQ,QAAAA,cAAcA,CAACC,UAAmC;AACtDA,UAAMC,eAAe;AACrBX,uCAAUU,OAAOT;AAAAA,EAAI;AAGvB,wCACGW,WAAAA,cAAY;AAAA,IACXC,QAAM;AAAA,IACNC,SAAQ;AAAA,IACRf,WAAWA,aAAa;AAAA,IACxBgB,MAAMd,KAAKM;AAAAA,IACXP,SAASA,WAAWS;AAAAA,IACpBO,WAAWZ,GAAGF,QAAQe,MAAMf,QAAQI,OAAOJ,QAAQgB,CAAC;AAAA,IAAE,GAClDV;AAAAA,IAAMW,yCAETC,mCAAiB;AAAA,MAACC,MAAMpB,KAAKK;AAAAA,IAAAA,CAAQ;AAAA,EAAA,CAC1B;AAElB;;;"}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const material = require("@mui/material");
|
|
4
|
+
const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
|
|
5
|
+
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
6
|
+
const React = require("react");
|
|
7
|
+
const Drawer_styles = require("./Drawer.styles.cjs");
|
|
8
|
+
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
9
|
+
const theme = require("../../utils/theme.cjs");
|
|
10
|
+
const withTooltip = require("../../hocs/withTooltip.cjs");
|
|
11
|
+
const checkValidHexColorValue = require("../../utils/checkValidHexColorValue.cjs");
|
|
12
|
+
const hexToRgbA = require("../../utils/hexToRgbA.cjs");
|
|
13
|
+
const useTheme = require("../../hooks/useTheme.cjs");
|
|
14
|
+
const Button = require("../Button/Button.cjs");
|
|
15
|
+
const setId = require("../../utils/setId.cjs");
|
|
16
|
+
const getBackgroundColor = (color) => {
|
|
17
|
+
return checkValidHexColorValue.default(color) ? hexToRgbA.default(color, 0.8) : color;
|
|
18
|
+
};
|
|
19
|
+
const HvDrawer = ({
|
|
20
|
+
className,
|
|
21
|
+
classes: classesProp,
|
|
22
|
+
id,
|
|
23
|
+
children,
|
|
24
|
+
open,
|
|
25
|
+
onClose,
|
|
26
|
+
anchor = "right",
|
|
27
|
+
buttonTitle = "Close",
|
|
28
|
+
...others
|
|
29
|
+
}) => {
|
|
30
|
+
var _a;
|
|
31
|
+
const {
|
|
32
|
+
classes,
|
|
33
|
+
css,
|
|
34
|
+
cx
|
|
35
|
+
} = Drawer_styles.useClasses(classesProp);
|
|
36
|
+
const {
|
|
37
|
+
activeTheme,
|
|
38
|
+
selectedMode
|
|
39
|
+
} = useTheme.useTheme();
|
|
40
|
+
const [backgroundColorValue, setBackgroundColorValue] = React.useState(theme.getVarValue(uikitStyles.theme.drawer.backDropBackgroundColor));
|
|
41
|
+
const closeButtonDisplay = () => /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, {
|
|
42
|
+
role: "presentation"
|
|
43
|
+
});
|
|
44
|
+
const CloseButtonTooltipWrapper = buttonTitle ? withTooltip.default(closeButtonDisplay, buttonTitle, "top") : closeButtonDisplay;
|
|
45
|
+
const [backgroundColor, setBackgroundColor] = React.useState(getBackgroundColor(backgroundColorValue));
|
|
46
|
+
React.useEffect(() => {
|
|
47
|
+
setBackgroundColorValue(theme.getVarValue(uikitStyles.theme.drawer.backDropBackgroundColor));
|
|
48
|
+
setBackgroundColor(getBackgroundColor(backgroundColorValue));
|
|
49
|
+
}, [(_a = activeTheme == null ? void 0 : activeTheme.colors) == null ? void 0 : _a.modes[selectedMode], backgroundColorValue, setBackgroundColor]);
|
|
50
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(material.Drawer, {
|
|
51
|
+
className: cx(classes.root, className),
|
|
52
|
+
id,
|
|
53
|
+
anchor,
|
|
54
|
+
open,
|
|
55
|
+
PaperProps: {
|
|
56
|
+
classes: {
|
|
57
|
+
root: classes.paper
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
BackdropProps: {
|
|
61
|
+
classes: {
|
|
62
|
+
root: cx(css({
|
|
63
|
+
backgroundColor
|
|
64
|
+
}), classes.background)
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
onClose,
|
|
68
|
+
...others,
|
|
69
|
+
children: [/* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
|
|
70
|
+
id: setId.setId(id, "close"),
|
|
71
|
+
className: classes.closeButton,
|
|
72
|
+
variant: "primaryGhost",
|
|
73
|
+
onClick: onClose,
|
|
74
|
+
"aria-label": buttonTitle,
|
|
75
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(CloseButtonTooltipWrapper, {})
|
|
76
|
+
}), children]
|
|
77
|
+
});
|
|
78
|
+
};
|
|
79
|
+
exports.drawerClasses = Drawer_styles.staticClasses;
|
|
80
|
+
exports.HvDrawer = HvDrawer;
|
|
81
|
+
//# sourceMappingURL=Drawer.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Drawer.cjs","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import {\n Drawer as MuiDrawer,\n DrawerProps as MuiDrawerProps,\n} from \"@mui/material\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { withTooltip } from \"@core/hocs\";\nimport {\n getVarValue,\n hexToRgbA,\n setId,\n checkValidHexColorValue,\n ExtractNames,\n} from \"@core/utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvButton } from \"@core/components\";\nimport { useEffect, useState } from \"react\";\nimport { useTheme } from \"@core/hooks\";\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps\n extends MuiDrawerProps,\n Omit<MuiDrawerProps, \"classes\">,\n HvBaseProps<HTMLDivElement> {\n /**\n * Class names to be applied.\n */\n className?: string;\n /**\n * Id to be applied to the root node.\n */\n id?: string;\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes?: HvDrawerClasses;\n /**\n * Components of the Drawer.\n */\n children?: React.ReactNode;\n /**\n * Current state of the Drawer.\n */\n open?: boolean;\n /**\n * Function executed on close.\n * Extended from Modal from material-ui\n *\n */\n onClose?: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => void;\n /**\n * The side the drawer opens from.\n */\n anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n /**\n * Title for the button close.\n */\n buttonTitle?: string;\n}\n\nconst getBackgroundColor = (color: string) => {\n return checkValidHexColorValue(color) ? hexToRgbA(color, 0.8) : color;\n};\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = ({\n className,\n classes: classesProp,\n id,\n children,\n open,\n onClose,\n anchor = \"right\",\n buttonTitle = \"Close\",\n ...others\n}: HvDrawerProps) => {\n const { classes, css, cx } = useClasses(classesProp);\n const { activeTheme, selectedMode } = useTheme();\n\n const [backgroundColorValue, setBackgroundColorValue] = useState<string>(\n getVarValue(theme.drawer.backDropBackgroundColor)\n );\n\n const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n const CloseButtonTooltipWrapper = buttonTitle\n ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n : closeButtonDisplay;\n\n const [backgroundColor, setBackgroundColor] = useState(\n getBackgroundColor(backgroundColorValue)\n );\n\n useEffect(() => {\n setBackgroundColorValue(getVarValue(theme.drawer.backDropBackgroundColor));\n\n setBackgroundColor(getBackgroundColor(backgroundColorValue));\n }, [\n activeTheme?.colors?.modes[selectedMode],\n backgroundColorValue,\n setBackgroundColor,\n ]);\n\n return (\n <MuiDrawer\n className={cx(classes.root, className)}\n id={id}\n anchor={anchor}\n open={open}\n PaperProps={{\n classes: {\n root: classes.paper,\n },\n }}\n BackdropProps={{\n classes: {\n root: cx(css({ backgroundColor }), classes.background),\n },\n }}\n onClose={onClose}\n {...others}\n >\n <HvButton\n id={setId(id, \"close\")}\n className={classes.closeButton}\n variant=\"primaryGhost\"\n onClick={onClose}\n aria-label={buttonTitle}\n >\n <CloseButtonTooltipWrapper />\n </HvButton>\n {children}\n </MuiDrawer>\n );\n};\n"],"names":["getBackgroundColor","color","checkValidHexColorValue","hexToRgbA","HvDrawer","className","classes","classesProp","id","children","open","onClose","anchor","buttonTitle","others","css","cx","useClasses","activeTheme","selectedMode","useTheme","backgroundColorValue","setBackgroundColorValue","useState","getVarValue","theme","drawer","backDropBackgroundColor","closeButtonDisplay","_jsx","Close","role","CloseButtonTooltipWrapper","withTooltip","backgroundColor","setBackgroundColor","useEffect","colors","modes","MuiDrawer","root","PaperProps","paper","BackdropProps","background","HvButton","setId","closeButton","variant","onClick"],"mappings":";;;;;;;;;;;;;;;AAmEA,MAAMA,qBAAqBA,CAACC,UAAkB;AAC5C,SAAOC,wBAAAA,QAAwBD,KAAK,IAAIE,UAAAA,QAAUF,OAAO,GAAG,IAAIA;AAClE;AAOO,MAAMG,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAAS;AAAA,EACTC,cAAc;AAAA,EACd,GAAGC;AACU,MAAM;;AACb,QAAA;AAAA,IAAER;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,cAAAA,WAAWV,WAAW;AAC7C,QAAA;AAAA,IAAEW;AAAAA,IAAaC;AAAAA,MAAiBC,SAAS,SAAA;AAEzC,QAAA,CAACC,sBAAsBC,uBAAuB,IAAIC,eACtDC,MAAYC,YAAAA,kBAAMC,OAAOC,uBAAuB,CAClD;AAEMC,QAAAA,qBAAqBA,MAAMC,2BAAAA,IAACC,uBAAK;AAAA,IAACC,MAAK;AAAA,EAAA,CAAgB;AAE7D,QAAMC,4BAA4BnB,cAC9BoB,YAAAA,QAAYL,oBAAoBf,aAAa,KAAK,IAClDe;AAEJ,QAAM,CAACM,iBAAiBC,kBAAkB,IAAIZ,MAC5CvB,SAAAA,mBAAmBqB,oBAAoB,CACzC;AAEAe,QAAAA,UAAU,MAAM;AACdd,4BAAwBE,MAAAA,YAAYC,YAAAA,MAAMC,OAAOC,uBAAuB,CAAC;AAEtD3B,uBAAAA,mBAAmBqB,oBAAoB,CAAC;AAAA,EAAA,GAC1D,EACDH,gDAAamB,WAAbnB,mBAAqBoB,MAAMnB,eAC3BE,sBACAc,kBAAkB,CACnB;AAED,yCACGI,SAAAA,QAAS;AAAA,IACRlC,WAAWW,GAAGV,QAAQkC,MAAMnC,SAAS;AAAA,IACrCG;AAAAA,IACAI;AAAAA,IACAF;AAAAA,IACA+B,YAAY;AAAA,MACVnC,SAAS;AAAA,QACPkC,MAAMlC,QAAQoC;AAAAA,MAChB;AAAA,IACF;AAAA,IACAC,eAAe;AAAA,MACbrC,SAAS;AAAA,QACPkC,MAAMxB,GAAGD,IAAI;AAAA,UAAEmB;AAAAA,QAAAA,CAAiB,GAAG5B,QAAQsC,UAAU;AAAA,MACvD;AAAA,IACF;AAAA,IACAjC;AAAAA,IAAiB,GACbG;AAAAA,IAAML,UAAA,CAEVoB,2BAAAA,IAACgB,iBAAQ;AAAA,MACPrC,IAAIsC,MAAAA,MAAMtC,IAAI,OAAO;AAAA,MACrBH,WAAWC,QAAQyC;AAAAA,MACnBC,SAAQ;AAAA,MACRC,SAAStC;AAAAA,MACT,cAAYE;AAAAA,MAAYJ,UAExBoB,2BAAAA,IAACG,2BAA2B,EAAA;AAAA,IACpB,CAAA,GACTvB,QAAQ;AAAA,EAAA,CACA;AAEf;;;"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
4
|
+
const classes = require("../../utils/classes.cjs");
|
|
5
|
+
const {
|
|
6
|
+
staticClasses,
|
|
7
|
+
useClasses
|
|
8
|
+
} = classes.createClasses("HvDrawer", {
|
|
9
|
+
root: {},
|
|
10
|
+
paper: {
|
|
11
|
+
backgroundColor: uikitStyles.theme.colors.atmo1,
|
|
12
|
+
padding: 0,
|
|
13
|
+
overflow: "auto",
|
|
14
|
+
boxShadow: uikitStyles.theme.colors.shadow
|
|
15
|
+
},
|
|
16
|
+
background: {},
|
|
17
|
+
closeButton: {
|
|
18
|
+
padding: 0,
|
|
19
|
+
minWidth: "inherit",
|
|
20
|
+
position: "absolute",
|
|
21
|
+
top: uikitStyles.theme.spacing("sm"),
|
|
22
|
+
right: uikitStyles.theme.spacing("sm")
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
exports.staticClasses = staticClasses;
|
|
26
|
+
exports.useClasses = useClasses;
|
|
27
|
+
//# sourceMappingURL=Drawer.styles.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Drawer.styles.cjs","sources":["../../../../src/components/Drawer/Drawer.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDrawer\", {\n root: {},\n paper: {\n backgroundColor: theme.colors.atmo1,\n padding: 0,\n overflow: \"auto\",\n boxShadow: theme.colors.shadow,\n },\n background: {},\n closeButton: {\n padding: 0,\n minWidth: \"inherit\",\n position: \"absolute\",\n top: theme.spacing(\"sm\"),\n right: theme.spacing(\"sm\"),\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","paper","backgroundColor","theme","colors","atmo1","padding","overflow","boxShadow","shadow","background","closeButton","minWidth","position","top","spacing","right"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,YAAY;AAAA,EACrEC,MAAM,CAAC;AAAA,EACPC,OAAO;AAAA,IACLC,iBAAiBC,YAAAA,MAAMC,OAAOC;AAAAA,IAC9BC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,WAAWL,YAAAA,MAAMC,OAAOK;AAAAA,EAC1B;AAAA,EACAC,YAAY,CAAC;AAAA,EACbC,aAAa;AAAA,IACXL,SAAS;AAAA,IACTM,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,KAAKX,YAAAA,MAAMY,QAAQ,IAAI;AAAA,IACvBC,OAAOb,YAAAA,MAAMY,QAAQ,IAAI;AAAA,EAC3B;AACF,CAAC;;;"}
|
|
@@ -8,10 +8,10 @@ const TableContext = require("../TableContext.cjs");
|
|
|
8
8
|
const TableSectionContext = require("../TableSectionContext.cjs");
|
|
9
9
|
const TableRow_styles = require("./TableRow.styles.cjs");
|
|
10
10
|
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
11
|
-
const theme = require("../../../utils/theme.cjs");
|
|
12
11
|
const checkValidHexColorValue = require("../../../utils/checkValidHexColorValue.cjs");
|
|
13
12
|
const hexToRgbA = require("../../../utils/hexToRgbA.cjs");
|
|
14
13
|
const useTheme = require("../../../hooks/useTheme.cjs");
|
|
14
|
+
const theme = require("../../../utils/theme.cjs");
|
|
15
15
|
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
|
16
16
|
const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
|
|
17
17
|
function _extends() {
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -69,6 +69,8 @@ const actionsClasses = require("./components/Dialog/Actions/actionsClasses.cjs")
|
|
|
69
69
|
const Actions = require("./components/Dialog/Actions/Actions.cjs");
|
|
70
70
|
const Dialog_styles = require("./components/Dialog/Dialog.styles.cjs");
|
|
71
71
|
const Dialog = require("./components/Dialog/Dialog.cjs");
|
|
72
|
+
const Drawer_styles = require("./components/Drawer/Drawer.styles.cjs");
|
|
73
|
+
const Drawer = require("./components/Drawer/Drawer.cjs");
|
|
72
74
|
const emptyStateClasses = require("./components/EmptyState/emptyStateClasses.cjs");
|
|
73
75
|
const EmptyState = require("./components/EmptyState/EmptyState.cjs");
|
|
74
76
|
const footerClasses = require("./components/Footer/footerClasses.cjs");
|
|
@@ -381,6 +383,8 @@ exports.dialogActionClasses = actionsClasses.default;
|
|
|
381
383
|
exports.HvDialogActions = Actions.HvDialogActions;
|
|
382
384
|
exports.dialogClasses = Dialog_styles.staticClasses;
|
|
383
385
|
exports.HvDialog = Dialog.HvDialog;
|
|
386
|
+
exports.drawerClasses = Drawer_styles.staticClasses;
|
|
387
|
+
exports.HvDrawer = Drawer.HvDrawer;
|
|
384
388
|
exports.emptyStateClasses = emptyStateClasses.default;
|
|
385
389
|
exports.HvEmptyState = EmptyState.HvEmptyState;
|
|
386
390
|
exports.footerClasses = footerClasses.default;
|
package/dist/cjs/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { clsx } from "clsx";
|
|
2
2
|
import isNil from "lodash/isNil";
|
|
3
|
-
import startCase from "lodash/startCase";
|
|
4
3
|
import { isValidElement } from "react";
|
|
5
4
|
import breadCrumbClasses from "./breadCrumbClasses.js";
|
|
6
5
|
import { StyledRoot, StyledOrderedList, StyledTypography } from "./BreadCrumb.styles.js";
|
|
@@ -51,7 +50,7 @@ const HvBreadCrumb = ({
|
|
|
51
50
|
children: isValidElement(elem) && elem || isLast && /* @__PURE__ */ jsx(StyledTypography, {
|
|
52
51
|
className: clsx(breadCrumbClasses.currentPage, classes == null ? void 0 : classes.currentPage),
|
|
53
52
|
variant: "body",
|
|
54
|
-
children:
|
|
53
|
+
children: removeExtension(elem.label)
|
|
55
54
|
}) || /* @__PURE__ */ jsx(HvPage, {
|
|
56
55
|
elem,
|
|
57
56
|
classes: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BreadCrumb.js","sources":["../../../../src/components/BreadCrumb/BreadCrumb.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport isNil from \"lodash/isNil\";\nimport
|
|
1
|
+
{"version":3,"file":"BreadCrumb.js","sources":["../../../../src/components/BreadCrumb/BreadCrumb.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport isNil from \"lodash/isNil\";\nimport { isValidElement, MouseEvent } from \"react\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvDropDownMenuProps } from \"@core/components\";\nimport breadCrumbClasses, { HvBreadCrumbClasses } from \"./breadCrumbClasses\";\nimport { HvPathElement } from \"./PathElement\";\nimport { HvPage } from \"./Page\";\nimport {\n StyledOrderedList,\n StyledRoot,\n StyledTypography,\n} from \"./BreadCrumb.styles\";\nimport { pathWithSubMenu, removeExtension } from \"./utils\";\n\nexport interface HvBreadCrumbPathElement extends Record<string, any> {\n label: string;\n path: string;\n}\n\nexport interface HvBreadCrumbProps\n extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n /** List of breadcrumb. */\n listRoute?: HvBreadCrumbPathElement[];\n /** URL to build the breadcrumb. */\n url?: string;\n /** Number of pages visible. */\n maxVisible?: number;\n /** The component used for the link node. Either a string to use a DOM element or a component. */\n component?: React.ElementType;\n /** Function passed to the component. If defined the component prop is used as the link node. */\n onClick?: (event: MouseEvent<HTMLElement>, data: any) => void;\n /** Props passed down to the DropDownMenu sub-menu component. */\n dropDownMenuProps?: Partial<HvDropDownMenuProps>;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvBreadCrumbClasses;\n}\n\n/**\n * A breadcrumb is a graphical control element frequently used as a navigational aid.\n */\nexport const HvBreadCrumb = ({\n classes,\n className,\n id,\n listRoute = [],\n maxVisible,\n url,\n onClick,\n component,\n dropDownMenuProps,\n ...others\n}: HvBreadCrumbProps) => {\n const maxVisibleElem = maxVisible && maxVisible < 2 ? 2 : maxVisible;\n let listPath = listRoute.slice();\n\n // build the listPath object list\n if (!isNil(url)) {\n listPath = [];\n\n // get the domain\n const baseUrl = url.match(/^.*\\/\\/[^/]+/);\n\n // get url without domain\n const urlWithoutDomain = url.replace(/^.*\\/\\/[^/]+/, \"\");\n\n const pathNames = urlWithoutDomain.split(\"/\").filter((x) => x);\n\n pathNames.map((elem, index) =>\n listPath.push({\n label: decodeURI(elem),\n path: `${baseUrl}/${pathNames.slice(0, index + 1).join(\"/\")}`,\n })\n );\n }\n\n const breadcrumbPath =\n maxVisibleElem && listPath.length > maxVisibleElem\n ? pathWithSubMenu(\n id,\n onClick,\n listPath,\n maxVisibleElem,\n dropDownMenuProps\n )\n : listPath;\n\n return (\n <StyledRoot\n id={id}\n className={clsx(breadCrumbClasses.root, classes?.root, className)}\n {...others}\n >\n <StyledOrderedList\n className={clsx(breadCrumbClasses.orderedList, classes?.orderedList)}\n >\n {listPath.map((elem, index) => {\n const key = `key_${index}`;\n const isLast = index === breadcrumbPath.length - 1;\n\n return (\n <HvPathElement\n classes={{\n centerContainer: clsx(\n breadCrumbClasses.centerContainer,\n classes?.centerContainer\n ),\n separatorContainer: clsx(\n breadCrumbClasses.separatorContainer,\n classes?.separatorContainer\n ),\n }}\n key={key}\n last={isLast}\n >\n {(isValidElement(elem) && elem) ||\n (isLast && (\n <StyledTypography\n className={clsx(\n breadCrumbClasses.currentPage,\n classes?.currentPage\n )}\n variant=\"body\"\n >\n {removeExtension(elem.label)}\n </StyledTypography>\n )) || (\n <HvPage\n elem={elem}\n classes={{\n a: clsx(breadCrumbClasses.a, classes?.a),\n link: clsx(breadCrumbClasses.link, classes?.link),\n }}\n component={component}\n onClick={onClick}\n />\n )}\n </HvPathElement>\n );\n })}\n </StyledOrderedList>\n </StyledRoot>\n );\n};\n"],"names":["HvBreadCrumb","classes","className","id","listRoute","maxVisible","url","onClick","component","dropDownMenuProps","others","maxVisibleElem","listPath","slice","isNil","baseUrl","match","urlWithoutDomain","replace","pathNames","split","filter","x","map","elem","index","push","label","decodeURI","path","join","breadcrumbPath","length","pathWithSubMenu","StyledRoot","clsx","breadCrumbClasses","root","children","StyledOrderedList","orderedList","key","isLast","HvPathElement","centerContainer","separatorContainer","last","isValidElement","StyledTypography","currentPage","variant","removeExtension","_jsx","HvPage","a","link"],"mappings":";;;;;;;;;AAyCO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,YAAY,CAAE;AAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACc,MAAM;AACvB,QAAMC,iBAAiBN,cAAcA,aAAa,IAAI,IAAIA;AACtDO,MAAAA,WAAWR,UAAUS;AAGrB,MAAA,CAACC,MAAMR,GAAG,GAAG;AACfM,eAAW,CAAA;AAGLG,UAAAA,UAAUT,IAAIU,MAAM,cAAc;AAGxC,UAAMC,mBAAmBX,IAAIY,QAAQ,gBAAgB,EAAE;AAEvD,UAAMC,YAAYF,iBAAiBG,MAAM,GAAG,EAAEC,OAAQC,OAAMA,CAAC;AAE7DH,cAAUI,IAAI,CAACC,MAAMC,UACnBb,SAASc,KAAK;AAAA,MACZC,OAAOC,UAAUJ,IAAI;AAAA,MACrBK,MAAO,GAAEd,WAAWI,UAAUN,MAAM,GAAGY,QAAQ,CAAC,EAAEK,KAAK,GAAG;AAAA,IAC3D,CAAA,CACH;AAAA,EACF;AAEMC,QAAAA,iBACJpB,kBAAkBC,SAASoB,SAASrB,iBAChCsB,gBACE9B,IACAI,SACAK,UACAD,gBACAF,iBACF,IACAG;AAEN,6BACGsB,YAAU;AAAA,IACT/B;AAAAA,IACAD,WAAWiC,KAAKC,kBAAkBC,MAAMpC,mCAASoC,MAAMnC,SAAS;AAAA,IAAE,GAC9DQ;AAAAA,IAAM4B,8BAETC,mBAAiB;AAAA,MAChBrC,WAAWiC,KAAKC,kBAAkBI,aAAavC,mCAASuC,WAAW;AAAA,MAAEF,UAEpE1B,SAASW,IAAI,CAACC,MAAMC,UAAU;AAC7B,cAAMgB,MAAO,OAAMhB;AACbiB,cAAAA,SAASjB,UAAUM,eAAeC,SAAS;AAEjD,mCACGW,eAAa;AAAA,UACZ1C,SAAS;AAAA,YACP2C,iBAAiBT,KACfC,kBAAkBQ,iBAClB3C,mCAAS2C,eACX;AAAA,YACAC,oBAAoBV,KAClBC,kBAAkBS,oBAClB5C,mCAAS4C,kBACX;AAAA,UACF;AAAA,UAEAC,MAAMJ;AAAAA,UAAOJ,UAEXS,eAAevB,IAAI,KAAKA,QACvBkB,8BACEM,kBAAgB;AAAA,YACf9C,WAAWiC,KACTC,kBAAkBa,aAClBhD,mCAASgD,WACX;AAAA,YACAC,SAAQ;AAAA,YAAMZ,UAEba,gBAAgB3B,KAAKG,KAAK;AAAA,UAAA,CACX,KAElByB,oBAACC,QAAM;AAAA,YACL7B;AAAAA,YACAvB,SAAS;AAAA,cACPqD,GAAGnB,KAAKC,kBAAkBkB,GAAGrD,mCAASqD,CAAC;AAAA,cACvCC,MAAMpB,KAAKC,kBAAkBmB,MAAMtD,mCAASsD,IAAI;AAAA,YAClD;AAAA,YACA/C;AAAAA,YACAD;AAAAA,UAAAA,CACD;AAAA,WAvBAkC,GAyBQ;AAAA,MAAA,CAElB;AAAA,IAAA,CACgB;AAAA,EAAA,CACT;AAEhB;"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import startCase from "lodash/startCase";
|
|
2
1
|
import { useClasses } from "./Page.styles.js";
|
|
3
2
|
import { staticClasses } from "./Page.styles.js";
|
|
4
3
|
import { jsx } from "@emotion/react/jsx-runtime";
|
|
@@ -32,7 +31,7 @@ const HvPage = ({
|
|
|
32
31
|
className: cx(classes.link, classes.label, classes.a),
|
|
33
32
|
...others,
|
|
34
33
|
children: /* @__PURE__ */ jsx(HvOverflowTooltip, {
|
|
35
|
-
data:
|
|
34
|
+
data: elem.label
|
|
36
35
|
})
|
|
37
36
|
});
|
|
38
37
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Page.js","sources":["../../../../../src/components/BreadCrumb/Page/Page.tsx"],"sourcesContent":["import {\n HvBreadCrumbPathElement,\n HvOverflowTooltip,\n HvTypography,\n} from \"@core/components\";\nimport { ExtractNames } from \"@core/utils\";\nimport
|
|
1
|
+
{"version":3,"file":"Page.js","sources":["../../../../../src/components/BreadCrumb/Page/Page.tsx"],"sourcesContent":["import {\n HvBreadCrumbPathElement,\n HvOverflowTooltip,\n HvTypography,\n} from \"@core/components\";\nimport { ExtractNames } from \"@core/utils\";\nimport { MouseEvent } from \"react\";\nimport { staticClasses, useClasses } from \"./Page.styles\";\n\nexport { staticClasses as pageClasses };\n\nexport type HvPageClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvPageProps {\n component?: React.ElementType;\n onClick?: (event: MouseEvent<HTMLElement>, data: any) => void;\n elem: HvBreadCrumbPathElement;\n classes?: HvPageClasses;\n}\n\nexport const HvPage = ({\n component,\n onClick,\n elem,\n classes: classesProp,\n}: HvPageProps) => {\n const { classes, cx } = useClasses(classesProp);\n const { label, path, ...others } = elem;\n const handleClick = (event: MouseEvent<HTMLElement>) => {\n event.preventDefault();\n onClick?.(event, elem);\n };\n\n return (\n <HvTypography\n noWrap\n variant=\"label\"\n component={component || \"a\"}\n href={elem.path}\n onClick={onClick && handleClick}\n className={cx(classes.link, classes.label, classes.a)}\n {...others}\n >\n <HvOverflowTooltip data={elem.label} />\n </HvTypography>\n );\n};\n"],"names":["HvPage","component","onClick","elem","classes","classesProp","cx","useClasses","label","path","others","handleClick","event","preventDefault","HvTypography","noWrap","variant","href","className","link","a","children","HvOverflowTooltip","data"],"mappings":";;;;;AAoBO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AACE,MAAM;AACX,QAAA;AAAA,IAAED;AAAAA,IAASE;AAAAA,EAAAA,IAAOC,WAAWF,WAAW;AACxC,QAAA;AAAA,IAAEG;AAAAA,IAAOC;AAAAA,IAAM,GAAGC;AAAAA,EAAWP,IAAAA;AAC7BQ,QAAAA,cAAcA,CAACC,UAAmC;AACtDA,UAAMC,eAAe;AACrBX,uCAAUU,OAAOT;AAAAA,EAAI;AAGvB,6BACGW,cAAY;AAAA,IACXC,QAAM;AAAA,IACNC,SAAQ;AAAA,IACRf,WAAWA,aAAa;AAAA,IACxBgB,MAAMd,KAAKM;AAAAA,IACXP,SAASA,WAAWS;AAAAA,IACpBO,WAAWZ,GAAGF,QAAQe,MAAMf,QAAQI,OAAOJ,QAAQgB,CAAC;AAAA,IAAE,GAClDV;AAAAA,IAAMW,8BAETC,mBAAiB;AAAA,MAACC,MAAMpB,KAAKK;AAAAA,IAAAA,CAAQ;AAAA,EAAA,CAC1B;AAElB;"}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import { Drawer } from "@mui/material";
|
|
2
|
+
import { Close } from "@hitachivantara/uikit-react-icons";
|
|
3
|
+
import { theme } from "@hitachivantara/uikit-styles";
|
|
4
|
+
import { useState, useEffect } from "react";
|
|
5
|
+
import { useClasses } from "./Drawer.styles.js";
|
|
6
|
+
import { staticClasses } from "./Drawer.styles.js";
|
|
7
|
+
import { jsxs, jsx } from "@emotion/react/jsx-runtime";
|
|
8
|
+
import { getVarValue } from "../../utils/theme.js";
|
|
9
|
+
import withTooltip from "../../hocs/withTooltip.js";
|
|
10
|
+
import checkValidHexColorValue from "../../utils/checkValidHexColorValue.js";
|
|
11
|
+
import fade from "../../utils/hexToRgbA.js";
|
|
12
|
+
import { useTheme } from "../../hooks/useTheme.js";
|
|
13
|
+
import { HvButton } from "../Button/Button.js";
|
|
14
|
+
import { setId } from "../../utils/setId.js";
|
|
15
|
+
const getBackgroundColor = (color) => {
|
|
16
|
+
return checkValidHexColorValue(color) ? fade(color, 0.8) : color;
|
|
17
|
+
};
|
|
18
|
+
const HvDrawer = ({
|
|
19
|
+
className,
|
|
20
|
+
classes: classesProp,
|
|
21
|
+
id,
|
|
22
|
+
children,
|
|
23
|
+
open,
|
|
24
|
+
onClose,
|
|
25
|
+
anchor = "right",
|
|
26
|
+
buttonTitle = "Close",
|
|
27
|
+
...others
|
|
28
|
+
}) => {
|
|
29
|
+
var _a;
|
|
30
|
+
const {
|
|
31
|
+
classes,
|
|
32
|
+
css,
|
|
33
|
+
cx
|
|
34
|
+
} = useClasses(classesProp);
|
|
35
|
+
const {
|
|
36
|
+
activeTheme,
|
|
37
|
+
selectedMode
|
|
38
|
+
} = useTheme();
|
|
39
|
+
const [backgroundColorValue, setBackgroundColorValue] = useState(getVarValue(theme.drawer.backDropBackgroundColor));
|
|
40
|
+
const closeButtonDisplay = () => /* @__PURE__ */ jsx(Close, {
|
|
41
|
+
role: "presentation"
|
|
42
|
+
});
|
|
43
|
+
const CloseButtonTooltipWrapper = buttonTitle ? withTooltip(closeButtonDisplay, buttonTitle, "top") : closeButtonDisplay;
|
|
44
|
+
const [backgroundColor, setBackgroundColor] = useState(getBackgroundColor(backgroundColorValue));
|
|
45
|
+
useEffect(() => {
|
|
46
|
+
setBackgroundColorValue(getVarValue(theme.drawer.backDropBackgroundColor));
|
|
47
|
+
setBackgroundColor(getBackgroundColor(backgroundColorValue));
|
|
48
|
+
}, [(_a = activeTheme == null ? void 0 : activeTheme.colors) == null ? void 0 : _a.modes[selectedMode], backgroundColorValue, setBackgroundColor]);
|
|
49
|
+
return /* @__PURE__ */ jsxs(Drawer, {
|
|
50
|
+
className: cx(classes.root, className),
|
|
51
|
+
id,
|
|
52
|
+
anchor,
|
|
53
|
+
open,
|
|
54
|
+
PaperProps: {
|
|
55
|
+
classes: {
|
|
56
|
+
root: classes.paper
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
BackdropProps: {
|
|
60
|
+
classes: {
|
|
61
|
+
root: cx(css({
|
|
62
|
+
backgroundColor
|
|
63
|
+
}), classes.background)
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
onClose,
|
|
67
|
+
...others,
|
|
68
|
+
children: [/* @__PURE__ */ jsx(HvButton, {
|
|
69
|
+
id: setId(id, "close"),
|
|
70
|
+
className: classes.closeButton,
|
|
71
|
+
variant: "primaryGhost",
|
|
72
|
+
onClick: onClose,
|
|
73
|
+
"aria-label": buttonTitle,
|
|
74
|
+
children: /* @__PURE__ */ jsx(CloseButtonTooltipWrapper, {})
|
|
75
|
+
}), children]
|
|
76
|
+
});
|
|
77
|
+
};
|
|
78
|
+
export {
|
|
79
|
+
HvDrawer,
|
|
80
|
+
staticClasses as drawerClasses
|
|
81
|
+
};
|
|
82
|
+
//# sourceMappingURL=Drawer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Drawer.js","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import {\n Drawer as MuiDrawer,\n DrawerProps as MuiDrawerProps,\n} from \"@mui/material\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { withTooltip } from \"@core/hocs\";\nimport {\n getVarValue,\n hexToRgbA,\n setId,\n checkValidHexColorValue,\n ExtractNames,\n} from \"@core/utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvButton } from \"@core/components\";\nimport { useEffect, useState } from \"react\";\nimport { useTheme } from \"@core/hooks\";\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps\n extends MuiDrawerProps,\n Omit<MuiDrawerProps, \"classes\">,\n HvBaseProps<HTMLDivElement> {\n /**\n * Class names to be applied.\n */\n className?: string;\n /**\n * Id to be applied to the root node.\n */\n id?: string;\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes?: HvDrawerClasses;\n /**\n * Components of the Drawer.\n */\n children?: React.ReactNode;\n /**\n * Current state of the Drawer.\n */\n open?: boolean;\n /**\n * Function executed on close.\n * Extended from Modal from material-ui\n *\n */\n onClose?: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => void;\n /**\n * The side the drawer opens from.\n */\n anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n /**\n * Title for the button close.\n */\n buttonTitle?: string;\n}\n\nconst getBackgroundColor = (color: string) => {\n return checkValidHexColorValue(color) ? hexToRgbA(color, 0.8) : color;\n};\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = ({\n className,\n classes: classesProp,\n id,\n children,\n open,\n onClose,\n anchor = \"right\",\n buttonTitle = \"Close\",\n ...others\n}: HvDrawerProps) => {\n const { classes, css, cx } = useClasses(classesProp);\n const { activeTheme, selectedMode } = useTheme();\n\n const [backgroundColorValue, setBackgroundColorValue] = useState<string>(\n getVarValue(theme.drawer.backDropBackgroundColor)\n );\n\n const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n const CloseButtonTooltipWrapper = buttonTitle\n ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n : closeButtonDisplay;\n\n const [backgroundColor, setBackgroundColor] = useState(\n getBackgroundColor(backgroundColorValue)\n );\n\n useEffect(() => {\n setBackgroundColorValue(getVarValue(theme.drawer.backDropBackgroundColor));\n\n setBackgroundColor(getBackgroundColor(backgroundColorValue));\n }, [\n activeTheme?.colors?.modes[selectedMode],\n backgroundColorValue,\n setBackgroundColor,\n ]);\n\n return (\n <MuiDrawer\n className={cx(classes.root, className)}\n id={id}\n anchor={anchor}\n open={open}\n PaperProps={{\n classes: {\n root: classes.paper,\n },\n }}\n BackdropProps={{\n classes: {\n root: cx(css({ backgroundColor }), classes.background),\n },\n }}\n onClose={onClose}\n {...others}\n >\n <HvButton\n id={setId(id, \"close\")}\n className={classes.closeButton}\n variant=\"primaryGhost\"\n onClick={onClose}\n aria-label={buttonTitle}\n >\n <CloseButtonTooltipWrapper />\n </HvButton>\n {children}\n </MuiDrawer>\n );\n};\n"],"names":["getBackgroundColor","color","checkValidHexColorValue","hexToRgbA","HvDrawer","className","classes","classesProp","id","children","open","onClose","anchor","buttonTitle","others","css","cx","useClasses","activeTheme","selectedMode","useTheme","backgroundColorValue","setBackgroundColorValue","useState","getVarValue","theme","drawer","backDropBackgroundColor","closeButtonDisplay","_jsx","Close","role","CloseButtonTooltipWrapper","withTooltip","backgroundColor","setBackgroundColor","useEffect","colors","modes","MuiDrawer","root","PaperProps","paper","BackdropProps","background","HvButton","setId","closeButton","variant","onClick"],"mappings":";;;;;;;;;;;;;;AAmEA,MAAMA,qBAAqBA,CAACC,UAAkB;AAC5C,SAAOC,wBAAwBD,KAAK,IAAIE,KAAUF,OAAO,GAAG,IAAIA;AAClE;AAOO,MAAMG,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAAS;AAAA,EACTC,cAAc;AAAA,EACd,GAAGC;AACU,MAAM;;AACb,QAAA;AAAA,IAAER;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAC7C,QAAA;AAAA,IAAEW;AAAAA,IAAaC;AAAAA,MAAiBC,SAAS;AAEzC,QAAA,CAACC,sBAAsBC,uBAAuB,IAAIC,SACtDC,YAAYC,MAAMC,OAAOC,uBAAuB,CAClD;AAEMC,QAAAA,qBAAqBA,MAAMC,oBAACC,OAAK;AAAA,IAACC,MAAK;AAAA,EAAA,CAAgB;AAE7D,QAAMC,4BAA4BnB,cAC9BoB,YAAYL,oBAAoBf,aAAa,KAAK,IAClDe;AAEJ,QAAM,CAACM,iBAAiBC,kBAAkB,IAAIZ,SAC5CvB,mBAAmBqB,oBAAoB,CACzC;AAEAe,YAAU,MAAM;AACdd,4BAAwBE,YAAYC,MAAMC,OAAOC,uBAAuB,CAAC;AAEtD3B,uBAAAA,mBAAmBqB,oBAAoB,CAAC;AAAA,EAAA,GAC1D,EACDH,gDAAamB,WAAbnB,mBAAqBoB,MAAMnB,eAC3BE,sBACAc,kBAAkB,CACnB;AAED,8BACGI,QAAS;AAAA,IACRlC,WAAWW,GAAGV,QAAQkC,MAAMnC,SAAS;AAAA,IACrCG;AAAAA,IACAI;AAAAA,IACAF;AAAAA,IACA+B,YAAY;AAAA,MACVnC,SAAS;AAAA,QACPkC,MAAMlC,QAAQoC;AAAAA,MAChB;AAAA,IACF;AAAA,IACAC,eAAe;AAAA,MACbrC,SAAS;AAAA,QACPkC,MAAMxB,GAAGD,IAAI;AAAA,UAAEmB;AAAAA,QAAAA,CAAiB,GAAG5B,QAAQsC,UAAU;AAAA,MACvD;AAAA,IACF;AAAA,IACAjC;AAAAA,IAAiB,GACbG;AAAAA,IAAML,UAAA,CAEVoB,oBAACgB,UAAQ;AAAA,MACPrC,IAAIsC,MAAMtC,IAAI,OAAO;AAAA,MACrBH,WAAWC,QAAQyC;AAAAA,MACnBC,SAAQ;AAAA,MACRC,SAAStC;AAAAA,MACT,cAAYE;AAAAA,MAAYJ,UAExBoB,oBAACG,2BAA2B,EAAA;AAAA,IACpB,CAAA,GACTvB,QAAQ;AAAA,EAAA,CACA;AAEf;"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { theme } from "@hitachivantara/uikit-styles";
|
|
2
|
+
import { createClasses } from "../../utils/classes.js";
|
|
3
|
+
const {
|
|
4
|
+
staticClasses,
|
|
5
|
+
useClasses
|
|
6
|
+
} = createClasses("HvDrawer", {
|
|
7
|
+
root: {},
|
|
8
|
+
paper: {
|
|
9
|
+
backgroundColor: theme.colors.atmo1,
|
|
10
|
+
padding: 0,
|
|
11
|
+
overflow: "auto",
|
|
12
|
+
boxShadow: theme.colors.shadow
|
|
13
|
+
},
|
|
14
|
+
background: {},
|
|
15
|
+
closeButton: {
|
|
16
|
+
padding: 0,
|
|
17
|
+
minWidth: "inherit",
|
|
18
|
+
position: "absolute",
|
|
19
|
+
top: theme.spacing("sm"),
|
|
20
|
+
right: theme.spacing("sm")
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
export {
|
|
24
|
+
staticClasses,
|
|
25
|
+
useClasses
|
|
26
|
+
};
|
|
27
|
+
//# sourceMappingURL=Drawer.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Drawer.styles.js","sources":["../../../../src/components/Drawer/Drawer.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDrawer\", {\n root: {},\n paper: {\n backgroundColor: theme.colors.atmo1,\n padding: 0,\n overflow: \"auto\",\n boxShadow: theme.colors.shadow,\n },\n background: {},\n closeButton: {\n padding: 0,\n minWidth: \"inherit\",\n position: \"absolute\",\n top: theme.spacing(\"sm\"),\n right: theme.spacing(\"sm\"),\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","paper","backgroundColor","theme","colors","atmo1","padding","overflow","boxShadow","shadow","background","closeButton","minWidth","position","top","spacing","right"],"mappings":";;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,YAAY;AAAA,EACrEC,MAAM,CAAC;AAAA,EACPC,OAAO;AAAA,IACLC,iBAAiBC,MAAMC,OAAOC;AAAAA,IAC9BC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,WAAWL,MAAMC,OAAOK;AAAAA,EAC1B;AAAA,EACAC,YAAY,CAAC;AAAA,EACbC,aAAa;AAAA,IACXL,SAAS;AAAA,IACTM,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,KAAKX,MAAMY,QAAQ,IAAI;AAAA,IACvBC,OAAOb,MAAMY,QAAQ,IAAI;AAAA,EAC3B;AACF,CAAC;"}
|
|
@@ -7,10 +7,10 @@ import TableSectionContext from "../TableSectionContext.js";
|
|
|
7
7
|
import { useClasses } from "./TableRow.styles.js";
|
|
8
8
|
import { staticClasses } from "./TableRow.styles.js";
|
|
9
9
|
import { jsx } from "@emotion/react/jsx-runtime";
|
|
10
|
-
import { getVarValue } from "../../../utils/theme.js";
|
|
11
10
|
import checkValidHexColorValue from "../../../utils/checkValidHexColorValue.js";
|
|
12
11
|
import fade from "../../../utils/hexToRgbA.js";
|
|
13
12
|
import { useTheme } from "../../../hooks/useTheme.js";
|
|
13
|
+
import { getVarValue } from "../../../utils/theme.js";
|
|
14
14
|
function _extends() {
|
|
15
15
|
_extends = Object.assign ? Object.assign.bind() : function(target) {
|
|
16
16
|
for (var i = 1; i < arguments.length; i++) {
|