npm - @hitachivantara/uikit-react-core - Versions diffs - 5.0.0-next.21 → 5.0.0-next.23 - Mend

@hitachivantara/uikit-react-core 5.0.0-next.21 → 5.0.0-next.23

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 (396) hide show

package/dist/types/index.d.ts CHANGED Viewed

@@ -50,7 +50,6 @@ import { HvHeaderNavigationItemProp as HvHeaderNavigationItemProp_2 } from 'comp
 import { HvInputProps as HvInputProps_2 } from 'components';
 import { HvLabelProps as HvLabelProps_2 } from 'components';
 import { HvListValue as HvListValue_2 } from 'components';
-import { HvParsedThemeStyles } from '@hitachivantara/uikit-styles';
 import { HvRowInstance as HvRowInstance_2 } from 'components';
 import { HvSemanticColorKeys as HvSemanticColorKeys_2 } from 'types/tokens';
 import { HvTableColumnConfig as HvTableColumnConfig_2 } from 'components';
@@ -260,7 +259,7 @@ export declare const controlsClasses: HvControlsClasses;
  * Creates a customized theme based on the base theme and customizations given.
  * For the color modes, the colors that are not defined will be replaced by the values from the dawn mode of the base theme.
  */
-export declare const createTheme: (theme: HvCreateThemeProps) => HvTheme | HvThemeStructure;
+export declare const createTheme: (props: HvCreateThemeProps) => HvTheme | HvThemeStructure;
 export declare type DateRangeProp = {
     startDate: Date;
@@ -430,14 +429,14 @@ export declare const headerNavigationClasses: HvHeaderNavigationClasses;
 export declare const hexToRgbA: (hex: any, factor?: number) => string;
-export declare type HvAccentColorKeys = "acce1" | "acce2" | "acce2h" | "acce3";
+export declare type HvAccentColorKeys = "primary" | "primary_80" | "primary_20" | "brand" | "secondary" | "secondary_60" | "secondary_80";
 export declare type HvAccentColors = Record<HvAccentColorKeys, string>;
 /**
  * A accordion is a design element that expands in place to expose hidden information.
  */
-export declare const HvAccordion: ({ id, className, classes, disabled, label, onChange, children, expanded, headingLevel, defaultExpanded, containerProps, ...others }: HvAccordionProps) => JSX_2.Element;
+export declare const HvAccordion: ({ id, className, classes, disabled, label, onChange, children, expanded, headingLevel, defaultExpanded, containerProps, labelVariant, ...others }: HvAccordionProps) => JSX_2.Element;
 export declare type HvAccordionClasses = {
     /** Styles applied to the component root of the accordion. */
@@ -493,6 +492,7 @@ export declare type HvAccordionProps = HvBaseProps & {
      * Is the accordion disabled.
      */
     disabled?: boolean;
+    labelVariant?: HvTypographyVariants_2;
 };
 export declare const HvActionBar: (props: HvActionBarProps) => JSX_2.Element;
@@ -712,7 +712,7 @@ export declare type HvAppSwitcherProps = HvBaseProps & {
     classes?: HvAppSwitcherClasses;
 };
-export declare type HvAtmosphereColorKeys = "atmo1" | "atmo2" | "atmo3" | "atmo4" | "atmo5";
+export declare type HvAtmosphereColorKeys = "atmo1" | "atmo2" | "atmo3" | "atmo4";
 export declare type HvAtmosphereColors = Record<HvAtmosphereColorKeys, string>;
@@ -1006,7 +1006,7 @@ export declare type HvBaseCheckBoxProps = Omit<CheckboxProps, "onChange" | "clas
     classes?: HvBaseCheckBoxClasses;
 };
-export declare type HvBaseColorKeys = "base1" | "base2";
+export declare type HvBaseColorKeys = "base_light" | "base_dark";
 export declare type HvBaseColors = Record<HvBaseColorKeys, string>;
@@ -1546,8 +1546,8 @@ export declare interface HvButtonProps extends React_2.ButtonHTMLAttributes<HTML
     overrideIconColors?: boolean;
     /** A Jss Object used to override or extend the styles applied. */
     classes?: HvButtonClasses;
+    /** Whether the Button is selected or not. */
     selected?: boolean;
-    sx?: CSSProperties;
 }
 export declare type HvButtonRadius = "none" | "base" | "round" | "circle" | "full";
@@ -1785,7 +1785,7 @@ export declare type HvCardProps = HvBaseProps & {
     classes?: HvCardClasses;
 };
-export declare type HvCategoricalColorKeys = "cviz1" | "cviz2" | "cviz3" | "cviz4" | "cviz5" | "cviz6" | "cviz7" | "cviz8" | "cviz9" | "cviz10" | "cviz11" | "cviz12" | "cviz13" | "cviz14" | "cviz15" | "cviz16" | "cviz17" | "cviz18" | "cviz19" | "cviz20";
+export declare type HvCategoricalColorKeys = "cat1" | "cat1_180" | "cat1_160" | "cat1_140" | "cat1_120" | "cat1_80" | "cat1_60" | "cat1_40" | "cat1_20" | "cat2" | "cat2_180" | "cat2_160" | "cat2_140" | "cat2_120" | "cat2_80" | "cat2_60" | "cat2_40" | "cat2_20" | "cat3" | "cat3_180" | "cat3_160" | "cat3_140" | "cat3_120" | "cat3_80" | "cat3_60" | "cat3_40" | "cat3_20" | "cat4" | "cat4_180" | "cat4_160" | "cat4_140" | "cat4_120" | "cat4_80" | "cat4_60" | "cat4_40" | "cat4_20" | "cat5" | "cat5_180" | "cat5_160" | "cat5_140" | "cat5_120" | "cat5_80" | "cat5_60" | "cat5_40" | "cat5_20" | "cat6" | "cat6_180" | "cat6_160" | "cat6_140" | "cat6_120" | "cat6_80" | "cat6_60" | "cat6_40" | "cat6_20" | "cat7" | "cat7_180" | "cat7_160" | "cat7_140" | "cat7_120" | "cat7_80" | "cat7_60" | "cat7_40" | "cat7_20" | "cat8" | "cat8_180" | "cat8_160" | "cat8_140" | "cat8_120" | "cat8_80" | "cat8_60" | "cat8_40" | "cat8_20" | "cat9" | "cat9_180" | "cat9_160" | "cat9_140" | "cat9_120" | "cat9_80" | "cat9_60" | "cat9_40" | "cat9_20" | "cat10" | "cat10_180" | "cat10_160" | "cat10_140" | "cat10_120" | "cat10_80" | "cat10_60" | "cat10_40" | "cat10_20" | "cat11" | "cat11_180" | "cat11_160" | "cat11_140" | "cat11_120" | "cat11_80" | "cat11_60" | "cat11_40" | "cat11_20" | "cat12" | "cat12_180" | "cat12_160" | "cat12_140" | "cat12_120" | "cat12_80" | "cat12_60" | "cat12_40" | "cat12_20" | "cat13" | "cat14" | "cat15" | "cat16" | "cat17" | "cat18" | "cat19" | "cat20";
 export declare interface HvCellInstance<D extends object = Record<string, unknown>, V = any> extends Omit<Cell<D, V>, "column" | "row">, UseGroupByCellProps<D> {
     column: HvColumnInstance<D>;
@@ -1852,8 +1852,6 @@ export declare type HvCheckBoxClasses = {
 };
 /**
- * A group of checkboxes.
- *
  * A checkbox group is a type of selection list that allows the user to select multiple options through the use of checkboxes.
  */
 export declare const HvCheckBoxGroup: ({ id, classes, className, children, name, label, description, status, statusMessage, defaultValue, value: valueProp, required, readOnly, disabled, showSelectAll, orientation, selectAllLabel, selectAllConjunctionLabel, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, onChange, ...others }: HvCheckBoxGroupProps) => JSX_2.Element;
@@ -4112,7 +4110,7 @@ export declare type HvPanelProps = HvBaseProps & {
     classes?: HvPanelClasses;
 };
-export declare type HvPolarizedColorKeys = "sema1" | "cviz21" | "cviz22" | "cviz23" | "cviz24" | "cviz25" | "cviz26" | "cviz27" | "cviz28" | "sema5";
+export declare type HvPolarizedColorKeys = "positive" | "positive_120" | "positive_80" | "warning" | "warning_120" | "warning_140" | "negative" | "cat21" | "cat22" | "cat23" | "cat24" | "cat25" | "cat26" | "cat27" | "cat28" | "catastrophic";
 export declare const HvProgressBar: (props: HvProgressBarProps) => JSX_2.Element;
@@ -4165,24 +4163,39 @@ declare interface HvProgressColumnCellProp {
 /**
  * Enables theming capabilities and makes cross-component theme properties available down the tree.
  */
-export declare const HvProvider: ({ children, rootElementId, enableCssBaseline, themes, theme, colorMode, classNameKey, }: HvProviderProps) => JSX_2.Element;
+export declare const HvProvider: ({ children, rootElementId, cssBaseline, cssTheme, themes, theme, colorMode, classNameKey, }: HvProviderProps) => JSX_2.Element;
 export declare type HvProviderProps = {
     /**
      * Your component tree.
      */
-    children?: React.ReactNode;
+    children?: React_2.ReactNode;
+    /**
+     * Id of your root element.
+     */
+    rootElementId?: string;
     /**
-     * By default the baseline styles are applied globally to the application to avoid styling conflicts and for the UI Kit components to work properly.
-     * If you are providing your own baseline styles, you can set this property to false.
+     * By default the baseline styles are applied globally, `global`, to the application for the UI Kit components to work properly.
+     * If you need to scope the baseline styles to avoid styling conflicts, you can set this property to `scoped`.
+     * To scope the baseline to your root, you need to add the `rootElementId` property.
+     * If the `rootElementId` property is not set, the baseline will be scoped to a new container, `hv-uikit-scoped-root*`, created around your content.
+     * If you are providing your own baseline styles, you can set this property to `none` to disable the baseline styles.
      */
-    enableCssBaseline?: boolean;
+    cssBaseline?: "global" | "scoped" | "none";
     /**
-     * Id of your root element. The theme's attributes and CSS variables will be set in this element.
+     * By default the theme styles are applied globally, `global`, to the application.
+     * If you need to scope the theme styles to avoid styling conflicts, you can set this property to `scoped`.
+     * To scope the theme to your root, you need to add the `rootElementId` property.
+     * If the `rootElementId` property is not set, the theme will be scoped to a new container, `hv-uikit-scoped-root*`, created around your content.
+     */
+    cssTheme?: "global" | "scoped";
+    /**
+     * The string used to prefix the class names and uniquely identify them. The key can only contain lower case alphabetical characters.
+     * This is useful to avoid class name collisions.
      *
-     * If no value is provided, the document's body will be used.
+     * If no value is provided, the default is `hv-uikit-css`.
      */
-    rootElementId?: string;
+    classNameKey?: string;
     /**
      * List of themes to be used by UI Kit.
      * You can provide your own themes created with the `createTheme` utility and/or the default themes `ds3` and `ds5` provided by UI Kit.
@@ -4203,13 +4216,6 @@ export declare type HvProviderProps = {
      * For the default themes `ds3` and `ds5`, the `dawn` color mode is the one used.
      */
     colorMode?: string;
-    /**
-     * The string used to prefix the class names and uniquely identify them. The key can only contain lower case alphabetical characters.
-     * This is useful to avoid class name collisions.
-     *
-     * If no value is provided, the default is `hv-uikit-css`.
-     */
-    classNameKey?: string;
 };
 /**
@@ -4562,11 +4568,11 @@ export declare type HvSelectionListProps = HvBaseProps<HTMLUListElement, {
     classes?: HvSelectionListClasses;
 };
-export declare type HvSemanticColorKeys = "sema1" | "sema2" | "sema3" | "sema4" | "sema5" | "sema6" | "sema7" | "sema8" | "sema9" | "sema10" | "sema11" | "sema12" | "sema13" | "sema14" | "sema15" | "sema16" | "sema17" | "sema18" | "sema19" | "sema20";
+export declare type HvSemanticColorKeys = "positive" | "neutral" | "warning" | "negative" | "catastrophic" | "sema6" | "neutral_20" | "positive_80" | "positive_120" | "positive_20" | "negative_20" | "negative_120" | "negative_80" | "sema10" | "sema11" | "sema12" | "sema13" | "sema14" | "sema15" | "sema16" | "sema17" | "sema18" | "sema19" | "warning_20" | "warning_140" | "warning_120";
 export declare type HvSemanticColors = Record<HvSemanticColorKeys, string>;
-export declare type HvSequentialColorKeys = "cviz1" | "cviz1_100" | "cviz1_200" | "cviz1_300" | "cviz1_400" | "cviz1_500" | "cviz1_600" | "cviz1_700" | "cviz1_800" | "cviz1_900";
+export declare type HvSequentialColorKeys = "cat1" | "cat1_100" | "cat1_200" | "cat1_300" | "cat1_400" | "cat1_500" | "cat1_600" | "cat1_700" | "cat1_800" | "cat1_900";
 export declare const HvSimpleGrid: ({ children, breakpoints, spacing, cols, ...others }: HvSimpleGridProps) => JSX_2.Element;
@@ -5920,15 +5926,14 @@ export declare interface HvThemePalette {
     support: HvSupportColors;
 }
-export declare const HvThemeProvider: ({ children, themes: themesList, theme, colorMode, rootElementId, classNameKey, }: HvThemeProviderProps) => JSX_2.Element;
+export declare const HvThemeProvider: ({ children, themes: themesList, theme, colorMode, themeRootId, }: HvThemeProviderProps) => JSX_2.Element;
 declare interface HvThemeProviderProps {
     children: React.ReactNode;
     themes: (HvTheme | HvThemeStructure)[];
     theme: string;
     colorMode: string;
-    classNameKey: string;
-    rootElementId?: string;
+    themeRootId?: string;
 }
 export declare const HvToggleButton: ForwardRefExoticComponent<HvBaseProps<HTMLButtonElement, {
@@ -6941,9 +6946,9 @@ export declare const rightControlClasses: HvRightControlClasses;
 export declare const selectionListClasses: HvSelectionListClasses;
 /**
- * Sets the element attributes for a theme and color mode.
+ * Sets the element attributes and style for a theme and color mode.
  */
-export declare const setElementAttrs: (theme: string, mode: string, styles: HvParsedThemeStyles, elementId?: string) => void;
+export declare const setElementAttrs: (themeName: string, modeName: string, colorScheme: string, themeRootId?: string) => void;
 export declare const setId: (...args: any[]) => string | undefined;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.0.0-next.21",
+  "version": "5.0.0-next.23",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -22,7 +22,6 @@
     "url": "https://github.com/lumada-design/hv-uikit-react/issues"
   },
   "peerDependencies": {
-    "@emotion/css": "^11.10.6",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/material": "^5.11.0",
@@ -31,9 +30,9 @@
   },
   "dependencies": {
     "@emotion/cache": "^11.10.5",
-    "@hitachivantara/uikit-react-icons": "^5.0.0-next.21",
-    "@hitachivantara/uikit-react-shared": "^5.0.0-next.19",
-    "@hitachivantara/uikit-styles": "^5.0.0-next.21",
+    "@hitachivantara/uikit-react-icons": "^5.0.0-next.22",
+    "@hitachivantara/uikit-react-shared": "^5.0.0-next.20",
+    "@hitachivantara/uikit-styles": "^5.0.0-next.22",
     "@popperjs/core": "^2.11.6",
     "@types/react-table": "^7.7.14",
     "attr-accept": "^2.2.2",
@@ -55,7 +54,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "ddfc339b19c2ccad1973e97329b6a94e657ddd9b",
+  "gitHead": "c040141e323ce6aed12fd7ca98ddb3720f78141a",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {

package/dist/cjs/hooks/useCreateEmotion.cjs DELETED Viewed

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const createEmotion = require("@emotion/css/create-instance");
-const React = require("react");
-require("@hitachivantara/uikit-styles");
-const uikitReactShared = require("@hitachivantara/uikit-react-shared");
-require("@mui/material/styles");
-require("@emotion/react/jsx-runtime");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const createEmotion__default = /* @__PURE__ */ _interopDefault(createEmotion);
-const useCreateEmotion = () => {
-  const {
-    classNameKey
-  } = React.useContext(uikitReactShared.HvThemeContext);
-  const emotionCss = React.useMemo(() => createEmotion__default.default({
-    key: classNameKey || "hv-uikit-css",
-    prepend: true
-  }), [classNameKey]);
-  return emotionCss;
-};
-exports.useCreateEmotion = useCreateEmotion;
-//# sourceMappingURL=useCreateEmotion.cjs.map

package/dist/cjs/hooks/useCreateEmotion.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"useCreateEmotion.cjs","sources":["../../../src/hooks/useCreateEmotion.ts"],"sourcesContent":["import createEmotion from \"@emotion/css/create-instance\";\nimport { useContext, useMemo } from \"react\";\nimport { HvThemeContext } from \"../providers/ThemeProvider\";\n\n/**\n * Emotion CSS utilities\n */\nexport const useCreateEmotion = () => {\n const { classNameKey } = useContext(HvThemeContext);\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 emotionCss = useMemo(\n () =>\n createEmotion({\n key: classNameKey || \"hv-uikit-css\",\n prepend: true,\n }),\n [classNameKey]\n );\n\n return emotionCss;\n};\n"],"names":["useCreateEmotion","classNameKey","useContext","HvThemeContext","emotionCss","useMemo","createEmotion","key","prepend"],"mappings":";;;;;;;;;;AAOO,MAAMA,mBAAmBA,MAAM;AAC9B,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAiBC,MAAAA,WAAWC,iBAAAA,cAAc;AAK5CC,QAAAA,aAAaC,cACjB,MACEC,+BAAc;AAAA,IACZC,KAAKN,gBAAgB;AAAA,IACrBO,SAAS;AAAA,EAAA,CACV,GACH,CAACP,YAAY,CAAC;AAGTG,SAAAA;AACT;;"}

package/dist/esm/hooks/useCreateEmotion.js DELETED Viewed

@@ -1,20 +0,0 @@
-import createEmotion from "@emotion/css/create-instance";
-import { useContext, useMemo } from "react";
-import "@hitachivantara/uikit-styles";
-import { HvThemeContext } from "@hitachivantara/uikit-react-shared";
-import "@mui/material/styles";
-import "@emotion/react/jsx-runtime";
-const useCreateEmotion = () => {
-  const {
-    classNameKey
-  } = useContext(HvThemeContext);
-  const emotionCss = useMemo(() => createEmotion({
-    key: classNameKey || "hv-uikit-css",
-    prepend: true
-  }), [classNameKey]);
-  return emotionCss;
-};
-export {
-  useCreateEmotion
-};
-//# sourceMappingURL=useCreateEmotion.js.map

package/dist/esm/hooks/useCreateEmotion.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"useCreateEmotion.js","sources":["../../../src/hooks/useCreateEmotion.ts"],"sourcesContent":["import createEmotion from \"@emotion/css/create-instance\";\nimport { useContext, useMemo } from \"react\";\nimport { HvThemeContext } from \"../providers/ThemeProvider\";\n\n/**\n * Emotion CSS utilities\n */\nexport const useCreateEmotion = () => {\n const { classNameKey } = useContext(HvThemeContext);\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 emotionCss = useMemo(\n () =>\n createEmotion({\n key: classNameKey || \"hv-uikit-css\",\n prepend: true,\n }),\n [classNameKey]\n );\n\n return emotionCss;\n};\n"],"names":["useCreateEmotion","classNameKey","useContext","HvThemeContext","emotionCss","useMemo","createEmotion","key","prepend"],"mappings":";;;;;;AAOO,MAAMA,mBAAmBA,MAAM;AAC9B,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAiBC,WAAWC,cAAc;AAK5CC,QAAAA,aAAaC,QACjB,MACEC,cAAc;AAAA,IACZC,KAAKN,gBAAgB;AAAA,IACrBO,SAAS;AAAA,EAAA,CACV,GACH,CAACP,YAAY,CAAC;AAGTG,SAAAA;AACT;"}