npm - @hitachivantara/uikit-react-core - Versions diffs - 5.39.2 → 5.39.4 - Mend

@hitachivantara/uikit-react-core 5.39.2 → 5.39.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3018) hide show

package/dist/esm/providers/Provider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Provider.js","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 ${\n cssBaseline === \"global\" && {\n [`@layer hv-uikit-baseline`]: {\n ...CssBaseline,\n },\n }\n }\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 [`@layer ${rootElementId}-baseline`]: {\n ...CssScopedBaseline,\n },\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({\n [`@layer ${rootElementId}-baseline`]: {\n ...CssScopedBaseline,\n },\n })\n : undefined\n }\n >\n {children}\n </div>\n ) : (\n children\n );\n }}\n </ClassNames>\n </HvThemeProvider>\n </CacheProvider>\n );\n};\n"],"names":["cssReact","css"],"mappings":";;;;;;;;;;AAkFA,MAAM,mBAAmB;AAKlB,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAuB;AACf,QAAA,eAAe,YAAY,QAAW,gBAAgB;AAGtD,QAAA,aAA6C,cAAc,MAAM;AAKvE,QAAM,eAAe;AAAA,IACnB,MACE,iBAAiB,kBACb,sBACA,YAAY,EAAE,KAAK,cAAc,SAAS,MAAM;AAAA,IACtD,CAAC,YAAY;AAAA,EAAA;AAIb,SAAA,qBAAC,eAAc,EAAA,OAAO,cACpB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQA;AAAAA,YAEJ,gBAAgB,YAAY;AAAA,UAC1B,CAAC,0BAA0B,GAAG;AAAA,YAC5B,GAAG;AAAA,UACL;AAAA,QAAA,CAEJ;AAAA,YACE,cAAc,UAAU,CAAC;AAAA;AAAA,MAAA;AAAA,IAE/B;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO,SAAS,WAAW,CAAC,EAAE;AAAA,QAC9B;AAAA,QACA,WAAW,aAAa,OAAO,KAAK,WAAW,CAAC,EAAE,OAAO,KAAK,EAAE,CAAC;AAAA,QACjE,aACE,aAAa,WAAW,iBAAiB,eAAe;AAAA,QAG1D,UAAC,oBAAA,YAAA,EACE,UAAC,CAAA,EAAE,KAAAC,WAAU;AACZ,cAAI,gBAAgB,UAAU;AACtB,kBAAA,cAAc,eAAe,aAAa;AAEhD,gBAAI,aAAa;AACf,0BAAY,UAAU;AAAA,gBACpBA,KAAI;AAAA,kBACF,CAAC,UAAU,aAAa,WAAW,GAAG;AAAA,oBACpC,GAAG;AAAA,kBACL;AAAA,gBAAA,CACD;AAAA,cAAA;AAAA,YAEL;AAAA,UACF;AAEA,kBAAQ,aAAa,YAAY,gBAAgB,aAC/C,CAAC,gBACD;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WACE,gBAAgB,WACZA,KAAI;AAAA,gBACF,CAAC,UAAU,aAAa,WAAW,GAAG;AAAA,kBACpC,GAAG;AAAA,gBACL;AAAA,cACD,CAAA,IACD;AAAA,cAGL;AAAA,YAAA;AAAA,UAGH,IAAA;AAAA,QAAA,GAGN;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}
1	+ {"version":3,"file":"Provider.js","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 \"../utils/document\";\nimport { processThemes } from \"../utils/theme\";\nimport { HvTheme } from \"../types/theme\";\nimport { useUniqueId } from \"../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 ${\n cssBaseline === \"global\" && {\n [`@layer hv-uikit-baseline`]: {\n ...CssBaseline,\n },\n }\n }\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 [`@layer ${rootElementId}-baseline`]: {\n ...CssScopedBaseline,\n },\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({\n [`@layer ${rootElementId}-baseline`]: {\n ...CssScopedBaseline,\n },\n })\n : undefined\n }\n >\n {children}\n </div>\n ) : (\n children\n );\n }}\n </ClassNames>\n </HvThemeProvider>\n </CacheProvider>\n );\n};\n"],"names":["cssReact","css"],"mappings":";;;;;;;;;;AAkFA,MAAM,mBAAmB;AAKlB,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAuB;AACf,QAAA,eAAe,YAAY,QAAW,gBAAgB;AAGtD,QAAA,aAA6C,cAAc,MAAM;AAKvE,QAAM,eAAe;AAAA,IACnB,MACE,iBAAiB,kBACb,sBACA,YAAY,EAAE,KAAK,cAAc,SAAS,MAAM;AAAA,IACtD,CAAC,YAAY;AAAA,EAAA;AAIb,SAAA,qBAAC,eAAc,EAAA,OAAO,cACpB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQA;AAAAA,YAEJ,gBAAgB,YAAY;AAAA,UAC1B,CAAC,0BAA0B,GAAG;AAAA,YAC5B,GAAG;AAAA,UACL;AAAA,QAAA,CAEJ;AAAA,YACE,cAAc,UAAU,CAAC;AAAA;AAAA,MAAA;AAAA,IAE/B;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO,SAAS,WAAW,CAAC,EAAE;AAAA,QAC9B;AAAA,QACA,WAAW,aAAa,OAAO,KAAK,WAAW,CAAC,EAAE,OAAO,KAAK,EAAE,CAAC;AAAA,QACjE,aACE,aAAa,WAAW,iBAAiB,eAAe;AAAA,QAG1D,UAAC,oBAAA,YAAA,EACE,UAAC,CAAA,EAAE,KAAAC,WAAU;AACZ,cAAI,gBAAgB,UAAU;AACtB,kBAAA,cAAc,eAAe,aAAa;AAEhD,gBAAI,aAAa;AACf,0BAAY,UAAU;AAAA,gBACpBA,KAAI;AAAA,kBACF,CAAC,UAAU,aAAa,WAAW,GAAG;AAAA,oBACpC,GAAG;AAAA,kBACL;AAAA,gBAAA,CACD;AAAA,cAAA;AAAA,YAEL;AAAA,UACF;AAEA,kBAAQ,aAAa,YAAY,gBAAgB,aAC/C,CAAC,gBACD;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WACE,gBAAgB,WACZA,KAAI;AAAA,gBACF,CAAC,UAAU,aAAa,WAAW,GAAG;AAAA,kBACpC,GAAG;AAAA,gBACL;AAAA,cACD,CAAA,IACD;AAAA,cAGL;AAAA,YAAA;AAAA,UAGH,IAAA;AAAA,QAAA,GAGN;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/providers/ThemeProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ThemeProvider.js","sources":["../../../src/providers/ThemeProvider.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\n\nimport { parseTheme, HvThemeStructure } from \"@hitachivantara/uikit-styles\";\nimport {\n HvThemeContext,\n defaultCacheKey,\n defaultEmotionCache,\n EmotionContext,\n} from \"@hitachivantara/uikit-react-shared\";\nimport type { HvThemeContextValue } from \"@hitachivantara/uikit-react-shared\";\n\nimport {\n createTheme,\n ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\n\nimport { EmotionCache } from \"@emotion/cache\";\n\nimport { setElementAttrs } from \"~~@core/~~utils/theme\";\nimport { HvTheme } from \"~~@core/~~types/theme\";\n\nexport { HvThemeContext };\nexport type { HvThemeContextValue };\n\nexport { defaultCacheKey, defaultEmotionCache, EmotionContext };\n\ninterface HvThemeProviderProps {\n children: React.ReactNode;\n themes: (HvTheme \| HvThemeStructure)[];\n theme: string;\n emotionCache: EmotionCache;\n colorMode: string;\n themeRootId?: string;\n}\n\nexport const HvThemeProvider = ({\n children,\n themes: themesList,\n theme,\n emotionCache,\n colorMode,\n themeRootId: rootId,\n}: HvThemeProviderProps) => {\n const initTheme = parseTheme(themesList, theme, colorMode);\n\n const [parsedTheme, setParsedTheme] = useState(initTheme);\n const [activeTheme, setActiveTheme] = useState(parsedTheme.theme);\n const [selectedTheme, setSelectedTheme] = useState(parsedTheme.selectedTheme);\n const [selectedMode, setThemeMode] = useState(parsedTheme.selectedMode);\n const [colorModes, setColorModes] = useState(parsedTheme.colorModes);\n const [themes, setThemes] = useState(themesList.map((t) => t.name));\n\n useEffect(() => {\n const pTheme = parseTheme(themesList, theme, colorMode);\n setThemes(themesList.map((t) => t.name));\n setParsedTheme(pTheme);\n }, [themesList, theme, colorMode]);\n\n useEffect(() => {\n setActiveTheme(parsedTheme.theme);\n setSelectedTheme(parsedTheme.selectedTheme);\n setThemeMode(parsedTheme.selectedMode);\n setColorModes(parsedTheme.colorModes);\n\n setElementAttrs(\n parsedTheme.selectedTheme,\n parsedTheme.selectedMode,\n parsedTheme.colorScheme,\n rootId\n );\n }, [parsedTheme, rootId]);\n\n const changeTheme = useCallback(\n (newTheme = selectedTheme, newMode = selectedMode) => {\n const pTheme = parseTheme(themesList, newTheme, newMode);\n setParsedTheme(pTheme);\n },\n [selectedMode, selectedTheme, themesList]\n );\n\n const value = useMemo<HvThemeContextValue>(\n () => ({\n themes,\n colorModes,\n activeTheme: activeTheme as HvTheme,\n selectedTheme,\n selectedMode,\n changeTheme,\n rootId,\n }),\n [\n themes,\n colorModes,\n activeTheme,\n selectedTheme,\n selectedMode,\n changeTheme,\n rootId,\n ]\n );\n\n const MuiTheme = createTheme({\n breakpoints: {\n values: {\n ...activeTheme.breakpoints.values,\n },\n },\n });\n\n const emotionCacheValue = useMemo(\n () => ({ cache: emotionCache }),\n [emotionCache]\n );\n\n return (\n <MuiThemeProvider theme={MuiTheme}>\n <HvThemeContext.Provider value={value}>\n <EmotionContext.Provider value={emotionCacheValue}>\n {children}\n </EmotionContext.Provider>\n </HvThemeContext.Provider>\n </MuiThemeProvider>\n );\n};\n"],"names":["MuiThemeProvider"],"mappings":";;;;;;;AAmCO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,MAA4B;AAC1B,QAAM,YAAY,WAAW,YAAY,OAAO,SAAS;AAEzD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,SAAS;AACxD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,YAAY,KAAK;AAChE,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,YAAY,aAAa;AAC5E,QAAM,CAAC,cAAc,YAAY,IAAI,SAAS,YAAY,YAAY;AACtE,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,YAAY,UAAU;AAC7D,QAAA,CAAC,QAAQ,SAAS,IAAI,SAAS,WAAW,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AAElE,YAAU,MAAM;AACd,UAAM,SAAS,WAAW,YAAY,OAAO,SAAS;AACtD,cAAU,WAAW,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AACvC,mBAAe,MAAM;AAAA,EACpB,GAAA,CAAC,YAAY,OAAO,SAAS,CAAC;AAEjC,YAAU,MAAM;AACd,mBAAe,YAAY,KAAK;AAChC,qBAAiB,YAAY,aAAa;AAC1C,iBAAa,YAAY,YAAY;AACrC,kBAAc,YAAY,UAAU;AAEpC;AAAA,MACE,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ;AAAA,IAAA;AAAA,EACF,GACC,CAAC,aAAa,MAAM,CAAC;AAExB,QAAM,cAAc;AAAA,IAClB,CAAC,WAAW,eAAe,UAAU,iBAAiB;AACpD,YAAM,SAAS,WAAW,YAAY,UAAU,OAAO;AACvD,qBAAe,MAAM;AAAA,IACvB;AAAA,IACA,CAAC,cAAc,eAAe,UAAU;AAAA,EAAA;AAG1C,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGF,QAAM,WAAW,YAAY;AAAA,IAC3B,aAAa;AAAA,MACX,QAAQ;AAAA,QACN,GAAG,YAAY,YAAY;AAAA,MAC7B;AAAA,IACF;AAAA,EAAA,CACD;AAED,QAAM,oBAAoB;AAAA,IACxB,OAAO,EAAE,OAAO;IAChB,CAAC,YAAY;AAAA,EAAA;AAGf,6BACGA,eAAiB,EAAA,OAAO,UACvB,UAAA,oBAAC,eAAe,UAAf,EAAwB,OACvB,UAAA,oBAAC,eAAe,UAAf,EAAwB,OAAO,mBAC7B,SACH,CAAA,GACF,EACF,CAAA;AAEJ;"}
1	+ {"version":3,"file":"ThemeProvider.js","sources":["../../../src/providers/ThemeProvider.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\n\nimport { parseTheme, HvThemeStructure } from \"@hitachivantara/uikit-styles\";\nimport {\n HvThemeContext,\n defaultCacheKey,\n defaultEmotionCache,\n EmotionContext,\n} from \"@hitachivantara/uikit-react-shared\";\nimport type { HvThemeContextValue } from \"@hitachivantara/uikit-react-shared\";\n\nimport {\n createTheme,\n ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\n\nimport { EmotionCache } from \"@emotion/cache\";\n\nimport { setElementAttrs } from \"../utils/theme\";\nimport { HvTheme } from \"../types/theme\";\n\nexport { HvThemeContext };\nexport type { HvThemeContextValue };\n\nexport { defaultCacheKey, defaultEmotionCache, EmotionContext };\n\ninterface HvThemeProviderProps {\n children: React.ReactNode;\n themes: (HvTheme \| HvThemeStructure)[];\n theme: string;\n emotionCache: EmotionCache;\n colorMode: string;\n themeRootId?: string;\n}\n\nexport const HvThemeProvider = ({\n children,\n themes: themesList,\n theme,\n emotionCache,\n colorMode,\n themeRootId: rootId,\n}: HvThemeProviderProps) => {\n const initTheme = parseTheme(themesList, theme, colorMode);\n\n const [parsedTheme, setParsedTheme] = useState(initTheme);\n const [activeTheme, setActiveTheme] = useState(parsedTheme.theme);\n const [selectedTheme, setSelectedTheme] = useState(parsedTheme.selectedTheme);\n const [selectedMode, setThemeMode] = useState(parsedTheme.selectedMode);\n const [colorModes, setColorModes] = useState(parsedTheme.colorModes);\n const [themes, setThemes] = useState(themesList.map((t) => t.name));\n\n useEffect(() => {\n const pTheme = parseTheme(themesList, theme, colorMode);\n setThemes(themesList.map((t) => t.name));\n setParsedTheme(pTheme);\n }, [themesList, theme, colorMode]);\n\n useEffect(() => {\n setActiveTheme(parsedTheme.theme);\n setSelectedTheme(parsedTheme.selectedTheme);\n setThemeMode(parsedTheme.selectedMode);\n setColorModes(parsedTheme.colorModes);\n\n setElementAttrs(\n parsedTheme.selectedTheme,\n parsedTheme.selectedMode,\n parsedTheme.colorScheme,\n rootId\n );\n }, [parsedTheme, rootId]);\n\n const changeTheme = useCallback(\n (newTheme = selectedTheme, newMode = selectedMode) => {\n const pTheme = parseTheme(themesList, newTheme, newMode);\n setParsedTheme(pTheme);\n },\n [selectedMode, selectedTheme, themesList]\n );\n\n const value = useMemo<HvThemeContextValue>(\n () => ({\n themes,\n colorModes,\n activeTheme: activeTheme as HvTheme,\n selectedTheme,\n selectedMode,\n changeTheme,\n rootId,\n }),\n [\n themes,\n colorModes,\n activeTheme,\n selectedTheme,\n selectedMode,\n changeTheme,\n rootId,\n ]\n );\n\n const MuiTheme = createTheme({\n breakpoints: {\n values: {\n ...activeTheme.breakpoints.values,\n },\n },\n });\n\n const emotionCacheValue = useMemo(\n () => ({ cache: emotionCache }),\n [emotionCache]\n );\n\n return (\n <MuiThemeProvider theme={MuiTheme}>\n <HvThemeContext.Provider value={value}>\n <EmotionContext.Provider value={emotionCacheValue}>\n {children}\n </EmotionContext.Provider>\n </HvThemeContext.Provider>\n </MuiThemeProvider>\n );\n};\n"],"names":["MuiThemeProvider"],"mappings":";;;;;;;AAmCO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,MAA4B;AAC1B,QAAM,YAAY,WAAW,YAAY,OAAO,SAAS;AAEzD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,SAAS;AACxD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,YAAY,KAAK;AAChE,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,YAAY,aAAa;AAC5E,QAAM,CAAC,cAAc,YAAY,IAAI,SAAS,YAAY,YAAY;AACtE,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,YAAY,UAAU;AAC7D,QAAA,CAAC,QAAQ,SAAS,IAAI,SAAS,WAAW,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AAElE,YAAU,MAAM;AACd,UAAM,SAAS,WAAW,YAAY,OAAO,SAAS;AACtD,cAAU,WAAW,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AACvC,mBAAe,MAAM;AAAA,EACpB,GAAA,CAAC,YAAY,OAAO,SAAS,CAAC;AAEjC,YAAU,MAAM;AACd,mBAAe,YAAY,KAAK;AAChC,qBAAiB,YAAY,aAAa;AAC1C,iBAAa,YAAY,YAAY;AACrC,kBAAc,YAAY,UAAU;AAEpC;AAAA,MACE,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ;AAAA,IAAA;AAAA,EACF,GACC,CAAC,aAAa,MAAM,CAAC;AAExB,QAAM,cAAc;AAAA,IAClB,CAAC,WAAW,eAAe,UAAU,iBAAiB;AACpD,YAAM,SAAS,WAAW,YAAY,UAAU,OAAO;AACvD,qBAAe,MAAM;AAAA,IACvB;AAAA,IACA,CAAC,cAAc,eAAe,UAAU;AAAA,EAAA;AAG1C,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGF,QAAM,WAAW,YAAY;AAAA,IAC3B,aAAa;AAAA,MACX,QAAQ;AAAA,QACN,GAAG,YAAY,YAAY;AAAA,MAC7B;AAAA,IACF;AAAA,EAAA,CACD;AAED,QAAM,oBAAoB;AAAA,IACxB,OAAO,EAAE,OAAO;IAChB,CAAC,YAAY;AAAA,EAAA;AAGf,6BACGA,eAAiB,EAAA,OAAO,UACvB,UAAA,oBAAC,eAAe,UAAf,EAAwB,OACvB,UAAA,oBAAC,eAAe,UAAf,EAAwB,OAAO,mBAC7B,SACH,CAAA,GACF,EACF,CAAA;AAEJ;"}

package/dist/esm/utils/IconButton.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { HvButton } from "../components/Button/Button.js";
-import { HvTooltip } from "../components/Tooltip/Tooltip.js";
+import { HvButton } from "../Button/Button.js";
+import { HvTooltip } from "../Tooltip/Tooltip.js";
 const IconButton = ({
   title,
   placement = "top",

package/dist/esm/utils/IconButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconButton.js","sources":["../../../src/utils/IconButton.tsx"],"sourcesContent":["import { HvButton, HvButtonProps } from \"~~@core/components/~~Button\";\nimport { HvTooltip, HvTooltipProps } from \"~~@core/components/~~Tooltip\";\n\nexport interface IconButtonProps extends Omit<HvButtonProps, \"icon\" \| \"title\"> {\n title: React.ReactNode;\n placement?: HvTooltipProps[\"placement\"];\n onClick?: HvButtonProps[\"onClick\"];\n}\n\n/** An `HvButton` of type icon wrapped in a tooltip */\nexport const IconButton = ({\n title,\n placement = \"top\",\n ...others\n}: IconButtonProps) => (\n <HvTooltip enterDelay={500} title={title} placement={placement}>\n <HvButton icon {...others} />\n </HvTooltip>\n);\n"],"names":[],"mappings":";;;AAUO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,MACG,oBAAA,WAAA,EAAU,YAAY,KAAK,OAAc,WACxC,UAAC,oBAAA,UAAA,EAAS,MAAI,MAAE,GAAG,OAAA,CAAQ,EAC7B,CAAA;"}
1	+ {"version":3,"file":"IconButton.js","sources":["../../../src/utils/IconButton.tsx"],"sourcesContent":["import { HvButton, HvButtonProps } from \"../Button\";\nimport { HvTooltip, HvTooltipProps } from \"../Tooltip\";\n\nexport interface IconButtonProps extends Omit<HvButtonProps, \"icon\" \| \"title\"> {\n title: React.ReactNode;\n placement?: HvTooltipProps[\"placement\"];\n onClick?: HvButtonProps[\"onClick\"];\n}\n\n/** An `HvButton` of type icon wrapped in a tooltip */\nexport const IconButton = ({\n title,\n placement = \"top\",\n ...others\n}: IconButtonProps) => (\n <HvTooltip enterDelay={500} title={title} placement={placement}>\n <HvButton icon {...others} />\n </HvTooltip>\n);\n"],"names":[],"mappings":";;;AAUO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,MACG,oBAAA,WAAA,EAAU,YAAY,KAAK,OAAc,WACxC,UAAC,oBAAA,UAAA,EAAS,MAAI,MAAE,GAAG,OAAA,CAAQ,EAC7B,CAAA;"}

package/dist/esm/utils/classes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"classes.js","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":[],"mappings":";AAQa,MAAA,aAAa,CACxB,MACA,SACG;AACH,QAAM,aAAqC,CAAA;AACtC,OAAA,QAAQ,CAAC,QAAgB;AAC5B,eAAW,GAAG,IAAI,GAAG,IAAI,IAAI,GAAG;AAAA,EAAA,CACjC;AACM,SAAA;AACT;AAEA,MAAM,iBAAiB,CACrB,KACA,UACM;AACN,QAAM,SAAc,CAAA;AACpB,aAAW,OAAO,KAAK;AACrB,QAAI,OAAO,UAAU,eAAe,KAAK,KAAK,GAAG,GAAG;AAC5C,YAAA,SAAS,MAAM,GAAG;AAClB,YAAA,QAAQ,IAAI,GAAG;AACd,aAAA,MAAM,IACX,OAAO,UAAU,WAAW,eAAe,OAAc,KAAK,IAAI;AAAA,IACtE;AAAA,EACF;AACO,SAAA;AACT;AAGa,MAAA,WAAW,CAAmB,WAAc,SAAoB;AACpE,SAAA,eAAe,WAAW,CAAC,QAAQ;AAClC,UAAA,UAAU,IAAI,MAAM,QAAQ;AAClC,QAAI,CAAC,SAAS;AAAe,aAAA;AAC7B,UAAM,SAAS,QAAQ;AAAA,MACrB,CAAC,KAAK,UAAU,IAAI,QAAQ,OAAO,IAAI,IAAI,IAAI,MAAM,MAAM,CAAC,CAAC,EAAE;AAAA,MAC/D;AAAA,IAAA;AAEF,WAAO,UAAU;AAAA,EAAA,CAClB;AACH;AAGgB,SAAA,cAEd,MACA,cACA;AACM,QAAA,SAAS,SAAS,cAAc,IAAI;AAE1C,QAAM,gBAAgB,WAAW,OAAO,KAAK,MAAM,GAAkB,IAAI;AAMzE,WAAS,WACP,cAAkD,IAElD,YAAY,MACZ;AACA,UAAM,EAAE,IAAI,IAAI,IAAI,OAAO;AAE3B,UAAM,eAAe,CAAC,QACpB,GAAG,aAAa,GAAG,IAAI,IAAI,GAAG,IAAI,IAAI,OAAO,GAAG,CAAC,GAAG,cAAc,GAAG,CAAC;AAExE,UAAM,UAAU,OAAO;AAAA,MACrB,OAAO,KAAK,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,aAAa,GAAG,CAAC,CAAC;AAAA,IAAA;AAGpD,WAAA,EAAE,SAAS,KAAK;EACzB;AAEO,SAAA,EAAE,YAAY;AACvB;"}
1	+ {"version":3,"file":"classes.js","sources":["../../../src/utils/classes.ts"],"sourcesContent":["import type { CSSInterpolation } from \"@emotion/serialize\";\n\nimport { useCss } from \"../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":[],"mappings":";AAQa,MAAA,aAAa,CACxB,MACA,SACG;AACH,QAAM,aAAqC,CAAA;AACtC,OAAA,QAAQ,CAAC,QAAgB;AAC5B,eAAW,GAAG,IAAI,GAAG,IAAI,IAAI,GAAG;AAAA,EAAA,CACjC;AACM,SAAA;AACT;AAEA,MAAM,iBAAiB,CACrB,KACA,UACM;AACN,QAAM,SAAc,CAAA;AACpB,aAAW,OAAO,KAAK;AACrB,QAAI,OAAO,UAAU,eAAe,KAAK,KAAK,GAAG,GAAG;AAC5C,YAAA,SAAS,MAAM,GAAG;AAClB,YAAA,QAAQ,IAAI,GAAG;AACd,aAAA,MAAM,IACX,OAAO,UAAU,WAAW,eAAe,OAAc,KAAK,IAAI;AAAA,IACtE;AAAA,EACF;AACO,SAAA;AACT;AAGa,MAAA,WAAW,CAAmB,WAAc,SAAoB;AACpE,SAAA,eAAe,WAAW,CAAC,QAAQ;AAClC,UAAA,UAAU,IAAI,MAAM,QAAQ;AAClC,QAAI,CAAC,SAAS;AAAe,aAAA;AAC7B,UAAM,SAAS,QAAQ;AAAA,MACrB,CAAC,KAAK,UAAU,IAAI,QAAQ,OAAO,IAAI,IAAI,IAAI,MAAM,MAAM,CAAC,CAAC,EAAE;AAAA,MAC/D;AAAA,IAAA;AAEF,WAAO,UAAU;AAAA,EAAA,CAClB;AACH;AAGgB,SAAA,cAEd,MACA,cACA;AACM,QAAA,SAAS,SAAS,cAAc,IAAI;AAE1C,QAAM,gBAAgB,WAAW,OAAO,KAAK,MAAM,GAAkB,IAAI;AAMzE,WAAS,WACP,cAAkD,IAElD,YAAY,MACZ;AACA,UAAM,EAAE,IAAI,IAAI,IAAI,OAAO;AAE3B,UAAM,eAAe,CAAC,QACpB,GAAG,aAAa,GAAG,IAAI,IAAI,GAAG,IAAI,IAAI,OAAO,GAAG,CAAC,GAAG,cAAc,GAAG,CAAC;AAExE,UAAM,UAAU,OAAO;AAAA,MACrB,OAAO,KAAK,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,aAAa,GAAG,CAAC,CAAC;AAAA,IAAA;AAGpD,WAAA,EAAE,SAAS,KAAK;EACzB;AAEO,SAAA,EAAE,YAAY;AACvB;"}

package/dist/esm/utils/hexToRgbA.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { alpha, hexToRgb } from "@mui/material";
+import { alpha, hexToRgb } from "@mui/material/styles";
 const hexToRgbA = (hex, factor = 0.8) => alpha(hexToRgb(hex), factor);
 export {
   hexToRgbA

package/dist/esm/utils/hexToRgbA.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hexToRgbA.js","sources":["../../../src/utils/hexToRgbA.ts"],"sourcesContent":["import { hexToRgb, alpha } from \"@mui/material\";\n\n// TODO - remove in v6 in favor of theme.alpha()\nexport const hexToRgbA = (hex, factor = 0.8) => alpha(hexToRgb(hex), factor);\n"],"names":[],"mappings":";AAGa,MAAA,YAAY,CAAC,KAAK,SAAS,QAAQ,MAAM,SAAS,GAAG,GAAG,MAAM;"}
1	+ {"version":3,"file":"hexToRgbA.js","sources":["../../../src/utils/hexToRgbA.ts"],"sourcesContent":["import { hexToRgb, alpha } from \"@mui/material/styles\";\n\n// TODO - remove in v6 in favor of theme.alpha()\nexport const hexToRgbA = (hex, factor = 0.8) => alpha(hexToRgb(hex), factor);\n"],"names":[],"mappings":";AAGa,MAAA,YAAY,CAAC,KAAK,SAAS,QAAQ,MAAM,SAAS,GAAG,GAAG,MAAM;"}

package/dist/esm/utils/theme.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"theme.js","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":[],"mappings":"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"}
1	+ {"version":3,"file":"theme.js","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 \"../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":[],"mappings":"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"}

package/dist/esm/utils/wrapperTooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wrapperTooltip.js","sources":["../../../src/utils/wrapperTooltip.tsx"],"sourcesContent":["import { withTooltip } from \"~~@core/~~hocs/withTooltip\";\n\nconst hideTooltip = (evt) => {\n const isOverFlow =\n evt.target.children.length > 1\n ? Array.of(...evt.target.children).some(\n (child) => child.scrollWidth > child.clientWidth\n )\n : evt.target.scrollWidth > evt.target.clientWidth;\n\n return !isOverFlow;\n};\n\nexport const wrapperTooltip = (hasTooltips, Component, label) => {\n const ComponentFunction = () => Component;\n return hasTooltips\n ? withTooltip(ComponentFunction, label, \"top\", hideTooltip)\n : ComponentFunction;\n};\n"],"names":[],"mappings":";AAEA,MAAM,cAAc,CAAC,QAAQ;AAC3B,QAAM,aACJ,IAAI,OAAO,SAAS,SAAS,IACzB,MAAM,GAAG,GAAG,IAAI,OAAO,QAAQ,EAAE;AAAA,IAC/B,CAAC,UAAU,MAAM,cAAc,MAAM;AAAA,EAAA,IAEvC,IAAI,OAAO,cAAc,IAAI,OAAO;AAE1C,SAAO,CAAC;AACV;AAEO,MAAM,iBAAiB,CAAC,aAAa,WAAW,UAAU;AAC/D,QAAM,oBAAoB,MAAM;AAChC,SAAO,cACH,YAAY,mBAAmB,OAAO,OAAO,WAAW,IACxD;AACN;"}
1	+ {"version":3,"file":"wrapperTooltip.js","sources":["../../../src/utils/wrapperTooltip.tsx"],"sourcesContent":["import { withTooltip } from \"../hocs/withTooltip\";\n\nconst hideTooltip = (evt) => {\n const isOverFlow =\n evt.target.children.length > 1\n ? Array.of(...evt.target.children).some(\n (child) => child.scrollWidth > child.clientWidth\n )\n : evt.target.scrollWidth > evt.target.clientWidth;\n\n return !isOverFlow;\n};\n\nexport const wrapperTooltip = (hasTooltips, Component, label) => {\n const ComponentFunction = () => Component;\n return hasTooltips\n ? withTooltip(ComponentFunction, label, \"top\", hideTooltip)\n : ComponentFunction;\n};\n"],"names":[],"mappings":";AAEA,MAAM,cAAc,CAAC,QAAQ;AAC3B,QAAM,aACJ,IAAI,OAAO,SAAS,SAAS,IACzB,MAAM,GAAG,GAAG,IAAI,OAAO,QAAQ,EAAE;AAAA,IAC/B,CAAC,UAAU,MAAM,cAAc,MAAM;AAAA,EAAA,IAEvC,IAAI,OAAO,cAAc,IAAI,OAAO;AAE1C,SAAO,CAAC;AACV;AAEO,MAAM,iBAAiB,CAAC,aAAa,WAAW,UAAU;AAC/D,QAAM,oBAAoB,MAAM;AAChC,SAAO,cACH,YAAY,mBAAmB,OAAO,OAAO,WAAW,IACxD;AACN;"}