@hitachivantara/uikit-react-core 5.7.0 → 5.7.1

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

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const filterGroupClasses = require("./filterGroupClasses.cjs");
-const clsx = require("clsx");
 const FilterGroup_styles = require("./FilterGroup.styles.cjs");
 const FilterGroupContext = require("./FilterGroupContext.cjs");
 const react = require("@emotion/react");
@@ -60,7 +59,8 @@ const HvFilterGroup = ({
   const canShowError = status !== void 0 || required;
   return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, {
       id,
       name,
@@ -68,18 +68,18 @@ const HvFilterGroup = ({
       status,
       disabled,
       required,
-      className: clsx.clsx(className, classes == null ? void 0 : classes.root, filterGroupClasses.default.root),
+      className: cx(filterGroupClasses.default.root, className, classes == null ? void 0 : classes.root),
       ...others,
       children: [(hasLabel || hasDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        className: clsx.clsx(classes == null ? void 0 : classes.labelContainer, filterGroupClasses.default.labelContainer, css(FilterGroup_styles.styles.labelContainer)),
+        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: clsx.clsx(classes == null ? void 0 : classes.label, filterGroupClasses.default.label, css(FilterGroup_styles.styles.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: clsx.clsx(classes == null ? void 0 : classes.description, filterGroupClasses.default.description),
+          className: cx(filterGroupClasses.default.description, classes == null ? void 0 : classes.description),
           children: description
         })]
       }), /* @__PURE__ */ jsxRuntime.jsxs(FilterGroupContext.HvFilterGroupProvider, {
@@ -105,7 +105,7 @@ const HvFilterGroup = ({
         }), canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, {
           id: setId.setId(elementId, "error"),
           disableBorder: true,
-          className: clsx.clsx(classes == null ? void 0 : classes.error, filterGroupClasses.default.error),
+          className: cx(filterGroupClasses.default.error, classes == null ? void 0 : classes.error),
           children: validationMessage
         })]
       })]

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 filterGroupClasses, { HvFilterGroupClasses } from \"./filterGroupClasses\";\nimport {\n  HvFilterGroupContent,\n  HvFilterGroupContentProps,\n} from \"./FilterContent\";\nimport { clsx } from \"clsx\";\nimport { useControlled, useLabels, useUniqueId } from \"@core/hooks\";\nimport { styles } from \"./FilterGroup.styles\";\nimport { setId } from \"@core/utils\";\nimport { HvFilterGroupProvider } from \"./FilterGroupContext\";\nimport { ClassNames } from \"@emotion/react\";\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 }) => (\n        <HvFormElement\n          id={id}\n          name={name}\n          value={value}\n          status={status}\n          disabled={disabled}\n          required={required}\n          className={clsx(className, classes?.root, filterGroupClasses.root)}\n          {...others}\n        >\n          {(hasLabel || hasDescription) && (\n            <div\n              className={clsx(\n                classes?.labelContainer,\n                filterGroupClasses.labelContainer,\n                css(styles.labelContainer)\n              )}\n            >\n              {hasLabel && (\n                <HvLabel\n                  id={setId(elementId, \"label\")}\n                  htmlFor={setId(elementId, \"input\")}\n                  label={label}\n                  className={clsx(\n                    classes?.label,\n                    filterGroupClasses.label,\n                    css(styles.label)\n                  )}\n                />\n              )}\n\n              {hasDescription && (\n                <HvInfoMessage\n                  id={setId(elementId, \"description\")}\n                  className={clsx(\n                    classes?.description,\n                    filterGroupClasses.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={clsx(classes?.error, filterGroupClasses.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","HvFormElement","clsx","root","filterGroupClasses","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 filterGroupClasses, { HvFilterGroupClasses } from \"./filterGroupClasses\";\nimport {\n  HvFilterGroupContent,\n  HvFilterGroupContentProps,\n} from \"./FilterContent\";\nimport { useControlled, useLabels, useUniqueId } from \"@core/hooks\";\nimport { styles } from \"./FilterGroup.styles\";\nimport { setId } from \"@core/utils\";\nimport { HvFilterGroupProvider } from \"./FilterGroupContext\";\nimport { ClassNames } from \"@emotion/react\";\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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"}

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

@@ -4,7 +4,6 @@ const React = require("react");
 const FilterGroupContext = require("../FilterGroupContext.cjs");
 const react = require("@emotion/react");
 const LeftPanel_styles = require("./LeftPanel.styles.cjs");
-const clsx = require("clsx");
 const leftPanelClasses = require("./leftPanelClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Counter = require("../Counter/Counter.cjs");
@@ -26,7 +25,8 @@ const HvFilterGroupLeftPanel = ({
   } = React.useContext(FilterGroupContext.HvFilterGroupContext);
   return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsxRuntime.jsx(Panel.HvPanel, {
       id: setId.setId(id, "leftPanel"),
       className,
@@ -38,7 +38,7 @@ const HvFilterGroupLeftPanel = ({
           const ItemText = wrapperTooltip.wrapperTooltip(true, group.name, group.name);
           return /* @__PURE__ */ jsxRuntime.jsx(ListItem.HvListItem, {
             id: group.id,
-            className: clsx.clsx(leftPanelClasses.default.listItem, css(LeftPanel_styles.styles.listItem), classes == null ? void 0 : classes.listItem),
+            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, {

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 { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { HvListContainer, HvListItem, HvPanel } from \"@core/components\";\nimport { setId, wrapperTooltip } from \"@core/utils\";\nimport { HvFilterGroupCounter } from \"../Counter\";\nimport { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./LeftPanel.styles\";\nimport { clsx } from \"clsx\";\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 }) => (\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={clsx(\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","HvPanel","setId","length","HvListContainer","condensed","interactive","map","group","index","ItemText","wrapperTooltip","name","HvListItem","clsx","filterGroupLeftPanelClasses","listItem","styles","onClick","selected","endAdornment","HvFilterGroupCounter","_jsx"],"mappings":";;;;;;;;;;;;;;;AAmBO,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,IAAAA,qCACDC,MAAAA,SAAO;AAAA,MAACZ,IAAIa,MAAAA,MAAMb,IAAI,WAAW;AAAA,MAAGC;AAAAA,MAAqBS,UACvDN,cAAcU,SAAS,mCACrBC,cAAAA,iBAAe;AAAA,QACdf,IAAIa,MAAAA,MAAMb,IAAI,gBAAgB;AAAA,QAC9BgB,WAAS;AAAA,QACTC,aAAW;AAAA,QAAAP,UAEVN,cAAcc,IAAI,CAACC,OAAOC,UAAU;AACnC,gBAAMC,WAAWC,eAAAA,eAAe,MAAMH,MAAMI,MAAMJ,MAAMI,IAAI;AAE5D,gDACGC,SAAAA,YAAU;AAAA,YACTxB,IAAImB,MAAMnB;AAAAA,YAEVC,WAAWwB,KAAAA,KACTC,iBAA4BC,QAAAA,UAC5BhB,IAAIiB,iBAAAA,OAAOD,QAAQ,GACnBxB,mCAASwB,QAAQ;AAAA,YAEnBE,SAASA,MAAMvB,eAAec,KAAK;AAAA,YACnCU,UAAU1B,cAAcC,WAAW,EAAEL,OAAOmB,MAAMnB;AAAAA,YAClD+B,6CAAeC,8BAAoB;AAAA,cAAChC,IAAImB,MAAMnB;AAAAA,YAAAA,CAAO;AAAA,YAAAU,UAErDuB,2BAAAA,IAACZ,UAAQ,EAAA;AAAA,UAAA,GAVJF,MAAMI,IAAI;AAAA,QAAA,CAapB;AAAA,MAAC,CAAA,IAGJrB;AAAAA,IAAAA,CACD;AAAA,EAAA,CAGM;AAEjB;;"}
+{"version":3,"file":"LeftPanel.cjs","sources":["../../../../../src/components/FilterGroup/LeftPanel/LeftPanel.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { HvListContainer, HvListItem, HvPanel } from \"@core/components\";\nimport { setId, wrapperTooltip } from \"@core/utils\";\nimport { HvFilterGroupCounter } from \"../Counter\";\nimport { ClassNames } from \"@emotion/react\";\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,QAAQ;AAAA,YAEnBE,SAASA,MAAMvB,eAAee,KAAK;AAAA,YACnCS,UAAU1B,cAAcC,WAAW,EAAEL,OAAOoB,MAAMpB;AAAAA,YAClD+B,6CAAeC,8BAAoB;AAAA,cAAChC,IAAIoB,MAAMpB;AAAAA,YAAAA,CAAO;AAAA,YAAAU,UAErDuB,2BAAAA,IAACX,UAAQ,EAAA;AAAA,UAAA,GAVJF,MAAMI,IAAI;AAAA,QAAA,CAapB;AAAA,MAAC,CAAA,IAGJtB;AAAAA,IAAAA,CACD;AAAA,EAAA,CAGM;AAEjB;;"}

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

@@ -5,7 +5,6 @@ const FilterGroupContext = require("../FilterGroupContext.cjs");
 const cloneDeep = require("lodash/cloneDeep");
 const react = require("@emotion/react");
 const RightPanel_styles = require("./RightPanel.styles.cjs");
-const clsx = require("clsx");
 const rightPanelClasses = require("./rightPanelClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Typography = require("../../Typography/Typography.cjs");
@@ -88,14 +87,15 @@ const HvFilterGroupRightPanel = ({
     });
     return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
       children: ({
-        css
+        css,
+        cx
       }) => /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: clsx.clsx(rightPanelClasses.default.selectAllContainer, css(RightPanel_styles.styles.selectAllContainer), classes == null ? void 0 : classes.selectAllContainer),
+        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: clsx.clsx(rightPanelClasses.default.selectAll, css(RightPanel_styles.styles.selectAll), classes == null ? void 0 : classes.selectAll),
+          className: cx(rightPanelClasses.default.selectAll, css(RightPanel_styles.styles.selectAll), classes == null ? void 0 : classes.selectAll),
           indeterminate: anySelected && !allSelected,
           checked: allSelected
         })
@@ -104,7 +104,8 @@ const HvFilterGroupRightPanel = ({
   }, [activeFilterValues == null ? void 0 : activeFilterValues.length, activeGroupOptions.length, allSelected, anySelected, handleSelectAll, id, labels]);
   return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsxRuntime.jsx(Panel.HvPanel, {
       id: setId.setId(id, "rightPanel"),
       className,
@@ -112,7 +113,7 @@ const HvFilterGroupRightPanel = ({
         children: [/* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
           id: setId.setId(id, "search"),
           classes: {
-            root: clsx.clsx(rightPanelClasses.default.search, css(RightPanel_styles.styles.search), classes == null ? void 0 : classes.search)
+            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,
@@ -121,7 +122,7 @@ const HvFilterGroupRightPanel = ({
         }), /* @__PURE__ */ jsxRuntime.jsx(SelectAll, {}), /* @__PURE__ */ jsxRuntime.jsx(List.HvList, {
           id: setId.setId(id, "list"),
           values: listValues,
-          className: clsx.clsx(rightPanelClasses.default.list, css(RightPanel_styles.styles.list), classes == null ? void 0 : classes.list),
+          className: cx(rightPanelClasses.default.list, css(RightPanel_styles.styles.list), classes == null ? void 0 : classes.list),
           multiSelect: true,
           useSelector: true,
           showSelectAll: false,

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 { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./RightPanel.styles\";\nimport { clsx } from \"clsx\";\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 }) => (\n          <div\n            className={clsx(\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={clsx(\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 }) => (\n        <HvPanel id={setId(id, \"rightPanel\")} className={className}>\n          {listValues.length > 0 ? (\n            <>\n              <HvInput\n                id={setId(id, \"search\")}\n                classes={{\n                  root: clsx(\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={clsx(\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","clsx","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":"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"}
+{"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 { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport { ClassNames } from \"@emotion/react\";\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,CAAC;AAG9B,QAAMQ,qBAAqBJ,MAAAA,QACzB,MACEN;;AAAAA,+BAAaE,WAAW,MAAxBF,mBAA2BW,OAAQC,CACjCP,UAAAA,mBAAmBQ,SAASD,KAAK,OAC9B,CAAE;AAAA,KACT,CAACZ,cAAcK,oBAAoBH,WAAW,CAAC;AAG3CY,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,CAAC;AAGjD6B,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;AACG;EAAA,GAChB,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,CAAC;AAElC/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,CAAgB,GAClB,IAAGlC,iCAAQuD,6BAA6BvC,mBAAmBmB,QAAQ;AAAA,MAAA,CACpE,IAEHiB,2BAAAA,KAAAC,qBAAA;AAAA,QAAAF,WACEG,2BAAAA,IAAA,KAAA;AAAA,UAAAH,UAAInD,iCAAQwD;AAAAA,QAAS,CAAA,GACnB,KAAIxC,mBAAmBmB,SAAS;AAAA,MAAA,CAAA;AAAA,IAAA,CAIzC;AAED,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,kBAAkB;AAAA,QAC3BV,yCAEDY,qBAAU;AAAA,UACTjE,IAAIkE,MAAAA,MAAMlE,IAAI,YAAY;AAAA,UAC1B4B,OAAOsB;AAAAA,UACPiB,UAAUA,MAAMpB,gBAAkB;AAAA,UAClC9C,WAAW4D,GACTC,kBAA6BJ,QAAAA,WAC7BE,IAAII,kBAAAA,OAAON,SAAS,GACpBtD,mCAASsD,SAAS;AAAA,UAEpBU,eAAe1D,eAAe,CAACF;AAAAA,UAC/B6D,SAAS7D;AAAAA,QAAAA,CAAY;AAAA,MAAA,CACrB;AAAA,IAAA,CAGK;AAAA,EAEjB,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,MAAM;AAAA,UAEnB;AAAA,UACAC,MAAK;AAAA,UACLC,aAAazE,iCAAQ0E;AAAAA,UACrBnD,OAAOpB;AAAAA,UACP8D,UAAUA,CAACvB,GAAGiC,QAAQvE,aAAauE,GAAG;AAAA,QAAA,CACtC,GACD5B,2BAAAA,IAAAA,+CACA6B,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,IAAI;AAAA,UAEfC,aAAW;AAAA,UACXC,aAAW;AAAA,UACXC,eAAe;AAAA,UACff,UAAU1B;AAAAA,UACV0C,YAAU;AAAA,UACVC,WAAS;AAAA,UACTC,aAAW;AAAA,QAAA,GAdNtE,WAAW,CAehB;AAAA,MAAA,CAAA,IAGJZ;AAAAA,IAAAA,CACD;AAAA,EAAA,CAGM;AAEjB;;"}

package/dist/cjs/components/InlineEditor/InlineEditor.cjs

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const clsx = require("clsx");
 const react = require("@emotion/react");
 const React = require("react");
 const inlineEditorClasses = require("./inlineEditorClasses.cjs");
@@ -76,15 +75,16 @@ const HvInlineEditor = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsxRuntime.jsx("div", {
-      className: clsx.clsx(className, inlineEditorClasses.default.root, classes == null ? void 0 : classes.root, css(InlineEditor_styles.styles.root)),
+      className: cx(inlineEditorClasses.default.root, css(InlineEditor_styles.styles.root), className, classes == null ? void 0 : classes.root),
       children: editMode ? /* @__PURE__ */ jsxRuntime.jsx(InputComponent, {
         inputRef,
         classes: {
-          root: clsx.clsx(classes == null ? void 0 : classes.inputRoot, inlineEditorClasses.default.inputRoot),
-          input: clsx.clsx(classes == null ? void 0 : classes.input, inlineEditorClasses.default.input, css(InlineEditor_styles.styles.input)),
-          inputBorderContainer: clsx.clsx(classes == null ? void 0 : classes.inputBorderContainer, inlineEditorClasses.default.inputBorderContainer, css(InlineEditor_styles.styles.inputBorderContainer))
+          root: cx(inlineEditorClasses.default.inputRoot, classes == null ? void 0 : classes.inputRoot),
+          input: cx(inlineEditorClasses.default.input, css(InlineEditor_styles.styles.input), classes == null ? void 0 : classes.input),
+          inputBorderContainer: cx(inlineEditorClasses.default.inputBorderContainer, css(InlineEditor_styles.styles.inputBorderContainer), classes == null ? void 0 : classes.inputBorderContainer)
         },
         inputProps: {
           style: {
@@ -100,19 +100,19 @@ const HvInlineEditor = ({
       }) : /* @__PURE__ */ jsxRuntime.jsxs(Button.HvButton, {
         variant: "secondaryGhost",
         overrideIconColors: false,
-        className: clsx.clsx(classes == null ? void 0 : classes.button, inlineEditorClasses.default.button, css(InlineEditor_styles.styles.button), parseInt(lineHeight, 10) >= 28 && clsx.clsx(classes == null ? void 0 : classes.largeText, inlineEditorClasses.default.largeText, css(InlineEditor_styles.styles.largeText))),
+        className: cx(inlineEditorClasses.default.button, parseInt(lineHeight, 10) >= 28 && inlineEditorClasses.default.largeText, css(InlineEditor_styles.styles.button), parseInt(lineHeight, 10) >= 28 && css(InlineEditor_styles.styles.largeText), classes == null ? void 0 : classes.button, parseInt(lineHeight, 10) >= 28 && (classes == null ? void 0 : classes.largeText)),
         onClick: handleClick,
         ...buttonProps,
         children: [/* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
           variant,
           noWrap: true,
-          className: clsx.clsx(classes == null ? void 0 : classes.text, inlineEditorClasses.default.text, css(InlineEditor_styles.styles.text), !value && clsx.clsx(classes == null ? void 0 : classes.textEmpty, inlineEditorClasses.default.textEmpty, css(InlineEditor_styles.styles.textEmpty))),
+          className: cx(inlineEditorClasses.default.text, !value && inlineEditorClasses.default.textEmpty, css(InlineEditor_styles.styles.text), !value && css(InlineEditor_styles.styles.textEmpty), classes == null ? void 0 : classes.text, !value && (classes == null ? void 0 : classes.textEmpty)),
           ...typographyProps,
           children: value || placeholder
         }), /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Edit, {
           color: "secondary_60",
           role: "presentation",
-          className: clsx.clsx(classes == null ? void 0 : classes.icon, inlineEditorClasses.default.icon, css(InlineEditor_styles.styles.icon), showIcon && clsx.clsx(classes == null ? void 0 : classes.iconVisible, inlineEditorClasses.default.iconVisible, css(InlineEditor_styles.styles.iconVisible)))
+          className: cx(inlineEditorClasses.default.icon, showIcon && inlineEditorClasses.default.iconVisible, css(InlineEditor_styles.styles.icon), showIcon && css(InlineEditor_styles.styles.iconVisible), classes == null ? void 0 : classes.icon, showIcon && (classes == null ? void 0 : classes.iconVisible))
         })]
       })
     })

package/dist/cjs/components/InlineEditor/InlineEditor.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InlineEditor.cjs","sources":["../../../../src/components/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ClassNames } from \"@emotion/react\";\nimport React, { useLayoutEffect, useRef, useState } from \"react\";\nimport { HvBaseProps } from \"@core/types\";\nimport { useControlled } from \"@core/hooks\";\nimport { getVarValue, isKeypress, keyboardCodes } from \"@core/utils\";\nimport {\n  HvButtonProps,\n  HvTypographyVariants,\n  HvTypographyProps,\n  HvInput,\n  HvButton,\n  HvTypography,\n} from \"@core/components\";\nimport inlineEditorClasses, {\n  HvInlineEditorClasses,\n} from \"./inlineEditorClasses\";\nimport { styles } from \"./InlineEditor.styles\";\nimport { HvThemeTypographyProps, theme } from \"@hitachivantara/uikit-styles\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\n\nexport interface HvInlineEditorProps\n  extends HvBaseProps<HTMLDivElement, \"onBlur\" | \"onChange\"> {\n  /** The value of the form element. */\n  value?: string;\n  /** Whether the Edit icon should always be visible */\n  showIcon?: boolean;\n  /** Component to use as the input. The component \"inherit\" from `HvBaseInput` (such as `HvInput` or `HvTextArea`) */\n  component?: React.ElementType;\n  /** Variant of the HvTypography to display */\n  variant?: HvTypographyVariants;\n  /** Called when the input is blurred. */\n  onBlur?: (\n    event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n    value: string\n  ) => void;\n  /** Called when the input value changes. */\n  onChange?: (event: React.SyntheticEvent, value: string) => void;\n  /** Props passed to the HvButton component */\n  buttonProps?: HvButtonProps;\n  /** Props passed to the HvTypography text component */\n  typographyProps?: HvTypographyProps;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvInlineEditorClasses;\n}\n\nconst getTypographyStyles = (typography): HvThemeTypographyProps => {\n  let typographyStyles = {};\n  Object.keys(typography).map((k) => {\n    typographyStyles[k] = getVarValue(typography[k]);\n  });\n  return typographyStyles;\n};\n\n/**\n * An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = ({\n  className,\n  classes,\n  value: valueProp,\n  defaultValue,\n  showIcon,\n  component: InputComponent = HvInput,\n  variant = \"body\",\n  placeholder = \"Enter text\",\n  onBlur,\n  onChange,\n  onKeyDown,\n  buttonProps,\n  typographyProps,\n  ...others\n}: HvInlineEditorProps) => {\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n  const [editMode, setEditMode] = useState(false);\n  const [cachedValue, setCachedValue] = useState(value);\n  const inputRef = useRef<HTMLInputElement>();\n\n  const typographyStyles = getTypographyStyles(theme.typography[variant] || {});\n  const { lineHeight } = typographyStyles;\n\n  useLayoutEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur = (event) => {\n    setEditMode(false);\n\n    const newValue = value || cachedValue; // empty values should be ignored\n    setValue(newValue);\n    onBlur?.(event, newValue);\n  };\n\n  const handleKeyDown = (event) => {\n    if (isKeypress(event, keyboardCodes.Esc)) {\n      setEditMode(false);\n      setValue(cachedValue);\n    }\n    onKeyDown?.(event);\n  };\n\n  const handleChange = (event, val) => {\n    setValue(val);\n    onChange?.(event, val);\n  };\n\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <div\n          className={clsx(\n            className,\n            inlineEditorClasses.root,\n            classes?.root,\n            css(styles.root)\n          )}\n        >\n          {editMode ? (\n            <InputComponent\n              inputRef={inputRef}\n              classes={{\n                root: clsx(classes?.inputRoot, inlineEditorClasses.inputRoot),\n                input: clsx(\n                  classes?.input,\n                  inlineEditorClasses.input,\n                  css(styles.input)\n                ),\n                inputBorderContainer: clsx(\n                  classes?.inputBorderContainer,\n                  inlineEditorClasses.inputBorderContainer,\n                  css(styles.inputBorderContainer)\n                ),\n              }}\n              inputProps={{\n                style: {\n                  ...typographyStyles,\n                  height: InputComponent === HvInput ? lineHeight : undefined,\n                },\n              }}\n              value={value}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              {...others}\n            />\n          ) : (\n            <HvButton\n              variant=\"secondaryGhost\"\n              overrideIconColors={false}\n              className={clsx(\n                classes?.button,\n                inlineEditorClasses.button,\n                css(styles.button),\n                parseInt(lineHeight as string, 10) >= 28 &&\n                  clsx(\n                    classes?.largeText,\n                    inlineEditorClasses.largeText,\n                    css(styles.largeText)\n                  )\n              )}\n              onClick={handleClick}\n              {...buttonProps}\n            >\n              <HvTypography\n                variant={variant}\n                noWrap\n                className={clsx(\n                  classes?.text,\n                  inlineEditorClasses.text,\n                  css(styles.text),\n                  !value &&\n                    clsx(\n                      classes?.textEmpty,\n                      inlineEditorClasses.textEmpty,\n                      css(styles.textEmpty)\n                    )\n                )}\n                {...typographyProps}\n              >\n                {value || placeholder}\n              </HvTypography>\n              <Edit\n                color=\"secondary_60\"\n                role=\"presentation\"\n                className={clsx(\n                  classes?.icon,\n                  inlineEditorClasses.icon,\n                  css(styles.icon),\n                  showIcon &&\n                    clsx(\n                      classes?.iconVisible,\n                      inlineEditorClasses.iconVisible,\n                      css(styles.iconVisible)\n                    )\n                )}\n              />\n            </HvButton>\n          )}\n        </div>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["getTypographyStyles","typography","typographyStyles","Object","keys","map","k","getVarValue","HvInlineEditor","className","classes","value","valueProp","defaultValue","showIcon","component","InputComponent","HvInput","variant","placeholder","onBlur","onChange","onKeyDown","buttonProps","typographyProps","others","setValue","useControlled","editMode","setEditMode","useState","cachedValue","setCachedValue","inputRef","useRef","theme","lineHeight","useLayoutEffect","input","current","focus","select","handleClick","handleBlur","event","newValue","handleKeyDown","isKeypress","keyboardCodes","Esc","handleChange","val","ClassNames","children","css","clsx","inlineEditorClasses","root","styles","_jsx","inputRoot","inputBorderContainer","inputProps","style","height","undefined","_jsxs","HvButton","overrideIconColors","button","parseInt","largeText","onClick","HvTypography","noWrap","text","textEmpty","Edit","color","role","icon","iconVisible"],"mappings":"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"}
+{"version":3,"file":"InlineEditor.cjs","sources":["../../../../src/components/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport React, { useLayoutEffect, useRef, useState } from \"react\";\nimport { HvBaseProps } from \"@core/types\";\nimport { useControlled } from \"@core/hooks\";\nimport { getVarValue, isKeypress, keyboardCodes } from \"@core/utils\";\nimport {\n  HvButtonProps,\n  HvTypographyVariants,\n  HvTypographyProps,\n  HvInput,\n  HvButton,\n  HvTypography,\n} from \"@core/components\";\nimport inlineEditorClasses, {\n  HvInlineEditorClasses,\n} from \"./inlineEditorClasses\";\nimport { styles } from \"./InlineEditor.styles\";\nimport { HvThemeTypographyProps, theme } from \"@hitachivantara/uikit-styles\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\n\nexport interface HvInlineEditorProps\n  extends HvBaseProps<HTMLDivElement, \"onBlur\" | \"onChange\"> {\n  /** The value of the form element. */\n  value?: string;\n  /** Whether the Edit icon should always be visible */\n  showIcon?: boolean;\n  /** Component to use as the input. The component \"inherit\" from `HvBaseInput` (such as `HvInput` or `HvTextArea`) */\n  component?: React.ElementType;\n  /** Variant of the HvTypography to display */\n  variant?: HvTypographyVariants;\n  /** Called when the input is blurred. */\n  onBlur?: (\n    event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n    value: string\n  ) => void;\n  /** Called when the input value changes. */\n  onChange?: (event: React.SyntheticEvent, value: string) => void;\n  /** Props passed to the HvButton component */\n  buttonProps?: HvButtonProps;\n  /** Props passed to the HvTypography text component */\n  typographyProps?: HvTypographyProps;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvInlineEditorClasses;\n}\n\nconst getTypographyStyles = (typography): HvThemeTypographyProps => {\n  let typographyStyles = {};\n  Object.keys(typography).map((k) => {\n    typographyStyles[k] = getVarValue(typography[k]);\n  });\n  return typographyStyles;\n};\n\n/**\n * An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = ({\n  className,\n  classes,\n  value: valueProp,\n  defaultValue,\n  showIcon,\n  component: InputComponent = HvInput,\n  variant = \"body\",\n  placeholder = \"Enter text\",\n  onBlur,\n  onChange,\n  onKeyDown,\n  buttonProps,\n  typographyProps,\n  ...others\n}: HvInlineEditorProps) => {\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n  const [editMode, setEditMode] = useState(false);\n  const [cachedValue, setCachedValue] = useState(value);\n  const inputRef = useRef<HTMLInputElement>();\n\n  const typographyStyles = getTypographyStyles(theme.typography[variant] || {});\n  const { lineHeight } = typographyStyles;\n\n  useLayoutEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur = (event) => {\n    setEditMode(false);\n\n    const newValue = value || cachedValue; // empty values should be ignored\n    setValue(newValue);\n    onBlur?.(event, newValue);\n  };\n\n  const handleKeyDown = (event) => {\n    if (isKeypress(event, keyboardCodes.Esc)) {\n      setEditMode(false);\n      setValue(cachedValue);\n    }\n    onKeyDown?.(event);\n  };\n\n  const handleChange = (event, val) => {\n    setValue(val);\n    onChange?.(event, val);\n  };\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            inlineEditorClasses.root,\n            css(styles.root),\n            className,\n            classes?.root\n          )}\n        >\n          {editMode ? (\n            <InputComponent\n              inputRef={inputRef}\n              classes={{\n                root: cx(inlineEditorClasses.inputRoot, classes?.inputRoot),\n                input: cx(\n                  inlineEditorClasses.input,\n                  css(styles.input),\n                  classes?.input\n                ),\n                inputBorderContainer: cx(\n                  inlineEditorClasses.inputBorderContainer,\n                  css(styles.inputBorderContainer),\n                  classes?.inputBorderContainer\n                ),\n              }}\n              inputProps={{\n                style: {\n                  ...typographyStyles,\n                  height: InputComponent === HvInput ? lineHeight : undefined,\n                },\n              }}\n              value={value}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              {...others}\n            />\n          ) : (\n            <HvButton\n              variant=\"secondaryGhost\"\n              overrideIconColors={false}\n              className={cx(\n                inlineEditorClasses.button,\n                parseInt(lineHeight as string, 10) >= 28 &&\n                  inlineEditorClasses.largeText,\n                css(styles.button),\n                parseInt(lineHeight as string, 10) >= 28 &&\n                  css(styles.largeText),\n                classes?.button,\n                parseInt(lineHeight as string, 10) >= 28 && classes?.largeText\n              )}\n              onClick={handleClick}\n              {...buttonProps}\n            >\n              <HvTypography\n                variant={variant}\n                noWrap\n                className={cx(\n                  inlineEditorClasses.text,\n                  !value && inlineEditorClasses.textEmpty,\n                  css(styles.text),\n                  !value && css(styles.textEmpty),\n                  classes?.text,\n                  !value && classes?.textEmpty\n                )}\n                {...typographyProps}\n              >\n                {value || placeholder}\n              </HvTypography>\n              <Edit\n                color=\"secondary_60\"\n                role=\"presentation\"\n                className={cx(\n                  inlineEditorClasses.icon,\n                  showIcon && inlineEditorClasses.iconVisible,\n                  css(styles.icon),\n                  showIcon && css(styles.iconVisible),\n                  classes?.icon,\n                  showIcon && classes?.iconVisible\n                )}\n              />\n            </HvButton>\n          )}\n        </div>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["getTypographyStyles","typography","typographyStyles","Object","keys","map","k","getVarValue","HvInlineEditor","className","classes","value","valueProp","defaultValue","showIcon","component","InputComponent","HvInput","variant","placeholder","onBlur","onChange","onKeyDown","buttonProps","typographyProps","others","setValue","useControlled","editMode","setEditMode","useState","cachedValue","setCachedValue","inputRef","useRef","theme","lineHeight","useLayoutEffect","input","current","focus","select","handleClick","handleBlur","event","newValue","handleKeyDown","isKeypress","keyboardCodes","Esc","handleChange","val","ClassNames","children","css","cx","inlineEditorClasses","root","styles","_jsx","inputRoot","inputBorderContainer","inputProps","style","height","undefined","_jsxs","HvButton","overrideIconColors","button","parseInt","largeText","onClick","HvTypography","noWrap","text","textEmpty","Edit","color","role","icon","iconVisible"],"mappings":"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"}

package/dist/cjs/components/InlineEditor/InlineEditor.styles.cjs

@@ -7,16 +7,14 @@ const inputClasses = require("../Input/inputClasses.cjs");
 const styles = {
   root: {
     [`& .${baseInputClasses.default.inputRoot}.${inputClasses.default.inputRoot}`]: {
-      height: "100%"
+      height: "100%",
+      minHeight: "32px"
     }
   },
   inputBorderContainer: {
     top: "unset",
     bottom: 0
   },
-  input: {
-    padding: uikitStyles.theme.spacing([0, "8px"])
-  },
   text: {
     overflow: "hidden",
     textOverflow: "ellipsis",
@@ -27,23 +25,26 @@ const styles = {
     color: uikitStyles.theme.typography.placeholderText.color
   },
   button: {
-    padding: uikitStyles.theme.spacing([0, "8px"]),
+    padding: uikitStyles.theme.spacing(["6px", "8px", "5px", "8px"]),
+    minHeight: "32px",
     boxSizing: "border-box",
     cursor: "text",
     height: "100%",
     width: "100%",
     maxWidth: "100%",
     justifyContent: "flex-start",
+    alignItems: "center",
     backgroundColor: "transparent",
+    border: `${uikitStyles.theme.inlineEditor.borderWidth} solid transparent`,
     "&:hover, &:focus": {
-      outline: `1px solid ${uikitStyles.theme.inlineEditor.hoverBorderColor}`,
+      border: `${uikitStyles.theme.inlineEditor.borderWidth} solid ${uikitStyles.theme.inlineEditor.hoverBorderColor}`,
       backgroundColor: "transparent",
       [`& .${inlineEditorClasses.default.icon}`]: {
         visibility: "visible"
       }
     },
     "&:active": {
-      outline: `1px solid ${uikitStyles.theme.inlineEditor.activeBorderColor}`,
+      border: `${uikitStyles.theme.inlineEditor.borderWidth} solid ${uikitStyles.theme.inlineEditor.activeBorderColor}`,
       backgroundColor: "transparent",
       [`& .${inlineEditorClasses.default.icon}`]: {
         visibility: "visible"
@@ -53,21 +54,22 @@ const styles = {
       width: "100%"
     },
     "& > div > span": {
-      width: "100%",
-      overflow: "hidden"
+      width: "100%"
     }
   },
   icon: {
     cursor: "pointer",
     visibility: "hidden",
-    minWidth: 32,
-    alignSelf: "center"
+    alignSelf: "center",
+    height: "16px",
+    width: "32px",
+    minWidth: "32px",
+    "& svg": {
+      margin: uikitStyles.theme.spacing([0, "8px"])
+    }
   },
   iconVisible: {
     visibility: "visible"
-  },
-  largeText: {
-    margin: uikitStyles.theme.spacing([0, "8px"])
   }
 };
 exports.styles = styles;

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

@@ -1 +1 @@
-{"version":3,"file":"InlineEditor.styles.cjs","sources":["../../../../src/components/InlineEditor/InlineEditor.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { baseInputClasses, inputClasses } from \"@core/components\";\nimport inlineEditorClasses, {\n  HvInlineEditorClasses,\n} from \"./inlineEditorClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvInlineEditorClasses, CSSInterpolation>\n> = {\n  root: {\n    [`& .${baseInputClasses.inputRoot}.${inputClasses.inputRoot}`]: {\n      height: \"100%\",\n    },\n  },\n  inputBorderContainer: {\n    top: \"unset\",\n    bottom: 0,\n  },\n  input: {\n    padding: theme.spacing([0, \"8px\"]),\n  },\n  text: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    alignSelf: \"center\",\n  },\n  textEmpty: {\n    color: theme.typography.placeholderText.color,\n  },\n  button: {\n    padding: theme.spacing([0, \"8px\"]),\n    boxSizing: \"border-box\",\n    cursor: \"text\",\n    height: \"100%\",\n    width: \"100%\",\n    maxWidth: \"100%\",\n    justifyContent: \"flex-start\",\n\n    backgroundColor: \"transparent\",\n    \"&:hover, &:focus\": {\n      outline: `1px solid ${theme.inlineEditor.hoverBorderColor}`,\n      backgroundColor: \"transparent\",\n      [`& .${inlineEditorClasses.icon}`]: {\n        visibility: \"visible\",\n      },\n    },\n    \"&:active\": {\n      outline: `1px solid ${theme.inlineEditor.activeBorderColor}`,\n      backgroundColor: \"transparent\",\n      [`& .${inlineEditorClasses.icon}`]: {\n        visibility: \"visible\",\n      },\n    },\n    \"& > div\": {\n      width: \"100%\",\n    },\n    \"& > div > span\": {\n      width: \"100%\",\n      overflow: \"hidden\",\n    },\n  },\n  icon: {\n    cursor: \"pointer\",\n    visibility: \"hidden\",\n    minWidth: 32,\n    alignSelf: \"center\",\n  },\n  iconVisible: {\n    visibility: \"visible\",\n  },\n  largeText: {\n    margin: theme.spacing([0, \"8px\"]),\n  },\n};\n"],"names":["styles","root","baseInputClasses","inputRoot","inputClasses","height","inputBorderContainer","top","bottom","input","padding","theme","spacing","text","overflow","textOverflow","whiteSpace","alignSelf","textEmpty","color","typography","placeholderText","button","boxSizing","cursor","width","maxWidth","justifyContent","backgroundColor","outline","inlineEditor","hoverBorderColor","inlineEditorClasses","icon","visibility","activeBorderColor","minWidth","iconVisible","largeText","margin"],"mappings":";;;;;;AAOO,MAAMA,SAET;AAAA,EACFC,MAAM;AAAA,IACJ,CAAE,MAAKC,yBAAiBC,aAAaC,aAAAA,QAAaD,WAAW,GAAG;AAAA,MAC9DE,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,sBAAsB;AAAA,IACpBC,KAAK;AAAA,IACLC,QAAQ;AAAA,EACV;AAAA,EACAC,OAAO;AAAA,IACLC,SAASC,YAAAA,MAAMC,QAAQ,CAAC,GAAG,KAAK,CAAC;AAAA,EACnC;AAAA,EACAC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,IACZC,WAAW;AAAA,EACb;AAAA,EACAC,WAAW;AAAA,IACTC,OAAOR,YAAMS,MAAAA,WAAWC,gBAAgBF;AAAAA,EAC1C;AAAA,EACAG,QAAQ;AAAA,IACNZ,SAASC,YAAAA,MAAMC,QAAQ,CAAC,GAAG,KAAK,CAAC;AAAA,IACjCW,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRnB,QAAQ;AAAA,IACRoB,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,gBAAgB;AAAA,IAEhBC,iBAAiB;AAAA,IACjB,oBAAoB;AAAA,MAClBC,SAAU,aAAYlB,YAAAA,MAAMmB,aAAaC;AAAAA,MACzCH,iBAAiB;AAAA,MACjB,CAAE,MAAKI,4BAAoBC,MAAM,GAAG;AAAA,QAClCC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACVL,SAAU,aAAYlB,YAAAA,MAAMmB,aAAaK;AAAAA,MACzCP,iBAAiB;AAAA,MACjB,CAAE,MAAKI,4BAAoBC,MAAM,GAAG;AAAA,QAClCC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACTT,OAAO;AAAA,IACT;AAAA,IACA,kBAAkB;AAAA,MAChBA,OAAO;AAAA,MACPX,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACAmB,MAAM;AAAA,IACJT,QAAQ;AAAA,IACRU,YAAY;AAAA,IACZE,UAAU;AAAA,IACVnB,WAAW;AAAA,EACb;AAAA,EACAoB,aAAa;AAAA,IACXH,YAAY;AAAA,EACd;AAAA,EACAI,WAAW;AAAA,IACTC,QAAQ5B,YAAAA,MAAMC,QAAQ,CAAC,GAAG,KAAK,CAAC;AAAA,EAClC;AACF;;"}
+{"version":3,"file":"InlineEditor.styles.cjs","sources":["../../../../src/components/InlineEditor/InlineEditor.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { baseInputClasses, inputClasses } from \"@core/components\";\nimport inlineEditorClasses, {\n  HvInlineEditorClasses,\n} from \"./inlineEditorClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvInlineEditorClasses, CSSInterpolation>\n> = {\n  root: {\n    [`& .${baseInputClasses.inputRoot}.${inputClasses.inputRoot}`]: {\n      height: \"100%\",\n      minHeight: \"32px\",\n    },\n  },\n  inputBorderContainer: {\n    top: \"unset\",\n    bottom: 0,\n  },\n  text: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    alignSelf: \"center\",\n  },\n  textEmpty: {\n    color: theme.typography.placeholderText.color,\n  },\n  button: {\n    padding: theme.spacing([\"6px\", \"8px\", \"5px\", \"8px\"]),\n    minHeight: \"32px\",\n\n    boxSizing: \"border-box\",\n    cursor: \"text\",\n    height: \"100%\",\n    width: \"100%\",\n    maxWidth: \"100%\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n\n    backgroundColor: \"transparent\",\n    border: `${theme.inlineEditor.borderWidth} solid transparent`,\n\n    \"&:hover, &:focus\": {\n      border: `${theme.inlineEditor.borderWidth} solid ${theme.inlineEditor.hoverBorderColor}`,\n      backgroundColor: \"transparent\",\n\n      [`& .${inlineEditorClasses.icon}`]: {\n        visibility: \"visible\",\n      },\n    },\n\n    \"&:active\": {\n      border: `${theme.inlineEditor.borderWidth} solid ${theme.inlineEditor.activeBorderColor}`,\n      backgroundColor: \"transparent\",\n\n      [`& .${inlineEditorClasses.icon}`]: {\n        visibility: \"visible\",\n      },\n    },\n\n    \"& > div\": {\n      width: \"100%\",\n    },\n    \"& > div > span\": {\n      width: \"100%\",\n    },\n  },\n  icon: {\n    cursor: \"pointer\",\n    visibility: \"hidden\",\n    alignSelf: \"center\",\n    height: \"16px\",\n    width: \"32px\",\n    minWidth: \"32px\",\n\n    \"& svg\": {\n      margin: theme.spacing([0, \"8px\"]),\n    },\n  },\n  iconVisible: {\n    visibility: \"visible\",\n  },\n};\n"],"names":["styles","root","baseInputClasses","inputRoot","inputClasses","height","minHeight","inputBorderContainer","top","bottom","text","overflow","textOverflow","whiteSpace","alignSelf","textEmpty","color","theme","typography","placeholderText","button","padding","spacing","boxSizing","cursor","width","maxWidth","justifyContent","alignItems","backgroundColor","border","inlineEditor","borderWidth","hoverBorderColor","inlineEditorClasses","icon","visibility","activeBorderColor","minWidth","margin","iconVisible"],"mappings":";;;;;;AAOO,MAAMA,SAET;AAAA,EACFC,MAAM;AAAA,IACJ,CAAE,MAAKC,yBAAiBC,aAAaC,aAAAA,QAAaD,WAAW,GAAG;AAAA,MAC9DE,QAAQ;AAAA,MACRC,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAC,sBAAsB;AAAA,IACpBC,KAAK;AAAA,IACLC,QAAQ;AAAA,EACV;AAAA,EACAC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,IACZC,WAAW;AAAA,EACb;AAAA,EACAC,WAAW;AAAA,IACTC,OAAOC,YAAMC,MAAAA,WAAWC,gBAAgBH;AAAAA,EAC1C;AAAA,EACAI,QAAQ;AAAA,IACNC,SAASJ,kBAAMK,QAAQ,CAAC,OAAO,OAAO,OAAO,KAAK,CAAC;AAAA,IACnDhB,WAAW;AAAA,IAEXiB,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRnB,QAAQ;AAAA,IACRoB,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IAEZC,iBAAiB;AAAA,IACjBC,QAAS,GAAEb,YAAAA,MAAMc,aAAaC;AAAAA,IAE9B,oBAAoB;AAAA,MAClBF,QAAS,GAAEb,YAAAA,MAAMc,aAAaC,qBAAqBf,kBAAMc,aAAaE;AAAAA,MACtEJ,iBAAiB;AAAA,MAEjB,CAAE,MAAKK,4BAAoBC,MAAM,GAAG;AAAA,QAClCC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IAEA,YAAY;AAAA,MACVN,QAAS,GAAEb,YAAAA,MAAMc,aAAaC,qBAAqBf,kBAAMc,aAAaM;AAAAA,MACtER,iBAAiB;AAAA,MAEjB,CAAE,MAAKK,4BAAoBC,MAAM,GAAG;AAAA,QAClCC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IAEA,WAAW;AAAA,MACTX,OAAO;AAAA,IACT;AAAA,IACA,kBAAkB;AAAA,MAChBA,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACAU,MAAM;AAAA,IACJX,QAAQ;AAAA,IACRY,YAAY;AAAA,IACZtB,WAAW;AAAA,IACXT,QAAQ;AAAA,IACRoB,OAAO;AAAA,IACPa,UAAU;AAAA,IAEV,SAAS;AAAA,MACPC,QAAQtB,YAAAA,MAAMK,QAAQ,CAAC,GAAG,KAAK,CAAC;AAAA,IAClC;AAAA,EACF;AAAA,EACAkB,aAAa;AAAA,IACXJ,YAAY;AAAA,EACd;AACF;;"}

package/dist/cjs/components/QueryBuilder/RuleGroup/RuleGroup.cjs

@@ -93,13 +93,13 @@ const RuleGroup = ({
     }) => {
       var _a2, _b2, _c2, _d2, _e, _f, _g, _h;
       return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        className: cx(queryBuilderClasses.default.root, css(RuleGroup_styles.styles.root), classes == null ? void 0 : classes.root, level === 0 ? cx(queryBuilderClasses.default.topGroup, css(RuleGroup_styles.styles.topGroup), classes == null ? void 0 : classes.topGroup) : cx(queryBuilderClasses.default.subGroup, css(RuleGroup_styles.styles.subGroup), classes == null ? void 0 : classes.subGroup)),
+        className: cx(queryBuilderClasses.default.root, level === 0 ? queryBuilderClasses.default.topGroup : queryBuilderClasses.default.subGroup, css(RuleGroup_styles.styles.root), level === 0 ? css(RuleGroup_styles.styles.topGroup) : css(RuleGroup_styles.styles.subGroup), classes == null ? void 0 : classes.root, level === 0 ? classes == null ? void 0 : classes.topGroup : classes == null ? void 0 : classes.subGroup),
         children: [/* @__PURE__ */ jsxRuntime.jsxs(Grid.HvGrid, {
           container: true,
           children: [/* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, {
             item: true,
             children: /* @__PURE__ */ jsxRuntime.jsx(MultiButton.HvMultiButton, {
-              className: cx(queryBuilderClasses.default.combinator, css(RuleGroup_styles.styles.combinator), classes == null ? void 0 : classes.combinator, queryBuilderClasses.default.topCombinator, css(RuleGroup_styles.styles.topCombinator), classes == null ? void 0 : classes.topCombinator),
+              className: cx(queryBuilderClasses.default.combinator, queryBuilderClasses.default.topCombinator, css(RuleGroup_styles.styles.combinator), css(RuleGroup_styles.styles.topCombinator), classes == null ? void 0 : classes.combinator, classes == null ? void 0 : classes.topCombinator),
               disabled: readOnly,
               children: combinators && combinators.map((item) => /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
                 className: cx(queryBuilderClasses.default.combinatorButton, css(RuleGroup_styles.styles.combinatorButton), classes == null ? void 0 : classes.combinatorButton),
@@ -113,7 +113,7 @@ const RuleGroup = ({
           }), /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, {
             item: true,
             children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-              className: cx(queryBuilderClasses.default.buttonBackground, css(RuleGroup_styles.styles.buttonBackground), classes == null ? void 0 : classes.buttonBackground, queryBuilderClasses.default.topRemoveButton, css(RuleGroup_styles.styles.topRemoveButton), classes == null ? void 0 : classes.topRemoveButton),
+              className: cx(queryBuilderClasses.default.buttonBackground, queryBuilderClasses.default.topRemoveButton, css(RuleGroup_styles.styles.buttonBackground), css(RuleGroup_styles.styles.topRemoveButton), classes == null ? void 0 : classes.buttonBackground, classes == null ? void 0 : classes.topRemoveButton),
               children: /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
                 icon: true,
                 className: cx(queryBuilderClasses.default.removeButton, css(RuleGroup_styles.styles.removeButton), classes == null ? void 0 : classes.removeButton),
@@ -135,7 +135,7 @@ const RuleGroup = ({
             })
           })]
         }), (rules == null ? void 0 : rules.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", {
-          className: cx(queryBuilderClasses.default.rulesContainer, css(RuleGroup_styles.styles.rulesContainer), classes == null ? void 0 : classes.rulesContainer, level > 0 ? cx(queryBuilderClasses.default.subRulesContainer, css(RuleGroup_styles.styles.subRulesContainer), classes == null ? void 0 : classes.subRulesContainer) : "", level === 0 ? cx(queryBuilderClasses.default.topRulesContainer, css(RuleGroup_styles.styles.topRulesContainer), classes == null ? void 0 : classes.topRulesContainer) : ""),
+          className: cx(queryBuilderClasses.default.rulesContainer, level > 0 && queryBuilderClasses.default.subRulesContainer, level === 0 && queryBuilderClasses.default.topRulesContainer, css(RuleGroup_styles.styles.rulesContainer), level > 0 && css(RuleGroup_styles.styles.subRulesContainer), level === 0 && css(RuleGroup_styles.styles.topRulesContainer), classes == null ? void 0 : classes.rulesContainer, level > 0 && (classes == null ? void 0 : classes.subRulesContainer), level === 0 && (classes == null ? void 0 : classes.topRulesContainer)),
           children: rules.map((rule, index) => {
             if ("combinator" in rule) {
               return /* @__PURE__ */ jsxRuntime.jsx(RuleGroup, {
@@ -200,7 +200,7 @@ const RuleGroup = ({
           container: true,
           children: /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, {
             item: true,
-            className: cx(queryBuilderClasses.default.actionButtonContainer, css(RuleGroup_styles.styles.actionButtonContainer), classes == null ? void 0 : classes.actionButtonContainer, queryBuilderClasses.default.topActionButtonContainer, css(RuleGroup_styles.styles.topActionButtonContainer), classes == null ? void 0 : classes.topActionButtonContainer),
+            className: cx(queryBuilderClasses.default.actionButtonContainer, queryBuilderClasses.default.topActionButtonContainer, css(RuleGroup_styles.styles.actionButtonContainer), css(RuleGroup_styles.styles.topActionButtonContainer), classes == null ? void 0 : classes.actionButtonContainer, classes == null ? void 0 : classes.topActionButtonContainer),
             children: actionButtons
           })
         })]