@hitachivantara/uikit-react-core 5.18.4 → 5.19.0
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/Button/Button.cjs +32 -56
- package/dist/cjs/components/Button/Button.cjs.map +1 -1
- package/dist/cjs/components/Button/Button.styles.cjs +122 -240
- package/dist/cjs/components/Button/Button.styles.cjs.map +1 -1
- package/dist/cjs/components/Carousel/Carousel.cjs +95 -110
- package/dist/cjs/components/Carousel/Carousel.cjs.map +1 -1
- package/dist/cjs/components/Carousel/Carousel.styles.cjs +4 -8
- package/dist/cjs/components/Carousel/Carousel.styles.cjs.map +1 -1
- package/dist/cjs/components/Carousel/CarouselControls.cjs +62 -0
- package/dist/cjs/components/Carousel/CarouselControls.cjs.map +1 -0
- package/dist/cjs/components/Carousel/CarouselSlide/CarouselSlide.cjs +2 -1
- package/dist/cjs/components/Carousel/CarouselSlide/CarouselSlide.cjs.map +1 -1
- package/dist/cjs/components/Carousel/CarouselThumbnail.cjs +30 -0
- package/dist/cjs/components/Carousel/CarouselThumbnail.cjs.map +1 -0
- package/dist/cjs/components/Carousel/CarouselThumbnails.cjs +44 -0
- package/dist/cjs/components/Carousel/CarouselThumbnails.cjs.map +1 -0
- 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/Header/Actions/Actions.styles.cjs +3 -2
- package/dist/cjs/components/Header/Actions/Actions.styles.cjs.map +1 -1
- package/dist/cjs/components/Header/Navigation/MenuItem/MenuItem.cjs +6 -1
- package/dist/cjs/components/Header/Navigation/MenuItem/MenuItem.cjs.map +1 -1
- package/dist/cjs/components/InlineEditor/InlineEditor.cjs +10 -9
- package/dist/cjs/components/InlineEditor/InlineEditor.cjs.map +1 -1
- package/dist/cjs/components/MultiButton/MultiButton.styles.cjs +3 -2
- package/dist/cjs/components/MultiButton/MultiButton.styles.cjs.map +1 -1
- package/dist/cjs/components/Table/TableRow/TableRow.cjs +1 -1
- package/dist/cjs/index.cjs +6 -2
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/utils/classes.cjs +2 -2
- package/dist/cjs/utils/classes.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/Button/Button.js +37 -60
- package/dist/esm/components/Button/Button.js.map +1 -1
- package/dist/esm/components/Button/Button.styles.js +122 -238
- package/dist/esm/components/Button/Button.styles.js.map +1 -1
- package/dist/esm/components/Carousel/Carousel.js +96 -111
- package/dist/esm/components/Carousel/Carousel.js.map +1 -1
- package/dist/esm/components/Carousel/Carousel.styles.js +4 -8
- package/dist/esm/components/Carousel/Carousel.styles.js.map +1 -1
- package/dist/esm/components/Carousel/CarouselControls.js +62 -0
- package/dist/esm/components/Carousel/CarouselControls.js.map +1 -0
- package/dist/esm/components/Carousel/CarouselSlide/CarouselSlide.js +2 -1
- package/dist/esm/components/Carousel/CarouselSlide/CarouselSlide.js.map +1 -1
- package/dist/esm/components/Carousel/CarouselThumbnail.js +30 -0
- package/dist/esm/components/Carousel/CarouselThumbnail.js.map +1 -0
- package/dist/esm/components/Carousel/CarouselThumbnails.js +44 -0
- package/dist/esm/components/Carousel/CarouselThumbnails.js.map +1 -0
- 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/Header/Actions/Actions.styles.js +3 -2
- package/dist/esm/components/Header/Actions/Actions.styles.js.map +1 -1
- package/dist/esm/components/Header/Navigation/MenuItem/MenuItem.js +6 -1
- package/dist/esm/components/Header/Navigation/MenuItem/MenuItem.js.map +1 -1
- package/dist/esm/components/InlineEditor/InlineEditor.js +11 -10
- package/dist/esm/components/InlineEditor/InlineEditor.js.map +1 -1
- package/dist/esm/components/MultiButton/MultiButton.styles.js +3 -2
- package/dist/esm/components/MultiButton/MultiButton.styles.js.map +1 -1
- package/dist/esm/components/Table/TableRow/TableRow.js +1 -1
- package/dist/esm/index.js +232 -228
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/utils/classes.js +2 -2
- package/dist/esm/utils/classes.js.map +1 -1
- package/dist/types/index.d.ts +222 -139
- package/package.json +5 -5
- package/dist/cjs/components/Button/buttonClasses.cjs +0 -8
- package/dist/cjs/components/Button/buttonClasses.cjs.map +0 -1
- package/dist/esm/components/Button/buttonClasses.js +0 -8
- package/dist/esm/components/Button/buttonClasses.js.map +0 -1
|
@@ -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;;;"}
|
|
@@ -1,94 +1,70 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const clsx = require("clsx");
|
|
4
3
|
const React = require("react");
|
|
5
4
|
const Button_styles = require("./Button.styles.cjs");
|
|
6
|
-
const buttonClasses = require("./buttonClasses.cjs");
|
|
7
5
|
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
8
6
|
const useTheme = require("../../hooks/useTheme.cjs");
|
|
9
7
|
const mapVariant = (variant, theme) => {
|
|
10
|
-
if (theme
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}
|
|
8
|
+
if (theme === "ds3")
|
|
9
|
+
return variant;
|
|
10
|
+
const deprecatedVariantMap = {
|
|
11
|
+
secondary: "secondarySubtle",
|
|
12
|
+
ghost: "primaryGhost"
|
|
13
|
+
};
|
|
14
|
+
const mappedVariant = deprecatedVariantMap[variant];
|
|
15
|
+
if (mappedVariant) {
|
|
16
|
+
console.warn(`Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`);
|
|
19
17
|
}
|
|
20
|
-
return variant;
|
|
18
|
+
return mappedVariant || variant;
|
|
21
19
|
};
|
|
22
20
|
const HvButton = React.forwardRef((props, ref) => {
|
|
23
21
|
const {
|
|
24
22
|
id,
|
|
25
|
-
classes,
|
|
23
|
+
classes: classesProp,
|
|
26
24
|
children,
|
|
27
|
-
variant = "primary",
|
|
28
|
-
onClick,
|
|
25
|
+
variant: variantProp = "primary",
|
|
29
26
|
disabled = false,
|
|
30
27
|
className,
|
|
31
28
|
startIcon,
|
|
32
29
|
endIcon,
|
|
33
30
|
icon = false,
|
|
34
31
|
size,
|
|
35
|
-
radius
|
|
32
|
+
radius,
|
|
36
33
|
overrideIconColors = true,
|
|
37
34
|
component: Component = "button",
|
|
38
35
|
...others
|
|
39
36
|
} = props;
|
|
37
|
+
const {
|
|
38
|
+
classes,
|
|
39
|
+
css,
|
|
40
|
+
cx
|
|
41
|
+
} = Button_styles.useClasses(classesProp);
|
|
40
42
|
const {
|
|
41
43
|
activeTheme
|
|
42
44
|
} = useTheme.useTheme();
|
|
43
|
-
const
|
|
44
|
-
|
|
45
|
-
event.target.classList.add(buttonClasses.default.focusVisible);
|
|
46
|
-
if (classes == null ? void 0 : classes.focusVisible) {
|
|
47
|
-
event.target.classList.add(classes.focusVisible);
|
|
48
|
-
}
|
|
49
|
-
};
|
|
50
|
-
const onBlurHandler = (event) => {
|
|
51
|
-
event.target.classList.remove("HvIsFocusVisible");
|
|
52
|
-
event.target.classList.remove(buttonClasses.default.focusVisible);
|
|
53
|
-
if (classes == null ? void 0 : classes.focusVisible) {
|
|
54
|
-
event.target.classList.remove(classes.focusVisible);
|
|
55
|
-
}
|
|
56
|
-
};
|
|
57
|
-
const StyledComponent = React.useMemo(() => Button_styles.StyledButton(Component), [Component]);
|
|
58
|
-
return /* @__PURE__ */ jsxRuntime.jsx(StyledComponent, {
|
|
59
|
-
id,
|
|
45
|
+
const variant = mapVariant(variantProp, activeTheme == null ? void 0 : activeTheme.name);
|
|
46
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(Component, {
|
|
60
47
|
ref,
|
|
61
48
|
type: "button",
|
|
62
|
-
className:
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
$variant: mapVariant(variant, activeTheme == null ? void 0 : activeTheme.name),
|
|
67
|
-
$iconOnly: icon,
|
|
68
|
-
$size: size,
|
|
69
|
-
$radius: radius,
|
|
70
|
-
$overrideIconColors: overrideIconColors,
|
|
71
|
-
$startIcon: !!startIcon,
|
|
72
|
-
$endIcon: !!endIcon,
|
|
49
|
+
className: cx(classes.root, css(Button_styles.getVariantStyles(variant)), size && css(Button_styles.getSizeStyles(size)), radius && css(Button_styles.getRadiusStyles(radius)), overrideIconColors && css(Button_styles.getOverrideColors(variant)), {
|
|
50
|
+
[classes.icon]: icon,
|
|
51
|
+
[classes.disabled]: disabled
|
|
52
|
+
}, className),
|
|
73
53
|
...disabled && {
|
|
74
|
-
$disabled: true,
|
|
75
54
|
disabled: true,
|
|
76
55
|
tabIndex: -1,
|
|
77
56
|
"aria-disabled": true
|
|
78
57
|
},
|
|
79
58
|
...others,
|
|
80
|
-
children: /* @__PURE__ */ jsxRuntime.
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
className: clsx.clsx(classes == null ? void 0 : classes.endIcon, buttonClasses.default.endIcon),
|
|
88
|
-
children: endIcon
|
|
89
|
-
})]
|
|
90
|
-
})
|
|
59
|
+
children: [startIcon && /* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
60
|
+
className: classes.startIcon,
|
|
61
|
+
children: startIcon
|
|
62
|
+
}), children, endIcon && /* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
63
|
+
className: classes.endIcon,
|
|
64
|
+
children: endIcon
|
|
65
|
+
})]
|
|
91
66
|
});
|
|
92
67
|
});
|
|
68
|
+
exports.buttonClasses = Button_styles.staticClasses;
|
|
93
69
|
exports.HvButton = HvButton;
|
|
94
70
|
//# sourceMappingURL=Button.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.cjs","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"Button.cjs","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement } from \"react\";\nimport { useTheme } from \"@core/hooks\";\nimport { PolymorphicComponentRef, PolymorphicRef } from \"@core/types\";\nimport { ExtractNames } from \"@core/utils\";\nimport {\n staticClasses as buttonClasses,\n getOverrideColors,\n getRadiusStyles,\n getSizeStyles,\n getVariantStyles,\n useClasses,\n} from \"./Button.styles\";\n\nexport { buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport const buttonVariant = [\n \"primary\",\n \"primarySubtle\",\n \"primaryGhost\",\n \"secondarySubtle\",\n \"secondaryGhost\",\n \"semantic\",\n // deprecated props\n \"secondary\",\n \"ghost\",\n] as const;\nexport type HvButtonVariant = (typeof buttonVariant)[number];\n\nexport const buttonSize = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"] as const;\nexport type HvButtonSize = (typeof buttonSize)[number];\n\nexport const buttonRadius = [\n \"none\",\n \"base\",\n \"round\",\n \"circle\",\n \"full\",\n] as const;\nexport type HvButtonRadius = (typeof buttonRadius)[number];\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n PolymorphicComponentRef<\n C,\n {\n /** Use the variant prop to change the visual style of the Button. */\n variant?: HvButtonVariant;\n /** Whether the Button is an icon-only button. */\n icon?: boolean;\n /** Whether the Button is disabled or not. */\n disabled?: boolean;\n /** Class names to be applied. */\n className?: string;\n /** Element placed before the children. */\n startIcon?: ReactElement;\n /** Element placed after the children. */\n endIcon?: ReactElement;\n /** Button size. */\n size?: HvButtonSize;\n /** Button border radius. */\n radius?: HvButtonRadius;\n /** Defines the default colors of the button are forced into the icon. */\n overrideIconColors?: boolean;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvButtonClasses;\n /** Whether the Button is selected or not. */\n selected?: boolean;\n }\n >;\n\n/**\n * Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n * @returns the normalized variant in DS 5 API\n */\nconst mapVariant = (\n variant: HvButtonVariant,\n theme?: string\n): HvButtonVariant => {\n if (theme === \"ds3\") return variant;\n\n const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n secondary: \"secondarySubtle\",\n ghost: \"primaryGhost\",\n };\n\n const mappedVariant = deprecatedVariantMap[variant];\n\n if (mappedVariant) {\n // eslint-disable-next-line no-console\n console.warn(\n `Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`\n );\n }\n\n return mappedVariant || variant;\n};\n\n/**\n * Button component is used to trigger an action or event.\n */\nexport const HvButton: <C extends React.ElementType = \"button\">(\n props: HvButtonProps<C>\n) => React.ReactElement | null = forwardRef(\n <C extends React.ElementType = \"button\">(\n props: HvButtonProps<C>,\n ref: PolymorphicRef<C>\n ) => {\n const {\n id,\n classes: classesProp,\n children,\n variant: variantProp = \"primary\",\n disabled = false,\n className,\n startIcon,\n endIcon,\n icon = false,\n size,\n radius,\n overrideIconColors = true,\n component: Component = \"button\",\n ...others\n } = props;\n const { classes, css, cx } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n\n const variant = mapVariant(variantProp, activeTheme?.name);\n\n return (\n <Component\n ref={ref}\n type=\"button\"\n className={cx(\n classes.root,\n css(getVariantStyles(variant)),\n size && css(getSizeStyles(size)),\n radius && css(getRadiusStyles(radius)),\n overrideIconColors && css(getOverrideColors(variant)),\n {\n [classes.icon]: icon,\n [classes.disabled]: disabled,\n },\n className\n )}\n {...(disabled && {\n disabled: true,\n tabIndex: -1,\n \"aria-disabled\": true,\n })}\n {...others}\n >\n {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n {children}\n {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n </Component>\n );\n }\n);\n"],"names":["mapVariant","variant","theme","deprecatedVariantMap","secondary","ghost","mappedVariant","warn","HvButton","forwardRef","props","ref","id","classes","classesProp","children","variantProp","disabled","className","startIcon","endIcon","icon","size","radius","overrideIconColors","component","Component","others","css","cx","useClasses","activeTheme","useTheme","name","type","root","getVariantStyles","getSizeStyles","getRadiusStyles","getOverrideColors","tabIndex","_jsx"],"mappings":";;;;;;AA4EA,MAAMA,aAAaA,CACjBC,SACAC,UACoB;AACpB,MAAIA,UAAU;AAAcD,WAAAA;AAE5B,QAAME,uBAAwD;AAAA,IAC5DC,WAAW;AAAA,IACXC,OAAO;AAAA,EAAA;AAGHC,QAAAA,gBAAgBH,qBAAqBF,OAAO;AAElD,MAAIK,eAAe;AAETC,YAAAA,KACL,mBAAkBN,uCAAuCK,iBAC5D;AAAA,EACF;AAEA,SAAOA,iBAAiBL;AAC1B;AAKO,MAAMO,WAEoBC,MAAAA,WAC/B,CACEC,OACAC,QACG;AACG,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAd,SAASe,cAAc;AAAA,IACvBC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC,qBAAqB;AAAA,IACrBC,WAAWC,YAAY;AAAA,IACvB,GAAGC;AAAAA,EACDjB,IAAAA;AACE,QAAA;AAAA,IAAEG;AAAAA,IAASe;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,cAAAA,WAAWhB,WAAW;AAC7C,QAAA;AAAA,IAAEiB;AAAAA,MAAgBC,SAAS,SAAA;AAEjC,QAAM/B,UAAUD,WAAWgB,aAAae,2CAAaE,IAAI;AAEzD,yCACGP,WAAS;AAAA,IACRf;AAAAA,IACAuB,MAAK;AAAA,IACLhB,WAAWW,GACThB,QAAQsB,MACRP,IAAIQ,+BAAiBnC,OAAO,CAAC,GAC7BqB,QAAQM,IAAIS,cAAcf,cAAAA,IAAI,CAAC,GAC/BC,UAAUK,IAAIU,cAAAA,gBAAgBf,MAAM,CAAC,GACrCC,sBAAsBI,IAAIW,gCAAkBtC,OAAO,CAAC,GACpD;AAAA,MACE,CAACY,QAAQQ,IAAI,GAAGA;AAAAA,MAChB,CAACR,QAAQI,QAAQ,GAAGA;AAAAA,OAEtBC,SACF;AAAA,IAAE,GACGD,YAAY;AAAA,MACfA,UAAU;AAAA,MACVuB,UAAU;AAAA,MACV,iBAAiB;AAAA,IACnB;AAAA,IAAC,GACGb;AAAAA,IAAMZ,UAAA,CAETI,aAAasB,2BAAAA,IAAA,QAAA;AAAA,MAAMvB,WAAWL,QAAQM;AAAAA,MAAUJ,UAAEI;AAAAA,IAAgB,CAAA,GAClEJ,UACAK,0CAAW,QAAA;AAAA,MAAMF,WAAWL,QAAQO;AAAAA,MAAQL,UAAEK;AAAAA,IAAAA,CAAc,CAAC;AAAA,EAAA,CACrD;AAEf,CACF;;;"}
|