@hitachivantara/uikit-react-core 4.4.4 → 4.4.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -15,8 +15,6 @@ require("core-js/modules/es.object.to-string.js");
15
15
  require("core-js/modules/web.dom-collections.for-each.js");
16
16
  require("core-js/modules/es.array.find.js");
17
17
  require("core-js/modules/es.array.find-index.js");
18
- require("core-js/modules/es.array.flat.js");
19
- require("core-js/modules/es.array.unscopables.flat.js");
20
18
  require("core-js/modules/es.array.filter.js");
21
19
  var _react = _interopRequireWildcard(require("react"));
22
20
  var _clsx = _interopRequireDefault(require("clsx"));
@@ -40,7 +38,6 @@ var getExistingFiltersById = function getExistingFiltersById(idx, filterValues,
40
38
  return total;
41
39
  };
42
40
  var Counter = function Counter(_ref) {
43
- var _appliedFilters$flat;
44
41
  var className = _ref.className,
45
42
  id = _ref.id;
46
43
  var classes = (0, _styles.default)();
@@ -57,7 +54,7 @@ var Counter = function Counter(_ref) {
57
54
  return option.id === id;
58
55
  });
59
56
  var groupsCounter = 0;
60
- appliedFilters === null || appliedFilters === void 0 ? void 0 : (_appliedFilters$flat = appliedFilters.flat()) === null || _appliedFilters$flat === void 0 ? void 0 : _appliedFilters$flat.filter(function (elem) {
57
+ appliedFilters === null || appliedFilters === void 0 ? void 0 : appliedFilters.filter(function (elem) {
61
58
  return elem !== undefined;
62
59
  }).forEach(function (fg, i) {
63
60
  groupsCounter += getExistingFiltersById(i, filterValues, filterOptions);
@@ -1 +1 @@
1
- {"version":3,"file":"Counter.js","names":["getExistingFiltersById","idx","filterValues","filterOptions","total","forEach","fv","data","find","f","id","Counter","className","classes","useStyles","useContext","FilterGroupContext","appliedFilters","options","option","optionIdx","findIndex","groupsCounter","flat","filter","elem","undefined","fg","i","partialCounter","totalCounter","reduce","acc","length","clsx","root","propTypes","PropTypes","string"],"sources":["../../../src/FilterGroup/Counter/Counter.js"],"sourcesContent":["import React, { useContext } from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { FilterGroupContext } from \"../FilterGroupContext\";\nimport useStyles from \"./styles\";\n\nconst getExistingFiltersById = (idx, filterValues, filterOptions) => {\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\nconst Counter = ({ className, id }) => {\n const classes = useStyles();\n const { filterOptions, filterValues = [], appliedFilters = [] } = useContext(FilterGroupContext);\n\n const options = id ? [filterOptions.find((option) => option.id === id)] : filterOptions;\n const optionIdx = filterOptions.findIndex((option) => option.id === id);\n\n let groupsCounter = 0;\n appliedFilters\n ?.flat()\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 const totalCounter = options.reduce((acc, option) => acc + option.data.length, 0);\n\n return (\n <div className={clsx(classes.root, className)}>\n {partialCounter > 0 ? <b>{partialCounter}</b> : partialCounter}\n {` / ${totalCounter}`}\n </div>\n );\n};\n\nCounter.propTypes = {\n className: PropTypes.string,\n id: PropTypes.string,\n};\n\nexport default Counter;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAiC;AAAA;AAAA;AAEjC,IAAMA,sBAAsB,GAAG,SAAzBA,sBAAsB,CAAIC,GAAG,EAAEC,YAAY,EAAEC,aAAa,EAAK;EAAA;EACnE,IAAIC,KAAK,GAAG,CAAC;EACb,qBAAAF,YAAY,CAACD,GAAG,CAAC,sDAAjB,kBAAmBI,OAAO,CAAC,UAACC,EAAE,EAAK;IAAA;IACjC,0BAAIH,aAAa,CAACF,GAAG,CAAC,+CAAlB,mBAAoBM,IAAI,CAACC,IAAI,CAAC,UAACC,CAAC;MAAA,OAAKA,CAAC,CAACC,EAAE,KAAKJ,EAAE;IAAA,EAAC,EAAE;MACrDF,KAAK,IAAI,CAAC;IACZ;EACF,CAAC,CAAC;EACF,OAAOA,KAAK;AACd,CAAC;AAED,IAAMO,OAAO,GAAG,SAAVA,OAAO,OAA0B;EAAA;EAAA,IAApBC,SAAS,QAATA,SAAS;IAAEF,EAAE,QAAFA,EAAE;EAC9B,IAAMG,OAAO,GAAG,IAAAC,eAAS,GAAE;EAC3B,kBAAkE,IAAAC,iBAAU,EAACC,sCAAkB,CAAC;IAAxFb,aAAa,eAAbA,aAAa;IAAA,oCAAED,YAAY;IAAZA,YAAY,sCAAG,EAAE;IAAA,oCAAEe,cAAc;IAAdA,cAAc,sCAAG,EAAE;EAE7D,IAAMC,OAAO,GAAGR,EAAE,GAAG,CAACP,aAAa,CAACK,IAAI,CAAC,UAACW,MAAM;IAAA,OAAKA,MAAM,CAACT,EAAE,KAAKA,EAAE;EAAA,EAAC,CAAC,GAAGP,aAAa;EACvF,IAAMiB,SAAS,GAAGjB,aAAa,CAACkB,SAAS,CAAC,UAACF,MAAM;IAAA,OAAKA,MAAM,CAACT,EAAE,KAAKA,EAAE;EAAA,EAAC;EAEvE,IAAIY,aAAa,GAAG,CAAC;EACrBL,cAAc,aAAdA,cAAc,+CAAdA,cAAc,CACVM,IAAI,EAAE,yDADV,qBAEIC,MAAM,CAAC,UAACC,IAAI;IAAA,OAAKA,IAAI,KAAKC,SAAS;EAAA,EAAC,CACrCrB,OAAO,CAAC,UAACsB,EAAE,EAAEC,CAAC,EAAK;IAClBN,aAAa,IAAItB,sBAAsB,CAAC4B,CAAC,EAAE1B,YAAY,EAAEC,aAAa,CAAC;EACzE,CAAC,CAAC;EAEJ,IAAM0B,cAAc,GAAGnB,EAAE,GACrBV,sBAAsB,CAACoB,SAAS,EAAElB,YAAY,EAAEC,aAAa,CAAC,IAAI,CAAC,GACnEmB,aAAa;EACjB,IAAMQ,YAAY,GAAGZ,OAAO,CAACa,MAAM,CAAC,UAACC,GAAG,EAAEb,MAAM;IAAA,OAAKa,GAAG,GAAGb,MAAM,CAACZ,IAAI,CAAC0B,MAAM;EAAA,GAAE,CAAC,CAAC;EAEjF,oBACE;IAAK,SAAS,EAAE,IAAAC,aAAI,EAACrB,OAAO,CAACsB,IAAI,EAAEvB,SAAS,CAAE;IAAA,WAC3CiB,cAAc,GAAG,CAAC,gBAAG;MAAA,UAAIA;IAAc,EAAK,GAAGA,cAAc,eACvDC,YAAY;EAAA,EACf;AAEV,CAAC;AAED,wCAAAnB,OAAO,CAACyB,SAAS,GAAG;EAClBxB,SAAS,EAAEyB,kBAAS,CAACC,MAAM;EAC3B5B,EAAE,EAAE2B,kBAAS,CAACC;AAChB,CAAC;AAAC,eAEa3B,OAAO;AAAA"}
1
+ {"version":3,"file":"Counter.js","names":["getExistingFiltersById","idx","filterValues","filterOptions","total","forEach","fv","data","find","f","id","Counter","className","classes","useStyles","useContext","FilterGroupContext","appliedFilters","options","option","optionIdx","findIndex","groupsCounter","filter","elem","undefined","fg","i","partialCounter","totalCounter","reduce","acc","length","clsx","root","propTypes","PropTypes","string"],"sources":["../../../src/FilterGroup/Counter/Counter.js"],"sourcesContent":["import React, { useContext } from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { FilterGroupContext } from \"../FilterGroupContext\";\nimport useStyles from \"./styles\";\n\nconst getExistingFiltersById = (idx, filterValues, filterOptions) => {\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\nconst Counter = ({ className, id }) => {\n const classes = useStyles();\n const { filterOptions, filterValues = [], appliedFilters = [] } = useContext(FilterGroupContext);\n\n const options = id ? [filterOptions.find((option) => option.id === id)] : 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 const totalCounter = options.reduce((acc, option) => acc + option.data.length, 0);\n\n return (\n <div className={clsx(classes.root, className)}>\n {partialCounter > 0 ? <b>{partialCounter}</b> : partialCounter}\n {` / ${totalCounter}`}\n </div>\n );\n};\n\nCounter.propTypes = {\n className: PropTypes.string,\n id: PropTypes.string,\n};\n\nexport default Counter;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAiC;AAAA;AAAA;AAEjC,IAAMA,sBAAsB,GAAG,SAAzBA,sBAAsB,CAAIC,GAAG,EAAEC,YAAY,EAAEC,aAAa,EAAK;EAAA;EACnE,IAAIC,KAAK,GAAG,CAAC;EACb,qBAAAF,YAAY,CAACD,GAAG,CAAC,sDAAjB,kBAAmBI,OAAO,CAAC,UAACC,EAAE,EAAK;IAAA;IACjC,0BAAIH,aAAa,CAACF,GAAG,CAAC,+CAAlB,mBAAoBM,IAAI,CAACC,IAAI,CAAC,UAACC,CAAC;MAAA,OAAKA,CAAC,CAACC,EAAE,KAAKJ,EAAE;IAAA,EAAC,EAAE;MACrDF,KAAK,IAAI,CAAC;IACZ;EACF,CAAC,CAAC;EACF,OAAOA,KAAK;AACd,CAAC;AAED,IAAMO,OAAO,GAAG,SAAVA,OAAO,OAA0B;EAAA,IAApBC,SAAS,QAATA,SAAS;IAAEF,EAAE,QAAFA,EAAE;EAC9B,IAAMG,OAAO,GAAG,IAAAC,eAAS,GAAE;EAC3B,kBAAkE,IAAAC,iBAAU,EAACC,sCAAkB,CAAC;IAAxFb,aAAa,eAAbA,aAAa;IAAA,oCAAED,YAAY;IAAZA,YAAY,sCAAG,EAAE;IAAA,oCAAEe,cAAc;IAAdA,cAAc,sCAAG,EAAE;EAE7D,IAAMC,OAAO,GAAGR,EAAE,GAAG,CAACP,aAAa,CAACK,IAAI,CAAC,UAACW,MAAM;IAAA,OAAKA,MAAM,CAACT,EAAE,KAAKA,EAAE;EAAA,EAAC,CAAC,GAAGP,aAAa;EACvF,IAAMiB,SAAS,GAAGjB,aAAa,CAACkB,SAAS,CAAC,UAACF,MAAM;IAAA,OAAKA,MAAM,CAACT,EAAE,KAAKA,EAAE;EAAA,EAAC;EAEvE,IAAIY,aAAa,GAAG,CAAC;EACrBL,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CACVM,MAAM,CAAC,UAACC,IAAI;IAAA,OAAKA,IAAI,KAAKC,SAAS;EAAA,EAAC,CACrCpB,OAAO,CAAC,UAACqB,EAAE,EAAEC,CAAC,EAAK;IAClBL,aAAa,IAAItB,sBAAsB,CAAC2B,CAAC,EAAEzB,YAAY,EAAEC,aAAa,CAAC;EACzE,CAAC,CAAC;EAEJ,IAAMyB,cAAc,GAAGlB,EAAE,GACrBV,sBAAsB,CAACoB,SAAS,EAAElB,YAAY,EAAEC,aAAa,CAAC,IAAI,CAAC,GACnEmB,aAAa;EACjB,IAAMO,YAAY,GAAGX,OAAO,CAACY,MAAM,CAAC,UAACC,GAAG,EAAEZ,MAAM;IAAA,OAAKY,GAAG,GAAGZ,MAAM,CAACZ,IAAI,CAACyB,MAAM;EAAA,GAAE,CAAC,CAAC;EAEjF,oBACE;IAAK,SAAS,EAAE,IAAAC,aAAI,EAACpB,OAAO,CAACqB,IAAI,EAAEtB,SAAS,CAAE;IAAA,WAC3CgB,cAAc,GAAG,CAAC,gBAAG;MAAA,UAAIA;IAAc,EAAK,GAAGA,cAAc,eACvDC,YAAY;EAAA,EACf;AAEV,CAAC;AAED,wCAAAlB,OAAO,CAACwB,SAAS,GAAG;EAClBvB,SAAS,EAAEwB,kBAAS,CAACC,MAAM;EAC3B3B,EAAE,EAAE0B,kBAAS,CAACC;AAChB,CAAC;AAAC,eAEa1B,OAAO;AAAA"}
@@ -64,10 +64,13 @@ var RightPanel = function RightPanel(_ref) {
64
64
  setFilterValues = _useContext.setFilterValues,
65
65
  activeGroup = _useContext.activeGroup;
66
66
  var activeGroupOptions = (0, _react.useMemo)(function () {
67
- return filterOptions[activeGroup].data.map(function (option) {
67
+ var _filterOptions$active;
68
+ return ((_filterOptions$active = filterOptions[activeGroup]) === null || _filterOptions$active === void 0 ? void 0 : _filterOptions$active.data.filter(function (option) {
69
+ return option.name.toLowerCase().includes(searchStr.toLowerCase());
70
+ }).map(function (option) {
68
71
  return option.id;
69
- });
70
- }, [filterOptions, activeGroup]);
72
+ })) || [];
73
+ }, [filterOptions, activeGroup, searchStr]);
71
74
  var activeFilterValues = (0, _react.useMemo)(function () {
72
75
  var _filterValues$activeG;
73
76
  return (_filterValues$activeG = filterValues[activeGroup]) === null || _filterValues$activeG === void 0 ? void 0 : _filterValues$activeG.filter(function (value) {
@@ -109,9 +112,20 @@ var RightPanel = function RightPanel(_ref) {
109
112
  };
110
113
  var handleSelectAll = (0, _react.useCallback)(function () {
111
114
  var newFilterValues = (0, _cloneDeep.default)(filterValues);
112
- newFilterValues[activeGroup] = anySelected ? [] : activeGroupOptions;
115
+ if (anySelected) {
116
+ if (searchStr !== "") {
117
+ var _filterValues$activeG3;
118
+ newFilterValues[activeGroup] = (_filterValues$activeG3 = filterValues[activeGroup]) === null || _filterValues$activeG3 === void 0 ? void 0 : _filterValues$activeG3.filter(function (value) {
119
+ return !activeGroupOptions.includes(value);
120
+ });
121
+ } else {
122
+ newFilterValues[activeGroup] = [];
123
+ }
124
+ } else {
125
+ newFilterValues[activeGroup] = [].concat((0, _toConsumableArray2.default)(filterValues[activeGroup]), (0, _toConsumableArray2.default)(activeGroupOptions));
126
+ }
113
127
  setFilterValues(newFilterValues);
114
- }, [activeGroup, activeGroupOptions, anySelected, filterValues, setFilterValues]);
128
+ }, [activeGroup, activeGroupOptions, anySelected, filterValues, setFilterValues, searchStr]);
115
129
 
116
130
  /**
117
131
  * Create selecteAll component.
@@ -1 +1 @@
1
- {"version":3,"file":"RightPanel.js","names":["RightPanel","id","className","labels","emptyElement","classes","useStyles","useState","searchStr","setSearchStr","allSelected","setAllSelected","anySelected","setAnySelected","useContext","FilterGroupContext","filterOptions","filterValues","setFilterValues","activeGroup","activeGroupOptions","useMemo","data","map","option","activeFilterValues","filter","value","includes","listValues","label","name","selected","isHidden","toLowerCase","indexOf","updateSelectAll","useCallback","nbrSelected","length","hasSelection","allSelect","useEffect","onChangeHandler","values","newFilterValues","i","v","handleSelectAll","cloneDeep","SelectAll","selectAll","multiSelectionConjunction","defaultLabel","selectAllContainer","setId","container","selection","clsx","root","search","searchBoxPlaceholder","event","str","list","propTypes","PropTypes","string","shape","node"],"sources":["../../../src/FilterGroup/RightPanel/RightPanel.js"],"sourcesContent":["import React, { useMemo, useContext, useState, useEffect, useCallback } from \"react\";\nimport PropTypes from \"prop-types\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport clsx from \"clsx\";\nimport { FilterGroupContext } from \"../FilterGroupContext\";\nimport useStyles from \"./styles\";\nimport { setId, HvTypography, HvList, HvInput, HvPanel, HvCheckBox } from \"../..\";\n\nconst RightPanel = ({ id, className, labels, emptyElement }) => {\n const classes = useStyles();\n const [searchStr, setSearchStr] = useState(\"\");\n const [allSelected, setAllSelected] = useState(false);\n const [anySelected, setAnySelected] = useState(false);\n\n const {\n filterOptions,\n filterValues = [],\n setFilterValues,\n activeGroup,\n } = useContext(FilterGroupContext);\n\n const activeGroupOptions = useMemo(\n () => filterOptions[activeGroup].data.map((option) => option.id),\n [filterOptions, activeGroup]\n );\n\n const activeFilterValues = useMemo(\n () => filterValues[activeGroup]?.filter((value) => activeGroupOptions.includes(value)),\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: option.name.toLowerCase().indexOf(searchStr.toLowerCase()) < 0,\n })),\n [filterOptions, filterValues, activeGroup, searchStr]\n );\n\n const updateSelectAll = useCallback(() => {\n const nbrSelected = activeFilterValues?.length;\n const hasSelection = nbrSelected > 0;\n const allSelect = nbrSelected === activeGroupOptions.length;\n\n setAnySelected(hasSelection);\n setAllSelected(hasSelection && allSelect);\n }, [activeFilterValues, activeGroupOptions]);\n\n useEffect(() => {\n updateSelectAll();\n }, [activeFilterValues, updateSelectAll]);\n\n useEffect(() => setSearchStr(\"\"), [activeGroup]);\n\n const onChangeHandler = (values) => {\n const newFilterValues = filterOptions.map((option, i) =>\n activeGroup === i\n ? values.filter((v) => v.selected).map((v) => v.id)\n : [...(filterValues[i] || [])]\n );\n setFilterValues(newFilterValues);\n };\n\n const handleSelectAll = useCallback(() => {\n const newFilterValues = cloneDeep(filterValues);\n newFilterValues[activeGroup] = anySelected ? [] : activeGroupOptions;\n\n setFilterValues(newFilterValues);\n }, [activeGroup, activeGroupOptions, anySelected, filterValues, setFilterValues]);\n\n /**\n * Create selecteAll component.\n *\n * @returns {*}\n */\n const SelectAll = useCallback(() => {\n const { selectAll, multiSelectionConjunction } = labels;\n const nbrSelected = activeFilterValues?.length;\n\n const defaultLabel = (\n <HvTypography component=\"span\">\n {nbrSelected > 0 ? (\n <>\n <b>{nbrSelected}</b>\n {` ${multiSelectionConjunction} ${activeGroupOptions.length}`}\n </>\n ) : (\n <>\n <b>{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 classes={{ container: classes.selection }}\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 classes.selectAll,\n classes.selectAllContainer,\n classes.selection,\n handleSelectAll,\n id,\n labels,\n ]);\n\n return (\n <HvPanel id={setId(id, \"rightPanel\")} className={clsx(className, classes.root)}>\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={(event, str) => setSearchStr(str)}\n />\n <SelectAll />\n <HvList\n key={activeGroup}\n id={setId(id, \"list\")}\n className={classes.list}\n values={listValues}\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\nRightPanel.propTypes = {\n id: PropTypes.string,\n className: PropTypes.string,\n labels: PropTypes.shape({\n searchBoxPlaceholder: PropTypes.string,\n selectAll: PropTypes.string,\n multiSelectionConjunction: PropTypes.string,\n }),\n emptyElement: PropTypes.node,\n};\n\nexport default RightPanel;\n"],"mappings":"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"}
1
+ {"version":3,"file":"RightPanel.js","names":["RightPanel","id","className","labels","emptyElement","classes","useStyles","useState","searchStr","setSearchStr","allSelected","setAllSelected","anySelected","setAnySelected","useContext","FilterGroupContext","filterOptions","filterValues","setFilterValues","activeGroup","activeGroupOptions","useMemo","data","filter","option","name","toLowerCase","includes","map","activeFilterValues","value","listValues","label","selected","isHidden","indexOf","updateSelectAll","useCallback","nbrSelected","length","hasSelection","allSelect","useEffect","onChangeHandler","values","newFilterValues","i","v","handleSelectAll","cloneDeep","SelectAll","selectAll","multiSelectionConjunction","defaultLabel","selectAllContainer","setId","container","selection","clsx","root","search","searchBoxPlaceholder","event","str","list","propTypes","PropTypes","string","shape","node"],"sources":["../../../src/FilterGroup/RightPanel/RightPanel.js"],"sourcesContent":["import React, { useMemo, useContext, useState, useEffect, useCallback } from \"react\";\nimport PropTypes from \"prop-types\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport clsx from \"clsx\";\nimport { FilterGroupContext } from \"../FilterGroupContext\";\nimport useStyles from \"./styles\";\nimport { setId, HvTypography, HvList, HvInput, HvPanel, HvCheckBox } from \"../..\";\n\nconst RightPanel = ({ id, className, labels, emptyElement }) => {\n const classes = useStyles();\n const [searchStr, setSearchStr] = useState(\"\");\n const [allSelected, setAllSelected] = useState(false);\n const [anySelected, setAnySelected] = useState(false);\n\n const {\n filterOptions,\n filterValues = [],\n setFilterValues,\n activeGroup,\n } = useContext(FilterGroupContext);\n\n const activeGroupOptions = useMemo(\n () =>\n filterOptions[activeGroup]?.data\n .filter((option) => option.name.toLowerCase().includes(searchStr.toLowerCase()))\n .map((option) => option.id) || [],\n [filterOptions, activeGroup, searchStr]\n );\n\n const activeFilterValues = useMemo(\n () => filterValues[activeGroup]?.filter((value) => activeGroupOptions.includes(value)),\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: option.name.toLowerCase().indexOf(searchStr.toLowerCase()) < 0,\n })),\n [filterOptions, filterValues, activeGroup, searchStr]\n );\n\n const updateSelectAll = useCallback(() => {\n const nbrSelected = activeFilterValues?.length;\n const hasSelection = nbrSelected > 0;\n const allSelect = nbrSelected === activeGroupOptions.length;\n\n setAnySelected(hasSelection);\n setAllSelected(hasSelection && allSelect);\n }, [activeFilterValues, activeGroupOptions]);\n\n useEffect(() => {\n updateSelectAll();\n }, [activeFilterValues, updateSelectAll]);\n\n useEffect(() => setSearchStr(\"\"), [activeGroup]);\n\n const onChangeHandler = (values) => {\n const newFilterValues = filterOptions.map((option, i) =>\n activeGroup === i\n ? values.filter((v) => v.selected).map((v) => v.id)\n : [...(filterValues[i] || [])]\n );\n setFilterValues(newFilterValues);\n };\n\n const handleSelectAll = useCallback(() => {\n const newFilterValues = cloneDeep(filterValues);\n\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] = [...filterValues[activeGroup], ...activeGroupOptions];\n }\n\n setFilterValues(newFilterValues);\n }, [activeGroup, activeGroupOptions, anySelected, filterValues, setFilterValues, searchStr]);\n\n /**\n * Create selecteAll component.\n *\n * @returns {*}\n */\n const SelectAll = useCallback(() => {\n const { selectAll, multiSelectionConjunction } = labels;\n const nbrSelected = activeFilterValues?.length;\n\n const defaultLabel = (\n <HvTypography component=\"span\">\n {nbrSelected > 0 ? (\n <>\n <b>{nbrSelected}</b>\n {` ${multiSelectionConjunction} ${activeGroupOptions.length}`}\n </>\n ) : (\n <>\n <b>{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 classes={{ container: classes.selection }}\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 classes.selectAll,\n classes.selectAllContainer,\n classes.selection,\n handleSelectAll,\n id,\n labels,\n ]);\n\n return (\n <HvPanel id={setId(id, \"rightPanel\")} className={clsx(className, classes.root)}>\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={(event, str) => setSearchStr(str)}\n />\n <SelectAll />\n <HvList\n key={activeGroup}\n id={setId(id, \"list\")}\n className={classes.list}\n values={listValues}\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\nRightPanel.propTypes = {\n id: PropTypes.string,\n className: PropTypes.string,\n labels: PropTypes.shape({\n searchBoxPlaceholder: PropTypes.string,\n selectAll: PropTypes.string,\n multiSelectionConjunction: PropTypes.string,\n }),\n emptyElement: PropTypes.node,\n};\n\nexport default RightPanel;\n"],"mappings":"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"}
@@ -53,7 +53,6 @@ var isParagraph = function isParagraph(children) {
53
53
  * This component generates a tooltip whenever the text is overflowed.
54
54
  */
55
55
  var HvOverflowTooltip = function HvOverflowTooltip(_ref) {
56
- var _ref$current;
57
56
  var id = _ref.id,
58
57
  className = _ref.className,
59
58
  classes = _ref.classes,
@@ -70,15 +69,26 @@ var HvOverflowTooltip = function HvOverflowTooltip(_ref) {
70
69
  },
71
70
  handleHeight: false
72
71
  }),
72
+ _useResizeDetector$he = _useResizeDetector.height,
73
+ height = _useResizeDetector$he === void 0 ? 0 : _useResizeDetector$he,
73
74
  _useResizeDetector$wi = _useResizeDetector.width,
74
75
  width = _useResizeDetector$wi === void 0 ? 0 : _useResizeDetector$wi,
75
76
  ref = _useResizeDetector.ref;
76
- var scrollWidth = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollWidth) || 0;
77
- // The difference should be higher than a pixel to be considered as overflowing
78
- var isOverflowing = scrollWidth - width >= 1;
79
77
  var isParag = (0, _react.useMemo)(function () {
80
78
  return paragraphOverflow && isParagraph(data.toString());
81
79
  }, [data, paragraphOverflow]);
80
+
81
+ // The difference should be higher than a pixel to be considered as overflowing
82
+ var isOverflowing = (0, _react.useMemo)(function () {
83
+ var _ref$current2;
84
+ if (isParag) {
85
+ var _ref$current;
86
+ var scrollHeight = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollHeight) || 0;
87
+ return scrollHeight - height >= 1;
88
+ }
89
+ var scrollWidth = ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.scrollWidth) || 0;
90
+ return scrollWidth - width >= 1;
91
+ }, [height, isParag, ref, width]);
82
92
  var content = (0, _react.useMemo)(function () {
83
93
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
84
94
  ref: ref,
@@ -1 +1 @@
1
- {"version":3,"file":"OverflowTooltip.js","names":["styles","createStyles","tooltipData","tooltipAnchor","whiteSpace","overflow","textOverflow","tooltipAnchorParagraph","display","isParagraph","children","test","HvOverflowTooltip","id","className","classes","data","open","paragraphOverflow","placement","tooltipsProps","useResizeDetector","refreshMode","refreshOptions","trailing","handleHeight","width","ref","scrollWidth","current","isOverflowing","isParag","useMemo","toString","content","clsx","propTypes","PropTypes","string","node","shape","root","isRequired","bool","oneOf","instanceOf","Object","withStyles","name","React","memo"],"sources":["../../src/OverflowTooltip/OverflowTooltip.js"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { withStyles, createStyles } from \"@mui/styles\";\n\nimport { HvTooltip, HvTypography } from \"..\";\n\nconst styles = createStyles({\n tooltipData: {},\n tooltipAnchor: {\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n },\n tooltipAnchorParagraph: {\n overflow: \"hidden\",\n display: \"-webkit-box\",\n \"-webkit-line-clamp\": 2,\n \"-webkit-box-orient\": \"vertical\",\n },\n});\n\nconst isParagraph = (children) => /\\s/.test(children);\n\n/**\n * This component generates a tooltip whenever the text is overflowed.\n */\nconst HvOverflowTooltip = ({\n id,\n className,\n classes,\n data,\n open,\n paragraphOverflow,\n placement = \"top-start\",\n tooltipsProps,\n}) => {\n const { width = 0, ref } = useResizeDetector({\n refreshMode: \"debounce\",\n refreshOptions: {\n trailing: true,\n },\n handleHeight: false,\n });\n const scrollWidth = ref.current?.scrollWidth || 0;\n // The difference should be higher than a pixel to be considered as overflowing\n const isOverflowing = scrollWidth - width >= 1;\n\n const isParag = useMemo(\n () => paragraphOverflow && isParagraph(data.toString()),\n [data, paragraphOverflow]\n );\n\n const content = useMemo(\n () => (\n <div\n ref={ref}\n className={clsx(className, {\n [classes.tooltipAnchor]: !isParag,\n [classes.tooltipAnchorParagraph]: isParag,\n })}\n >\n {data}\n </div>\n ),\n [className, classes.tooltipAnchor, classes.tooltipAnchorParagraph, data, isParag, ref]\n );\n\n return open || isOverflowing ? (\n <HvTooltip\n id={id}\n disableHoverListener={!isOverflowing}\n open={open}\n placement={placement}\n title={\n <HvTypography className={classes.tooltipData} variant=\"normalText\">\n {data}\n </HvTypography>\n }\n {...tooltipsProps}\n >\n {content}\n </HvTooltip>\n ) : (\n content\n );\n};\n\nHvOverflowTooltip.propTypes = {\n /**\n * Id to be applied to the tooltip.\n */\n id: PropTypes.string,\n /**\n * The node that will be rendered inside the tooltip.\n */\n data: PropTypes.node,\n /**\n * Class names to be applied.\n */\n className: PropTypes.string,\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the root of the component.\n */\n root: PropTypes.string,\n /**\n * Styles applied to the data container in the tooltip.\n */\n tooltipData: PropTypes.string,\n /**\n * Styles applied to the anchor of the tooltip.\n */\n tooltipAnchor: PropTypes.string,\n /**\n * Styles applied to the anchor of the when it is a paragraph.\n */\n tooltipAnchorParagraph: PropTypes.string,\n }).isRequired,\n /**\n * If `true` the overflow tooltip will always use the paragraph overflow style.\n */\n paragraphOverflow: PropTypes.bool,\n /**\n * Tooltip placement.\n */\n placement: PropTypes.oneOf([\n \"bottom-end\",\n \"bottom-start\",\n \"bottom\",\n \"left-end\",\n \"left-start\",\n \"left\",\n \"right-end\",\n \"right-start\",\n \"right\",\n \"top-end\",\n \"top-start\",\n \"top\",\n ]),\n /**\n * If true, the tooltip is shown.\n */\n open: PropTypes.bool,\n /**\n * Extra properties to add to the tooltip.\n */\n tooltipsProps: PropTypes.instanceOf(Object),\n};\n\nexport default withStyles(styles, {\n name: \"HvOverflowTooltip\",\n})(React.memo(HvOverflowTooltip));\n\nexport { HvOverflowTooltip as RawOverflowTooltip };\n"],"mappings":"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"}
1
+ {"version":3,"file":"OverflowTooltip.js","names":["styles","createStyles","tooltipData","tooltipAnchor","whiteSpace","overflow","textOverflow","tooltipAnchorParagraph","display","isParagraph","children","test","HvOverflowTooltip","id","className","classes","data","open","paragraphOverflow","placement","tooltipsProps","useResizeDetector","refreshMode","refreshOptions","trailing","handleHeight","height","width","ref","isParag","useMemo","toString","isOverflowing","scrollHeight","current","scrollWidth","content","clsx","propTypes","PropTypes","string","node","shape","root","isRequired","bool","oneOf","instanceOf","Object","withStyles","name","React","memo"],"sources":["../../src/OverflowTooltip/OverflowTooltip.js"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { withStyles, createStyles } from \"@mui/styles\";\n\nimport { HvTooltip, HvTypography } from \"..\";\n\nconst styles = createStyles({\n tooltipData: {},\n tooltipAnchor: {\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n },\n tooltipAnchorParagraph: {\n overflow: \"hidden\",\n display: \"-webkit-box\",\n \"-webkit-line-clamp\": 2,\n \"-webkit-box-orient\": \"vertical\",\n },\n});\n\nconst isParagraph = (children) => /\\s/.test(children);\n\n/**\n * This component generates a tooltip whenever the text is overflowed.\n */\nconst HvOverflowTooltip = ({\n id,\n className,\n classes,\n data,\n open,\n paragraphOverflow,\n placement = \"top-start\",\n tooltipsProps,\n}) => {\n const {\n height = 0,\n width = 0,\n ref,\n } = useResizeDetector({\n refreshMode: \"debounce\",\n refreshOptions: {\n trailing: true,\n },\n handleHeight: false,\n });\n\n const isParag = useMemo(\n () => paragraphOverflow && isParagraph(data.toString()),\n [data, paragraphOverflow]\n );\n\n // The difference should be higher than a pixel to be considered as overflowing\n const isOverflowing = useMemo(() => {\n if (isParag) {\n const scrollHeight = ref.current?.scrollHeight || 0;\n\n return scrollHeight - height >= 1;\n }\n\n const scrollWidth = ref.current?.scrollWidth || 0;\n\n return scrollWidth - width >= 1;\n }, [height, isParag, ref, width]);\n\n const content = useMemo(\n () => (\n <div\n ref={ref}\n className={clsx(className, {\n [classes.tooltipAnchor]: !isParag,\n [classes.tooltipAnchorParagraph]: isParag,\n })}\n >\n {data}\n </div>\n ),\n [className, classes.tooltipAnchor, classes.tooltipAnchorParagraph, data, isParag, ref]\n );\n\n return open || isOverflowing ? (\n <HvTooltip\n id={id}\n disableHoverListener={!isOverflowing}\n open={open}\n placement={placement}\n title={\n <HvTypography className={classes.tooltipData} variant=\"normalText\">\n {data}\n </HvTypography>\n }\n {...tooltipsProps}\n >\n {content}\n </HvTooltip>\n ) : (\n content\n );\n};\n\nHvOverflowTooltip.propTypes = {\n /**\n * Id to be applied to the tooltip.\n */\n id: PropTypes.string,\n /**\n * The node that will be rendered inside the tooltip.\n */\n data: PropTypes.node,\n /**\n * Class names to be applied.\n */\n className: PropTypes.string,\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the root of the component.\n */\n root: PropTypes.string,\n /**\n * Styles applied to the data container in the tooltip.\n */\n tooltipData: PropTypes.string,\n /**\n * Styles applied to the anchor of the tooltip.\n */\n tooltipAnchor: PropTypes.string,\n /**\n * Styles applied to the anchor of the when it is a paragraph.\n */\n tooltipAnchorParagraph: PropTypes.string,\n }).isRequired,\n /**\n * If `true` the overflow tooltip will always use the paragraph overflow style.\n */\n paragraphOverflow: PropTypes.bool,\n /**\n * Tooltip placement.\n */\n placement: PropTypes.oneOf([\n \"bottom-end\",\n \"bottom-start\",\n \"bottom\",\n \"left-end\",\n \"left-start\",\n \"left\",\n \"right-end\",\n \"right-start\",\n \"right\",\n \"top-end\",\n \"top-start\",\n \"top\",\n ]),\n /**\n * If true, the tooltip is shown.\n */\n open: PropTypes.bool,\n /**\n * Extra properties to add to the tooltip.\n */\n tooltipsProps: PropTypes.instanceOf(Object),\n};\n\nexport default withStyles(styles, {\n name: \"HvOverflowTooltip\",\n})(React.memo(HvOverflowTooltip));\n\nexport { HvOverflowTooltip as RawOverflowTooltip };\n"],"mappings":"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"}
@@ -2,8 +2,6 @@ import "core-js/modules/es.object.to-string.js";
2
2
  import "core-js/modules/web.dom-collections.for-each.js";
3
3
  import "core-js/modules/es.array.find.js";
4
4
  import "core-js/modules/es.array.find-index.js";
5
- import "core-js/modules/es.array.flat.js";
6
- import "core-js/modules/es.array.unscopables.flat.js";
7
5
  import "core-js/modules/es.array.filter.js";
8
6
  import React, { useContext } from "react";
9
7
  import clsx from "clsx";
@@ -26,7 +24,6 @@ var getExistingFiltersById = function getExistingFiltersById(idx, filterValues,
26
24
  return total;
27
25
  };
28
26
  var Counter = function Counter(_ref) {
29
- var _appliedFilters$flat;
30
27
  var className = _ref.className,
31
28
  id = _ref.id;
32
29
  var classes = useStyles();
@@ -43,7 +40,7 @@ var Counter = function Counter(_ref) {
43
40
  return option.id === id;
44
41
  });
45
42
  var groupsCounter = 0;
46
- appliedFilters === null || appliedFilters === void 0 ? void 0 : (_appliedFilters$flat = appliedFilters.flat()) === null || _appliedFilters$flat === void 0 ? void 0 : _appliedFilters$flat.filter(function (elem) {
43
+ appliedFilters === null || appliedFilters === void 0 ? void 0 : appliedFilters.filter(function (elem) {
47
44
  return elem !== undefined;
48
45
  }).forEach(function (fg, i) {
49
46
  groupsCounter += getExistingFiltersById(i, filterValues, filterOptions);
@@ -1 +1 @@
1
- {"version":3,"file":"Counter.js","names":["React","useContext","clsx","PropTypes","FilterGroupContext","useStyles","getExistingFiltersById","idx","filterValues","filterOptions","total","forEach","fv","data","find","f","id","Counter","className","classes","appliedFilters","options","option","optionIdx","findIndex","groupsCounter","flat","filter","elem","undefined","fg","i","partialCounter","totalCounter","reduce","acc","length","root","propTypes","string"],"sources":["../../../../src/FilterGroup/Counter/Counter.js"],"sourcesContent":["import React, { useContext } from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { FilterGroupContext } from \"../FilterGroupContext\";\nimport useStyles from \"./styles\";\n\nconst getExistingFiltersById = (idx, filterValues, filterOptions) => {\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\nconst Counter = ({ className, id }) => {\n const classes = useStyles();\n const { filterOptions, filterValues = [], appliedFilters = [] } = useContext(FilterGroupContext);\n\n const options = id ? [filterOptions.find((option) => option.id === id)] : filterOptions;\n const optionIdx = filterOptions.findIndex((option) => option.id === id);\n\n let groupsCounter = 0;\n appliedFilters\n ?.flat()\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 const totalCounter = options.reduce((acc, option) => acc + option.data.length, 0);\n\n return (\n <div className={clsx(classes.root, className)}>\n {partialCounter > 0 ? <b>{partialCounter}</b> : partialCounter}\n {` / ${totalCounter}`}\n </div>\n );\n};\n\nCounter.propTypes = {\n className: PropTypes.string,\n id: PropTypes.string,\n};\n\nexport default Counter;\n"],"mappings":";;;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,IAAI,MAAM,MAAM;AACvB,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,OAAOC,SAAS,MAAM,UAAU;AAAC;AAAA;AAEjC,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAsB,CAAIC,GAAG,EAAEC,YAAY,EAAEC,aAAa,EAAK;EAAA;EACnE,IAAIC,KAAK,GAAG,CAAC;EACb,qBAAAF,YAAY,CAACD,GAAG,CAAC,sDAAjB,kBAAmBI,OAAO,CAAC,UAACC,EAAE,EAAK;IAAA;IACjC,0BAAIH,aAAa,CAACF,GAAG,CAAC,+CAAlB,mBAAoBM,IAAI,CAACC,IAAI,CAAC,UAACC,CAAC;MAAA,OAAKA,CAAC,CAACC,EAAE,KAAKJ,EAAE;IAAA,EAAC,EAAE;MACrDF,KAAK,IAAI,CAAC;IACZ;EACF,CAAC,CAAC;EACF,OAAOA,KAAK;AACd,CAAC;AAED,IAAMO,OAAO,GAAG,SAAVA,OAAO,OAA0B;EAAA;EAAA,IAApBC,SAAS,QAATA,SAAS;IAAEF,EAAE,QAAFA,EAAE;EAC9B,IAAMG,OAAO,GAAGd,SAAS,EAAE;EAC3B,kBAAkEJ,UAAU,CAACG,kBAAkB,CAAC;IAAxFK,aAAa,eAAbA,aAAa;IAAA,oCAAED,YAAY;IAAZA,YAAY,sCAAG,EAAE;IAAA,oCAAEY,cAAc;IAAdA,cAAc,sCAAG,EAAE;EAE7D,IAAMC,OAAO,GAAGL,EAAE,GAAG,CAACP,aAAa,CAACK,IAAI,CAAC,UAACQ,MAAM;IAAA,OAAKA,MAAM,CAACN,EAAE,KAAKA,EAAE;EAAA,EAAC,CAAC,GAAGP,aAAa;EACvF,IAAMc,SAAS,GAAGd,aAAa,CAACe,SAAS,CAAC,UAACF,MAAM;IAAA,OAAKA,MAAM,CAACN,EAAE,KAAKA,EAAE;EAAA,EAAC;EAEvE,IAAIS,aAAa,GAAG,CAAC;EACrBL,cAAc,aAAdA,cAAc,+CAAdA,cAAc,CACVM,IAAI,EAAE,yDADV,qBAEIC,MAAM,CAAC,UAACC,IAAI;IAAA,OAAKA,IAAI,KAAKC,SAAS;EAAA,EAAC,CACrClB,OAAO,CAAC,UAACmB,EAAE,EAAEC,CAAC,EAAK;IAClBN,aAAa,IAAInB,sBAAsB,CAACyB,CAAC,EAAEvB,YAAY,EAAEC,aAAa,CAAC;EACzE,CAAC,CAAC;EAEJ,IAAMuB,cAAc,GAAGhB,EAAE,GACrBV,sBAAsB,CAACiB,SAAS,EAAEf,YAAY,EAAEC,aAAa,CAAC,IAAI,CAAC,GACnEgB,aAAa;EACjB,IAAMQ,YAAY,GAAGZ,OAAO,CAACa,MAAM,CAAC,UAACC,GAAG,EAAEb,MAAM;IAAA,OAAKa,GAAG,GAAGb,MAAM,CAACT,IAAI,CAACuB,MAAM;EAAA,GAAE,CAAC,CAAC;EAEjF,oBACE;IAAK,SAAS,EAAElC,IAAI,CAACiB,OAAO,CAACkB,IAAI,EAAEnB,SAAS,CAAE;IAAA,WAC3Cc,cAAc,GAAG,CAAC,gBAAG;MAAA,UAAIA;IAAc,EAAK,GAAGA,cAAc,eACvDC,YAAY;EAAA,EACf;AAEV,CAAC;AAED,wCAAAhB,OAAO,CAACqB,SAAS,GAAG;EAClBpB,SAAS,EAAEf,SAAS,CAACoC,MAAM;EAC3BvB,EAAE,EAAEb,SAAS,CAACoC;AAChB,CAAC;AAED,eAAetB,OAAO"}
1
+ {"version":3,"file":"Counter.js","names":["React","useContext","clsx","PropTypes","FilterGroupContext","useStyles","getExistingFiltersById","idx","filterValues","filterOptions","total","forEach","fv","data","find","f","id","Counter","className","classes","appliedFilters","options","option","optionIdx","findIndex","groupsCounter","filter","elem","undefined","fg","i","partialCounter","totalCounter","reduce","acc","length","root","propTypes","string"],"sources":["../../../../src/FilterGroup/Counter/Counter.js"],"sourcesContent":["import React, { useContext } from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { FilterGroupContext } from \"../FilterGroupContext\";\nimport useStyles from \"./styles\";\n\nconst getExistingFiltersById = (idx, filterValues, filterOptions) => {\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\nconst Counter = ({ className, id }) => {\n const classes = useStyles();\n const { filterOptions, filterValues = [], appliedFilters = [] } = useContext(FilterGroupContext);\n\n const options = id ? [filterOptions.find((option) => option.id === id)] : 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 const totalCounter = options.reduce((acc, option) => acc + option.data.length, 0);\n\n return (\n <div className={clsx(classes.root, className)}>\n {partialCounter > 0 ? <b>{partialCounter}</b> : partialCounter}\n {` / ${totalCounter}`}\n </div>\n );\n};\n\nCounter.propTypes = {\n className: PropTypes.string,\n id: PropTypes.string,\n};\n\nexport default Counter;\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,IAAI,MAAM,MAAM;AACvB,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,OAAOC,SAAS,MAAM,UAAU;AAAC;AAAA;AAEjC,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAsB,CAAIC,GAAG,EAAEC,YAAY,EAAEC,aAAa,EAAK;EAAA;EACnE,IAAIC,KAAK,GAAG,CAAC;EACb,qBAAAF,YAAY,CAACD,GAAG,CAAC,sDAAjB,kBAAmBI,OAAO,CAAC,UAACC,EAAE,EAAK;IAAA;IACjC,0BAAIH,aAAa,CAACF,GAAG,CAAC,+CAAlB,mBAAoBM,IAAI,CAACC,IAAI,CAAC,UAACC,CAAC;MAAA,OAAKA,CAAC,CAACC,EAAE,KAAKJ,EAAE;IAAA,EAAC,EAAE;MACrDF,KAAK,IAAI,CAAC;IACZ;EACF,CAAC,CAAC;EACF,OAAOA,KAAK;AACd,CAAC;AAED,IAAMO,OAAO,GAAG,SAAVA,OAAO,OAA0B;EAAA,IAApBC,SAAS,QAATA,SAAS;IAAEF,EAAE,QAAFA,EAAE;EAC9B,IAAMG,OAAO,GAAGd,SAAS,EAAE;EAC3B,kBAAkEJ,UAAU,CAACG,kBAAkB,CAAC;IAAxFK,aAAa,eAAbA,aAAa;IAAA,oCAAED,YAAY;IAAZA,YAAY,sCAAG,EAAE;IAAA,oCAAEY,cAAc;IAAdA,cAAc,sCAAG,EAAE;EAE7D,IAAMC,OAAO,GAAGL,EAAE,GAAG,CAACP,aAAa,CAACK,IAAI,CAAC,UAACQ,MAAM;IAAA,OAAKA,MAAM,CAACN,EAAE,KAAKA,EAAE;EAAA,EAAC,CAAC,GAAGP,aAAa;EACvF,IAAMc,SAAS,GAAGd,aAAa,CAACe,SAAS,CAAC,UAACF,MAAM;IAAA,OAAKA,MAAM,CAACN,EAAE,KAAKA,EAAE;EAAA,EAAC;EAEvE,IAAIS,aAAa,GAAG,CAAC;EACrBL,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CACVM,MAAM,CAAC,UAACC,IAAI;IAAA,OAAKA,IAAI,KAAKC,SAAS;EAAA,EAAC,CACrCjB,OAAO,CAAC,UAACkB,EAAE,EAAEC,CAAC,EAAK;IAClBL,aAAa,IAAInB,sBAAsB,CAACwB,CAAC,EAAEtB,YAAY,EAAEC,aAAa,CAAC;EACzE,CAAC,CAAC;EAEJ,IAAMsB,cAAc,GAAGf,EAAE,GACrBV,sBAAsB,CAACiB,SAAS,EAAEf,YAAY,EAAEC,aAAa,CAAC,IAAI,CAAC,GACnEgB,aAAa;EACjB,IAAMO,YAAY,GAAGX,OAAO,CAACY,MAAM,CAAC,UAACC,GAAG,EAAEZ,MAAM;IAAA,OAAKY,GAAG,GAAGZ,MAAM,CAACT,IAAI,CAACsB,MAAM;EAAA,GAAE,CAAC,CAAC;EAEjF,oBACE;IAAK,SAAS,EAAEjC,IAAI,CAACiB,OAAO,CAACiB,IAAI,EAAElB,SAAS,CAAE;IAAA,WAC3Ca,cAAc,GAAG,CAAC,gBAAG;MAAA,UAAIA;IAAc,EAAK,GAAGA,cAAc,eACvDC,YAAY;EAAA,EACf;AAEV,CAAC;AAED,wCAAAf,OAAO,CAACoB,SAAS,GAAG;EAClBnB,SAAS,EAAEf,SAAS,CAACmC,MAAM;EAC3BtB,EAAE,EAAEb,SAAS,CAACmC;AAChB,CAAC;AAED,eAAerB,OAAO"}
@@ -52,10 +52,13 @@ var RightPanel = function RightPanel(_ref) {
52
52
  setFilterValues = _useContext.setFilterValues,
53
53
  activeGroup = _useContext.activeGroup;
54
54
  var activeGroupOptions = useMemo(function () {
55
- return filterOptions[activeGroup].data.map(function (option) {
55
+ var _filterOptions$active;
56
+ return ((_filterOptions$active = filterOptions[activeGroup]) === null || _filterOptions$active === void 0 ? void 0 : _filterOptions$active.data.filter(function (option) {
57
+ return option.name.toLowerCase().includes(searchStr.toLowerCase());
58
+ }).map(function (option) {
56
59
  return option.id;
57
- });
58
- }, [filterOptions, activeGroup]);
60
+ })) || [];
61
+ }, [filterOptions, activeGroup, searchStr]);
59
62
  var activeFilterValues = useMemo(function () {
60
63
  var _filterValues$activeG;
61
64
  return (_filterValues$activeG = filterValues[activeGroup]) === null || _filterValues$activeG === void 0 ? void 0 : _filterValues$activeG.filter(function (value) {
@@ -97,9 +100,20 @@ var RightPanel = function RightPanel(_ref) {
97
100
  };
98
101
  var handleSelectAll = useCallback(function () {
99
102
  var newFilterValues = cloneDeep(filterValues);
100
- newFilterValues[activeGroup] = anySelected ? [] : activeGroupOptions;
103
+ if (anySelected) {
104
+ if (searchStr !== "") {
105
+ var _filterValues$activeG3;
106
+ newFilterValues[activeGroup] = (_filterValues$activeG3 = filterValues[activeGroup]) === null || _filterValues$activeG3 === void 0 ? void 0 : _filterValues$activeG3.filter(function (value) {
107
+ return !activeGroupOptions.includes(value);
108
+ });
109
+ } else {
110
+ newFilterValues[activeGroup] = [];
111
+ }
112
+ } else {
113
+ newFilterValues[activeGroup] = [].concat(_toConsumableArray(filterValues[activeGroup]), _toConsumableArray(activeGroupOptions));
114
+ }
101
115
  setFilterValues(newFilterValues);
102
- }, [activeGroup, activeGroupOptions, anySelected, filterValues, setFilterValues]);
116
+ }, [activeGroup, activeGroupOptions, anySelected, filterValues, setFilterValues, searchStr]);
103
117
 
104
118
  /**
105
119
  * Create selecteAll component.
@@ -1 +1 @@
1
- {"version":3,"file":"RightPanel.js","names":["React","useMemo","useContext","useState","useEffect","useCallback","PropTypes","cloneDeep","clsx","FilterGroupContext","useStyles","setId","HvTypography","HvList","HvInput","HvPanel","HvCheckBox","RightPanel","id","className","labels","emptyElement","classes","searchStr","setSearchStr","allSelected","setAllSelected","anySelected","setAnySelected","filterOptions","filterValues","setFilterValues","activeGroup","activeGroupOptions","data","map","option","activeFilterValues","filter","value","includes","listValues","label","name","selected","isHidden","toLowerCase","indexOf","updateSelectAll","nbrSelected","length","hasSelection","allSelect","onChangeHandler","values","newFilterValues","i","v","handleSelectAll","SelectAll","selectAll","multiSelectionConjunction","defaultLabel","selectAllContainer","container","selection","root","search","searchBoxPlaceholder","event","str","list","propTypes","string","shape","node"],"sources":["../../../../src/FilterGroup/RightPanel/RightPanel.js"],"sourcesContent":["import React, { useMemo, useContext, useState, useEffect, useCallback } from \"react\";\nimport PropTypes from \"prop-types\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport clsx from \"clsx\";\nimport { FilterGroupContext } from \"../FilterGroupContext\";\nimport useStyles from \"./styles\";\nimport { setId, HvTypography, HvList, HvInput, HvPanel, HvCheckBox } from \"../..\";\n\nconst RightPanel = ({ id, className, labels, emptyElement }) => {\n const classes = useStyles();\n const [searchStr, setSearchStr] = useState(\"\");\n const [allSelected, setAllSelected] = useState(false);\n const [anySelected, setAnySelected] = useState(false);\n\n const {\n filterOptions,\n filterValues = [],\n setFilterValues,\n activeGroup,\n } = useContext(FilterGroupContext);\n\n const activeGroupOptions = useMemo(\n () => filterOptions[activeGroup].data.map((option) => option.id),\n [filterOptions, activeGroup]\n );\n\n const activeFilterValues = useMemo(\n () => filterValues[activeGroup]?.filter((value) => activeGroupOptions.includes(value)),\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: option.name.toLowerCase().indexOf(searchStr.toLowerCase()) < 0,\n })),\n [filterOptions, filterValues, activeGroup, searchStr]\n );\n\n const updateSelectAll = useCallback(() => {\n const nbrSelected = activeFilterValues?.length;\n const hasSelection = nbrSelected > 0;\n const allSelect = nbrSelected === activeGroupOptions.length;\n\n setAnySelected(hasSelection);\n setAllSelected(hasSelection && allSelect);\n }, [activeFilterValues, activeGroupOptions]);\n\n useEffect(() => {\n updateSelectAll();\n }, [activeFilterValues, updateSelectAll]);\n\n useEffect(() => setSearchStr(\"\"), [activeGroup]);\n\n const onChangeHandler = (values) => {\n const newFilterValues = filterOptions.map((option, i) =>\n activeGroup === i\n ? values.filter((v) => v.selected).map((v) => v.id)\n : [...(filterValues[i] || [])]\n );\n setFilterValues(newFilterValues);\n };\n\n const handleSelectAll = useCallback(() => {\n const newFilterValues = cloneDeep(filterValues);\n newFilterValues[activeGroup] = anySelected ? [] : activeGroupOptions;\n\n setFilterValues(newFilterValues);\n }, [activeGroup, activeGroupOptions, anySelected, filterValues, setFilterValues]);\n\n /**\n * Create selecteAll component.\n *\n * @returns {*}\n */\n const SelectAll = useCallback(() => {\n const { selectAll, multiSelectionConjunction } = labels;\n const nbrSelected = activeFilterValues?.length;\n\n const defaultLabel = (\n <HvTypography component=\"span\">\n {nbrSelected > 0 ? (\n <>\n <b>{nbrSelected}</b>\n {` ${multiSelectionConjunction} ${activeGroupOptions.length}`}\n </>\n ) : (\n <>\n <b>{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 classes={{ container: classes.selection }}\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 classes.selectAll,\n classes.selectAllContainer,\n classes.selection,\n handleSelectAll,\n id,\n labels,\n ]);\n\n return (\n <HvPanel id={setId(id, \"rightPanel\")} className={clsx(className, classes.root)}>\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={(event, str) => setSearchStr(str)}\n />\n <SelectAll />\n <HvList\n key={activeGroup}\n id={setId(id, \"list\")}\n className={classes.list}\n values={listValues}\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\nRightPanel.propTypes = {\n id: PropTypes.string,\n className: PropTypes.string,\n labels: PropTypes.shape({\n searchBoxPlaceholder: PropTypes.string,\n selectAll: PropTypes.string,\n multiSelectionConjunction: PropTypes.string,\n }),\n emptyElement: PropTypes.node,\n};\n\nexport default RightPanel;\n"],"mappings":"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"}
1
+ {"version":3,"file":"RightPanel.js","names":["React","useMemo","useContext","useState","useEffect","useCallback","PropTypes","cloneDeep","clsx","FilterGroupContext","useStyles","setId","HvTypography","HvList","HvInput","HvPanel","HvCheckBox","RightPanel","id","className","labels","emptyElement","classes","searchStr","setSearchStr","allSelected","setAllSelected","anySelected","setAnySelected","filterOptions","filterValues","setFilterValues","activeGroup","activeGroupOptions","data","filter","option","name","toLowerCase","includes","map","activeFilterValues","value","listValues","label","selected","isHidden","indexOf","updateSelectAll","nbrSelected","length","hasSelection","allSelect","onChangeHandler","values","newFilterValues","i","v","handleSelectAll","SelectAll","selectAll","multiSelectionConjunction","defaultLabel","selectAllContainer","container","selection","root","search","searchBoxPlaceholder","event","str","list","propTypes","string","shape","node"],"sources":["../../../../src/FilterGroup/RightPanel/RightPanel.js"],"sourcesContent":["import React, { useMemo, useContext, useState, useEffect, useCallback } from \"react\";\nimport PropTypes from \"prop-types\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport clsx from \"clsx\";\nimport { FilterGroupContext } from \"../FilterGroupContext\";\nimport useStyles from \"./styles\";\nimport { setId, HvTypography, HvList, HvInput, HvPanel, HvCheckBox } from \"../..\";\n\nconst RightPanel = ({ id, className, labels, emptyElement }) => {\n const classes = useStyles();\n const [searchStr, setSearchStr] = useState(\"\");\n const [allSelected, setAllSelected] = useState(false);\n const [anySelected, setAnySelected] = useState(false);\n\n const {\n filterOptions,\n filterValues = [],\n setFilterValues,\n activeGroup,\n } = useContext(FilterGroupContext);\n\n const activeGroupOptions = useMemo(\n () =>\n filterOptions[activeGroup]?.data\n .filter((option) => option.name.toLowerCase().includes(searchStr.toLowerCase()))\n .map((option) => option.id) || [],\n [filterOptions, activeGroup, searchStr]\n );\n\n const activeFilterValues = useMemo(\n () => filterValues[activeGroup]?.filter((value) => activeGroupOptions.includes(value)),\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: option.name.toLowerCase().indexOf(searchStr.toLowerCase()) < 0,\n })),\n [filterOptions, filterValues, activeGroup, searchStr]\n );\n\n const updateSelectAll = useCallback(() => {\n const nbrSelected = activeFilterValues?.length;\n const hasSelection = nbrSelected > 0;\n const allSelect = nbrSelected === activeGroupOptions.length;\n\n setAnySelected(hasSelection);\n setAllSelected(hasSelection && allSelect);\n }, [activeFilterValues, activeGroupOptions]);\n\n useEffect(() => {\n updateSelectAll();\n }, [activeFilterValues, updateSelectAll]);\n\n useEffect(() => setSearchStr(\"\"), [activeGroup]);\n\n const onChangeHandler = (values) => {\n const newFilterValues = filterOptions.map((option, i) =>\n activeGroup === i\n ? values.filter((v) => v.selected).map((v) => v.id)\n : [...(filterValues[i] || [])]\n );\n setFilterValues(newFilterValues);\n };\n\n const handleSelectAll = useCallback(() => {\n const newFilterValues = cloneDeep(filterValues);\n\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] = [...filterValues[activeGroup], ...activeGroupOptions];\n }\n\n setFilterValues(newFilterValues);\n }, [activeGroup, activeGroupOptions, anySelected, filterValues, setFilterValues, searchStr]);\n\n /**\n * Create selecteAll component.\n *\n * @returns {*}\n */\n const SelectAll = useCallback(() => {\n const { selectAll, multiSelectionConjunction } = labels;\n const nbrSelected = activeFilterValues?.length;\n\n const defaultLabel = (\n <HvTypography component=\"span\">\n {nbrSelected > 0 ? (\n <>\n <b>{nbrSelected}</b>\n {` ${multiSelectionConjunction} ${activeGroupOptions.length}`}\n </>\n ) : (\n <>\n <b>{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 classes={{ container: classes.selection }}\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 classes.selectAll,\n classes.selectAllContainer,\n classes.selection,\n handleSelectAll,\n id,\n labels,\n ]);\n\n return (\n <HvPanel id={setId(id, \"rightPanel\")} className={clsx(className, classes.root)}>\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={(event, str) => setSearchStr(str)}\n />\n <SelectAll />\n <HvList\n key={activeGroup}\n id={setId(id, \"list\")}\n className={classes.list}\n values={listValues}\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\nRightPanel.propTypes = {\n id: PropTypes.string,\n className: PropTypes.string,\n labels: PropTypes.shape({\n searchBoxPlaceholder: PropTypes.string,\n selectAll: PropTypes.string,\n multiSelectionConjunction: PropTypes.string,\n }),\n emptyElement: PropTypes.node,\n};\n\nexport default RightPanel;\n"],"mappings":"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"}
@@ -39,7 +39,6 @@ var isParagraph = function isParagraph(children) {
39
39
  * This component generates a tooltip whenever the text is overflowed.
40
40
  */
41
41
  var HvOverflowTooltip = function HvOverflowTooltip(_ref) {
42
- var _ref$current;
43
42
  var id = _ref.id,
44
43
  className = _ref.className,
45
44
  classes = _ref.classes,
@@ -56,15 +55,26 @@ var HvOverflowTooltip = function HvOverflowTooltip(_ref) {
56
55
  },
57
56
  handleHeight: false
58
57
  }),
58
+ _useResizeDetector$he = _useResizeDetector.height,
59
+ height = _useResizeDetector$he === void 0 ? 0 : _useResizeDetector$he,
59
60
  _useResizeDetector$wi = _useResizeDetector.width,
60
61
  width = _useResizeDetector$wi === void 0 ? 0 : _useResizeDetector$wi,
61
62
  ref = _useResizeDetector.ref;
62
- var scrollWidth = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollWidth) || 0;
63
- // The difference should be higher than a pixel to be considered as overflowing
64
- var isOverflowing = scrollWidth - width >= 1;
65
63
  var isParag = useMemo(function () {
66
64
  return paragraphOverflow && isParagraph(data.toString());
67
65
  }, [data, paragraphOverflow]);
66
+
67
+ // The difference should be higher than a pixel to be considered as overflowing
68
+ var isOverflowing = useMemo(function () {
69
+ var _ref$current2;
70
+ if (isParag) {
71
+ var _ref$current;
72
+ var scrollHeight = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollHeight) || 0;
73
+ return scrollHeight - height >= 1;
74
+ }
75
+ var scrollWidth = ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.scrollWidth) || 0;
76
+ return scrollWidth - width >= 1;
77
+ }, [height, isParag, ref, width]);
68
78
  var content = useMemo(function () {
69
79
  return /*#__PURE__*/_jsx("div", {
70
80
  ref: ref,
@@ -1 +1 @@
1
- {"version":3,"file":"OverflowTooltip.js","names":["React","useMemo","clsx","PropTypes","useResizeDetector","withStyles","createStyles","HvTooltip","HvTypography","styles","tooltipData","tooltipAnchor","whiteSpace","overflow","textOverflow","tooltipAnchorParagraph","display","isParagraph","children","test","HvOverflowTooltip","id","className","classes","data","open","paragraphOverflow","placement","tooltipsProps","refreshMode","refreshOptions","trailing","handleHeight","width","ref","scrollWidth","current","isOverflowing","isParag","toString","content","propTypes","string","node","shape","root","isRequired","bool","oneOf","instanceOf","Object","name","memo","RawOverflowTooltip"],"sources":["../../../src/OverflowTooltip/OverflowTooltip.js"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { withStyles, createStyles } from \"@mui/styles\";\n\nimport { HvTooltip, HvTypography } from \"..\";\n\nconst styles = createStyles({\n tooltipData: {},\n tooltipAnchor: {\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n },\n tooltipAnchorParagraph: {\n overflow: \"hidden\",\n display: \"-webkit-box\",\n \"-webkit-line-clamp\": 2,\n \"-webkit-box-orient\": \"vertical\",\n },\n});\n\nconst isParagraph = (children) => /\\s/.test(children);\n\n/**\n * This component generates a tooltip whenever the text is overflowed.\n */\nconst HvOverflowTooltip = ({\n id,\n className,\n classes,\n data,\n open,\n paragraphOverflow,\n placement = \"top-start\",\n tooltipsProps,\n}) => {\n const { width = 0, ref } = useResizeDetector({\n refreshMode: \"debounce\",\n refreshOptions: {\n trailing: true,\n },\n handleHeight: false,\n });\n const scrollWidth = ref.current?.scrollWidth || 0;\n // The difference should be higher than a pixel to be considered as overflowing\n const isOverflowing = scrollWidth - width >= 1;\n\n const isParag = useMemo(\n () => paragraphOverflow && isParagraph(data.toString()),\n [data, paragraphOverflow]\n );\n\n const content = useMemo(\n () => (\n <div\n ref={ref}\n className={clsx(className, {\n [classes.tooltipAnchor]: !isParag,\n [classes.tooltipAnchorParagraph]: isParag,\n })}\n >\n {data}\n </div>\n ),\n [className, classes.tooltipAnchor, classes.tooltipAnchorParagraph, data, isParag, ref]\n );\n\n return open || isOverflowing ? (\n <HvTooltip\n id={id}\n disableHoverListener={!isOverflowing}\n open={open}\n placement={placement}\n title={\n <HvTypography className={classes.tooltipData} variant=\"normalText\">\n {data}\n </HvTypography>\n }\n {...tooltipsProps}\n >\n {content}\n </HvTooltip>\n ) : (\n content\n );\n};\n\nHvOverflowTooltip.propTypes = {\n /**\n * Id to be applied to the tooltip.\n */\n id: PropTypes.string,\n /**\n * The node that will be rendered inside the tooltip.\n */\n data: PropTypes.node,\n /**\n * Class names to be applied.\n */\n className: PropTypes.string,\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the root of the component.\n */\n root: PropTypes.string,\n /**\n * Styles applied to the data container in the tooltip.\n */\n tooltipData: PropTypes.string,\n /**\n * Styles applied to the anchor of the tooltip.\n */\n tooltipAnchor: PropTypes.string,\n /**\n * Styles applied to the anchor of the when it is a paragraph.\n */\n tooltipAnchorParagraph: PropTypes.string,\n }).isRequired,\n /**\n * If `true` the overflow tooltip will always use the paragraph overflow style.\n */\n paragraphOverflow: PropTypes.bool,\n /**\n * Tooltip placement.\n */\n placement: PropTypes.oneOf([\n \"bottom-end\",\n \"bottom-start\",\n \"bottom\",\n \"left-end\",\n \"left-start\",\n \"left\",\n \"right-end\",\n \"right-start\",\n \"right\",\n \"top-end\",\n \"top-start\",\n \"top\",\n ]),\n /**\n * If true, the tooltip is shown.\n */\n open: PropTypes.bool,\n /**\n * Extra properties to add to the tooltip.\n */\n tooltipsProps: PropTypes.instanceOf(Object),\n};\n\nexport default withStyles(styles, {\n name: \"HvOverflowTooltip\",\n})(React.memo(HvOverflowTooltip));\n\nexport { HvOverflowTooltip as RawOverflowTooltip };\n"],"mappings":"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"}
1
+ {"version":3,"file":"OverflowTooltip.js","names":["React","useMemo","clsx","PropTypes","useResizeDetector","withStyles","createStyles","HvTooltip","HvTypography","styles","tooltipData","tooltipAnchor","whiteSpace","overflow","textOverflow","tooltipAnchorParagraph","display","isParagraph","children","test","HvOverflowTooltip","id","className","classes","data","open","paragraphOverflow","placement","tooltipsProps","refreshMode","refreshOptions","trailing","handleHeight","height","width","ref","isParag","toString","isOverflowing","scrollHeight","current","scrollWidth","content","propTypes","string","node","shape","root","isRequired","bool","oneOf","instanceOf","Object","name","memo","RawOverflowTooltip"],"sources":["../../../src/OverflowTooltip/OverflowTooltip.js"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { withStyles, createStyles } from \"@mui/styles\";\n\nimport { HvTooltip, HvTypography } from \"..\";\n\nconst styles = createStyles({\n tooltipData: {},\n tooltipAnchor: {\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n },\n tooltipAnchorParagraph: {\n overflow: \"hidden\",\n display: \"-webkit-box\",\n \"-webkit-line-clamp\": 2,\n \"-webkit-box-orient\": \"vertical\",\n },\n});\n\nconst isParagraph = (children) => /\\s/.test(children);\n\n/**\n * This component generates a tooltip whenever the text is overflowed.\n */\nconst HvOverflowTooltip = ({\n id,\n className,\n classes,\n data,\n open,\n paragraphOverflow,\n placement = \"top-start\",\n tooltipsProps,\n}) => {\n const {\n height = 0,\n width = 0,\n ref,\n } = useResizeDetector({\n refreshMode: \"debounce\",\n refreshOptions: {\n trailing: true,\n },\n handleHeight: false,\n });\n\n const isParag = useMemo(\n () => paragraphOverflow && isParagraph(data.toString()),\n [data, paragraphOverflow]\n );\n\n // The difference should be higher than a pixel to be considered as overflowing\n const isOverflowing = useMemo(() => {\n if (isParag) {\n const scrollHeight = ref.current?.scrollHeight || 0;\n\n return scrollHeight - height >= 1;\n }\n\n const scrollWidth = ref.current?.scrollWidth || 0;\n\n return scrollWidth - width >= 1;\n }, [height, isParag, ref, width]);\n\n const content = useMemo(\n () => (\n <div\n ref={ref}\n className={clsx(className, {\n [classes.tooltipAnchor]: !isParag,\n [classes.tooltipAnchorParagraph]: isParag,\n })}\n >\n {data}\n </div>\n ),\n [className, classes.tooltipAnchor, classes.tooltipAnchorParagraph, data, isParag, ref]\n );\n\n return open || isOverflowing ? (\n <HvTooltip\n id={id}\n disableHoverListener={!isOverflowing}\n open={open}\n placement={placement}\n title={\n <HvTypography className={classes.tooltipData} variant=\"normalText\">\n {data}\n </HvTypography>\n }\n {...tooltipsProps}\n >\n {content}\n </HvTooltip>\n ) : (\n content\n );\n};\n\nHvOverflowTooltip.propTypes = {\n /**\n * Id to be applied to the tooltip.\n */\n id: PropTypes.string,\n /**\n * The node that will be rendered inside the tooltip.\n */\n data: PropTypes.node,\n /**\n * Class names to be applied.\n */\n className: PropTypes.string,\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the root of the component.\n */\n root: PropTypes.string,\n /**\n * Styles applied to the data container in the tooltip.\n */\n tooltipData: PropTypes.string,\n /**\n * Styles applied to the anchor of the tooltip.\n */\n tooltipAnchor: PropTypes.string,\n /**\n * Styles applied to the anchor of the when it is a paragraph.\n */\n tooltipAnchorParagraph: PropTypes.string,\n }).isRequired,\n /**\n * If `true` the overflow tooltip will always use the paragraph overflow style.\n */\n paragraphOverflow: PropTypes.bool,\n /**\n * Tooltip placement.\n */\n placement: PropTypes.oneOf([\n \"bottom-end\",\n \"bottom-start\",\n \"bottom\",\n \"left-end\",\n \"left-start\",\n \"left\",\n \"right-end\",\n \"right-start\",\n \"right\",\n \"top-end\",\n \"top-start\",\n \"top\",\n ]),\n /**\n * If true, the tooltip is shown.\n */\n open: PropTypes.bool,\n /**\n * Extra properties to add to the tooltip.\n */\n tooltipsProps: PropTypes.instanceOf(Object),\n};\n\nexport default withStyles(styles, {\n name: \"HvOverflowTooltip\",\n})(React.memo(HvOverflowTooltip));\n\nexport { HvOverflowTooltip as RawOverflowTooltip };\n"],"mappings":"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"}
@@ -20,7 +20,6 @@ const Counter = ({
20
20
  className,
21
21
  id
22
22
  }) => {
23
- var _appliedFilters$flat;
24
23
  const classes = useStyles();
25
24
  const {
26
25
  filterOptions,
@@ -30,7 +29,7 @@ const Counter = ({
30
29
  const options = id ? [filterOptions.find(option => option.id === id)] : filterOptions;
31
30
  const optionIdx = filterOptions.findIndex(option => option.id === id);
32
31
  let groupsCounter = 0;
33
- appliedFilters === null || appliedFilters === void 0 ? void 0 : (_appliedFilters$flat = appliedFilters.flat()) === null || _appliedFilters$flat === void 0 ? void 0 : _appliedFilters$flat.filter(elem => elem !== undefined).forEach((fg, i) => {
32
+ appliedFilters === null || appliedFilters === void 0 ? void 0 : appliedFilters.filter(elem => elem !== undefined).forEach((fg, i) => {
34
33
  groupsCounter += getExistingFiltersById(i, filterValues, filterOptions);
35
34
  });
36
35
  const partialCounter = id ? getExistingFiltersById(optionIdx, filterValues, filterOptions) || 0 : groupsCounter;
@@ -1 +1 @@
1
- {"version":3,"file":"Counter.js","names":["React","useContext","clsx","PropTypes","FilterGroupContext","useStyles","getExistingFiltersById","idx","filterValues","filterOptions","total","forEach","fv","data","find","f","id","Counter","className","classes","appliedFilters","options","option","optionIdx","findIndex","groupsCounter","flat","filter","elem","undefined","fg","i","partialCounter","totalCounter","reduce","acc","length","root","propTypes","string"],"sources":["../../../../src/FilterGroup/Counter/Counter.js"],"sourcesContent":["import React, { useContext } from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { FilterGroupContext } from \"../FilterGroupContext\";\nimport useStyles from \"./styles\";\n\nconst getExistingFiltersById = (idx, filterValues, filterOptions) => {\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\nconst Counter = ({ className, id }) => {\n const classes = useStyles();\n const { filterOptions, filterValues = [], appliedFilters = [] } = useContext(FilterGroupContext);\n\n const options = id ? [filterOptions.find((option) => option.id === id)] : filterOptions;\n const optionIdx = filterOptions.findIndex((option) => option.id === id);\n\n let groupsCounter = 0;\n appliedFilters\n ?.flat()\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 const totalCounter = options.reduce((acc, option) => acc + option.data.length, 0);\n\n return (\n <div className={clsx(classes.root, className)}>\n {partialCounter > 0 ? <b>{partialCounter}</b> : partialCounter}\n {` / ${totalCounter}`}\n </div>\n );\n};\n\nCounter.propTypes = {\n className: PropTypes.string,\n id: PropTypes.string,\n};\n\nexport default Counter;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,IAAI,MAAM,MAAM;AACvB,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,OAAOC,SAAS,MAAM,UAAU;AAAC;AAAA;AAEjC,MAAMC,sBAAsB,GAAG,CAACC,GAAG,EAAEC,YAAY,EAAEC,aAAa,KAAK;EAAA;EACnE,IAAIC,KAAK,GAAG,CAAC;EACb,qBAAAF,YAAY,CAACD,GAAG,CAAC,sDAAjB,kBAAmBI,OAAO,CAAEC,EAAE,IAAK;IAAA;IACjC,0BAAIH,aAAa,CAACF,GAAG,CAAC,+CAAlB,mBAAoBM,IAAI,CAACC,IAAI,CAAEC,CAAC,IAAKA,CAAC,CAACC,EAAE,KAAKJ,EAAE,CAAC,EAAE;MACrDF,KAAK,IAAI,CAAC;IACZ;EACF,CAAC,CAAC;EACF,OAAOA,KAAK;AACd,CAAC;AAED,MAAMO,OAAO,GAAG,CAAC;EAAEC,SAAS;EAAEF;AAAG,CAAC,KAAK;EAAA;EACrC,MAAMG,OAAO,GAAGd,SAAS,EAAE;EAC3B,MAAM;IAAEI,aAAa;IAAED,YAAY,GAAG,EAAE;IAAEY,cAAc,GAAG;EAAG,CAAC,GAAGnB,UAAU,CAACG,kBAAkB,CAAC;EAEhG,MAAMiB,OAAO,GAAGL,EAAE,GAAG,CAACP,aAAa,CAACK,IAAI,CAAEQ,MAAM,IAAKA,MAAM,CAACN,EAAE,KAAKA,EAAE,CAAC,CAAC,GAAGP,aAAa;EACvF,MAAMc,SAAS,GAAGd,aAAa,CAACe,SAAS,CAAEF,MAAM,IAAKA,MAAM,CAACN,EAAE,KAAKA,EAAE,CAAC;EAEvE,IAAIS,aAAa,GAAG,CAAC;EACrBL,cAAc,aAAdA,cAAc,+CAAdA,cAAc,CACVM,IAAI,EAAE,yDADV,qBAEIC,MAAM,CAAEC,IAAI,IAAKA,IAAI,KAAKC,SAAS,CAAC,CACrClB,OAAO,CAAC,CAACmB,EAAE,EAAEC,CAAC,KAAK;IAClBN,aAAa,IAAInB,sBAAsB,CAACyB,CAAC,EAAEvB,YAAY,EAAEC,aAAa,CAAC;EACzE,CAAC,CAAC;EAEJ,MAAMuB,cAAc,GAAGhB,EAAE,GACrBV,sBAAsB,CAACiB,SAAS,EAAEf,YAAY,EAAEC,aAAa,CAAC,IAAI,CAAC,GACnEgB,aAAa;EACjB,MAAMQ,YAAY,GAAGZ,OAAO,CAACa,MAAM,CAAC,CAACC,GAAG,EAAEb,MAAM,KAAKa,GAAG,GAAGb,MAAM,CAACT,IAAI,CAACuB,MAAM,EAAE,CAAC,CAAC;EAEjF,oBACE;IAAK,SAAS,EAAElC,IAAI,CAACiB,OAAO,CAACkB,IAAI,EAAEnB,SAAS,CAAE;IAAA,WAC3Cc,cAAc,GAAG,CAAC,gBAAG;MAAA,UAAIA;IAAc,EAAK,GAAGA,cAAc,EAC5D,MAAKC,YAAa,EAAC;EAAA,EACjB;AAEV,CAAC;AAED,wCAAAhB,OAAO,CAACqB,SAAS,GAAG;EAClBpB,SAAS,EAAEf,SAAS,CAACoC,MAAM;EAC3BvB,EAAE,EAAEb,SAAS,CAACoC;AAChB,CAAC;AAED,eAAetB,OAAO"}
1
+ {"version":3,"file":"Counter.js","names":["React","useContext","clsx","PropTypes","FilterGroupContext","useStyles","getExistingFiltersById","idx","filterValues","filterOptions","total","forEach","fv","data","find","f","id","Counter","className","classes","appliedFilters","options","option","optionIdx","findIndex","groupsCounter","filter","elem","undefined","fg","i","partialCounter","totalCounter","reduce","acc","length","root","propTypes","string"],"sources":["../../../../src/FilterGroup/Counter/Counter.js"],"sourcesContent":["import React, { useContext } from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { FilterGroupContext } from \"../FilterGroupContext\";\nimport useStyles from \"./styles\";\n\nconst getExistingFiltersById = (idx, filterValues, filterOptions) => {\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\nconst Counter = ({ className, id }) => {\n const classes = useStyles();\n const { filterOptions, filterValues = [], appliedFilters = [] } = useContext(FilterGroupContext);\n\n const options = id ? [filterOptions.find((option) => option.id === id)] : 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 const totalCounter = options.reduce((acc, option) => acc + option.data.length, 0);\n\n return (\n <div className={clsx(classes.root, className)}>\n {partialCounter > 0 ? <b>{partialCounter}</b> : partialCounter}\n {` / ${totalCounter}`}\n </div>\n );\n};\n\nCounter.propTypes = {\n className: PropTypes.string,\n id: PropTypes.string,\n};\n\nexport default Counter;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,IAAI,MAAM,MAAM;AACvB,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,OAAOC,SAAS,MAAM,UAAU;AAAC;AAAA;AAEjC,MAAMC,sBAAsB,GAAG,CAACC,GAAG,EAAEC,YAAY,EAAEC,aAAa,KAAK;EAAA;EACnE,IAAIC,KAAK,GAAG,CAAC;EACb,qBAAAF,YAAY,CAACD,GAAG,CAAC,sDAAjB,kBAAmBI,OAAO,CAAEC,EAAE,IAAK;IAAA;IACjC,0BAAIH,aAAa,CAACF,GAAG,CAAC,+CAAlB,mBAAoBM,IAAI,CAACC,IAAI,CAAEC,CAAC,IAAKA,CAAC,CAACC,EAAE,KAAKJ,EAAE,CAAC,EAAE;MACrDF,KAAK,IAAI,CAAC;IACZ;EACF,CAAC,CAAC;EACF,OAAOA,KAAK;AACd,CAAC;AAED,MAAMO,OAAO,GAAG,CAAC;EAAEC,SAAS;EAAEF;AAAG,CAAC,KAAK;EACrC,MAAMG,OAAO,GAAGd,SAAS,EAAE;EAC3B,MAAM;IAAEI,aAAa;IAAED,YAAY,GAAG,EAAE;IAAEY,cAAc,GAAG;EAAG,CAAC,GAAGnB,UAAU,CAACG,kBAAkB,CAAC;EAEhG,MAAMiB,OAAO,GAAGL,EAAE,GAAG,CAACP,aAAa,CAACK,IAAI,CAAEQ,MAAM,IAAKA,MAAM,CAACN,EAAE,KAAKA,EAAE,CAAC,CAAC,GAAGP,aAAa;EACvF,MAAMc,SAAS,GAAGd,aAAa,CAACe,SAAS,CAAEF,MAAM,IAAKA,MAAM,CAACN,EAAE,KAAKA,EAAE,CAAC;EAEvE,IAAIS,aAAa,GAAG,CAAC;EACrBL,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CACVM,MAAM,CAAEC,IAAI,IAAKA,IAAI,KAAKC,SAAS,CAAC,CACrCjB,OAAO,CAAC,CAACkB,EAAE,EAAEC,CAAC,KAAK;IAClBL,aAAa,IAAInB,sBAAsB,CAACwB,CAAC,EAAEtB,YAAY,EAAEC,aAAa,CAAC;EACzE,CAAC,CAAC;EAEJ,MAAMsB,cAAc,GAAGf,EAAE,GACrBV,sBAAsB,CAACiB,SAAS,EAAEf,YAAY,EAAEC,aAAa,CAAC,IAAI,CAAC,GACnEgB,aAAa;EACjB,MAAMO,YAAY,GAAGX,OAAO,CAACY,MAAM,CAAC,CAACC,GAAG,EAAEZ,MAAM,KAAKY,GAAG,GAAGZ,MAAM,CAACT,IAAI,CAACsB,MAAM,EAAE,CAAC,CAAC;EAEjF,oBACE;IAAK,SAAS,EAAEjC,IAAI,CAACiB,OAAO,CAACiB,IAAI,EAAElB,SAAS,CAAE;IAAA,WAC3Ca,cAAc,GAAG,CAAC,gBAAG;MAAA,UAAIA;IAAc,EAAK,GAAGA,cAAc,EAC5D,MAAKC,YAAa,EAAC;EAAA,EACjB;AAEV,CAAC;AAED,wCAAAf,OAAO,CAACoB,SAAS,GAAG;EAClBnB,SAAS,EAAEf,SAAS,CAACmC,MAAM;EAC3BtB,EAAE,EAAEb,SAAS,CAACmC;AAChB,CAAC;AAED,eAAerB,OAAO"}
@@ -27,7 +27,10 @@ const RightPanel = ({
27
27
  setFilterValues,
28
28
  activeGroup
29
29
  } = useContext(FilterGroupContext);
30
- const activeGroupOptions = useMemo(() => filterOptions[activeGroup].data.map(option => option.id), [filterOptions, activeGroup]);
30
+ const activeGroupOptions = useMemo(() => {
31
+ var _filterOptions$active;
32
+ return ((_filterOptions$active = filterOptions[activeGroup]) === null || _filterOptions$active === void 0 ? void 0 : _filterOptions$active.data.filter(option => option.name.toLowerCase().includes(searchStr.toLowerCase())).map(option => option.id)) || [];
33
+ }, [filterOptions, activeGroup, searchStr]);
31
34
  const activeFilterValues = useMemo(() => {
32
35
  var _filterValues$activeG;
33
36
  return (_filterValues$activeG = filterValues[activeGroup]) === null || _filterValues$activeG === void 0 ? void 0 : _filterValues$activeG.filter(value => activeGroupOptions.includes(value));
@@ -57,9 +60,18 @@ const RightPanel = ({
57
60
  };
58
61
  const handleSelectAll = useCallback(() => {
59
62
  const newFilterValues = cloneDeep(filterValues);
60
- newFilterValues[activeGroup] = anySelected ? [] : activeGroupOptions;
63
+ if (anySelected) {
64
+ if (searchStr !== "") {
65
+ var _filterValues$activeG3;
66
+ newFilterValues[activeGroup] = (_filterValues$activeG3 = filterValues[activeGroup]) === null || _filterValues$activeG3 === void 0 ? void 0 : _filterValues$activeG3.filter(value => !activeGroupOptions.includes(value));
67
+ } else {
68
+ newFilterValues[activeGroup] = [];
69
+ }
70
+ } else {
71
+ newFilterValues[activeGroup] = [...filterValues[activeGroup], ...activeGroupOptions];
72
+ }
61
73
  setFilterValues(newFilterValues);
62
- }, [activeGroup, activeGroupOptions, anySelected, filterValues, setFilterValues]);
74
+ }, [activeGroup, activeGroupOptions, anySelected, filterValues, setFilterValues, searchStr]);
63
75
 
64
76
  /**
65
77
  * Create selecteAll component.
@@ -1 +1 @@
1
- {"version":3,"file":"RightPanel.js","names":["React","useMemo","useContext","useState","useEffect","useCallback","PropTypes","cloneDeep","clsx","FilterGroupContext","useStyles","setId","HvTypography","HvList","HvInput","HvPanel","HvCheckBox","RightPanel","id","className","labels","emptyElement","classes","searchStr","setSearchStr","allSelected","setAllSelected","anySelected","setAnySelected","filterOptions","filterValues","setFilterValues","activeGroup","activeGroupOptions","data","map","option","activeFilterValues","filter","value","includes","listValues","label","name","selected","isHidden","toLowerCase","indexOf","updateSelectAll","nbrSelected","length","hasSelection","allSelect","onChangeHandler","values","newFilterValues","i","v","handleSelectAll","SelectAll","selectAll","multiSelectionConjunction","defaultLabel","selectAllContainer","container","selection","root","search","searchBoxPlaceholder","event","str","list","propTypes","string","shape","node"],"sources":["../../../../src/FilterGroup/RightPanel/RightPanel.js"],"sourcesContent":["import React, { useMemo, useContext, useState, useEffect, useCallback } from \"react\";\nimport PropTypes from \"prop-types\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport clsx from \"clsx\";\nimport { FilterGroupContext } from \"../FilterGroupContext\";\nimport useStyles from \"./styles\";\nimport { setId, HvTypography, HvList, HvInput, HvPanel, HvCheckBox } from \"../..\";\n\nconst RightPanel = ({ id, className, labels, emptyElement }) => {\n const classes = useStyles();\n const [searchStr, setSearchStr] = useState(\"\");\n const [allSelected, setAllSelected] = useState(false);\n const [anySelected, setAnySelected] = useState(false);\n\n const {\n filterOptions,\n filterValues = [],\n setFilterValues,\n activeGroup,\n } = useContext(FilterGroupContext);\n\n const activeGroupOptions = useMemo(\n () => filterOptions[activeGroup].data.map((option) => option.id),\n [filterOptions, activeGroup]\n );\n\n const activeFilterValues = useMemo(\n () => filterValues[activeGroup]?.filter((value) => activeGroupOptions.includes(value)),\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: option.name.toLowerCase().indexOf(searchStr.toLowerCase()) < 0,\n })),\n [filterOptions, filterValues, activeGroup, searchStr]\n );\n\n const updateSelectAll = useCallback(() => {\n const nbrSelected = activeFilterValues?.length;\n const hasSelection = nbrSelected > 0;\n const allSelect = nbrSelected === activeGroupOptions.length;\n\n setAnySelected(hasSelection);\n setAllSelected(hasSelection && allSelect);\n }, [activeFilterValues, activeGroupOptions]);\n\n useEffect(() => {\n updateSelectAll();\n }, [activeFilterValues, updateSelectAll]);\n\n useEffect(() => setSearchStr(\"\"), [activeGroup]);\n\n const onChangeHandler = (values) => {\n const newFilterValues = filterOptions.map((option, i) =>\n activeGroup === i\n ? values.filter((v) => v.selected).map((v) => v.id)\n : [...(filterValues[i] || [])]\n );\n setFilterValues(newFilterValues);\n };\n\n const handleSelectAll = useCallback(() => {\n const newFilterValues = cloneDeep(filterValues);\n newFilterValues[activeGroup] = anySelected ? [] : activeGroupOptions;\n\n setFilterValues(newFilterValues);\n }, [activeGroup, activeGroupOptions, anySelected, filterValues, setFilterValues]);\n\n /**\n * Create selecteAll component.\n *\n * @returns {*}\n */\n const SelectAll = useCallback(() => {\n const { selectAll, multiSelectionConjunction } = labels;\n const nbrSelected = activeFilterValues?.length;\n\n const defaultLabel = (\n <HvTypography component=\"span\">\n {nbrSelected > 0 ? (\n <>\n <b>{nbrSelected}</b>\n {` ${multiSelectionConjunction} ${activeGroupOptions.length}`}\n </>\n ) : (\n <>\n <b>{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 classes={{ container: classes.selection }}\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 classes.selectAll,\n classes.selectAllContainer,\n classes.selection,\n handleSelectAll,\n id,\n labels,\n ]);\n\n return (\n <HvPanel id={setId(id, \"rightPanel\")} className={clsx(className, classes.root)}>\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={(event, str) => setSearchStr(str)}\n />\n <SelectAll />\n <HvList\n key={activeGroup}\n id={setId(id, \"list\")}\n className={classes.list}\n values={listValues}\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\nRightPanel.propTypes = {\n id: PropTypes.string,\n className: PropTypes.string,\n labels: PropTypes.shape({\n searchBoxPlaceholder: PropTypes.string,\n selectAll: PropTypes.string,\n multiSelectionConjunction: PropTypes.string,\n }),\n emptyElement: PropTypes.node,\n};\n\nexport default RightPanel;\n"],"mappings":"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"}
1
+ {"version":3,"file":"RightPanel.js","names":["React","useMemo","useContext","useState","useEffect","useCallback","PropTypes","cloneDeep","clsx","FilterGroupContext","useStyles","setId","HvTypography","HvList","HvInput","HvPanel","HvCheckBox","RightPanel","id","className","labels","emptyElement","classes","searchStr","setSearchStr","allSelected","setAllSelected","anySelected","setAnySelected","filterOptions","filterValues","setFilterValues","activeGroup","activeGroupOptions","data","filter","option","name","toLowerCase","includes","map","activeFilterValues","value","listValues","label","selected","isHidden","indexOf","updateSelectAll","nbrSelected","length","hasSelection","allSelect","onChangeHandler","values","newFilterValues","i","v","handleSelectAll","SelectAll","selectAll","multiSelectionConjunction","defaultLabel","selectAllContainer","container","selection","root","search","searchBoxPlaceholder","event","str","list","propTypes","string","shape","node"],"sources":["../../../../src/FilterGroup/RightPanel/RightPanel.js"],"sourcesContent":["import React, { useMemo, useContext, useState, useEffect, useCallback } from \"react\";\nimport PropTypes from \"prop-types\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport clsx from \"clsx\";\nimport { FilterGroupContext } from \"../FilterGroupContext\";\nimport useStyles from \"./styles\";\nimport { setId, HvTypography, HvList, HvInput, HvPanel, HvCheckBox } from \"../..\";\n\nconst RightPanel = ({ id, className, labels, emptyElement }) => {\n const classes = useStyles();\n const [searchStr, setSearchStr] = useState(\"\");\n const [allSelected, setAllSelected] = useState(false);\n const [anySelected, setAnySelected] = useState(false);\n\n const {\n filterOptions,\n filterValues = [],\n setFilterValues,\n activeGroup,\n } = useContext(FilterGroupContext);\n\n const activeGroupOptions = useMemo(\n () =>\n filterOptions[activeGroup]?.data\n .filter((option) => option.name.toLowerCase().includes(searchStr.toLowerCase()))\n .map((option) => option.id) || [],\n [filterOptions, activeGroup, searchStr]\n );\n\n const activeFilterValues = useMemo(\n () => filterValues[activeGroup]?.filter((value) => activeGroupOptions.includes(value)),\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: option.name.toLowerCase().indexOf(searchStr.toLowerCase()) < 0,\n })),\n [filterOptions, filterValues, activeGroup, searchStr]\n );\n\n const updateSelectAll = useCallback(() => {\n const nbrSelected = activeFilterValues?.length;\n const hasSelection = nbrSelected > 0;\n const allSelect = nbrSelected === activeGroupOptions.length;\n\n setAnySelected(hasSelection);\n setAllSelected(hasSelection && allSelect);\n }, [activeFilterValues, activeGroupOptions]);\n\n useEffect(() => {\n updateSelectAll();\n }, [activeFilterValues, updateSelectAll]);\n\n useEffect(() => setSearchStr(\"\"), [activeGroup]);\n\n const onChangeHandler = (values) => {\n const newFilterValues = filterOptions.map((option, i) =>\n activeGroup === i\n ? values.filter((v) => v.selected).map((v) => v.id)\n : [...(filterValues[i] || [])]\n );\n setFilterValues(newFilterValues);\n };\n\n const handleSelectAll = useCallback(() => {\n const newFilterValues = cloneDeep(filterValues);\n\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] = [...filterValues[activeGroup], ...activeGroupOptions];\n }\n\n setFilterValues(newFilterValues);\n }, [activeGroup, activeGroupOptions, anySelected, filterValues, setFilterValues, searchStr]);\n\n /**\n * Create selecteAll component.\n *\n * @returns {*}\n */\n const SelectAll = useCallback(() => {\n const { selectAll, multiSelectionConjunction } = labels;\n const nbrSelected = activeFilterValues?.length;\n\n const defaultLabel = (\n <HvTypography component=\"span\">\n {nbrSelected > 0 ? (\n <>\n <b>{nbrSelected}</b>\n {` ${multiSelectionConjunction} ${activeGroupOptions.length}`}\n </>\n ) : (\n <>\n <b>{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 classes={{ container: classes.selection }}\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 classes.selectAll,\n classes.selectAllContainer,\n classes.selection,\n handleSelectAll,\n id,\n labels,\n ]);\n\n return (\n <HvPanel id={setId(id, \"rightPanel\")} className={clsx(className, classes.root)}>\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={(event, str) => setSearchStr(str)}\n />\n <SelectAll />\n <HvList\n key={activeGroup}\n id={setId(id, \"list\")}\n className={classes.list}\n values={listValues}\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\nRightPanel.propTypes = {\n id: PropTypes.string,\n className: PropTypes.string,\n labels: PropTypes.shape({\n searchBoxPlaceholder: PropTypes.string,\n selectAll: PropTypes.string,\n multiSelectionConjunction: PropTypes.string,\n }),\n emptyElement: PropTypes.node,\n};\n\nexport default RightPanel;\n"],"mappings":"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"}
@@ -37,8 +37,8 @@ const HvOverflowTooltip = ({
37
37
  placement = "top-start",
38
38
  tooltipsProps
39
39
  }) => {
40
- var _ref$current;
41
40
  const {
41
+ height = 0,
42
42
  width = 0,
43
43
  ref
44
44
  } = useResizeDetector({
@@ -48,10 +48,19 @@ const HvOverflowTooltip = ({
48
48
  },
49
49
  handleHeight: false
50
50
  });
51
- const scrollWidth = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollWidth) || 0;
52
- // The difference should be higher than a pixel to be considered as overflowing
53
- const isOverflowing = scrollWidth - width >= 1;
54
51
  const isParag = useMemo(() => paragraphOverflow && isParagraph(data.toString()), [data, paragraphOverflow]);
52
+
53
+ // The difference should be higher than a pixel to be considered as overflowing
54
+ const isOverflowing = useMemo(() => {
55
+ var _ref$current2;
56
+ if (isParag) {
57
+ var _ref$current;
58
+ const scrollHeight = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollHeight) || 0;
59
+ return scrollHeight - height >= 1;
60
+ }
61
+ const scrollWidth = ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.scrollWidth) || 0;
62
+ return scrollWidth - width >= 1;
63
+ }, [height, isParag, ref, width]);
55
64
  const content = useMemo(() => /*#__PURE__*/_jsx("div", {
56
65
  ref: ref,
57
66
  className: clsx(className, isParag ? classes.tooltipAnchorParagraph : classes.tooltipAnchor),
@@ -1 +1 @@
1
- {"version":3,"file":"OverflowTooltip.js","names":["React","useMemo","clsx","PropTypes","useResizeDetector","withStyles","createStyles","HvTooltip","HvTypography","styles","tooltipData","tooltipAnchor","whiteSpace","overflow","textOverflow","tooltipAnchorParagraph","display","isParagraph","children","test","HvOverflowTooltip","id","className","classes","data","open","paragraphOverflow","placement","tooltipsProps","width","ref","refreshMode","refreshOptions","trailing","handleHeight","scrollWidth","current","isOverflowing","isParag","toString","content","propTypes","string","node","shape","root","isRequired","bool","oneOf","instanceOf","Object","name","memo","RawOverflowTooltip"],"sources":["../../../src/OverflowTooltip/OverflowTooltip.js"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { withStyles, createStyles } from \"@mui/styles\";\n\nimport { HvTooltip, HvTypography } from \"..\";\n\nconst styles = createStyles({\n tooltipData: {},\n tooltipAnchor: {\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n },\n tooltipAnchorParagraph: {\n overflow: \"hidden\",\n display: \"-webkit-box\",\n \"-webkit-line-clamp\": 2,\n \"-webkit-box-orient\": \"vertical\",\n },\n});\n\nconst isParagraph = (children) => /\\s/.test(children);\n\n/**\n * This component generates a tooltip whenever the text is overflowed.\n */\nconst HvOverflowTooltip = ({\n id,\n className,\n classes,\n data,\n open,\n paragraphOverflow,\n placement = \"top-start\",\n tooltipsProps,\n}) => {\n const { width = 0, ref } = useResizeDetector({\n refreshMode: \"debounce\",\n refreshOptions: {\n trailing: true,\n },\n handleHeight: false,\n });\n const scrollWidth = ref.current?.scrollWidth || 0;\n // The difference should be higher than a pixel to be considered as overflowing\n const isOverflowing = scrollWidth - width >= 1;\n\n const isParag = useMemo(\n () => paragraphOverflow && isParagraph(data.toString()),\n [data, paragraphOverflow]\n );\n\n const content = useMemo(\n () => (\n <div\n ref={ref}\n className={clsx(className, {\n [classes.tooltipAnchor]: !isParag,\n [classes.tooltipAnchorParagraph]: isParag,\n })}\n >\n {data}\n </div>\n ),\n [className, classes.tooltipAnchor, classes.tooltipAnchorParagraph, data, isParag, ref]\n );\n\n return open || isOverflowing ? (\n <HvTooltip\n id={id}\n disableHoverListener={!isOverflowing}\n open={open}\n placement={placement}\n title={\n <HvTypography className={classes.tooltipData} variant=\"normalText\">\n {data}\n </HvTypography>\n }\n {...tooltipsProps}\n >\n {content}\n </HvTooltip>\n ) : (\n content\n );\n};\n\nHvOverflowTooltip.propTypes = {\n /**\n * Id to be applied to the tooltip.\n */\n id: PropTypes.string,\n /**\n * The node that will be rendered inside the tooltip.\n */\n data: PropTypes.node,\n /**\n * Class names to be applied.\n */\n className: PropTypes.string,\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the root of the component.\n */\n root: PropTypes.string,\n /**\n * Styles applied to the data container in the tooltip.\n */\n tooltipData: PropTypes.string,\n /**\n * Styles applied to the anchor of the tooltip.\n */\n tooltipAnchor: PropTypes.string,\n /**\n * Styles applied to the anchor of the when it is a paragraph.\n */\n tooltipAnchorParagraph: PropTypes.string,\n }).isRequired,\n /**\n * If `true` the overflow tooltip will always use the paragraph overflow style.\n */\n paragraphOverflow: PropTypes.bool,\n /**\n * Tooltip placement.\n */\n placement: PropTypes.oneOf([\n \"bottom-end\",\n \"bottom-start\",\n \"bottom\",\n \"left-end\",\n \"left-start\",\n \"left\",\n \"right-end\",\n \"right-start\",\n \"right\",\n \"top-end\",\n \"top-start\",\n \"top\",\n ]),\n /**\n * If true, the tooltip is shown.\n */\n open: PropTypes.bool,\n /**\n * Extra properties to add to the tooltip.\n */\n tooltipsProps: PropTypes.instanceOf(Object),\n};\n\nexport default withStyles(styles, {\n name: \"HvOverflowTooltip\",\n})(React.memo(HvOverflowTooltip));\n\nexport { HvOverflowTooltip as RawOverflowTooltip };\n"],"mappings":"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"}
1
+ {"version":3,"file":"OverflowTooltip.js","names":["React","useMemo","clsx","PropTypes","useResizeDetector","withStyles","createStyles","HvTooltip","HvTypography","styles","tooltipData","tooltipAnchor","whiteSpace","overflow","textOverflow","tooltipAnchorParagraph","display","isParagraph","children","test","HvOverflowTooltip","id","className","classes","data","open","paragraphOverflow","placement","tooltipsProps","height","width","ref","refreshMode","refreshOptions","trailing","handleHeight","isParag","toString","isOverflowing","scrollHeight","current","scrollWidth","content","propTypes","string","node","shape","root","isRequired","bool","oneOf","instanceOf","Object","name","memo","RawOverflowTooltip"],"sources":["../../../src/OverflowTooltip/OverflowTooltip.js"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { withStyles, createStyles } from \"@mui/styles\";\n\nimport { HvTooltip, HvTypography } from \"..\";\n\nconst styles = createStyles({\n tooltipData: {},\n tooltipAnchor: {\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n },\n tooltipAnchorParagraph: {\n overflow: \"hidden\",\n display: \"-webkit-box\",\n \"-webkit-line-clamp\": 2,\n \"-webkit-box-orient\": \"vertical\",\n },\n});\n\nconst isParagraph = (children) => /\\s/.test(children);\n\n/**\n * This component generates a tooltip whenever the text is overflowed.\n */\nconst HvOverflowTooltip = ({\n id,\n className,\n classes,\n data,\n open,\n paragraphOverflow,\n placement = \"top-start\",\n tooltipsProps,\n}) => {\n const {\n height = 0,\n width = 0,\n ref,\n } = useResizeDetector({\n refreshMode: \"debounce\",\n refreshOptions: {\n trailing: true,\n },\n handleHeight: false,\n });\n\n const isParag = useMemo(\n () => paragraphOverflow && isParagraph(data.toString()),\n [data, paragraphOverflow]\n );\n\n // The difference should be higher than a pixel to be considered as overflowing\n const isOverflowing = useMemo(() => {\n if (isParag) {\n const scrollHeight = ref.current?.scrollHeight || 0;\n\n return scrollHeight - height >= 1;\n }\n\n const scrollWidth = ref.current?.scrollWidth || 0;\n\n return scrollWidth - width >= 1;\n }, [height, isParag, ref, width]);\n\n const content = useMemo(\n () => (\n <div\n ref={ref}\n className={clsx(className, {\n [classes.tooltipAnchor]: !isParag,\n [classes.tooltipAnchorParagraph]: isParag,\n })}\n >\n {data}\n </div>\n ),\n [className, classes.tooltipAnchor, classes.tooltipAnchorParagraph, data, isParag, ref]\n );\n\n return open || isOverflowing ? (\n <HvTooltip\n id={id}\n disableHoverListener={!isOverflowing}\n open={open}\n placement={placement}\n title={\n <HvTypography className={classes.tooltipData} variant=\"normalText\">\n {data}\n </HvTypography>\n }\n {...tooltipsProps}\n >\n {content}\n </HvTooltip>\n ) : (\n content\n );\n};\n\nHvOverflowTooltip.propTypes = {\n /**\n * Id to be applied to the tooltip.\n */\n id: PropTypes.string,\n /**\n * The node that will be rendered inside the tooltip.\n */\n data: PropTypes.node,\n /**\n * Class names to be applied.\n */\n className: PropTypes.string,\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the root of the component.\n */\n root: PropTypes.string,\n /**\n * Styles applied to the data container in the tooltip.\n */\n tooltipData: PropTypes.string,\n /**\n * Styles applied to the anchor of the tooltip.\n */\n tooltipAnchor: PropTypes.string,\n /**\n * Styles applied to the anchor of the when it is a paragraph.\n */\n tooltipAnchorParagraph: PropTypes.string,\n }).isRequired,\n /**\n * If `true` the overflow tooltip will always use the paragraph overflow style.\n */\n paragraphOverflow: PropTypes.bool,\n /**\n * Tooltip placement.\n */\n placement: PropTypes.oneOf([\n \"bottom-end\",\n \"bottom-start\",\n \"bottom\",\n \"left-end\",\n \"left-start\",\n \"left\",\n \"right-end\",\n \"right-start\",\n \"right\",\n \"top-end\",\n \"top-start\",\n \"top\",\n ]),\n /**\n * If true, the tooltip is shown.\n */\n open: PropTypes.bool,\n /**\n * Extra properties to add to the tooltip.\n */\n tooltipsProps: PropTypes.instanceOf(Object),\n};\n\nexport default withStyles(styles, {\n name: \"HvOverflowTooltip\",\n})(React.memo(HvOverflowTooltip));\n\nexport { HvOverflowTooltip as RawOverflowTooltip };\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hitachivantara/uikit-react-core",
3
- "version": "4.4.4",
3
+ "version": "4.4.5",
4
4
  "description": "A collection of React components for the Hitachi Vantara's Design System.",
5
5
  "homepage": "https://github.com/lumada-design/hv-uikit-react",
6
6
  "license": "Apache-2.0",
@@ -84,5 +84,5 @@
84
84
  "publishConfig": {
85
85
  "access": "public"
86
86
  },
87
- "gitHead": "8240bb1bd8a948c5a7abf9cf7d1c7de8356e9d6a"
87
+ "gitHead": "72651250a3d72b341970cbebd7f5c274c6ba36ee"
88
88
  }