@hitachivantara/uikit-react-core 5.100.1 → 5.102.0

package/dist/cjs/Dropdown/Dropdown.cjs

@@ -292,6 +292,7 @@ const HvDropdown = generic.fixedForwardRef(function HvDropdown2(props, ref) {
                 height,
                 maxHeight,
                 virtualized,
+                "data-is-dropdown": "true",
                 ...listProps
               }
             )

package/dist/cjs/Pagination/Pagination.styles.cjs

@@ -49,7 +49,14 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvPaginatio
     display: "flex",
     alignItems: "center",
     [`& .${BaseDropdown_styles.staticClasses.arrowContainer}`]: {
-      marginTop: -2
+      display: "flex",
+      alignItems: "center",
+      top: "unset",
+      height: 24,
+      "> svg": {
+        marginTop: 0,
+        marginBottom: 0
+      }
     }
   },
   pageSizeRoot: {

package/dist/cjs/Table/TableHeader/TableHeader.styles.cjs

@@ -91,6 +91,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
   },
   sortable: {},
   sortButton: {
+    paddingLeft: 4,
+    paddingTop: 4,
     ":focus-visible": {
       boxShadow: "none",
       backgroundColor: "transparent"

package/dist/cjs/Table/renderers/renderers.cjs

@@ -11,7 +11,6 @@ const SwitchColumnCell = require("./SwitchColumnCell.cjs");
 const Button = require("../../Button/Button.cjs");
 const Tag = require("../../Tag/Tag.cjs");
 const OverflowTooltip = require("../../OverflowTooltip/OverflowTooltip.cjs");
-const Typography = require("../../Typography/Typography.cjs");
 const EM_DASH = "—";
 const hvStringFallback = (value) => {
   return typeof value === "string" && value !== "" ? value : EM_DASH;
@@ -102,7 +101,7 @@ function hvTagColumn(col, valueDataKey, colorDataKey, textColorDataKey, fromRowD
       return /* @__PURE__ */ jsxRuntime.jsx(
         Tag.HvTag,
         {
-          label: /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "body", children: name }),
+          label: name,
           type: "semantic",
           color,
           style: textColor != null ? { color: textColor } : {},

package/dist/cjs/Tag/Tag.styles.cjs

@@ -10,7 +10,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTag", {
     cursor: "default",
     color: uikitStyles.theme.colors.textDark,
     borderColor: uikitStyles.theme.colors.border,
-    borderRadius: 0,
+    borderRadius: uikitStyles.theme.radii.round,
     maxWidth: 180,
     whiteSpace: "nowrap",
     transition: "background-color 0.3s ease",
@@ -24,7 +24,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTag", {
     }
   },
   hasIcon: {
-    paddingLeft: 2
+    paddingLeft: uikitStyles.theme.space.xxs
   },
   /** @deprecated */
   outlined: {
@@ -66,11 +66,12 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTag", {
     }
   },
   label: {
-    padding: uikitStyles.theme.spacing(0, "xxs"),
+    padding: uikitStyles.theme.spacing(0, "xs"),
     color: "inherit"
   },
   deleteIcon: {
     margin: 0,
+    marginRight: uikitStyles.theme.space.xxs,
     padding: 2,
     ":hover": {
       backgroundColor: uikitStyles.theme.colors.bgHover

package/dist/cjs/icons.cjs

@@ -49,7 +49,7 @@ const defaultIconPathMap = {
   Close: "m8.7 8 5.3 5.3-.7.7L8 8.7 2.7 14l-.7-.7L7.3 8 2 2.7l.7-.7L8 7.3 13.3 2l.7.7z",
   Search: "M15.07 14.52 10.5 9.95a5.96 5.96 0 1 0-.72.7l4.58 4.58zM5.9 11A4.95 4.95 0 0 1 1 6v-.1A4.95 4.95 0 0 1 6 1h.1A4.95 4.95 0 0 1 11 6v.1A4.95 4.95 0 0 1 6 11z",
   SortAsc: "M.08 6.07 6.5.01l6.42 6.06Zm0 0",
-  SortDesc: "M1.76 5 6 .76 10.24 5z",
+  SortDesc: "M12.92 8.93 6.5 14.99.08 8.93Zm0 0",
   Sort: "M10.24 7 6 11.24 1.76 7zM1.76 5 6 .76 10.24 5z",
   // single-use icons in Widgets
   Calendar: "M10.5 2V0h-1v2h-3V0h-1v2H0v14h16V2zM15 15H1V3h14zM3 6h2v2H3zm4 0h2v2H7zm4 0h2v2h-2zm-8 4h2v2H3zm4 0h2v2H7zm4 0h2v2h-2z",

package/dist/cjs/themes/ds5.cjs

@@ -31,16 +31,31 @@ const ds5 = uikitStyles.mergeTheme(uikitStyles.ds5, {
         panel: {
           "--r": uikitStyles.theme.radii.round,
           "&[data-popper-placement*='top']": {
+            top: 1,
+            borderRadius: "var(--r) var(--r) var(--r) 0"
+          },
+          "&[data-popper-placement*='top']:has([data-is-dropdown='true'])": {
             top: 1,
             borderRadius: "var(--r) var(--r) 0 0"
           },
           "&[data-popper-placement*='bottom']": {
+            top: -1,
+            borderRadius: "0 var(--r) var(--r) var(--r)"
+          },
+          "&[data-popper-placement*='bottom']:has([data-is-dropdown='true'])": {
             top: -1,
             borderRadius: "0 0 var(--r) var(--r)"
           }
         }
       }
     },
+    HvBreadCrumb: {
+      classes: {
+        link: {
+          borderRadius: uikitStyles.theme.radii.round
+        }
+      }
+    },
     HvButton: {
       radius: "round",
       classes: {
@@ -78,6 +93,26 @@ const ds5 = uikitStyles.mergeTheme(uikitStyles.ds5, {
         }
       }
     },
+    HvCalendar: {
+      classes: {
+        root: {
+          " .HvCalendarCell-cellContainer": {
+            borderRadius: uikitStyles.theme.radii.round,
+            "& .HvCalendarCell-startBookend": {
+              borderTopLeftRadius: uikitStyles.theme.radii.round,
+              borderBottomLeftRadius: uikitStyles.theme.radii.round
+            },
+            "& .HvCalendarCell-endBookend": {
+              borderTopRightRadius: uikitStyles.theme.radii.round,
+              borderBottomRightRadius: uikitStyles.theme.radii.round
+            }
+          },
+          " .HvCalendarCell-calendarDateSelected": {
+            borderRadius: uikitStyles.theme.radii.round
+          }
+        }
+      }
+    },
     HvCallout: {
       classes: {
         messageIcon: {
@@ -86,6 +121,27 @@ const ds5 = uikitStyles.mergeTheme(uikitStyles.ds5, {
         }
       }
     },
+    HvColorPicker: {
+      classes: {
+        colorPicker: {
+          " .HvColorPickerPresetColors-swatchWrap > span > div": {
+            borderRadius: uikitStyles.theme.radii.round
+          },
+          " .HvColorPickerSavedColors-swatchWrap > span > div": {
+            borderRadius: uikitStyles.theme.radii.round
+          },
+          " .HvColorPickerPicker-saturation > div": {
+            borderRadius: uikitStyles.theme.radii.round,
+            " .saturation-white": {
+              borderRadius: uikitStyles.theme.radii.round,
+              " .saturation-black": {
+                borderRadius: uikitStyles.theme.radii.round
+              }
+            }
+          }
+        }
+      }
+    },
     HvDropdownButton: {
       classes: {
         open: {
@@ -102,6 +158,22 @@ const ds5 = uikitStyles.mergeTheme(uikitStyles.ds5, {
     },
     HvMultiButton: {
       classes: {
+        multiple: {
+          borderRadius: uikitStyles.theme.radii.round,
+          "& .HvMultiButton-button.HvMultiButton-selected": {
+            borderRadius: uikitStyles.theme.radii.round,
+            borderColor: uikitStyles.theme.colors.primary,
+            borderWidth: 2
+          }
+        },
+        vertical: {
+          borderRadius: uikitStyles.theme.radii.round,
+          "& .HvMultiButton-button.HvMultiButton-selected": {
+            borderRadius: uikitStyles.theme.radii.round,
+            borderColor: uikitStyles.theme.colors.primary,
+            borderWidth: 2
+          }
+        },
         splitGroup: {
           // NEXT5 subtle multi-buttons have a custom background
           "& .HvButton-subtle": {
@@ -126,6 +198,13 @@ const ds5 = uikitStyles.mergeTheme(uikitStyles.ds5, {
         }
       }
     },
+    HvSnackbarContent: {
+      classes: {
+        root: {
+          borderRadius: uikitStyles.theme.radii.round
+        }
+      }
+    },
     HvStatusIcon: {
       type: "simple"
     },
@@ -138,6 +217,13 @@ const ds5 = uikitStyles.mergeTheme(uikitStyles.ds5, {
         }
       }
     },
+    HvTabs: {
+      classes: {
+        indicator: {
+          backgroundColor: uikitStyles.theme.colors.primaryStrong
+        }
+      }
+    },
     HvTag: {
       classes: {
         root: {
@@ -145,6 +231,17 @@ const ds5 = uikitStyles.mergeTheme(uikitStyles.ds5, {
         },
         categorical: {
           "--tagColor": uikitStyles.theme.alpha("cat1", 0.2)
+        },
+        xs: {
+          height: 19
+        }
+      }
+    },
+    HvDialog: {
+      classes: {
+        statusBar: {
+          borderTopLeftRadius: uikitStyles.theme.radii.round,
+          borderTopRightRadius: uikitStyles.theme.radii.round
         }
       }
     },
@@ -167,6 +264,13 @@ const ds5 = uikitStyles.mergeTheme(uikitStyles.ds5, {
           borderBottom: "none"
         }
       }
+    },
+    HvDialogActions: {
+      classes: {
+        root: {
+          borderTop: `1px solid ${uikitStyles.theme.colors.borderSubtle}`
+        }
+      }
     }
   }
 });

package/dist/cjs/themes/pentahoPlus.cjs

@@ -253,7 +253,6 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
         root: {
           outline: `1px solid ${uikitStyles.theme.colors.border}`,
           outlineOffset: -1,
-          borderRadius: uikitStyles.theme.radii.round,
           ":where(:not([data-color],.HvTag-disabled))": {
             color: uikitStyles.theme.colors.text,
             "--tagColor": uikitStyles.theme.colors.bgContainer

package/dist/esm/Dropdown/Dropdown.js

@@ -291,6 +291,7 @@ const HvDropdown = fixedForwardRef(function HvDropdown2(props, ref) {
                 height,
                 maxHeight,
                 virtualized,
+                "data-is-dropdown": "true",
                 ...listProps
               }
             )

package/dist/esm/Pagination/Pagination.styles.js

@@ -47,7 +47,14 @@ const { staticClasses, useClasses } = createClasses("HvPagination", {
     display: "flex",
     alignItems: "center",
     [`& .${staticClasses$2.arrowContainer}`]: {
-      marginTop: -2
+      display: "flex",
+      alignItems: "center",
+      top: "unset",
+      height: 24,
+      "> svg": {
+        marginTop: 0,
+        marginBottom: 0
+      }
     }
   },
   pageSizeRoot: {

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

@@ -89,6 +89,8 @@ const { staticClasses, useClasses } = createClasses("HvTableHeader", {
   },
   sortable: {},
   sortButton: {
+    paddingLeft: 4,
+    paddingTop: 4,
     ":focus-visible": {
       boxShadow: "none",
       backgroundColor: "transparent"

package/dist/esm/Table/renderers/renderers.js

@@ -9,7 +9,6 @@ import { HvSwitchColumnCell } from "./SwitchColumnCell.js";
 import { HvButton } from "../../Button/Button.js";
 import { HvTag } from "../../Tag/Tag.js";
 import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
-import { HvTypography } from "../../Typography/Typography.js";
 const EM_DASH = "—";
 const hvStringFallback = (value) => {
   return typeof value === "string" && value !== "" ? value : EM_DASH;
@@ -100,7 +99,7 @@ function hvTagColumn(col, valueDataKey, colorDataKey, textColorDataKey, fromRowD
       return /* @__PURE__ */ jsx(
         HvTag,
         {
-          label: /* @__PURE__ */ jsx(HvTypography, { variant: "body", children: name }),
+          label: name,
           type: "semantic",
           color,
           style: textColor != null ? { color: textColor } : {},

package/dist/esm/Tag/Tag.styles.js

@@ -8,7 +8,7 @@ const { staticClasses, useClasses } = createClasses("HvTag", {
     cursor: "default",
     color: theme.colors.textDark,
     borderColor: theme.colors.border,
-    borderRadius: 0,
+    borderRadius: theme.radii.round,
     maxWidth: 180,
     whiteSpace: "nowrap",
     transition: "background-color 0.3s ease",
@@ -22,7 +22,7 @@ const { staticClasses, useClasses } = createClasses("HvTag", {
     }
   },
   hasIcon: {
-    paddingLeft: 2
+    paddingLeft: theme.space.xxs
   },
   /** @deprecated */
   outlined: {
@@ -64,11 +64,12 @@ const { staticClasses, useClasses } = createClasses("HvTag", {
     }
   },
   label: {
-    padding: theme.spacing(0, "xxs"),
+    padding: theme.spacing(0, "xs"),
     color: "inherit"
   },
   deleteIcon: {
     margin: 0,
+    marginRight: theme.space.xxs,
     padding: 2,
     ":hover": {
       backgroundColor: theme.colors.bgHover

package/dist/esm/icons.js

@@ -45,7 +45,7 @@ const defaultIconPathMap = {
   Close: "m8.7 8 5.3 5.3-.7.7L8 8.7 2.7 14l-.7-.7L7.3 8 2 2.7l.7-.7L8 7.3 13.3 2l.7.7z",
   Search: "M15.07 14.52 10.5 9.95a5.96 5.96 0 1 0-.72.7l4.58 4.58zM5.9 11A4.95 4.95 0 0 1 1 6v-.1A4.95 4.95 0 0 1 6 1h.1A4.95 4.95 0 0 1 11 6v.1A4.95 4.95 0 0 1 6 11z",
   SortAsc: "M.08 6.07 6.5.01l6.42 6.06Zm0 0",
-  SortDesc: "M1.76 5 6 .76 10.24 5z",
+  SortDesc: "M12.92 8.93 6.5 14.99.08 8.93Zm0 0",
   Sort: "M10.24 7 6 11.24 1.76 7zM1.76 5 6 .76 10.24 5z",
   // single-use icons in Widgets
   Calendar: "M10.5 2V0h-1v2h-3V0h-1v2H0v14h16V2zM15 15H1V3h14zM3 6h2v2H3zm4 0h2v2H7zm4 0h2v2h-2zm-8 4h2v2H3zm4 0h2v2H7zm4 0h2v2h-2z",

package/dist/esm/themes/ds5.js

@@ -29,16 +29,31 @@ const ds5 = mergeTheme(ds5$1, {
         panel: {
           "--r": theme.radii.round,
           "&[data-popper-placement*='top']": {
+            top: 1,
+            borderRadius: "var(--r) var(--r) var(--r) 0"
+          },
+          "&[data-popper-placement*='top']:has([data-is-dropdown='true'])": {
             top: 1,
             borderRadius: "var(--r) var(--r) 0 0"
           },
           "&[data-popper-placement*='bottom']": {
+            top: -1,
+            borderRadius: "0 var(--r) var(--r) var(--r)"
+          },
+          "&[data-popper-placement*='bottom']:has([data-is-dropdown='true'])": {
             top: -1,
             borderRadius: "0 0 var(--r) var(--r)"
           }
         }
       }
     },
+    HvBreadCrumb: {
+      classes: {
+        link: {
+          borderRadius: theme.radii.round
+        }
+      }
+    },
     HvButton: {
       radius: "round",
       classes: {
@@ -76,6 +91,26 @@ const ds5 = mergeTheme(ds5$1, {
         }
       }
     },
+    HvCalendar: {
+      classes: {
+        root: {
+          " .HvCalendarCell-cellContainer": {
+            borderRadius: theme.radii.round,
+            "& .HvCalendarCell-startBookend": {
+              borderTopLeftRadius: theme.radii.round,
+              borderBottomLeftRadius: theme.radii.round
+            },
+            "& .HvCalendarCell-endBookend": {
+              borderTopRightRadius: theme.radii.round,
+              borderBottomRightRadius: theme.radii.round
+            }
+          },
+          " .HvCalendarCell-calendarDateSelected": {
+            borderRadius: theme.radii.round
+          }
+        }
+      }
+    },
     HvCallout: {
       classes: {
         messageIcon: {
@@ -84,6 +119,27 @@ const ds5 = mergeTheme(ds5$1, {
         }
       }
     },
+    HvColorPicker: {
+      classes: {
+        colorPicker: {
+          " .HvColorPickerPresetColors-swatchWrap > span > div": {
+            borderRadius: theme.radii.round
+          },
+          " .HvColorPickerSavedColors-swatchWrap > span > div": {
+            borderRadius: theme.radii.round
+          },
+          " .HvColorPickerPicker-saturation > div": {
+            borderRadius: theme.radii.round,
+            " .saturation-white": {
+              borderRadius: theme.radii.round,
+              " .saturation-black": {
+                borderRadius: theme.radii.round
+              }
+            }
+          }
+        }
+      }
+    },
     HvDropdownButton: {
       classes: {
         open: {
@@ -100,6 +156,22 @@ const ds5 = mergeTheme(ds5$1, {
     },
     HvMultiButton: {
       classes: {
+        multiple: {
+          borderRadius: theme.radii.round,
+          "& .HvMultiButton-button.HvMultiButton-selected": {
+            borderRadius: theme.radii.round,
+            borderColor: theme.colors.primary,
+            borderWidth: 2
+          }
+        },
+        vertical: {
+          borderRadius: theme.radii.round,
+          "& .HvMultiButton-button.HvMultiButton-selected": {
+            borderRadius: theme.radii.round,
+            borderColor: theme.colors.primary,
+            borderWidth: 2
+          }
+        },
         splitGroup: {
           // NEXT5 subtle multi-buttons have a custom background
           "& .HvButton-subtle": {
@@ -124,6 +196,13 @@ const ds5 = mergeTheme(ds5$1, {
         }
       }
     },
+    HvSnackbarContent: {
+      classes: {
+        root: {
+          borderRadius: theme.radii.round
+        }
+      }
+    },
     HvStatusIcon: {
       type: "simple"
     },
@@ -136,6 +215,13 @@ const ds5 = mergeTheme(ds5$1, {
         }
       }
     },
+    HvTabs: {
+      classes: {
+        indicator: {
+          backgroundColor: theme.colors.primaryStrong
+        }
+      }
+    },
     HvTag: {
       classes: {
         root: {
@@ -143,6 +229,17 @@ const ds5 = mergeTheme(ds5$1, {
         },
         categorical: {
           "--tagColor": theme.alpha("cat1", 0.2)
+        },
+        xs: {
+          height: 19
+        }
+      }
+    },
+    HvDialog: {
+      classes: {
+        statusBar: {
+          borderTopLeftRadius: theme.radii.round,
+          borderTopRightRadius: theme.radii.round
         }
       }
     },
@@ -165,6 +262,13 @@ const ds5 = mergeTheme(ds5$1, {
           borderBottom: "none"
         }
       }
+    },
+    HvDialogActions: {
+      classes: {
+        root: {
+          borderTop: `1px solid ${theme.colors.borderSubtle}`
+        }
+      }
     }
   }
 });

package/dist/esm/themes/pentahoPlus.js

@@ -251,7 +251,6 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
         root: {
           outline: `1px solid ${theme.colors.border}`,
           outlineOffset: -1,
-          borderRadius: theme.radii.round,
           ":where(:not([data-color],.HvTag-disabled))": {
             color: theme.colors.text,
             "--tagColor": theme.colors.bgContainer

package/dist/types/index.d.ts

@@ -6597,7 +6597,9 @@ export declare interface HvTagProps extends Omit<HvButtonBaseProps, "type" | "co
     type?: "semantic" | "categorical";
     /** @deprecated */
     variant?: "filled" | "outlined";
+    /** The size of the tag element. */
     size?: Extract<HvSize, "xs" | "sm" | "md">;
+    /** The icon to use in the tag. */
     icon?: React.ReactNode;
     /** Whether to show the select icon checkbox. */
     showSelectIcon?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.100.1",
+  "version": "5.102.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "UI Kit Core React components.",
@@ -61,7 +61,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "597165cf787bef63a0f77d391d7333f608269aca",
+  "gitHead": "ebaccbc2b47777ea570e856cb1e21cf163e37316",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",