@hitachivantara/uikit-react-core 5.97.0 → 5.99.0

package/dist/esm/Select/Select.js

@@ -130,8 +130,8 @@ const HvSelect = fixedForwardRef(function HvSelect2(props, ref) {
       readOnly,
       status: validationState,
       className: cx(classes.root, className, {
-        [classes.disabled]: disabled,
-        [classes.readOnly]: readOnly
+        [classes.readOnly]: readOnly,
+        [classes.disabled]: disabled
       }),
       ...others,
       children: [

package/dist/esm/StatusIcon/StatusIcon.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvIcon } from "../icons.js";
+import { useClasses } from "./StatusIcon.styles.js";
+import { staticClasses } from "./StatusIcon.styles.js";
+import { HvIconContainer } from "../IconContainer/IconContainer.js";
+const variantIconMap = {
+  success: "Success",
+  warning: "Caution",
+  error: "Fail",
+  info: "Info"
+};
+const HvStatusIcon = forwardRef(function HvStatusIcon2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    variant = "default",
+    customIcon,
+    size = "sm",
+    type = "full"
+  } = useDefaultProps("HvStatusIcon", props);
+  const { classes, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-variant": variant,
+      "data-type": type,
+      "data-size": size,
+      className: cx(classes.root, className),
+      children: /* @__PURE__ */ jsx(HvIconContainer, { size, children: customIcon || /* @__PURE__ */ jsx(
+        HvIcon,
+        {
+          compact: true,
+          className: classes.icon,
+          name: variantIconMap[variant]
+        }
+      ) })
+    }
+  );
+});
+export {
+  HvStatusIcon,
+  staticClasses as statusIconClasses
+};

package/dist/esm/StatusIcon/StatusIcon.styles.js

@@ -0,0 +1,57 @@
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+import { theme } from "@hitachivantara/uikit-styles";
+const notificationMap = {
+  success: "positive",
+  warning: "warning",
+  error: "negative",
+  default: "info",
+  info: "info",
+  accent: "accent"
+};
+const { staticClasses, useClasses } = createClasses("HvStatusIcon", {
+  root: {
+    display: "inline-flex",
+    lineHeight: 0,
+    flexShrink: 0,
+    padding: theme.space.xxs,
+    "--icsize": "auto",
+    [`&[data-size=xs]`]: { borderRadius: theme.radii.base },
+    [`&[data-size=sm]`]: { borderRadius: theme.radii.base },
+    [`&[data-size=md]`]: { borderRadius: theme.radii.round },
+    [`&[data-size=lg]`]: { borderRadius: theme.radii.large },
+    [`&[data-size=xl]`]: { borderRadius: theme.radii.large },
+    [`:not([data-type="simple"])`]: {
+      outline: "1px solid currentcolor"
+    },
+    ...Object.fromEntries(
+      Object.entries(notificationMap).map(([variant, color]) => [
+        [`&[data-variant="${variant}"]`],
+        {
+          color: theme.colors[color],
+          outline: `1px solid ${theme.colors[`${color}Border`]}`,
+          backgroundColor: theme.colors[`${color}Dimmed`],
+          [`&[data-type="simple"]`]: {
+            outline: "none",
+            backgroundColor: "transparent"
+          }
+        }
+      ])
+    ),
+    [`&[data-variant="default"]`]: {
+      color: theme.colors.text,
+      backgroundColor: theme.colors.bgContainerSecondary,
+      outline: `1px solid ${theme.colors.borderSubtle}`,
+      [`&[data-type="simple"]`]: {
+        outline: "none",
+        backgroundColor: "transparent"
+      }
+    }
+  },
+  icon: {
+    fontSize: "inherit"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};

package/dist/esm/Switch/Switch.js

@@ -120,7 +120,7 @@ const HvSwitch = forwardRef(
                       switchBase: css({
                         "&&&+.HvBaseSwitch-track,&&&.HvBaseSwitch-checked+.HvBaseSwitch-track": {
                           backgroundColor: getColor(color),
-                          borderColor: isSemantical(color) ? getColor(`${color}_120`) : "#00000032"
+                          borderColor: isSemantical(color) ? getColor(`${color}Deep`) : "#00000032"
                         }
                       })
                     }

package/dist/esm/Table/TableSection/TableSection.styles.js

@@ -14,13 +14,7 @@ import { staticClasses as staticClasses$6 } from "../TableContainer/TableContain
 import "../TableContainer/TableContainer.js";
 const { staticClasses, useClasses } = createClasses("HvTableSection", {
   root: {},
-  header: {
-    // Only apply the border to divide the header and content when both are displayed
-    "+ div": {
-      borderTopLeftRadius: 0,
-      borderTopRightRadius: 0
-    }
-  },
+  header: {},
   actions: {},
   content: {
     marginTop: 0,

package/dist/esm/TagsInput/TagsInput.js

@@ -295,8 +295,8 @@ const HvTagsInput = forwardRef(
         className: cx(
           classes.root,
           {
-            [classes.disabled]: disabled,
-            [classes.readOnly]: readOnly
+            [classes.readOnly]: readOnly,
+            [classes.disabled]: disabled
           },
           className
         ),

package/dist/esm/TextArea/TextArea.js

@@ -189,8 +189,8 @@ const HvTextArea = forwardRef(function HvTextArea2(props, ref) {
         classes.root,
         {
           [classes.resizable]: resizable,
-          [classes.disabled]: disabled,
-          [classes.invalid]: isStateInvalid
+          [classes.invalid]: isStateInvalid,
+          [classes.disabled]: disabled
         },
         className
       ),

package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.js

@@ -386,7 +386,6 @@ const HvVerticalNavigationTreeViewItem = forwardRef(
         className: cx(
           classes.node,
           {
-            [classes.disabled]: disabled,
             [classes.expandable]: expandable,
             [classes.collapsed]: expandable && !expanded,
             [classes.expanded]: expandable && expanded,
@@ -395,7 +394,8 @@ const HvVerticalNavigationTreeViewItem = forwardRef(
             [classes.selected]: !disabled && selectable && selected || !isOpen && useIcons && isChildSelected && isChildSelected(nodeId),
             [classes.unselected]: !disabled && selectable && !selected,
             [classes.focused]: focused,
-            [classes.hide]: !isOpen && !useIcons
+            [classes.hide]: !isOpen && !useIcons,
+            [classes.disabled]: disabled
           },
           className
         ),

package/dist/esm/index.js

@@ -229,24 +229,26 @@ import { staticClasses as staticClasses93 } from "./SnackbarProvider/SnackbarPro
 import { HvSnackbarProvider, useHvSnackbar } from "./SnackbarProvider/SnackbarProvider.js";
 import { staticClasses as staticClasses94 } from "./Stack/Stack.styles.js";
 import { HvStack } from "./Stack/Stack.js";
-import { staticClasses as staticClasses95 } from "./Switch/Switch.styles.js";
+import { staticClasses as staticClasses95 } from "./StatusIcon/StatusIcon.styles.js";
+import { HvStatusIcon } from "./StatusIcon/StatusIcon.js";
+import { staticClasses as staticClasses96 } from "./Switch/Switch.styles.js";
 import { HvSwitch } from "./Switch/Switch.js";
 import { useHvTable, useHvTable as useHvTable2 } from "./Table/hooks/useHvTable.js";
-import { staticClasses as staticClasses96 } from "./Table/Table.styles.js";
+import { staticClasses as staticClasses97 } from "./Table/Table.styles.js";
 import { HvTable } from "./Table/Table.js";
-import { staticClasses as staticClasses97 } from "./Table/TableContainer/TableContainer.styles.js";
+import { staticClasses as staticClasses98 } from "./Table/TableContainer/TableContainer.styles.js";
 import { HvTableContainer } from "./Table/TableContainer/TableContainer.js";
-import { staticClasses as staticClasses98 } from "./Table/TableSection/TableSection.styles.js";
+import { staticClasses as staticClasses99 } from "./Table/TableSection/TableSection.styles.js";
 import { HvTableSection } from "./Table/TableSection/TableSection.js";
-import { staticClasses as staticClasses99 } from "./Table/TableBody/TableBody.styles.js";
+import { staticClasses as staticClasses100 } from "./Table/TableBody/TableBody.styles.js";
 import { HvTableBody } from "./Table/TableBody/TableBody.js";
-import { staticClasses as staticClasses100 } from "./Table/TableHead/TableHead.styles.js";
+import { staticClasses as staticClasses101 } from "./Table/TableHead/TableHead.styles.js";
 import { HvTableHead } from "./Table/TableHead/TableHead.js";
-import { staticClasses as staticClasses101 } from "./Table/TableHeader/TableHeader.styles.js";
+import { staticClasses as staticClasses102 } from "./Table/TableHeader/TableHeader.styles.js";
 import { HvTableHeader } from "./Table/TableHeader/TableHeader.js";
-import { staticClasses as staticClasses102 } from "./Table/TableRow/TableRow.styles.js";
+import { staticClasses as staticClasses103 } from "./Table/TableRow/TableRow.styles.js";
 import { HvTableRow } from "./Table/TableRow/TableRow.js";
-import { staticClasses as staticClasses103 } from "./Table/TableCell/TableCell.styles.js";
+import { staticClasses as staticClasses104 } from "./Table/TableCell/TableCell.styles.js";
 import { HvTableCell } from "./Table/TableCell/TableCell.js";
 import { useHvTableStyles } from "./Table/hooks/useHvTableStyles.js";
 import { useHvSortBy } from "./Table/hooks/useHvSortBy.js";
@@ -265,48 +267,48 @@ import { HvDateColumnCell } from "./Table/renderers/DateColumnCell.js";
 import { HvDropdownColumnCell } from "./Table/renderers/DropdownColumnCell.js";
 import { HvProgressColumnCell } from "./Table/renderers/ProgressColumnCell.js";
 import { HvSwitchColumnCell } from "./Table/renderers/SwitchColumnCell.js";
-import { staticClasses as staticClasses104 } from "./Tabs/Tabs.styles.js";
+import { staticClasses as staticClasses105 } from "./Tabs/Tabs.styles.js";
 import { HvTabs } from "./Tabs/Tabs.js";
-import { staticClasses as staticClasses105 } from "./Tabs/Tab/Tab.styles.js";
+import { staticClasses as staticClasses106 } from "./Tabs/Tab/Tab.styles.js";
 import { HvTab } from "./Tabs/Tab/Tab.js";
-import { staticClasses as staticClasses106 } from "./Tag/Tag.styles.js";
+import { staticClasses as staticClasses107 } from "./Tag/Tag.styles.js";
 import { HvTag } from "./Tag/Tag.js";
-import { staticClasses as staticClasses107 } from "./TagsInput/TagsInput.styles.js";
+import { staticClasses as staticClasses108 } from "./TagsInput/TagsInput.styles.js";
 import { HvTagsInput } from "./TagsInput/TagsInput.js";
-import { staticClasses as staticClasses108 } from "./TextArea/TextArea.styles.js";
+import { staticClasses as staticClasses109 } from "./TextArea/TextArea.styles.js";
 import { HvTextArea } from "./TextArea/TextArea.js";
-import { staticClasses as staticClasses109 } from "./TimeAgo/TimeAgo.styles.js";
+import { staticClasses as staticClasses110 } from "./TimeAgo/TimeAgo.styles.js";
 import { HvTimeAgo } from "./TimeAgo/TimeAgo.js";
-import { staticClasses as staticClasses110 } from "./TimePicker/TimePicker.styles.js";
+import { staticClasses as staticClasses111 } from "./TimePicker/TimePicker.styles.js";
 import { HvTimePicker } from "./TimePicker/TimePicker.js";
 import { HvToggleButton } from "./ToggleButton/ToggleButton.js";
-import { staticClasses as staticClasses111 } from "./Tooltip/Tooltip.styles.js";
+import { staticClasses as staticClasses112 } from "./Tooltip/Tooltip.styles.js";
 import { HvTooltip } from "./Tooltip/Tooltip.js";
-import { staticClasses as staticClasses112 } from "./TreeView/TreeView.styles.js";
+import { staticClasses as staticClasses113 } from "./TreeView/TreeView.styles.js";
 import { HvTreeView } from "./TreeView/TreeView.js";
-import { staticClasses as staticClasses113 } from "./TreeView/TreeItem/TreeItem.styles.js";
+import { staticClasses as staticClasses114 } from "./TreeView/TreeItem/TreeItem.styles.js";
 import { HvTreeItem } from "./TreeView/TreeItem/TreeItem.js";
 import { useHvTreeItem } from "./TreeView/TreeItem/useHvTreeItem.js";
-import { staticClasses as staticClasses114 } from "./VerticalNavigation/VerticalNavigation.styles.js";
+import { staticClasses as staticClasses115 } from "./VerticalNavigation/VerticalNavigation.styles.js";
 import { HvVerticalNavigation } from "./VerticalNavigation/VerticalNavigation.js";
-import { staticClasses as staticClasses115 } from "./VerticalNavigation/Header/Header.styles.js";
+import { staticClasses as staticClasses116 } from "./VerticalNavigation/Header/Header.styles.js";
 import { HvVerticalNavigationHeader } from "./VerticalNavigation/Header/Header.js";
-import { staticClasses as staticClasses116 } from "./VerticalNavigation/Actions/Actions.styles.js";
+import { staticClasses as staticClasses117 } from "./VerticalNavigation/Actions/Actions.styles.js";
 import { HvVerticalNavigationActions } from "./VerticalNavigation/Actions/Actions.js";
-import { staticClasses as staticClasses117 } from "./VerticalNavigation/Actions/Action.styles.js";
+import { staticClasses as staticClasses118 } from "./VerticalNavigation/Actions/Action.styles.js";
 import { HvVerticalNavigationAction } from "./VerticalNavigation/Actions/Action.js";
-import { staticClasses as staticClasses118 } from "./VerticalNavigation/Navigation/Navigation.styles.js";
+import { staticClasses as staticClasses119 } from "./VerticalNavigation/Navigation/Navigation.styles.js";
 import { HvVerticalNavigationTree } from "./VerticalNavigation/Navigation/Navigation.js";
-import { staticClasses as staticClasses119 } from "./VerticalNavigation/NavigationSlider/NavigationSlider.styles.js";
+import { staticClasses as staticClasses120 } from "./VerticalNavigation/NavigationSlider/NavigationSlider.styles.js";
 import { HvVerticalNavigationSlider } from "./VerticalNavigation/NavigationSlider/NavigationSlider.js";
-import { staticClasses as staticClasses120 } from "./VerticalNavigation/TreeView/TreeView.styles.js";
+import { staticClasses as staticClasses121 } from "./VerticalNavigation/TreeView/TreeView.styles.js";
 import { HvVerticalNavigationTreeView } from "./VerticalNavigation/TreeView/TreeView.js";
-import { staticClasses as staticClasses121 } from "./VerticalNavigation/TreeView/TreeViewItem.styles.js";
+import { staticClasses as staticClasses122 } from "./VerticalNavigation/TreeView/TreeViewItem.styles.js";
 import { HvVerticalNavigationTreeViewItem } from "./VerticalNavigation/TreeView/TreeViewItem.js";
 import { VerticalNavigationContext } from "./VerticalNavigation/VerticalNavigationContext.js";
 import { HvIconButton } from "./IconButton/IconButton.js";
-import { HvIconContainer, staticClasses as staticClasses122, staticClasses as staticClasses123, useClasses } from "./IconContainer/IconContainer.js";
-import { staticClasses as staticClasses124 } from "./Skeleton/Skeleton.styles.js";
+import { HvIconContainer, staticClasses as staticClasses123, staticClasses as staticClasses124, useClasses } from "./IconContainer/IconContainer.js";
+import { staticClasses as staticClasses125 } from "./Skeleton/Skeleton.styles.js";
 import { HvSkeleton } from "./Skeleton/Skeleton.js";
 import { EmotionContext, HvThemeContext, defaultCacheKey, defaultEmotionCache } from "@hitachivantara/uikit-react-shared";
 export {
@@ -417,6 +419,7 @@ export {
   HvSnackbarContent,
   HvSnackbarProvider,
   HvStack,
+  HvStatusIcon,
   HvSuggestions,
   HvSwitch,
   HvSwitchColumnCell,
@@ -454,8 +457,8 @@ export {
   VerticalNavigationContext,
   staticClasses17 as accordionClasses,
   staticClasses18 as actionBarClasses,
-  staticClasses117 as actionClasses,
-  staticClasses116 as actionsClasses,
+  staticClasses118 as actionClasses,
+  staticClasses117 as actionsClasses,
   staticClasses19 as actionsGenericClasses,
   staticClasses7 as adornmentClasses,
   staticClasses21 as appSwitcherActionClasses,
@@ -539,7 +542,7 @@ export {
   hvSwitchColumn,
   hvTagColumn,
   hvTextColumn,
-  staticClasses122 as iconContainerClasses,
+  staticClasses123 as iconContainerClasses,
   iconVariant,
   increaseSize,
   staticClasses10 as infoMessageClasses,
@@ -583,37 +586,38 @@ export {
   setId,
   setUid,
   staticClasses89 as simpleGridClasses,
-  staticClasses124 as skeletonClasses,
+  staticClasses125 as skeletonClasses,
   staticClasses90 as sliderClasses,
   staticClasses91 as snackbarClasses,
   staticClasses92 as snackbarContentClasses,
   staticClasses93 as snackbarProviderClasses,
   staticClasses94 as stackClasses,
-  staticClasses123 as staticClasses,
+  staticClasses124 as staticClasses,
+  staticClasses95 as statusIconClasses,
   staticClasses14 as suggestionsClasses,
-  staticClasses95 as switchClasses,
-  staticClasses105 as tabClasses,
-  staticClasses99 as tableBodyClasses,
-  staticClasses103 as tableCellClasses,
-  staticClasses96 as tableClasses,
-  staticClasses97 as tableContainerClasses,
-  staticClasses100 as tableHeadClasses,
-  staticClasses101 as tableHeaderClasses,
-  staticClasses102 as tableRowClasses,
-  staticClasses98 as tableSectionClasses,
-  staticClasses104 as tabsClasses,
-  staticClasses106 as tagClasses,
-  staticClasses107 as tagsInputClasses,
-  staticClasses108 as textAreaClasses,
+  staticClasses96 as switchClasses,
+  staticClasses106 as tabClasses,
+  staticClasses100 as tableBodyClasses,
+  staticClasses104 as tableCellClasses,
+  staticClasses97 as tableClasses,
+  staticClasses98 as tableContainerClasses,
+  staticClasses101 as tableHeadClasses,
+  staticClasses102 as tableHeaderClasses,
+  staticClasses103 as tableRowClasses,
+  staticClasses99 as tableSectionClasses,
+  staticClasses105 as tabsClasses,
+  staticClasses107 as tagClasses,
+  staticClasses108 as tagsInputClasses,
+  staticClasses109 as textAreaClasses,
   theme,
   themes,
-  staticClasses109 as timeAgoClasses,
-  staticClasses110 as timePickerClasses,
-  staticClasses111 as tooltipClasses,
-  staticClasses113 as treeItemClasses,
-  staticClasses112 as treeView2Classes,
-  staticClasses120 as treeViewClasses,
-  staticClasses121 as treeViewItemClasses,
+  staticClasses110 as timeAgoClasses,
+  staticClasses111 as timePickerClasses,
+  staticClasses112 as tooltipClasses,
+  staticClasses114 as treeItemClasses,
+  staticClasses113 as treeView2Classes,
+  staticClasses121 as treeViewClasses,
+  staticClasses122 as treeViewItemClasses,
   staticClasses as typographyClasses,
   typographyVariants,
   uniqueId,
@@ -650,10 +654,10 @@ export {
   useTheme,
   useUniqueId,
   useWidth,
-  staticClasses114 as verticalNavigationClasses,
-  staticClasses115 as verticalNavigationHeaderClasses,
-  staticClasses119 as verticalNavigationSliderClasses,
-  staticClasses118 as verticalNavigationTreeClasses,
+  staticClasses115 as verticalNavigationClasses,
+  staticClasses116 as verticalNavigationHeaderClasses,
+  staticClasses120 as verticalNavigationSliderClasses,
+  staticClasses119 as verticalNavigationTreeClasses,
   staticClasses86 as verticalScrollListItemClasses,
   staticClasses11 as warningTextClasses
 };

package/dist/esm/providers/Provider.js

@@ -1,14 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import createCache from "@emotion/cache";
 import { CacheProvider, Global, css, ClassNames } from "@emotion/react";
 import { CssBaseline, getThemesVars, CssScopedBaseline } from "@hitachivantara/uikit-styles";
-import { useUniqueId } from "../hooks/useUniqueId.js";
 import { getElementById } from "../utils/document.js";
 import { processThemes } from "../utils/theme.js";
 import { HvThemeProvider } from "./ThemeProvider.js";
 import { defaultCacheKey, defaultEmotionCache } from "@hitachivantara/uikit-react-shared";
-const scopedRootPrefix = "hv-uikit-scoped-root";
 const HvProvider = ({
   children,
   rootElementId,
@@ -20,8 +18,7 @@ const HvProvider = ({
   emotionCache: emotionCacheProp,
   classNameKey = defaultCacheKey
 }) => {
-  const generatedId = useUniqueId();
-  const scopedRootId = `${scopedRootPrefix}-${generatedId}`;
+  const scopedRootId = useId();
   const themesList = processThemes(themes);
   const emotionCache = useMemo(() => {
     if (emotionCacheProp) return emotionCacheProp;

package/dist/esm/themes/ds3.js

@@ -19,6 +19,10 @@ const ds3 = mergeTheme(ds3$1, {
       classes: {
         root: {
           borderRadius: 0
+        },
+        messageIcon: {
+          color: "inherit !important",
+          padding: 0
         }
       }
     },
@@ -484,6 +488,22 @@ const ds3 = mergeTheme(ds3$1, {
       classes: {
         titleText: {
           ...theme.typography.xxsTitle
+        },
+        root: {
+          "& .HvStatusIcon-root": {
+            padding: 0
+          },
+          "& .HvIconContainer-root": {
+            color: `${theme.colors.secondary}!important`
+          }
+        }
+      }
+    },
+    HvDialogContent: {
+      classes: {
+        root: {
+          borderTop: "none!important",
+          borderBottom: "none!important"
         }
       }
     },
@@ -1200,6 +1220,9 @@ const ds3 = mergeTheme(ds3$1, {
           maxHeight: "calc(100% - (2 * 100px))"
         }
       }
+    },
+    HvStatusIcon: {
+      type: "simple"
     }
   }
 });

package/dist/esm/themes/ds5.js

@@ -76,6 +76,14 @@ const ds5 = mergeTheme(ds5$1, {
         }
       }
     },
+    HvCallout: {
+      classes: {
+        messageIcon: {
+          color: "inherit !important",
+          padding: 0
+        }
+      }
+    },
     HvDropdownButton: {
       classes: {
         open: {
@@ -116,6 +124,9 @@ const ds5 = mergeTheme(ds5$1, {
         }
       }
     },
+    HvStatusIcon: {
+      type: "simple"
+    },
     HvTab: {
       classes: {
         root: {
@@ -134,6 +145,26 @@ const ds5 = mergeTheme(ds5$1, {
           "--tagColor": theme.alpha("cat1", 0.2)
         }
       }
+    },
+    HvDialogTitle: {
+      classes: {
+        root: {
+          "& .HvStatusIcon-root": {
+            padding: 0
+          },
+          "& .HvIconContainer-root": {
+            color: `${theme.colors.secondary}!important`
+          }
+        }
+      }
+    },
+    HvDialogContent: {
+      classes: {
+        root: {
+          borderTop: "none",
+          borderBottom: "none"
+        }
+      }
     }
   }
 });