@hitachivantara/uikit-react-core 6.4.2 → 6.4.3

package/dist/FilterGroup/FilterContent/FilterContent.js

@@ -1,11 +1,12 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useContext, useRef, useMemo } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
 import { HvIcon } from "../../icons.js";
 import { setId } from "../../utils/setId.js";
 import { HvFilterGroupContext } from "../FilterGroupContext.js";
 import { useClasses } from "./FilterContent.styles.js";
 import { staticClasses } from "./FilterContent.styles.js";
+import { HvHeaderButton } from "./HeaderButton.js";
 import { HvFilterGroupLeftPanel } from "../LeftPanel/LeftPanel.js";
 import { HvFilterGroupRightPanel } from "../RightPanel/RightPanel.js";
 import { HvTypography } from "../../Typography/Typography.js";
@@ -32,11 +33,13 @@ const HvFilterGroupContent = forwardRef(function HvFilterGroupContent2(props, re
     height,
     leftEmptyElement,
     rightEmptyElement,
+    iconOnly,
     classes: classesProp,
     ...others
   } = useDefaultProps("HvFilterGroupContent", props);
-  const { classes } = useClasses(classesProp);
   const [filterGroupOpen, setFilterGroupOpen] = useState(false);
+  const { classes } = useClasses(classesProp);
+  const { activeTheme } = useTheme();
   const {
     defaultValue,
     filterValues,
@@ -90,13 +93,13 @@ const HvFilterGroupContent = forwardRef(function HvFilterGroupContent2(props, re
       disabled,
       disablePortal,
       variableWidth: true,
-      placement: horizontalPlacement,
       expanded: filterGroupOpen,
+      placement: horizontalPlacement,
       onToggle: handleToggle,
       onClickOutside: onCancelHandler,
       onContainerCreation: focusOnContainer,
-      placeholder: Header,
-      adornment: /* @__PURE__ */ jsx(HvFilterGroupCounter, {}),
+      placeholder: activeTheme?.name === "pentahoPlus" ? void 0 : Header,
+      adornment: activeTheme?.name === "pentahoPlus" ? void 0 : /* @__PURE__ */ jsx(HvFilterGroupCounter, {}),
       popperProps: {
         modifiers: [{ name: "preventOverflow", enabled: escapeWithReference }]
       },
@@ -106,6 +109,12 @@ const HvFilterGroupContent = forwardRef(function HvFilterGroupContent2(props, re
       "aria-invalid": status === "invalid" ? true : void 0,
       "aria-errormessage": status === "invalid" ? setId(id, "error") : void 0,
       "aria-describedby": [description && setId(id, "description"), ariaDescribedBy].join(" ").trim() || void 0,
+      ...activeTheme?.name === "pentahoPlus" && {
+        headerComponent: HvHeaderButton,
+        iconOnly,
+        title: labels?.placeholder,
+        count: filterValues?.flat().length ?? 0
+      },
       ...others,
       children: [
         /* @__PURE__ */ jsx("div", { ref: focusTarget, tabIndex: -1 }),

package/dist/FilterGroup/FilterContent/HeaderButton.js

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDefaultProps, createClasses } from "@hitachivantara/uikit-react-utils";
+import { theme } from "@hitachivantara/uikit-styles";
+import { HvIcon } from "../../icons.js";
+import { HvBadge } from "../../Badge/Badge.js";
+import { HvIconButton } from "../../IconButton/IconButton.js";
+import { HvButton } from "../../Button/Button.js";
+import { HvTypography } from "../../Typography/Typography.js";
+const { useClasses } = createClasses("HvHeaderButton", {
+  iconOnly: {
+    "& > .HvBadge-badge": {
+      minWidth: "unset !important",
+      minHeight: "unset !important"
+    }
+  },
+  button: {
+    border: `1px solid ${theme.colors.primaryDimmed}`,
+    borderRadius: theme.radii.full
+  },
+  headerContent: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.space.xxs
+  },
+  badgeRoot: {
+    width: 0,
+    marginRight: theme.space.sm
+  },
+  badge: {
+    position: "relative"
+  },
+  badgeIconOnly: {
+    "&&>div:last-of-type": {
+      minWidth: "unset",
+      minHeight: "unset"
+    }
+  },
+  badgeIcon: {
+    minHeight: 0,
+    minWidth: 0
+  }
+});
+const HvHeaderButton = forwardRef((props, ref) => {
+  const {
+    onClick,
+    iconOnly,
+    count = 0,
+    disabled,
+    title = "Filter",
+    classes: classesProp,
+    ...others
+  } = useDefaultProps("HvHeaderButton", props);
+  const { classes } = useClasses(classesProp, false);
+  return iconOnly ? /* @__PURE__ */ jsx(
+    HvBadge,
+    {
+      ref,
+      label: count,
+      showCount: true,
+      className: classes.badgeIconOnly,
+      icon: /* @__PURE__ */ jsx(
+        HvIconButton,
+        {
+          onClick,
+          title,
+          disabled,
+          className: classes.button,
+          ...others,
+          children: /* @__PURE__ */ jsx(HvIcon, { name: "Filters" })
+        }
+      )
+    }
+  ) : /* @__PURE__ */ jsx(
+    HvButton,
+    {
+      ref,
+      disabled,
+      variant: "secondarySubtle",
+      onClick,
+      startIcon: /* @__PURE__ */ jsx(HvIcon, { name: "Filters" }),
+      ...others,
+      role: "combobox",
+      children: /* @__PURE__ */ jsxs("div", { className: classes.headerContent, children: [
+        /* @__PURE__ */ jsx(HvTypography, { variant: "label", children: title }),
+        /* @__PURE__ */ jsx(
+          HvBadge,
+          {
+            showCount: true,
+            label: count,
+            classes: {
+              root: classes.badgeRoot,
+              badge: classes.badge,
+              badgeIcon: classes.badgeIcon
+            }
+          }
+        )
+      ] })
+    }
+  );
+});
+export {
+  HvHeaderButton
+};

package/dist/FilterGroup/LeftPanel/LeftPanel.js

@@ -1,5 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useContext } from "react";
+import { useTheme } from "@hitachivantara/uikit-react-utils";
+import { HvIcon } from "../../icons.js";
 import { HvFilterGroupContext } from "../FilterGroupContext.js";
 import { useClasses } from "./LeftPanel.styles.js";
 import { staticClasses } from "./LeftPanel.styles.js";
@@ -14,6 +16,7 @@ const HvFilterGroupLeftPanel = ({
   classes: classesProp
 }) => {
   const { classes } = useClasses(classesProp);
+  const { activeTheme } = useTheme();
   const { filterOptions, activeGroup, setActiveGroup } = useContext(HvFilterGroupContext);
   return /* @__PURE__ */ jsx(HvPanel, { className, children: filterOptions.length > 0 ? /* @__PURE__ */ jsx(HvListContainer, { condensed: true, interactive: true, children: filterOptions.map((group, index) => /* @__PURE__ */ jsx(
     HvListItem,
@@ -21,7 +24,7 @@ const HvFilterGroupLeftPanel = ({
       className: classes.listItem,
       onClick: () => setActiveGroup(index),
       selected: filterOptions[activeGroup].id === group.id,
-      endAdornment: /* @__PURE__ */ jsx(HvFilterGroupCounter, { groupId: group.id }),
+      endAdornment: activeTheme?.name === "pentahoPlus" ? /* @__PURE__ */ jsx(HvIcon, { name: "CaretRight" }) : /* @__PURE__ */ jsx(HvFilterGroupCounter, { groupId: group.id }),
       children: /* @__PURE__ */ jsx(HvOverflowTooltip, { data: group.name })
     },
     group.id || group.name

package/dist/index.d.ts

@@ -3269,6 +3269,7 @@ declare interface HvFilterGroupContentProps extends Omit<HvBaseDropdownProps, "o
     leftEmptyElement?: React.ReactNode;
     rightEmptyElement?: React.ReactNode;
     disabled?: boolean;
+    iconOnly?: boolean;
     classes?: HvFilterGroupContentClasses;
 }
 
@@ -8964,7 +8965,7 @@ declare const useClasses_53: (classesProp?: Partial<Record<"body" | "expanded" |
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_54: (classesProp?: Partial<Record<"body" | "resizer" | "footer" | "head" | "root" | "resizable" | "sorted" | "alignLeft" | "alignCenter" | "alignRight" | "alignJustify" | "variantNone" | "variantCheckbox" | "variantActions" | "variantExpand" | "variantList" | "stickyColumn" | "stickyColumnMostLeft" | "stickyColumnLeastRight" | "groupColumnMostLeft" | "groupColumnMostRight" | "resizing" | "headerContent" | "headerText" | "headerParagraph" | "sortableHeaderText" | "sortable" | "sortButton" | "sortIcon" | "alignFlexLeft" | "alignFlexRight" | "alignFlexCenter" | "alignFlexJustify", string>>, addStatic?: boolean) => {
+declare const useClasses_54: (classesProp?: Partial<Record<"body" | "resizer" | "footer" | "head" | "root" | "resizable" | "headerContent" | "sorted" | "alignLeft" | "alignCenter" | "alignRight" | "alignJustify" | "variantNone" | "variantCheckbox" | "variantActions" | "variantExpand" | "variantList" | "stickyColumn" | "stickyColumnMostLeft" | "stickyColumnLeastRight" | "groupColumnMostLeft" | "groupColumnMostRight" | "resizing" | "headerText" | "headerParagraph" | "sortableHeaderText" | "sortable" | "sortButton" | "sortIcon" | "alignFlexLeft" | "alignFlexRight" | "alignFlexCenter" | "alignFlexJustify", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         head: string;

package/dist/themes/pentaho.js

@@ -60,7 +60,8 @@ const pentaho = mergeTheme(pentaho$1, {
     Start: "M205.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L131.31,128ZM51.31,128l74.35-74.34a8,8,0,0,0-11.32-11.32l-80,80a8,8,0,0,0,0,11.32l80,80a8,8,0,0,0,11.32-11.32Z",
     Backwards: "M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z",
     Forwards: "M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z",
-    End: "M141.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L124.69,128,50.34,53.66A8,8,0,0,1,61.66,42.34l80,80A8,8,0,0,1,141.66,133.66Zm80-11.32-80-80a8,8,0,0,0-11.32,11.32L204.69,128l-74.35,74.34a8,8,0,0,0,11.32,11.32l80-80A8,8,0,0,0,221.66,122.34Z"
+    End: "M141.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L124.69,128,50.34,53.66A8,8,0,0,1,61.66,42.34l80,80A8,8,0,0,1,141.66,133.66Zm80-11.32-80-80a8,8,0,0,0-11.32,11.32L204.69,128l-74.35,74.34a8,8,0,0,0,11.32,11.32l80-80A8,8,0,0,0,221.66,122.34Z",
+    Filters: "M230.6,49.53A15.81,15.81,0,0,0,216,40H40A16,16,0,0,0,28.19,66.76l.08.09L96,139.17V216a16,16,0,0,0,24.87,13.32l32-21.34A16,16,0,0,0,160,194.66V139.17l67.74-72.32.08-.09A15.8,15.8,0,0,0,230.6,49.53ZM40,56h0Zm106.18,74.58A8,8,0,0,0,144,136v58.66L112,216V136a8,8,0,0,0-2.16-5.47L40,56H216Z"
   },
   components: {
     HvAvatar: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "6.4.2",
+  "version": "6.4.3",
   "type": "module",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
@@ -61,7 +61,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "3f10053759d187946255aede1c25203f4fea7940",
+  "gitHead": "fe1e806628c08552c969d2b99d3d2e977be12b21",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",