@hitachivantara/uikit-react-core 5.44.2 → 5.44.4

package/dist/cjs/FilterGroup/Counter/Counter.cjs

@@ -31,7 +31,7 @@ const HvFilterGroupCounter = (props) => {
   ] : filterOptions;
   const optionIdx = filterOptions.findIndex((option) => option.id === id);
   let groupsCounter = 0;
-  appliedFilters.filter((elem) => elem !== void 0).forEach((fg, i) => {
+  appliedFilters.forEach((fg, i) => {
     groupsCounter += getExistingFiltersById(i, filterValues, filterOptions);
   });
   const partialCounter = id ? getExistingFiltersById(optionIdx, filterValues, filterOptions) || 0 : groupsCounter;

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

@@ -1 +1 @@
-{"version":3,"file":"Counter.cjs","sources":["../../../../src/FilterGroup/Counter/Counter.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { staticClasses, useClasses } from \"./Counter.styles\";\nimport { HvFilterGroupFilters, HvFilterGroupValue } from \"../types\";\n\nexport { staticClasses as filterGroupCounterClasses };\n\nexport type HvFilterGroupCounterClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupCounterProps {\n  className?: string;\n  id?: string;\n  classes?: HvFilterGroupCounterClasses;\n}\n\nconst getExistingFiltersById = (\n  idx: number,\n  filterValues: HvFilterGroupValue,\n  filterOptions: HvFilterGroupFilters\n) => {\n  let total = 0;\n  filterValues[idx]?.forEach((fv) => {\n    if (filterOptions[idx]?.data.find((f) => f.id === fv)) {\n      total += 1;\n    }\n  });\n  return total;\n};\n\nexport const HvFilterGroupCounter = (props: HvFilterGroupCounterProps) => {\n  const {\n    className,\n    id,\n    classes: classesProp,\n  } = useDefaultProps(\"HvFilterGroupCounter\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const {\n    filterOptions,\n    filterValues = [],\n    appliedFilters = [],\n  } = useContext(HvFilterGroupContext);\n\n  const options =\n    id && filterOptions.find((option) => option.id === id)\n      ? ([\n          filterOptions.find((option) => option.id === id),\n        ] as HvFilterGroupFilters)\n      : filterOptions;\n  const optionIdx = filterOptions.findIndex((option) => option.id === id);\n\n  let groupsCounter = 0;\n  appliedFilters\n    .filter((elem) => elem !== undefined)\n    .forEach((fg, i) => {\n      groupsCounter += getExistingFiltersById(i, filterValues, filterOptions);\n    });\n\n  const partialCounter = id\n    ? getExistingFiltersById(optionIdx, filterValues, filterOptions) || 0\n    : groupsCounter;\n\n  const totalCounter = options.reduce(\n    (acc, option) => acc + option.data.length,\n    0\n  );\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {partialCounter > 0 ? (\n        <p className={classes.partialCounter}>{partialCounter}</p>\n      ) : (\n        partialCounter\n      )}\n      {` / ${totalCounter}`}\n    </div>\n  );\n};\n"],"names":["useDefaultProps","useClasses","useContext","HvFilterGroupContext","jsx"],"mappings":";;;;;;;AAoBA,MAAM,yBAAyB,CAC7B,KACA,cACA,kBACG;AACH,MAAI,QAAQ;AACZ,eAAa,GAAG,GAAG,QAAQ,CAAC,OAAO;AAC7B,QAAA,cAAc,GAAG,GAAG,KAAK,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,GAAG;AAC5C,eAAA;AAAA,IACX;AAAA,EAAA,CACD;AACM,SAAA;AACT;AAEa,MAAA,uBAAuB,CAAC,UAAqC;AAClE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACPA,gBAAgB,gBAAA,wBAAwB,KAAK;AACjD,QAAM,EAAE,SAAS,GAAG,IAAIC,0BAAW,WAAW;AACxC,QAAA;AAAA,IACJ;AAAA,IACA,eAAe,CAAC;AAAA,IAChB,iBAAiB,CAAC;AAAA,EAAA,IAChBC,MAAAA,WAAWC,mBAAAA,oBAAoB;AAE7B,QAAA,UACJ,MAAM,cAAc,KAAK,CAAC,WAAW,OAAO,OAAO,EAAE,IAChD;AAAA,IACC,cAAc,KAAK,CAAC,WAAW,OAAO,OAAO,EAAE;AAAA,EAEjD,IAAA;AACN,QAAM,YAAY,cAAc,UAAU,CAAC,WAAW,OAAO,OAAO,EAAE;AAEtE,MAAI,gBAAgB;AAEjB,iBAAA,OAAO,CAAC,SAAS,SAAS,MAAS,EACnC,QAAQ,CAAC,IAAI,MAAM;AACD,qBAAA,uBAAuB,GAAG,cAAc,aAAa;AAAA,EAAA,CACvE;AAEH,QAAM,iBAAiB,KACnB,uBAAuB,WAAW,cAAc,aAAa,KAAK,IAClE;AAEJ,QAAM,eAAe,QAAQ;AAAA,IAC3B,CAAC,KAAK,WAAW,MAAM,OAAO,KAAK;AAAA,IACnC;AAAA,EAAA;AAGF,yCACG,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GACvC,UAAA;AAAA,IAAA,iBAAiB,IACfC,+BAAA,KAAA,EAAE,WAAW,QAAQ,gBAAiB,0BAAe,IAEtD;AAAA,IAED,MAAM,YAAY;AAAA,EACrB,EAAA,CAAA;AAEJ;;;"}
+{"version":3,"file":"Counter.cjs","sources":["../../../../src/FilterGroup/Counter/Counter.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { staticClasses, useClasses } from \"./Counter.styles\";\nimport { HvFilterGroupFilters, HvFilterGroupValue } from \"../types\";\n\nexport { staticClasses as filterGroupCounterClasses };\n\nexport type HvFilterGroupCounterClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupCounterProps {\n  className?: string;\n  id?: string;\n  classes?: HvFilterGroupCounterClasses;\n}\n\nconst getExistingFiltersById = (\n  idx: number,\n  filterValues: HvFilterGroupValue,\n  filterOptions: HvFilterGroupFilters\n) => {\n  let total = 0;\n  filterValues[idx]?.forEach((fv) => {\n    if (filterOptions[idx]?.data.find((f) => f.id === fv)) {\n      total += 1;\n    }\n  });\n  return total;\n};\n\nexport const HvFilterGroupCounter = (props: HvFilterGroupCounterProps) => {\n  const {\n    className,\n    id,\n    classes: classesProp,\n  } = useDefaultProps(\"HvFilterGroupCounter\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const {\n    filterOptions,\n    filterValues = [],\n    appliedFilters = [],\n  } = useContext(HvFilterGroupContext);\n\n  const options =\n    id && filterOptions.find((option) => option.id === id)\n      ? ([\n          filterOptions.find((option) => option.id === id),\n        ] as HvFilterGroupFilters)\n      : filterOptions;\n  const optionIdx = filterOptions.findIndex((option) => option.id === id);\n\n  let groupsCounter = 0;\n  appliedFilters.forEach((fg, i) => {\n    groupsCounter += getExistingFiltersById(i, filterValues, filterOptions);\n  });\n\n  const partialCounter = id\n    ? getExistingFiltersById(optionIdx, filterValues, filterOptions) || 0\n    : groupsCounter;\n\n  const totalCounter = options.reduce(\n    (acc, option) => acc + option.data.length,\n    0\n  );\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {partialCounter > 0 ? (\n        <p className={classes.partialCounter}>{partialCounter}</p>\n      ) : (\n        partialCounter\n      )}\n      {` / ${totalCounter}`}\n    </div>\n  );\n};\n"],"names":["useDefaultProps","useClasses","useContext","HvFilterGroupContext","jsx"],"mappings":";;;;;;;AAoBA,MAAM,yBAAyB,CAC7B,KACA,cACA,kBACG;AACH,MAAI,QAAQ;AACZ,eAAa,GAAG,GAAG,QAAQ,CAAC,OAAO;AAC7B,QAAA,cAAc,GAAG,GAAG,KAAK,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,GAAG;AAC5C,eAAA;AAAA,IACX;AAAA,EAAA,CACD;AACM,SAAA;AACT;AAEa,MAAA,uBAAuB,CAAC,UAAqC;AAClE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACPA,gBAAgB,gBAAA,wBAAwB,KAAK;AACjD,QAAM,EAAE,SAAS,GAAG,IAAIC,0BAAW,WAAW;AACxC,QAAA;AAAA,IACJ;AAAA,IACA,eAAe,CAAC;AAAA,IAChB,iBAAiB,CAAC;AAAA,EAAA,IAChBC,MAAAA,WAAWC,mBAAAA,oBAAoB;AAE7B,QAAA,UACJ,MAAM,cAAc,KAAK,CAAC,WAAW,OAAO,OAAO,EAAE,IAChD;AAAA,IACC,cAAc,KAAK,CAAC,WAAW,OAAO,OAAO,EAAE;AAAA,EAEjD,IAAA;AACN,QAAM,YAAY,cAAc,UAAU,CAAC,WAAW,OAAO,OAAO,EAAE;AAEtE,MAAI,gBAAgB;AACL,iBAAA,QAAQ,CAAC,IAAI,MAAM;AACf,qBAAA,uBAAuB,GAAG,cAAc,aAAa;AAAA,EAAA,CACvE;AAED,QAAM,iBAAiB,KACnB,uBAAuB,WAAW,cAAc,aAAa,KAAK,IAClE;AAEJ,QAAM,eAAe,QAAQ;AAAA,IAC3B,CAAC,KAAK,WAAW,MAAM,OAAO,KAAK;AAAA,IACnC;AAAA,EAAA;AAGF,yCACG,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GACvC,UAAA;AAAA,IAAA,iBAAiB,IACfC,+BAAA,KAAA,EAAE,WAAW,QAAQ,gBAAiB,0BAAe,IAEtD;AAAA,IAED,MAAM,YAAY;AAAA,EACrB,EAAA,CAAA;AAEJ;;;"}

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

@@ -79,10 +79,7 @@ const HvFilterGroupRightPanel = ({
         newFilterValues[activeGroup] = [];
       }
     } else {
-      newFilterValues[activeGroup] = [
-        ...filterValues[activeGroup],
-        ...activeGroupOptions
-      ];
+      newFilterValues[activeGroup] = [...activeGroupOptions];
     }
     setFilterValues(newFilterValues);
   }, [

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

@@ -1 +1 @@
-{"version":3,"file":"RightPanel.cjs","sources":["../../../../src/FilterGroup/RightPanel/RightPanel.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useState } from \"react\";\n\nimport cloneDeep from \"lodash/cloneDeep\";\n\nimport { HvCheckBox } from \"../../CheckBox\";\nimport { HvInput } from \"../../Input\";\nimport { HvList, HvListProps } from \"../../List\";\nimport { HvPanel } from \"../../Panel\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\n\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { staticClasses, useClasses } from \"./RightPanel.styles\";\n\nexport { staticClasses as filterGroupRightPanelClasses };\n\nexport type HvFilterGroupRightPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupRightPanelProps {\n  id?: string;\n  className?: string;\n  labels?: {\n    searchBoxPlaceholder?: string;\n    selectAll?: string;\n    multiSelectionConjunction?: string;\n  };\n  emptyElement?: React.ReactNode;\n  classes?: HvFilterGroupRightPanelClasses;\n}\n\nexport const HvFilterGroupRightPanel = ({\n  id,\n  className,\n  labels,\n  emptyElement,\n  classes: classesProp,\n}: HvFilterGroupRightPanelProps) => {\n  const { classes } = useClasses(classesProp);\n  const [searchStr, setSearchStr] = useState<string>(\"\");\n  const [allSelected, setAllSelected] = useState<boolean>(false);\n  const [anySelected, setAnySelected] = useState<boolean>(false);\n\n  const {\n    filterOptions,\n    filterValues = [],\n    setFilterValues,\n    activeGroup,\n  } = useContext(HvFilterGroupContext);\n\n  const activeGroupOptions = useMemo(\n    () =>\n      filterOptions[activeGroup]?.data\n        .filter((option) =>\n          option.name.toLowerCase().includes(searchStr.toLowerCase())\n        )\n        .map((option) => option.id) || [],\n    [filterOptions, activeGroup, searchStr]\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: HvListProps[\"onChange\"] = (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 as any);\n  };\n\n  const handleSelectAll = useCallback(() => {\n    const newFilterValues = cloneDeep(filterValues);\n\n    if (anySelected) {\n      if (searchStr !== \"\") {\n        newFilterValues[activeGroup] = filterValues[activeGroup]?.filter(\n          (value) => !activeGroupOptions.includes(value)\n        );\n      } else {\n        newFilterValues[activeGroup] = [];\n      }\n    } else {\n      newFilterValues[activeGroup] = [\n        ...filterValues[activeGroup],\n        ...activeGroupOptions,\n      ];\n    }\n\n    setFilterValues(newFilterValues);\n  }, [\n    activeGroup,\n    activeGroupOptions,\n    anySelected,\n    filterValues,\n    setFilterValues,\n    searchStr,\n  ]);\n\n  /**\n   * Create selectAll component.\n   *\n   * @returns {*}\n   */\n  const SelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n\n    const defaultLabel = (\n      <HvTypography component=\"span\">\n        {nbrSelected > 0 ? (\n          <>\n            <b>{nbrSelected}</b>\n            {` ${labels?.multiSelectionConjunction} ${activeGroupOptions.length}`}\n          </>\n        ) : (\n          <>\n            <b>{labels?.selectAll}</b>\n            {` (${activeGroupOptions.length})`}\n          </>\n        )}\n      </HvTypography>\n    );\n\n    return (\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select-all\")}\n          label={defaultLabel}\n          onChange={() => handleSelectAll()}\n          className={classes.selectAll}\n          indeterminate={anySelected && !allSelected}\n          checked={allSelected}\n        />\n      </div>\n    );\n  }, [\n    activeFilterValues?.length,\n    activeGroupOptions.length,\n    allSelected,\n    anySelected,\n    handleSelectAll,\n    id,\n    labels,\n    classes?.selectAllContainer,\n    classes?.selectAll,\n  ]);\n\n  return (\n    <HvPanel id={setId(id, \"rightPanel\")} className={className}>\n      {listValues.length > 0 ? (\n        <>\n          <HvInput\n            id={setId(id, \"search\")}\n            classes={{\n              root: classes.search,\n            }}\n            type=\"search\"\n            placeholder={labels?.searchBoxPlaceholder}\n            value={searchStr}\n            onChange={(_, str) => setSearchStr(str)}\n          />\n          <SelectAll />\n          <HvList\n            key={activeGroup}\n            id={setId(id, \"list\")}\n            values={listValues}\n            className={classes.list}\n            multiSelect\n            useSelector\n            showSelectAll={false}\n            onChange={onChangeHandler}\n            selectable\n            condensed\n            hasTooltips\n          />\n        </>\n      ) : (\n        emptyElement\n      )}\n    </HvPanel>\n  );\n};\n"],"names":["useClasses","useState","useContext","HvFilterGroupContext","useMemo","useCallback","useEffect","cloneDeep","jsx","HvTypography","jsxs","Fragment","HvCheckBox","setId","HvPanel","HvInput","HvList"],"mappings":"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"}
+{"version":3,"file":"RightPanel.cjs","sources":["../../../../src/FilterGroup/RightPanel/RightPanel.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useState } from \"react\";\n\nimport cloneDeep from \"lodash/cloneDeep\";\n\nimport { HvCheckBox } from \"../../CheckBox\";\nimport { HvInput } from \"../../Input\";\nimport { HvList, HvListProps } from \"../../List\";\nimport { HvPanel } from \"../../Panel\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\n\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { staticClasses, useClasses } from \"./RightPanel.styles\";\n\nexport { staticClasses as filterGroupRightPanelClasses };\n\nexport type HvFilterGroupRightPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupRightPanelProps {\n  id?: string;\n  className?: string;\n  labels?: {\n    searchBoxPlaceholder?: string;\n    selectAll?: string;\n    multiSelectionConjunction?: string;\n  };\n  emptyElement?: React.ReactNode;\n  classes?: HvFilterGroupRightPanelClasses;\n}\n\nexport const HvFilterGroupRightPanel = ({\n  id,\n  className,\n  labels,\n  emptyElement,\n  classes: classesProp,\n}: HvFilterGroupRightPanelProps) => {\n  const { classes } = useClasses(classesProp);\n  const [searchStr, setSearchStr] = useState<string>(\"\");\n  const [allSelected, setAllSelected] = useState<boolean>(false);\n  const [anySelected, setAnySelected] = useState<boolean>(false);\n\n  const {\n    filterOptions,\n    filterValues = [],\n    setFilterValues,\n    activeGroup,\n  } = useContext(HvFilterGroupContext);\n\n  const activeGroupOptions = useMemo(\n    () =>\n      filterOptions[activeGroup]?.data\n        .filter((option) =>\n          option.name.toLowerCase().includes(searchStr.toLowerCase())\n        )\n        .map((option) => option.id) || [],\n    [filterOptions, activeGroup, searchStr]\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: HvListProps[\"onChange\"] = (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 as any);\n  };\n\n  const handleSelectAll = useCallback(() => {\n    const newFilterValues = cloneDeep(filterValues);\n\n    if (anySelected) {\n      if (searchStr !== \"\") {\n        newFilterValues[activeGroup] = filterValues[activeGroup]?.filter(\n          (value) => !activeGroupOptions.includes(value)\n        );\n      } else {\n        newFilterValues[activeGroup] = [];\n      }\n    } else {\n      newFilterValues[activeGroup] = [...activeGroupOptions];\n    }\n\n    setFilterValues(newFilterValues);\n  }, [\n    activeGroup,\n    activeGroupOptions,\n    anySelected,\n    filterValues,\n    setFilterValues,\n    searchStr,\n  ]);\n\n  /**\n   * Create selectAll component.\n   *\n   * @returns {*}\n   */\n  const SelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n\n    const defaultLabel = (\n      <HvTypography component=\"span\">\n        {nbrSelected > 0 ? (\n          <>\n            <b>{nbrSelected}</b>\n            {` ${labels?.multiSelectionConjunction} ${activeGroupOptions.length}`}\n          </>\n        ) : (\n          <>\n            <b>{labels?.selectAll}</b>\n            {` (${activeGroupOptions.length})`}\n          </>\n        )}\n      </HvTypography>\n    );\n\n    return (\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select-all\")}\n          label={defaultLabel}\n          onChange={() => handleSelectAll()}\n          className={classes.selectAll}\n          indeterminate={anySelected && !allSelected}\n          checked={allSelected}\n        />\n      </div>\n    );\n  }, [\n    activeFilterValues?.length,\n    activeGroupOptions.length,\n    allSelected,\n    anySelected,\n    handleSelectAll,\n    id,\n    labels,\n    classes?.selectAllContainer,\n    classes?.selectAll,\n  ]);\n\n  return (\n    <HvPanel id={setId(id, \"rightPanel\")} className={className}>\n      {listValues.length > 0 ? (\n        <>\n          <HvInput\n            id={setId(id, \"search\")}\n            classes={{\n              root: classes.search,\n            }}\n            type=\"search\"\n            placeholder={labels?.searchBoxPlaceholder}\n            value={searchStr}\n            onChange={(_, str) => setSearchStr(str)}\n          />\n          <SelectAll />\n          <HvList\n            key={activeGroup}\n            id={setId(id, \"list\")}\n            values={listValues}\n            className={classes.list}\n            multiSelect\n            useSelector\n            showSelectAll={false}\n            onChange={onChangeHandler}\n            selectable\n            condensed\n            hasTooltips\n          />\n        </>\n      ) : (\n        emptyElement\n      )}\n    </HvPanel>\n  );\n};\n"],"names":["useClasses","useState","useContext","HvFilterGroupContext","useMemo","useCallback","useEffect","cloneDeep","jsx","HvTypography","jsxs","Fragment","HvCheckBox","setId","HvPanel","HvInput","HvList"],"mappings":"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"}

package/dist/cjs/Tag/Tag.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const Chip = require("@mui/material/Chip");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
@@ -13,7 +14,7 @@ const Chip__default = /* @__PURE__ */ _interopDefault(Chip);
 const getCategoricalColor = (customColor, colors) => {
   return customColor && colors?.[customColor] || customColor || colors?.cat1;
 };
-const HvTag = (props) => {
+const HvTag = React.forwardRef((props, ref) => {
   const {
     classes: classesProp,
     className,
@@ -62,6 +63,7 @@ const HvTag = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Chip__default.default,
     {
+      ref,
       label,
       disabled,
       className: cx({ [clickableClass]: isClickable }, className),
@@ -98,7 +100,7 @@ const HvTag = (props) => {
       ...others
     }
   );
-};
+});
 exports.tagClasses = Tag_styles.staticClasses;
 exports.HvTag = HvTag;
 //# sourceMappingURL=Tag.cjs.map

package/dist/cjs/Tag/Tag.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\";\nimport { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\n\nimport {\n  Checkbox,\n  CheckboxCheck,\n  CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useControlled } from \"../hooks/useControlled\";\n\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n  extends Omit<MuiChipProps, \"color\" | \"classes\" | \"onSelect\"> {\n  /** The label of the tag element. */\n  label?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** The type of the tag element. A tag can be of semantic or categoric type. */\n  type?: \"semantic\" | \"categorical\";\n  /** Background color to be applied to the tag */\n  color?: HvColorAny;\n  /** Icon used to customize the delete icon in the Chip element */\n  deleteIcon?: React.ReactElement;\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component, in order to render the delete icon\n   * */\n  onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>, selected?: boolean) => void;\n  /** Aria properties to apply to delete button in tag\n   * @deprecated no longer used\n   */\n  deleteButtonArialLabel?: string;\n  /** Props to apply to delete icon */\n  deleteButtonProps?: HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n  /** @ignore */\n  ref?: MuiChipProps[\"ref\"];\n  /** @ignore */\n  component?: MuiChipProps[\"component\"];\n  /** Determines whether or not the tag is selectable. */\n  selectable?: boolean;\n  /** Defines if the tag is selected. When defined the tag state becomes controlled. */\n  selected?: boolean;\n  /** When uncontrolled, defines the initial selected state. */\n  defaultSelected?: boolean;\n}\n\nconst getCategoricalColor = (customColor?: HvColorAny, colors?: any) => {\n  return (customColor && colors?.[customColor]) || customColor || colors?.cat1;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = (props: HvTagProps) => {\n  const {\n    classes: classesProp,\n    className,\n    style,\n    label,\n    disabled,\n    type = \"semantic\",\n    selectable,\n    selected,\n    defaultSelected = false,\n    color,\n    deleteIcon,\n    onDelete,\n    onClick,\n    // TODO: remove from API\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { colors } = useTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const [isSelected, setIsSelected] = useControlled(\n    selected,\n    Boolean(defaultSelected)\n  );\n\n  const defaultDeleteIcon = (\n    <CloseXS\n      role=\"none\"\n      className={cx(classes.button, classes.tagButton)}\n      iconSize=\"XS\"\n      {...deleteButtonProps}\n    />\n  );\n\n  const categoricalBackgroundColor =\n    type === \"categorical\" ? getCategoricalColor(color, colors) : undefined;\n\n  const backgroundColor =\n    (type === \"semantic\" && getColor(color, \"neutral_20\")) ||\n    (type === \"categorical\" && `${categoricalBackgroundColor}30`) ||\n    undefined;\n\n  const isClickable = !!(onClick || onDelete) && !disabled;\n\n  const clickableClass = css({\n    \"&:hover\": {\n      boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`,\n    },\n  });\n\n  const colorOverride = (disabled && [\"atmo3\", \"secondary_60\"]) || undefined;\n\n  const avatarIcon = isSelected ? (\n    <CheckboxCheck color={colorOverride} iconSize=\"XS\" />\n  ) : (\n    <Checkbox color={colorOverride} iconSize=\"XS\" />\n  );\n\n  return (\n    <Chip\n      label={label}\n      disabled={disabled}\n      className={cx({ [clickableClass]: isClickable }, className)}\n      style={{\n        ...(disabled ? null : { backgroundColor }),\n        ...style,\n      }}\n      classes={{\n        root: cx(classes.root, classes.chipRoot, {\n          [classes.disabled]: disabled,\n          [classes.clickable]: isClickable,\n          [classes.categorical]: type === \"categorical\",\n          [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n          [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n        }),\n        label: classes.label,\n        deleteIcon: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n      }}\n      deleteIcon={deleteIcon || defaultDeleteIcon}\n      onDelete={disabled ? undefined : onDelete}\n      onClick={(event) => {\n        if (disabled) return;\n        if (selectable) setIsSelected(!isSelected);\n        onClick?.(event, !isSelected);\n      }}\n      aria-pressed={isSelected}\n      {...(selectable &&\n        type === \"semantic\" && {\n          avatar: avatarIcon,\n        })}\n      {...others}\n    />\n  );\n};\n"],"names":["useDefaultProps","useTheme","useClasses","useControlled","jsx","CloseXS","getColor","CheckboxCheck","Checkbox","Chip"],"mappings":";;;;;;;;;;;;AA6DA,MAAM,sBAAsB,CAAC,aAA0B,WAAiB;AACtE,SAAQ,eAAe,SAAS,WAAW,KAAM,eAAe,QAAQ;AAC1E;AAUa,MAAA,QAAQ,CAAC,UAAsB;AACpC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA,yBAAyB;AAAA,IACzB,oBAAoB,CAAC;AAAA,IACrB,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,SAAS,KAAK;AAC5B,QAAA,EAAE,WAAWC,SAAAA;AACnB,QAAM,EAAE,SAAS,IAAI,IAAI,IAAIC,WAAAA,WAAW,WAAW;AAE7C,QAAA,CAAC,YAAY,aAAa,IAAIC,cAAA;AAAA,IAClC;AAAA,IACA,QAAQ,eAAe;AAAA,EAAA;AAGzB,QAAM,oBACJC,2BAAA;AAAA,IAACC,gBAAA;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,GAAG,QAAQ,QAAQ,QAAQ,SAAS;AAAA,MAC/C,UAAS;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EAAA;AAIR,QAAM,6BACJ,SAAS,gBAAgB,oBAAoB,OAAO,MAAM,IAAI;AAE1D,QAAA,kBACH,SAAS,cAAcC,YAAS,SAAA,OAAO,YAAY,KACnD,SAAS,iBAAiB,GAAG,0BAA0B,QACxD;AAEF,QAAM,cAAc,CAAC,EAAE,WAAW,aAAa,CAAC;AAEhD,QAAM,iBAAiB,IAAI;AAAA,IACzB,WAAW;AAAA,MACT,WAAW,aAAa,0BAA0B;AAAA,IACpD;AAAA,EAAA,CACD;AAED,QAAM,gBAAiB,YAAY,CAAC,SAAS,cAAc,KAAM;AAEjE,QAAM,aAAa,aAChBF,2BAAA,IAAAG,gBAAA,eAAA,EAAc,OAAO,eAAe,UAAS,KAAK,CAAA,IAElDH,2BAAAA,IAAAI,gBAAAA,UAAA,EAAS,OAAO,eAAe,UAAS,KAAK,CAAA;AAI9C,SAAAJ,2BAAA;AAAA,IAACK,cAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW,GAAG,EAAE,CAAC,cAAc,GAAG,YAAA,GAAe,SAAS;AAAA,MAC1D,OAAO;AAAA,QACL,GAAI,WAAW,OAAO,EAAE,gBAAgB;AAAA,QACxC,GAAG;AAAA,MACL;AAAA,MACA,SAAS;AAAA,QACP,MAAM,GAAG,QAAQ,MAAM,QAAQ,UAAU;AAAA,UACvC,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,SAAS,GAAG;AAAA,UACrB,CAAC,QAAQ,WAAW,GAAG,SAAS;AAAA,UAChC,CAAC,QAAQ,gBAAgB,GAAG,SAAS,iBAAiB,CAAC;AAAA,UACvD,CAAC,QAAQ,mBAAmB,GAAG,SAAS,iBAAiB;AAAA,QAAA,CAC1D;AAAA,QACD,OAAO,QAAQ;AAAA,QACf,YAAY,GAAG,QAAQ,YAAY;AAAA,UACjC,CAAC,QAAQ,kBAAkB,GAAG;AAAA,QAAA,CAC/B;AAAA,MACH;AAAA,MACA,YAAY,cAAc;AAAA,MAC1B,UAAU,WAAW,SAAY;AAAA,MACjC,SAAS,CAAC,UAAU;AACd,YAAA;AAAU;AACV,YAAA;AAAY,wBAAc,CAAC,UAAU;AAC/B,kBAAA,OAAO,CAAC,UAAU;AAAA,MAC9B;AAAA,MACA,gBAAc;AAAA,MACb,GAAI,cACH,SAAS,cAAc;AAAA,QACrB,QAAQ;AAAA,MACV;AAAA,MACD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;;;"}
+{"version":3,"file":"Tag.cjs","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import React, { HTMLAttributes, forwardRef } from \"react\";\nimport { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\n\nimport {\n  Checkbox,\n  CheckboxCheck,\n  CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useControlled } from \"../hooks/useControlled\";\n\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n  extends Omit<MuiChipProps, \"color\" | \"classes\" | \"onSelect\"> {\n  /** The label of the tag element. */\n  label?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** The type of the tag element. A tag can be of semantic or categoric type. */\n  type?: \"semantic\" | \"categorical\";\n  /** Background color to be applied to the tag */\n  color?: HvColorAny;\n  /** Icon used to customize the delete icon in the Chip element */\n  deleteIcon?: React.ReactElement;\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component, in order to render the delete icon\n   * */\n  onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>, selected?: boolean) => void;\n  /** Aria properties to apply to delete button in tag\n   * @deprecated no longer used\n   */\n  deleteButtonArialLabel?: string;\n  /** Props to apply to delete icon */\n  deleteButtonProps?: HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n  /** @ignore */\n  ref?: MuiChipProps[\"ref\"];\n  /** @ignore */\n  component?: MuiChipProps[\"component\"];\n  /** Determines whether or not the tag is selectable. */\n  selectable?: boolean;\n  /** Defines if the tag is selected. When defined the tag state becomes controlled. */\n  selected?: boolean;\n  /** When uncontrolled, defines the initial selected state. */\n  defaultSelected?: boolean;\n}\n\nconst getCategoricalColor = (customColor?: HvColorAny, colors?: any) => {\n  return (customColor && colors?.[customColor]) || customColor || colors?.cat1;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = forwardRef<HTMLDivElement, HvTagProps>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    style,\n    label,\n    disabled,\n    type = \"semantic\",\n    selectable,\n    selected,\n    defaultSelected = false,\n    color,\n    deleteIcon,\n    onDelete,\n    onClick,\n    // TODO: remove from API\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { colors } = useTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const [isSelected, setIsSelected] = useControlled(\n    selected,\n    Boolean(defaultSelected)\n  );\n\n  const defaultDeleteIcon = (\n    <CloseXS\n      role=\"none\"\n      className={cx(classes.button, classes.tagButton)}\n      iconSize=\"XS\"\n      {...deleteButtonProps}\n    />\n  );\n\n  const categoricalBackgroundColor =\n    type === \"categorical\" ? getCategoricalColor(color, colors) : undefined;\n\n  const backgroundColor =\n    (type === \"semantic\" && getColor(color, \"neutral_20\")) ||\n    (type === \"categorical\" && `${categoricalBackgroundColor}30`) ||\n    undefined;\n\n  const isClickable = !!(onClick || onDelete) && !disabled;\n\n  const clickableClass = css({\n    \"&:hover\": {\n      boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`,\n    },\n  });\n\n  const colorOverride = (disabled && [\"atmo3\", \"secondary_60\"]) || undefined;\n\n  const avatarIcon = isSelected ? (\n    <CheckboxCheck color={colorOverride} iconSize=\"XS\" />\n  ) : (\n    <Checkbox color={colorOverride} iconSize=\"XS\" />\n  );\n\n  return (\n    <Chip\n      ref={ref}\n      label={label}\n      disabled={disabled}\n      className={cx({ [clickableClass]: isClickable }, className)}\n      style={{\n        ...(disabled ? null : { backgroundColor }),\n        ...style,\n      }}\n      classes={{\n        root: cx(classes.root, classes.chipRoot, {\n          [classes.disabled]: disabled,\n          [classes.clickable]: isClickable,\n          [classes.categorical]: type === \"categorical\",\n          [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n          [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n        }),\n        label: classes.label,\n        deleteIcon: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n      }}\n      deleteIcon={deleteIcon || defaultDeleteIcon}\n      onDelete={disabled ? undefined : onDelete}\n      onClick={(event) => {\n        if (disabled) return;\n        if (selectable) setIsSelected(!isSelected);\n        onClick?.(event, !isSelected);\n      }}\n      aria-pressed={isSelected}\n      {...(selectable &&\n        type === \"semantic\" && {\n          avatar: avatarIcon,\n        })}\n      {...others}\n    />\n  );\n});\n"],"names":["forwardRef","useDefaultProps","useTheme","useClasses","useControlled","jsx","CloseXS","getColor","CheckboxCheck","Checkbox","Chip"],"mappings":"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"}

package/dist/cjs/Typography/Typography.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.cjs","sources":["../../../src/Typography/Typography.tsx"],"sourcesContent":["import { ElementType, forwardRef } from \"react\";\n\nimport { PolymorphicComponentRef, PolymorphicRef } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport {\n  HvTypographyLegacyVariants,\n  HvTypographyVariants,\n  mapVariant,\n} from \"./utils\";\nimport { staticClasses, useClasses } from \"./Typography.styles\";\n\nexport { staticClasses as typographyClasses };\n\nexport type HvTypographyClasses = ExtractNames<typeof useClasses>;\n\nconst HvTypographyMap = {\n  display: \"h1\",\n  title1: \"h1\",\n  title2: \"h2\",\n  title3: \"h3\",\n  title4: \"h4\",\n  body: \"p\",\n  label: \"span\",\n  caption1: \"p\",\n  caption2: \"p\",\n  // LEGACY\n  \"5xlTitle\": \"h1\",\n  \"4xlTitle\": \"h1\",\n  \"3xlTitle\": \"h1\",\n  xxlTitle: \"h1\",\n  xlTitle: \"h1\",\n  lTitle: \"h2\",\n  mTitle: \"h3\",\n  sTitle: \"h4\",\n  xsTitle: \"h5\",\n  xxsTitle: \"h6\",\n  sectionTitle: \"p\",\n  highlightText: \"p\",\n  normalText: \"p\",\n  placeholderText: \"p\",\n  link: \"p\",\n  disabledText: \"p\",\n  selectedNavText: \"p\",\n  vizText: \"p\",\n  vizTextDisabled: \"p\",\n  xsInlineLink: \"p\",\n} satisfies Record<\n  HvTypographyVariants | HvTypographyLegacyVariants,\n  ElementType\n>;\n\nexport type HvTypographyProps<C extends React.ElementType = \"p\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the Typography. */\n      variant?: HvTypographyVariants | HvTypographyLegacyVariants;\n      /** If `true` the typography will display the look of a link. */\n      link?: boolean;\n      /** If `true` the typography will display the look of a disabled state. */\n      disabled?: boolean;\n      /** If `true`, the text will have a bottom margin. */\n      paragraph?: boolean;\n      /**\n       * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.\n       *\n       * Note that text overflow can only happen with block or inline-block level elements\n       * (the element needs to have a width in order to overflow).\n       */\n      noWrap?: boolean;\n      /** A Jss Object used to override or extend the styles applied to the component. */\n      classes?: HvTypographyClasses;\n    }\n  >;\n\n/**\n * Typography component is used to render text and paragraphs within an interface.\n */\nexport const HvTypography: <C extends React.ElementType = \"p\">(\n  props: HvTypographyProps<C>\n) => React.ReactElement | null = forwardRef(\n  <C extends React.ElementType = \"p\">(\n    props: HvTypographyProps<C>,\n    ref: PolymorphicRef<C>\n  ) => {\n    const {\n      className,\n      component: ComponentProp,\n      classes: classesProp,\n      variant: variantProp = \"body\",\n      link = false,\n      noWrap = false,\n      paragraph = false,\n      disabled = false,\n      ...others\n    } = useDefaultProps(\"HvTypography\", props);\n    const { classes, cx } = useClasses(classesProp);\n    const { activeTheme } = useTheme();\n\n    const variant = mapVariant(variantProp, activeTheme?.name);\n\n    const Component =\n      ComponentProp || (paragraph && \"p\") || HvTypographyMap[variant] || \"span\";\n\n    return (\n      <Component\n        ref={ref}\n        className={cx(\n          classes.root,\n          classes[variant],\n          {\n            [classes.isLink]: link,\n            [classes.noWrap]: noWrap,\n            [classes.disabled]: disabled,\n          },\n          className\n        )}\n        disabled={disabled}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["forwardRef","useDefaultProps","useClasses","useTheme","mapVariant","jsx"],"mappings":";;;;;;;;AAiBA,MAAM,kBAAkB;AAAA,EACtB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA;AAAA,EAEV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,UAAU;AAAA,EACV,cAAc;AAAA,EACd,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,cAAc;AAChB;AAgCO,MAAM,eAEoBA,MAAA;AAAA,EAC/B,CACE,OACA,QACG;AACG,UAAA;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,SAAS;AAAA,MACT,SAAS,cAAc;AAAA,MACvB,OAAO;AAAA,MACP,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,GAAG;AAAA,IAAA,IACDC,gBAAgB,gBAAA,gBAAgB,KAAK;AACzC,UAAM,EAAE,SAAS,GAAG,IAAIC,6BAAW,WAAW;AACxC,UAAA,EAAE,gBAAgBC,SAAAA;AAExB,UAAM,UAAUC,MAAA,WAAW,aAAa,aAAa,IAAI;AAEzD,UAAM,YACJ,iBAAkB,aAAa,OAAQ,gBAAgB,OAAO,KAAK;AAGnE,WAAAC,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,QAAQ,OAAO;AAAA,UACf;AAAA,YACE,CAAC,QAAQ,MAAM,GAAG;AAAA,YAClB,CAAC,QAAQ,MAAM,GAAG;AAAA,YAClB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACtB;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;;;"}
+{"version":3,"file":"Typography.cjs","sources":["../../../src/Typography/Typography.tsx"],"sourcesContent":["import { ElementType, forwardRef } from \"react\";\n\nimport { PolymorphicComponentRef, PolymorphicRef } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport {\n  HvTypographyLegacyVariants,\n  HvTypographyVariants,\n  mapVariant,\n} from \"./utils\";\nimport { staticClasses, useClasses } from \"./Typography.styles\";\n\nexport { staticClasses as typographyClasses };\n\nexport type HvTypographyClasses = ExtractNames<typeof useClasses>;\n\nconst HvTypographyMap = {\n  display: \"h1\",\n  title1: \"h1\",\n  title2: \"h2\",\n  title3: \"h3\",\n  title4: \"h4\",\n  body: \"p\",\n  label: \"span\",\n  caption1: \"p\",\n  caption2: \"p\",\n  // LEGACY\n  \"5xlTitle\": \"h1\",\n  \"4xlTitle\": \"h1\",\n  \"3xlTitle\": \"h1\",\n  xxlTitle: \"h1\",\n  xlTitle: \"h1\",\n  lTitle: \"h2\",\n  mTitle: \"h3\",\n  sTitle: \"h4\",\n  xsTitle: \"h5\",\n  xxsTitle: \"h6\",\n  sectionTitle: \"p\",\n  highlightText: \"p\",\n  normalText: \"p\",\n  placeholderText: \"p\",\n  link: \"p\",\n  disabledText: \"p\",\n  selectedNavText: \"p\",\n  vizText: \"p\",\n  vizTextDisabled: \"p\",\n  xsInlineLink: \"p\",\n} satisfies Record<\n  HvTypographyVariants | HvTypographyLegacyVariants,\n  ElementType\n>;\n\nexport type HvTypographyProps<C extends React.ElementType = \"p\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the Typography. */\n      variant?: HvTypographyVariants | HvTypographyLegacyVariants;\n      /** If `true` the typography will display the look of a link. */\n      link?: boolean;\n      /** If `true` the typography will display the look of a disabled state. */\n      disabled?: boolean;\n      /**\n       * If `true`, the typography will render a \"p\" element\n       * @deprecated use `component=\"p\"` instead\n       * */\n      paragraph?: boolean;\n      /**\n       * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.\n       *\n       * Note that text overflow can only happen with block or inline-block level elements\n       * (the element needs to have a width in order to overflow).\n       */\n      noWrap?: boolean;\n      /** A Jss Object used to override or extend the styles applied to the component. */\n      classes?: HvTypographyClasses;\n    }\n  >;\n\n/**\n * Typography component is used to render text and paragraphs within an interface.\n */\nexport const HvTypography: <C extends React.ElementType = \"p\">(\n  props: HvTypographyProps<C>\n) => React.ReactElement | null = forwardRef(\n  <C extends React.ElementType = \"p\">(\n    props: HvTypographyProps<C>,\n    ref: PolymorphicRef<C>\n  ) => {\n    const {\n      className,\n      component: ComponentProp,\n      classes: classesProp,\n      variant: variantProp = \"body\",\n      link = false,\n      noWrap = false,\n      paragraph = false,\n      disabled = false,\n      ...others\n    } = useDefaultProps(\"HvTypography\", props);\n    const { classes, cx } = useClasses(classesProp);\n    const { activeTheme } = useTheme();\n\n    const variant = mapVariant(variantProp, activeTheme?.name);\n\n    const Component =\n      ComponentProp || (paragraph && \"p\") || HvTypographyMap[variant] || \"span\";\n\n    return (\n      <Component\n        ref={ref}\n        className={cx(\n          classes.root,\n          classes[variant],\n          {\n            [classes.isLink]: link,\n            [classes.noWrap]: noWrap,\n            [classes.disabled]: disabled,\n          },\n          className\n        )}\n        disabled={disabled}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["forwardRef","useDefaultProps","useClasses","useTheme","mapVariant","jsx"],"mappings":";;;;;;;;AAiBA,MAAM,kBAAkB;AAAA,EACtB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA;AAAA,EAEV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,UAAU;AAAA,EACV,cAAc;AAAA,EACd,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,cAAc;AAChB;AAmCO,MAAM,eAEoBA,MAAA;AAAA,EAC/B,CACE,OACA,QACG;AACG,UAAA;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,SAAS;AAAA,MACT,SAAS,cAAc;AAAA,MACvB,OAAO;AAAA,MACP,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,GAAG;AAAA,IAAA,IACDC,gBAAgB,gBAAA,gBAAgB,KAAK;AACzC,UAAM,EAAE,SAAS,GAAG,IAAIC,6BAAW,WAAW;AACxC,UAAA,EAAE,gBAAgBC,SAAAA;AAExB,UAAM,UAAUC,MAAA,WAAW,aAAa,aAAa,IAAI;AAEzD,UAAM,YACJ,iBAAkB,aAAa,OAAQ,gBAAgB,OAAO,KAAK;AAGnE,WAAAC,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,QAAQ,OAAO;AAAA,UACf;AAAA,YACE,CAAC,QAAQ,MAAM,GAAG;AAAA,YAClB,CAAC,QAAQ,MAAM,GAAG;AAAA,YAClB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACtB;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;;;"}

package/dist/cjs/Typography/Typography.styles.cjs

@@ -10,6 +10,7 @@ const { useClasses, staticClasses } = classes.createClasses("HvTypography", {
     color: uikitStyles.theme.colors.secondary_60
   },
   isLink: {
+    cursor: "pointer",
     color: uikitStyles.theme.colors.primary,
     textDecoration: "underline"
   },

package/dist/cjs/Typography/Typography.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.styles.cjs","sources":["../../../src/Typography/Typography.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvTypography\", {\n  root: {\n    fontFamily: theme.fontFamily.body,\n  },\n  disabled: {\n    color: theme.colors.secondary_60,\n  },\n  isLink: {\n    color: theme.colors.primary,\n    textDecoration: \"underline\",\n  },\n  noWrap: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  // variants\n  display: { ...theme.typography.display },\n  title1: { ...theme.typography.title1 },\n  title2: { ...theme.typography.title2 },\n  title3: { ...theme.typography.title3 },\n  title4: { ...theme.typography.title4 },\n  body: { ...theme.typography.body },\n  label: { ...theme.typography.label },\n  caption1: { ...theme.typography.caption1 },\n  caption2: { ...theme.typography.caption2 },\n  // legacy variants\n  \"5xlTitle\": { ...theme.typography[\"5xlTitle\"] },\n  \"4xlTitle\": { ...theme.typography[\"4xlTitle\"] },\n  // @ts-ignore non-existent variant\n  \"3xlTitle\": { ...theme.typography[\"3xlTitle\"] },\n  xxlTitle: { ...theme.typography.xxlTitle },\n  xlTitle: {},\n  lTitle: { ...theme.typography.lTitle },\n  mTitle: {},\n  sTitle: { ...theme.typography.sTitle },\n  xsTitle: {},\n  xxsTitle: { ...theme.typography.xxsTitle },\n  sectionTitle: {\n    ...theme.typography.sectionTitle,\n    textTransform: \"uppercase\",\n  },\n  highlightText: {},\n  normalText: {},\n  placeholderText: { ...theme.typography.placeholderText },\n  link: {\n    ...theme.typography.link,\n    cursor: \"pointer\",\n    textDecoration: \"underline\",\n  },\n  disabledText: { ...theme.typography.disabledText },\n  selectedNavText: { ...theme.typography.selectedNavText },\n  vizText: {},\n  vizTextDisabled: { ...theme.typography.vizTextDisabled },\n  xsInlineLink: { ...theme.typography.xsInlineLink },\n});\n"],"names":["createClasses","theme"],"mappings":";;;;AAIO,MAAM,EAAE,YAAY,kBAAkBA,QAAAA,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,YAAYC,YAAAA,MAAM,WAAW;AAAA,EAC/B;AAAA,EACA,UAAU;AAAA,IACR,OAAOA,YAAAA,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,IACN,OAAOA,YAAAA,MAAM,OAAO;AAAA,IACpB,gBAAgB;AAAA,EAClB;AAAA,EACA,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA;AAAA,EAEA,SAAS,EAAE,GAAGA,kBAAM,WAAW,QAAQ;AAAA,EACvC,QAAQ,EAAE,GAAGA,kBAAM,WAAW,OAAO;AAAA,EACrC,QAAQ,EAAE,GAAGA,kBAAM,WAAW,OAAO;AAAA,EACrC,QAAQ,EAAE,GAAGA,kBAAM,WAAW,OAAO;AAAA,EACrC,QAAQ,EAAE,GAAGA,kBAAM,WAAW,OAAO;AAAA,EACrC,MAAM,EAAE,GAAGA,kBAAM,WAAW,KAAK;AAAA,EACjC,OAAO,EAAE,GAAGA,kBAAM,WAAW,MAAM;AAAA,EACnC,UAAU,EAAE,GAAGA,kBAAM,WAAW,SAAS;AAAA,EACzC,UAAU,EAAE,GAAGA,kBAAM,WAAW,SAAS;AAAA;AAAA,EAEzC,YAAY,EAAE,GAAGA,YAAAA,MAAM,WAAW,UAAU,EAAE;AAAA,EAC9C,YAAY,EAAE,GAAGA,YAAAA,MAAM,WAAW,UAAU,EAAE;AAAA;AAAA,EAE9C,YAAY,EAAE,GAAGA,YAAAA,MAAM,WAAW,UAAU,EAAE;AAAA,EAC9C,UAAU,EAAE,GAAGA,kBAAM,WAAW,SAAS;AAAA,EACzC,SAAS,CAAC;AAAA,EACV,QAAQ,EAAE,GAAGA,kBAAM,WAAW,OAAO;AAAA,EACrC,QAAQ,CAAC;AAAA,EACT,QAAQ,EAAE,GAAGA,kBAAM,WAAW,OAAO;AAAA,EACrC,SAAS,CAAC;AAAA,EACV,UAAU,EAAE,GAAGA,kBAAM,WAAW,SAAS;AAAA,EACzC,cAAc;AAAA,IACZ,GAAGA,YAAAA,MAAM,WAAW;AAAA,IACpB,eAAe;AAAA,EACjB;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,YAAY,CAAC;AAAA,EACb,iBAAiB,EAAE,GAAGA,kBAAM,WAAW,gBAAgB;AAAA,EACvD,MAAM;AAAA,IACJ,GAAGA,YAAAA,MAAM,WAAW;AAAA,IACpB,QAAQ;AAAA,IACR,gBAAgB;AAAA,EAClB;AAAA,EACA,cAAc,EAAE,GAAGA,kBAAM,WAAW,aAAa;AAAA,EACjD,iBAAiB,EAAE,GAAGA,kBAAM,WAAW,gBAAgB;AAAA,EACvD,SAAS,CAAC;AAAA,EACV,iBAAiB,EAAE,GAAGA,kBAAM,WAAW,gBAAgB;AAAA,EACvD,cAAc,EAAE,GAAGA,kBAAM,WAAW,aAAa;AACnD,CAAC;;;"}
+{"version":3,"file":"Typography.styles.cjs","sources":["../../../src/Typography/Typography.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvTypography\", {\n  root: {\n    fontFamily: theme.fontFamily.body,\n  },\n  disabled: {\n    color: theme.colors.secondary_60,\n  },\n  isLink: {\n    cursor: \"pointer\",\n    color: theme.colors.primary,\n    textDecoration: \"underline\",\n  },\n  noWrap: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  // variants\n  display: { ...theme.typography.display },\n  title1: { ...theme.typography.title1 },\n  title2: { ...theme.typography.title2 },\n  title3: { ...theme.typography.title3 },\n  title4: { ...theme.typography.title4 },\n  body: { ...theme.typography.body },\n  label: { ...theme.typography.label },\n  caption1: { ...theme.typography.caption1 },\n  caption2: { ...theme.typography.caption2 },\n  // legacy variants\n  \"5xlTitle\": { ...theme.typography[\"5xlTitle\"] },\n  \"4xlTitle\": { ...theme.typography[\"4xlTitle\"] },\n  // @ts-ignore non-existent variant\n  \"3xlTitle\": { ...theme.typography[\"3xlTitle\"] },\n  xxlTitle: { ...theme.typography.xxlTitle },\n  xlTitle: {},\n  lTitle: { ...theme.typography.lTitle },\n  mTitle: {},\n  sTitle: { ...theme.typography.sTitle },\n  xsTitle: {},\n  xxsTitle: { ...theme.typography.xxsTitle },\n  sectionTitle: {\n    ...theme.typography.sectionTitle,\n    textTransform: \"uppercase\",\n  },\n  highlightText: {},\n  normalText: {},\n  placeholderText: { ...theme.typography.placeholderText },\n  link: {\n    ...theme.typography.link,\n    cursor: \"pointer\",\n    textDecoration: \"underline\",\n  },\n  disabledText: { ...theme.typography.disabledText },\n  selectedNavText: { ...theme.typography.selectedNavText },\n  vizText: {},\n  vizTextDisabled: { ...theme.typography.vizTextDisabled },\n  xsInlineLink: { ...theme.typography.xsInlineLink },\n});\n"],"names":["createClasses","theme"],"mappings":";;;;AAIO,MAAM,EAAE,YAAY,kBAAkBA,QAAAA,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,YAAYC,YAAAA,MAAM,WAAW;AAAA,EAC/B;AAAA,EACA,UAAU;AAAA,IACR,OAAOA,YAAAA,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,OAAOA,YAAAA,MAAM,OAAO;AAAA,IACpB,gBAAgB;AAAA,EAClB;AAAA,EACA,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA;AAAA,EAEA,SAAS,EAAE,GAAGA,kBAAM,WAAW,QAAQ;AAAA,EACvC,QAAQ,EAAE,GAAGA,kBAAM,WAAW,OAAO;AAAA,EACrC,QAAQ,EAAE,GAAGA,kBAAM,WAAW,OAAO;AAAA,EACrC,QAAQ,EAAE,GAAGA,kBAAM,WAAW,OAAO;AAAA,EACrC,QAAQ,EAAE,GAAGA,kBAAM,WAAW,OAAO;AAAA,EACrC,MAAM,EAAE,GAAGA,kBAAM,WAAW,KAAK;AAAA,EACjC,OAAO,EAAE,GAAGA,kBAAM,WAAW,MAAM;AAAA,EACnC,UAAU,EAAE,GAAGA,kBAAM,WAAW,SAAS;AAAA,EACzC,UAAU,EAAE,GAAGA,kBAAM,WAAW,SAAS;AAAA;AAAA,EAEzC,YAAY,EAAE,GAAGA,YAAAA,MAAM,WAAW,UAAU,EAAE;AAAA,EAC9C,YAAY,EAAE,GAAGA,YAAAA,MAAM,WAAW,UAAU,EAAE;AAAA;AAAA,EAE9C,YAAY,EAAE,GAAGA,YAAAA,MAAM,WAAW,UAAU,EAAE;AAAA,EAC9C,UAAU,EAAE,GAAGA,kBAAM,WAAW,SAAS;AAAA,EACzC,SAAS,CAAC;AAAA,EACV,QAAQ,EAAE,GAAGA,kBAAM,WAAW,OAAO;AAAA,EACrC,QAAQ,CAAC;AAAA,EACT,QAAQ,EAAE,GAAGA,kBAAM,WAAW,OAAO;AAAA,EACrC,SAAS,CAAC;AAAA,EACV,UAAU,EAAE,GAAGA,kBAAM,WAAW,SAAS;AAAA,EACzC,cAAc;AAAA,IACZ,GAAGA,YAAAA,MAAM,WAAW;AAAA,IACpB,eAAe;AAAA,EACjB;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,YAAY,CAAC;AAAA,EACb,iBAAiB,EAAE,GAAGA,kBAAM,WAAW,gBAAgB;AAAA,EACvD,MAAM;AAAA,IACJ,GAAGA,YAAAA,MAAM,WAAW;AAAA,IACpB,QAAQ;AAAA,IACR,gBAAgB;AAAA,EAClB;AAAA,EACA,cAAc,EAAE,GAAGA,kBAAM,WAAW,aAAa;AAAA,EACjD,iBAAiB,EAAE,GAAGA,kBAAM,WAAW,gBAAgB;AAAA,EACvD,SAAS,CAAC;AAAA,EACV,iBAAiB,EAAE,GAAGA,kBAAM,WAAW,gBAAgB;AAAA,EACvD,cAAc,EAAE,GAAGA,kBAAM,WAAW,aAAa;AACnD,CAAC;;;"}

package/dist/esm/FilterGroup/Counter/Counter.js

@@ -30,7 +30,7 @@ const HvFilterGroupCounter = (props) => {
   ] : filterOptions;
   const optionIdx = filterOptions.findIndex((option) => option.id === id);
   let groupsCounter = 0;
-  appliedFilters.filter((elem) => elem !== void 0).forEach((fg, i) => {
+  appliedFilters.forEach((fg, i) => {
     groupsCounter += getExistingFiltersById(i, filterValues, filterOptions);
   });
   const partialCounter = id ? getExistingFiltersById(optionIdx, filterValues, filterOptions) || 0 : groupsCounter;

package/dist/esm/FilterGroup/Counter/Counter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Counter.js","sources":["../../../../src/FilterGroup/Counter/Counter.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { staticClasses, useClasses } from \"./Counter.styles\";\nimport { HvFilterGroupFilters, HvFilterGroupValue } from \"../types\";\n\nexport { staticClasses as filterGroupCounterClasses };\n\nexport type HvFilterGroupCounterClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupCounterProps {\n  className?: string;\n  id?: string;\n  classes?: HvFilterGroupCounterClasses;\n}\n\nconst getExistingFiltersById = (\n  idx: number,\n  filterValues: HvFilterGroupValue,\n  filterOptions: HvFilterGroupFilters\n) => {\n  let total = 0;\n  filterValues[idx]?.forEach((fv) => {\n    if (filterOptions[idx]?.data.find((f) => f.id === fv)) {\n      total += 1;\n    }\n  });\n  return total;\n};\n\nexport const HvFilterGroupCounter = (props: HvFilterGroupCounterProps) => {\n  const {\n    className,\n    id,\n    classes: classesProp,\n  } = useDefaultProps(\"HvFilterGroupCounter\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const {\n    filterOptions,\n    filterValues = [],\n    appliedFilters = [],\n  } = useContext(HvFilterGroupContext);\n\n  const options =\n    id && filterOptions.find((option) => option.id === id)\n      ? ([\n          filterOptions.find((option) => option.id === id),\n        ] as HvFilterGroupFilters)\n      : filterOptions;\n  const optionIdx = filterOptions.findIndex((option) => option.id === id);\n\n  let groupsCounter = 0;\n  appliedFilters\n    .filter((elem) => elem !== undefined)\n    .forEach((fg, i) => {\n      groupsCounter += getExistingFiltersById(i, filterValues, filterOptions);\n    });\n\n  const partialCounter = id\n    ? getExistingFiltersById(optionIdx, filterValues, filterOptions) || 0\n    : groupsCounter;\n\n  const totalCounter = options.reduce(\n    (acc, option) => acc + option.data.length,\n    0\n  );\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {partialCounter > 0 ? (\n        <p className={classes.partialCounter}>{partialCounter}</p>\n      ) : (\n        partialCounter\n      )}\n      {` / ${totalCounter}`}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAoBA,MAAM,yBAAyB,CAC7B,KACA,cACA,kBACG;AACH,MAAI,QAAQ;AACZ,eAAa,GAAG,GAAG,QAAQ,CAAC,OAAO;AAC7B,QAAA,cAAc,GAAG,GAAG,KAAK,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,GAAG;AAC5C,eAAA;AAAA,IACX;AAAA,EAAA,CACD;AACM,SAAA;AACT;AAEa,MAAA,uBAAuB,CAAC,UAAqC;AAClE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,wBAAwB,KAAK;AACjD,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,QAAA;AAAA,IACJ;AAAA,IACA,eAAe,CAAC;AAAA,IAChB,iBAAiB,CAAC;AAAA,EAAA,IAChB,WAAW,oBAAoB;AAE7B,QAAA,UACJ,MAAM,cAAc,KAAK,CAAC,WAAW,OAAO,OAAO,EAAE,IAChD;AAAA,IACC,cAAc,KAAK,CAAC,WAAW,OAAO,OAAO,EAAE;AAAA,EAEjD,IAAA;AACN,QAAM,YAAY,cAAc,UAAU,CAAC,WAAW,OAAO,OAAO,EAAE;AAEtE,MAAI,gBAAgB;AAEjB,iBAAA,OAAO,CAAC,SAAS,SAAS,MAAS,EACnC,QAAQ,CAAC,IAAI,MAAM;AACD,qBAAA,uBAAuB,GAAG,cAAc,aAAa;AAAA,EAAA,CACvE;AAEH,QAAM,iBAAiB,KACnB,uBAAuB,WAAW,cAAc,aAAa,KAAK,IAClE;AAEJ,QAAM,eAAe,QAAQ;AAAA,IAC3B,CAAC,KAAK,WAAW,MAAM,OAAO,KAAK;AAAA,IACnC;AAAA,EAAA;AAGF,8BACG,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GACvC,UAAA;AAAA,IAAA,iBAAiB,IACf,oBAAA,KAAA,EAAE,WAAW,QAAQ,gBAAiB,0BAAe,IAEtD;AAAA,IAED,MAAM,YAAY;AAAA,EACrB,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Counter.js","sources":["../../../../src/FilterGroup/Counter/Counter.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { staticClasses, useClasses } from \"./Counter.styles\";\nimport { HvFilterGroupFilters, HvFilterGroupValue } from \"../types\";\n\nexport { staticClasses as filterGroupCounterClasses };\n\nexport type HvFilterGroupCounterClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupCounterProps {\n  className?: string;\n  id?: string;\n  classes?: HvFilterGroupCounterClasses;\n}\n\nconst getExistingFiltersById = (\n  idx: number,\n  filterValues: HvFilterGroupValue,\n  filterOptions: HvFilterGroupFilters\n) => {\n  let total = 0;\n  filterValues[idx]?.forEach((fv) => {\n    if (filterOptions[idx]?.data.find((f) => f.id === fv)) {\n      total += 1;\n    }\n  });\n  return total;\n};\n\nexport const HvFilterGroupCounter = (props: HvFilterGroupCounterProps) => {\n  const {\n    className,\n    id,\n    classes: classesProp,\n  } = useDefaultProps(\"HvFilterGroupCounter\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const {\n    filterOptions,\n    filterValues = [],\n    appliedFilters = [],\n  } = useContext(HvFilterGroupContext);\n\n  const options =\n    id && filterOptions.find((option) => option.id === id)\n      ? ([\n          filterOptions.find((option) => option.id === id),\n        ] as HvFilterGroupFilters)\n      : filterOptions;\n  const optionIdx = filterOptions.findIndex((option) => option.id === id);\n\n  let groupsCounter = 0;\n  appliedFilters.forEach((fg, i) => {\n    groupsCounter += getExistingFiltersById(i, filterValues, filterOptions);\n  });\n\n  const partialCounter = id\n    ? getExistingFiltersById(optionIdx, filterValues, filterOptions) || 0\n    : groupsCounter;\n\n  const totalCounter = options.reduce(\n    (acc, option) => acc + option.data.length,\n    0\n  );\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {partialCounter > 0 ? (\n        <p className={classes.partialCounter}>{partialCounter}</p>\n      ) : (\n        partialCounter\n      )}\n      {` / ${totalCounter}`}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAoBA,MAAM,yBAAyB,CAC7B,KACA,cACA,kBACG;AACH,MAAI,QAAQ;AACZ,eAAa,GAAG,GAAG,QAAQ,CAAC,OAAO;AAC7B,QAAA,cAAc,GAAG,GAAG,KAAK,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,GAAG;AAC5C,eAAA;AAAA,IACX;AAAA,EAAA,CACD;AACM,SAAA;AACT;AAEa,MAAA,uBAAuB,CAAC,UAAqC;AAClE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,wBAAwB,KAAK;AACjD,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,QAAA;AAAA,IACJ;AAAA,IACA,eAAe,CAAC;AAAA,IAChB,iBAAiB,CAAC;AAAA,EAAA,IAChB,WAAW,oBAAoB;AAE7B,QAAA,UACJ,MAAM,cAAc,KAAK,CAAC,WAAW,OAAO,OAAO,EAAE,IAChD;AAAA,IACC,cAAc,KAAK,CAAC,WAAW,OAAO,OAAO,EAAE;AAAA,EAEjD,IAAA;AACN,QAAM,YAAY,cAAc,UAAU,CAAC,WAAW,OAAO,OAAO,EAAE;AAEtE,MAAI,gBAAgB;AACL,iBAAA,QAAQ,CAAC,IAAI,MAAM;AACf,qBAAA,uBAAuB,GAAG,cAAc,aAAa;AAAA,EAAA,CACvE;AAED,QAAM,iBAAiB,KACnB,uBAAuB,WAAW,cAAc,aAAa,KAAK,IAClE;AAEJ,QAAM,eAAe,QAAQ;AAAA,IAC3B,CAAC,KAAK,WAAW,MAAM,OAAO,KAAK;AAAA,IACnC;AAAA,EAAA;AAGF,8BACG,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GACvC,UAAA;AAAA,IAAA,iBAAiB,IACf,oBAAA,KAAA,EAAE,WAAW,QAAQ,gBAAiB,0BAAe,IAEtD;AAAA,IAED,MAAM,YAAY;AAAA,EACrB,EAAA,CAAA;AAEJ;"}

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

@@ -76,10 +76,7 @@ const HvFilterGroupRightPanel = ({
         newFilterValues[activeGroup] = [];
       }
     } else {
-      newFilterValues[activeGroup] = [
-        ...filterValues[activeGroup],
-        ...activeGroupOptions
-      ];
+      newFilterValues[activeGroup] = [...activeGroupOptions];
     }
     setFilterValues(newFilterValues);
   }, [

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

@@ -1 +1 @@
-{"version":3,"file":"RightPanel.js","sources":["../../../../src/FilterGroup/RightPanel/RightPanel.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useState } from \"react\";\n\nimport cloneDeep from \"lodash/cloneDeep\";\n\nimport { HvCheckBox } from \"../../CheckBox\";\nimport { HvInput } from \"../../Input\";\nimport { HvList, HvListProps } from \"../../List\";\nimport { HvPanel } from \"../../Panel\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\n\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { staticClasses, useClasses } from \"./RightPanel.styles\";\n\nexport { staticClasses as filterGroupRightPanelClasses };\n\nexport type HvFilterGroupRightPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupRightPanelProps {\n  id?: string;\n  className?: string;\n  labels?: {\n    searchBoxPlaceholder?: string;\n    selectAll?: string;\n    multiSelectionConjunction?: string;\n  };\n  emptyElement?: React.ReactNode;\n  classes?: HvFilterGroupRightPanelClasses;\n}\n\nexport const HvFilterGroupRightPanel = ({\n  id,\n  className,\n  labels,\n  emptyElement,\n  classes: classesProp,\n}: HvFilterGroupRightPanelProps) => {\n  const { classes } = useClasses(classesProp);\n  const [searchStr, setSearchStr] = useState<string>(\"\");\n  const [allSelected, setAllSelected] = useState<boolean>(false);\n  const [anySelected, setAnySelected] = useState<boolean>(false);\n\n  const {\n    filterOptions,\n    filterValues = [],\n    setFilterValues,\n    activeGroup,\n  } = useContext(HvFilterGroupContext);\n\n  const activeGroupOptions = useMemo(\n    () =>\n      filterOptions[activeGroup]?.data\n        .filter((option) =>\n          option.name.toLowerCase().includes(searchStr.toLowerCase())\n        )\n        .map((option) => option.id) || [],\n    [filterOptions, activeGroup, searchStr]\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: HvListProps[\"onChange\"] = (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 as any);\n  };\n\n  const handleSelectAll = useCallback(() => {\n    const newFilterValues = cloneDeep(filterValues);\n\n    if (anySelected) {\n      if (searchStr !== \"\") {\n        newFilterValues[activeGroup] = filterValues[activeGroup]?.filter(\n          (value) => !activeGroupOptions.includes(value)\n        );\n      } else {\n        newFilterValues[activeGroup] = [];\n      }\n    } else {\n      newFilterValues[activeGroup] = [\n        ...filterValues[activeGroup],\n        ...activeGroupOptions,\n      ];\n    }\n\n    setFilterValues(newFilterValues);\n  }, [\n    activeGroup,\n    activeGroupOptions,\n    anySelected,\n    filterValues,\n    setFilterValues,\n    searchStr,\n  ]);\n\n  /**\n   * Create selectAll component.\n   *\n   * @returns {*}\n   */\n  const SelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n\n    const defaultLabel = (\n      <HvTypography component=\"span\">\n        {nbrSelected > 0 ? (\n          <>\n            <b>{nbrSelected}</b>\n            {` ${labels?.multiSelectionConjunction} ${activeGroupOptions.length}`}\n          </>\n        ) : (\n          <>\n            <b>{labels?.selectAll}</b>\n            {` (${activeGroupOptions.length})`}\n          </>\n        )}\n      </HvTypography>\n    );\n\n    return (\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select-all\")}\n          label={defaultLabel}\n          onChange={() => handleSelectAll()}\n          className={classes.selectAll}\n          indeterminate={anySelected && !allSelected}\n          checked={allSelected}\n        />\n      </div>\n    );\n  }, [\n    activeFilterValues?.length,\n    activeGroupOptions.length,\n    allSelected,\n    anySelected,\n    handleSelectAll,\n    id,\n    labels,\n    classes?.selectAllContainer,\n    classes?.selectAll,\n  ]);\n\n  return (\n    <HvPanel id={setId(id, \"rightPanel\")} className={className}>\n      {listValues.length > 0 ? (\n        <>\n          <HvInput\n            id={setId(id, \"search\")}\n            classes={{\n              root: classes.search,\n            }}\n            type=\"search\"\n            placeholder={labels?.searchBoxPlaceholder}\n            value={searchStr}\n            onChange={(_, str) => setSearchStr(str)}\n          />\n          <SelectAll />\n          <HvList\n            key={activeGroup}\n            id={setId(id, \"list\")}\n            values={listValues}\n            className={classes.list}\n            multiSelect\n            useSelector\n            showSelectAll={false}\n            onChange={onChangeHandler}\n            selectable\n            condensed\n            hasTooltips\n          />\n        </>\n      ) : (\n        emptyElement\n      )}\n    </HvPanel>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"RightPanel.js","sources":["../../../../src/FilterGroup/RightPanel/RightPanel.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useState } from \"react\";\n\nimport cloneDeep from \"lodash/cloneDeep\";\n\nimport { HvCheckBox } from \"../../CheckBox\";\nimport { HvInput } from \"../../Input\";\nimport { HvList, HvListProps } from \"../../List\";\nimport { HvPanel } from \"../../Panel\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\n\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { staticClasses, useClasses } from \"./RightPanel.styles\";\n\nexport { staticClasses as filterGroupRightPanelClasses };\n\nexport type HvFilterGroupRightPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupRightPanelProps {\n  id?: string;\n  className?: string;\n  labels?: {\n    searchBoxPlaceholder?: string;\n    selectAll?: string;\n    multiSelectionConjunction?: string;\n  };\n  emptyElement?: React.ReactNode;\n  classes?: HvFilterGroupRightPanelClasses;\n}\n\nexport const HvFilterGroupRightPanel = ({\n  id,\n  className,\n  labels,\n  emptyElement,\n  classes: classesProp,\n}: HvFilterGroupRightPanelProps) => {\n  const { classes } = useClasses(classesProp);\n  const [searchStr, setSearchStr] = useState<string>(\"\");\n  const [allSelected, setAllSelected] = useState<boolean>(false);\n  const [anySelected, setAnySelected] = useState<boolean>(false);\n\n  const {\n    filterOptions,\n    filterValues = [],\n    setFilterValues,\n    activeGroup,\n  } = useContext(HvFilterGroupContext);\n\n  const activeGroupOptions = useMemo(\n    () =>\n      filterOptions[activeGroup]?.data\n        .filter((option) =>\n          option.name.toLowerCase().includes(searchStr.toLowerCase())\n        )\n        .map((option) => option.id) || [],\n    [filterOptions, activeGroup, searchStr]\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: HvListProps[\"onChange\"] = (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 as any);\n  };\n\n  const handleSelectAll = useCallback(() => {\n    const newFilterValues = cloneDeep(filterValues);\n\n    if (anySelected) {\n      if (searchStr !== \"\") {\n        newFilterValues[activeGroup] = filterValues[activeGroup]?.filter(\n          (value) => !activeGroupOptions.includes(value)\n        );\n      } else {\n        newFilterValues[activeGroup] = [];\n      }\n    } else {\n      newFilterValues[activeGroup] = [...activeGroupOptions];\n    }\n\n    setFilterValues(newFilterValues);\n  }, [\n    activeGroup,\n    activeGroupOptions,\n    anySelected,\n    filterValues,\n    setFilterValues,\n    searchStr,\n  ]);\n\n  /**\n   * Create selectAll component.\n   *\n   * @returns {*}\n   */\n  const SelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n\n    const defaultLabel = (\n      <HvTypography component=\"span\">\n        {nbrSelected > 0 ? (\n          <>\n            <b>{nbrSelected}</b>\n            {` ${labels?.multiSelectionConjunction} ${activeGroupOptions.length}`}\n          </>\n        ) : (\n          <>\n            <b>{labels?.selectAll}</b>\n            {` (${activeGroupOptions.length})`}\n          </>\n        )}\n      </HvTypography>\n    );\n\n    return (\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select-all\")}\n          label={defaultLabel}\n          onChange={() => handleSelectAll()}\n          className={classes.selectAll}\n          indeterminate={anySelected && !allSelected}\n          checked={allSelected}\n        />\n      </div>\n    );\n  }, [\n    activeFilterValues?.length,\n    activeGroupOptions.length,\n    allSelected,\n    anySelected,\n    handleSelectAll,\n    id,\n    labels,\n    classes?.selectAllContainer,\n    classes?.selectAll,\n  ]);\n\n  return (\n    <HvPanel id={setId(id, \"rightPanel\")} className={className}>\n      {listValues.length > 0 ? (\n        <>\n          <HvInput\n            id={setId(id, \"search\")}\n            classes={{\n              root: classes.search,\n            }}\n            type=\"search\"\n            placeholder={labels?.searchBoxPlaceholder}\n            value={searchStr}\n            onChange={(_, str) => setSearchStr(str)}\n          />\n          <SelectAll />\n          <HvList\n            key={activeGroup}\n            id={setId(id, \"list\")}\n            values={listValues}\n            className={classes.list}\n            multiSelect\n            useSelector\n            showSelectAll={false}\n            onChange={onChangeHandler}\n            selectable\n            condensed\n            hasTooltips\n          />\n        </>\n      ) : (\n        emptyElement\n      )}\n    </HvPanel>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Tag/Tag.js

@@ -1,4 +1,5 @@
 import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
 import { getColor } from "@hitachivantara/uikit-styles";
 import Chip from "@mui/material/Chip";
 import { CloseXS, CheckboxCheck, Checkbox } from "@hitachivantara/uikit-react-icons";
@@ -10,7 +11,7 @@ import { staticClasses } from "./Tag.styles.js";
 const getCategoricalColor = (customColor, colors) => {
   return customColor && colors?.[customColor] || customColor || colors?.cat1;
 };
-const HvTag = (props) => {
+const HvTag = forwardRef((props, ref) => {
   const {
     classes: classesProp,
     className,
@@ -59,6 +60,7 @@ const HvTag = (props) => {
   return /* @__PURE__ */ jsx(
     Chip,
     {
+      ref,
       label,
       disabled,
       className: cx({ [clickableClass]: isClickable }, className),
@@ -95,7 +97,7 @@ const HvTag = (props) => {
       ...others
     }
   );
-};
+});
 export {
   HvTag,
   staticClasses as tagClasses

package/dist/esm/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\";\nimport { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\n\nimport {\n  Checkbox,\n  CheckboxCheck,\n  CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useControlled } from \"../hooks/useControlled\";\n\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n  extends Omit<MuiChipProps, \"color\" | \"classes\" | \"onSelect\"> {\n  /** The label of the tag element. */\n  label?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** The type of the tag element. A tag can be of semantic or categoric type. */\n  type?: \"semantic\" | \"categorical\";\n  /** Background color to be applied to the tag */\n  color?: HvColorAny;\n  /** Icon used to customize the delete icon in the Chip element */\n  deleteIcon?: React.ReactElement;\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component, in order to render the delete icon\n   * */\n  onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>, selected?: boolean) => void;\n  /** Aria properties to apply to delete button in tag\n   * @deprecated no longer used\n   */\n  deleteButtonArialLabel?: string;\n  /** Props to apply to delete icon */\n  deleteButtonProps?: HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n  /** @ignore */\n  ref?: MuiChipProps[\"ref\"];\n  /** @ignore */\n  component?: MuiChipProps[\"component\"];\n  /** Determines whether or not the tag is selectable. */\n  selectable?: boolean;\n  /** Defines if the tag is selected. When defined the tag state becomes controlled. */\n  selected?: boolean;\n  /** When uncontrolled, defines the initial selected state. */\n  defaultSelected?: boolean;\n}\n\nconst getCategoricalColor = (customColor?: HvColorAny, colors?: any) => {\n  return (customColor && colors?.[customColor]) || customColor || colors?.cat1;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = (props: HvTagProps) => {\n  const {\n    classes: classesProp,\n    className,\n    style,\n    label,\n    disabled,\n    type = \"semantic\",\n    selectable,\n    selected,\n    defaultSelected = false,\n    color,\n    deleteIcon,\n    onDelete,\n    onClick,\n    // TODO: remove from API\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { colors } = useTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const [isSelected, setIsSelected] = useControlled(\n    selected,\n    Boolean(defaultSelected)\n  );\n\n  const defaultDeleteIcon = (\n    <CloseXS\n      role=\"none\"\n      className={cx(classes.button, classes.tagButton)}\n      iconSize=\"XS\"\n      {...deleteButtonProps}\n    />\n  );\n\n  const categoricalBackgroundColor =\n    type === \"categorical\" ? getCategoricalColor(color, colors) : undefined;\n\n  const backgroundColor =\n    (type === \"semantic\" && getColor(color, \"neutral_20\")) ||\n    (type === \"categorical\" && `${categoricalBackgroundColor}30`) ||\n    undefined;\n\n  const isClickable = !!(onClick || onDelete) && !disabled;\n\n  const clickableClass = css({\n    \"&:hover\": {\n      boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`,\n    },\n  });\n\n  const colorOverride = (disabled && [\"atmo3\", \"secondary_60\"]) || undefined;\n\n  const avatarIcon = isSelected ? (\n    <CheckboxCheck color={colorOverride} iconSize=\"XS\" />\n  ) : (\n    <Checkbox color={colorOverride} iconSize=\"XS\" />\n  );\n\n  return (\n    <Chip\n      label={label}\n      disabled={disabled}\n      className={cx({ [clickableClass]: isClickable }, className)}\n      style={{\n        ...(disabled ? null : { backgroundColor }),\n        ...style,\n      }}\n      classes={{\n        root: cx(classes.root, classes.chipRoot, {\n          [classes.disabled]: disabled,\n          [classes.clickable]: isClickable,\n          [classes.categorical]: type === \"categorical\",\n          [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n          [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n        }),\n        label: classes.label,\n        deleteIcon: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n      }}\n      deleteIcon={deleteIcon || defaultDeleteIcon}\n      onDelete={disabled ? undefined : onDelete}\n      onClick={(event) => {\n        if (disabled) return;\n        if (selectable) setIsSelected(!isSelected);\n        onClick?.(event, !isSelected);\n      }}\n      aria-pressed={isSelected}\n      {...(selectable &&\n        type === \"semantic\" && {\n          avatar: avatarIcon,\n        })}\n      {...others}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA6DA,MAAM,sBAAsB,CAAC,aAA0B,WAAiB;AACtE,SAAQ,eAAe,SAAS,WAAW,KAAM,eAAe,QAAQ;AAC1E;AAUa,MAAA,QAAQ,CAAC,UAAsB;AACpC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA,yBAAyB;AAAA,IACzB,oBAAoB,CAAC;AAAA,IACrB,GAAG;AAAA,EAAA,IACD,gBAAgB,SAAS,KAAK;AAC5B,QAAA,EAAE,WAAW;AACnB,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAE7C,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC;AAAA,IACA,QAAQ,eAAe;AAAA,EAAA;AAGzB,QAAM,oBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,GAAG,QAAQ,QAAQ,QAAQ,SAAS;AAAA,MAC/C,UAAS;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EAAA;AAIR,QAAM,6BACJ,SAAS,gBAAgB,oBAAoB,OAAO,MAAM,IAAI;AAE1D,QAAA,kBACH,SAAS,cAAc,SAAS,OAAO,YAAY,KACnD,SAAS,iBAAiB,GAAG,0BAA0B,QACxD;AAEF,QAAM,cAAc,CAAC,EAAE,WAAW,aAAa,CAAC;AAEhD,QAAM,iBAAiB,IAAI;AAAA,IACzB,WAAW;AAAA,MACT,WAAW,aAAa,0BAA0B;AAAA,IACpD;AAAA,EAAA,CACD;AAED,QAAM,gBAAiB,YAAY,CAAC,SAAS,cAAc,KAAM;AAEjE,QAAM,aAAa,aAChB,oBAAA,eAAA,EAAc,OAAO,eAAe,UAAS,KAAK,CAAA,IAElD,oBAAA,UAAA,EAAS,OAAO,eAAe,UAAS,KAAK,CAAA;AAI9C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW,GAAG,EAAE,CAAC,cAAc,GAAG,YAAA,GAAe,SAAS;AAAA,MAC1D,OAAO;AAAA,QACL,GAAI,WAAW,OAAO,EAAE,gBAAgB;AAAA,QACxC,GAAG;AAAA,MACL;AAAA,MACA,SAAS;AAAA,QACP,MAAM,GAAG,QAAQ,MAAM,QAAQ,UAAU;AAAA,UACvC,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,SAAS,GAAG;AAAA,UACrB,CAAC,QAAQ,WAAW,GAAG,SAAS;AAAA,UAChC,CAAC,QAAQ,gBAAgB,GAAG,SAAS,iBAAiB,CAAC;AAAA,UACvD,CAAC,QAAQ,mBAAmB,GAAG,SAAS,iBAAiB;AAAA,QAAA,CAC1D;AAAA,QACD,OAAO,QAAQ;AAAA,QACf,YAAY,GAAG,QAAQ,YAAY;AAAA,UACjC,CAAC,QAAQ,kBAAkB,GAAG;AAAA,QAAA,CAC/B;AAAA,MACH;AAAA,MACA,YAAY,cAAc;AAAA,MAC1B,UAAU,WAAW,SAAY;AAAA,MACjC,SAAS,CAAC,UAAU;AACd,YAAA;AAAU;AACV,YAAA;AAAY,wBAAc,CAAC,UAAU;AAC/B,kBAAA,OAAO,CAAC,UAAU;AAAA,MAC9B;AAAA,MACA,gBAAc;AAAA,MACb,GAAI,cACH,SAAS,cAAc;AAAA,QACrB,QAAQ;AAAA,MACV;AAAA,MACD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"Tag.js","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import React, { HTMLAttributes, forwardRef } from \"react\";\nimport { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\n\nimport {\n  Checkbox,\n  CheckboxCheck,\n  CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useControlled } from \"../hooks/useControlled\";\n\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n  extends Omit<MuiChipProps, \"color\" | \"classes\" | \"onSelect\"> {\n  /** The label of the tag element. */\n  label?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** The type of the tag element. A tag can be of semantic or categoric type. */\n  type?: \"semantic\" | \"categorical\";\n  /** Background color to be applied to the tag */\n  color?: HvColorAny;\n  /** Icon used to customize the delete icon in the Chip element */\n  deleteIcon?: React.ReactElement;\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component, in order to render the delete icon\n   * */\n  onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>, selected?: boolean) => void;\n  /** Aria properties to apply to delete button in tag\n   * @deprecated no longer used\n   */\n  deleteButtonArialLabel?: string;\n  /** Props to apply to delete icon */\n  deleteButtonProps?: HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n  /** @ignore */\n  ref?: MuiChipProps[\"ref\"];\n  /** @ignore */\n  component?: MuiChipProps[\"component\"];\n  /** Determines whether or not the tag is selectable. */\n  selectable?: boolean;\n  /** Defines if the tag is selected. When defined the tag state becomes controlled. */\n  selected?: boolean;\n  /** When uncontrolled, defines the initial selected state. */\n  defaultSelected?: boolean;\n}\n\nconst getCategoricalColor = (customColor?: HvColorAny, colors?: any) => {\n  return (customColor && colors?.[customColor]) || customColor || colors?.cat1;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = forwardRef<HTMLDivElement, HvTagProps>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    style,\n    label,\n    disabled,\n    type = \"semantic\",\n    selectable,\n    selected,\n    defaultSelected = false,\n    color,\n    deleteIcon,\n    onDelete,\n    onClick,\n    // TODO: remove from API\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { colors } = useTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const [isSelected, setIsSelected] = useControlled(\n    selected,\n    Boolean(defaultSelected)\n  );\n\n  const defaultDeleteIcon = (\n    <CloseXS\n      role=\"none\"\n      className={cx(classes.button, classes.tagButton)}\n      iconSize=\"XS\"\n      {...deleteButtonProps}\n    />\n  );\n\n  const categoricalBackgroundColor =\n    type === \"categorical\" ? getCategoricalColor(color, colors) : undefined;\n\n  const backgroundColor =\n    (type === \"semantic\" && getColor(color, \"neutral_20\")) ||\n    (type === \"categorical\" && `${categoricalBackgroundColor}30`) ||\n    undefined;\n\n  const isClickable = !!(onClick || onDelete) && !disabled;\n\n  const clickableClass = css({\n    \"&:hover\": {\n      boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`,\n    },\n  });\n\n  const colorOverride = (disabled && [\"atmo3\", \"secondary_60\"]) || undefined;\n\n  const avatarIcon = isSelected ? (\n    <CheckboxCheck color={colorOverride} iconSize=\"XS\" />\n  ) : (\n    <Checkbox color={colorOverride} iconSize=\"XS\" />\n  );\n\n  return (\n    <Chip\n      ref={ref}\n      label={label}\n      disabled={disabled}\n      className={cx({ [clickableClass]: isClickable }, className)}\n      style={{\n        ...(disabled ? null : { backgroundColor }),\n        ...style,\n      }}\n      classes={{\n        root: cx(classes.root, classes.chipRoot, {\n          [classes.disabled]: disabled,\n          [classes.clickable]: isClickable,\n          [classes.categorical]: type === \"categorical\",\n          [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n          [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n        }),\n        label: classes.label,\n        deleteIcon: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n      }}\n      deleteIcon={deleteIcon || defaultDeleteIcon}\n      onDelete={disabled ? undefined : onDelete}\n      onClick={(event) => {\n        if (disabled) return;\n        if (selectable) setIsSelected(!isSelected);\n        onClick?.(event, !isSelected);\n      }}\n      aria-pressed={isSelected}\n      {...(selectable &&\n        type === \"semantic\" && {\n          avatar: avatarIcon,\n        })}\n      {...others}\n    />\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;AA6DA,MAAM,sBAAsB,CAAC,aAA0B,WAAiB;AACtE,SAAQ,eAAe,SAAS,WAAW,KAAM,eAAe,QAAQ;AAC1E;AAUO,MAAM,QAAQ,WAAuC,CAAC,OAAO,QAAQ;AACpE,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA,yBAAyB;AAAA,IACzB,oBAAoB,CAAC;AAAA,IACrB,GAAG;AAAA,EAAA,IACD,gBAAgB,SAAS,KAAK;AAC5B,QAAA,EAAE,WAAW;AACnB,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAE7C,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC;AAAA,IACA,QAAQ,eAAe;AAAA,EAAA;AAGzB,QAAM,oBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,GAAG,QAAQ,QAAQ,QAAQ,SAAS;AAAA,MAC/C,UAAS;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EAAA;AAIR,QAAM,6BACJ,SAAS,gBAAgB,oBAAoB,OAAO,MAAM,IAAI;AAE1D,QAAA,kBACH,SAAS,cAAc,SAAS,OAAO,YAAY,KACnD,SAAS,iBAAiB,GAAG,0BAA0B,QACxD;AAEF,QAAM,cAAc,CAAC,EAAE,WAAW,aAAa,CAAC;AAEhD,QAAM,iBAAiB,IAAI;AAAA,IACzB,WAAW;AAAA,MACT,WAAW,aAAa,0BAA0B;AAAA,IACpD;AAAA,EAAA,CACD;AAED,QAAM,gBAAiB,YAAY,CAAC,SAAS,cAAc,KAAM;AAEjE,QAAM,aAAa,aAChB,oBAAA,eAAA,EAAc,OAAO,eAAe,UAAS,KAAK,CAAA,IAElD,oBAAA,UAAA,EAAS,OAAO,eAAe,UAAS,KAAK,CAAA;AAI9C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,EAAE,CAAC,cAAc,GAAG,YAAA,GAAe,SAAS;AAAA,MAC1D,OAAO;AAAA,QACL,GAAI,WAAW,OAAO,EAAE,gBAAgB;AAAA,QACxC,GAAG;AAAA,MACL;AAAA,MACA,SAAS;AAAA,QACP,MAAM,GAAG,QAAQ,MAAM,QAAQ,UAAU;AAAA,UACvC,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,SAAS,GAAG;AAAA,UACrB,CAAC,QAAQ,WAAW,GAAG,SAAS;AAAA,UAChC,CAAC,QAAQ,gBAAgB,GAAG,SAAS,iBAAiB,CAAC;AAAA,UACvD,CAAC,QAAQ,mBAAmB,GAAG,SAAS,iBAAiB;AAAA,QAAA,CAC1D;AAAA,QACD,OAAO,QAAQ;AAAA,QACf,YAAY,GAAG,QAAQ,YAAY;AAAA,UACjC,CAAC,QAAQ,kBAAkB,GAAG;AAAA,QAAA,CAC/B;AAAA,MACH;AAAA,MACA,YAAY,cAAc;AAAA,MAC1B,UAAU,WAAW,SAAY;AAAA,MACjC,SAAS,CAAC,UAAU;AACd,YAAA;AAAU;AACV,YAAA;AAAY,wBAAc,CAAC,UAAU;AAC/B,kBAAA,OAAO,CAAC,UAAU;AAAA,MAC9B;AAAA,MACA,gBAAc;AAAA,MACb,GAAI,cACH,SAAS,cAAc;AAAA,QACrB,QAAQ;AAAA,MACV;AAAA,MACD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/esm/Typography/Typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.js","sources":["../../../src/Typography/Typography.tsx"],"sourcesContent":["import { ElementType, forwardRef } from \"react\";\n\nimport { PolymorphicComponentRef, PolymorphicRef } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport {\n  HvTypographyLegacyVariants,\n  HvTypographyVariants,\n  mapVariant,\n} from \"./utils\";\nimport { staticClasses, useClasses } from \"./Typography.styles\";\n\nexport { staticClasses as typographyClasses };\n\nexport type HvTypographyClasses = ExtractNames<typeof useClasses>;\n\nconst HvTypographyMap = {\n  display: \"h1\",\n  title1: \"h1\",\n  title2: \"h2\",\n  title3: \"h3\",\n  title4: \"h4\",\n  body: \"p\",\n  label: \"span\",\n  caption1: \"p\",\n  caption2: \"p\",\n  // LEGACY\n  \"5xlTitle\": \"h1\",\n  \"4xlTitle\": \"h1\",\n  \"3xlTitle\": \"h1\",\n  xxlTitle: \"h1\",\n  xlTitle: \"h1\",\n  lTitle: \"h2\",\n  mTitle: \"h3\",\n  sTitle: \"h4\",\n  xsTitle: \"h5\",\n  xxsTitle: \"h6\",\n  sectionTitle: \"p\",\n  highlightText: \"p\",\n  normalText: \"p\",\n  placeholderText: \"p\",\n  link: \"p\",\n  disabledText: \"p\",\n  selectedNavText: \"p\",\n  vizText: \"p\",\n  vizTextDisabled: \"p\",\n  xsInlineLink: \"p\",\n} satisfies Record<\n  HvTypographyVariants | HvTypographyLegacyVariants,\n  ElementType\n>;\n\nexport type HvTypographyProps<C extends React.ElementType = \"p\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the Typography. */\n      variant?: HvTypographyVariants | HvTypographyLegacyVariants;\n      /** If `true` the typography will display the look of a link. */\n      link?: boolean;\n      /** If `true` the typography will display the look of a disabled state. */\n      disabled?: boolean;\n      /** If `true`, the text will have a bottom margin. */\n      paragraph?: boolean;\n      /**\n       * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.\n       *\n       * Note that text overflow can only happen with block or inline-block level elements\n       * (the element needs to have a width in order to overflow).\n       */\n      noWrap?: boolean;\n      /** A Jss Object used to override or extend the styles applied to the component. */\n      classes?: HvTypographyClasses;\n    }\n  >;\n\n/**\n * Typography component is used to render text and paragraphs within an interface.\n */\nexport const HvTypography: <C extends React.ElementType = \"p\">(\n  props: HvTypographyProps<C>\n) => React.ReactElement | null = forwardRef(\n  <C extends React.ElementType = \"p\">(\n    props: HvTypographyProps<C>,\n    ref: PolymorphicRef<C>\n  ) => {\n    const {\n      className,\n      component: ComponentProp,\n      classes: classesProp,\n      variant: variantProp = \"body\",\n      link = false,\n      noWrap = false,\n      paragraph = false,\n      disabled = false,\n      ...others\n    } = useDefaultProps(\"HvTypography\", props);\n    const { classes, cx } = useClasses(classesProp);\n    const { activeTheme } = useTheme();\n\n    const variant = mapVariant(variantProp, activeTheme?.name);\n\n    const Component =\n      ComponentProp || (paragraph && \"p\") || HvTypographyMap[variant] || \"span\";\n\n    return (\n      <Component\n        ref={ref}\n        className={cx(\n          classes.root,\n          classes[variant],\n          {\n            [classes.isLink]: link,\n            [classes.noWrap]: noWrap,\n            [classes.disabled]: disabled,\n          },\n          className\n        )}\n        disabled={disabled}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;AAiBA,MAAM,kBAAkB;AAAA,EACtB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA;AAAA,EAEV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,UAAU;AAAA,EACV,cAAc;AAAA,EACd,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,cAAc;AAChB;AAgCO,MAAM,eAEoB;AAAA,EAC/B,CACE,OACA,QACG;AACG,UAAA;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,SAAS;AAAA,MACT,SAAS,cAAc;AAAA,MACvB,OAAO;AAAA,MACP,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,GAAG;AAAA,IAAA,IACD,gBAAgB,gBAAgB,KAAK;AACzC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,UAAA,EAAE,gBAAgB;AAExB,UAAM,UAAU,WAAW,aAAa,aAAa,IAAI;AAEzD,UAAM,YACJ,iBAAkB,aAAa,OAAQ,gBAAgB,OAAO,KAAK;AAGnE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,QAAQ,OAAO;AAAA,UACf;AAAA,YACE,CAAC,QAAQ,MAAM,GAAG;AAAA,YAClB,CAAC,QAAQ,MAAM,GAAG;AAAA,YAClB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACtB;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
+{"version":3,"file":"Typography.js","sources":["../../../src/Typography/Typography.tsx"],"sourcesContent":["import { ElementType, forwardRef } from \"react\";\n\nimport { PolymorphicComponentRef, PolymorphicRef } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport {\n  HvTypographyLegacyVariants,\n  HvTypographyVariants,\n  mapVariant,\n} from \"./utils\";\nimport { staticClasses, useClasses } from \"./Typography.styles\";\n\nexport { staticClasses as typographyClasses };\n\nexport type HvTypographyClasses = ExtractNames<typeof useClasses>;\n\nconst HvTypographyMap = {\n  display: \"h1\",\n  title1: \"h1\",\n  title2: \"h2\",\n  title3: \"h3\",\n  title4: \"h4\",\n  body: \"p\",\n  label: \"span\",\n  caption1: \"p\",\n  caption2: \"p\",\n  // LEGACY\n  \"5xlTitle\": \"h1\",\n  \"4xlTitle\": \"h1\",\n  \"3xlTitle\": \"h1\",\n  xxlTitle: \"h1\",\n  xlTitle: \"h1\",\n  lTitle: \"h2\",\n  mTitle: \"h3\",\n  sTitle: \"h4\",\n  xsTitle: \"h5\",\n  xxsTitle: \"h6\",\n  sectionTitle: \"p\",\n  highlightText: \"p\",\n  normalText: \"p\",\n  placeholderText: \"p\",\n  link: \"p\",\n  disabledText: \"p\",\n  selectedNavText: \"p\",\n  vizText: \"p\",\n  vizTextDisabled: \"p\",\n  xsInlineLink: \"p\",\n} satisfies Record<\n  HvTypographyVariants | HvTypographyLegacyVariants,\n  ElementType\n>;\n\nexport type HvTypographyProps<C extends React.ElementType = \"p\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the Typography. */\n      variant?: HvTypographyVariants | HvTypographyLegacyVariants;\n      /** If `true` the typography will display the look of a link. */\n      link?: boolean;\n      /** If `true` the typography will display the look of a disabled state. */\n      disabled?: boolean;\n      /**\n       * If `true`, the typography will render a \"p\" element\n       * @deprecated use `component=\"p\"` instead\n       * */\n      paragraph?: boolean;\n      /**\n       * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.\n       *\n       * Note that text overflow can only happen with block or inline-block level elements\n       * (the element needs to have a width in order to overflow).\n       */\n      noWrap?: boolean;\n      /** A Jss Object used to override or extend the styles applied to the component. */\n      classes?: HvTypographyClasses;\n    }\n  >;\n\n/**\n * Typography component is used to render text and paragraphs within an interface.\n */\nexport const HvTypography: <C extends React.ElementType = \"p\">(\n  props: HvTypographyProps<C>\n) => React.ReactElement | null = forwardRef(\n  <C extends React.ElementType = \"p\">(\n    props: HvTypographyProps<C>,\n    ref: PolymorphicRef<C>\n  ) => {\n    const {\n      className,\n      component: ComponentProp,\n      classes: classesProp,\n      variant: variantProp = \"body\",\n      link = false,\n      noWrap = false,\n      paragraph = false,\n      disabled = false,\n      ...others\n    } = useDefaultProps(\"HvTypography\", props);\n    const { classes, cx } = useClasses(classesProp);\n    const { activeTheme } = useTheme();\n\n    const variant = mapVariant(variantProp, activeTheme?.name);\n\n    const Component =\n      ComponentProp || (paragraph && \"p\") || HvTypographyMap[variant] || \"span\";\n\n    return (\n      <Component\n        ref={ref}\n        className={cx(\n          classes.root,\n          classes[variant],\n          {\n            [classes.isLink]: link,\n            [classes.noWrap]: noWrap,\n            [classes.disabled]: disabled,\n          },\n          className\n        )}\n        disabled={disabled}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;AAiBA,MAAM,kBAAkB;AAAA,EACtB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA;AAAA,EAEV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,UAAU;AAAA,EACV,cAAc;AAAA,EACd,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,cAAc;AAChB;AAmCO,MAAM,eAEoB;AAAA,EAC/B,CACE,OACA,QACG;AACG,UAAA;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,SAAS;AAAA,MACT,SAAS,cAAc;AAAA,MACvB,OAAO;AAAA,MACP,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,GAAG;AAAA,IAAA,IACD,gBAAgB,gBAAgB,KAAK;AACzC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,UAAA,EAAE,gBAAgB;AAExB,UAAM,UAAU,WAAW,aAAa,aAAa,IAAI;AAEzD,UAAM,YACJ,iBAAkB,aAAa,OAAQ,gBAAgB,OAAO,KAAK;AAGnE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,QAAQ,OAAO;AAAA,UACf;AAAA,YACE,CAAC,QAAQ,MAAM,GAAG;AAAA,YAClB,CAAC,QAAQ,MAAM,GAAG;AAAA,YAClB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACtB;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}

package/dist/esm/Typography/Typography.styles.js

@@ -8,6 +8,7 @@ const { useClasses, staticClasses } = createClasses("HvTypography", {
     color: theme.colors.secondary_60
   },
   isLink: {
+    cursor: "pointer",
     color: theme.colors.primary,
     textDecoration: "underline"
   },

package/dist/esm/Typography/Typography.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.styles.js","sources":["../../../src/Typography/Typography.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvTypography\", {\n  root: {\n    fontFamily: theme.fontFamily.body,\n  },\n  disabled: {\n    color: theme.colors.secondary_60,\n  },\n  isLink: {\n    color: theme.colors.primary,\n    textDecoration: \"underline\",\n  },\n  noWrap: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  // variants\n  display: { ...theme.typography.display },\n  title1: { ...theme.typography.title1 },\n  title2: { ...theme.typography.title2 },\n  title3: { ...theme.typography.title3 },\n  title4: { ...theme.typography.title4 },\n  body: { ...theme.typography.body },\n  label: { ...theme.typography.label },\n  caption1: { ...theme.typography.caption1 },\n  caption2: { ...theme.typography.caption2 },\n  // legacy variants\n  \"5xlTitle\": { ...theme.typography[\"5xlTitle\"] },\n  \"4xlTitle\": { ...theme.typography[\"4xlTitle\"] },\n  // @ts-ignore non-existent variant\n  \"3xlTitle\": { ...theme.typography[\"3xlTitle\"] },\n  xxlTitle: { ...theme.typography.xxlTitle },\n  xlTitle: {},\n  lTitle: { ...theme.typography.lTitle },\n  mTitle: {},\n  sTitle: { ...theme.typography.sTitle },\n  xsTitle: {},\n  xxsTitle: { ...theme.typography.xxsTitle },\n  sectionTitle: {\n    ...theme.typography.sectionTitle,\n    textTransform: \"uppercase\",\n  },\n  highlightText: {},\n  normalText: {},\n  placeholderText: { ...theme.typography.placeholderText },\n  link: {\n    ...theme.typography.link,\n    cursor: \"pointer\",\n    textDecoration: \"underline\",\n  },\n  disabledText: { ...theme.typography.disabledText },\n  selectedNavText: { ...theme.typography.selectedNavText },\n  vizText: {},\n  vizTextDisabled: { ...theme.typography.vizTextDisabled },\n  xsInlineLink: { ...theme.typography.xsInlineLink },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,YAAY,kBAAkB,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,YAAY,MAAM,WAAW;AAAA,EAC/B;AAAA,EACA,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,IACN,OAAO,MAAM,OAAO;AAAA,IACpB,gBAAgB;AAAA,EAClB;AAAA,EACA,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA;AAAA,EAEA,SAAS,EAAE,GAAG,MAAM,WAAW,QAAQ;AAAA,EACvC,QAAQ,EAAE,GAAG,MAAM,WAAW,OAAO;AAAA,EACrC,QAAQ,EAAE,GAAG,MAAM,WAAW,OAAO;AAAA,EACrC,QAAQ,EAAE,GAAG,MAAM,WAAW,OAAO;AAAA,EACrC,QAAQ,EAAE,GAAG,MAAM,WAAW,OAAO;AAAA,EACrC,MAAM,EAAE,GAAG,MAAM,WAAW,KAAK;AAAA,EACjC,OAAO,EAAE,GAAG,MAAM,WAAW,MAAM;AAAA,EACnC,UAAU,EAAE,GAAG,MAAM,WAAW,SAAS;AAAA,EACzC,UAAU,EAAE,GAAG,MAAM,WAAW,SAAS;AAAA;AAAA,EAEzC,YAAY,EAAE,GAAG,MAAM,WAAW,UAAU,EAAE;AAAA,EAC9C,YAAY,EAAE,GAAG,MAAM,WAAW,UAAU,EAAE;AAAA;AAAA,EAE9C,YAAY,EAAE,GAAG,MAAM,WAAW,UAAU,EAAE;AAAA,EAC9C,UAAU,EAAE,GAAG,MAAM,WAAW,SAAS;AAAA,EACzC,SAAS,CAAC;AAAA,EACV,QAAQ,EAAE,GAAG,MAAM,WAAW,OAAO;AAAA,EACrC,QAAQ,CAAC;AAAA,EACT,QAAQ,EAAE,GAAG,MAAM,WAAW,OAAO;AAAA,EACrC,SAAS,CAAC;AAAA,EACV,UAAU,EAAE,GAAG,MAAM,WAAW,SAAS;AAAA,EACzC,cAAc;AAAA,IACZ,GAAG,MAAM,WAAW;AAAA,IACpB,eAAe;AAAA,EACjB;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,YAAY,CAAC;AAAA,EACb,iBAAiB,EAAE,GAAG,MAAM,WAAW,gBAAgB;AAAA,EACvD,MAAM;AAAA,IACJ,GAAG,MAAM,WAAW;AAAA,IACpB,QAAQ;AAAA,IACR,gBAAgB;AAAA,EAClB;AAAA,EACA,cAAc,EAAE,GAAG,MAAM,WAAW,aAAa;AAAA,EACjD,iBAAiB,EAAE,GAAG,MAAM,WAAW,gBAAgB;AAAA,EACvD,SAAS,CAAC;AAAA,EACV,iBAAiB,EAAE,GAAG,MAAM,WAAW,gBAAgB;AAAA,EACvD,cAAc,EAAE,GAAG,MAAM,WAAW,aAAa;AACnD,CAAC;"}
+{"version":3,"file":"Typography.styles.js","sources":["../../../src/Typography/Typography.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvTypography\", {\n  root: {\n    fontFamily: theme.fontFamily.body,\n  },\n  disabled: {\n    color: theme.colors.secondary_60,\n  },\n  isLink: {\n    cursor: \"pointer\",\n    color: theme.colors.primary,\n    textDecoration: \"underline\",\n  },\n  noWrap: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  // variants\n  display: { ...theme.typography.display },\n  title1: { ...theme.typography.title1 },\n  title2: { ...theme.typography.title2 },\n  title3: { ...theme.typography.title3 },\n  title4: { ...theme.typography.title4 },\n  body: { ...theme.typography.body },\n  label: { ...theme.typography.label },\n  caption1: { ...theme.typography.caption1 },\n  caption2: { ...theme.typography.caption2 },\n  // legacy variants\n  \"5xlTitle\": { ...theme.typography[\"5xlTitle\"] },\n  \"4xlTitle\": { ...theme.typography[\"4xlTitle\"] },\n  // @ts-ignore non-existent variant\n  \"3xlTitle\": { ...theme.typography[\"3xlTitle\"] },\n  xxlTitle: { ...theme.typography.xxlTitle },\n  xlTitle: {},\n  lTitle: { ...theme.typography.lTitle },\n  mTitle: {},\n  sTitle: { ...theme.typography.sTitle },\n  xsTitle: {},\n  xxsTitle: { ...theme.typography.xxsTitle },\n  sectionTitle: {\n    ...theme.typography.sectionTitle,\n    textTransform: \"uppercase\",\n  },\n  highlightText: {},\n  normalText: {},\n  placeholderText: { ...theme.typography.placeholderText },\n  link: {\n    ...theme.typography.link,\n    cursor: \"pointer\",\n    textDecoration: \"underline\",\n  },\n  disabledText: { ...theme.typography.disabledText },\n  selectedNavText: { ...theme.typography.selectedNavText },\n  vizText: {},\n  vizTextDisabled: { ...theme.typography.vizTextDisabled },\n  xsInlineLink: { ...theme.typography.xsInlineLink },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,YAAY,kBAAkB,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,YAAY,MAAM,WAAW;AAAA,EAC/B;AAAA,EACA,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,gBAAgB;AAAA,EAClB;AAAA,EACA,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA;AAAA,EAEA,SAAS,EAAE,GAAG,MAAM,WAAW,QAAQ;AAAA,EACvC,QAAQ,EAAE,GAAG,MAAM,WAAW,OAAO;AAAA,EACrC,QAAQ,EAAE,GAAG,MAAM,WAAW,OAAO;AAAA,EACrC,QAAQ,EAAE,GAAG,MAAM,WAAW,OAAO;AAAA,EACrC,QAAQ,EAAE,GAAG,MAAM,WAAW,OAAO;AAAA,EACrC,MAAM,EAAE,GAAG,MAAM,WAAW,KAAK;AAAA,EACjC,OAAO,EAAE,GAAG,MAAM,WAAW,MAAM;AAAA,EACnC,UAAU,EAAE,GAAG,MAAM,WAAW,SAAS;AAAA,EACzC,UAAU,EAAE,GAAG,MAAM,WAAW,SAAS;AAAA;AAAA,EAEzC,YAAY,EAAE,GAAG,MAAM,WAAW,UAAU,EAAE;AAAA,EAC9C,YAAY,EAAE,GAAG,MAAM,WAAW,UAAU,EAAE;AAAA;AAAA,EAE9C,YAAY,EAAE,GAAG,MAAM,WAAW,UAAU,EAAE;AAAA,EAC9C,UAAU,EAAE,GAAG,MAAM,WAAW,SAAS;AAAA,EACzC,SAAS,CAAC;AAAA,EACV,QAAQ,EAAE,GAAG,MAAM,WAAW,OAAO;AAAA,EACrC,QAAQ,CAAC;AAAA,EACT,QAAQ,EAAE,GAAG,MAAM,WAAW,OAAO;AAAA,EACrC,SAAS,CAAC;AAAA,EACV,UAAU,EAAE,GAAG,MAAM,WAAW,SAAS;AAAA,EACzC,cAAc;AAAA,IACZ,GAAG,MAAM,WAAW;AAAA,IACpB,eAAe;AAAA,EACjB;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,YAAY,CAAC;AAAA,EACb,iBAAiB,EAAE,GAAG,MAAM,WAAW,gBAAgB;AAAA,EACvD,MAAM;AAAA,IACJ,GAAG,MAAM,WAAW;AAAA,IACpB,QAAQ;AAAA,IACR,gBAAgB;AAAA,EAClB;AAAA,EACA,cAAc,EAAE,GAAG,MAAM,WAAW,aAAa;AAAA,EACjD,iBAAiB,EAAE,GAAG,MAAM,WAAW,gBAAgB;AAAA,EACvD,SAAS,CAAC;AAAA,EACV,iBAAiB,EAAE,GAAG,MAAM,WAAW,gBAAgB;AAAA,EACvD,cAAc,EAAE,GAAG,MAAM,WAAW,aAAa;AACnD,CAAC;"}

package/dist/types/index.d.ts

@@ -6376,7 +6376,7 @@ export declare interface HvTabsProps extends Omit<TabsProps, "onChange"> {
  *
  * It leverages the Chip component from Material UI
  */
-export declare const HvTag: (props: HvTagProps) => JSX_2.Element;
+export declare const HvTag: React_2.ForwardRefExoticComponent<Omit<HvTagProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare type HvTagClasses = ExtractNames<typeof useClasses_107>;
 
@@ -6920,7 +6920,10 @@ export declare type HvTypographyProps<C extends React.ElementType = "p"> = Polym
     link?: boolean;
     /** If `true` the typography will display the look of a disabled state. */
     disabled?: boolean;
-    /** If `true`, the text will have a bottom margin. */
+    /**
+     * If `true`, the typography will render a "p" element
+     * @deprecated use `component="p"` instead
+     * */
     paragraph?: boolean;
     /**
      * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.44.2",
+  "version": "5.44.4",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -33,7 +33,7 @@
     "@emotion/css": "^11.11.2",
     "@emotion/serialize": "^1.1.2",
     "@emotion/utils": "^1.2.1",
-    "@hitachivantara/uikit-react-icons": "^5.7.14",
+    "@hitachivantara/uikit-react-icons": "^5.8.0",
     "@hitachivantara/uikit-react-shared": "^5.1.26",
     "@hitachivantara/uikit-styles": "^5.17.2",
     "@internationalized/date": "^3.2.0",
@@ -63,7 +63,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "8bfd5f2420d58ddc196ab2b6e1a1474c4c2d9831",
+  "gitHead": "a136a3abf840bf79f41019eab7b48ee531f39c05",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {