@hitachivantara/uikit-react-core 5.17.0 → 5.18.1

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;;;"}

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

@@ -1,10 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const react = require("@emotion/react");
 const FilterGroupContext = require("../FilterGroupContext.cjs");
 const LeftPanel_styles = require("./LeftPanel.styles.cjs");
-const leftPanelClasses = require("./leftPanelClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Counter = require("../Counter/Counter.cjs");
 const Panel = require("../../Panel/Panel.cjs");
@@ -16,40 +14,40 @@ const HvFilterGroupLeftPanel = ({
   id,
   className,
   emptyElement,
-  classes
+  classes: classesProp
 }) => {
+  const {
+    classes,
+    cx
+  } = LeftPanel_styles.useClasses(classesProp);
   const {
     filterOptions,
     activeGroup,
     setActiveGroup
   } = React.useContext(FilterGroupContext.HvFilterGroupContext);
-  return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsxRuntime.jsx(Panel.HvPanel, {
-      id: setId.setId(id, "leftPanel"),
-      className,
-      children: filterOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ListContainer.HvListContainer, {
-        id: setId.setId(id, "leftPanel-list"),
-        condensed: true,
-        interactive: true,
-        children: filterOptions.map((group, index) => {
-          const ItemText = wrapperTooltip.wrapperTooltip(true, group.name, group.name);
-          return /* @__PURE__ */ jsxRuntime.jsx(ListItem.HvListItem, {
-            id: group.id,
-            className: cx(leftPanelClasses.default.listItem, css(LeftPanel_styles.styles.listItem), classes == null ? void 0 : classes.listItem),
-            onClick: () => setActiveGroup(index),
-            selected: filterOptions[activeGroup].id === group.id,
-            endAdornment: /* @__PURE__ */ jsxRuntime.jsx(Counter.HvFilterGroupCounter, {
-              id: group.id
-            }),
-            children: /* @__PURE__ */ jsxRuntime.jsx(ItemText, {})
-          }, group.name);
-        })
-      }) : emptyElement
-    })
+  return /* @__PURE__ */ jsxRuntime.jsx(Panel.HvPanel, {
+    id: setId.setId(id, "leftPanel"),
+    className,
+    children: filterOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ListContainer.HvListContainer, {
+      id: setId.setId(id, "leftPanel-list"),
+      condensed: true,
+      interactive: true,
+      children: filterOptions.map((group, index) => {
+        const ItemText = wrapperTooltip.wrapperTooltip(true, group.name, group.name);
+        return /* @__PURE__ */ jsxRuntime.jsx(ListItem.HvListItem, {
+          id: group.id,
+          className: cx(classes.listItem),
+          onClick: () => setActiveGroup(index),
+          selected: filterOptions[activeGroup].id === group.id,
+          endAdornment: /* @__PURE__ */ jsxRuntime.jsx(Counter.HvFilterGroupCounter, {
+            id: group.id
+          }),
+          children: /* @__PURE__ */ jsxRuntime.jsx(ItemText, {})
+        }, group.name);
+      })
+    }) : emptyElement
   });
 };
+exports.filterGroupLeftPanelClasses = LeftPanel_styles.staticClasses;
 exports.HvFilterGroupLeftPanel = HvFilterGroupLeftPanel;
 //# sourceMappingURL=LeftPanel.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"LeftPanel.cjs","sources":["../../../../../src/components/FilterGroup/LeftPanel/LeftPanel.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { HvListContainer, HvListItem, HvPanel } from \"@core/components\";\nimport { setId, wrapperTooltip } from \"@core/utils\";\nimport { ClassNames } from \"@emotion/react\";\nimport { HvFilterGroupCounter } from \"../Counter\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { styles } from \"./LeftPanel.styles\";\nimport filterGroupLeftPanelClasses, {\n  HvFilterGroupLeftPanelClasses,\n} from \"./leftPanelClasses\";\n\nexport interface HvFilterGroupLeftPanelProps {\n  id?: string;\n  className?: string;\n  emptyElement?: React.ReactNode;\n  classes?: HvFilterGroupLeftPanelClasses;\n}\n\nexport const HvFilterGroupLeftPanel = ({\n  id,\n  className,\n  emptyElement,\n  classes,\n}: HvFilterGroupLeftPanelProps) => {\n  const { filterOptions, activeGroup, setActiveGroup } =\n    useContext(HvFilterGroupContext);\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <HvPanel id={setId(id, \"leftPanel\")} className={className}>\n          {filterOptions.length > 0 ? (\n            <HvListContainer\n              id={setId(id, \"leftPanel-list\")}\n              condensed\n              interactive\n            >\n              {filterOptions.map((group, index) => {\n                const ItemText = wrapperTooltip(true, group.name, group.name);\n\n                return (\n                  <HvListItem\n                    id={group.id}\n                    key={group.name}\n                    className={cx(\n                      filterGroupLeftPanelClasses.listItem,\n                      css(styles.listItem),\n                      classes?.listItem\n                    )}\n                    onClick={() => setActiveGroup(index)}\n                    selected={filterOptions[activeGroup].id === group.id}\n                    endAdornment={<HvFilterGroupCounter id={group.id} />}\n                  >\n                    <ItemText />\n                  </HvListItem>\n                );\n              })}\n            </HvListContainer>\n          ) : (\n            emptyElement\n          )}\n        </HvPanel>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvFilterGroupLeftPanel","id","className","emptyElement","classes","filterOptions","activeGroup","setActiveGroup","useContext","HvFilterGroupContext","ClassNames","children","css","cx","HvPanel","setId","length","HvListContainer","condensed","interactive","map","group","index","ItemText","wrapperTooltip","name","HvListItem","filterGroupLeftPanelClasses","listItem","styles","onClick","selected","endAdornment","HvFilterGroupCounter","_jsx"],"mappings":";;;;;;;;;;;;;;AAkBO,MAAMA,yBAAyBA,CAAC;AAAA,EACrCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAC2B,MAAM;AAC3B,QAAA;AAAA,IAAEC;AAAAA,IAAeC;AAAAA,IAAaC;AAAAA,EAAAA,IAClCC,MAAAA,WAAWC,mBAAAA,oBAAoB;AAEjC,wCACGC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,qCACNC,MAAAA,SAAO;AAAA,MAACb,IAAIc,MAAAA,MAAMd,IAAI,WAAW;AAAA,MAAGC;AAAAA,MAAqBS,UACvDN,cAAcW,SAAS,mCACrBC,cAAAA,iBAAe;AAAA,QACdhB,IAAIc,MAAAA,MAAMd,IAAI,gBAAgB;AAAA,QAC9BiB,WAAS;AAAA,QACTC,aAAW;AAAA,QAAAR,UAEVN,cAAce,IAAI,CAACC,OAAOC,UAAU;AACnC,gBAAMC,WAAWC,eAAAA,eAAe,MAAMH,MAAMI,MAAMJ,MAAMI,IAAI;AAE5D,gDACGC,SAAAA,YAAU;AAAA,YACTzB,IAAIoB,MAAMpB;AAAAA,YAEVC,WAAWW,GACTc,iBAA4BC,QAAAA,UAC5BhB,IAAIiB,iBAAAA,OAAOD,QAAQ,GACnBxB,mCAASwB,QACX;AAAA,YACAE,SAASA,MAAMvB,eAAee,KAAK;AAAA,YACnCS,UAAU1B,cAAcC,WAAW,EAAEL,OAAOoB,MAAMpB;AAAAA,YAClD+B,6CAAeC,8BAAoB;AAAA,cAAChC,IAAIoB,MAAMpB;AAAAA,YAAAA,CAAK;AAAA,YAAEU,UAErDuB,2BAAAA,IAACX,UAAU,EAAA;AAAA,UAAA,GAVNF,MAAMI,IAWD;AAAA,QAAA,CAEf;AAAA,MACc,CAAA,IAEjBtB;AAAAA,IAAAA,CAEK;AAAA,EAAA,CAED;AAEhB;;"}
+{"version":3,"file":"LeftPanel.cjs","sources":["../../../../../src/components/FilterGroup/LeftPanel/LeftPanel.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { HvListContainer, HvListItem, HvPanel } from \"@core/components\";\nimport { ExtractNames, setId, wrapperTooltip } from \"@core/utils\";\nimport { HvFilterGroupCounter } from \"../Counter\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { staticClasses, useClasses } from \"./LeftPanel.styles\";\n\nexport { staticClasses as filterGroupLeftPanelClasses };\n\nexport type HvFilterGroupLeftPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupLeftPanelProps {\n  id?: string;\n  className?: string;\n  emptyElement?: React.ReactNode;\n  classes?: HvFilterGroupLeftPanelClasses;\n}\n\nexport const HvFilterGroupLeftPanel = ({\n  id,\n  className,\n  emptyElement,\n  classes: classesProp,\n}: HvFilterGroupLeftPanelProps) => {\n  const { classes, cx } = useClasses(classesProp);\n  const { filterOptions, activeGroup, setActiveGroup } =\n    useContext(HvFilterGroupContext);\n\n  return (\n    <HvPanel id={setId(id, \"leftPanel\")} className={className}>\n      {filterOptions.length > 0 ? (\n        <HvListContainer id={setId(id, \"leftPanel-list\")} condensed interactive>\n          {filterOptions.map((group, index) => {\n            const ItemText = wrapperTooltip(true, group.name, group.name);\n\n            return (\n              <HvListItem\n                id={group.id}\n                key={group.name}\n                className={cx(classes.listItem)}\n                onClick={() => setActiveGroup(index)}\n                selected={filterOptions[activeGroup].id === group.id}\n                endAdornment={<HvFilterGroupCounter id={group.id} />}\n              >\n                <ItemText />\n              </HvListItem>\n            );\n          })}\n        </HvListContainer>\n      ) : (\n        emptyElement\n      )}\n    </HvPanel>\n  );\n};\n"],"names":["HvFilterGroupLeftPanel","id","className","emptyElement","classes","classesProp","cx","useClasses","filterOptions","activeGroup","setActiveGroup","useContext","HvFilterGroupContext","HvPanel","setId","children","length","HvListContainer","condensed","interactive","map","group","index","ItemText","wrapperTooltip","name","HvListItem","listItem","onClick","selected","endAdornment","HvFilterGroupCounter","_jsx"],"mappings":";;;;;;;;;;;;AAkBO,MAAMA,yBAAyBA,CAAC;AAAA,EACrCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AACkB,MAAM;AAC3B,QAAA;AAAA,IAAED;AAAAA,IAASE;AAAAA,EAAAA,IAAOC,iBAAAA,WAAWF,WAAW;AACxC,QAAA;AAAA,IAAEG;AAAAA,IAAeC;AAAAA,IAAaC;AAAAA,EAAAA,IAClCC,MAAAA,WAAWC,mBAAAA,oBAAoB;AAEjC,wCACGC,MAAAA,SAAO;AAAA,IAACZ,IAAIa,MAAAA,MAAMb,IAAI,WAAW;AAAA,IAAGC;AAAAA,IAAqBa,UACvDP,cAAcQ,SAAS,mCACrBC,cAAAA,iBAAe;AAAA,MAAChB,IAAIa,MAAAA,MAAMb,IAAI,gBAAgB;AAAA,MAAGiB,WAAS;AAAA,MAACC,aAAW;AAAA,MAAAJ,UACpEP,cAAcY,IAAI,CAACC,OAAOC,UAAU;AACnC,cAAMC,WAAWC,eAAAA,eAAe,MAAMH,MAAMI,MAAMJ,MAAMI,IAAI;AAE5D,8CACGC,SAAAA,YAAU;AAAA,UACTzB,IAAIoB,MAAMpB;AAAAA,UAEVC,WAAWI,GAAGF,QAAQuB,QAAQ;AAAA,UAC9BC,SAASA,MAAMlB,eAAeY,KAAK;AAAA,UACnCO,UAAUrB,cAAcC,WAAW,EAAER,OAAOoB,MAAMpB;AAAAA,UAClD6B,6CAAeC,8BAAoB;AAAA,YAAC9B,IAAIoB,MAAMpB;AAAAA,UAAAA,CAAK;AAAA,UAAEc,UAErDiB,2BAAAA,IAACT,UAAU,EAAA;AAAA,QAAA,GANNF,MAAMI,IAOD;AAAA,MAAA,CAEf;AAAA,IACc,CAAA,IAEjBtB;AAAAA,EAAAA,CAEK;AAEb;;;"}

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

@@ -1,10 +1,16 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const styles = {
+const classes = require("../../../utils/classes.cjs");
+const name = "HvFilterGroupLeftPanel";
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses(name, {
   listItem: {
     display: "flex",
     justifyContent: "space-between"
   }
-};
-exports.styles = styles;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=LeftPanel.styles.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"LeftPanel.styles.cjs","sources":["../../../../../src/components/FilterGroup/LeftPanel/LeftPanel.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { HvFilterGroupLeftPanelClasses } from \"./leftPanelClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvFilterGroupLeftPanelClasses, CSSInterpolation>\n> = {\n  listItem: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n  },\n};\n"],"names":["styles","listItem","display","justifyContent"],"mappings":";;AAGO,MAAMA,SAET;AAAA,EACFC,UAAU;AAAA,IACRC,SAAS;AAAA,IACTC,gBAAgB;AAAA,EAClB;AACF;;"}
+{"version":3,"file":"LeftPanel.styles.cjs","sources":["../../../../../src/components/FilterGroup/LeftPanel/LeftPanel.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils\";\n\nconst name = \"HvFilterGroupLeftPanel\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  listItem: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n  },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","listItem","display","justifyContent"],"mappings":";;;AAEA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAcH,MAAM;AAAA,EAC/DI,UAAU;AAAA,IACRC,SAAS;AAAA,IACTC,gBAAgB;AAAA,EAClB;AACF,CAAC;;;"}

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

@@ -2,10 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const cloneDeep = require("lodash/cloneDeep");
-const react = require("@emotion/react");
 const FilterGroupContext = require("../FilterGroupContext.cjs");
 const RightPanel_styles = require("./RightPanel.styles.cjs");
-const rightPanelClasses = require("./rightPanelClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Typography = require("../../Typography/Typography.cjs");
 const CheckBox = require("../../CheckBox/CheckBox.cjs");
@@ -20,8 +18,11 @@ const HvFilterGroupRightPanel = ({
   className,
   labels,
   emptyElement,
-  classes
+  classes: classesProp
 }) => {
+  const {
+    classes
+  } = RightPanel_styles.useClasses(classesProp);
   const [searchStr, setSearchStr] = React.useState("");
   const [allSelected, setAllSelected] = React.useState(false);
   const [anySelected, setAnySelected] = React.useState(false);
@@ -85,55 +86,46 @@ const HvFilterGroupRightPanel = ({
         }), ` (${activeGroupOptions.length})`]
       })
     });
-    return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
-      children: ({
-        css,
-        cx
-      }) => /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: cx(rightPanelClasses.default.selectAllContainer, css(RightPanel_styles.styles.selectAllContainer), classes == null ? void 0 : classes.selectAllContainer),
-        children: /* @__PURE__ */ jsxRuntime.jsx(CheckBox.HvCheckBox, {
-          id: setId.setId(id, "select-all"),
-          label: defaultLabel,
-          onChange: () => handleSelectAll(),
-          className: cx(rightPanelClasses.default.selectAll, css(RightPanel_styles.styles.selectAll), classes == null ? void 0 : classes.selectAll),
-          indeterminate: anySelected && !allSelected,
-          checked: allSelected
-        })
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: classes.selectAllContainer,
+      children: /* @__PURE__ */ jsxRuntime.jsx(CheckBox.HvCheckBox, {
+        id: setId.setId(id, "select-all"),
+        label: defaultLabel,
+        onChange: () => handleSelectAll(),
+        className: classes.selectAll,
+        indeterminate: anySelected && !allSelected,
+        checked: allSelected
       })
     });
-  }, [activeFilterValues == null ? void 0 : activeFilterValues.length, activeGroupOptions.length, allSelected, anySelected, handleSelectAll, id, labels]);
-  return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsxRuntime.jsx(Panel.HvPanel, {
-      id: setId.setId(id, "rightPanel"),
-      className,
-      children: listValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [/* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
-          id: setId.setId(id, "search"),
-          classes: {
-            root: cx(rightPanelClasses.default.search, css(RightPanel_styles.styles.search), classes == null ? void 0 : classes.search)
-          },
-          type: "search",
-          placeholder: labels == null ? void 0 : labels.searchBoxPlaceholder,
-          value: searchStr,
-          onChange: (_, str) => setSearchStr(str)
-        }), /* @__PURE__ */ jsxRuntime.jsx(SelectAll, {}), /* @__PURE__ */ jsxRuntime.jsx(List.HvList, {
-          id: setId.setId(id, "list"),
-          values: listValues,
-          className: cx(rightPanelClasses.default.list, css(RightPanel_styles.styles.list), classes == null ? void 0 : classes.list),
-          multiSelect: true,
-          useSelector: true,
-          showSelectAll: false,
-          onChange: onChangeHandler,
-          selectable: true,
-          condensed: true,
-          hasTooltips: true
-        }, activeGroup)]
-      }) : emptyElement
-    })
+  }, [activeFilterValues == null ? void 0 : activeFilterValues.length, activeGroupOptions.length, allSelected, anySelected, handleSelectAll, id, labels, classes == null ? void 0 : classes.selectAllContainer, classes == null ? void 0 : classes.selectAll]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Panel.HvPanel, {
+    id: setId.setId(id, "rightPanel"),
+    className,
+    children: listValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
+        id: setId.setId(id, "search"),
+        classes: {
+          root: classes.search
+        },
+        type: "search",
+        placeholder: labels == null ? void 0 : labels.searchBoxPlaceholder,
+        value: searchStr,
+        onChange: (_, str) => setSearchStr(str)
+      }), /* @__PURE__ */ jsxRuntime.jsx(SelectAll, {}), /* @__PURE__ */ jsxRuntime.jsx(List.HvList, {
+        id: setId.setId(id, "list"),
+        values: listValues,
+        className: classes.list,
+        multiSelect: true,
+        useSelector: true,
+        showSelectAll: false,
+        onChange: onChangeHandler,
+        selectable: true,
+        condensed: true,
+        hasTooltips: true
+      }, activeGroup)]
+    }) : emptyElement
   });
 };
+exports.filterGroupRightPanelClasses = RightPanel_styles.staticClasses;
 exports.HvFilterGroupRightPanel = HvFilterGroupRightPanel;
 //# sourceMappingURL=RightPanel.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"RightPanel.cjs","sources":["../../../../../src/components/FilterGroup/RightPanel/RightPanel.tsx"],"sourcesContent":["import {\n  HvCheckBox,\n  HvInput,\n  HvList,\n  HvPanel,\n  HvTypography,\n} from \"@core/components\";\nimport { setId } from \"@core/utils\";\nimport { useCallback, useContext, useEffect, useMemo, useState } from \"react\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport { ClassNames } from \"@emotion/react\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { styles } from \"./RightPanel.styles\";\nimport filterGroupRightPanelClasses, {\n  HvFilterGroupRightPanelClasses,\n} from \"./rightPanelClasses\";\n\nexport interface HvFilterGroupRightPanelProps {\n  id?: string;\n  className?: string;\n  labels?: {\n    searchBoxPlaceholder?: string;\n    selectAll?: string;\n    multiSelectionConjunction?: string;\n  };\n  emptyElement?: React.ReactNode;\n  classes?: HvFilterGroupRightPanelClasses;\n}\n\nexport const HvFilterGroupRightPanel = ({\n  id,\n  className,\n  labels,\n  emptyElement,\n  classes,\n}: HvFilterGroupRightPanelProps) => {\n  const [searchStr, setSearchStr] = useState<string>(\"\");\n  const [allSelected, setAllSelected] = useState<boolean>(false);\n  const [anySelected, setAnySelected] = useState<boolean>(false);\n\n  const {\n    filterOptions,\n    filterValues = [],\n    setFilterValues,\n    activeGroup,\n  } = useContext(HvFilterGroupContext);\n\n  const activeGroupOptions = useMemo(\n    () => filterOptions[activeGroup]?.data.map((option) => option.id) || [],\n    [filterOptions, activeGroup]\n  );\n\n  const activeFilterValues = useMemo(\n    () =>\n      filterValues[activeGroup]?.filter((value) =>\n        activeGroupOptions.includes(value)\n      ) || [],\n    [filterValues, activeGroupOptions, activeGroup]\n  );\n\n  const listValues = useMemo(\n    () =>\n      filterOptions[activeGroup]?.data.map((option) => ({\n        ...option,\n        label: option.name,\n        selected: filterValues[activeGroup]?.includes(option.id),\n        isHidden:\n          option.name.toLowerCase().indexOf(searchStr.toLowerCase()) < 0,\n      })) || [],\n    [filterOptions, filterValues, activeGroup, searchStr]\n  );\n\n  const updateSelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n    const hasSelection = nbrSelected > 0;\n    const allSelect = nbrSelected === activeGroupOptions.length;\n\n    setAnySelected(hasSelection);\n    setAllSelected(hasSelection && allSelect);\n  }, [activeFilterValues, activeGroupOptions]);\n\n  useEffect(() => {\n    updateSelectAll();\n  }, [activeFilterValues, updateSelectAll]);\n\n  useEffect(() => setSearchStr(\"\"), [activeGroup]);\n\n  const onChangeHandler = (values) => {\n    const newFilterValues = filterOptions.map((_, i) =>\n      activeGroup === i\n        ? values.filter((v) => v.selected).map((v) => v.id)\n        : [...(filterValues[i] || [])]\n    );\n    setFilterValues(newFilterValues);\n  };\n\n  const handleSelectAll = useCallback(() => {\n    const newFilterValues = cloneDeep(filterValues);\n    newFilterValues[activeGroup] = anySelected ? [] : activeGroupOptions;\n\n    setFilterValues(newFilterValues);\n  }, [\n    activeGroup,\n    activeGroupOptions,\n    anySelected,\n    filterValues,\n    setFilterValues,\n  ]);\n\n  /**\n   * Create selectAll component.\n   *\n   * @returns {*}\n   */\n  const SelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n\n    const defaultLabel = (\n      <HvTypography component=\"span\">\n        {nbrSelected > 0 ? (\n          <>\n            <b>{nbrSelected}</b>\n            {` ${labels?.multiSelectionConjunction} ${activeGroupOptions.length}`}\n          </>\n        ) : (\n          <>\n            <b>{labels?.selectAll}</b>\n            {` (${activeGroupOptions.length})`}\n          </>\n        )}\n      </HvTypography>\n    );\n\n    return (\n      <ClassNames>\n        {({ css, cx }) => (\n          <div\n            className={cx(\n              filterGroupRightPanelClasses.selectAllContainer,\n              css(styles.selectAllContainer),\n              classes?.selectAllContainer\n            )}\n          >\n            <HvCheckBox\n              id={setId(id, \"select-all\")}\n              label={defaultLabel}\n              onChange={() => handleSelectAll()}\n              className={cx(\n                filterGroupRightPanelClasses.selectAll,\n                css(styles.selectAll),\n                classes?.selectAll\n              )}\n              indeterminate={anySelected && !allSelected}\n              checked={allSelected}\n            />\n          </div>\n        )}\n      </ClassNames>\n    );\n  }, [\n    activeFilterValues?.length,\n    activeGroupOptions.length,\n    allSelected,\n    anySelected,\n    handleSelectAll,\n    id,\n    labels,\n  ]);\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <HvPanel id={setId(id, \"rightPanel\")} className={className}>\n          {listValues.length > 0 ? (\n            <>\n              <HvInput\n                id={setId(id, \"search\")}\n                classes={{\n                  root: cx(\n                    filterGroupRightPanelClasses.search,\n                    css(styles.search),\n                    classes?.search\n                  ),\n                }}\n                type=\"search\"\n                placeholder={labels?.searchBoxPlaceholder}\n                value={searchStr}\n                onChange={(_, str) => setSearchStr(str)}\n              />\n              <SelectAll />\n              <HvList\n                key={activeGroup}\n                id={setId(id, \"list\")}\n                values={listValues}\n                className={cx(\n                  filterGroupRightPanelClasses.list,\n                  css(styles.list),\n                  classes?.list\n                )}\n                multiSelect\n                useSelector\n                showSelectAll={false}\n                onChange={onChangeHandler}\n                selectable\n                condensed\n                hasTooltips\n              />\n            </>\n          ) : (\n            emptyElement\n          )}\n        </HvPanel>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvFilterGroupRightPanel","id","className","labels","emptyElement","classes","searchStr","setSearchStr","useState","allSelected","setAllSelected","anySelected","setAnySelected","filterOptions","filterValues","setFilterValues","activeGroup","useContext","HvFilterGroupContext","activeGroupOptions","useMemo","data","map","option","activeFilterValues","filter","value","includes","listValues","label","name","selected","isHidden","toLowerCase","indexOf","updateSelectAll","useCallback","nbrSelected","length","hasSelection","allSelect","useEffect","onChangeHandler","values","newFilterValues","_","i","v","handleSelectAll","cloneDeep","SelectAll","defaultLabel","HvTypography","component","children","_jsxs","_Fragment","_jsx","multiSelectionConjunction","selectAll","ClassNames","css","cx","filterGroupRightPanelClasses","selectAllContainer","styles","HvCheckBox","setId","onChange","indeterminate","checked","HvPanel","HvInput","root","search","type","placeholder","searchBoxPlaceholder","str","HvList","list","multiSelect","useSelector","showSelectAll","selectable","condensed","hasTooltips"],"mappings":";;;;;;;;;;;;;;;;;AA6BO,MAAMA,0BAA0BA,CAAC;AAAA,EACtCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAC4B,MAAM;AAClC,QAAM,CAACC,WAAWC,YAAY,IAAIC,eAAiB,EAAE;AACrD,QAAM,CAACC,aAAaC,cAAc,IAAIF,eAAkB,KAAK;AAC7D,QAAM,CAACG,aAAaC,cAAc,IAAIJ,eAAkB,KAAK;AAEvD,QAAA;AAAA,IACJK;AAAAA,IACAC,eAAe,CAAE;AAAA,IACjBC;AAAAA,IACAC;AAAAA,EAAAA,IACEC,MAAAA,WAAWC,mBAAAA,oBAAoB;AAEnC,QAAMC,qBAAqBC,MAAAA,QACzB,MAAA;;AAAMP,gCAAcG,WAAW,MAAzBH,mBAA4BQ,KAAKC,IAAKC,CAAWA,WAAAA,OAAOtB,QAAO,CAAA;AAAA,KACrE,CAACY,eAAeG,WAAW,CAC7B;AAEA,QAAMQ,qBAAqBJ,MAAAA,QACzB,MACEN;;AAAAA,+BAAaE,WAAW,MAAxBF,mBAA2BW,OAAQC,CACjCP,UAAAA,mBAAmBQ,SAASD,KAAK,OAC9B,CAAE;AAAA,KACT,CAACZ,cAAcK,oBAAoBH,WAAW,CAChD;AAEMY,QAAAA,aAAaR,cACjB;;AACEP,gCAAcG,WAAW,MAAzBH,mBAA4BQ,KAAKC,IAAKC,CAAY,WAAA;;AAAA;AAAA,QAChD,GAAGA;AAAAA,QACHM,OAAON,OAAOO;AAAAA,QACdC,WAAUjB,MAAAA,aAAaE,WAAW,MAAxBF,gBAAAA,IAA2Ba,SAASJ,OAAOtB;AAAAA,QACrD+B,UACET,OAAOO,KAAKG,YAAAA,EAAcC,QAAQ5B,UAAU2B,YAAa,CAAA,IAAI;AAAA,MAAA;AAAA,WAC1D,CAAA;AAAA,KACT,CAACpB,eAAeC,cAAcE,aAAaV,SAAS,CACtD;AAEM6B,QAAAA,kBAAkBC,MAAAA,YAAY,MAAM;AACxC,UAAMC,cAAcb,yDAAoBc;AACxC,UAAMC,eAAeF,cAAc;AAC7BG,UAAAA,YAAYH,gBAAgBlB,mBAAmBmB;AAErD1B,mBAAe2B,YAAY;AAC3B7B,mBAAe6B,gBAAgBC,SAAS;AAAA,EAAA,GACvC,CAAChB,oBAAoBL,kBAAkB,CAAC;AAE3CsB,QAAAA,UAAU,MAAM;AACE;EAAA,GACf,CAACjB,oBAAoBW,eAAe,CAAC;AAExCM,QAAAA,UAAU,MAAMlC,aAAa,EAAE,GAAG,CAACS,WAAW,CAAC;AAE/C,QAAM0B,kBAAmBC,CAAW,WAAA;AAC5BC,UAAAA,kBAAkB/B,cAAcS,IAAI,CAACuB,GAAGC,MAC5C9B,gBAAgB8B,IACZH,OAAOlB,OAAQsB,CAAAA,MAAMA,EAAEhB,QAAQ,EAAET,IAAKyB,CAAAA,MAAMA,EAAE9C,EAAE,IAChD,CAAC,GAAIa,aAAagC,CAAC,KAAK,CAAA,CAAG,CACjC;AACA/B,oBAAgB6B,eAAe;AAAA,EAAA;AAG3BI,QAAAA,kBAAkBZ,MAAAA,YAAY,MAAM;AAClCQ,UAAAA,kBAAkBK,2BAAUnC,YAAY;AAC9C8B,oBAAgB5B,WAAW,IAAIL,cAAc,CAAA,IAAKQ;AAElDJ,oBAAgB6B,eAAe;AAAA,EAAA,GAC9B,CACD5B,aACAG,oBACAR,aACAG,cACAC,eAAe,CAChB;AAOKmC,QAAAA,YAAYd,MAAAA,YAAY,MAAM;AAClC,UAAMC,cAAcb,yDAAoBc;AAElCa,UAAAA,8CACHC,yBAAY;AAAA,MAACC,WAAU;AAAA,MAAMC,UAC3BjB,cAAc,IACbkB,2BAAAA,KAAAC,WAAAA,UAAA;AAAA,QAAAF,WACEG,2BAAAA,IAAA,KAAA;AAAA,UAAAH,UAAIjB;AAAAA,QAAAA,CAAe,GACjB,IAAGlC,iCAAQuD,6BAA6BvC,mBAAmBmB,QAAQ;AAAA,MAAA,CACrE,IAEFiB,2BAAAA,KAAAC,qBAAA;AAAA,QAAAF,WACEG,2BAAAA,IAAA,KAAA;AAAA,UAAAH,UAAInD,iCAAQwD;AAAAA,QAAa,CAAA,GACvB,KAAIxC,mBAAmBmB,SAAS;AAAA,MAAA,CAClC;AAAA,IAAA,CAEQ;AAGhB,0CACGsB,MAAAA,YAAU;AAAA,MAAAN,UACRA,CAAC;AAAA,QAAEO;AAAAA,QAAKC;AAAAA,MAAAA,qCACP,OAAA;AAAA,QACE5D,WAAW4D,GACTC,kBAA6BC,QAAAA,oBAC7BH,IAAII,kBAAAA,OAAOD,kBAAkB,GAC7B3D,mCAAS2D,kBACX;AAAA,QAAEV,yCAEDY,qBAAU;AAAA,UACTjE,IAAIkE,MAAAA,MAAMlE,IAAI,YAAY;AAAA,UAC1B4B,OAAOsB;AAAAA,UACPiB,UAAUA,MAAMpB,gBAAgB;AAAA,UAChC9C,WAAW4D,GACTC,kBAA6BJ,QAAAA,WAC7BE,IAAII,kBAAAA,OAAON,SAAS,GACpBtD,mCAASsD,SACX;AAAA,UACAU,eAAe1D,eAAe,CAACF;AAAAA,UAC/B6D,SAAS7D;AAAAA,QAAAA,CACV;AAAA,MAAA,CACE;AAAA,IAAA,CAEG;AAAA,EAEhB,GAAG,CACDe,yDAAoBc,QACpBnB,mBAAmBmB,QACnB7B,aACAE,aACAqC,iBACA/C,IACAE,MAAM,CACP;AAED,wCACGyD,MAAAA,YAAU;AAAA,IAAAN,UACRA,CAAC;AAAA,MAAEO;AAAAA,MAAKC;AAAAA,IAAAA,qCACNS,MAAAA,SAAO;AAAA,MAACtE,IAAIkE,MAAAA,MAAMlE,IAAI,YAAY;AAAA,MAAGC;AAAAA,MAAqBoD,UACxD1B,WAAWU,SAAS,oCACnBkB,WAAAA,UAAA;AAAA,QAAAF,UAAA,CACEG,2BAAAA,IAACe,eAAO;AAAA,UACNvE,IAAIkE,MAAAA,MAAMlE,IAAI,QAAQ;AAAA,UACtBI,SAAS;AAAA,YACPoE,MAAMX,GACJC,kBAA6BW,QAAAA,QAC7Bb,IAAII,kBAAAA,OAAOS,MAAM,GACjBrE,mCAASqE,MACX;AAAA,UACF;AAAA,UACAC,MAAK;AAAA,UACLC,aAAazE,iCAAQ0E;AAAAA,UACrBnD,OAAOpB;AAAAA,UACP8D,UAAUA,CAACvB,GAAGiC,QAAQvE,aAAauE,GAAG;AAAA,QAAA,CACvC,GACA5B,2BAAAA,IAAAA,YAAW,CAAA,kCACX6B,KAAAA,QAAM;AAAA,UAEL9E,IAAIkE,MAAAA,MAAMlE,IAAI,MAAM;AAAA,UACpB0C,QAAQf;AAAAA,UACR1B,WAAW4D,GACTC,kBAA6BiB,QAAAA,MAC7BnB,IAAII,kBAAAA,OAAOe,IAAI,GACf3E,mCAAS2E,IACX;AAAA,UACAC,aAAW;AAAA,UACXC,aAAW;AAAA,UACXC,eAAe;AAAA,UACff,UAAU1B;AAAAA,UACV0C,YAAU;AAAA,UACVC,WAAS;AAAA,UACTC,aAAW;AAAA,QAAA,GAdNtE,WAeN,CAAC;AAAA,MACF,CAAA,IAEFZ;AAAAA,IAAAA,CAEK;AAAA,EAAA,CAED;AAEhB;;"}
+{"version":3,"file":"RightPanel.cjs","sources":["../../../../../src/components/FilterGroup/RightPanel/RightPanel.tsx"],"sourcesContent":["import {\n  HvCheckBox,\n  HvInput,\n  HvList,\n  HvPanel,\n  HvTypography,\n} from \"@core/components\";\nimport { ExtractNames, setId } from \"@core/utils\";\nimport { useCallback, useContext, useEffect, useMemo, useState } from \"react\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { staticClasses, useClasses } from \"./RightPanel.styles\";\n\nexport { staticClasses as filterGroupRightPanelClasses };\n\nexport type HvFilterGroupRightPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupRightPanelProps {\n  id?: string;\n  className?: string;\n  labels?: {\n    searchBoxPlaceholder?: string;\n    selectAll?: string;\n    multiSelectionConjunction?: string;\n  };\n  emptyElement?: React.ReactNode;\n  classes?: HvFilterGroupRightPanelClasses;\n}\n\nexport const HvFilterGroupRightPanel = ({\n  id,\n  className,\n  labels,\n  emptyElement,\n  classes: classesProp,\n}: HvFilterGroupRightPanelProps) => {\n  const { classes } = useClasses(classesProp);\n  const [searchStr, setSearchStr] = useState<string>(\"\");\n  const [allSelected, setAllSelected] = useState<boolean>(false);\n  const [anySelected, setAnySelected] = useState<boolean>(false);\n\n  const {\n    filterOptions,\n    filterValues = [],\n    setFilterValues,\n    activeGroup,\n  } = useContext(HvFilterGroupContext);\n\n  const activeGroupOptions = useMemo(\n    () => filterOptions[activeGroup]?.data.map((option) => option.id) || [],\n    [filterOptions, activeGroup]\n  );\n\n  const activeFilterValues = useMemo(\n    () =>\n      filterValues[activeGroup]?.filter((value) =>\n        activeGroupOptions.includes(value)\n      ) || [],\n    [filterValues, activeGroupOptions, activeGroup]\n  );\n\n  const listValues = useMemo(\n    () =>\n      filterOptions[activeGroup]?.data.map((option) => ({\n        ...option,\n        label: option.name,\n        selected: filterValues[activeGroup]?.includes(option.id),\n        isHidden:\n          option.name.toLowerCase().indexOf(searchStr.toLowerCase()) < 0,\n      })) || [],\n    [filterOptions, filterValues, activeGroup, searchStr]\n  );\n\n  const updateSelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n    const hasSelection = nbrSelected > 0;\n    const allSelect = nbrSelected === activeGroupOptions.length;\n\n    setAnySelected(hasSelection);\n    setAllSelected(hasSelection && allSelect);\n  }, [activeFilterValues, activeGroupOptions]);\n\n  useEffect(() => {\n    updateSelectAll();\n  }, [activeFilterValues, updateSelectAll]);\n\n  useEffect(() => setSearchStr(\"\"), [activeGroup]);\n\n  const onChangeHandler = (values) => {\n    const newFilterValues = filterOptions.map((_, i) =>\n      activeGroup === i\n        ? values.filter((v) => v.selected).map((v) => v.id)\n        : [...(filterValues[i] || [])]\n    );\n    setFilterValues(newFilterValues);\n  };\n\n  const handleSelectAll = useCallback(() => {\n    const newFilterValues = cloneDeep(filterValues);\n    newFilterValues[activeGroup] = anySelected ? [] : activeGroupOptions;\n\n    setFilterValues(newFilterValues);\n  }, [\n    activeGroup,\n    activeGroupOptions,\n    anySelected,\n    filterValues,\n    setFilterValues,\n  ]);\n\n  /**\n   * Create selectAll component.\n   *\n   * @returns {*}\n   */\n  const SelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n\n    const defaultLabel = (\n      <HvTypography component=\"span\">\n        {nbrSelected > 0 ? (\n          <>\n            <b>{nbrSelected}</b>\n            {` ${labels?.multiSelectionConjunction} ${activeGroupOptions.length}`}\n          </>\n        ) : (\n          <>\n            <b>{labels?.selectAll}</b>\n            {` (${activeGroupOptions.length})`}\n          </>\n        )}\n      </HvTypography>\n    );\n\n    return (\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select-all\")}\n          label={defaultLabel}\n          onChange={() => handleSelectAll()}\n          className={classes.selectAll}\n          indeterminate={anySelected && !allSelected}\n          checked={allSelected}\n        />\n      </div>\n    );\n  }, [\n    activeFilterValues?.length,\n    activeGroupOptions.length,\n    allSelected,\n    anySelected,\n    handleSelectAll,\n    id,\n    labels,\n    classes?.selectAllContainer,\n    classes?.selectAll,\n  ]);\n\n  return (\n    <HvPanel id={setId(id, \"rightPanel\")} className={className}>\n      {listValues.length > 0 ? (\n        <>\n          <HvInput\n            id={setId(id, \"search\")}\n            classes={{\n              root: classes.search,\n            }}\n            type=\"search\"\n            placeholder={labels?.searchBoxPlaceholder}\n            value={searchStr}\n            onChange={(_, str) => setSearchStr(str)}\n          />\n          <SelectAll />\n          <HvList\n            key={activeGroup}\n            id={setId(id, \"list\")}\n            values={listValues}\n            className={classes.list}\n            multiSelect\n            useSelector\n            showSelectAll={false}\n            onChange={onChangeHandler}\n            selectable\n            condensed\n            hasTooltips\n          />\n        </>\n      ) : (\n        emptyElement\n      )}\n    </HvPanel>\n  );\n};\n"],"names":["HvFilterGroupRightPanel","id","className","labels","emptyElement","classes","classesProp","useClasses","searchStr","setSearchStr","useState","allSelected","setAllSelected","anySelected","setAnySelected","filterOptions","filterValues","setFilterValues","activeGroup","useContext","HvFilterGroupContext","activeGroupOptions","useMemo","data","map","option","activeFilterValues","filter","value","includes","listValues","label","name","selected","isHidden","toLowerCase","indexOf","updateSelectAll","useCallback","nbrSelected","length","hasSelection","allSelect","useEffect","onChangeHandler","values","newFilterValues","_","i","v","handleSelectAll","cloneDeep","SelectAll","defaultLabel","HvTypography","component","children","_jsxs","_Fragment","_jsx","multiSelectionConjunction","selectAll","selectAllContainer","HvCheckBox","setId","onChange","indeterminate","checked","HvPanel","HvInput","root","search","type","placeholder","searchBoxPlaceholder","str","HvList","list","multiSelect","useSelector","showSelectAll","selectable","condensed","hasTooltips"],"mappings":"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"}

package/dist/cjs/components/FilterGroup/RightPanel/RightPanel.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 = "HvFilterGroupRightPanel";
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses(name, {
   search: {
     marginBottom: uikitStyles.theme.spacing("xs")
   },
@@ -29,6 +34,7 @@ const styles = {
   selectAll: {
     width: "100%"
   }
-};
-exports.styles = styles;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=RightPanel.styles.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"RightPanel.styles.cjs","sources":["../../../../../src/components/FilterGroup/RightPanel/RightPanel.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvFilterGroupRightPanelClasses } from \"./rightPanelClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvFilterGroupRightPanelClasses, CSSInterpolation>\n> = {\n  search: {\n    marginBottom: theme.spacing(\"xs\"),\n  },\n  list: {\n    width: \"calc(100% + 8px)\",\n    height: \"calc(100% - 70px)\",\n    overflowY: \"auto\",\n    margin: -4,\n    padding: 4,\n  },\n  selectAllContainer: {\n    // Prevent the focus ring to be hidden by sibling hover background\n    \"&\": {\n      position: \"relative\",\n      zIndex: 0,\n    },\n    \"&:focus-within\": {\n      zIndex: 1,\n    },\n    // IE fallback code (using focus-within-polyfill)\n    \"&.focus-within\": {\n      zIndex: 1,\n    },\n  },\n  selectAll: {\n    width: \"100%\",\n  },\n};\n"],"names":["styles","search","marginBottom","theme","spacing","list","width","height","overflowY","margin","padding","selectAllContainer","position","zIndex","selectAll"],"mappings":";;;AAIO,MAAMA,SAET;AAAA,EACFC,QAAQ;AAAA,IACNC,cAAcC,YAAAA,MAAMC,QAAQ,IAAI;AAAA,EAClC;AAAA,EACAC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRC,SAAS;AAAA,EACX;AAAA,EACAC,oBAAoB;AAAA;AAAA,IAElB,KAAK;AAAA,MACHC,UAAU;AAAA,MACVC,QAAQ;AAAA,IACV;AAAA,IACA,kBAAkB;AAAA,MAChBA,QAAQ;AAAA,IACV;AAAA;AAAA,IAEA,kBAAkB;AAAA,MAChBA,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,WAAW;AAAA,IACTR,OAAO;AAAA,EACT;AACF;;"}
+{"version":3,"file":"RightPanel.styles.cjs","sources":["../../../../../src/components/FilterGroup/RightPanel/RightPanel.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst name = \"HvFilterGroupRightPanel\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  search: {\n    marginBottom: theme.spacing(\"xs\"),\n  },\n  list: {\n    width: \"calc(100% + 8px)\",\n    height: \"calc(100% - 70px)\",\n    overflowY: \"auto\",\n    margin: -4,\n    padding: 4,\n  },\n  selectAllContainer: {\n    // Prevent the focus ring to be hidden by sibling hover background\n    \"&\": {\n      position: \"relative\",\n      zIndex: 0,\n    },\n    \"&:focus-within\": {\n      zIndex: 1,\n    },\n    // IE fallback code (using focus-within-polyfill)\n    \"&.focus-within\": {\n      zIndex: 1,\n    },\n  },\n  selectAll: {\n    width: \"100%\",\n  },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","search","marginBottom","theme","spacing","list","width","height","overflowY","margin","padding","selectAllContainer","position","zIndex","selectAll"],"mappings":";;;;AAGA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAcH,MAAM;AAAA,EAC/DI,QAAQ;AAAA,IACNC,cAAcC,YAAAA,MAAMC,QAAQ,IAAI;AAAA,EAClC;AAAA,EACAC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRC,SAAS;AAAA,EACX;AAAA,EACAC,oBAAoB;AAAA;AAAA,IAElB,KAAK;AAAA,MACHC,UAAU;AAAA,MACVC,QAAQ;AAAA,IACV;AAAA,IACA,kBAAkB;AAAA,MAChBA,QAAQ;AAAA,IACV;AAAA;AAAA,IAEA,kBAAkB;AAAA,MAChBA,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,WAAW;AAAA,IACTR,OAAO;AAAA,EACT;AACF,CAAC;;;"}