@hitachivantara/uikit-react-core 5.36.5 → 5.36.7
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/AppSwitcher/Action/Action.cjs +4 -2
- package/dist/cjs/components/AppSwitcher/Action/Action.cjs.map +1 -1
- package/dist/cjs/components/AppSwitcher/Action/Action.styles.cjs +6 -8
- package/dist/cjs/components/AppSwitcher/Action/Action.styles.cjs.map +1 -1
- package/dist/cjs/components/AppSwitcher/AppSwitcher.cjs +4 -2
- package/dist/cjs/components/AppSwitcher/AppSwitcher.cjs.map +1 -1
- package/dist/cjs/components/AppSwitcher/AppSwitcher.styles.cjs +4 -3
- package/dist/cjs/components/AppSwitcher/AppSwitcher.styles.cjs.map +1 -1
- package/dist/cjs/components/BreadCrumb/Page/Page.cjs +1 -1
- package/dist/cjs/components/Button/Button.cjs +0 -3
- package/dist/cjs/components/Button/Button.cjs.map +1 -1
- package/dist/cjs/components/Calendar/utils.cjs.map +1 -1
- package/dist/cjs/components/Dialog/Dialog.cjs +2 -5
- package/dist/cjs/components/Dialog/Dialog.cjs.map +1 -1
- package/dist/cjs/components/Dropdown/Dropdown.cjs +0 -3
- package/dist/cjs/components/Dropdown/Dropdown.cjs.map +1 -1
- package/dist/cjs/components/FileUploader/File/File.cjs +3 -3
- package/dist/cjs/components/FileUploader/File/File.cjs.map +1 -1
- package/dist/cjs/components/Header/Navigation/MenuItem/MenuItem.styles.cjs.map +1 -1
- package/dist/cjs/components/OverflowTooltip/OverflowTooltip.cjs +9 -2
- package/dist/cjs/components/OverflowTooltip/OverflowTooltip.cjs.map +1 -1
- package/dist/cjs/components/OverflowTooltip/OverflowTooltip.styles.cjs +2 -2
- package/dist/cjs/components/OverflowTooltip/OverflowTooltip.styles.cjs.map +1 -1
- package/dist/cjs/components/Snackbar/SnackbarProvider/SnackbarProvider.cjs +9 -14
- package/dist/cjs/components/Snackbar/SnackbarProvider/SnackbarProvider.cjs.map +1 -1
- package/dist/cjs/components/Tooltip/Tooltip.cjs +2 -1
- package/dist/cjs/components/Tooltip/Tooltip.cjs.map +1 -1
- package/dist/cjs/components/TreeView/internals/DescendantProvider.cjs +0 -3
- package/dist/cjs/components/TreeView/internals/DescendantProvider.cjs.map +1 -1
- package/dist/cjs/components/TreeView/internals/TreeViewProvider.cjs +0 -3
- package/dist/cjs/components/TreeView/internals/TreeViewProvider.cjs.map +1 -1
- package/dist/cjs/components/Typography/utils.cjs +3 -13
- package/dist/cjs/components/Typography/utils.cjs.map +1 -1
- package/dist/cjs/components/VerticalNavigation/TreeView/descendants.cjs +0 -3
- package/dist/cjs/components/VerticalNavigation/TreeView/descendants.cjs.map +1 -1
- package/dist/cjs/hooks/useControlled.cjs +0 -3
- package/dist/cjs/hooks/useControlled.cjs.map +1 -1
- package/dist/cjs/providers/Provider.cjs +3 -2
- package/dist/cjs/providers/Provider.cjs.map +1 -1
- package/dist/cjs/utils/classes.cjs.map +1 -1
- package/dist/cjs/utils/document.cjs +11 -0
- package/dist/cjs/utils/document.cjs.map +1 -0
- package/dist/cjs/utils/theme.cjs +5 -7
- package/dist/cjs/utils/theme.cjs.map +1 -1
- package/dist/esm/components/AppSwitcher/Action/Action.js +4 -2
- package/dist/esm/components/AppSwitcher/Action/Action.js.map +1 -1
- package/dist/esm/components/AppSwitcher/Action/Action.styles.js +6 -8
- package/dist/esm/components/AppSwitcher/Action/Action.styles.js.map +1 -1
- package/dist/esm/components/AppSwitcher/AppSwitcher.js +4 -2
- package/dist/esm/components/AppSwitcher/AppSwitcher.js.map +1 -1
- package/dist/esm/components/AppSwitcher/AppSwitcher.styles.js +4 -3
- package/dist/esm/components/AppSwitcher/AppSwitcher.styles.js.map +1 -1
- package/dist/esm/components/BreadCrumb/Page/Page.js +1 -1
- package/dist/esm/components/Button/Button.js +0 -3
- package/dist/esm/components/Button/Button.js.map +1 -1
- package/dist/esm/components/Calendar/utils.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.js +2 -5
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/Dropdown/Dropdown.js +0 -3
- package/dist/esm/components/Dropdown/Dropdown.js.map +1 -1
- package/dist/esm/components/FileUploader/File/File.js +2 -2
- package/dist/esm/components/FileUploader/File/File.js.map +1 -1
- package/dist/esm/components/Header/Navigation/MenuItem/MenuItem.styles.js.map +1 -1
- package/dist/esm/components/OverflowTooltip/OverflowTooltip.js +9 -2
- package/dist/esm/components/OverflowTooltip/OverflowTooltip.js.map +1 -1
- package/dist/esm/components/OverflowTooltip/OverflowTooltip.styles.js +2 -2
- package/dist/esm/components/OverflowTooltip/OverflowTooltip.styles.js.map +1 -1
- package/dist/esm/components/Snackbar/SnackbarProvider/SnackbarProvider.js +9 -14
- package/dist/esm/components/Snackbar/SnackbarProvider/SnackbarProvider.js.map +1 -1
- package/dist/esm/components/Tooltip/Tooltip.js +2 -1
- package/dist/esm/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/esm/components/TreeView/internals/DescendantProvider.js +0 -3
- package/dist/esm/components/TreeView/internals/DescendantProvider.js.map +1 -1
- package/dist/esm/components/TreeView/internals/TreeViewProvider.js +0 -3
- package/dist/esm/components/TreeView/internals/TreeViewProvider.js.map +1 -1
- package/dist/esm/components/Typography/utils.js +3 -13
- package/dist/esm/components/Typography/utils.js.map +1 -1
- package/dist/esm/components/VerticalNavigation/TreeView/descendants.js +0 -3
- package/dist/esm/components/VerticalNavigation/TreeView/descendants.js.map +1 -1
- package/dist/esm/hooks/useControlled.js +0 -3
- package/dist/esm/hooks/useControlled.js.map +1 -1
- package/dist/esm/providers/Provider.js +4 -3
- package/dist/esm/providers/Provider.js.map +1 -1
- package/dist/esm/utils/classes.js.map +1 -1
- package/dist/esm/utils/document.js +11 -0
- package/dist/esm/utils/document.js.map +1 -0
- package/dist/esm/utils/theme.js +5 -7
- package/dist/esm/utils/theme.js.map +1 -1
- package/dist/types/index.d.ts +13 -9
- package/package.json +4 -4
- package/dist/cjs/components/AppSwitcher/TitleWithTooltip.cjs +0 -22
- package/dist/cjs/components/AppSwitcher/TitleWithTooltip.cjs.map +0 -1
- package/dist/esm/components/AppSwitcher/TitleWithTooltip.js +0 -22
- package/dist/esm/components/AppSwitcher/TitleWithTooltip.js.map +0 -1
|
@@ -5,6 +5,7 @@ const React = require("react");
|
|
|
5
5
|
const createCache = require("@emotion/cache");
|
|
6
6
|
const react = require("@emotion/react");
|
|
7
7
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
8
|
+
const document = require("../utils/document.cjs");
|
|
8
9
|
const theme = require("../utils/theme.cjs");
|
|
9
10
|
const useUniqueId = require("../hooks/useUniqueId.cjs");
|
|
10
11
|
const ThemeProvider = require("./ThemeProvider.cjs");
|
|
@@ -29,11 +30,11 @@ const HvProvider = ({
|
|
|
29
30
|
prepend: true
|
|
30
31
|
}), [classNameKey]);
|
|
31
32
|
return /* @__PURE__ */ jsxRuntime.jsxs(react.CacheProvider, { value: emotionCache, children: [
|
|
32
|
-
/* @__PURE__ */ jsxRuntime.jsx(react.Global, { styles: /* @__PURE__ */ react.css(cssBaseline === "global" && uikitStyles.CssBaseline, " ", uikitStyles.getThemesVars(themesList), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:HvProvider;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
33
|
+
/* @__PURE__ */ jsxRuntime.jsx(react.Global, { styles: /* @__PURE__ */ react.css(cssBaseline === "global" && uikitStyles.CssBaseline, " ", uikitStyles.getThemesVars(themesList), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:HvProvider;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL3Byb3ZpZGVycy9Qcm92aWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0h3QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9wcm92aWRlcnMvUHJvdmlkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IHVzZU1lbW8gfSBmcm9tIFwicmVhY3RcIjtcblxuaW1wb3J0IGNyZWF0ZUNhY2hlIGZyb20gXCJAZW1vdGlvbi9jYWNoZVwiO1xuaW1wb3J0IHtcbiAgY3NzIGFzIGNzc1JlYWN0LFxuICBHbG9iYWwsXG4gIENhY2hlUHJvdmlkZXIsXG4gIENsYXNzTmFtZXMsXG59IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuXG5pbXBvcnQge1xuICBDc3NCYXNlbGluZSxcbiAgQ3NzU2NvcGVkQmFzZWxpbmUsXG4gIGdldFRoZW1lc1ZhcnMsXG4gIEh2VGhlbWVTdHJ1Y3R1cmUsXG59IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5cbmltcG9ydCB7IGdldEVsZW1lbnRCeUlkIH0gZnJvbSBcIkBjb3JlL3V0aWxzL2RvY3VtZW50XCI7XG5pbXBvcnQgeyBwcm9jZXNzVGhlbWVzIH0gZnJvbSBcIkBjb3JlL3V0aWxzL3RoZW1lXCI7XG5pbXBvcnQgeyBIdlRoZW1lIH0gZnJvbSBcIkBjb3JlL3R5cGVzL3RoZW1lXCI7XG5pbXBvcnQgeyB1c2VVbmlxdWVJZCB9IGZyb20gXCJAY29yZS9ob29rcy91c2VVbmlxdWVJZFwiO1xuXG5pbXBvcnQge1xuICBIdlRoZW1lUHJvdmlkZXIsXG4gIGRlZmF1bHRDYWNoZUtleSxcbiAgZGVmYXVsdEVtb3Rpb25DYWNoZSxcbn0gZnJvbSBcIi4vVGhlbWVQcm92aWRlclwiO1xuXG4vLyBQcm92aWRlciBwcm9wc1xuZXhwb3J0IGludGVyZmFjZSBIdlByb3ZpZGVyUHJvcHMge1xuICAvKipcbiAgICogWW91ciBjb21wb25lbnQgdHJlZS5cbiAgICovXG4gIGNoaWxkcmVuPzogUmVhY3QuUmVhY3ROb2RlO1xuICAvKipcbiAgICogSWQgb2YgeW91ciByb290IGVsZW1lbnQuXG4gICAqL1xuICByb290RWxlbWVudElkPzogc3RyaW5nO1xuICAvKipcbiAgICogQnkgZGVmYXVsdCB0aGUgYmFzZWxpbmUgc3R5bGVzIGFyZSBhcHBsaWVkIGdsb2JhbGx5LCBgZ2xvYmFsYCwgdG8gdGhlIGFwcGxpY2F0aW9uIGZvciB0aGUgVUkgS2l0IGNvbXBvbmVudHMgdG8gd29yayBwcm9wZXJseS5cbiAgICogSWYgeW91IG5lZWQgdG8gc2NvcGUgdGhlIGJhc2VsaW5lIHN0eWxlcyB0byBhdm9pZCBzdHlsaW5nIGNvbmZsaWN0cywgeW91IGNhbiBzZXQgdGhpcyBwcm9wZXJ0eSB0byBgc2NvcGVkYC5cbiAgICogVG8gc2NvcGUgdGhlIGJhc2VsaW5lIHRvIHlvdXIgcm9vdCwgeW91IG5lZWQgdG8gYWRkIHRoZSBgcm9vdEVsZW1lbnRJZGAgcHJvcGVydHkuXG4gICAqIElmIHRoZSBgcm9vdEVsZW1lbnRJZGAgcHJvcGVydHkgaXMgbm90IHNldCwgdGhlIGJhc2VsaW5lIHdpbGwgYmUgc2NvcGVkIHRvIGEgbmV3IGNvbnRhaW5lciwgYGh2LXVpa2l0LXNjb3BlZC1yb290KmAsIGNyZWF0ZWQgYXJvdW5kIHlvdXIgY29udGVudC5cbiAgICogSWYgeW91IGFyZSBwcm92aWRpbmcgeW91ciBvd24gYmFzZWxpbmUgc3R5bGVzLCB5b3UgY2FuIHNldCB0aGlzIHByb3BlcnR5IHRvIGBub25lYCB0byBkaXNhYmxlIHRoZSBiYXNlbGluZSBzdHlsZXMuXG4gICAqL1xuICBjc3NCYXNlbGluZT86IFwiZ2xvYmFsXCIgfCBcInNjb3BlZFwiIHwgXCJub25lXCI7XG4gIC8qKlxuICAgKiBCeSBkZWZhdWx0IHRoZSB0aGVtZSBzdHlsZXMgYXJlIGFwcGxpZWQgZ2xvYmFsbHksIGBnbG9iYWxgLCB0byB0aGUgYXBwbGljYXRpb24uXG4gICAqIElmIHlvdSBuZWVkIHRvIHNjb3BlIHRoZSB0aGVtZSBzdHlsZXMgdG8gYXZvaWQgc3R5bGluZyBjb25mbGljdHMsIHlvdSBjYW4gc2V0IHRoaXMgcHJvcGVydHkgdG8gYHNjb3BlZGAuXG4gICAqIFRvIHNjb3BlIHRoZSB0aGVtZSB0byB5b3VyIHJvb3QsIHlvdSBuZWVkIHRvIGFkZCB0aGUgYHJvb3RFbGVtZW50SWRgIHByb3BlcnR5LlxuICAgKiBJZiB0aGUgYHJvb3RFbGVtZW50SWRgIHByb3BlcnR5IGlzIG5vdCBzZXQsIHRoZSB0aGVtZSB3aWxsIGJlIHNjb3BlZCB0byBhIG5ldyBjb250YWluZXIsIGBodi11aWtpdC1zY29wZWQtcm9vdCpgLCBjcmVhdGVkIGFyb3VuZCB5b3VyIGNvbnRlbnQuXG4gICAqL1xuICBjc3NUaGVtZT86IFwiZ2xvYmFsXCIgfCBcInNjb3BlZFwiO1xuICAvKipcbiAgICogVGhlIHN0cmluZyB1c2VkIHRvIHByZWZpeCB0aGUgY2xhc3MgbmFtZXMgYW5kIHVuaXF1ZWx5IGlkZW50aWZ5IHRoZW0uIFRoZSBrZXkgY2FuIG9ubHkgY29udGFpbiBsb3dlciBjYXNlIGFscGhhYmV0aWNhbCBjaGFyYWN0ZXJzLlxuICAgKiBUaGlzIGlzIHVzZWZ1bCB0byBhdm9pZCBjbGFzcyBuYW1lIGNvbGxpc2lvbnMuXG4gICAqXG4gICAqIElmIG5vIHZhbHVlIGlzIHByb3ZpZGVkLCB0aGUgZGVmYXVsdCBpcyBgaHZgLlxuICAgKi9cbiAgY2xhc3NOYW1lS2V5Pzogc3RyaW5nO1xuICAvKipcbiAgICogTGlzdCBvZiB0aGVtZXMgdG8gYmUgdXNlZCBieSBVSSBLaXQuXG4gICAqIFlvdSBjYW4gcHJvdmlkZSB5b3VyIG93biB0aGVtZXMgY3JlYXRlZCB3aXRoIHRoZSBgY3JlYXRlVGhlbWVgIHV0aWxpdHkgYW5kL29yIHRoZSBkZWZhdWx0IHRoZW1lcyBgZHMzYCBhbmQgYGRzNWAgcHJvdmlkZWQgYnkgVUkgS2l0LlxuICAgKlxuICAgKiBJZiBubyB2YWx1ZSBpcyBwcm92aWRlZCwgdGhlIGBkczVgIHRoZW1lIHdpbGwgYmUgdXNlZC5cbiAgICovXG4gIHRoZW1lcz86IChIdlRoZW1lIHwgSHZUaGVtZVN0cnVjdHVyZSlbXTtcbiAgLyoqXG4gICAqIFRoZSBhY3RpdmUgdGhlbWUuIEl0IG11c3QgYmUgb25lIG9mIHRoZSB0aGVtZXMgcGFzc2VkIHRvIGB0aGVtZXNgLlxuICAgKlxuICAgKiBJZiBubyB2YWx1ZSBpcyBwcm92aWRlZCwgdGhlIGZpcnN0IHRoZW1lIGZyb20gdGhlIGB0aGVtZXNgIGxpc3QgaXMgdXNlZC4gSWYgbm8gYHRoZW1lc2AgbGlzdCBpcyBwcm92aWRlZCwgdGhlIGBkczVgIHRoZW1lIHdpbGwgYmUgdXNlZC5cbiAgICovXG4gIHRoZW1lPzogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIGFjdGl2ZSBjb2xvciBtb2RlLiBJdCBtdXN0IGJlIG9uZSBvZiB0aGUgY29sb3IgbW9kZXMgb2YgdGhlIGFjdGl2ZSB0aGVtZS5cbiAgICpcbiAgICogSWYgbm8gdmFsdWUgaXMgcHJvdmlkZWQsIHRoZSBmaXJzdCBjb2xvciBtb2RlIGRlZmluZWQgaW4gdGhlIGFjdGl2ZSB0aGVtZSBpcyB1c2VkLlxuICAgKiBGb3IgdGhlIGRlZmF1bHQgdGhlbWVzIGBkczNgIGFuZCBgZHM1YCwgdGhlIGBkYXduYCBjb2xvciBtb2RlIGlzIHRoZSBvbmUgdXNlZC5cbiAgICovXG4gIGNvbG9yTW9kZT86IHN0cmluZztcbn1cblxuY29uc3Qgc2NvcGVkUm9vdFByZWZpeCA9IFwiaHYtdWlraXQtc2NvcGVkLXJvb3RcIiBhcyBjb25zdDtcblxuLyoqXG4gKiBFbmFibGVzIHRoZW1pbmcgY2FwYWJpbGl0aWVzIGFuZCBtYWtlcyBjcm9zcy1jb21wb25lbnQgdGhlbWUgcHJvcGVydGllcyBhdmFpbGFibGUgZG93biB0aGUgdHJlZS5cbiAqL1xuZXhwb3J0IGNvbnN0IEh2UHJvdmlkZXIgPSAoe1xuICBjaGlsZHJlbixcbiAgcm9vdEVsZW1lbnRJZCxcbiAgY3NzQmFzZWxpbmUgPSBcImdsb2JhbFwiLFxuICBjc3NUaGVtZSA9IFwiZ2xvYmFsXCIsXG4gIHRoZW1lcyxcbiAgdGhlbWUsXG4gIGNvbG9yTW9kZSxcbiAgY2xhc3NOYW1lS2V5ID0gZGVmYXVsdENhY2hlS2V5LFxufTogSHZQcm92aWRlclByb3BzKSA9PiB7XG4gIGNvbnN0IHNjb3BlZFJvb3RJZCA9IHVzZVVuaXF1ZUlkKHVuZGVmaW5lZCwgc2NvcGVkUm9vdFByZWZpeCk7XG5cbiAgLy8gVGhlbWVzXG4gIGNvbnN0IHRoZW1lc0xpc3Q6IChIdlRoZW1lIHwgSHZUaGVtZVN0cnVjdHVyZSlbXSA9IHByb2Nlc3NUaGVtZXModGhlbWVzKTtcblxuICAvLyBFbW90aW9uIGNhY2hlXG4gIC8vIE1vdmVzIFVJIEtpdCBzdHlsZXMgdG8gdGhlIHRvcCBvZiB0aGUgPGhlYWQ+IHNvIHRoZXkncmUgbG9hZGVkIGZpcnN0XG4gIC8vIFRoaXMgZW5hYmxlcyB1c2VycyB0byBvdmVycmlkZSB0aGUgVUkgS2l0IHN0eWxlcyBpZiBuZWNlc3NhcnlcbiAgY29uc3QgZW1vdGlvbkNhY2hlID0gdXNlTWVtbyhcbiAgICAoKSA9PlxuICAgICAgY2xhc3NOYW1lS2V5ID09PSBkZWZhdWx0Q2FjaGVLZXlcbiAgICAgICAgPyBkZWZhdWx0RW1vdGlvbkNhY2hlXG4gICAgICAgIDogY3JlYXRlQ2FjaGUoeyBrZXk6IGNsYXNzTmFtZUtleSwgcHJlcGVuZDogdHJ1ZSB9KSxcbiAgICBbY2xhc3NOYW1lS2V5XVxuICApO1xuXG4gIHJldHVybiAoXG4gICAgPENhY2hlUHJvdmlkZXIgdmFsdWU9e2Vtb3Rpb25DYWNoZX0+XG4gICAgICA8R2xvYmFsXG4gICAgICAgIHN0eWxlcz17Y3NzUmVhY3RgXG4gICAgICAgICAgJHtjc3NCYXNlbGluZSA9PT0gXCJnbG9iYWxcIiAmJiBDc3NCYXNlbGluZX1cbiAgICAgICAgICAke2dldFRoZW1lc1ZhcnModGhlbWVzTGlzdCl9XG4gICAgICAgIGB9XG4gICAgICAvPlxuICAgICAgPEh2VGhlbWVQcm92aWRlclxuICAgICAgICB0aGVtZXM9e3RoZW1lc0xpc3R9XG4gICAgICAgIHRoZW1lPXt0aGVtZSB8fCB0aGVtZXNMaXN0WzBdLm5hbWV9XG4gICAgICAgIGVtb3Rpb25DYWNoZT17ZW1vdGlvbkNhY2hlfVxuICAgICAgICBjb2xvck1vZGU9e2NvbG9yTW9kZSB8fCBPYmplY3Qua2V5cyh0aGVtZXNMaXN0WzBdLmNvbG9ycy5tb2RlcylbMF19XG4gICAgICAgIHRoZW1lUm9vdElkPXtcbiAgICAgICAgICBjc3NUaGVtZSA9PT0gXCJzY29wZWRcIiA/IHJvb3RFbGVtZW50SWQgfHwgc2NvcGVkUm9vdElkIDogdW5kZWZpbmVkXG4gICAgICAgIH1cbiAgICAgID5cbiAgICAgICAgPENsYXNzTmFtZXM+XG4gICAgICAgICAgeyh7IGNzcyB9KSA9PiB7XG4gICAgICAgICAgICBpZiAoY3NzQmFzZWxpbmUgPT09IFwic2NvcGVkXCIpIHtcbiAgICAgICAgICAgICAgY29uc3Qgcm9vdEVsZW1lbnQgPSBnZXRFbGVtZW50QnlJZChyb290RWxlbWVudElkKTtcblxuICAgICAgICAgICAgICBpZiAocm9vdEVsZW1lbnQpIHtcbiAgICAgICAgICAgICAgICByb290RWxlbWVudC5jbGFzc0xpc3QuYWRkKFxuICAgICAgICAgICAgICAgICAgY3NzKHtcbiAgICAgICAgICAgICAgICAgICAgLi4uQ3NzU2NvcGVkQmFzZWxpbmUsXG4gICAgICAgICAgICAgICAgICB9KVxuICAgICAgICAgICAgICAgICk7XG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgcmV0dXJuIChjc3NUaGVtZSA9PT0gXCJzY29wZWRcIiB8fCBjc3NCYXNlbGluZSA9PT0gXCJzY29wZWRcIikgJiZcbiAgICAgICAgICAgICAgIXJvb3RFbGVtZW50SWQgPyAoXG4gICAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgICBpZD17c2NvcGVkUm9vdElkfVxuICAgICAgICAgICAgICAgIGNsYXNzTmFtZT17XG4gICAgICAgICAgICAgICAgICBjc3NCYXNlbGluZSA9PT0gXCJzY29wZWRcIlxuICAgICAgICAgICAgICAgICAgICA/IGNzcyh7IC4uLkNzc1Njb3BlZEJhc2VsaW5lIH0pXG4gICAgICAgICAgICAgICAgICAgIDogdW5kZWZpbmVkXG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICkgOiAoXG4gICAgICAgICAgICAgIGNoaWxkcmVuXG4gICAgICAgICAgICApO1xuICAgICAgICAgIH19XG4gICAgICAgIDwvQ2xhc3NOYW1lcz5cbiAgICAgIDwvSHZUaGVtZVByb3ZpZGVyPlxuICAgIDwvQ2FjaGVQcm92aWRlcj5cbiAgKTtcbn07XG4iXX0= */") }),
|
|
33
34
|
/* @__PURE__ */ jsxRuntime.jsx(ThemeProvider.HvThemeProvider, { themes: themesList, theme: theme$1 || themesList[0].name, emotionCache, colorMode: colorMode || Object.keys(themesList[0].colors.modes)[0], themeRootId: cssTheme === "scoped" ? rootElementId || scopedRootId : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, { children: ({
|
|
34
35
|
css
|
|
35
36
|
}) => {
|
|
36
|
-
if (
|
|
37
|
+
if (cssBaseline === "scoped") {
|
|
37
38
|
const rootElement = document.getElementById(rootElementId);
|
|
38
39
|
if (rootElement) {
|
|
39
40
|
rootElement.classList.add(css({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Provider.cjs","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\n\nimport createCache from \"@emotion/cache\";\nimport {\n css as cssReact,\n Global,\n CacheProvider,\n ClassNames,\n} from \"@emotion/react\";\n\nimport {\n CssBaseline,\n CssScopedBaseline,\n getThemesVars,\n HvThemeStructure,\n} from \"@hitachivantara/uikit-styles\";\n\nimport { processThemes } from \"@core/utils/theme\";\nimport { HvTheme } from \"@core/types/theme\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\n\nimport {\n HvThemeProvider,\n defaultCacheKey,\n defaultEmotionCache,\n} from \"./ThemeProvider\";\n\n// Provider props\nexport interface HvProviderProps {\n /**\n * Your component tree.\n */\n children?: React.ReactNode;\n /**\n * Id of your root element.\n */\n rootElementId?: string;\n /**\n * By default the baseline styles are applied globally, `global`, to the application for the UI Kit components to work properly.\n * If you need to scope the baseline styles to avoid styling conflicts, you can set this property to `scoped`.\n * To scope the baseline to your root, you need to add the `rootElementId` property.\n * If the `rootElementId` property is not set, the baseline will be scoped to a new container, `hv-uikit-scoped-root*`, created around your content.\n * If you are providing your own baseline styles, you can set this property to `none` to disable the baseline styles.\n */\n cssBaseline?: \"global\" | \"scoped\" | \"none\";\n /**\n * By default the theme styles are applied globally, `global`, to the application.\n * If you need to scope the theme styles to avoid styling conflicts, you can set this property to `scoped`.\n * To scope the theme to your root, you need to add the `rootElementId` property.\n * If the `rootElementId` property is not set, the theme will be scoped to a new container, `hv-uikit-scoped-root*`, created around your content.\n */\n cssTheme?: \"global\" | \"scoped\";\n /**\n * The string used to prefix the class names and uniquely identify them. The key can only contain lower case alphabetical characters.\n * This is useful to avoid class name collisions.\n *\n * If no value is provided, the default is `hv`.\n */\n classNameKey?: string;\n /**\n * List of themes to be used by UI Kit.\n * You can provide your own themes created with the `createTheme` utility and/or the default themes `ds3` and `ds5` provided by UI Kit.\n *\n * If no value is provided, the `ds5` theme will be used.\n */\n themes?: (HvTheme | HvThemeStructure)[];\n /**\n * The active theme. It must be one of the themes passed to `themes`.\n *\n * If no value is provided, the first theme from the `themes` list is used. If no `themes` list is provided, the `ds5` theme will be used.\n */\n theme?: string;\n /**\n * The active color mode. It must be one of the color modes of the active theme.\n *\n * If no value is provided, the first color mode defined in the active theme is used.\n * For the default themes `ds3` and `ds5`, the `dawn` color mode is the one used.\n */\n colorMode?: string;\n}\n\nconst scopedRootPrefix = \"hv-uikit-scoped-root\" as const;\n\n/**\n * Enables theming capabilities and makes cross-component theme properties available down the tree.\n */\nexport const HvProvider = ({\n children,\n rootElementId,\n cssBaseline = \"global\",\n cssTheme = \"global\",\n themes,\n theme,\n colorMode,\n classNameKey = defaultCacheKey,\n}: HvProviderProps) => {\n const scopedRootId = useUniqueId(undefined, scopedRootPrefix);\n\n // Themes\n const themesList: (HvTheme | HvThemeStructure)[] = processThemes(themes);\n\n // Emotion cache\n // Moves UI Kit styles to the top of the <head> so they're loaded first\n // This enables users to override the UI Kit styles if necessary\n const emotionCache = useMemo(\n () =>\n classNameKey === defaultCacheKey\n ? defaultEmotionCache\n : createCache({ key: classNameKey, prepend: true }),\n [classNameKey]\n );\n\n return (\n <CacheProvider value={emotionCache}>\n <Global\n styles={cssReact`\n ${cssBaseline === \"global\" && CssBaseline}\n ${getThemesVars(themesList)}\n `}\n />\n <HvThemeProvider\n themes={themesList}\n theme={theme || themesList[0].name}\n emotionCache={emotionCache}\n colorMode={colorMode || Object.keys(themesList[0].colors.modes)[0]}\n themeRootId={\n cssTheme === \"scoped\" ? rootElementId || scopedRootId : undefined\n }\n >\n <ClassNames>\n {({ css }) => {\n if (
|
|
1
|
+
{"version":3,"file":"Provider.cjs","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\n\nimport createCache from \"@emotion/cache\";\nimport {\n css as cssReact,\n Global,\n CacheProvider,\n ClassNames,\n} from \"@emotion/react\";\n\nimport {\n CssBaseline,\n CssScopedBaseline,\n getThemesVars,\n HvThemeStructure,\n} from \"@hitachivantara/uikit-styles\";\n\nimport { getElementById } from \"@core/utils/document\";\nimport { processThemes } from \"@core/utils/theme\";\nimport { HvTheme } from \"@core/types/theme\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\n\nimport {\n HvThemeProvider,\n defaultCacheKey,\n defaultEmotionCache,\n} from \"./ThemeProvider\";\n\n// Provider props\nexport interface HvProviderProps {\n /**\n * Your component tree.\n */\n children?: React.ReactNode;\n /**\n * Id of your root element.\n */\n rootElementId?: string;\n /**\n * By default the baseline styles are applied globally, `global`, to the application for the UI Kit components to work properly.\n * If you need to scope the baseline styles to avoid styling conflicts, you can set this property to `scoped`.\n * To scope the baseline to your root, you need to add the `rootElementId` property.\n * If the `rootElementId` property is not set, the baseline will be scoped to a new container, `hv-uikit-scoped-root*`, created around your content.\n * If you are providing your own baseline styles, you can set this property to `none` to disable the baseline styles.\n */\n cssBaseline?: \"global\" | \"scoped\" | \"none\";\n /**\n * By default the theme styles are applied globally, `global`, to the application.\n * If you need to scope the theme styles to avoid styling conflicts, you can set this property to `scoped`.\n * To scope the theme to your root, you need to add the `rootElementId` property.\n * If the `rootElementId` property is not set, the theme will be scoped to a new container, `hv-uikit-scoped-root*`, created around your content.\n */\n cssTheme?: \"global\" | \"scoped\";\n /**\n * The string used to prefix the class names and uniquely identify them. The key can only contain lower case alphabetical characters.\n * This is useful to avoid class name collisions.\n *\n * If no value is provided, the default is `hv`.\n */\n classNameKey?: string;\n /**\n * List of themes to be used by UI Kit.\n * You can provide your own themes created with the `createTheme` utility and/or the default themes `ds3` and `ds5` provided by UI Kit.\n *\n * If no value is provided, the `ds5` theme will be used.\n */\n themes?: (HvTheme | HvThemeStructure)[];\n /**\n * The active theme. It must be one of the themes passed to `themes`.\n *\n * If no value is provided, the first theme from the `themes` list is used. If no `themes` list is provided, the `ds5` theme will be used.\n */\n theme?: string;\n /**\n * The active color mode. It must be one of the color modes of the active theme.\n *\n * If no value is provided, the first color mode defined in the active theme is used.\n * For the default themes `ds3` and `ds5`, the `dawn` color mode is the one used.\n */\n colorMode?: string;\n}\n\nconst scopedRootPrefix = \"hv-uikit-scoped-root\" as const;\n\n/**\n * Enables theming capabilities and makes cross-component theme properties available down the tree.\n */\nexport const HvProvider = ({\n children,\n rootElementId,\n cssBaseline = \"global\",\n cssTheme = \"global\",\n themes,\n theme,\n colorMode,\n classNameKey = defaultCacheKey,\n}: HvProviderProps) => {\n const scopedRootId = useUniqueId(undefined, scopedRootPrefix);\n\n // Themes\n const themesList: (HvTheme | HvThemeStructure)[] = processThemes(themes);\n\n // Emotion cache\n // Moves UI Kit styles to the top of the <head> so they're loaded first\n // This enables users to override the UI Kit styles if necessary\n const emotionCache = useMemo(\n () =>\n classNameKey === defaultCacheKey\n ? defaultEmotionCache\n : createCache({ key: classNameKey, prepend: true }),\n [classNameKey]\n );\n\n return (\n <CacheProvider value={emotionCache}>\n <Global\n styles={cssReact`\n ${cssBaseline === \"global\" && CssBaseline}\n ${getThemesVars(themesList)}\n `}\n />\n <HvThemeProvider\n themes={themesList}\n theme={theme || themesList[0].name}\n emotionCache={emotionCache}\n colorMode={colorMode || Object.keys(themesList[0].colors.modes)[0]}\n themeRootId={\n cssTheme === \"scoped\" ? rootElementId || scopedRootId : undefined\n }\n >\n <ClassNames>\n {({ css }) => {\n if (cssBaseline === \"scoped\") {\n const rootElement = getElementById(rootElementId);\n\n if (rootElement) {\n rootElement.classList.add(\n css({\n ...CssScopedBaseline,\n })\n );\n }\n }\n\n return (cssTheme === \"scoped\" || cssBaseline === \"scoped\") &&\n !rootElementId ? (\n <div\n id={scopedRootId}\n className={\n cssBaseline === \"scoped\"\n ? css({ ...CssScopedBaseline })\n : undefined\n }\n >\n {children}\n </div>\n ) : (\n children\n );\n }}\n </ClassNames>\n </HvThemeProvider>\n </CacheProvider>\n );\n};\n"],"names":["scopedRootPrefix","HvProvider","children","rootElementId","cssBaseline","cssTheme","themes","theme","colorMode","classNameKey","defaultCacheKey","scopedRootId","useUniqueId","undefined","themesList","processThemes","emotionCache","useMemo","defaultEmotionCache","createCache","key","prepend","jsxs","CacheProvider","jsx","Global","CssBaseline","getThemesVars","process","env","NODE_ENV","HvThemeProvider","name","Object","keys","colors","modes","ClassNames","css","rootElement","getElementById","classList","add","CssScopedBaseline"],"mappings":";;;;;;;;;;;;;;AAkFA,MAAMA,mBAAmB;AAKlB,MAAMC,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC;AAAAA,EACAC,cAAc;AAAA,EACdC,WAAW;AAAA,EACXC;AAAAA,EAAAA,OACAC;AAAAA,EACAC;AAAAA,EACAC,eAAeC,iBAAAA;AACA,MAAM;AACfC,QAAAA,eAAeC,YAAYC,YAAAA,QAAWb,gBAAgB;AAGtDc,QAAAA,aAA6CC,oBAAcT,MAAM;AAKvE,QAAMU,eAAeC,MAAAA,QACnB,MACER,iBAAiBC,iBAAAA,kBACbQ,uCACAC,6BAAY;AAAA,IAAEC,KAAKX;AAAAA,IAAcY,SAAS;AAAA,EAAA,CAAM,GACtD,CAACZ,YAAY,CACf;AAGE,SAAAa,2BAAA,KAACC,MAAc,eAAA,EAAA,OAAOP,cACpB,UAAA;AAAA,IAACQ,2BAAAA,IAAAC,MAAA,QAAA,EACC,QACIrB,sBAAAA,IAAAA,gBAAgB,YAAYsB,YAAAA,aAC5BC,KAAAA,YAAAA,cAAcb,UAAU,GAAC,OAAAc,QAAAC,IAAAC,aAAA,eAAA,KAAA,uBAAAF,QAAAC,IAAAC,aAC3B,eAAA,KAAA,yrPAAA,EAAA,CAAA;AAAA,IAEHN,2BAAA,IAAAO,cAAA,iBAAA,EACC,QAAQjB,YACR,OAAOP,WAASO,WAAW,CAAC,EAAEkB,MAC9B,cACA,WAAWxB,aAAayB,OAAOC,KAAKpB,WAAW,CAAC,EAAEqB,OAAOC,KAAK,EAAE,CAAC,GACjE,aACE/B,aAAa,WAAWF,iBAAiBQ,eAAeE,QAG1D,UAAAW,2BAAA,IAACa,oBACE,UAAC,CAAA;AAAA,MAAEC;AAAAA,IAAAA,MAAU;AACZ,UAAIlC,gBAAgB,UAAU;AACtBmC,cAAAA,cAAcC,wBAAerC,aAAa;AAEhD,YAAIoC,aAAa;AACHE,sBAAAA,UAAUC,IACpBJ,IAAI;AAAA,YACF,GAAGK,YAAAA;AAAAA,UACJ,CAAA,CACH;AAAA,QACF;AAAA,MACF;AAEA,cAAQtC,aAAa,YAAYD,gBAAgB,aAC/C,CAACD,gBACAqB,2BAAAA,IAAA,OAAA,EACC,IAAIb,cACJ,WACEP,gBAAgB,WACZkC,IAAI;AAAA,QAAE,GAAGK,YAAAA;AAAAA,MAAmB,CAAA,IAC5B9B,QAGLX,SACH,CAAA,IAEAA;AAAAA,OAGN,EACF,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"classes.cjs","sources":["../../../src/utils/classes.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/
|
|
1
|
+
{"version":3,"file":"classes.cjs","sources":["../../../src/utils/classes.ts"],"sourcesContent":["import type { CSSInterpolation } from \"@emotion/serialize\";\n\nimport { useCss } from \"@core/hooks/useCss\";\n\nexport type ExtractNames<\n T extends (...args: any) => { classes: Record<string, any>; cx: any }\n> = Partial<ReturnType<T>[\"classes\"]>;\n\nexport const getClasses = <T extends string, N extends string>(\n keys: T[],\n name: N\n) => {\n const classesObj: Record<string, string> = {};\n keys.forEach((key: string) => {\n classesObj[key] = `${name}-${key}`;\n });\n return classesObj as { [P in T]: `${N}-${P}` };\n};\n\nconst deepRenameKeys = <T extends object>(\n obj: T,\n mapFn: (key: string) => string\n): T => {\n const result: any = {};\n for (const key in obj) {\n if (Object.prototype.hasOwnProperty.call(obj, key)) {\n const newKey = mapFn(key);\n const value = obj[key];\n result[newKey] =\n typeof value === \"object\" ? deepRenameKeys(value as any, mapFn) : value;\n }\n }\n return result;\n};\n\n/** Given a `stylesObj`, replaces its keys' `$myClass` with `.{name}-myClass`. */\nexport const replace$ = <T extends object>(stylesObj: T, name: string): T => {\n return deepRenameKeys(stylesObj, (key) => {\n const matches = key.match(/\\$\\w+/g);\n if (!matches?.length) return key;\n const newKey = matches.reduce(\n (acc, match) => acc.replace(match, `.${name}-${match.slice(1)}`),\n key\n );\n return newKey ?? key;\n });\n};\n\n/** Utility function to create classes for a component. */\nexport function createClasses<Name extends string, ClassName extends string>(\n /** Component name in PascalCase (ie. `HvTableCell`). */\n name: Name,\n stylesObject: Record<ClassName, CSSInterpolation>\n) {\n const styles = replace$(stylesObject, name);\n\n const staticClasses = getClasses(Object.keys(styles) as ClassName[], name);\n\n /**\n * Hook that takes in a component's `classesProp` overrides, and returns the\n * concatenated static/internal/override `classes`, and the cached `cx` and `css` utilities.\n */\n function useClasses(\n classesProp: Partial<Record<ClassName, string>> = {},\n /** Whether to add the static classes. Disable when included by `classesProp` */\n addStatic = true\n ) {\n const { cx, css } = useCss();\n\n const mergeClasses = (key: string) =>\n cx(addStatic && `${name}-${key}`, css(styles[key]), classesProp?.[key]);\n\n const classes = Object.fromEntries(\n Object.keys(styles).map((key) => [key, mergeClasses(key)])\n ) as { [P in ClassName]: string };\n\n return { classes, css, cx };\n }\n\n return { useClasses, staticClasses };\n}\n"],"names":["getClasses","keys","name","classesObj","forEach","key","deepRenameKeys","obj","mapFn","result","Object","prototype","hasOwnProperty","call","newKey","value","replace$","stylesObj","matches","match","length","reduce","acc","replace","slice","createClasses","stylesObject","styles","staticClasses","useClasses","classesProp","addStatic","cx","css","useCss","mergeClasses","classes","fromEntries","map"],"mappings":";;;AAQaA,MAAAA,aAAa,CACxBC,MACAC,SACG;AACH,QAAMC,aAAqC,CAAA;AACtCC,OAAAA,QAAQ,CAACC,QAAgB;AAC5BF,eAAWE,GAAG,IAAK,GAAEH,IAAK,IAAGG,GAAI;AAAA,EAAA,CAClC;AACMF,SAAAA;AACT;AAEA,MAAMG,iBAAiB,CACrBC,KACAC,UACM;AACN,QAAMC,SAAc,CAAA;AACpB,aAAWJ,OAAOE,KAAK;AACrB,QAAIG,OAAOC,UAAUC,eAAeC,KAAKN,KAAKF,GAAG,GAAG;AAC5CS,YAAAA,SAASN,MAAMH,GAAG;AAClBU,YAAAA,QAAQR,IAAIF,GAAG;AACdS,aAAAA,MAAM,IACX,OAAOC,UAAU,WAAWT,eAAeS,OAAcP,KAAK,IAAIO;AAAAA,IACtE;AAAA,EACF;AACON,SAAAA;AACT;AAGaO,MAAAA,WAAW,CAAmBC,WAAcf,SAAoB;AACpEI,SAAAA,eAAeW,WAAYZ,CAAQ,QAAA;AAClCa,UAAAA,UAAUb,IAAIc,MAAM,QAAQ;AAClC,QAAI,CAACD,SAASE;AAAef,aAAAA;AAC7B,UAAMS,SAASI,QAAQG,OACrB,CAACC,KAAKH,UAAUG,IAAIC,QAAQJ,OAAQ,IAAGjB,IAAK,IAAGiB,MAAMK,MAAM,CAAC,CAAE,EAAC,GAC/DnB,GACF;AACA,WAAOS,UAAUT;AAAAA,EAAAA,CAClB;AACH;AAGgBoB,SAAAA,cAEdvB,MACAwB,cACA;AACMC,QAAAA,SAASX,SAASU,cAAcxB,IAAI;AAE1C,QAAM0B,gBAAgB5B,WAAWU,OAAOT,KAAK0B,MAAM,GAAkBzB,IAAI;AAMzE,WAAS2B,WACPC,cAAkD,IAElDC,YAAY,MACZ;AACM,UAAA;AAAA,MAAEC;AAAAA,MAAIC;AAAAA,QAAQC,OAAO,OAAA;AAE3B,UAAMC,eAAeA,CAAC9B,QACpB2B,GAAGD,aAAc,GAAE7B,IAAK,IAAGG,GAAI,IAAG4B,IAAIN,OAAOtB,GAAG,CAAC,GAAGyB,cAAczB,GAAG,CAAC;AAExE,UAAM+B,UAAU1B,OAAO2B,YACrB3B,OAAOT,KAAK0B,MAAM,EAAEW,IAAKjC,CAAAA,QAAQ,CAACA,KAAK8B,aAAa9B,GAAG,CAAC,CAAC,CAC3D;AAEO,WAAA;AAAA,MAAE+B;AAAAA,MAASH;AAAAA,MAAKD;AAAAA,IAAAA;AAAAA,EACzB;AAEO,SAAA;AAAA,IAAEH;AAAAA,IAAYD;AAAAA,EAAAA;AACvB;;;;"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
function getDocument() {
|
|
4
|
+
return typeof window !== "undefined" ? document : void 0;
|
|
5
|
+
}
|
|
6
|
+
function getElementById(elementId) {
|
|
7
|
+
return elementId && getDocument()?.getElementById(elementId) || void 0;
|
|
8
|
+
}
|
|
9
|
+
exports.getDocument = getDocument;
|
|
10
|
+
exports.getElementById = getElementById;
|
|
11
|
+
//# sourceMappingURL=document.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"document.cjs","sources":["../../../src/utils/document.ts"],"sourcesContent":["export function getDocument() {\n return typeof window !== \"undefined\" ? document : undefined;\n}\n\n/** Wrapper around `document.getElementById` */\nexport function getElementById(elementId?: string) {\n return (elementId && getDocument()?.getElementById(elementId)) || undefined;\n}\n\n/** Get a container element by id, falling back to document-body */\nexport function getContainerElement(elementId?: string) {\n return getElementById(elementId) || getDocument()?.body;\n}\n"],"names":["getDocument","window","document","undefined","getElementById","elementId"],"mappings":";;AAAO,SAASA,cAAc;AACrB,SAAA,OAAOC,WAAW,cAAcC,WAAWC;AACpD;AAGO,SAASC,eAAeC,WAAoB;AACjD,SAAQA,aAAaL,YAAeI,GAAAA,eAAeC,SAAS,KAAMF;AACpE;;;"}
|
package/dist/cjs/utils/theme.cjs
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
4
|
+
const document$1 = require("./document.cjs");
|
|
4
5
|
const setElementStyle = (element, style) => {
|
|
5
6
|
Object.entries(style).forEach(([property, value]) => {
|
|
6
7
|
element.style[property] = value;
|
|
@@ -90,13 +91,10 @@ const processThemes = (themesList) => {
|
|
|
90
91
|
return [uikitStyles.themes.ds5];
|
|
91
92
|
};
|
|
92
93
|
const getVarValue = (cssVar, rootElementId) => {
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
return computedValue;
|
|
98
|
-
}
|
|
99
|
-
}
|
|
94
|
+
const root = document$1.getElementById(rootElementId || "hv-root");
|
|
95
|
+
if (!root)
|
|
96
|
+
return void 0;
|
|
97
|
+
return getComputedStyle(root).getPropertyValue(cssVar.replace("var(", "").replace(")", "")).trim();
|
|
100
98
|
};
|
|
101
99
|
exports.createTheme = createTheme;
|
|
102
100
|
exports.getVarValue = getVarValue;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.cjs","sources":["../../../src/utils/theme.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"theme.cjs","sources":["../../../src/utils/theme.ts"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport {\n themes,\n HvThemeColorModeStructure,\n HvThemeStructure,\n theme,\n} from \"@hitachivantara/uikit-styles\";\n\nimport { HvTheme, HvCreateThemeProps } from \"@core/types/theme\";\n\nimport { getElementById } from \"./document\";\n\n/**\n * Sets the element style properties.\n */\nconst setElementStyle = (element: HTMLElement, style: CSSProperties) => {\n Object.entries(style).forEach(([property, value]) => {\n element.style[property] = value;\n });\n};\n\n/**\n * Sets the element attributes and style for a theme and color mode.\n */\nexport const setElementAttrs = (\n themeName: string,\n modeName: string,\n colorScheme: string,\n themeRootId?: string\n) => {\n const element = themeRootId\n ? document.getElementById(themeRootId)\n : document.body;\n\n if (element) {\n element.setAttribute(`data-theme`, themeName);\n element.setAttribute(`data-color-mode`, modeName);\n\n // Set default properties for all components to inherit\n setElementStyle(element, {\n colorScheme,\n backgroundColor: theme.colors.backgroundColor,\n accentColor: theme.colors.secondary,\n color: theme.colors.secondary,\n fontSize: theme.typography.body.fontSize,\n fontWeight: theme.typography.body.fontWeight,\n lineHeight: theme.typography.body.lineHeight,\n letterSpacing: theme.typography.body.letterSpacing,\n fontFamily: theme.fontFamily.body,\n });\n }\n};\n\n/**\n * Applies customizations to a theme.\n */\nconst applyThemeCustomizations = (obj: object, customizations: object) => {\n const isObject = (val: any) =>\n val && typeof val === \"object\" && !Array.isArray(val);\n\n // Customized theme\n const customizedTheme = { ...obj };\n\n // Add new values to the theme or replace values\n Object.keys(customizations).forEach((key) => {\n if (customizedTheme[key]) {\n if (isObject(customizedTheme[key]) && isObject(customizations[key])) {\n customizedTheme[key] = applyThemeCustomizations(\n customizedTheme[key],\n customizations[key]\n );\n } else if (typeof customizedTheme[key] === typeof customizations[key]) {\n customizedTheme[key] = customizations[key];\n }\n } else {\n customizedTheme[key] = customizations[key];\n }\n });\n\n return customizedTheme;\n};\n\n/**\n * Creates a customized theme based on the base theme and customizations given.\n * For the color modes, the colors that are not defined will be replaced by the values from the dawn mode of the base theme.\n */\nexport const createTheme = (\n props: HvCreateThemeProps\n): HvTheme | HvThemeStructure => {\n const {\n name,\n base = \"ds5\",\n inheritColorModes = true,\n ...customizations\n } = props;\n\n // Apply customizations to the base theme\n const customizedTheme: HvTheme | HvThemeStructure = customizations\n ? (applyThemeCustomizations(themes[base], customizations) as HvTheme)\n : { ...themes[base] };\n\n // Set theme name\n customizedTheme.name = name.trim();\n // Set theme base\n customizedTheme.base = base;\n\n // Fill new color modes with missing colors\n if (customizations) {\n Object.keys(customizedTheme.colors.modes).forEach((mode) => {\n if (!themes[base].colors.modes[mode]) {\n customizedTheme.colors.modes[mode] = {\n ...themes[base].colors.modes.dawn,\n ...(customizedTheme.colors.modes[mode] as Partial<\n HvThemeColorModeStructure & { [key: string]: string }\n >),\n };\n }\n });\n }\n\n // If the flag `inheritColorModes` is false and customizations were given for the color modes,\n // we're removing any color modes that might have been inherited\n if (!inheritColorModes && customizations.colors?.modes) {\n Object.keys(customizedTheme.colors.modes).forEach((mode) => {\n if (!Object.keys(customizations.colors?.modes || {}).includes(mode)) {\n delete customizedTheme.colors.modes[mode];\n }\n });\n }\n\n // Created theme\n return customizedTheme;\n};\n\n/**\n * Process the themes provided to the HvProvider:\n * - Cleans themes with the same name\n * - Returns the default if the list is empty (ds5)\n */\nexport const processThemes = (\n themesList?: (HvTheme | HvThemeStructure)[]\n): (HvTheme | HvThemeStructure)[] => {\n if (themesList && Array.isArray(themesList) && themesList.length > 0) {\n const list: (HvTheme | HvThemeStructure)[] = [];\n\n themesList.forEach((thm) => {\n const i: number = list.findIndex(\n (t) => t.name.trim() === thm.name.trim()\n );\n\n if (i !== -1) {\n list.splice(i, 1);\n list.push(thm);\n } else {\n list.push(thm);\n }\n });\n\n // Cleaned themes\n return list;\n }\n // DS5\n return [themes.ds5];\n};\n\nexport const getVarValue = (cssVar: string, rootElementId?: string) => {\n const root = getElementById(rootElementId || \"hv-root\");\n if (!root) return undefined;\n\n return getComputedStyle(root)\n .getPropertyValue(cssVar.replace(\"var(\", \"\").replace(\")\", \"\"))\n .trim();\n};\n"],"names":["setElementStyle","element","style","entries","forEach","property","value","setElementAttrs","themeName","modeName","colorScheme","themeRootId","document","getElementById","body","setAttribute","backgroundColor","theme","colors","accentColor","secondary","color","fontSize","typography","fontWeight","lineHeight","letterSpacing","fontFamily","applyThemeCustomizations","obj","customizations","isObject","val","Array","isArray","customizedTheme","Object","keys","key","createTheme","props","name","base","inheritColorModes","themes","trim","modes","mode","dawn","includes","processThemes","themesList","length","list","thm","i","findIndex","t","splice","push","ds5","getVarValue","cssVar","rootElementId","root","undefined","getComputedStyle","getPropertyValue","replace"],"mappings":"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"}
|
|
@@ -3,9 +3,9 @@ import { useState, useCallback } from "react";
|
|
|
3
3
|
import { theme, getColor } from "@hitachivantara/uikit-styles";
|
|
4
4
|
import { Info } from "@hitachivantara/uikit-react-icons";
|
|
5
5
|
import { useUniqueId } from "../../../hooks/useUniqueId.js";
|
|
6
|
-
import TitleWithTooltip from "../TitleWithTooltip.js";
|
|
7
6
|
import { useClasses } from "./Action.styles.js";
|
|
8
7
|
import { staticClasses } from "./Action.styles.js";
|
|
8
|
+
import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
|
|
9
9
|
import { HvAvatar } from "../../Avatar/Avatar.js";
|
|
10
10
|
import { HvTypography } from "../../Typography/Typography.js";
|
|
11
11
|
import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
|
|
@@ -82,7 +82,9 @@ const HvAppSwitcherAction = ({
|
|
|
82
82
|
[classes.selected]: isSelected
|
|
83
83
|
}, className), children: renderApplication(/* @__PURE__ */ jsxs(Fragment, { children: [
|
|
84
84
|
/* @__PURE__ */ jsx("div", { className: classes.icon, children: renderApplicationIcon() }),
|
|
85
|
-
/* @__PURE__ */ jsx(
|
|
85
|
+
/* @__PURE__ */ jsx(HvOverflowTooltip, { paragraphOverflow: true, className: classes.title, placement: "top-start", data: name, classes: {
|
|
86
|
+
tooltipAnchorParagraph: classes.titleAnchor
|
|
87
|
+
} }),
|
|
86
88
|
description && /* @__PURE__ */ jsx(HvTooltip, { disableFocusListener: true, disableTouchListener: true, title: /* @__PURE__ */ jsx(HvTypography, { children: description }), children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Info, { className: classes.iconInfo, role: "img", "aria-label": description, id: descriptionElementId }) }) })
|
|
87
89
|
] })) });
|
|
88
90
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Action.js","sources":["../../../../../src/components/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport { theme, getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvAvatar } from \"@core/components/Avatar\";\nimport { HvListItem } from \"@core/components/ListContainer\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport
|
|
1
|
+
{"version":3,"file":"Action.js","sources":["../../../../../src/components/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport { theme, getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvAvatar } from \"@core/components/Avatar\";\nimport { HvListItem } from \"@core/components/ListContainer\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvOverflowTooltip } from \"@core/components/OverflowTooltip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses, staticClasses } from \"./Action.styles\";\n\nexport { staticClasses as appSwitcherActionClasses };\n\nexport type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherActionApplication {\n /** Id of the application. */\n id?: string;\n /** Name of the application, this is the value that will be displayed on the component. */\n name: string;\n /** URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. */\n iconUrl?: string;\n /** Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. */\n iconElement?: React.ReactElement;\n /** Small description of the application. */\n description?: string;\n /** URL where the application is accessible. */\n url?: string;\n /** Defines if the application should be opened in the same tab or in a new one. */\n target?: \"_top\" | \"_blank\";\n /** If true, the item will be disabled. */\n disabled?: boolean;\n /** True when the application is selected, false otherwise. */\n isSelected?: boolean;\n /** The color of the application. */\n color?: HvColorAny;\n}\n\nexport interface HvAppSwitcherActionProps extends HvBaseProps {\n /** The application data to be used to render the Action object. */\n application: HvAppSwitcherActionApplication;\n /** Callback triggered when the action is clicked. */\n onClickCallback?: (\n event: React.MouseEvent,\n application: HvAppSwitcherActionApplication\n ) => void;\n /** Must return a boolean stating if the action element is selected or not. */\n isSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvAppSwitcherActionClasses;\n}\n\nexport const HvAppSwitcherAction = ({\n id,\n className,\n classes: classesProp,\n application,\n onClickCallback = () => {},\n isSelectedCallback = () => false,\n}: HvAppSwitcherActionProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const { name, description, disabled, iconElement, iconUrl, url, target } =\n application;\n\n const color = disabled\n ? theme.colors.secondary_60\n : getColor(application?.color, theme.colors.secondary);\n\n const [validIconUrl, setValidIconUrl] = useState<boolean>(true);\n\n const renderApplicationIcon = () => {\n if (iconElement) {\n return iconElement;\n }\n\n if (iconUrl && validIconUrl) {\n return (\n <img\n className={classes.iconUrl}\n src={iconUrl}\n onError={() => {\n setValidIconUrl(false);\n }}\n alt={description}\n />\n );\n }\n\n const brokenTitle = name.split(\" \");\n const initials =\n brokenTitle[0].substring(0, 1) +\n (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : \"\");\n\n return (\n <HvAvatar size=\"sm\" backgroundColor={color} variant=\"square\" aria-hidden>\n {initials}\n </HvAvatar>\n );\n };\n\n const isSelected = isSelectedCallback(application);\n\n /**\n * Handles the onClick event and triggers the appropriate callback if it exists.\n */\n const handleOnClick = useCallback(\n (event: React.MouseEvent) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n onClickCallback?.(event, { ...application, isSelected });\n },\n [application, disabled, isSelected, onClickCallback]\n );\n\n const isLink = url != null;\n const descriptionElementId = useUniqueId(id, \"hvAction-description\");\n\n const renderApplication = useCallback(\n (children: React.ReactNode) => {\n const typographyProps = {\n className: classes.typography,\n onClick: handleOnClick,\n style: { borderColor: color },\n \"aria-label\": name,\n ...(description && { \"aria-describedby\": descriptionElementId }),\n };\n\n if (isLink) {\n return (\n <HvTypography\n component=\"a\"\n href={url}\n target={target || \"_top\"}\n {...typographyProps}\n >\n {children}\n </HvTypography>\n );\n }\n\n return (\n <HvTypography component=\"button\" {...typographyProps}>\n {children}\n </HvTypography>\n );\n },\n [\n classes.typography,\n color,\n description,\n descriptionElementId,\n handleOnClick,\n isLink,\n name,\n target,\n url,\n ]\n );\n\n return (\n <HvListItem\n id={id}\n interactive\n tabIndex={0}\n selected={isSelected}\n disabled={disabled}\n className={cx(\n classes.root,\n { [classes.disabled]: disabled, [classes.selected]: isSelected },\n className\n )}\n >\n {/* As HvTooltip don't have the id prop, is not possible to use the aria-labelledby to reference it.\n In substitution is used the aria-label with the \"title\" value */}\n {renderApplication(\n <>\n <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n <HvOverflowTooltip\n paragraphOverflow\n className={classes.title}\n placement=\"top-start\"\n data={name}\n classes={{\n tooltipAnchorParagraph: classes.titleAnchor,\n }}\n />\n\n {description && (\n <HvTooltip\n disableFocusListener\n disableTouchListener\n title={<HvTypography>{description}</HvTypography>}\n >\n <div>\n <Info\n className={classes.iconInfo}\n role=\"img\"\n aria-label={description}\n id={descriptionElementId}\n />\n </div>\n </HvTooltip>\n )}\n </>\n )}\n </HvListItem>\n );\n};\n"],"names":["HvAppSwitcherAction","id","className","classes","classesProp","application","onClickCallback","isSelectedCallback","cx","useClasses","name","description","disabled","iconElement","iconUrl","url","target","color","theme","colors","secondary_60","getColor","secondary","validIconUrl","setValidIconUrl","useState","renderApplicationIcon","brokenTitle","split","initials","substring","isSelected","handleOnClick","useCallback","event","preventDefault","isLink","descriptionElementId","useUniqueId","renderApplication","children","typographyProps","typography","onClick","style","borderColor","root","selected","icon","title","tooltipAnchorParagraph","titleAnchor","iconInfo"],"mappings":"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"}
|
|
@@ -42,16 +42,14 @@ const {
|
|
|
42
42
|
},
|
|
43
43
|
title: {
|
|
44
44
|
flexGrow: 1,
|
|
45
|
-
margin: `0 ${theme.space.xs}`,
|
|
46
|
-
textAlign: "left",
|
|
47
|
-
overflow: "hidden",
|
|
48
45
|
whiteSpace: "normal",
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
"-webkit-line-clamp": "2",
|
|
52
|
-
"-webkit-box-orient": "vertical",
|
|
46
|
+
textAlign: "left",
|
|
47
|
+
margin: `0 ${theme.space.xs}`,
|
|
53
48
|
textWrap: "balance",
|
|
54
|
-
|
|
49
|
+
...theme.typography.label
|
|
50
|
+
},
|
|
51
|
+
titleAnchor: {
|
|
52
|
+
WebkitLineClamp: 2
|
|
55
53
|
}
|
|
56
54
|
});
|
|
57
55
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Action.styles.js","sources":["../../../../../src/components/AppSwitcher/Action/Action.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvAppSwitcher-Action\",\n {\n root: {\n width: \"100%\",\n maxWidth: 280,\n minHeight: 52,\n marginRight: theme.space.sm,\n },\n icon: { display: \"flex\", minWidth: 40, justifyContent: \"center\" },\n iconUrl: { width: 32 },\n iconInfo: { minWidth: 32 },\n disabled: {},\n selected: {},\n typography: {\n display: \"flex\",\n justifyContent: \"flex-start\",\n alignItems: \"center\",\n\n width: \"100%\",\n minHeight: 52,\n\n padding: `6px ${theme.space.xs}`,\n\n border: \"none\",\n borderLeft: `solid 2px ${theme.colors.secondary}`,\n\n cursor: \"pointer\",\n\n textDecoration: \"inherit\",\n color: \"inherit\",\n backgroundColor: \"inherit\",\n\n \"$disabled &\": {\n cursor: \"not-allowed\",\n },\n },\n title: {\n flexGrow: 1,\n
|
|
1
|
+
{"version":3,"file":"Action.styles.js","sources":["../../../../../src/components/AppSwitcher/Action/Action.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvAppSwitcher-Action\",\n {\n root: {\n width: \"100%\",\n maxWidth: 280,\n minHeight: 52,\n marginRight: theme.space.sm,\n },\n icon: { display: \"flex\", minWidth: 40, justifyContent: \"center\" },\n iconUrl: { width: 32 },\n iconInfo: { minWidth: 32 },\n disabled: {},\n selected: {},\n typography: {\n display: \"flex\",\n justifyContent: \"flex-start\",\n alignItems: \"center\",\n\n width: \"100%\",\n minHeight: 52,\n\n padding: `6px ${theme.space.xs}`,\n\n border: \"none\",\n borderLeft: `solid 2px ${theme.colors.secondary}`,\n\n cursor: \"pointer\",\n\n textDecoration: \"inherit\",\n color: \"inherit\",\n backgroundColor: \"inherit\",\n\n \"$disabled &\": {\n cursor: \"not-allowed\",\n },\n },\n title: {\n flexGrow: 1,\n whiteSpace: \"normal\",\n textAlign: \"left\",\n margin: `0 ${theme.space.xs}`,\n textWrap: \"balance\",\n ...theme.typography.label,\n },\n titleAnchor: {\n WebkitLineClamp: 2,\n },\n }\n);\n"],"names":["staticClasses","useClasses","createClasses","root","width","maxWidth","minHeight","marginRight","theme","space","sm","icon","display","minWidth","justifyContent","iconUrl","iconInfo","disabled","selected","typography","alignItems","padding","xs","border","borderLeft","colors","secondary","cursor","textDecoration","color","backgroundColor","title","flexGrow","whiteSpace","textAlign","margin","textWrap","label","titleAnchor","WebkitLineClamp"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAC3C,wBACA;AAAA,EACEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,aAAaC,MAAMC,MAAMC;AAAAA,EAC3B;AAAA,EACAC,MAAM;AAAA,IAAEC,SAAS;AAAA,IAAQC,UAAU;AAAA,IAAIC,gBAAgB;AAAA,EAAS;AAAA,EAChEC,SAAS;AAAA,IAAEX,OAAO;AAAA,EAAG;AAAA,EACrBY,UAAU;AAAA,IAAEH,UAAU;AAAA,EAAG;AAAA,EACzBI,UAAU,CAAC;AAAA,EACXC,UAAU,CAAC;AAAA,EACXC,YAAY;AAAA,IACVP,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBM,YAAY;AAAA,IAEZhB,OAAO;AAAA,IACPE,WAAW;AAAA,IAEXe,SAAU,OAAMb,MAAMC,MAAMa,EAAG;AAAA,IAE/BC,QAAQ;AAAA,IACRC,YAAa,aAAYhB,MAAMiB,OAAOC,SAAU;AAAA,IAEhDC,QAAQ;AAAA,IAERC,gBAAgB;AAAA,IAChBC,OAAO;AAAA,IACPC,iBAAiB;AAAA,IAEjB,eAAe;AAAA,MACbH,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAI,OAAO;AAAA,IACLC,UAAU;AAAA,IACVC,YAAY;AAAA,IACZC,WAAW;AAAA,IACXC,QAAS,KAAI3B,MAAMC,MAAMa,EAAG;AAAA,IAC5Bc,UAAU;AAAA,IACV,GAAG5B,MAAMW,WAAWkB;AAAAA,EACtB;AAAA,EACAC,aAAa;AAAA,IACXC,iBAAiB;AAAA,EACnB;AACF,CACF;"}
|
|
@@ -3,9 +3,9 @@ import { useMemo } from "react";
|
|
|
3
3
|
import { useDefaultProps } from "../../hooks/useDefaultProps.js";
|
|
4
4
|
import { useClasses } from "./AppSwitcher.styles.js";
|
|
5
5
|
import { staticClasses } from "./AppSwitcher.styles.js";
|
|
6
|
-
import TitleWithTooltip from "./TitleWithTooltip.js";
|
|
7
6
|
import { HvAppSwitcherAction } from "./Action/Action.js";
|
|
8
7
|
import { HvTypography } from "../Typography/Typography.js";
|
|
8
|
+
import { HvOverflowTooltip } from "../OverflowTooltip/OverflowTooltip.js";
|
|
9
9
|
import { HvListContainer } from "../ListContainer/ListContainer.js";
|
|
10
10
|
const HvAppSwitcher = (props) => {
|
|
11
11
|
const {
|
|
@@ -44,7 +44,9 @@ const HvAppSwitcher = (props) => {
|
|
|
44
44
|
[classes.open]: !!isOpen,
|
|
45
45
|
[classes.closed]: isOpen === false
|
|
46
46
|
}, className), children: [
|
|
47
|
-
header && /* @__PURE__ */ jsx(HvTypography, { component: "div", variant: "label", className: classes.title, children: header }) || title && /* @__PURE__ */ jsx(
|
|
47
|
+
header && /* @__PURE__ */ jsx(HvTypography, { component: "div", variant: "label", className: classes.title, children: header }) || title && /* @__PURE__ */ jsx(HvOverflowTooltip, { className: classes.title, data: title, placement: "top-start", classes: {
|
|
48
|
+
tooltipAnchorParagraph: classes.titleAnchor
|
|
49
|
+
} }),
|
|
48
50
|
/* @__PURE__ */ jsx(HvListContainer, { disableGutters: true, className: classes.actionsContainer, children: panelActions }),
|
|
49
51
|
footer && /* @__PURE__ */ jsx(HvTypography, { component: "div", variant: "label", className: classes.footerContainer, children: footer })
|
|
50
52
|
] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppSwitcher.js","sources":["../../../../src/components/AppSwitcher/AppSwitcher.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvListContainer } from \"@core/components/ListContainer\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { HvAppSwitcherAction, HvAppSwitcherActionApplication } from \"./Action\";\nimport { useClasses, staticClasses } from \"./AppSwitcher.styles\";\
|
|
1
|
+
{"version":3,"file":"AppSwitcher.js","sources":["../../../../src/components/AppSwitcher/AppSwitcher.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvListContainer } from \"@core/components/ListContainer\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvOverflowTooltip } from \"@core/components/OverflowTooltip\";\n\nimport { HvAppSwitcherAction, HvAppSwitcherActionApplication } from \"./Action\";\nimport { useClasses, staticClasses } from \"./AppSwitcher.styles\";\n\nexport { staticClasses as appSwitcherClasses };\n\nexport type HvAppSwitcherClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherProps extends HvBaseProps {\n /** Number of columns to render. One, two, or whatever fits the component's width. */\n layout?: \"single\" | \"dual\" | \"fluid\";\n /** Title to be displayed on the header of the component. */\n title?: string;\n /** The list of applications to be used to render the actions on the component. */\n applications?: HvAppSwitcherActionApplication[];\n /** Triggered when an action is clicked. */\n onActionClickedCallback?: (\n event: React.MouseEvent,\n application: HvAppSwitcherActionApplication\n ) => void;\n /** Must return a boolean stating if the action element is selected or not. */\n isActionSelectedCallback?: (\n application: HvAppSwitcherActionApplication\n ) => boolean;\n /** Element to be added to the header container, if none is provided a label with the title will be added. */\n header?: React.ReactNode;\n /** Element to be added to the footer container. */\n footer?: React.ReactNode;\n /**\n * Flag stating if the panel is opened or closed.\n *\n * @deprecated This logic should be external, i.e. using the HvAppSwitcher inside a Drawer component.\n */\n isOpen?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvAppSwitcherClasses;\n}\n\nexport const HvAppSwitcher = (props: HvAppSwitcherProps) => {\n const {\n id,\n className,\n classes: classesProp,\n layout = \"single\",\n title,\n applications,\n onActionClickedCallback = () => {},\n isActionSelectedCallback = () => false,\n header,\n footer,\n isOpen,\n } = useDefaultProps(\"HvAppSwitcher\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const panelActions = useMemo(\n () =>\n applications &&\n applications?.map((application) => {\n if (application.name) {\n return (\n <HvAppSwitcherAction\n key={application.id || `${application.name}_${application.url}`}\n application={application}\n onClickCallback={onActionClickedCallback}\n isSelectedCallback={isActionSelectedCallback}\n classes={{\n root: classes.item,\n selected: classes.itemSelected,\n disabled: classes.itemDisabled,\n typography: classes.itemTrigger,\n icon: classes.itemIcon,\n title: classes.itemTitle,\n iconInfo: classes.itemInfoIcon,\n }}\n />\n );\n }\n\n return undefined;\n }),\n [applications, classes, isActionSelectedCallback, onActionClickedCallback]\n );\n\n return (\n <div\n id={id}\n className={cx(\n classes.root,\n classes[layout],\n { [classes.open]: !!isOpen, [classes.closed]: isOpen === false },\n className\n )}\n >\n {(header && (\n <HvTypography component=\"div\" variant=\"label\" className={classes.title}>\n {header}\n </HvTypography>\n )) ||\n (title && (\n <HvOverflowTooltip\n className={classes.title}\n data={title}\n placement=\"top-start\"\n classes={{\n tooltipAnchorParagraph: classes.titleAnchor,\n }}\n />\n ))}\n <HvListContainer disableGutters className={classes.actionsContainer}>\n {panelActions}\n </HvListContainer>\n {footer && (\n <HvTypography\n component=\"div\"\n variant=\"label\"\n className={classes.footerContainer}\n >\n {footer}\n </HvTypography>\n )}\n </div>\n );\n};\n"],"names":["HvAppSwitcher","props","id","className","classes","classesProp","layout","title","applications","onActionClickedCallback","isActionSelectedCallback","header","footer","isOpen","useDefaultProps","cx","useClasses","panelActions","useMemo","map","application","name","root","item","selected","itemSelected","disabled","itemDisabled","typography","itemTrigger","icon","itemIcon","itemTitle","iconInfo","itemInfoIcon","url","undefined","open","closed","tooltipAnchorParagraph","titleAnchor","actionsContainer","footerContainer"],"mappings":";;;;;;;;;AA8CaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC,SAAS;AAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,0BAA0BA,MAAM;AAAA,IAAC;AAAA,IACjCC,2BAA2BA,MAAM;AAAA,IACjCC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EAAAA,IACEC,gBAAgB,iBAAiBb,KAAK;AACpC,QAAA;AAAA,IAAEG;AAAAA,IAASW;AAAAA,EAAAA,IAAOC,WAAWX,WAAW;AAE9C,QAAMY,eAAeC,QACnB,MACEV,gBACAA,cAAcW,IAAKC,CAAgB,gBAAA;AACjC,QAAIA,YAAYC,MAAM;AACpB,iCACG,qBAEC,EAAA,aACA,iBAAiBZ,yBACjB,oBAAoBC,0BACpB,SAAS;AAAA,QACPY,MAAMlB,QAAQmB;AAAAA,QACdC,UAAUpB,QAAQqB;AAAAA,QAClBC,UAAUtB,QAAQuB;AAAAA,QAClBC,YAAYxB,QAAQyB;AAAAA,QACpBC,MAAM1B,QAAQ2B;AAAAA,QACdxB,OAAOH,QAAQ4B;AAAAA,QACfC,UAAU7B,QAAQ8B;AAAAA,MACpB,EAAA,GAZKd,YAAYlB,MAAO,GAAEkB,YAAYC,IAAK,IAAGD,YAAYe,GAAI,EAa9D;AAAA,IAEN;AAEOC,WAAAA;AAAAA,EAAAA,CACR,GACH,CAAC5B,cAAcJ,SAASM,0BAA0BD,uBAAuB,CAC3E;AAGE,SAAA,qBAAC,SACC,IACA,WAAWM,GACTX,QAAQkB,MACRlB,QAAQE,MAAM,GACd;AAAA,IAAE,CAACF,QAAQiC,IAAI,GAAG,CAAC,CAACxB;AAAAA,IAAQ,CAACT,QAAQkC,MAAM,GAAGzB,WAAW;AAAA,EAAA,GACzDV,SACF,GAEEQ,UAAAA;AAAAA,IACA,UAAA,oBAAC,gBAAa,WAAU,OAAM,SAAQ,SAAQ,WAAWP,QAAQG,OAC9DI,UAAAA,QACH,KAECJ,SACC,oBAAC,qBACC,WAAWH,QAAQG,OACnB,MAAMA,OACN,WAAU,aACV,SAAS;AAAA,MACPgC,wBAAwBnC,QAAQoC;AAAAA,IAAAA,GAGpC;AAAA,wBACH,iBAAgB,EAAA,gBAAc,MAAC,WAAWpC,QAAQqC,kBAChDxB,UACH,cAAA;AAAA,IACCL,UACE,oBAAA,cAAA,EACC,WAAU,OACV,SAAQ,SACR,WAAWR,QAAQsC,iBAElB9B,UACH,OAAA,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
|
|
@@ -54,9 +54,10 @@ const {
|
|
|
54
54
|
// we need to play with the 4px because of the focus ring
|
|
55
55
|
// padding: `4px ${theme.hv.spacing.sm}px ${theme.hv.spacing.sm - 4}px 4px`,
|
|
56
56
|
padding: `4px ${theme.space.sm} ${theme.space.sm} 4px`,
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
57
|
+
...theme.typography.label
|
|
58
|
+
},
|
|
59
|
+
titleAnchor: {
|
|
60
|
+
WebkitLineClamp: 2
|
|
60
61
|
},
|
|
61
62
|
single: {
|
|
62
63
|
width: 320
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppSwitcher.styles.js","sources":["../../../../src/components/AppSwitcher/AppSwitcher.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAppSwitcher\", {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n backgroundColor: theme.colors.atmo1,\n overflow: \"hidden\",\n\n // we need to play with the 4px because of the focus ring\n // padding: `${theme.spacing(2) - 4}px 0 ${theme.spacing(2) - 4}px ${\n // theme.spacing(2) - 4\n // }px`,\n padding: theme.spacing(\"sm\", 0, \"sm\", \"sm\"),\n },\n item: {},\n itemSelected: {},\n itemDisabled: {},\n itemTrigger: {},\n itemIcon: {},\n itemTitle: {},\n itemInfoIcon: {},\n actionsContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n justifyContent: \"flex-start\",\n\n overflowY: \"auto\",\n\n // We need to play with the 4px because of the focus ring\n padding: \"4px 0 4px 4px\",\n },\n footerContainer: {\n display: \"flex\",\n alignItems: \"center\",\n marginTop: \"auto\",\n height: 52,\n\n // We need to play with the 4px because of the focus ring\n // padding: `${theme.hv.spacing.sm - 4}px ${theme.hv.spacing.sm + 4}px 4px 4px`,\n padding: `${theme.space.sm} ${theme.space.sm} 4px 4px`,\n },\n open: {\n zIndex: \"1200\",\n position: \"absolute\",\n top: \"50px\",\n overflowX: \"hidden\",\n boxShadow: theme.colors.shadow,\n },\n closed: { display: \"none\" },\n title: {\n minHeight: 36,\n\n // we need to play with the 4px because of the focus ring\n // padding: `4px ${theme.hv.spacing.sm}px ${theme.hv.spacing.sm - 4}px 4px`,\n padding: `4px ${theme.space.sm} ${theme.space.sm} 4px`,\n
|
|
1
|
+
{"version":3,"file":"AppSwitcher.styles.js","sources":["../../../../src/components/AppSwitcher/AppSwitcher.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAppSwitcher\", {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n backgroundColor: theme.colors.atmo1,\n overflow: \"hidden\",\n\n // we need to play with the 4px because of the focus ring\n // padding: `${theme.spacing(2) - 4}px 0 ${theme.spacing(2) - 4}px ${\n // theme.spacing(2) - 4\n // }px`,\n padding: theme.spacing(\"sm\", 0, \"sm\", \"sm\"),\n },\n item: {},\n itemSelected: {},\n itemDisabled: {},\n itemTrigger: {},\n itemIcon: {},\n itemTitle: {},\n itemInfoIcon: {},\n actionsContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n justifyContent: \"flex-start\",\n\n overflowY: \"auto\",\n\n // We need to play with the 4px because of the focus ring\n padding: \"4px 0 4px 4px\",\n },\n footerContainer: {\n display: \"flex\",\n alignItems: \"center\",\n marginTop: \"auto\",\n height: 52,\n\n // We need to play with the 4px because of the focus ring\n // padding: `${theme.hv.spacing.sm - 4}px ${theme.hv.spacing.sm + 4}px 4px 4px`,\n padding: `${theme.space.sm} ${theme.space.sm} 4px 4px`,\n },\n open: {\n zIndex: \"1200\",\n position: \"absolute\",\n top: \"50px\",\n overflowX: \"hidden\",\n boxShadow: theme.colors.shadow,\n },\n closed: { display: \"none\" },\n title: {\n minHeight: 36,\n\n // we need to play with the 4px because of the focus ring\n // padding: `4px ${theme.hv.spacing.sm}px ${theme.hv.spacing.sm - 4}px 4px`,\n padding: `4px ${theme.space.sm} ${theme.space.sm} 4px`,\n ...theme.typography.label,\n },\n titleAnchor: {\n WebkitLineClamp: 2,\n },\n single: { width: 320 },\n dual: { width: 640 },\n fluid: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","flexDirection","backgroundColor","theme","colors","atmo1","overflow","padding","spacing","item","itemSelected","itemDisabled","itemTrigger","itemIcon","itemTitle","itemInfoIcon","actionsContainer","flexWrap","justifyContent","overflowY","footerContainer","alignItems","marginTop","height","space","sm","open","zIndex","position","top","overflowX","boxShadow","shadow","closed","title","minHeight","typography","label","titleAnchor","WebkitLineClamp","single","width","dual","fluid"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,iBAAiB;AAAA,EAC1EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,iBAAiBC,MAAMC,OAAOC;AAAAA,IAC9BC,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAMVC,SAASJ,MAAMK,QAAQ,MAAM,GAAG,MAAM,IAAI;AAAA,EAC5C;AAAA,EACAC,MAAM,CAAC;AAAA,EACPC,cAAc,CAAC;AAAA,EACfC,cAAc,CAAC;AAAA,EACfC,aAAa,CAAC;AAAA,EACdC,UAAU,CAAC;AAAA,EACXC,WAAW,CAAC;AAAA,EACZC,cAAc,CAAC;AAAA,EACfC,kBAAkB;AAAA,IAChBhB,SAAS;AAAA,IACTiB,UAAU;AAAA,IACVC,gBAAgB;AAAA,IAEhBC,WAAW;AAAA;AAAA,IAGXZ,SAAS;AAAA,EACX;AAAA,EACAa,iBAAiB;AAAA,IACfpB,SAAS;AAAA,IACTqB,YAAY;AAAA,IACZC,WAAW;AAAA,IACXC,QAAQ;AAAA;AAAA;AAAA,IAIRhB,SAAU,GAAEJ,MAAMqB,MAAMC,EAAG,IAAGtB,MAAMqB,MAAMC,EAAG;AAAA,EAC/C;AAAA,EACAC,MAAM;AAAA,IACJC,QAAQ;AAAA,IACRC,UAAU;AAAA,IACVC,KAAK;AAAA,IACLC,WAAW;AAAA,IACXC,WAAW5B,MAAMC,OAAO4B;AAAAA,EAC1B;AAAA,EACAC,QAAQ;AAAA,IAAEjC,SAAS;AAAA,EAAO;AAAA,EAC1BkC,OAAO;AAAA,IACLC,WAAW;AAAA;AAAA;AAAA,IAIX5B,SAAU,OAAMJ,MAAMqB,MAAMC,EAAG,IAAGtB,MAAMqB,MAAMC,EAAG;AAAA,IACjD,GAAGtB,MAAMiC,WAAWC;AAAAA,EACtB;AAAA,EACAC,aAAa;AAAA,IACXC,iBAAiB;AAAA,EACnB;AAAA,EACAC,QAAQ;AAAA,IAAEC,OAAO;AAAA,EAAI;AAAA,EACrBC,MAAM;AAAA,IAAED,OAAO;AAAA,EAAI;AAAA,EACnBE,OAAO,CAAC;AACV,CAAC;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { useClasses } from "./Page.styles.js";
|
|
3
3
|
import { staticClasses } from "./Page.styles.js";
|
|
4
|
-
import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
|
|
5
4
|
import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
|
|
6
5
|
import { HvTypography } from "../../Typography/Typography.js";
|
|
6
|
+
import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
|
|
7
7
|
const HvBreadCrumbPage = (props) => {
|
|
8
8
|
const {
|
|
9
9
|
component,
|
|
@@ -12,9 +12,6 @@ const mapVariant = (variant, theme) => {
|
|
|
12
12
|
ghost: "primaryGhost"
|
|
13
13
|
};
|
|
14
14
|
const mappedVariant = deprecatedVariantMap[variant];
|
|
15
|
-
if (mappedVariant) {
|
|
16
|
-
console.warn(`Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`);
|
|
17
|
-
}
|
|
18
15
|
return mappedVariant || variant;
|
|
19
16
|
};
|
|
20
17
|
const HvButton = forwardRef((props, ref) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement } from \"react\";\n\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { PolymorphicComponentRef, PolymorphicRef } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport {\n staticClasses as buttonClasses,\n getOverrideColors,\n getRadiusStyles,\n getSizeStyles,\n useClasses,\n} from \"./Button.styles\";\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport { buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\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,\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 } = useDefaultProps(\"HvButton\", props);\n const { classes, css, cx } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n const variant = mapVariant(\n variantProp ?? (icon ? \"secondaryGhost\" : \"primary\"),\n activeTheme?.name\n );\n\n return (\n <Component\n ref={ref}\n className={cx(\n classes.root,\n classes[variant],\n size && css(getSizeStyles(size)),\n radius && css(getRadiusStyles(radius)),\n overrideIconColors && css(getOverrideColors()),\n {\n [classes.icon]: icon,\n [classes.disabled]: disabled,\n },\n className\n )}\n {...(Component === \"button\" && { type: \"button\" })}\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","
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement } from \"react\";\n\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { PolymorphicComponentRef, PolymorphicRef } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport {\n staticClasses as buttonClasses,\n getOverrideColors,\n getRadiusStyles,\n getSizeStyles,\n useClasses,\n} from \"./Button.styles\";\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport { buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\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 (import.meta.env.DEV && 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,\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 } = useDefaultProps(\"HvButton\", props);\n const { classes, css, cx } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n const variant = mapVariant(\n variantProp ?? (icon ? \"secondaryGhost\" : \"primary\"),\n activeTheme?.name\n );\n\n return (\n <Component\n ref={ref}\n className={cx(\n classes.root,\n classes[variant],\n size && css(getSizeStyles(size)),\n radius && css(getRadiusStyles(radius)),\n overrideIconColors && css(getOverrideColors()),\n {\n [classes.icon]: icon,\n [classes.disabled]: disabled,\n },\n className\n )}\n {...(Component === \"button\" && { type: \"button\" })}\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","HvButton","forwardRef","props","ref","id","classes","classesProp","children","variantProp","disabled","className","startIcon","endIcon","icon","size","radius","overrideIconColors","component","Component","others","useDefaultProps","css","cx","useClasses","activeTheme","useTheme","name","root","getSizeStyles","getRadiusStyles","getOverrideColors","type","tabIndex"],"mappings":";;;;;;AAsDA,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;AASlD,SAAOK,iBAAiBL;AAC1B;AAKO,MAAMM,WAEoBC,WAC/B,CACEC,OACAC,QACG;AACG,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAb,SAASc;AAAAA,IACTC,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,EAAAA,IACDC,gBAAgB,YAAYlB,KAAK;AAC/B,QAAA;AAAA,IAAEG;AAAAA,IAASgB;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWjB,WAAW;AAC7C,QAAA;AAAA,IAAEkB;AAAAA,MAAgBC,SAAS;AACjC,QAAM/B,UAAUD,WACde,gBAAgBK,OAAO,mBAAmB,YAC1CW,aAAaE,IACf;AAGE,SAAA,qBAAC,WACC,EAAA,KACA,WAAWJ,GACTjB,QAAQsB,MACRtB,QAAQX,OAAO,GACfoB,QAAQO,IAAIO,cAAcd,IAAI,CAAC,GAC/BC,UAAUM,IAAIQ,gBAAgBd,MAAM,CAAC,GACrCC,sBAAsBK,IAAIS,kBAAmB,CAAA,GAC7C;AAAA,IACE,CAACzB,QAAQQ,IAAI,GAAGA;AAAAA,IAChB,CAACR,QAAQI,QAAQ,GAAGA;AAAAA,EAEtBC,GAAAA,SACF,GACKQ,GAAAA,cAAc,YAAY;AAAA,IAAEa,MAAM;AAAA,EAAS,GAC3CtB,GAAAA,YAAY;AAAA,IACfA,UAAU;AAAA,IACVuB,UAAU;AAAA,IACV,iBAAiB;AAAA,EAAA,GAEfb,GAAAA,QAEHR,UAAAA;AAAAA,IAAAA,aAAc,oBAAA,QAAA,EAAK,WAAWN,QAAQM,WAAYA,UAAU,WAAA;AAAA,IAC5DJ;AAAAA,IACAK,WAAY,oBAAA,QAAA,EAAK,WAAWP,QAAQO,SAAUA,UAAQ,SAAA;AAAA,EACzD,EAAA,CAAA;AAEJ,CACF;"}
|