@hitachivantara/uikit-react-core 5.17.0 → 5.18.0

package/dist/cjs/components/FilterGroup/Counter/Counter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Counter.cjs","sources":["../../../../../src/components/FilterGroup/Counter/Counter.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { styles } from \"./Counter.styles\";\nimport { HvFilterGroupFilters, HvFilterGroupValue } from \"../FilterGroup\";\nimport filterGroupCounterClasses, {\n  HvFilterGroupCounterClasses,\n} from \"./counterClasses\";\n\nexport interface HvFilterGroupCounterProps {\n  className?: string;\n  id?: string;\n  classes?: HvFilterGroupCounterClasses;\n}\n\nconst getExistingFiltersById = (\n  idx: number,\n  filterValues: HvFilterGroupValue,\n  filterOptions: HvFilterGroupFilters\n) => {\n  let total = 0;\n  filterValues[idx]?.forEach((fv) => {\n    if (filterOptions[idx]?.data.find((f) => f.id === fv)) {\n      total += 1;\n    }\n  });\n  return total;\n};\n\nexport const HvFilterGroupCounter = ({\n  className,\n  id,\n  classes,\n}: HvFilterGroupCounterProps) => {\n  const {\n    filterOptions,\n    filterValues = [],\n    appliedFilters = [],\n  } = useContext(HvFilterGroupContext);\n\n  const options =\n    id && filterOptions.find((option) => option.id === id)\n      ? ([\n          filterOptions.find((option) => option.id === id),\n        ] as HvFilterGroupFilters)\n      : filterOptions;\n  const optionIdx = filterOptions.findIndex((option) => option.id === id);\n\n  let groupsCounter = 0;\n  appliedFilters\n    .filter((elem) => elem !== undefined)\n    .forEach((fg, i) => {\n      groupsCounter += getExistingFiltersById(i, filterValues, filterOptions);\n    });\n\n  const partialCounter = id\n    ? getExistingFiltersById(optionIdx, filterValues, filterOptions) || 0\n    : groupsCounter;\n\n  const totalCounter = options.reduce(\n    (acc, option) => acc + option.data.length,\n    0\n  );\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            filterGroupCounterClasses.root,\n            css(styles.root),\n            className,\n            classes?.root\n          )}\n        >\n          {partialCounter > 0 ? (\n            <p\n              className={cx(\n                filterGroupCounterClasses.partialCounter,\n                css(styles.partialCounter),\n                classes?.partialCounter\n              )}\n            >\n              {partialCounter}\n            </p>\n          ) : (\n            partialCounter\n          )}\n          {` / ${totalCounter}`}\n        </div>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["getExistingFiltersById","idx","filterValues","filterOptions","total","forEach","fv","data","find","f","id","HvFilterGroupCounter","className","classes","appliedFilters","useContext","HvFilterGroupContext","options","option","optionIdx","findIndex","groupsCounter","filter","elem","undefined","fg","i","partialCounter","totalCounter","reduce","acc","length","ClassNames","children","css","cx","filterGroupCounterClasses","root","styles"],"mappings":";;;;;;;;AAeA,MAAMA,yBAAyBA,CAC7BC,KACAC,cACAC,kBACG;;AACH,MAAIC,QAAQ;AACCH,qBAAAA,GAAG,MAAHA,mBAAMI,QAASC,CAAO,OAAA;;AAC7BH,SAAAA,MAAAA,cAAcF,GAAG,MAAjBE,gBAAAA,IAAoBI,KAAKC,KAAMC,CAAMA,MAAAA,EAAEC,OAAOJ,KAAK;AAC5C,eAAA;AAAA,IACX;AAAA,EAAA;AAEKF,SAAAA;AACT;AAEO,MAAMO,uBAAuBA,CAAC;AAAA,EACnCC;AAAAA,EACAF;AAAAA,EACAG;AACyB,MAAM;AACzB,QAAA;AAAA,IACJV;AAAAA,IACAD,eAAe,CAAE;AAAA,IACjBY,iBAAiB,CAAA;AAAA,EAAA,IACfC,MAAAA,WAAWC,mBAAAA,oBAAoB;AAEnC,QAAMC,UACJP,MAAMP,cAAcK,KAAMU,CAAAA,WAAWA,OAAOR,OAAOA,EAAE,IAChD,CACCP,cAAcK,KAAMU,CAAAA,WAAWA,OAAOR,OAAOA,EAAE,CAAC,IAElDP;AACN,QAAMgB,YAAYhB,cAAciB,UAAWF,CAAWA,WAAAA,OAAOR,OAAOA,EAAE;AAEtE,MAAIW,gBAAgB;AAEjBC,iBAAAA,OAAQC,UAASA,SAASC,MAAS,EACnCnB,QAAQ,CAACoB,IAAIC,MAAM;AACD1B,qBAAAA,uBAAuB0B,GAAGxB,cAAcC,aAAa;AAAA,EAAA,CACvE;AAEH,QAAMwB,iBAAiBjB,KACnBV,uBAAuBmB,WAAWjB,cAAcC,aAAa,KAAK,IAClEkB;AAEEO,QAAAA,eAAeX,QAAQY,OAC3B,CAACC,KAAKZ,WAAWY,MAAMZ,OAAOX,KAAKwB,QACnC,CACF;AAEA,wCACGC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,sCACP,OAAA;AAAA,MACEvB,WAAWuB,GACTC,uBAA0BC,MAC1BH,IAAII,sBAAOD,IAAI,GACfzB,WACAC,mCAASwB,IACX;AAAA,MAAEJ,UAEDN,CAAAA,iBAAiB,mCAChB,KAAA;AAAA,QACEf,WAAWuB,GACTC,eAA0BT,QAAAA,gBAC1BO,IAAII,eAAAA,OAAOX,cAAc,GACzBd,mCAASc,cACX;AAAA,QAAEM,UAEDN;AAAAA,MACA,CAAA,IAEHA,gBAEA,MAAKC,cAAc;AAAA,IAAA,CAClB;AAAA,EAAA,CAEG;AAEhB;;"}
+{"version":3,"file":"Counter.cjs","sources":["../../../../../src/components/FilterGroup/Counter/Counter.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { ExtractNames } from \"@core/utils\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { staticClasses, useClasses } from \"./Counter.styles\";\nimport { HvFilterGroupFilters, HvFilterGroupValue } from \"../FilterGroup\";\n\nexport { staticClasses as filterGroupCounterClasses };\n\nexport type HvFilterGroupCounterClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupCounterProps {\n  className?: string;\n  id?: string;\n  classes?: HvFilterGroupCounterClasses;\n}\n\nconst getExistingFiltersById = (\n  idx: number,\n  filterValues: HvFilterGroupValue,\n  filterOptions: HvFilterGroupFilters\n) => {\n  let total = 0;\n  filterValues[idx]?.forEach((fv) => {\n    if (filterOptions[idx]?.data.find((f) => f.id === fv)) {\n      total += 1;\n    }\n  });\n  return total;\n};\n\nexport const HvFilterGroupCounter = ({\n  className,\n  id,\n  classes: classesProp,\n}: HvFilterGroupCounterProps) => {\n  const { classes, cx } = useClasses(classesProp);\n  const {\n    filterOptions,\n    filterValues = [],\n    appliedFilters = [],\n  } = useContext(HvFilterGroupContext);\n\n  const options =\n    id && filterOptions.find((option) => option.id === id)\n      ? ([\n          filterOptions.find((option) => option.id === id),\n        ] as HvFilterGroupFilters)\n      : filterOptions;\n  const optionIdx = filterOptions.findIndex((option) => option.id === id);\n\n  let groupsCounter = 0;\n  appliedFilters\n    .filter((elem) => elem !== undefined)\n    .forEach((fg, i) => {\n      groupsCounter += getExistingFiltersById(i, filterValues, filterOptions);\n    });\n\n  const partialCounter = id\n    ? getExistingFiltersById(optionIdx, filterValues, filterOptions) || 0\n    : groupsCounter;\n\n  const totalCounter = options.reduce(\n    (acc, option) => acc + option.data.length,\n    0\n  );\n\n  return (\n    <div className={cx(className, classes.root)}>\n      {partialCounter > 0 ? (\n        <p className={classes.partialCounter}>{partialCounter}</p>\n      ) : (\n        partialCounter\n      )}\n      {` / ${totalCounter}`}\n    </div>\n  );\n};\n"],"names":["getExistingFiltersById","idx","filterValues","filterOptions","total","forEach","fv","data","find","f","id","HvFilterGroupCounter","className","classes","classesProp","cx","useClasses","appliedFilters","useContext","HvFilterGroupContext","options","option","optionIdx","findIndex","groupsCounter","filter","elem","undefined","fg","i","partialCounter","totalCounter","reduce","acc","length","root","children"],"mappings":";;;;;;AAgBA,MAAMA,yBAAyBA,CAC7BC,KACAC,cACAC,kBACG;;AACH,MAAIC,QAAQ;AACCH,qBAAAA,GAAG,MAAHA,mBAAMI,QAASC,CAAO,OAAA;;AAC7BH,SAAAA,MAAAA,cAAcF,GAAG,MAAjBE,gBAAAA,IAAoBI,KAAKC,KAAMC,CAAMA,MAAAA,EAAEC,OAAOJ,KAAK;AAC5C,eAAA;AAAA,IACX;AAAA,EAAA;AAEKF,SAAAA;AACT;AAEO,MAAMO,uBAAuBA,CAAC;AAAA,EACnCC;AAAAA,EACAF;AAAAA,EACAG,SAASC;AACgB,MAAM;AACzB,QAAA;AAAA,IAAED;AAAAA,IAASE;AAAAA,EAAAA,IAAOC,eAAAA,WAAWF,WAAW;AACxC,QAAA;AAAA,IACJX;AAAAA,IACAD,eAAe,CAAE;AAAA,IACjBe,iBAAiB,CAAA;AAAA,EAAA,IACfC,MAAAA,WAAWC,mBAAAA,oBAAoB;AAEnC,QAAMC,UACJV,MAAMP,cAAcK,KAAMa,CAAAA,WAAWA,OAAOX,OAAOA,EAAE,IAChD,CACCP,cAAcK,KAAMa,CAAAA,WAAWA,OAAOX,OAAOA,EAAE,CAAC,IAElDP;AACN,QAAMmB,YAAYnB,cAAcoB,UAAWF,CAAWA,WAAAA,OAAOX,OAAOA,EAAE;AAEtE,MAAIc,gBAAgB;AAEjBC,iBAAAA,OAAQC,UAASA,SAASC,MAAS,EACnCtB,QAAQ,CAACuB,IAAIC,MAAM;AACD7B,qBAAAA,uBAAuB6B,GAAG3B,cAAcC,aAAa;AAAA,EAAA,CACvE;AAEH,QAAM2B,iBAAiBpB,KACnBV,uBAAuBsB,WAAWpB,cAAcC,aAAa,KAAK,IAClEqB;AAEEO,QAAAA,eAAeX,QAAQY,OAC3B,CAACC,KAAKZ,WAAWY,MAAMZ,OAAOd,KAAK2B,QACnC,CACF;AAEA,yCACE,OAAA;AAAA,IAAKtB,WAAWG,GAAGH,WAAWC,QAAQsB,IAAI;AAAA,IAAEC,UACzCN,CAAAA,iBAAiB,mCAChB,KAAA;AAAA,MAAGlB,WAAWC,QAAQiB;AAAAA,MAAeM,UAAEN;AAAAA,IAAkB,CAAA,IAEzDA,gBAEA,MAAKC,cAAc;AAAA,EAAA,CAClB;AAET;;;"}

package/dist/cjs/components/FilterGroup/Counter/Counter.styles.cjs

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const styles = {
+const classes = require("../../../utils/classes.cjs");
+const name = "HvFilterGroupCounter";
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses(name, {
   root: {
     lineHeight: "34px",
     marginRight: 10
@@ -10,6 +15,7 @@ const styles = {
     display: "inline-block",
     fontWeight: uikitStyles.theme.filterGroup.partialCounterFontWeight
   }
-};
-exports.styles = styles;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=Counter.styles.cjs.map

package/dist/cjs/components/FilterGroup/Counter/Counter.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Counter.styles.cjs","sources":["../../../../../src/components/FilterGroup/Counter/Counter.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvFilterGroupCounterClasses } from \"./counterClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvFilterGroupCounterClasses, CSSInterpolation>\n> = {\n  root: {\n    lineHeight: \"34px\",\n    marginRight: 10,\n  },\n  partialCounter: {\n    display: \"inline-block\",\n    fontWeight: theme.filterGroup.partialCounterFontWeight,\n  },\n};\n"],"names":["styles","root","lineHeight","marginRight","partialCounter","display","fontWeight","theme","filterGroup","partialCounterFontWeight"],"mappings":";;;AAIO,MAAMA,SAET;AAAA,EACFC,MAAM;AAAA,IACJC,YAAY;AAAA,IACZC,aAAa;AAAA,EACf;AAAA,EACAC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,YAAYC,YAAAA,MAAMC,YAAYC;AAAAA,EAChC;AACF;;"}
+{"version":3,"file":"Counter.styles.cjs","sources":["../../../../../src/components/FilterGroup/Counter/Counter.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst name = \"HvFilterGroupCounter\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  root: {\n    lineHeight: \"34px\",\n    marginRight: 10,\n  },\n  partialCounter: {\n    display: \"inline-block\",\n    fontWeight: theme.filterGroup.partialCounterFontWeight,\n  },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","root","lineHeight","marginRight","partialCounter","display","fontWeight","theme","filterGroup","partialCounterFontWeight"],"mappings":";;;;AAGA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAcH,MAAM;AAAA,EAC/DI,MAAM;AAAA,IACJC,YAAY;AAAA,IACZC,aAAa;AAAA,EACf;AAAA,EACAC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,YAAYC,YAAAA,MAAMC,YAAYC;AAAAA,EAChC;AACF,CAAC;;;"}

package/dist/cjs/components/FilterGroup/FilterContent/FilterContent.cjs

@@ -2,9 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const react = require("@emotion/react");
 const FilterContent_styles = require("./FilterContent.styles.cjs");
-const filterContentClasses = require("./filterContentClasses.cjs");
 const FilterGroupContext = require("../FilterGroupContext.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const LeftPanel = require("../LeftPanel/LeftPanel.cjs");
@@ -34,9 +32,12 @@ const HvFilterGroupContent = ({
   height,
   leftEmptyElement,
   rightEmptyElement,
-  classes,
+  classes: classesProp,
   ...others
 }) => {
+  const {
+    classes
+  } = FilterContent_styles.useClasses(classesProp);
   const {
     activeTheme
   } = useTheme.useTheme();
@@ -81,88 +82,84 @@ const HvFilterGroupContent = ({
       children: labels == null ? void 0 : labels.placeholder
     })]
   }), [labels == null ? void 0 : labels.placeholder]);
-  return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsxRuntime.jsxs(BaseDropdown.HvBaseDropdown, {
-      id: setId.setId(id, "dropdown"),
-      role: "combobox",
-      classes: {
-        root: cx(filterContentClasses.default.dropdown, classes == null ? void 0 : classes.dropdown),
-        panel: cx(filterContentClasses.default.panel, css(FilterContent_styles.styles.panel), classes == null ? void 0 : classes.panel),
-        selection: cx(filterContentClasses.default.baseDropdownSelection, css(FilterContent_styles.styles.baseDropdownSelection), classes == null ? void 0 : classes.baseDropdownSelection),
-        header: cx(filterContentClasses.default.header, css(FilterContent_styles.styles.header), classes == null ? void 0 : classes.header)
-      },
-      disabled,
-      disablePortal,
-      variableWidth: true,
-      placement: horizontalPlacement,
-      expanded: filterGroupOpen,
-      onToggle: handleToggle,
-      onClickOutside: onCancelHandler,
-      onContainerCreation: focusOnContainer,
-      placeholder: Header,
-      adornment: /* @__PURE__ */ jsxRuntime.jsx(Counter.HvFilterGroupCounter, {}),
-      popperProps: {
-        modifiers: [{
-          name: "preventOverflow",
-          enabled: escapeWithReference
-        }]
+  return /* @__PURE__ */ jsxRuntime.jsxs(BaseDropdown.HvBaseDropdown, {
+    id: setId.setId(id, "dropdown"),
+    role: "combobox",
+    classes: {
+      root: classes.dropdown,
+      panel: classes.panel,
+      selection: classes.baseDropdownSelection,
+      header: classes.header
+    },
+    disabled,
+    disablePortal,
+    variableWidth: true,
+    placement: horizontalPlacement,
+    expanded: filterGroupOpen,
+    onToggle: handleToggle,
+    onClickOutside: onCancelHandler,
+    onContainerCreation: focusOnContainer,
+    placeholder: Header,
+    adornment: /* @__PURE__ */ jsxRuntime.jsx(Counter.HvFilterGroupCounter, {}),
+    popperProps: {
+      modifiers: [{
+        name: "preventOverflow",
+        enabled: escapeWithReference
+      }]
+    },
+    "aria-haspopup": "dialog",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-invalid": status === "invalid" ? true : void 0,
+    "aria-errormessage": status === "invalid" ? setId.setId(id, "error") : void 0,
+    "aria-describedby": [description && setId.setId(id, "description"), ariaDescribedBy].join(" ").trim() || void 0,
+    ...others,
+    children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
+      ref: focusTarget,
+      tabIndex: -1
+    }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: classes.root,
+      style: {
+        height
       },
-      "aria-haspopup": "dialog",
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      "aria-invalid": status === "invalid" ? true : void 0,
-      "aria-errormessage": status === "invalid" ? setId.setId(id, "error") : void 0,
-      "aria-describedby": [description && setId.setId(id, "description"), ariaDescribedBy].join(" ").trim() || void 0,
-      ...others,
-      children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-        ref: focusTarget,
-        tabIndex: -1
-      }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        className: cx(filterContentClasses.default.root, css(FilterContent_styles.styles.root), classes == null ? void 0 : classes.root),
-        style: {
-          height
-        },
-        children: [/* @__PURE__ */ jsxRuntime.jsx(LeftPanel.HvFilterGroupLeftPanel, {
-          id,
-          className: cx(filterContentClasses.default.leftSidePanel, css(FilterContent_styles.styles.leftSidePanel), classes == null ? void 0 : classes.leftSidePanel),
-          emptyElement: leftEmptyElement
-        }), /* @__PURE__ */ jsxRuntime.jsx(RightPanel.HvFilterGroupRightPanel, {
-          id,
-          className: cx(filterContentClasses.default.rightSidePanel, css(FilterContent_styles.styles.rightSidePanel), classes == null ? void 0 : classes.rightSidePanel),
-          emptyElement: rightEmptyElement,
-          labels
-        })]
-      }), /* @__PURE__ */ jsxRuntime.jsxs(ActionBar.HvActionBar, {
-        className: cx(filterContentClasses.default.actionBar, css(FilterContent_styles.styles.actionBar), classes == null ? void 0 : classes.actionBar),
-        children: [/* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
-          id: setId.setId(id, "clearFilters-button"),
-          disabled: defaultValue ? (defaultValue == null ? void 0 : defaultValue.flat().length) === (filterValues == null ? void 0 : filterValues.flat().length) : (filterValues == null ? void 0 : filterValues.flat().length) === 0,
-          variant: "secondaryGhost",
-          onClick: onClearHandler,
-          children: labels == null ? void 0 : labels.clearLabel
-        }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-          "aria-hidden": "true",
-          className: cx(filterContentClasses.default.space, css(FilterContent_styles.styles.space), classes == null ? void 0 : classes.space),
-          children: " "
-        }), /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
-          id: setId.setId(id, "apply-button"),
-          disabled: applyDisabled,
-          variant: activeTheme == null ? void 0 : activeTheme.filterGroup.applyButtonVariant,
-          onClick: onApplyHandler,
-          className: cx(filterContentClasses.default.applyButton, css(FilterContent_styles.styles.applyButton), classes == null ? void 0 : classes.applyButton),
-          children: labels == null ? void 0 : labels.applyLabel
-        }), /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
-          id: setId.setId(id, "cancel-button"),
-          variant: activeTheme == null ? void 0 : activeTheme.filterGroup.cancelButtonVariant,
-          onClick: onCancelHandler,
-          children: labels == null ? void 0 : labels.cancelLabel
-        })]
+      children: [/* @__PURE__ */ jsxRuntime.jsx(LeftPanel.HvFilterGroupLeftPanel, {
+        id,
+        className: classes.leftSidePanel,
+        emptyElement: leftEmptyElement
+      }), /* @__PURE__ */ jsxRuntime.jsx(RightPanel.HvFilterGroupRightPanel, {
+        id,
+        className: classes.rightSidePanel,
+        emptyElement: rightEmptyElement,
+        labels
       })]
-    })
+    }), /* @__PURE__ */ jsxRuntime.jsxs(ActionBar.HvActionBar, {
+      className: classes.actionBar,
+      children: [/* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
+        id: setId.setId(id, "clearFilters-button"),
+        disabled: defaultValue ? (defaultValue == null ? void 0 : defaultValue.flat().length) === (filterValues == null ? void 0 : filterValues.flat().length) : (filterValues == null ? void 0 : filterValues.flat().length) === 0,
+        variant: "secondaryGhost",
+        onClick: onClearHandler,
+        children: labels == null ? void 0 : labels.clearLabel
+      }), /* @__PURE__ */ jsxRuntime.jsx("div", {
+        "aria-hidden": "true",
+        className: classes.space,
+        children: " "
+      }), /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
+        id: setId.setId(id, "apply-button"),
+        disabled: applyDisabled,
+        variant: activeTheme == null ? void 0 : activeTheme.filterGroup.applyButtonVariant,
+        onClick: onApplyHandler,
+        className: classes.applyButton,
+        children: labels == null ? void 0 : labels.applyLabel
+      }), /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
+        id: setId.setId(id, "cancel-button"),
+        variant: activeTheme == null ? void 0 : activeTheme.filterGroup.cancelButtonVariant,
+        onClick: onCancelHandler,
+        children: labels == null ? void 0 : labels.cancelLabel
+      })]
+    })]
   });
 };
+exports.filterGroupContentClasses = FilterContent_styles.staticClasses;
 exports.HvFilterGroupContent = HvFilterGroupContent;
 //# sourceMappingURL=FilterContent.cjs.map

package/dist/cjs/components/FilterGroup/FilterContent/FilterContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterContent.cjs","sources":["../../../../../src/components/FilterGroup/FilterContent/FilterContent.tsx"],"sourcesContent":["import {\n  HvActionBar,\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n  HvButton,\n  HvButtonVariant,\n  HvFormStatus,\n  HvTypography,\n} from \"@core/components\";\nimport { setId } from \"@core/utils\";\nimport { useContext, useMemo, useRef, useState } from \"react\";\nimport { Filters } from \"@hitachivantara/uikit-react-icons\";\nimport { ClassNames } from \"@emotion/react\";\nimport { useTheme } from \"@core/hooks\";\nimport {\n  HvFilterGroupLabels,\n  HvFilterGroupValue,\n  HvFilterGroupHorizontalPlacement,\n} from \"../FilterGroup\";\nimport { styles } from \"./FilterContent.styles\";\nimport filterGroupContentClasses, {\n  HvFilterGroupContentClasses,\n} from \"./filterContentClasses\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { HvFilterGroupCounter } from \"../Counter\";\nimport { HvFilterGroupLeftPanel } from \"../LeftPanel\";\nimport { HvFilterGroupRightPanel } from \"../RightPanel\";\n\nexport interface HvFilterGroupContentProps\n  extends Omit<HvBaseDropdownProps, \"onChange\"> {\n  description?: React.ReactNode;\n  status?: HvFormStatus;\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue\n  ) => void;\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  labels?: HvFilterGroupLabels;\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  disablePortal?: boolean;\n  escapeWithReference?: boolean;\n  height?: string | number;\n  leftEmptyElement?: React.ReactNode;\n  rightEmptyElement?: React.ReactNode;\n  disabled?: boolean;\n  classes?: HvFilterGroupContentClasses;\n}\n\nexport const HvFilterGroupContent = ({\n  id,\n  status,\n  disabled = false,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  description,\n  \"aria-describedby\": ariaDescribedBy,\n  onChange,\n  onCancel,\n  onClear,\n  labels,\n  horizontalPlacement = \"right\",\n  disablePortal = true,\n  escapeWithReference = true,\n  height,\n  leftEmptyElement,\n  rightEmptyElement,\n  classes,\n  ...others\n}: HvFilterGroupContentProps) => {\n  const { activeTheme } = useTheme();\n\n  const [filterGroupOpen, setFilterGroupOpen] = useState<boolean>(false);\n\n  const {\n    defaultValue,\n    filterValues,\n    rollbackFilters,\n    clearFilters,\n    applyFilters,\n    applyDisabled,\n  } = useContext(HvFilterGroupContext);\n\n  const focusTarget = useRef<HTMLDivElement>(null);\n\n  const focusOnContainer = () => {\n    focusTarget.current?.focus();\n  };\n\n  const onApplyHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    applyFilters();\n    onChange?.(event, filterValues);\n    setFilterGroupOpen(false);\n  };\n\n  const onCancelHandler = (\n    event: React.MouseEvent<HTMLButtonElement> | Event\n  ) => {\n    rollbackFilters();\n    onCancel?.(event);\n    setFilterGroupOpen(false);\n  };\n\n  const onClearHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    clearFilters();\n    onClear?.(event);\n  };\n\n  const handleToggle = (event: Event, open: boolean) => {\n    /* \n     If evt is null this toggle wasn't triggered by the user.\n     instead it was triggered by the baseDropdown useEffect after\n     the datepicker changed the expanded value this baseDropdown behavior needs a review\n    */\n    if (event === null) return;\n    setFilterGroupOpen(open);\n    if (!open) onCancelHandler?.(event);\n  };\n\n  const Header = useMemo(\n    () => (\n      <>\n        <Filters />\n        <HvTypography variant=\"label\">{labels?.placeholder}</HvTypography>\n      </>\n    ),\n    [labels?.placeholder]\n  );\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <HvBaseDropdown\n          id={setId(id, \"dropdown\")}\n          role=\"combobox\"\n          classes={{\n            root: cx(filterGroupContentClasses.dropdown, classes?.dropdown),\n            panel: cx(\n              filterGroupContentClasses.panel,\n              css(styles.panel),\n              classes?.panel\n            ),\n            selection: cx(\n              filterGroupContentClasses.baseDropdownSelection,\n              css(styles.baseDropdownSelection),\n              classes?.baseDropdownSelection\n            ),\n            header: cx(\n              filterGroupContentClasses.header,\n              css(styles.header),\n              classes?.header\n            ),\n          }}\n          disabled={disabled}\n          disablePortal={disablePortal}\n          variableWidth\n          placement={horizontalPlacement}\n          expanded={filterGroupOpen}\n          onToggle={handleToggle}\n          onClickOutside={onCancelHandler}\n          onContainerCreation={focusOnContainer}\n          placeholder={Header}\n          adornment={<HvFilterGroupCounter />}\n          popperProps={{\n            modifiers: [\n              { name: \"preventOverflow\", enabled: escapeWithReference },\n            ],\n          }}\n          aria-haspopup=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-invalid={status === \"invalid\" ? true : undefined}\n          aria-errormessage={\n            status === \"invalid\" ? setId(id, \"error\") : undefined\n          }\n          aria-describedby={\n            [description && setId(id, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          {...others}\n        >\n          <div ref={focusTarget} tabIndex={-1} />\n          <div\n            className={cx(\n              filterGroupContentClasses.root,\n              css(styles.root),\n              classes?.root\n            )}\n            style={{ height }}\n          >\n            <HvFilterGroupLeftPanel\n              id={id}\n              className={cx(\n                filterGroupContentClasses.leftSidePanel,\n                css(styles.leftSidePanel),\n                classes?.leftSidePanel\n              )}\n              emptyElement={leftEmptyElement}\n            />\n            <HvFilterGroupRightPanel\n              id={id}\n              className={cx(\n                filterGroupContentClasses.rightSidePanel,\n                css(styles.rightSidePanel),\n                classes?.rightSidePanel\n              )}\n              emptyElement={rightEmptyElement}\n              labels={labels}\n            />\n          </div>\n          <HvActionBar\n            className={cx(\n              filterGroupContentClasses.actionBar,\n              css(styles.actionBar),\n              classes?.actionBar\n            )}\n          >\n            <HvButton\n              id={setId(id, \"clearFilters-button\")}\n              disabled={\n                defaultValue\n                  ? defaultValue?.flat().length === filterValues?.flat().length\n                  : filterValues?.flat().length === 0\n              }\n              variant=\"secondaryGhost\"\n              onClick={onClearHandler}\n            >\n              {labels?.clearLabel}\n            </HvButton>\n            <div\n              aria-hidden=\"true\"\n              className={cx(\n                filterGroupContentClasses.space,\n                css(styles.space),\n                classes?.space\n              )}\n            >\n              &nbsp;\n            </div>\n            <HvButton\n              id={setId(id, \"apply-button\")}\n              disabled={applyDisabled}\n              variant={\n                activeTheme?.filterGroup.applyButtonVariant as HvButtonVariant\n              }\n              onClick={onApplyHandler}\n              className={cx(\n                filterGroupContentClasses.applyButton,\n                css(styles.applyButton),\n                classes?.applyButton\n              )}\n            >\n              {labels?.applyLabel}\n            </HvButton>\n            <HvButton\n              id={setId(id, \"cancel-button\")}\n              variant={\n                activeTheme?.filterGroup.cancelButtonVariant as HvButtonVariant\n              }\n              onClick={onCancelHandler}\n            >\n              {labels?.cancelLabel}\n            </HvButton>\n          </HvActionBar>\n        </HvBaseDropdown>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvFilterGroupContent","id","status","disabled","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onCancel","onClear","labels","horizontalPlacement","disablePortal","escapeWithReference","height","leftEmptyElement","rightEmptyElement","classes","others","activeTheme","useTheme","filterGroupOpen","setFilterGroupOpen","useState","defaultValue","filterValues","rollbackFilters","clearFilters","applyFilters","applyDisabled","useContext","HvFilterGroupContext","focusTarget","useRef","focusOnContainer","current","focus","onApplyHandler","event","onCancelHandler","onClearHandler","handleToggle","open","Header","useMemo","_jsxs","_Fragment","children","Filters","HvTypography","variant","placeholder","ClassNames","css","cx","HvBaseDropdown","setId","role","root","filterGroupContentClasses","dropdown","panel","styles","selection","baseDropdownSelection","header","variableWidth","placement","expanded","onToggle","onClickOutside","onContainerCreation","adornment","_jsx","HvFilterGroupCounter","popperProps","modifiers","name","enabled","undefined","join","trim","ref","tabIndex","className","style","HvFilterGroupLeftPanel","leftSidePanel","emptyElement","HvFilterGroupRightPanel","rightSidePanel","HvActionBar","actionBar","HvButton","flat","length","onClick","clearLabel","space","filterGroup","applyButtonVariant","applyButton","applyLabel","cancelButtonVariant","cancelLabel"],"mappings":"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"}
+{"version":3,"file":"FilterContent.cjs","sources":["../../../../../src/components/FilterGroup/FilterContent/FilterContent.tsx"],"sourcesContent":["import {\n  HvActionBar,\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n  HvButton,\n  HvButtonVariant,\n  HvFormStatus,\n  HvTypography,\n} from \"@core/components\";\nimport { ExtractNames, setId } from \"@core/utils\";\nimport { useContext, useMemo, useRef, useState } from \"react\";\nimport { Filters } from \"@hitachivantara/uikit-react-icons\";\nimport { useTheme } from \"@core/hooks\";\nimport {\n  HvFilterGroupLabels,\n  HvFilterGroupValue,\n  HvFilterGroupHorizontalPlacement,\n} from \"../FilterGroup\";\nimport { staticClasses, useClasses } from \"./FilterContent.styles\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { HvFilterGroupCounter } from \"../Counter\";\nimport { HvFilterGroupLeftPanel } from \"../LeftPanel\";\nimport { HvFilterGroupRightPanel } from \"../RightPanel\";\n\nexport { staticClasses as filterGroupContentClasses };\n\nexport type HvFilterGroupContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupContentProps\n  extends Omit<HvBaseDropdownProps, \"onChange\"> {\n  description?: React.ReactNode;\n  status?: HvFormStatus;\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue\n  ) => void;\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  labels?: HvFilterGroupLabels;\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  disablePortal?: boolean;\n  escapeWithReference?: boolean;\n  height?: string | number;\n  leftEmptyElement?: React.ReactNode;\n  rightEmptyElement?: React.ReactNode;\n  disabled?: boolean;\n  classes?: HvFilterGroupContentClasses;\n}\n\nexport const HvFilterGroupContent = ({\n  id,\n  status,\n  disabled = false,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  description,\n  \"aria-describedby\": ariaDescribedBy,\n  onChange,\n  onCancel,\n  onClear,\n  labels,\n  horizontalPlacement = \"right\",\n  disablePortal = true,\n  escapeWithReference = true,\n  height,\n  leftEmptyElement,\n  rightEmptyElement,\n  classes: classesProp,\n  ...others\n}: HvFilterGroupContentProps) => {\n  const { classes } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  const [filterGroupOpen, setFilterGroupOpen] = useState<boolean>(false);\n\n  const {\n    defaultValue,\n    filterValues,\n    rollbackFilters,\n    clearFilters,\n    applyFilters,\n    applyDisabled,\n  } = useContext(HvFilterGroupContext);\n\n  const focusTarget = useRef<HTMLDivElement>(null);\n\n  const focusOnContainer = () => {\n    focusTarget.current?.focus();\n  };\n\n  const onApplyHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    applyFilters();\n    onChange?.(event, filterValues);\n    setFilterGroupOpen(false);\n  };\n\n  const onCancelHandler = (\n    event: React.MouseEvent<HTMLButtonElement> | Event\n  ) => {\n    rollbackFilters();\n    onCancel?.(event);\n    setFilterGroupOpen(false);\n  };\n\n  const onClearHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    clearFilters();\n    onClear?.(event);\n  };\n\n  const handleToggle = (event: Event, open: boolean) => {\n    /* \n     If evt is null this toggle wasn't triggered by the user.\n     instead it was triggered by the baseDropdown useEffect after\n     the datepicker changed the expanded value this baseDropdown behavior needs a review\n    */\n    if (event === null) return;\n    setFilterGroupOpen(open);\n    if (!open) onCancelHandler?.(event);\n  };\n\n  const Header = useMemo(\n    () => (\n      <>\n        <Filters />\n        <HvTypography variant=\"label\">{labels?.placeholder}</HvTypography>\n      </>\n    ),\n    [labels?.placeholder]\n  );\n\n  return (\n    <HvBaseDropdown\n      id={setId(id, \"dropdown\")}\n      role=\"combobox\"\n      classes={{\n        root: classes.dropdown,\n        panel: classes.panel,\n        selection: classes.baseDropdownSelection,\n        header: classes.header,\n      }}\n      disabled={disabled}\n      disablePortal={disablePortal}\n      variableWidth\n      placement={horizontalPlacement}\n      expanded={filterGroupOpen}\n      onToggle={handleToggle}\n      onClickOutside={onCancelHandler}\n      onContainerCreation={focusOnContainer}\n      placeholder={Header}\n      adornment={<HvFilterGroupCounter />}\n      popperProps={{\n        modifiers: [{ name: \"preventOverflow\", enabled: escapeWithReference }],\n      }}\n      aria-haspopup=\"dialog\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-invalid={status === \"invalid\" ? true : undefined}\n      aria-errormessage={status === \"invalid\" ? setId(id, \"error\") : undefined}\n      aria-describedby={\n        [description && setId(id, \"description\"), ariaDescribedBy]\n          .join(\" \")\n          .trim() || undefined\n      }\n      {...others}\n    >\n      <div ref={focusTarget} tabIndex={-1} />\n      <div className={classes.root} style={{ height }}>\n        <HvFilterGroupLeftPanel\n          id={id}\n          className={classes.leftSidePanel}\n          emptyElement={leftEmptyElement}\n        />\n        <HvFilterGroupRightPanel\n          id={id}\n          className={classes.rightSidePanel}\n          emptyElement={rightEmptyElement}\n          labels={labels}\n        />\n      </div>\n      <HvActionBar className={classes.actionBar}>\n        <HvButton\n          id={setId(id, \"clearFilters-button\")}\n          disabled={\n            defaultValue\n              ? defaultValue?.flat().length === filterValues?.flat().length\n              : filterValues?.flat().length === 0\n          }\n          variant=\"secondaryGhost\"\n          onClick={onClearHandler}\n        >\n          {labels?.clearLabel}\n        </HvButton>\n        <div aria-hidden=\"true\" className={classes.space}>\n          &nbsp;\n        </div>\n        <HvButton\n          id={setId(id, \"apply-button\")}\n          disabled={applyDisabled}\n          variant={\n            activeTheme?.filterGroup.applyButtonVariant as HvButtonVariant\n          }\n          onClick={onApplyHandler}\n          className={classes.applyButton}\n        >\n          {labels?.applyLabel}\n        </HvButton>\n        <HvButton\n          id={setId(id, \"cancel-button\")}\n          variant={\n            activeTheme?.filterGroup.cancelButtonVariant as HvButtonVariant\n          }\n          onClick={onCancelHandler}\n        >\n          {labels?.cancelLabel}\n        </HvButton>\n      </HvActionBar>\n    </HvBaseDropdown>\n  );\n};\n"],"names":["HvFilterGroupContent","id","status","disabled","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onCancel","onClear","labels","horizontalPlacement","disablePortal","escapeWithReference","height","leftEmptyElement","rightEmptyElement","classes","classesProp","others","useClasses","activeTheme","useTheme","filterGroupOpen","setFilterGroupOpen","useState","defaultValue","filterValues","rollbackFilters","clearFilters","applyFilters","applyDisabled","useContext","HvFilterGroupContext","focusTarget","useRef","focusOnContainer","current","focus","onApplyHandler","event","onCancelHandler","onClearHandler","handleToggle","open","Header","useMemo","_jsxs","_Fragment","children","Filters","HvTypography","variant","placeholder","HvBaseDropdown","setId","role","root","dropdown","panel","selection","baseDropdownSelection","header","variableWidth","placement","expanded","onToggle","onClickOutside","onContainerCreation","adornment","_jsx","HvFilterGroupCounter","popperProps","modifiers","name","enabled","undefined","join","trim","ref","tabIndex","className","style","HvFilterGroupLeftPanel","leftSidePanel","emptyElement","HvFilterGroupRightPanel","rightSidePanel","HvActionBar","actionBar","HvButton","flat","length","onClick","clearLabel","space","filterGroup","applyButtonVariant","applyButton","applyLabel","cancelButtonVariant","cancelLabel"],"mappings":"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"}

package/dist/cjs/components/FilterGroup/FilterContent/FilterContent.styles.cjs

@@ -1,7 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const styles = {
+const classes = require("../../../utils/classes.cjs");
+const name = "HvFilterGroupContent";
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses(name, {
+  dropdown: {},
   panel: {
     maxHeight: 500,
     minHeight: 370
@@ -47,6 +53,7 @@ const styles = {
   applyButton: {
     marginRight: uikitStyles.theme.filterGroup.applyButtonMarginRight
   }
-};
-exports.styles = styles;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=FilterContent.styles.cjs.map

package/dist/cjs/components/FilterGroup/FilterContent/FilterContent.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterContent.styles.cjs","sources":["../../../../../src/components/FilterGroup/FilterContent/FilterContent.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvFilterGroupContentClasses } from \"./filterContentClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvFilterGroupContentClasses, CSSInterpolation>\n> = {\n  panel: {\n    maxHeight: 500,\n    minHeight: 370,\n  },\n  header: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    height: 32,\n  },\n  baseDropdownSelection: {\n    padding: theme.spacing([\"0px\", \"30px\", \"0px\", \"0px\"]),\n  },\n  root: {\n    width: 640,\n    maxHeight: \"calc(500px - 75px)\",\n    minHeight: \"calc(370px - 75px)\",\n  },\n  rightSidePanel: {\n    display: \"inline-block\",\n    width: \"50%\",\n    height: \"100%\",\n    maxHeight: \"calc(500px - 75px)\",\n    minHeight: \"calc(370px - 75px)\",\n    verticalAlign: \"top\",\n    overflow: \"visible\",\n    boxShadow: theme.filterGroup.rightPanelShadow,\n    borderLeft: theme.filterGroup.rightPanelBorderLeft,\n  },\n  leftSidePanel: {\n    display: \"inline-block\",\n    width: `calc(50% - ${theme.spacing(\"sm\")} - ${theme.spacing(\"sm\")} + 8px)`,\n    height: `calc(100% - ${theme.spacing(\"sm\")} - ${theme.spacing(\n      \"sm\"\n    )} + 8px)`,\n    verticalAlign: \"top\",\n    maxHeight: \"calc(500px - 75px)\",\n    minHeight: \"calc(370px - 75px)\",\n    padding: 4,\n    margin: `calc(${theme.spacing(\"sm\")} - 4px)`,\n  },\n  actionBar: {},\n  space: {\n    flex: 1,\n  },\n  applyButton: {\n    marginRight: theme.filterGroup.applyButtonMarginRight,\n  },\n};\n"],"names":["styles","panel","maxHeight","minHeight","header","display","justifyContent","height","baseDropdownSelection","padding","theme","spacing","root","width","rightSidePanel","verticalAlign","overflow","boxShadow","filterGroup","rightPanelShadow","borderLeft","rightPanelBorderLeft","leftSidePanel","margin","actionBar","space","flex","applyButton","marginRight","applyButtonMarginRight"],"mappings":";;;AAIO,MAAMA,SAET;AAAA,EACFC,OAAO;AAAA,IACLC,WAAW;AAAA,IACXC,WAAW;AAAA,EACb;AAAA,EACAC,QAAQ;AAAA,IACNC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,QAAQ;AAAA,EACV;AAAA,EACAC,uBAAuB;AAAA,IACrBC,SAASC,kBAAMC,QAAQ,CAAC,OAAO,QAAQ,OAAO,KAAK,CAAC;AAAA,EACtD;AAAA,EACAC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPX,WAAW;AAAA,IACXC,WAAW;AAAA,EACb;AAAA,EACAW,gBAAgB;AAAA,IACdT,SAAS;AAAA,IACTQ,OAAO;AAAA,IACPN,QAAQ;AAAA,IACRL,WAAW;AAAA,IACXC,WAAW;AAAA,IACXY,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,WAAWP,YAAAA,MAAMQ,YAAYC;AAAAA,IAC7BC,YAAYV,YAAAA,MAAMQ,YAAYG;AAAAA,EAChC;AAAA,EACAC,eAAe;AAAA,IACbjB,SAAS;AAAA,IACTQ,OAAQ,cAAaH,YAAMC,MAAAA,QAAQ,IAAI,OAAOD,kBAAMC,QAAQ,IAAI;AAAA,IAChEJ,QAAS,eAAcG,YAAMC,MAAAA,QAAQ,IAAI,OAAOD,kBAAMC,QACpD,IACF;AAAA,IACAI,eAAe;AAAA,IACfb,WAAW;AAAA,IACXC,WAAW;AAAA,IACXM,SAAS;AAAA,IACTc,QAAS,QAAOb,YAAAA,MAAMC,QAAQ,IAAI;AAAA,EACpC;AAAA,EACAa,WAAW,CAAC;AAAA,EACZC,OAAO;AAAA,IACLC,MAAM;AAAA,EACR;AAAA,EACAC,aAAa;AAAA,IACXC,aAAalB,YAAAA,MAAMQ,YAAYW;AAAAA,EACjC;AACF;;"}
+{"version":3,"file":"FilterContent.styles.cjs","sources":["../../../../../src/components/FilterGroup/FilterContent/FilterContent.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst name = \"HvFilterGroupContent\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  dropdown: {},\n  panel: {\n    maxHeight: 500,\n    minHeight: 370,\n  },\n  header: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    height: 32,\n  },\n  baseDropdownSelection: {\n    padding: theme.spacing([\"0px\", \"30px\", \"0px\", \"0px\"]),\n  },\n  root: {\n    width: 640,\n    maxHeight: \"calc(500px - 75px)\",\n    minHeight: \"calc(370px - 75px)\",\n  },\n  rightSidePanel: {\n    display: \"inline-block\",\n    width: \"50%\",\n    height: \"100%\",\n    maxHeight: \"calc(500px - 75px)\",\n    minHeight: \"calc(370px - 75px)\",\n    verticalAlign: \"top\",\n    overflow: \"visible\",\n    boxShadow: theme.filterGroup.rightPanelShadow,\n    borderLeft: theme.filterGroup.rightPanelBorderLeft,\n  },\n  leftSidePanel: {\n    display: \"inline-block\",\n    width: `calc(50% - ${theme.spacing(\"sm\")} - ${theme.spacing(\"sm\")} + 8px)`,\n    height: `calc(100% - ${theme.spacing(\"sm\")} - ${theme.spacing(\n      \"sm\"\n    )} + 8px)`,\n    verticalAlign: \"top\",\n    maxHeight: \"calc(500px - 75px)\",\n    minHeight: \"calc(370px - 75px)\",\n    padding: 4,\n    margin: `calc(${theme.spacing(\"sm\")} - 4px)`,\n  },\n  actionBar: {},\n  space: {\n    flex: 1,\n  },\n  applyButton: {\n    marginRight: theme.filterGroup.applyButtonMarginRight,\n  },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","dropdown","panel","maxHeight","minHeight","header","display","justifyContent","height","baseDropdownSelection","padding","theme","spacing","root","width","rightSidePanel","verticalAlign","overflow","boxShadow","filterGroup","rightPanelShadow","borderLeft","rightPanelBorderLeft","leftSidePanel","margin","actionBar","space","flex","applyButton","marginRight","applyButtonMarginRight"],"mappings":";;;;AAGA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAcH,MAAM;AAAA,EAC/DI,UAAU,CAAC;AAAA,EACXC,OAAO;AAAA,IACLC,WAAW;AAAA,IACXC,WAAW;AAAA,EACb;AAAA,EACAC,QAAQ;AAAA,IACNC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,QAAQ;AAAA,EACV;AAAA,EACAC,uBAAuB;AAAA,IACrBC,SAASC,kBAAMC,QAAQ,CAAC,OAAO,QAAQ,OAAO,KAAK,CAAC;AAAA,EACtD;AAAA,EACAC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPX,WAAW;AAAA,IACXC,WAAW;AAAA,EACb;AAAA,EACAW,gBAAgB;AAAA,IACdT,SAAS;AAAA,IACTQ,OAAO;AAAA,IACPN,QAAQ;AAAA,IACRL,WAAW;AAAA,IACXC,WAAW;AAAA,IACXY,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,WAAWP,YAAAA,MAAMQ,YAAYC;AAAAA,IAC7BC,YAAYV,YAAAA,MAAMQ,YAAYG;AAAAA,EAChC;AAAA,EACAC,eAAe;AAAA,IACbjB,SAAS;AAAA,IACTQ,OAAQ,cAAaH,YAAMC,MAAAA,QAAQ,IAAI,OAAOD,kBAAMC,QAAQ,IAAI;AAAA,IAChEJ,QAAS,eAAcG,YAAMC,MAAAA,QAAQ,IAAI,OAAOD,kBAAMC,QACpD,IACF;AAAA,IACAI,eAAe;AAAA,IACfb,WAAW;AAAA,IACXC,WAAW;AAAA,IACXM,SAAS;AAAA,IACTc,QAAS,QAAOb,YAAAA,MAAMC,QAAQ,IAAI;AAAA,EACpC;AAAA,EACAa,WAAW,CAAC;AAAA,EACZC,OAAO;AAAA,IACLC,MAAM;AAAA,EACR;AAAA,EACAC,aAAa;AAAA,IACXC,aAAalB,YAAAA,MAAMQ,YAAYW;AAAAA,EACjC;AACF,CAAC;;;"}

package/dist/cjs/components/FilterGroup/FilterGroup.cjs

@@ -1,7 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("@emotion/react");
-const filterGroupClasses = require("./filterGroupClasses.cjs");
 const FilterGroup_styles = require("./FilterGroup.styles.cjs");
 const FilterGroupContext = require("./FilterGroupContext.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
@@ -48,69 +46,69 @@ const HvFilterGroup = ({
   escapeWithReference = true,
   height = 350,
   filterContentProps,
-  classes,
+  classes: classesProp,
   ...others
 }) => {
+  const {
+    classes,
+    cx
+  } = FilterGroup_styles.useClasses(classesProp);
   const [validationMessage] = useControlled.useControlled(statusMessage, "Required");
   const elementId = useUniqueId.default(id, "hvfiltergroup");
   const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
   const hasLabel = label != null;
   const hasDescription = description != null;
   const canShowError = status !== void 0 || required;
-  return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, {
-      id,
-      name,
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, {
+    id,
+    name,
+    value,
+    status,
+    disabled,
+    required,
+    className: cx(className, classes.root),
+    ...others,
+    children: [(hasLabel || hasDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: classes.labelContainer,
+      children: [hasLabel && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, {
+        id: setId.setId(elementId, "label"),
+        htmlFor: setId.setId(elementId, "input"),
+        label,
+        className: classes.label
+      }), hasDescription && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, {
+        id: setId.setId(elementId, "description"),
+        className: classes.description,
+        children: description
+      })]
+    }), /* @__PURE__ */ jsxRuntime.jsxs(FilterGroupContext.HvFilterGroupProvider, {
+      defaultValue,
       value,
-      status,
-      disabled,
-      required,
-      className: cx(filterGroupClasses.default.root, className, classes == null ? void 0 : classes.root),
-      ...others,
-      children: [(hasLabel || hasDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        className: cx(filterGroupClasses.default.labelContainer, css(FilterGroup_styles.styles.labelContainer), classes == null ? void 0 : classes.labelContainer),
-        children: [hasLabel && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, {
-          id: setId.setId(elementId, "label"),
-          htmlFor: setId.setId(elementId, "input"),
-          label,
-          className: cx(filterGroupClasses.default.label, css(FilterGroup_styles.styles.label), classes == null ? void 0 : classes.label)
-        }), hasDescription && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, {
-          id: setId.setId(elementId, "description"),
-          className: cx(filterGroupClasses.default.description, classes == null ? void 0 : classes.description),
-          children: description
-        })]
-      }), /* @__PURE__ */ jsxRuntime.jsxs(FilterGroupContext.HvFilterGroupProvider, {
-        defaultValue,
-        value,
-        filters,
-        children: [/* @__PURE__ */ jsxRuntime.jsx(FilterContent.HvFilterGroupContent, {
-          id: elementId,
-          disabled,
-          disablePortal,
-          variableWidth: true,
-          placement: horizontalPlacement,
-          escapeWithReference,
-          "aria-label": ariaLabel,
-          "aria-labelledby": ariaLabelledBy,
-          status,
-          onChange,
-          onCancel,
-          onClear,
-          labels,
-          height,
-          ...filterContentProps
-        }), canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, {
-          id: setId.setId(elementId, "error"),
-          disableBorder: true,
-          className: cx(filterGroupClasses.default.error, classes == null ? void 0 : classes.error),
-          children: validationMessage
-        })]
+      filters,
+      children: [/* @__PURE__ */ jsxRuntime.jsx(FilterContent.HvFilterGroupContent, {
+        id: elementId,
+        disabled,
+        disablePortal,
+        variableWidth: true,
+        placement: horizontalPlacement,
+        escapeWithReference,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        status,
+        onChange,
+        onCancel,
+        onClear,
+        labels,
+        height,
+        ...filterContentProps
+      }), canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, {
+        id: setId.setId(elementId, "error"),
+        disableBorder: true,
+        className: classes.error,
+        children: validationMessage
       })]
-    })
+    })]
   });
 };
+exports.filterGroupClasses = FilterGroup_styles.staticClasses;
 exports.HvFilterGroup = HvFilterGroup;
 //# sourceMappingURL=FilterGroup.cjs.map

package/dist/cjs/components/FilterGroup/FilterGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterGroup.cjs","sources":["../../../../src/components/FilterGroup/FilterGroup.tsx"],"sourcesContent":["import {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"@core/components\";\nimport { useControlled, useLabels, useUniqueId } from \"@core/hooks\";\nimport { setId } from \"@core/utils\";\nimport { ClassNames } from \"@emotion/react\";\nimport filterGroupClasses, { HvFilterGroupClasses } from \"./filterGroupClasses\";\nimport {\n  HvFilterGroupContent,\n  HvFilterGroupContentProps,\n} from \"./FilterContent\";\nimport { styles } from \"./FilterGroup.styles\";\nimport { HvFilterGroupProvider } from \"./FilterGroupContext\";\n\nexport type HvFilterGroupValue = (string | number)[][];\n\nexport interface HvFilterGroupLabels {\n  /** Apply button label. */\n  applyLabel?: string;\n  /** Cancel button label. */\n  cancelLabel?: string;\n  /** Cancel button label. */\n  clearLabel?: string;\n  /** Placeholder label. */\n  placeholder?: string;\n  /** SearchBox placeholder label. */\n  searchBoxPlaceholder?: string;\n  /** Select All placeholder label. */\n  selectAll?: string;\n  /** Multi selection conjunction placeholder label. */\n  multiSelectionConjunction?: string;\n}\n\nexport type HvFilterGroupFilters = {\n  id: string;\n  name: string;\n  data: {\n    id: string | number;\n    name: string;\n  }[];\n}[];\n\nexport type HvFilterGroupHorizontalPlacement = \"left\" | \"right\";\n\nexport interface HvFilterGroupProps\n  extends Omit<\n    HvFormElementProps,\n    \"onChange\" | \"defaultValue\" | \"statusMessage\"\n  > {\n  /** The initial value of the input when in single calendar mode. */\n  filters: HvFilterGroupFilters;\n  /** The form element name. */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**  Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**  The error message to show when `status` is \"invalid\". Defaults to \"Required\". */\n  statusMessage?: React.ReactNode;\n  /** The callback fired when the cancel button is clicked. */\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  /** The callback fired when the clear filters button is clicked. */\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** The callback fired when the value changes. */\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue\n  ) => void;\n  /** An Object containing the various text associated with the input. */\n  labels?: HvFilterGroupLabels;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** The default value of the filter group. If defined the clear action will reset to it. */\n  defaultValue?: HvFilterGroupValue;\n  /** The value of the filter group. */\n  value?: HvFilterGroupValue;\n  /** The placement where the filter group should be placed according to the input. Options are `left` or `right`. */\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the filter container should be out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** The height of the filter panel, between 295 and 425. Defaults to 350 */\n  height?: number | string;\n  /** The filter content props */\n  filterContentProps?: Partial<HvFilterGroupContentProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFilterGroupClasses;\n}\n\nconst DEFAULT_LABELS: HvFilterGroupLabels = {\n  applyLabel: \"Apply\",\n  cancelLabel: \"Cancel\",\n  clearLabel: \"Clear Filters\",\n  placeholder: \"Filters\",\n  searchBoxPlaceholder: \"Search\",\n  selectAll: \"All\",\n  multiSelectionConjunction: \"/\",\n};\n\n/**\n * This component implements one potential use-case of the Filter Group pattern Design System Specifies.\n * Due to the enormous variety of capabilities required for this, we strongly recommend checking the code of the component and extend it yourself,\n * while we do not provide a better approach for building this component with smaller and more composable parts.\n */\nexport const HvFilterGroup = ({\n  className,\n  id,\n  name,\n  required = false,\n  disabled = false,\n  label,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  description,\n  \"aria-describedby\": ariaDescribedBy,\n  onChange,\n  onCancel,\n  onClear,\n  status,\n  statusMessage,\n  labels: labelsProp,\n  defaultValue,\n  value,\n  filters,\n  horizontalPlacement = \"right\",\n  disablePortal = true,\n  escapeWithReference = true,\n  height = 350,\n  filterContentProps,\n  classes,\n  ...others\n}: HvFilterGroupProps) => {\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const elementId = useUniqueId(id, \"hvfiltergroup\");\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const hasLabel = label != null;\n\n  const hasDescription = description != null;\n\n  // Error message area will only be needed if the status is being controlled\n  // or if required is true\n  const canShowError = status !== undefined || required;\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <HvFormElement\n          id={id}\n          name={name}\n          value={value}\n          status={status}\n          disabled={disabled}\n          required={required}\n          className={cx(filterGroupClasses.root, className, classes?.root)}\n          {...others}\n        >\n          {(hasLabel || hasDescription) && (\n            <div\n              className={cx(\n                filterGroupClasses.labelContainer,\n                css(styles.labelContainer),\n                classes?.labelContainer\n              )}\n            >\n              {hasLabel && (\n                <HvLabel\n                  id={setId(elementId, \"label\")}\n                  htmlFor={setId(elementId, \"input\")}\n                  label={label}\n                  className={cx(\n                    filterGroupClasses.label,\n                    css(styles.label),\n                    classes?.label\n                  )}\n                />\n              )}\n\n              {hasDescription && (\n                <HvInfoMessage\n                  id={setId(elementId, \"description\")}\n                  className={cx(\n                    filterGroupClasses.description,\n                    classes?.description\n                  )}\n                >\n                  {description}\n                </HvInfoMessage>\n              )}\n            </div>\n          )}\n          <HvFilterGroupProvider\n            defaultValue={defaultValue}\n            value={value}\n            filters={filters}\n          >\n            <HvFilterGroupContent\n              id={elementId}\n              disabled={disabled}\n              disablePortal={disablePortal}\n              variableWidth\n              placement={horizontalPlacement}\n              escapeWithReference={escapeWithReference}\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledBy}\n              status={status}\n              onChange={onChange}\n              onCancel={onCancel}\n              onClear={onClear}\n              labels={labels}\n              height={height}\n              {...filterContentProps}\n            />\n            {canShowError && (\n              <HvWarningText\n                id={setId(elementId, \"error\")}\n                disableBorder\n                className={cx(filterGroupClasses.error, classes?.error)}\n              >\n                {validationMessage}\n              </HvWarningText>\n            )}\n          </HvFilterGroupProvider>\n        </HvFormElement>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["DEFAULT_LABELS","applyLabel","cancelLabel","clearLabel","placeholder","searchBoxPlaceholder","selectAll","multiSelectionConjunction","HvFilterGroup","className","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onCancel","onClear","status","statusMessage","labels","labelsProp","defaultValue","value","filters","horizontalPlacement","disablePortal","escapeWithReference","height","filterContentProps","classes","others","validationMessage","useControlled","elementId","useUniqueId","useLabels","hasLabel","hasDescription","canShowError","undefined","ClassNames","children","css","cx","HvFormElement","filterGroupClasses","root","labelContainer","styles","_jsx","HvLabel","setId","htmlFor","HvInfoMessage","_jsxs","HvFilterGroupProvider","HvFilterGroupContent","variableWidth","placement","HvWarningText","disableBorder","error"],"mappings":"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"}
+{"version":3,"file":"FilterGroup.cjs","sources":["../../../../src/components/FilterGroup/FilterGroup.tsx"],"sourcesContent":["import {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"@core/components\";\nimport { useControlled, useLabels, useUniqueId } from \"@core/hooks\";\nimport { ExtractNames, setId } from \"@core/utils\";\nimport {\n  HvFilterGroupContent,\n  HvFilterGroupContentProps,\n} from \"./FilterContent\";\nimport { staticClasses, useClasses } from \"./FilterGroup.styles\";\nimport { HvFilterGroupProvider } from \"./FilterGroupContext\";\n\nexport { staticClasses as filterGroupClasses };\n\nexport type HvFilterGroupClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFilterGroupValue = (string | number)[][];\n\nexport interface HvFilterGroupLabels {\n  /** Apply button label. */\n  applyLabel?: string;\n  /** Cancel button label. */\n  cancelLabel?: string;\n  /** Cancel button label. */\n  clearLabel?: string;\n  /** Placeholder label. */\n  placeholder?: string;\n  /** SearchBox placeholder label. */\n  searchBoxPlaceholder?: string;\n  /** Select All placeholder label. */\n  selectAll?: string;\n  /** Multi selection conjunction placeholder label. */\n  multiSelectionConjunction?: string;\n}\n\nexport type HvFilterGroupFilters = {\n  id: string;\n  name: string;\n  data: {\n    id: string | number;\n    name: string;\n  }[];\n}[];\n\nexport type HvFilterGroupHorizontalPlacement = \"left\" | \"right\";\n\nexport interface HvFilterGroupProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"onChange\" | \"defaultValue\" | \"statusMessage\"\n  > {\n  /** The initial value of the input when in single calendar mode. */\n  filters: HvFilterGroupFilters;\n  /** The form element name. */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**  Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**  The error message to show when `status` is \"invalid\". Defaults to \"Required\". */\n  statusMessage?: React.ReactNode;\n  /** The callback fired when the cancel button is clicked. */\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  /** The callback fired when the clear filters button is clicked. */\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** The callback fired when the value changes. */\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue\n  ) => void;\n  /** An Object containing the various text associated with the input. */\n  labels?: HvFilterGroupLabels;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** The default value of the filter group. If defined the clear action will reset to it. */\n  defaultValue?: HvFilterGroupValue;\n  /** The value of the filter group. */\n  value?: HvFilterGroupValue;\n  /** The placement where the filter group should be placed according to the input. Options are `left` or `right`. */\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the filter container should be out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** The height of the filter panel, between 295 and 425. Defaults to 350 */\n  height?: number | string;\n  /** The filter content props */\n  filterContentProps?: Partial<HvFilterGroupContentProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFilterGroupClasses;\n}\n\nconst DEFAULT_LABELS: HvFilterGroupLabels = {\n  applyLabel: \"Apply\",\n  cancelLabel: \"Cancel\",\n  clearLabel: \"Clear Filters\",\n  placeholder: \"Filters\",\n  searchBoxPlaceholder: \"Search\",\n  selectAll: \"All\",\n  multiSelectionConjunction: \"/\",\n};\n\n/**\n * This component implements one potential use-case of the Filter Group pattern Design System Specifies.\n * Due to the enormous variety of capabilities required for this, we strongly recommend checking the code of the component and extend it yourself,\n * while we do not provide a better approach for building this component with smaller and more composable parts.\n */\nexport const HvFilterGroup = ({\n  className,\n  id,\n  name,\n  required = false,\n  disabled = false,\n  label,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  description,\n  \"aria-describedby\": ariaDescribedBy,\n  onChange,\n  onCancel,\n  onClear,\n  status,\n  statusMessage,\n  labels: labelsProp,\n  defaultValue,\n  value,\n  filters,\n  horizontalPlacement = \"right\",\n  disablePortal = true,\n  escapeWithReference = true,\n  height = 350,\n  filterContentProps,\n  classes: classesProp,\n  ...others\n}: HvFilterGroupProps) => {\n  const { classes, cx } = useClasses(classesProp);\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const elementId = useUniqueId(id, \"hvfiltergroup\");\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const hasLabel = label != null;\n\n  const hasDescription = description != null;\n\n  // Error message area will only be needed if the status is being controlled\n  // or if required is true\n  const canShowError = status !== undefined || required;\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      value={value}\n      status={status}\n      disabled={disabled}\n      required={required}\n      className={cx(className, classes.root)}\n      {...others}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n              className={classes.label}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              id={setId(elementId, \"description\")}\n              className={classes.description}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvFilterGroupProvider\n        defaultValue={defaultValue}\n        value={value}\n        filters={filters}\n      >\n        <HvFilterGroupContent\n          id={elementId}\n          disabled={disabled}\n          disablePortal={disablePortal}\n          variableWidth\n          placement={horizontalPlacement}\n          escapeWithReference={escapeWithReference}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          status={status}\n          onChange={onChange}\n          onCancel={onCancel}\n          onClear={onClear}\n          labels={labels}\n          height={height}\n          {...filterContentProps}\n        />\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFilterGroupProvider>\n    </HvFormElement>\n  );\n};\n"],"names":["DEFAULT_LABELS","applyLabel","cancelLabel","clearLabel","placeholder","searchBoxPlaceholder","selectAll","multiSelectionConjunction","HvFilterGroup","className","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onCancel","onClear","status","statusMessage","labels","labelsProp","defaultValue","value","filters","horizontalPlacement","disablePortal","escapeWithReference","height","filterContentProps","classes","classesProp","others","cx","useClasses","validationMessage","useControlled","elementId","useUniqueId","useLabels","hasLabel","hasDescription","canShowError","undefined","HvFormElement","root","children","labelContainer","_jsx","HvLabel","setId","htmlFor","HvInfoMessage","_jsxs","HvFilterGroupProvider","HvFilterGroupContent","variableWidth","placement","HvWarningText","disableBorder","error"],"mappings":";;;;;;;;;;;;;;AAmHA,MAAMA,iBAAsC;AAAA,EAC1CC,YAAY;AAAA,EACZC,aAAa;AAAA,EACbC,YAAY;AAAA,EACZC,aAAa;AAAA,EACbC,sBAAsB;AAAA,EACtBC,WAAW;AAAA,EACXC,2BAA2B;AAC7B;AAOO,MAAMC,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,EACXC,WAAW;AAAA,EACXC;AAAAA,EACA,cAAcC;AAAAA,EACd,mBAAmBC;AAAAA,EACnBC;AAAAA,EACA,oBAAoBC;AAAAA,EACpBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,QAAQC;AAAAA,EACRC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,sBAAsB;AAAA,EACtBC,gBAAgB;AAAA,EAChBC,sBAAsB;AAAA,EACtBC,SAAS;AAAA,EACTC;AAAAA,EACAC,SAASC;AAAAA,EACT,GAAGC;AACe,MAAM;AAClB,QAAA;AAAA,IAAEF;AAAAA,IAASG;AAAAA,EAAAA,IAAOC,mBAAAA,WAAWH,WAAW;AAC9C,QAAM,CAACI,iBAAiB,IAAIC,cAAAA,cAAcjB,eAAe,UAAU;AAE7DkB,QAAAA,YAAYC,YAAAA,QAAYhC,IAAI,eAAe;AAE3Cc,QAAAA,SAASmB,UAAAA,UAAU3C,gBAAgByB,UAAU;AAEnD,QAAMmB,WAAW9B,SAAS;AAE1B,QAAM+B,iBAAiB5B,eAAe;AAIhC6B,QAAAA,eAAexB,WAAWyB,UAAanC;AAE7C,yCACGoC,YAAAA,eAAa;AAAA,IACZtC;AAAAA,IACAC;AAAAA,IACAgB;AAAAA,IACAL;AAAAA,IACAT;AAAAA,IACAD;AAAAA,IACAH,WAAW4B,GAAG5B,WAAWyB,QAAQe,IAAI;AAAA,IAAE,GACnCb;AAAAA,IAAMc,YAERN,YAAYC,mDACZ,OAAA;AAAA,MAAKpC,WAAWyB,QAAQiB;AAAAA,MAAeD,UACpCN,CAAAA,YACCQ,2BAAAA,IAACC,eAAO;AAAA,QACN3C,IAAI4C,MAAAA,MAAMb,WAAW,OAAO;AAAA,QAC5Bc,SAASD,MAAAA,MAAMb,WAAW,OAAO;AAAA,QACjC3B;AAAAA,QACAL,WAAWyB,QAAQpB;AAAAA,MAAAA,CACpB,GAGF+B,kBACCO,2BAAAA,IAACI,2BAAa;AAAA,QACZ9C,IAAI4C,MAAAA,MAAMb,WAAW,aAAa;AAAA,QAClChC,WAAWyB,QAAQjB;AAAAA,QAAYiC,UAE9BjC;AAAAA,MAAAA,CACY,CAChB;AAAA,IAAA,CACE,GAEPwC,2BAAAA,KAACC,0CAAqB;AAAA,MACpBhC;AAAAA,MACAC;AAAAA,MACAC;AAAAA,MAAiBsB,UAAA,CAEjBE,2BAAAA,IAACO,oCAAoB;AAAA,QACnBjD,IAAI+B;AAAAA,QACJ5B;AAAAA,QACAiB;AAAAA,QACA8B,eAAa;AAAA,QACbC,WAAWhC;AAAAA,QACXE;AAAAA,QACA,cAAYhB;AAAAA,QACZ,mBAAiBC;AAAAA,QACjBM;AAAAA,QACAH;AAAAA,QACAC;AAAAA,QACAC;AAAAA,QACAG;AAAAA,QACAQ;AAAAA,QAAe,GACXC;AAAAA,MAAAA,CACL,GACAa,gBACCM,2BAAAA,IAACU,2BAAa;AAAA,QACZpD,IAAI4C,MAAAA,MAAMb,WAAW,OAAO;AAAA,QAC5BsB,eAAa;AAAA,QACbtD,WAAWyB,QAAQ8B;AAAAA,QAAMd,UAExBX;AAAAA,MAAAA,CACY,CAChB;AAAA,IAAA,CACoB,CAAC;AAAA,EAAA,CACX;AAEnB;;;"}

package/dist/cjs/components/FilterGroup/FilterGroup.styles.cjs

@@ -1,6 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const styles = {
+const classes = require("../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvFilterGroup", {
+  root: {},
   label: {
     display: "flex",
     alignItems: "flex-start"
@@ -8,7 +13,10 @@ const styles = {
   labelContainer: {
     display: "flex",
     alignItems: "flex-start"
-  }
-};
-exports.styles = styles;
+  },
+  description: {},
+  error: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=FilterGroup.styles.cjs.map

package/dist/cjs/components/FilterGroup/FilterGroup.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterGroup.styles.cjs","sources":["../../../../src/components/FilterGroup/FilterGroup.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { HvFilterGroupClasses } from \"./filterGroupClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvFilterGroupClasses, CSSInterpolation>\n> = {\n  label: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  labelContainer: { display: \"flex\", alignItems: \"flex-start\" },\n};\n"],"names":["styles","label","display","alignItems","labelContainer"],"mappings":";;AAGO,MAAMA,SAET;AAAA,EACFC,OAAO;AAAA,IACLC,SAAS;AAAA,IACTC,YAAY;AAAA,EACd;AAAA,EACAC,gBAAgB;AAAA,IAAEF,SAAS;AAAA,IAAQC,YAAY;AAAA,EAAa;AAC9D;;"}
+{"version":3,"file":"FilterGroup.styles.cjs","sources":["../../../../src/components/FilterGroup/FilterGroup.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFilterGroup\", {\n  root: {},\n  label: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  labelContainer: { display: \"flex\", alignItems: \"flex-start\" },\n  description: {},\n  error: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","label","display","alignItems","labelContainer","description","error"],"mappings":";;;AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,iBAAiB;AAAA,EAC1EC,MAAM,CAAC;AAAA,EACPC,OAAO;AAAA,IACLC,SAAS;AAAA,IACTC,YAAY;AAAA,EACd;AAAA,EACAC,gBAAgB;AAAA,IAAEF,SAAS;AAAA,IAAQC,YAAY;AAAA,EAAa;AAAA,EAC5DE,aAAa,CAAC;AAAA,EACdC,OAAO,CAAC;AACV,CAAC;;;"}