@hitachivantara/uikit-react-core 5.7.0 → 5.7.1

package/dist/esm/components/FilterGroup/RightPanel/RightPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"RightPanel.js","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":";;;;;;;;;;;;;;AA8BO,MAAMA,0BAA0BA,CAAC;AAAA,EACtCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAC4B,MAAM;AAClC,QAAM,CAACC,WAAWC,YAAY,IAAIC,SAAiB,EAAE;AACrD,QAAM,CAACC,aAAaC,cAAc,IAAIF,SAAkB,KAAK;AAC7D,QAAM,CAACG,aAAaC,cAAc,IAAIJ,SAAkB,KAAK;AAEvD,QAAA;AAAA,IACJK;AAAAA,IACAC,eAAe,CAAE;AAAA,IACjBC;AAAAA,IACAC;AAAAA,EAAAA,IACEC,WAAWC,oBAAoB;AAEnC,QAAMC,qBAAqBC,QACzB,MAAA;;AAAMP,gCAAcG,WAAW,MAAzBH,mBAA4BQ,KAAKC,IAAKC,CAAWA,WAAAA,OAAOtB,QAAO,CAAA;AAAA,KACrE,CAACY,eAAeG,WAAW,CAAC;AAG9B,QAAMQ,qBAAqBJ,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,QACjB;;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,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,YAAU,MAAM;AACG;EAAA,GAChB,CAACjB,oBAAoBW,eAAe,CAAC;AAExCM,YAAU,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,YAAY,MAAM;AAClCQ,UAAAA,kBAAkBK,UAAUnC,YAAY;AAC9C8B,oBAAgB5B,WAAW,IAAIL,cAAc,CAAA,IAAKQ;AAElDJ,oBAAgB6B,eAAe;AAAA,EAAA,GAC9B,CACD5B,aACAG,oBACAR,aACAG,cACAC,eAAe,CAChB;AAOKmC,QAAAA,YAAYd,YAAY,MAAM;AAClC,UAAMC,cAAcb,yDAAoBc;AAElCa,UAAAA,mCACHC,cAAY;AAAA,MAACC,WAAU;AAAA,MAAMC,UAC3BjB,cAAc,IACbkB,qBAAAC,UAAA;AAAA,QAAAF,WACEG,oBAAA,KAAA;AAAA,UAAAH,UAAIjB;AAAAA,QAAAA,CAAgB,GAClB,IAAGlC,iCAAQuD,6BAA6BvC,mBAAmBmB,QAAQ;AAAA,MAAA,CACpE,IAEHiB,qBAAAC,UAAA;AAAA,QAAAF,WACEG,oBAAA,KAAA;AAAA,UAAAH,UAAInD,iCAAQwD;AAAAA,QAAS,CAAA,GACnB,KAAIxC,mBAAmBmB,SAAS;AAAA,MAAA,CAAA;AAAA,IAAA,CAIzC;AAED,+BACGsB,YAAU;AAAA,MAAAN,UACRA,CAAC;AAAA,QAAEO;AAAAA,MAAAA,0BACF,OAAA;AAAA,QACE3D,WAAW4D,KACTC,6BAA6BC,oBAC7BH,IAAII,OAAOD,kBAAkB,GAC7B3D,mCAAS2D,kBAAkB;AAAA,QAC3BV,8BAEDY,YAAU;AAAA,UACTjE,IAAIkE,MAAMlE,IAAI,YAAY;AAAA,UAC1B4B,OAAOsB;AAAAA,UACPiB,UAAUA,MAAMpB,gBAAkB;AAAA,UAClC9C,WAAW4D,KACTC,6BAA6BJ,WAC7BE,IAAII,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,6BACGyD,YAAU;AAAA,IAAAN,UACRA,CAAC;AAAA,MAAEO;AAAAA,IAAAA,0BACDU,SAAO;AAAA,MAACtE,IAAIkE,MAAMlE,IAAI,YAAY;AAAA,MAAGC;AAAAA,MAAqBoD,UACxD1B,WAAWU,SAAS,yBACnBkB,UAAA;AAAA,QAAAF,UAAA,CACEG,oBAACe,SAAO;AAAA,UACNvE,IAAIkE,MAAMlE,IAAI,QAAQ;AAAA,UACtBI,SAAS;AAAA,YACPoE,MAAMX,KACJC,6BAA6BW,QAC7Bb,IAAII,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,oBAAAA,oCACA6B,QAAM;AAAA,UAEL9E,IAAIkE,MAAMlE,IAAI,MAAM;AAAA,UACpB0C,QAAQf;AAAAA,UACR1B,WAAW4D,KACTC,6BAA6BiB,MAC7BnB,IAAII,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;"}
+{"version":3,"file":"RightPanel.js","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":"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"}

package/dist/esm/components/InlineEditor/InlineEditor.js

@@ -1,4 +1,3 @@
-import { clsx } from "clsx";
 import { ClassNames } from "@emotion/react";
 import { useState, useRef, useLayoutEffect } from "react";
 import inlineEditorClasses from "./inlineEditorClasses.js";
@@ -74,15 +73,16 @@ const HvInlineEditor = ({
   };
   return /* @__PURE__ */ jsx(ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsx("div", {
-      className: clsx(className, inlineEditorClasses.root, classes == null ? void 0 : classes.root, css(styles.root)),
+      className: cx(inlineEditorClasses.root, css(styles.root), className, classes == null ? void 0 : classes.root),
       children: editMode ? /* @__PURE__ */ jsx(InputComponent, {
         inputRef,
         classes: {
-          root: clsx(classes == null ? void 0 : classes.inputRoot, inlineEditorClasses.inputRoot),
-          input: clsx(classes == null ? void 0 : classes.input, inlineEditorClasses.input, css(styles.input)),
-          inputBorderContainer: clsx(classes == null ? void 0 : classes.inputBorderContainer, inlineEditorClasses.inputBorderContainer, css(styles.inputBorderContainer))
+          root: cx(inlineEditorClasses.inputRoot, classes == null ? void 0 : classes.inputRoot),
+          input: cx(inlineEditorClasses.input, css(styles.input), classes == null ? void 0 : classes.input),
+          inputBorderContainer: cx(inlineEditorClasses.inputBorderContainer, css(styles.inputBorderContainer), classes == null ? void 0 : classes.inputBorderContainer)
         },
         inputProps: {
           style: {
@@ -98,19 +98,19 @@ const HvInlineEditor = ({
       }) : /* @__PURE__ */ jsxs(HvButton, {
         variant: "secondaryGhost",
         overrideIconColors: false,
-        className: clsx(classes == null ? void 0 : classes.button, inlineEditorClasses.button, css(styles.button), parseInt(lineHeight, 10) >= 28 && clsx(classes == null ? void 0 : classes.largeText, inlineEditorClasses.largeText, css(styles.largeText))),
+        className: cx(inlineEditorClasses.button, parseInt(lineHeight, 10) >= 28 && inlineEditorClasses.largeText, css(styles.button), parseInt(lineHeight, 10) >= 28 && css(styles.largeText), classes == null ? void 0 : classes.button, parseInt(lineHeight, 10) >= 28 && (classes == null ? void 0 : classes.largeText)),
         onClick: handleClick,
         ...buttonProps,
         children: [/* @__PURE__ */ jsx(HvTypography, {
           variant,
           noWrap: true,
-          className: clsx(classes == null ? void 0 : classes.text, inlineEditorClasses.text, css(styles.text), !value && clsx(classes == null ? void 0 : classes.textEmpty, inlineEditorClasses.textEmpty, css(styles.textEmpty))),
+          className: cx(inlineEditorClasses.text, !value && inlineEditorClasses.textEmpty, css(styles.text), !value && css(styles.textEmpty), classes == null ? void 0 : classes.text, !value && (classes == null ? void 0 : classes.textEmpty)),
           ...typographyProps,
           children: value || placeholder
         }), /* @__PURE__ */ jsx(Edit, {
           color: "secondary_60",
           role: "presentation",
-          className: clsx(classes == null ? void 0 : classes.icon, inlineEditorClasses.icon, css(styles.icon), showIcon && clsx(classes == null ? void 0 : classes.iconVisible, inlineEditorClasses.iconVisible, css(styles.iconVisible)))
+          className: cx(inlineEditorClasses.icon, showIcon && inlineEditorClasses.iconVisible, css(styles.icon), showIcon && css(styles.iconVisible), classes == null ? void 0 : classes.icon, showIcon && (classes == null ? void 0 : classes.iconVisible))
         })]
       })
     })

package/dist/esm/components/InlineEditor/InlineEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineEditor.js","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.js","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/esm/components/InlineEditor/InlineEditor.styles.js

@@ -5,16 +5,14 @@ import inputClasses from "../Input/inputClasses.js";
 const styles = {
   root: {
     [`& .${baseInputClasses.inputRoot}.${inputClasses.inputRoot}`]: {
-      height: "100%"
+      height: "100%",
+      minHeight: "32px"
     }
   },
   inputBorderContainer: {
     top: "unset",
     bottom: 0
   },
-  input: {
-    padding: theme.spacing([0, "8px"])
-  },
   text: {
     overflow: "hidden",
     textOverflow: "ellipsis",
@@ -25,23 +23,26 @@ const styles = {
     color: theme.typography.placeholderText.color
   },
   button: {
-    padding: theme.spacing([0, "8px"]),
+    padding: 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: `${theme.inlineEditor.borderWidth} solid transparent`,
     "&:hover, &:focus": {
-      outline: `1px solid ${theme.inlineEditor.hoverBorderColor}`,
+      border: `${theme.inlineEditor.borderWidth} solid ${theme.inlineEditor.hoverBorderColor}`,
       backgroundColor: "transparent",
       [`& .${inlineEditorClasses.icon}`]: {
         visibility: "visible"
       }
     },
     "&:active": {
-      outline: `1px solid ${theme.inlineEditor.activeBorderColor}`,
+      border: `${theme.inlineEditor.borderWidth} solid ${theme.inlineEditor.activeBorderColor}`,
       backgroundColor: "transparent",
       [`& .${inlineEditorClasses.icon}`]: {
         visibility: "visible"
@@ -51,21 +52,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: theme.spacing([0, "8px"])
+    }
   },
   iconVisible: {
     visibility: "visible"
-  },
-  largeText: {
-    margin: theme.spacing([0, "8px"])
   }
 };
 export {

package/dist/esm/components/InlineEditor/InlineEditor.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineEditor.styles.js","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,iBAAiBC,aAAaC,aAAaD,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,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,MAAMS,WAAWC,gBAAgBF;AAAAA,EAC1C;AAAA,EACAG,QAAQ;AAAA,IACNZ,SAASC,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,MAAMmB,aAAaC;AAAAA,MACzCH,iBAAiB;AAAA,MACjB,CAAE,MAAKI,oBAAoBC,MAAM,GAAG;AAAA,QAClCC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACVL,SAAU,aAAYlB,MAAMmB,aAAaK;AAAAA,MACzCP,iBAAiB;AAAA,MACjB,CAAE,MAAKI,oBAAoBC,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,MAAMC,QAAQ,CAAC,GAAG,KAAK,CAAC;AAAA,EAClC;AACF;"}
+{"version":3,"file":"InlineEditor.styles.js","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,iBAAiBC,aAAaC,aAAaD,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,MAAMC,WAAWC,gBAAgBH;AAAAA,EAC1C;AAAA,EACAI,QAAQ;AAAA,IACNC,SAASJ,MAAMK,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,MAAMc,aAAaC;AAAAA,IAE9B,oBAAoB;AAAA,MAClBF,QAAS,GAAEb,MAAMc,aAAaC,qBAAqBf,MAAMc,aAAaE;AAAAA,MACtEJ,iBAAiB;AAAA,MAEjB,CAAE,MAAKK,oBAAoBC,MAAM,GAAG;AAAA,QAClCC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IAEA,YAAY;AAAA,MACVN,QAAS,GAAEb,MAAMc,aAAaC,qBAAqBf,MAAMc,aAAaM;AAAAA,MACtER,iBAAiB;AAAA,MAEjB,CAAE,MAAKK,oBAAoBC,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,MAAMK,QAAQ,CAAC,GAAG,KAAK,CAAC;AAAA,IAClC;AAAA,EACF;AAAA,EACAkB,aAAa;AAAA,IACXJ,YAAY;AAAA,EACd;AACF;"}

package/dist/esm/components/QueryBuilder/RuleGroup/RuleGroup.js

@@ -91,13 +91,13 @@ const RuleGroup = ({
     }) => {
       var _a2, _b2, _c2, _d2, _e, _f, _g, _h;
       return /* @__PURE__ */ jsxs("div", {
-        className: cx(queryBuilderClasses.root, css(styles.root), classes == null ? void 0 : classes.root, level === 0 ? cx(queryBuilderClasses.topGroup, css(styles.topGroup), classes == null ? void 0 : classes.topGroup) : cx(queryBuilderClasses.subGroup, css(styles.subGroup), classes == null ? void 0 : classes.subGroup)),
+        className: cx(queryBuilderClasses.root, level === 0 ? queryBuilderClasses.topGroup : queryBuilderClasses.subGroup, css(styles.root), level === 0 ? css(styles.topGroup) : css(styles.subGroup), classes == null ? void 0 : classes.root, level === 0 ? classes == null ? void 0 : classes.topGroup : classes == null ? void 0 : classes.subGroup),
         children: [/* @__PURE__ */ jsxs(HvGrid, {
           container: true,
           children: [/* @__PURE__ */ jsx(HvGrid, {
             item: true,
             children: /* @__PURE__ */ jsx(HvMultiButton, {
-              className: cx(queryBuilderClasses.combinator, css(styles.combinator), classes == null ? void 0 : classes.combinator, queryBuilderClasses.topCombinator, css(styles.topCombinator), classes == null ? void 0 : classes.topCombinator),
+              className: cx(queryBuilderClasses.combinator, queryBuilderClasses.topCombinator, css(styles.combinator), css(styles.topCombinator), classes == null ? void 0 : classes.combinator, classes == null ? void 0 : classes.topCombinator),
               disabled: readOnly,
               children: combinators && combinators.map((item) => /* @__PURE__ */ jsx(HvButton, {
                 className: cx(queryBuilderClasses.combinatorButton, css(styles.combinatorButton), classes == null ? void 0 : classes.combinatorButton),
@@ -111,7 +111,7 @@ const RuleGroup = ({
           }), /* @__PURE__ */ jsx(HvGrid, {
             item: true,
             children: /* @__PURE__ */ jsx("div", {
-              className: cx(queryBuilderClasses.buttonBackground, css(styles.buttonBackground), classes == null ? void 0 : classes.buttonBackground, queryBuilderClasses.topRemoveButton, css(styles.topRemoveButton), classes == null ? void 0 : classes.topRemoveButton),
+              className: cx(queryBuilderClasses.buttonBackground, queryBuilderClasses.topRemoveButton, css(styles.buttonBackground), css(styles.topRemoveButton), classes == null ? void 0 : classes.buttonBackground, classes == null ? void 0 : classes.topRemoveButton),
               children: /* @__PURE__ */ jsx(HvButton, {
                 icon: true,
                 className: cx(queryBuilderClasses.removeButton, css(styles.removeButton), classes == null ? void 0 : classes.removeButton),
@@ -133,7 +133,7 @@ const RuleGroup = ({
             })
           })]
         }), (rules == null ? void 0 : rules.length) > 0 && /* @__PURE__ */ jsx("div", {
-          className: cx(queryBuilderClasses.rulesContainer, css(styles.rulesContainer), classes == null ? void 0 : classes.rulesContainer, level > 0 ? cx(queryBuilderClasses.subRulesContainer, css(styles.subRulesContainer), classes == null ? void 0 : classes.subRulesContainer) : "", level === 0 ? cx(queryBuilderClasses.topRulesContainer, css(styles.topRulesContainer), classes == null ? void 0 : classes.topRulesContainer) : ""),
+          className: cx(queryBuilderClasses.rulesContainer, level > 0 && queryBuilderClasses.subRulesContainer, level === 0 && queryBuilderClasses.topRulesContainer, css(styles.rulesContainer), level > 0 && css(styles.subRulesContainer), level === 0 && css(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__ */ jsx(RuleGroup, {
@@ -198,7 +198,7 @@ const RuleGroup = ({
           container: true,
           children: /* @__PURE__ */ jsx(HvGrid, {
             item: true,
-            className: cx(queryBuilderClasses.actionButtonContainer, css(styles.actionButtonContainer), classes == null ? void 0 : classes.actionButtonContainer, queryBuilderClasses.topActionButtonContainer, css(styles.topActionButtonContainer), classes == null ? void 0 : classes.topActionButtonContainer),
+            className: cx(queryBuilderClasses.actionButtonContainer, queryBuilderClasses.topActionButtonContainer, css(styles.actionButtonContainer), css(styles.topActionButtonContainer), classes == null ? void 0 : classes.actionButtonContainer, classes == null ? void 0 : classes.topActionButtonContainer),
             children: actionButtons
           })
         })]

package/dist/esm/components/QueryBuilder/RuleGroup/RuleGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuleGroup.js","sources":["../../../../../src/components/QueryBuilder/RuleGroup/RuleGroup.tsx"],"sourcesContent":["import { useCallback, useContext } from \"react\";\nimport { Add, Delete, Info } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  HvButton,\n  HvEmptyState,\n  HvGrid,\n  HvMultiButton,\n  HvTypography,\n} from \"@core/components\";\nimport { Rule } from \"../Rule\";\nimport { withTooltip } from \"@core/hocs\";\nimport queryBuilderClasses, {\n  HvQueryBuilderClasses,\n} from \"../queryBuilderClasses\";\nimport { QueryBuilderContext } from \"../Context\";\nimport { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./RuleGroup.styles\";\n\nexport interface RuleGroupProps {\n  /**\n   * Override or extend the styles applied to the component.\n   * See CSS API tab for more details.\n   */\n  classes?: HvQueryBuilderClasses;\n  id?: number;\n  level?: number;\n  combinator?: string;\n  rules?: any[];\n}\n\nexport const RuleGroup = ({\n  level = 0,\n  id,\n  combinator = \"and\",\n  rules = [],\n  classes,\n}: RuleGroupProps) => {\n  const context = useContext(QueryBuilderContext);\n\n  const { dispatchAction, askAction, maxDepth, combinators, labels, readOnly } =\n    context;\n  const normalizedMaxDepth = maxDepth - 1;\n\n  const actionButtons = (\n    <ClassNames>\n      {({ css, cx }) => (\n        <>\n          <div\n            className={cx(\n              queryBuilderClasses.buttonBackground,\n              css(styles.buttonBackground),\n              classes?.buttonBackground\n            )}\n          >\n            <HvButton\n              variant=\"secondarySubtle\"\n              onClick={() => {\n                dispatchAction({ type: \"add-rule\", id });\n              }}\n              disabled={readOnly}\n              startIcon={<Add />}\n            >\n              {level === 0 && labels.query?.addRule?.label != null\n                ? labels.query?.addRule?.label\n                : labels.group.addRule.label}\n            </HvButton>\n          </div>\n          {level <= normalizedMaxDepth && (\n            <div\n              className={cx(\n                queryBuilderClasses.buttonBackground,\n                css(styles.buttonBackground),\n                classes?.buttonBackground\n              )}\n            >\n              <HvButton\n                variant=\"secondarySubtle\"\n                onClick={() => {\n                  dispatchAction({ type: \"add-group\", id });\n                }}\n                disabled={readOnly}\n                startIcon={<Add />}\n              >\n                {level === 0 && labels.query?.addGroup?.label != null\n                  ? labels.query?.addGroup?.label\n                  : labels.group.addGroup.label}\n              </HvButton>\n            </div>\n          )}\n        </>\n      )}\n    </ClassNames>\n  );\n\n  const DeleteIcon = withTooltip(\n    () => (\n      <ClassNames>\n        {({ css, cx }) => (\n          <Delete\n            className={\n              readOnly\n                ? cx(\n                    queryBuilderClasses.topRemoveButtonDisabled,\n                    css(styles.topRemoveButtonDisabled),\n                    classes?.topRemoveButtonDisabled\n                  )\n                : \"\"\n            }\n          />\n        )}\n      </ClassNames>\n    ),\n    level === 0 && labels.query?.delete?.tooltip\n      ? labels.query?.delete?.tooltip\n      : labels.group.delete.tooltip,\n    \"top\"\n  );\n\n  const onClickCombinator = useCallback(\n    (item) => {\n      dispatchAction({\n        type: \"set-combinator\",\n        id,\n        combinator: item.operand,\n      });\n    },\n    [dispatchAction, id]\n  );\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            queryBuilderClasses.root,\n            css(styles.root),\n            classes?.root,\n            level === 0\n              ? cx(\n                  queryBuilderClasses.topGroup,\n                  css(styles.topGroup),\n                  classes?.topGroup\n                )\n              : cx(\n                  queryBuilderClasses.subGroup,\n                  css(styles.subGroup),\n                  classes?.subGroup\n                )\n          )}\n        >\n          <HvGrid container>\n            <HvGrid item>\n              <HvMultiButton\n                className={cx(\n                  queryBuilderClasses.combinator,\n                  css(styles.combinator),\n                  classes?.combinator,\n                  queryBuilderClasses.topCombinator,\n                  css(styles.topCombinator),\n                  classes?.topCombinator\n                )}\n                disabled={readOnly}\n              >\n                {combinators &&\n                  combinators.map((item) => (\n                    <HvButton\n                      key={item.operand}\n                      className={cx(\n                        queryBuilderClasses.combinatorButton,\n                        css(styles.combinatorButton),\n                        classes?.combinatorButton\n                      )}\n                      selected={item.operand === combinator}\n                      onClick={() => item.operand && onClickCombinator(item)}\n                      disabled={readOnly}\n                      size={\"xs\"}\n                    >\n                      {item.label}\n                    </HvButton>\n                  ))}\n              </HvMultiButton>\n            </HvGrid>\n            <HvGrid item>\n              <div\n                className={cx(\n                  queryBuilderClasses.buttonBackground,\n                  css(styles.buttonBackground),\n                  classes?.buttonBackground,\n                  queryBuilderClasses.topRemoveButton,\n                  css(styles.topRemoveButton),\n                  classes?.topRemoveButton\n                )}\n              >\n                <HvButton\n                  icon\n                  className={cx(\n                    queryBuilderClasses.removeButton,\n                    css(styles.removeButton),\n                    classes?.removeButton\n                  )}\n                  onClick={() => {\n                    askAction({\n                      actions: [{ type: \"remove-node\", id }],\n                      dialog:\n                        level === 0 && labels.query?.delete != null\n                          ? labels.query.delete\n                          : labels.group.delete,\n                    });\n                  }}\n                  aria-label={\n                    level === 0 && labels.query?.delete?.ariaLabel\n                      ? labels.query?.delete?.ariaLabel\n                      : labels.group.delete.ariaLabel\n                  }\n                  disabled={readOnly}\n                  variant=\"secondaryGhost\"\n                >\n                  <DeleteIcon />\n                </HvButton>\n              </div>\n            </HvGrid>\n          </HvGrid>\n          {rules?.length > 0 && (\n            <div\n              className={cx(\n                queryBuilderClasses.rulesContainer,\n                css(styles.rulesContainer),\n                classes?.rulesContainer,\n                level > 0\n                  ? cx(\n                      queryBuilderClasses.subRulesContainer,\n                      css(styles.subRulesContainer),\n                      classes?.subRulesContainer\n                    )\n                  : \"\",\n                level === 0\n                  ? cx(\n                      queryBuilderClasses.topRulesContainer,\n                      css(styles.topRulesContainer),\n                      classes?.topRulesContainer\n                    )\n                  : \"\"\n              )}\n            >\n              {rules.map((rule, index) => {\n                if (\"combinator\" in rule) {\n                  return (\n                    <RuleGroup\n                      key={rule.id ?? index}\n                      level={level + 1}\n                      {...rule}\n                      id={rule.id}\n                      classes={classes}\n                    />\n                  );\n                }\n\n                const isInvalid =\n                  combinator === \"and\" &&\n                  rules.some((r, i) => {\n                    if (\"attribute\" in r) {\n                      if (\n                        r.attribute === rule.attribute &&\n                        r.id !== rule.id &&\n                        i < index\n                      ) {\n                        return true;\n                      }\n                    }\n                    return false;\n                  });\n\n                return (\n                  <Rule\n                    key={rule.id ?? index}\n                    {...rule}\n                    isInvalid={isInvalid}\n                    id={rule.id}\n                    combinator={combinator}\n                  />\n                );\n              })}\n            </div>\n          )}\n          {rules?.length === 0 && (\n            <HvEmptyState\n              title={labels.empty?.title}\n              message={\n                <>\n                  <HvTypography\n                    variant=\"link\"\n                    component=\"a\"\n                    onClick={() => {\n                      dispatchAction({ type: \"add-rule\", id });\n                    }}\n                    style={{ cursor: \"pointer\", textDecoration: \"underline\" }}\n                  >\n                    {`${labels.empty?.createCondition}`}\n                  </HvTypography>\n                  {level <= normalizedMaxDepth && (\n                    <>\n                      {`${labels.empty?.spacer}`}\n                      <HvTypography\n                        variant=\"link\"\n                        component=\"a\"\n                        onClick={() => {\n                          dispatchAction({ type: \"add-group\", id });\n                        }}\n                        style={{\n                          cursor: \"pointer\",\n                          textDecoration: \"underline\",\n                        }}\n                      >\n                        {`${labels.empty?.createGroup}`}\n                      </HvTypography>\n                    </>\n                  )}\n                </>\n              }\n              icon={<Info />}\n            />\n          )}\n          <HvGrid container>\n            <HvGrid\n              item\n              className={cx(\n                queryBuilderClasses.actionButtonContainer,\n                css(styles.actionButtonContainer),\n                classes?.actionButtonContainer,\n                queryBuilderClasses.topActionButtonContainer,\n                css(styles.topActionButtonContainer),\n                classes?.topActionButtonContainer\n              )}\n            >\n              {actionButtons}\n            </HvGrid>\n          </HvGrid>\n        </div>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["RuleGroup","level","id","combinator","rules","classes","context","useContext","QueryBuilderContext","dispatchAction","askAction","maxDepth","combinators","labels","readOnly","normalizedMaxDepth","actionButtons","ClassNames","children","css","cx","_Fragment","_jsx","className","queryBuilderClasses","buttonBackground","styles","HvButton","variant","onClick","type","disabled","startIcon","Add","query","addRule","label","group","addGroup","DeleteIcon","withTooltip","Delete","topRemoveButtonDisabled","delete","tooltip","onClickCombinator","useCallback","item","operand","root","topGroup","subGroup","_jsxs","HvGrid","container","HvMultiButton","topCombinator","map","combinatorButton","selected","size","topRemoveButton","icon","removeButton","actions","dialog","ariaLabel","length","rulesContainer","subRulesContainer","topRulesContainer","rule","index","isInvalid","some","r","i","attribute","Rule","HvEmptyState","title","empty","message","HvTypography","component","style","cursor","textDecoration","createCondition","spacer","createGroup","Info","actionButtonContainer","topActionButtonContainer"],"mappings":"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"}
+{"version":3,"file":"RuleGroup.js","sources":["../../../../../src/components/QueryBuilder/RuleGroup/RuleGroup.tsx"],"sourcesContent":["import { useCallback, useContext } from \"react\";\nimport { Add, Delete, Info } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  HvButton,\n  HvEmptyState,\n  HvGrid,\n  HvMultiButton,\n  HvTypography,\n} from \"@core/components\";\nimport { Rule } from \"../Rule\";\nimport { withTooltip } from \"@core/hocs\";\nimport queryBuilderClasses, {\n  HvQueryBuilderClasses,\n} from \"../queryBuilderClasses\";\nimport { QueryBuilderContext } from \"../Context\";\nimport { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./RuleGroup.styles\";\n\nexport interface RuleGroupProps {\n  /**\n   * Override or extend the styles applied to the component.\n   * See CSS API tab for more details.\n   */\n  classes?: HvQueryBuilderClasses;\n  id?: number;\n  level?: number;\n  combinator?: string;\n  rules?: any[];\n}\n\nexport const RuleGroup = ({\n  level = 0,\n  id,\n  combinator = \"and\",\n  rules = [],\n  classes,\n}: RuleGroupProps) => {\n  const context = useContext(QueryBuilderContext);\n\n  const { dispatchAction, askAction, maxDepth, combinators, labels, readOnly } =\n    context;\n  const normalizedMaxDepth = maxDepth - 1;\n\n  const actionButtons = (\n    <ClassNames>\n      {({ css, cx }) => (\n        <>\n          <div\n            className={cx(\n              queryBuilderClasses.buttonBackground,\n              css(styles.buttonBackground),\n              classes?.buttonBackground\n            )}\n          >\n            <HvButton\n              variant=\"secondarySubtle\"\n              onClick={() => {\n                dispatchAction({ type: \"add-rule\", id });\n              }}\n              disabled={readOnly}\n              startIcon={<Add />}\n            >\n              {level === 0 && labels.query?.addRule?.label != null\n                ? labels.query?.addRule?.label\n                : labels.group.addRule.label}\n            </HvButton>\n          </div>\n          {level <= normalizedMaxDepth && (\n            <div\n              className={cx(\n                queryBuilderClasses.buttonBackground,\n                css(styles.buttonBackground),\n                classes?.buttonBackground\n              )}\n            >\n              <HvButton\n                variant=\"secondarySubtle\"\n                onClick={() => {\n                  dispatchAction({ type: \"add-group\", id });\n                }}\n                disabled={readOnly}\n                startIcon={<Add />}\n              >\n                {level === 0 && labels.query?.addGroup?.label != null\n                  ? labels.query?.addGroup?.label\n                  : labels.group.addGroup.label}\n              </HvButton>\n            </div>\n          )}\n        </>\n      )}\n    </ClassNames>\n  );\n\n  const DeleteIcon = withTooltip(\n    () => (\n      <ClassNames>\n        {({ css, cx }) => (\n          <Delete\n            className={\n              readOnly\n                ? cx(\n                    queryBuilderClasses.topRemoveButtonDisabled,\n                    css(styles.topRemoveButtonDisabled),\n                    classes?.topRemoveButtonDisabled\n                  )\n                : \"\"\n            }\n          />\n        )}\n      </ClassNames>\n    ),\n    level === 0 && labels.query?.delete?.tooltip\n      ? labels.query?.delete?.tooltip\n      : labels.group.delete.tooltip,\n    \"top\"\n  );\n\n  const onClickCombinator = useCallback(\n    (item) => {\n      dispatchAction({\n        type: \"set-combinator\",\n        id,\n        combinator: item.operand,\n      });\n    },\n    [dispatchAction, id]\n  );\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            queryBuilderClasses.root,\n            level === 0\n              ? queryBuilderClasses.topGroup\n              : queryBuilderClasses.subGroup,\n            css(styles.root),\n            level === 0 ? css(styles.topGroup) : css(styles.subGroup),\n            classes?.root,\n            level === 0 ? classes?.topGroup : classes?.subGroup\n          )}\n        >\n          <HvGrid container>\n            <HvGrid item>\n              <HvMultiButton\n                className={cx(\n                  queryBuilderClasses.combinator,\n                  queryBuilderClasses.topCombinator,\n                  css(styles.combinator),\n                  css(styles.topCombinator),\n                  classes?.combinator,\n                  classes?.topCombinator\n                )}\n                disabled={readOnly}\n              >\n                {combinators &&\n                  combinators.map((item) => (\n                    <HvButton\n                      key={item.operand}\n                      className={cx(\n                        queryBuilderClasses.combinatorButton,\n                        css(styles.combinatorButton),\n                        classes?.combinatorButton\n                      )}\n                      selected={item.operand === combinator}\n                      onClick={() => item.operand && onClickCombinator(item)}\n                      disabled={readOnly}\n                      size={\"xs\"}\n                    >\n                      {item.label}\n                    </HvButton>\n                  ))}\n              </HvMultiButton>\n            </HvGrid>\n            <HvGrid item>\n              <div\n                className={cx(\n                  queryBuilderClasses.buttonBackground,\n                  queryBuilderClasses.topRemoveButton,\n                  css(styles.buttonBackground),\n                  css(styles.topRemoveButton),\n                  classes?.buttonBackground,\n                  classes?.topRemoveButton\n                )}\n              >\n                <HvButton\n                  icon\n                  className={cx(\n                    queryBuilderClasses.removeButton,\n                    css(styles.removeButton),\n                    classes?.removeButton\n                  )}\n                  onClick={() => {\n                    askAction({\n                      actions: [{ type: \"remove-node\", id }],\n                      dialog:\n                        level === 0 && labels.query?.delete != null\n                          ? labels.query.delete\n                          : labels.group.delete,\n                    });\n                  }}\n                  aria-label={\n                    level === 0 && labels.query?.delete?.ariaLabel\n                      ? labels.query?.delete?.ariaLabel\n                      : labels.group.delete.ariaLabel\n                  }\n                  disabled={readOnly}\n                  variant=\"secondaryGhost\"\n                >\n                  <DeleteIcon />\n                </HvButton>\n              </div>\n            </HvGrid>\n          </HvGrid>\n          {rules?.length > 0 && (\n            <div\n              className={cx(\n                queryBuilderClasses.rulesContainer,\n                level > 0 && queryBuilderClasses.subRulesContainer,\n                level === 0 && queryBuilderClasses.topRulesContainer,\n                css(styles.rulesContainer),\n                level > 0 && css(styles.subRulesContainer),\n                level === 0 && css(styles.topRulesContainer),\n                classes?.rulesContainer,\n                level > 0 && classes?.subRulesContainer,\n                level === 0 && classes?.topRulesContainer\n              )}\n            >\n              {rules.map((rule, index) => {\n                if (\"combinator\" in rule) {\n                  return (\n                    <RuleGroup\n                      key={rule.id ?? index}\n                      level={level + 1}\n                      {...rule}\n                      id={rule.id}\n                      classes={classes}\n                    />\n                  );\n                }\n\n                const isInvalid =\n                  combinator === \"and\" &&\n                  rules.some((r, i) => {\n                    if (\"attribute\" in r) {\n                      if (\n                        r.attribute === rule.attribute &&\n                        r.id !== rule.id &&\n                        i < index\n                      ) {\n                        return true;\n                      }\n                    }\n                    return false;\n                  });\n\n                return (\n                  <Rule\n                    key={rule.id ?? index}\n                    {...rule}\n                    isInvalid={isInvalid}\n                    id={rule.id}\n                    combinator={combinator}\n                  />\n                );\n              })}\n            </div>\n          )}\n          {rules?.length === 0 && (\n            <HvEmptyState\n              title={labels.empty?.title}\n              message={\n                <>\n                  <HvTypography\n                    variant=\"link\"\n                    component=\"a\"\n                    onClick={() => {\n                      dispatchAction({ type: \"add-rule\", id });\n                    }}\n                    style={{ cursor: \"pointer\", textDecoration: \"underline\" }}\n                  >\n                    {`${labels.empty?.createCondition}`}\n                  </HvTypography>\n                  {level <= normalizedMaxDepth && (\n                    <>\n                      {`${labels.empty?.spacer}`}\n                      <HvTypography\n                        variant=\"link\"\n                        component=\"a\"\n                        onClick={() => {\n                          dispatchAction({ type: \"add-group\", id });\n                        }}\n                        style={{\n                          cursor: \"pointer\",\n                          textDecoration: \"underline\",\n                        }}\n                      >\n                        {`${labels.empty?.createGroup}`}\n                      </HvTypography>\n                    </>\n                  )}\n                </>\n              }\n              icon={<Info />}\n            />\n          )}\n          <HvGrid container>\n            <HvGrid\n              item\n              className={cx(\n                queryBuilderClasses.actionButtonContainer,\n                queryBuilderClasses.topActionButtonContainer,\n                css(styles.actionButtonContainer),\n                css(styles.topActionButtonContainer),\n                classes?.actionButtonContainer,\n                classes?.topActionButtonContainer\n              )}\n            >\n              {actionButtons}\n            </HvGrid>\n          </HvGrid>\n        </div>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["RuleGroup","level","id","combinator","rules","classes","context","useContext","QueryBuilderContext","dispatchAction","askAction","maxDepth","combinators","labels","readOnly","normalizedMaxDepth","actionButtons","ClassNames","children","css","cx","_Fragment","_jsx","className","queryBuilderClasses","buttonBackground","styles","HvButton","variant","onClick","type","disabled","startIcon","Add","query","addRule","label","group","addGroup","DeleteIcon","withTooltip","Delete","topRemoveButtonDisabled","delete","tooltip","onClickCombinator","useCallback","item","operand","root","topGroup","subGroup","_jsxs","HvGrid","container","HvMultiButton","topCombinator","map","combinatorButton","selected","size","topRemoveButton","icon","removeButton","actions","dialog","ariaLabel","length","rulesContainer","subRulesContainer","topRulesContainer","rule","index","isInvalid","some","r","i","attribute","Rule","HvEmptyState","title","empty","message","HvTypography","component","style","cursor","textDecoration","createCondition","spacer","createGroup","Info","actionButtonContainer","topActionButtonContainer"],"mappings":"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"}

package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.js

@@ -1,6 +1,5 @@
 import horizontalScrollListItemClasses from "./horizontalScrollListItemClasses.js";
 import { ClassNames } from "@emotion/react";
-import { clsx } from "clsx";
 import { styles } from "./HorizontalScrollListItem.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { setId } from "../../../../utils/setId.js";
@@ -21,10 +20,11 @@ const HvHorizontalScrollListItem = ({
   const Tooltip = tooltipWrapper;
   return /* @__PURE__ */ jsx(ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsx("li", {
       id,
-      className: clsx(className, classes == null ? void 0 : classes.root, horizontalScrollListItemClasses.root, css(styles.root)),
+      className: cx(horizontalScrollListItemClasses.root, css(styles.root), className, classes == null ? void 0 : classes.root),
       "aria-current": selected,
       children: /* @__PURE__ */ jsx("div", {
         id: buttonId,
@@ -32,12 +32,12 @@ const HvHorizontalScrollListItem = ({
         tabIndex: 0,
         onClick,
         onKeyDown,
-        className: clsx(classes == null ? void 0 : classes.button, horizontalScrollListItemClasses.button, css(styles.button)),
+        className: cx(horizontalScrollListItemClasses.button, css(styles.button), classes == null ? void 0 : classes.button),
         "aria-labelledby": labelId,
         ...others,
         children: /* @__PURE__ */ jsx(Tooltip, {
           id: labelId,
-          className: clsx(classes == null ? void 0 : classes.text, horizontalScrollListItemClasses.text, css(styles.text), selected && clsx(classes == null ? void 0 : classes.selected, horizontalScrollListItemClasses.selected, css(styles.selected))),
+          className: cx(horizontalScrollListItemClasses.text, selected && horizontalScrollListItemClasses.selected, css(styles.text), selected && css(styles.selected), classes == null ? void 0 : classes.text, selected && (classes == null ? void 0 : classes.selected)),
           variant,
           children
         })

package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScrollListItem.js","sources":["../../../../../../src/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport horizontalScrollListItemClasses, {\n  HvHorizontalScrollListItemClasses,\n} from \"./horizontalScrollListItemClasses\";\nimport { ClassNames } from \"@emotion/react\";\nimport { clsx } from \"clsx\";\nimport { setId } from \"@core/utils\";\nimport { HvTypographyProps } from \"@core/components\";\nimport { styles } from \"./HorizontalScrollListItem.styles\";\n\nexport interface HvVerticalScrollListItemProps extends HvBaseProps {\n  /** The text to render.  */\n  children: React.ReactNode;\n  /** A function component that renders a typography wrapped with a tooltip. */\n  tooltipWrapper: React.FunctionComponent<{\n    id?: string;\n    className?: string;\n    variant?: HvTypographyProps[\"variant\"];\n    children?: React.ReactNode;\n  }>;\n  /** Whether the element is selected. */\n  selected?: boolean;\n  /** The function to be executed when the element is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n  /** The function to be executed when the element is clicked. */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvHorizontalScrollListItemClasses;\n}\n\n/**\n * HvHorizontalScrollListItem a focusable item to be used as part of the horizontal scroll\n */\nexport const HvHorizontalScrollListItem = ({\n  id,\n  className,\n  classes,\n  selected,\n  children,\n  onClick,\n  onKeyDown,\n  tooltipWrapper,\n  ...others\n}: HvVerticalScrollListItemProps) => {\n  const variant = selected ? \"label\" : \"body\";\n  const labelId = setId(id, \"label\");\n  const buttonId = setId(id, \"button\");\n  const Tooltip = tooltipWrapper;\n\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <li\n          id={id}\n          className={clsx(\n            className,\n            classes?.root,\n            horizontalScrollListItemClasses.root,\n            css(styles.root)\n          )}\n          aria-current={selected}\n        >\n          <div\n            id={buttonId}\n            role=\"button\"\n            tabIndex={0}\n            onClick={onClick}\n            onKeyDown={onKeyDown}\n            className={clsx(\n              classes?.button,\n              horizontalScrollListItemClasses.button,\n              css(styles.button)\n            )}\n            aria-labelledby={labelId}\n            {...others}\n          >\n            <Tooltip\n              id={labelId}\n              className={clsx(\n                classes?.text,\n                horizontalScrollListItemClasses.text,\n                css(styles.text),\n                selected &&\n                  clsx(\n                    classes?.selected,\n                    horizontalScrollListItemClasses.selected,\n                    css(styles.selected)\n                  )\n              )}\n              variant={variant}\n            >\n              {children}\n            </Tooltip>\n          </div>\n        </li>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvHorizontalScrollListItem","id","className","classes","selected","children","onClick","onKeyDown","tooltipWrapper","others","variant","labelId","setId","buttonId","Tooltip","ClassNames","css","clsx","root","horizontalScrollListItemClasses","styles","role","tabIndex","button","text"],"mappings":";;;;;;AAiCO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC0B,MAAM;AAC7BC,QAAAA,UAAUN,WAAW,UAAU;AAC/BO,QAAAA,UAAUC,MAAMX,IAAI,OAAO;AAC3BY,QAAAA,WAAWD,MAAMX,IAAI,QAAQ;AACnC,QAAMa,UAAUN;AAEhB,6BACGO,YAAU;AAAA,IAAAV,UACRA,CAAC;AAAA,MAAEW;AAAAA,IAAAA,0BACF,MAAA;AAAA,MACEf;AAAAA,MACAC,WAAWe,KACTf,WACAC,mCAASe,MACTC,gCAAgCD,MAChCF,IAAII,OAAOF,IAAI,CAAC;AAAA,MAElB,gBAAcd;AAAAA,MAASC,8BAEvB,OAAA;AAAA,QACEJ,IAAIY;AAAAA,QACJQ,MAAK;AAAA,QACLC,UAAU;AAAA,QACVhB;AAAAA,QACAC;AAAAA,QACAL,WAAWe,KACTd,mCAASoB,QACTJ,gCAAgCI,QAChCP,IAAII,OAAOG,MAAM,CAAC;AAAA,QAEpB,mBAAiBZ;AAAAA,QAAQ,GACrBF;AAAAA,QAAMJ,8BAETS,SAAO;AAAA,UACNb,IAAIU;AAAAA,UACJT,WAAWe,KACTd,mCAASqB,MACTL,gCAAgCK,MAChCR,IAAII,OAAOI,IAAI,GACfpB,YACEa,KACEd,mCAASC,UACTe,gCAAgCf,UAChCY,IAAII,OAAOhB,QAAQ,CAAC,CACrB;AAAA,UAELM;AAAAA,UAAiBL;AAAAA,QAAAA,CAER;AAAA,MAAA,CACD;AAAA,IAAA,CACN;AAAA,EAAA,CAGC;AAEjB;"}
+{"version":3,"file":"HorizontalScrollListItem.js","sources":["../../../../../../src/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport horizontalScrollListItemClasses, {\n  HvHorizontalScrollListItemClasses,\n} from \"./horizontalScrollListItemClasses\";\nimport { ClassNames } from \"@emotion/react\";\nimport { setId } from \"@core/utils\";\nimport { HvTypographyProps } from \"@core/components\";\nimport { styles } from \"./HorizontalScrollListItem.styles\";\n\nexport interface HvVerticalScrollListItemProps extends HvBaseProps {\n  /** The text to render.  */\n  children: React.ReactNode;\n  /** A function component that renders a typography wrapped with a tooltip. */\n  tooltipWrapper: React.FunctionComponent<{\n    id?: string;\n    className?: string;\n    variant?: HvTypographyProps[\"variant\"];\n    children?: React.ReactNode;\n  }>;\n  /** Whether the element is selected. */\n  selected?: boolean;\n  /** The function to be executed when the element is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n  /** The function to be executed when the element is clicked. */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvHorizontalScrollListItemClasses;\n}\n\n/**\n * HvHorizontalScrollListItem a focusable item to be used as part of the horizontal scroll\n */\nexport const HvHorizontalScrollListItem = ({\n  id,\n  className,\n  classes,\n  selected,\n  children,\n  onClick,\n  onKeyDown,\n  tooltipWrapper,\n  ...others\n}: HvVerticalScrollListItemProps) => {\n  const variant = selected ? \"label\" : \"body\";\n  const labelId = setId(id, \"label\");\n  const buttonId = setId(id, \"button\");\n  const Tooltip = tooltipWrapper;\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <li\n          id={id}\n          className={cx(\n            horizontalScrollListItemClasses.root,\n            css(styles.root),\n            className,\n            classes?.root\n          )}\n          aria-current={selected}\n        >\n          <div\n            id={buttonId}\n            role=\"button\"\n            tabIndex={0}\n            onClick={onClick}\n            onKeyDown={onKeyDown}\n            className={cx(\n              horizontalScrollListItemClasses.button,\n              css(styles.button),\n              classes?.button\n            )}\n            aria-labelledby={labelId}\n            {...others}\n          >\n            <Tooltip\n              id={labelId}\n              className={cx(\n                horizontalScrollListItemClasses.text,\n                selected && horizontalScrollListItemClasses.selected,\n                css(styles.text),\n                selected && css(styles.selected),\n                classes?.text,\n                selected && classes?.selected\n              )}\n              variant={variant}\n            >\n              {children}\n            </Tooltip>\n          </div>\n        </li>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvHorizontalScrollListItem","id","className","classes","selected","children","onClick","onKeyDown","tooltipWrapper","others","variant","labelId","setId","buttonId","Tooltip","ClassNames","css","cx","horizontalScrollListItemClasses","root","styles","role","tabIndex","button","text"],"mappings":";;;;;AAgCO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC0B,MAAM;AAC7BC,QAAAA,UAAUN,WAAW,UAAU;AAC/BO,QAAAA,UAAUC,MAAMX,IAAI,OAAO;AAC3BY,QAAAA,WAAWD,MAAMX,IAAI,QAAQ;AACnC,QAAMa,UAAUN;AAEhB,6BACGO,YAAU;AAAA,IAAAV,UACRA,CAAC;AAAA,MAAEW;AAAAA,MAAKC;AAAAA,IAAAA,0BACP,MAAA;AAAA,MACEhB;AAAAA,MACAC,WAAWe,GACTC,gCAAgCC,MAChCH,IAAII,OAAOD,IAAI,GACfjB,WACAC,mCAASgB,IAAI;AAAA,MAEf,gBAAcf;AAAAA,MAASC,8BAEvB,OAAA;AAAA,QACEJ,IAAIY;AAAAA,QACJQ,MAAK;AAAA,QACLC,UAAU;AAAA,QACVhB;AAAAA,QACAC;AAAAA,QACAL,WAAWe,GACTC,gCAAgCK,QAChCP,IAAII,OAAOG,MAAM,GACjBpB,mCAASoB,MAAM;AAAA,QAEjB,mBAAiBZ;AAAAA,QAAQ,GACrBF;AAAAA,QAAMJ,8BAETS,SAAO;AAAA,UACNb,IAAIU;AAAAA,UACJT,WAAWe,GACTC,gCAAgCM,MAChCpB,YAAYc,gCAAgCd,UAC5CY,IAAII,OAAOI,IAAI,GACfpB,YAAYY,IAAII,OAAOhB,QAAQ,GAC/BD,mCAASqB,MACTpB,aAAYD,mCAASC,SAAQ;AAAA,UAE/BM;AAAAA,UAAiBL;AAAAA,QAAAA,CAER;AAAA,MAAA,CACD;AAAA,IAAA,CACN;AAAA,EAAA,CAGC;AAEjB;"}

package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.js

@@ -1,6 +1,5 @@
 import scrollToHorizontalClasses from "./scrollToHorizontalClasses.js";
 import { ClassNames } from "@emotion/react";
-import { clsx } from "clsx";
 import { styles } from "./ScrollToHorizontal.styles.js";
 import { useScrollTo } from "../useScrollTo.js";
 import { useMemo, useCallback } from "react";
@@ -60,11 +59,12 @@ const HvScrollToHorizontal = ({
   const NotSelected = useCallback(() => {
     return /* @__PURE__ */ jsx(ClassNames, {
       children: ({
-        css
+        css,
+        cx
       }) => /* @__PURE__ */ jsx("div", {
-        className: clsx(classes == null ? void 0 : classes.notSelectedRoot, scrollToHorizontalClasses.notSelectedRoot, css(styles.notSelectedRoot)),
+        className: cx(scrollToHorizontalClasses.notSelectedRoot, css(styles.notSelectedRoot), classes == null ? void 0 : classes.notSelectedRoot),
         children: /* @__PURE__ */ jsx("div", {
-          className: clsx(classes == null ? void 0 : classes.notSelected, scrollToHorizontalClasses.notSelected, css(styles.notSelected))
+          className: cx(scrollToHorizontalClasses.notSelected, css(styles.notSelected), classes == null ? void 0 : classes.notSelected)
         })
       })
     });
@@ -72,11 +72,12 @@ const HvScrollToHorizontal = ({
   const Selected = useCallback(() => {
     return /* @__PURE__ */ jsx(ClassNames, {
       children: ({
-        css
+        css,
+        cx
       }) => /* @__PURE__ */ jsx(CurrentStep, {
         height: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize,
         width: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize,
-        className: clsx(classes == null ? void 0 : classes.selected, scrollToHorizontalClasses.selected, css(styles.selected))
+        className: cx(scrollToHorizontalClasses.selected, css(styles.selected), classes == null ? void 0 : classes.selected)
       })
     });
   }, [classes == null ? void 0 : classes.selected, activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize]);
@@ -104,16 +105,17 @@ const HvScrollToHorizontal = ({
   });
   return /* @__PURE__ */ jsx(ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsx("ol", {
-      className: clsx(className, classes == null ? void 0 : classes.root, scrollToHorizontalClasses.root, css(styles.root), css({
+      className: cx(scrollToHorizontalClasses.root, position === "sticky" && scrollToHorizontalClasses.positionSticky, position === "fixed" && scrollToHorizontalClasses.positionFixed, css(styles.root), css({
         width: position === "fixed" && (upMd || downSm) ? `calc(100% - 2*${theme.spacing(upMd ? 4 : 2)})` : "100%",
         marginTop: 0,
         marginBottom: 0,
         marginRight: position === "fixed" && (upMd || downSm) ? theme.spacing(upMd ? 4 : 2) : 0,
         marginLeft: position === "fixed" && (upMd || downSm) ? theme.spacing(upMd ? 4 : 2) : 0,
         backgroundColor: fade(activeTheme == null ? void 0 : activeTheme.colors.modes[selectedMode].atmo2, activeTheme == null ? void 0 : activeTheme.scrollTo.backgroundColorOpacity)
-      }), position === "sticky" && clsx(classes == null ? void 0 : classes.positionSticky, scrollToHorizontalClasses.positionSticky, css(styles.positionSticky)), position === "fixed" && clsx(classes == null ? void 0 : classes.positionFixed, scrollToHorizontalClasses.positionFixed, css(styles.positionFixed))),
+      }), position === "sticky" && css(styles.positionSticky), position === "fixed" && css(styles.positionFixed), className, classes == null ? void 0 : classes.root, position === "sticky" && (classes == null ? void 0 : classes.positionSticky), position === "fixed" && (classes == null ? void 0 : classes.positionFixed)),
       id: elementId,
       ...others,
       children: tabs