@hitachivantara/uikit-react-core 3.71.0 → 4.0.1-next.0

package/dist/FilterGroup/LeftPanel/LeftPanel.js

@@ -41,13 +41,16 @@ var _styles = _interopRequireDefault(require("./styles"));
 
 var _utils = require("../../List/utils");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var LeftPanel = function LeftPanel(_ref) {
   var id = _ref.id,
-      className = _ref.className;
+      className = _ref.className,
+      emptyElement = _ref.emptyElement;
   var classes = (0, _styles.default)();
 
   var _useContext = (0, _react.useContext)(_FilterGroupContext.FilterGroupContext),
@@ -55,33 +58,36 @@ var LeftPanel = function LeftPanel(_ref) {
       activeGroup = _useContext.activeGroup,
       setActiveGroup = _useContext.setActiveGroup;
 
-  return /*#__PURE__*/_react.default.createElement(_.HvPanel, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvPanel, {
     id: (0, _.setId)(id, "leftPanel"),
-    className: (0, _clsx.default)(className, classes.root)
-  }, /*#__PURE__*/_react.default.createElement(_.HvListContainer, {
-    id: (0, _.setId)(id, "leftPanel-list"),
-    condensed: true,
-    interactive: true
-  }, filterOptions.map(function (group, index) {
-    var ItemText = (0, _utils.wrapperTooltip)(true, group.name, group.name);
-    return /*#__PURE__*/_react.default.createElement(_.HvListItem, {
-      id: group.id,
-      className: classes.filterItem,
-      key: group.name,
-      onClick: function onClick() {
-        return setActiveGroup(index);
-      },
-      selected: filterOptions[activeGroup].id === group.id,
-      endAdornment: /*#__PURE__*/_react.default.createElement(_Counter.default, {
-        id: group.id
+    className: (0, _clsx.default)(className, classes.root),
+    children: filterOptions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvListContainer, {
+      id: (0, _.setId)(id, "leftPanel-list"),
+      condensed: true,
+      interactive: true,
+      children: filterOptions.map(function (group, index) {
+        var ItemText = (0, _utils.wrapperTooltip)(true, group.name, group.name);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvListItem, {
+          id: group.id,
+          className: classes.filterItem,
+          onClick: function onClick() {
+            return setActiveGroup(index);
+          },
+          selected: filterOptions[activeGroup].id === group.id,
+          endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Counter.default, {
+            id: group.id
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemText, {})
+        }, group.name);
       })
-    }, /*#__PURE__*/_react.default.createElement(ItemText, null));
-  })));
+    }) : emptyElement
+  });
 };
 
 process.env.NODE_ENV !== "production" ? LeftPanel.propTypes = {
   id: _propTypes.default.string,
-  className: _propTypes.default.string
+  className: _propTypes.default.string,
+  emptyElement: _propTypes.default.node
 } : void 0;
 var _default = LeftPanel;
 exports.default = _default;

package/dist/FilterGroup/LeftPanel/LeftPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"LeftPanel.js","names":["LeftPanel","id","className","classes","useStyles","useContext","FilterGroupContext","filterOptions","activeGroup","setActiveGroup","setId","clsx","root","map","group","index","ItemText","wrapperTooltip","name","filterItem","propTypes","PropTypes","string"],"sources":["../../../src/FilterGroup/LeftPanel/LeftPanel.js"],"sourcesContent":["import React, { useContext } from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { HvPanel, HvListContainer, HvListItem, setId } from \"../..\";\nimport { FilterGroupContext } from \"../FilterGroupContext\";\nimport Counter from \"../Counter\";\nimport useStyles from \"./styles\";\nimport { wrapperTooltip } from \"../../List/utils\";\n\nconst LeftPanel = ({ id, className }) => {\n  const classes = useStyles();\n  const { filterOptions, activeGroup, setActiveGroup } = useContext(FilterGroupContext);\n\n  return (\n    <HvPanel id={setId(id, \"leftPanel\")} className={clsx(className, classes.root)}>\n      <HvListContainer id={setId(id, \"leftPanel-list\")} condensed interactive>\n        {filterOptions.map((group, index) => {\n          const ItemText = wrapperTooltip(true, group.name, group.name);\n          return (\n            <HvListItem\n              id={group.id}\n              className={classes.filterItem}\n              key={group.name}\n              onClick={() => setActiveGroup(index)}\n              selected={filterOptions[activeGroup].id === group.id}\n              endAdornment={<Counter id={group.id} />}\n            >\n              <ItemText />\n            </HvListItem>\n          );\n        })}\n      </HvListContainer>\n    </HvPanel>\n  );\n};\n\nLeftPanel.propTypes = {\n  id: PropTypes.string,\n  className: PropTypes.string,\n};\n\nexport default LeftPanel;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,SAAS,GAAG,SAAZA,SAAY,OAAuB;EAAA,IAApBC,EAAoB,QAApBA,EAAoB;EAAA,IAAhBC,SAAgB,QAAhBA,SAAgB;EACvC,IAAMC,OAAO,GAAG,IAAAC,eAAA,GAAhB;;EACA,kBAAuD,IAAAC,iBAAA,EAAWC,sCAAX,CAAvD;EAAA,IAAQC,aAAR,eAAQA,aAAR;EAAA,IAAuBC,WAAvB,eAAuBA,WAAvB;EAAA,IAAoCC,cAApC,eAAoCA,cAApC;;EAEA,oBACE,6BAAC,SAAD;IAAS,EAAE,EAAE,IAAAC,OAAA,EAAMT,EAAN,EAAU,WAAV,CAAb;IAAqC,SAAS,EAAE,IAAAU,aAAA,EAAKT,SAAL,EAAgBC,OAAO,CAACS,IAAxB;EAAhD,gBACE,6BAAC,iBAAD;IAAiB,EAAE,EAAE,IAAAF,OAAA,EAAMT,EAAN,EAAU,gBAAV,CAArB;IAAkD,SAAS,MAA3D;IAA4D,WAAW;EAAvE,GACGM,aAAa,CAACM,GAAd,CAAkB,UAACC,KAAD,EAAQC,KAAR,EAAkB;IACnC,IAAMC,QAAQ,GAAG,IAAAC,qBAAA,EAAe,IAAf,EAAqBH,KAAK,CAACI,IAA3B,EAAiCJ,KAAK,CAACI,IAAvC,CAAjB;IACA,oBACE,6BAAC,YAAD;MACE,EAAE,EAAEJ,KAAK,CAACb,EADZ;MAEE,SAAS,EAAEE,OAAO,CAACgB,UAFrB;MAGE,GAAG,EAAEL,KAAK,CAACI,IAHb;MAIE,OAAO,EAAE;QAAA,OAAMT,cAAc,CAACM,KAAD,CAApB;MAAA,CAJX;MAKE,QAAQ,EAAER,aAAa,CAACC,WAAD,CAAb,CAA2BP,EAA3B,KAAkCa,KAAK,CAACb,EALpD;MAME,YAAY,eAAE,6BAAC,gBAAD;QAAS,EAAE,EAAEa,KAAK,CAACb;MAAnB;IANhB,gBAQE,6BAAC,QAAD,OARF,CADF;EAYD,CAdA,CADH,CADF,CADF;AAqBD,CAzBD;;AA2BA,wCAAAD,SAAS,CAACoB,SAAV,GAAsB;EACpBnB,EAAE,EAAEoB,kBAAA,CAAUC,MADM;EAEpBpB,SAAS,EAAEmB,kBAAA,CAAUC;AAFD,CAAtB;eAKetB,S"}
+{"version":3,"file":"LeftPanel.js","names":["LeftPanel","id","className","emptyElement","classes","useStyles","useContext","FilterGroupContext","filterOptions","activeGroup","setActiveGroup","setId","clsx","root","length","map","group","index","ItemText","wrapperTooltip","name","filterItem","propTypes","PropTypes","string","node"],"sources":["../../../src/FilterGroup/LeftPanel/LeftPanel.js"],"sourcesContent":["import React, { useContext } from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { HvPanel, HvListContainer, HvListItem, setId } from \"../..\";\nimport { FilterGroupContext } from \"../FilterGroupContext\";\nimport Counter from \"../Counter\";\nimport useStyles from \"./styles\";\nimport { wrapperTooltip } from \"../../List/utils\";\n\nconst LeftPanel = ({ id, className, emptyElement }) => {\n  const classes = useStyles();\n  const { filterOptions, activeGroup, setActiveGroup } = useContext(FilterGroupContext);\n\n  return (\n    <HvPanel id={setId(id, \"leftPanel\")} className={clsx(className, classes.root)}>\n      {filterOptions.length > 0 ? (\n        <HvListContainer id={setId(id, \"leftPanel-list\")} condensed interactive>\n          {filterOptions.map((group, index) => {\n            const ItemText = wrapperTooltip(true, group.name, group.name);\n            return (\n              <HvListItem\n                id={group.id}\n                className={classes.filterItem}\n                key={group.name}\n                onClick={() => setActiveGroup(index)}\n                selected={filterOptions[activeGroup].id === group.id}\n                endAdornment={<Counter id={group.id} />}\n              >\n                <ItemText />\n              </HvListItem>\n            );\n          })}\n        </HvListContainer>\n      ) : (\n        emptyElement\n      )}\n    </HvPanel>\n  );\n};\n\nLeftPanel.propTypes = {\n  id: PropTypes.string,\n  className: PropTypes.string,\n  emptyElement: PropTypes.node,\n};\n\nexport default LeftPanel;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA,IAAMA,SAAS,GAAG,SAAZA,SAAY,OAAqC;EAAA,IAAlCC,EAAkC,QAAlCA,EAAkC;EAAA,IAA9BC,SAA8B,QAA9BA,SAA8B;EAAA,IAAnBC,YAAmB,QAAnBA,YAAmB;EACrD,IAAMC,OAAO,GAAG,IAAAC,eAAA,GAAhB;;EACA,kBAAuD,IAAAC,iBAAA,EAAWC,sCAAX,CAAvD;EAAA,IAAQC,aAAR,eAAQA,aAAR;EAAA,IAAuBC,WAAvB,eAAuBA,WAAvB;EAAA,IAAoCC,cAApC,eAAoCA,cAApC;;EAEA,oBACE,qBAAC,SAAD;IAAS,EAAE,EAAE,IAAAC,OAAA,EAAMV,EAAN,EAAU,WAAV,CAAb;IAAqC,SAAS,EAAE,IAAAW,aAAA,EAAKV,SAAL,EAAgBE,OAAO,CAACS,IAAxB,CAAhD;IAAA,UACGL,aAAa,CAACM,MAAd,GAAuB,CAAvB,gBACC,qBAAC,iBAAD;MAAiB,EAAE,EAAE,IAAAH,OAAA,EAAMV,EAAN,EAAU,gBAAV,CAArB;MAAkD,SAAS,MAA3D;MAA4D,WAAW,MAAvE;MAAA,UACGO,aAAa,CAACO,GAAd,CAAkB,UAACC,KAAD,EAAQC,KAAR,EAAkB;QACnC,IAAMC,QAAQ,GAAG,IAAAC,qBAAA,EAAe,IAAf,EAAqBH,KAAK,CAACI,IAA3B,EAAiCJ,KAAK,CAACI,IAAvC,CAAjB;QACA,oBACE,qBAAC,YAAD;UACE,EAAE,EAAEJ,KAAK,CAACf,EADZ;UAEE,SAAS,EAAEG,OAAO,CAACiB,UAFrB;UAIE,OAAO,EAAE;YAAA,OAAMX,cAAc,CAACO,KAAD,CAApB;UAAA,CAJX;UAKE,QAAQ,EAAET,aAAa,CAACC,WAAD,CAAb,CAA2BR,EAA3B,KAAkCe,KAAK,CAACf,EALpD;UAME,YAAY,eAAE,qBAAC,gBAAD;YAAS,EAAE,EAAEe,KAAK,CAACf;UAAnB,EANhB;UAAA,uBAQE,qBAAC,QAAD;QARF,GAGOe,KAAK,CAACI,IAHb,CADF;MAYD,CAdA;IADH,EADD,GAmBCjB;EApBJ,EADF;AAyBD,CA7BD;;AA+BA,wCAAAH,SAAS,CAACsB,SAAV,GAAsB;EACpBrB,EAAE,EAAEsB,kBAAA,CAAUC,MADM;EAEpBtB,SAAS,EAAEqB,kBAAA,CAAUC,MAFD;EAGpBrB,YAAY,EAAEoB,kBAAA,CAAUE;AAHJ,CAAtB;eAMezB,S"}

package/dist/FilterGroup/LeftPanel/styles.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@material-ui/core");
+var _styles = require("@mui/styles");
 
 // accommodating the focus outline space with extra 4px
-var styles = (0, _core.makeStyles)(function () {
+var styles = (0, _styles.makeStyles)(function () {
   return {
     root: {
       "& $filterItem": {

package/dist/FilterGroup/LeftPanel/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["styles","makeStyles","root","display","justifyContent","filterItem"],"sources":["../../../src/FilterGroup/LeftPanel/styles.js"],"sourcesContent":["import { makeStyles } from \"@material-ui/core\";\n\n// accommodating the focus outline space with extra 4px\n\nconst styles = makeStyles(() => ({\n  root: {\n    \"& $filterItem\": {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n    },\n  },\n  filterItem: {},\n}));\n\nexport default styles;\n"],"mappings":";;;;;;;AAAA;;AAEA;AAEA,IAAMA,MAAM,GAAG,IAAAC,gBAAA,EAAW;EAAA,OAAO;IAC/BC,IAAI,EAAE;MACJ,iBAAiB;QACfC,OAAO,EAAE,MADM;QAEfC,cAAc,EAAE;MAFD;IADb,CADyB;IAO/BC,UAAU,EAAE;EAPmB,CAAP;AAAA,CAAX,CAAf;eAUeL,M"}
+{"version":3,"file":"styles.js","names":["styles","makeStyles","root","display","justifyContent","filterItem"],"sources":["../../../src/FilterGroup/LeftPanel/styles.js"],"sourcesContent":["import { makeStyles } from \"@mui/styles\";\n\n// accommodating the focus outline space with extra 4px\n\nconst styles = makeStyles(() => ({\n  root: {\n    \"& $filterItem\": {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n    },\n  },\n  filterItem: {},\n}));\n\nexport default styles;\n"],"mappings":";;;;;;;AAAA;;AAEA;AAEA,IAAMA,MAAM,GAAG,IAAAC,kBAAA,EAAW;EAAA,OAAO;IAC/BC,IAAI,EAAE;MACJ,iBAAiB;QACfC,OAAO,EAAE,MADM;QAEfC,cAAc,EAAE;MAFD;IADb,CADyB;IAO/BC,UAAU,EAAE;EAPmB,CAAP;AAAA,CAAX,CAAf;eAUeL,M"}

package/dist/FilterGroup/RightPanel/RightPanel.js

@@ -65,6 +65,8 @@ var _styles = _interopRequireDefault(require("./styles"));
 
 var _ = require("../..");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -76,7 +78,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var RightPanel = function RightPanel(_ref) {
   var id = _ref.id,
       className = _ref.className,
-      labels = _ref.labels;
+      labels = _ref.labels,
+      emptyElement = _ref.emptyElement;
   var classes = (0, _styles.default)();
 
   var _useState = (0, _react.useState)(""),
@@ -102,9 +105,7 @@ var RightPanel = function RightPanel(_ref) {
       activeGroup = _useContext.activeGroup;
 
   var activeGroupOptions = (0, _react.useMemo)(function () {
-    var _filterOptions$active;
-
-    return (((_filterOptions$active = filterOptions[activeGroup]) === null || _filterOptions$active === void 0 ? void 0 : _filterOptions$active.data) || []).map(function (option) {
+    return filterOptions[activeGroup].data.map(function (option) {
       return option.id;
     });
   }, [filterOptions, activeGroup]);
@@ -116,9 +117,7 @@ var RightPanel = function RightPanel(_ref) {
     });
   }, [filterValues, activeGroupOptions, activeGroup]);
   var listValues = (0, _react.useMemo)(function () {
-    var _filterOptions$active2;
-
-    return (((_filterOptions$active2 = filterOptions[activeGroup]) === null || _filterOptions$active2 === void 0 ? void 0 : _filterOptions$active2.data) || []).map(function (option) {
+    return filterOptions[activeGroup].data.map(function (option) {
       var _filterValues$activeG2;
 
       return _objectSpread(_objectSpread({}, option), {}, {
@@ -168,54 +167,64 @@ var RightPanel = function RightPanel(_ref) {
     var selectAll = labels.selectAll,
         multiSelectionConjunction = labels.multiSelectionConjunction;
     var nbrSelected = activeFilterValues === null || activeFilterValues === void 0 ? void 0 : activeFilterValues.length;
-
-    var defaultLabel = /*#__PURE__*/_react.default.createElement(_.HvTypography, {
-      component: "span"
-    }, nbrSelected > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("b", null, nbrSelected), " ".concat(multiSelectionConjunction, " ").concat(activeGroupOptions.length)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("b", null, selectAll), " (".concat(activeGroupOptions.length, ")")));
-
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: classes.selectAllContainer
-    }, /*#__PURE__*/_react.default.createElement(_.HvCheckBox, {
-      id: (0, _.setId)(id, "select-all"),
-      label: defaultLabel,
-      onChange: function onChange() {
-        return handleSelectAll();
-      },
-      classes: {
-        container: classes.selection
-      },
-      className: classes.selectAll,
-      indeterminate: anySelected && !allSelected,
-      checked: allSelected
-    }));
+    var defaultLabel = /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvTypography, {
+      component: "span",
+      children: nbrSelected > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
+          children: nbrSelected
+        }), " ".concat(multiSelectionConjunction, " ").concat(activeGroupOptions.length)]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
+          children: selectAll
+        }), " (".concat(activeGroupOptions.length, ")")]
+      })
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes.selectAllContainer,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvCheckBox, {
+        id: (0, _.setId)(id, "select-all"),
+        label: defaultLabel,
+        onChange: function onChange() {
+          return handleSelectAll();
+        },
+        classes: {
+          container: classes.selection
+        },
+        className: classes.selectAll,
+        indeterminate: anySelected && !allSelected,
+        checked: allSelected
+      })
+    });
   }, [activeFilterValues === null || activeFilterValues === void 0 ? void 0 : activeFilterValues.length, activeGroupOptions.length, allSelected, anySelected, classes.selectAll, classes.selectAllContainer, classes.selection, handleSelectAll, id, labels]);
-  return /*#__PURE__*/_react.default.createElement(_.HvPanel, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvPanel, {
     id: (0, _.setId)(id, "rightPanel"),
-    className: (0, _clsx.default)(className, classes.root)
-  }, /*#__PURE__*/_react.default.createElement(_.HvInput, {
-    id: (0, _.setId)(id, "search"),
-    classes: {
-      root: classes.search
-    },
-    type: "search",
-    placeholder: labels.searchBoxPlaceholder,
-    value: searchStr,
-    onChange: function onChange(event, str) {
-      return setSearchStr(str);
-    }
-  }), /*#__PURE__*/_react.default.createElement(SelectAll, null), /*#__PURE__*/_react.default.createElement(_.HvList, {
-    key: activeGroup,
-    id: (0, _.setId)(id, "list"),
-    className: classes.list,
-    values: listValues,
-    multiSelect: true,
-    useSelector: true,
-    showSelectAll: false,
-    onChange: onChangeHandler,
-    selectable: true,
-    condensed: true,
-    hasTooltips: true
-  }));
+    className: (0, _clsx.default)(className, classes.root),
+    children: listValues.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvInput, {
+        id: (0, _.setId)(id, "search"),
+        classes: {
+          root: classes.search
+        },
+        type: "search",
+        placeholder: labels.searchBoxPlaceholder,
+        value: searchStr,
+        onChange: function onChange(event, str) {
+          return setSearchStr(str);
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectAll, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvList, {
+        id: (0, _.setId)(id, "list"),
+        className: classes.list,
+        values: listValues,
+        multiSelect: true,
+        useSelector: true,
+        showSelectAll: false,
+        onChange: onChangeHandler,
+        selectable: true,
+        condensed: true,
+        hasTooltips: true
+      }, activeGroup)]
+    }) : emptyElement
+  });
 };
 
 process.env.NODE_ENV !== "production" ? RightPanel.propTypes = {
@@ -225,7 +234,8 @@ process.env.NODE_ENV !== "production" ? RightPanel.propTypes = {
     searchBoxPlaceholder: _propTypes.default.string,
     selectAll: _propTypes.default.string,
     multiSelectionConjunction: _propTypes.default.string
-  })
+  }),
+  emptyElement: _propTypes.default.node
 } : void 0;
 var _default = RightPanel;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"file":"RightPanel.js","names":["RightPanel","id","className","labels","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"],"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 }) => {\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      <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    </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};\n\nexport default RightPanel;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,UAAU,GAAG,SAAbA,UAAa,OAA+B;EAAA,IAA5BC,EAA4B,QAA5BA,EAA4B;EAAA,IAAxBC,SAAwB,QAAxBA,SAAwB;EAAA,IAAbC,MAAa,QAAbA,MAAa;EAChD,IAAMC,OAAO,GAAG,IAAAC,eAAA,GAAhB;;EACA,gBAAkC,IAAAC,eAAA,EAAS,EAAT,CAAlC;EAAA;EAAA,IAAOC,SAAP;EAAA,IAAkBC,YAAlB;;EACA,iBAAsC,IAAAF,eAAA,EAAS,KAAT,CAAtC;EAAA;EAAA,IAAOG,WAAP;EAAA,IAAoBC,cAApB;;EACA,iBAAsC,IAAAJ,eAAA,EAAS,KAAT,CAAtC;EAAA;EAAA,IAAOK,WAAP;EAAA,IAAoBC,cAApB;;EAEA,kBAKI,IAAAC,iBAAA,EAAWC,sCAAX,CALJ;EAAA,IACEC,aADF,eACEA,aADF;EAAA,wCAEEC,YAFF;EAAA,IAEEA,YAFF,sCAEiB,EAFjB;EAAA,IAGEC,eAHF,eAGEA,eAHF;EAAA,IAIEC,WAJF,eAIEA,WAJF;;EAOA,IAAMC,kBAAkB,GAAG,IAAAC,cAAA,EACzB;IAAA;;IAAA,OAAM,CAAC,0BAAAL,aAAa,CAACG,WAAD,CAAb,gFAA4BG,IAA5B,KAAoC,EAArC,EAAyCC,GAAzC,CAA6C,UAACC,MAAD;MAAA,OAAYA,MAAM,CAACtB,EAAnB;IAAA,CAA7C,CAAN;EAAA,CADyB,EAEzB,CAACc,aAAD,EAAgBG,WAAhB,CAFyB,CAA3B;EAKA,IAAMM,kBAAkB,GAAG,IAAAJ,cAAA,EACzB;IAAA;;IAAA,gCAAMJ,YAAY,CAACE,WAAD,CAAlB,0DAAM,sBAA2BO,MAA3B,CAAkC,UAACC,KAAD;MAAA,OAAWP,kBAAkB,CAACQ,QAAnB,CAA4BD,KAA5B,CAAX;IAAA,CAAlC,CAAN;EAAA,CADyB,EAEzB,CAACV,YAAD,EAAeG,kBAAf,EAAmCD,WAAnC,CAFyB,CAA3B;EAKA,IAAMU,UAAU,GAAG,IAAAR,cAAA,EACjB;IAAA;;IAAA,OACE,CAAC,2BAAAL,aAAa,CAACG,WAAD,CAAb,kFAA4BG,IAA5B,KAAoC,EAArC,EAAyCC,GAAzC,CAA6C,UAACC,MAAD;MAAA;;MAAA,uCACxCA,MADwC;QAE3CM,KAAK,EAAEN,MAAM,CAACO,IAF6B;QAG3CC,QAAQ,4BAAEf,YAAY,CAACE,WAAD,CAAd,2DAAE,uBAA2BS,QAA3B,CAAoCJ,MAAM,CAACtB,EAA3C,CAHiC;QAI3C+B,QAAQ,EAAET,MAAM,CAACO,IAAP,CAAYG,WAAZ,GAA0BC,OAA1B,CAAkC3B,SAAS,CAAC0B,WAAV,EAAlC,IAA6D;MAJ5B;IAAA,CAA7C,CADF;EAAA,CADiB,EAQjB,CAAClB,aAAD,EAAgBC,YAAhB,EAA8BE,WAA9B,EAA2CX,SAA3C,CARiB,CAAnB;EAWA,IAAM4B,eAAe,GAAG,IAAAC,kBAAA,EAAY,YAAM;IACxC,IAAMC,WAAW,GAAGb,kBAAH,aAAGA,kBAAH,uBAAGA,kBAAkB,CAAEc,MAAxC;IACA,IAAMC,YAAY,GAAGF,WAAW,GAAG,CAAnC;IACA,IAAMG,SAAS,GAAGH,WAAW,KAAKlB,kBAAkB,CAACmB,MAArD;IAEA1B,cAAc,CAAC2B,YAAD,CAAd;IACA7B,cAAc,CAAC6B,YAAY,IAAIC,SAAjB,CAAd;EACD,CAPuB,EAOrB,CAAChB,kBAAD,EAAqBL,kBAArB,CAPqB,CAAxB;EASA,IAAAsB,gBAAA,EAAU,YAAM;IACdN,eAAe;EAChB,CAFD,EAEG,CAACX,kBAAD,EAAqBW,eAArB,CAFH;EAIA,IAAAM,gBAAA,EAAU;IAAA,OAAMjC,YAAY,CAAC,EAAD,CAAlB;EAAA,CAAV,EAAkC,CAACU,WAAD,CAAlC;;EAEA,IAAMwB,eAAe,GAAG,SAAlBA,eAAkB,CAACC,MAAD,EAAY;IAClC,IAAMC,eAAe,GAAG7B,aAAa,CAACO,GAAd,CAAkB,UAACC,MAAD,EAASsB,CAAT;MAAA,OACxC3B,WAAW,KAAK2B,CAAhB,GACIF,MAAM,CAAClB,MAAP,CAAc,UAACqB,CAAD;QAAA,OAAOA,CAAC,CAACf,QAAT;MAAA,CAAd,EAAiCT,GAAjC,CAAqC,UAACwB,CAAD;QAAA,OAAOA,CAAC,CAAC7C,EAAT;MAAA,CAArC,CADJ,oCAESe,YAAY,CAAC6B,CAAD,CAAZ,IAAmB,EAF5B,CADwC;IAAA,CAAlB,CAAxB;IAKA5B,eAAe,CAAC2B,eAAD,CAAf;EACD,CAPD;;EASA,IAAMG,eAAe,GAAG,IAAAX,kBAAA,EAAY,YAAM;IACxC,IAAMQ,eAAe,GAAG,IAAAI,kBAAA,EAAUhC,YAAV,CAAxB;IACA4B,eAAe,CAAC1B,WAAD,CAAf,GAA+BP,WAAW,GAAG,EAAH,GAAQQ,kBAAlD;IAEAF,eAAe,CAAC2B,eAAD,CAAf;EACD,CALuB,EAKrB,CAAC1B,WAAD,EAAcC,kBAAd,EAAkCR,WAAlC,EAA+CK,YAA/C,EAA6DC,eAA7D,CALqB,CAAxB;EAOA;AACF;AACA;AACA;AACA;;EACE,IAAMgC,SAAS,GAAG,IAAAb,kBAAA,EAAY,YAAM;IAClC,IAAQc,SAAR,GAAiD/C,MAAjD,CAAQ+C,SAAR;IAAA,IAAmBC,yBAAnB,GAAiDhD,MAAjD,CAAmBgD,yBAAnB;IACA,IAAMd,WAAW,GAAGb,kBAAH,aAAGA,kBAAH,uBAAGA,kBAAkB,CAAEc,MAAxC;;IAEA,IAAMc,YAAY,gBAChB,6BAAC,cAAD;MAAc,SAAS,EAAC;IAAxB,GACGf,WAAW,GAAG,CAAd,gBACC,yEACE,wCAAIA,WAAJ,CADF,aAEOc,yBAFP,cAEoChC,kBAAkB,CAACmB,MAFvD,EADD,gBAMC,yEACE,wCAAIY,SAAJ,CADF,cAEQ/B,kBAAkB,CAACmB,MAF3B,OAPJ,CADF;;IAgBA,oBACE;MAAK,SAAS,EAAElC,OAAO,CAACiD;IAAxB,gBACE,6BAAC,YAAD;MACE,EAAE,EAAE,IAAAC,OAAA,EAAMrD,EAAN,EAAU,YAAV,CADN;MAEE,KAAK,EAAEmD,YAFT;MAGE,QAAQ,EAAE;QAAA,OAAML,eAAe,EAArB;MAAA,CAHZ;MAIE,OAAO,EAAE;QAAEQ,SAAS,EAAEnD,OAAO,CAACoD;MAArB,CAJX;MAKE,SAAS,EAAEpD,OAAO,CAAC8C,SALrB;MAME,aAAa,EAAEvC,WAAW,IAAI,CAACF,WANjC;MAOE,OAAO,EAAEA;IAPX,EADF,CADF;EAaD,CAjCiB,EAiCf,CACDe,kBADC,aACDA,kBADC,uBACDA,kBAAkB,CAAEc,MADnB,EAEDnB,kBAAkB,CAACmB,MAFlB,EAGD7B,WAHC,EAIDE,WAJC,EAKDP,OAAO,CAAC8C,SALP,EAMD9C,OAAO,CAACiD,kBANP,EAODjD,OAAO,CAACoD,SAPP,EAQDT,eARC,EASD9C,EATC,EAUDE,MAVC,CAjCe,CAAlB;EA8CA,oBACE,6BAAC,SAAD;IAAS,EAAE,EAAE,IAAAmD,OAAA,EAAMrD,EAAN,EAAU,YAAV,CAAb;IAAsC,SAAS,EAAE,IAAAwD,aAAA,EAAKvD,SAAL,EAAgBE,OAAO,CAACsD,IAAxB;EAAjD,gBACE,6BAAC,SAAD;IACE,EAAE,EAAE,IAAAJ,OAAA,EAAMrD,EAAN,EAAU,QAAV,CADN;IAEE,OAAO,EAAE;MACPyD,IAAI,EAAEtD,OAAO,CAACuD;IADP,CAFX;IAKE,IAAI,EAAC,QALP;IAME,WAAW,EAAExD,MAAM,CAACyD,oBANtB;IAOE,KAAK,EAAErD,SAPT;IAQE,QAAQ,EAAE,kBAACsD,KAAD,EAAQC,GAAR;MAAA,OAAgBtD,YAAY,CAACsD,GAAD,CAA5B;IAAA;EARZ,EADF,eAWE,6BAAC,SAAD,OAXF,eAYE,6BAAC,QAAD;IACE,GAAG,EAAE5C,WADP;IAEE,EAAE,EAAE,IAAAoC,OAAA,EAAMrD,EAAN,EAAU,MAAV,CAFN;IAGE,SAAS,EAAEG,OAAO,CAAC2D,IAHrB;IAIE,MAAM,EAAEnC,UAJV;IAKE,WAAW,MALb;IAME,WAAW,MANb;IAOE,aAAa,EAAE,KAPjB;IAQE,QAAQ,EAAEc,eARZ;IASE,UAAU,MATZ;IAUE,SAAS,MAVX;IAWE,WAAW;EAXb,EAZF,CADF;AA4BD,CAhJD;;AAkJA,wCAAA1C,UAAU,CAACgE,SAAX,GAAuB;EACrB/D,EAAE,EAAEgE,kBAAA,CAAUC,MADO;EAErBhE,SAAS,EAAE+D,kBAAA,CAAUC,MAFA;EAGrB/D,MAAM,EAAE8D,kBAAA,CAAUE,KAAV,CAAgB;IACtBP,oBAAoB,EAAEK,kBAAA,CAAUC,MADV;IAEtBhB,SAAS,EAAEe,kBAAA,CAAUC,MAFC;IAGtBf,yBAAyB,EAAEc,kBAAA,CAAUC;EAHf,CAAhB;AAHa,CAAvB;eAUelE,U"}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,UAAU,GAAG,SAAbA,UAAa,OAA6C;EAAA,IAA1CC,EAA0C,QAA1CA,EAA0C;EAAA,IAAtCC,SAAsC,QAAtCA,SAAsC;EAAA,IAA3BC,MAA2B,QAA3BA,MAA2B;EAAA,IAAnBC,YAAmB,QAAnBA,YAAmB;EAC9D,IAAMC,OAAO,GAAG,IAAAC,eAAA,GAAhB;;EACA,gBAAkC,IAAAC,eAAA,EAAS,EAAT,CAAlC;EAAA;EAAA,IAAOC,SAAP;EAAA,IAAkBC,YAAlB;;EACA,iBAAsC,IAAAF,eAAA,EAAS,KAAT,CAAtC;EAAA;EAAA,IAAOG,WAAP;EAAA,IAAoBC,cAApB;;EACA,iBAAsC,IAAAJ,eAAA,EAAS,KAAT,CAAtC;EAAA;EAAA,IAAOK,WAAP;EAAA,IAAoBC,cAApB;;EAEA,kBAKI,IAAAC,iBAAA,EAAWC,sCAAX,CALJ;EAAA,IACEC,aADF,eACEA,aADF;EAAA,wCAEEC,YAFF;EAAA,IAEEA,YAFF,sCAEiB,EAFjB;EAAA,IAGEC,eAHF,eAGEA,eAHF;EAAA,IAIEC,WAJF,eAIEA,WAJF;;EAOA,IAAMC,kBAAkB,GAAG,IAAAC,cAAA,EACzB;IAAA,OAAML,aAAa,CAACG,WAAD,CAAb,CAA2BG,IAA3B,CAAgCC,GAAhC,CAAoC,UAACC,MAAD;MAAA,OAAYA,MAAM,CAACvB,EAAnB;IAAA,CAApC,CAAN;EAAA,CADyB,EAEzB,CAACe,aAAD,EAAgBG,WAAhB,CAFyB,CAA3B;EAKA,IAAMM,kBAAkB,GAAG,IAAAJ,cAAA,EACzB;IAAA;;IAAA,gCAAMJ,YAAY,CAACE,WAAD,CAAlB,0DAAM,sBAA2BO,MAA3B,CAAkC,UAACC,KAAD;MAAA,OAAWP,kBAAkB,CAACQ,QAAnB,CAA4BD,KAA5B,CAAX;IAAA,CAAlC,CAAN;EAAA,CADyB,EAEzB,CAACV,YAAD,EAAeG,kBAAf,EAAmCD,WAAnC,CAFyB,CAA3B;EAKA,IAAMU,UAAU,GAAG,IAAAR,cAAA,EACjB;IAAA,OACEL,aAAa,CAACG,WAAD,CAAb,CAA2BG,IAA3B,CAAgCC,GAAhC,CAAoC,UAACC,MAAD;MAAA;;MAAA,uCAC/BA,MAD+B;QAElCM,KAAK,EAAEN,MAAM,CAACO,IAFoB;QAGlCC,QAAQ,4BAAEf,YAAY,CAACE,WAAD,CAAd,2DAAE,uBAA2BS,QAA3B,CAAoCJ,MAAM,CAACvB,EAA3C,CAHwB;QAIlCgC,QAAQ,EAAET,MAAM,CAACO,IAAP,CAAYG,WAAZ,GAA0BC,OAA1B,CAAkC3B,SAAS,CAAC0B,WAAV,EAAlC,IAA6D;MAJrC;IAAA,CAApC,CADF;EAAA,CADiB,EAQjB,CAAClB,aAAD,EAAgBC,YAAhB,EAA8BE,WAA9B,EAA2CX,SAA3C,CARiB,CAAnB;EAWA,IAAM4B,eAAe,GAAG,IAAAC,kBAAA,EAAY,YAAM;IACxC,IAAMC,WAAW,GAAGb,kBAAH,aAAGA,kBAAH,uBAAGA,kBAAkB,CAAEc,MAAxC;IACA,IAAMC,YAAY,GAAGF,WAAW,GAAG,CAAnC;IACA,IAAMG,SAAS,GAAGH,WAAW,KAAKlB,kBAAkB,CAACmB,MAArD;IAEA1B,cAAc,CAAC2B,YAAD,CAAd;IACA7B,cAAc,CAAC6B,YAAY,IAAIC,SAAjB,CAAd;EACD,CAPuB,EAOrB,CAAChB,kBAAD,EAAqBL,kBAArB,CAPqB,CAAxB;EASA,IAAAsB,gBAAA,EAAU,YAAM;IACdN,eAAe;EAChB,CAFD,EAEG,CAACX,kBAAD,EAAqBW,eAArB,CAFH;EAIA,IAAAM,gBAAA,EAAU;IAAA,OAAMjC,YAAY,CAAC,EAAD,CAAlB;EAAA,CAAV,EAAkC,CAACU,WAAD,CAAlC;;EAEA,IAAMwB,eAAe,GAAG,SAAlBA,eAAkB,CAACC,MAAD,EAAY;IAClC,IAAMC,eAAe,GAAG7B,aAAa,CAACO,GAAd,CAAkB,UAACC,MAAD,EAASsB,CAAT;MAAA,OACxC3B,WAAW,KAAK2B,CAAhB,GACIF,MAAM,CAAClB,MAAP,CAAc,UAACqB,CAAD;QAAA,OAAOA,CAAC,CAACf,QAAT;MAAA,CAAd,EAAiCT,GAAjC,CAAqC,UAACwB,CAAD;QAAA,OAAOA,CAAC,CAAC9C,EAAT;MAAA,CAArC,CADJ,oCAESgB,YAAY,CAAC6B,CAAD,CAAZ,IAAmB,EAF5B,CADwC;IAAA,CAAlB,CAAxB;IAKA5B,eAAe,CAAC2B,eAAD,CAAf;EACD,CAPD;;EASA,IAAMG,eAAe,GAAG,IAAAX,kBAAA,EAAY,YAAM;IACxC,IAAMQ,eAAe,GAAG,IAAAI,kBAAA,EAAUhC,YAAV,CAAxB;IACA4B,eAAe,CAAC1B,WAAD,CAAf,GAA+BP,WAAW,GAAG,EAAH,GAAQQ,kBAAlD;IAEAF,eAAe,CAAC2B,eAAD,CAAf;EACD,CALuB,EAKrB,CAAC1B,WAAD,EAAcC,kBAAd,EAAkCR,WAAlC,EAA+CK,YAA/C,EAA6DC,eAA7D,CALqB,CAAxB;EAOA;AACF;AACA;AACA;AACA;;EACE,IAAMgC,SAAS,GAAG,IAAAb,kBAAA,EAAY,YAAM;IAClC,IAAQc,SAAR,GAAiDhD,MAAjD,CAAQgD,SAAR;IAAA,IAAmBC,yBAAnB,GAAiDjD,MAAjD,CAAmBiD,yBAAnB;IACA,IAAMd,WAAW,GAAGb,kBAAH,aAAGA,kBAAH,uBAAGA,kBAAkB,CAAEc,MAAxC;IAEA,IAAMc,YAAY,gBAChB,qBAAC,cAAD;MAAc,SAAS,EAAC,MAAxB;MAAA,UACGf,WAAW,GAAG,CAAd,gBACC;QAAA,wBACE;UAAA,UAAIA;QAAJ,EADF,aAEOc,yBAFP,cAEoChC,kBAAkB,CAACmB,MAFvD;MAAA,EADD,gBAMC;QAAA,wBACE;UAAA,UAAIY;QAAJ,EADF,cAEQ/B,kBAAkB,CAACmB,MAF3B;MAAA;IAPJ,EADF;IAgBA,oBACE;MAAK,SAAS,EAAElC,OAAO,CAACiD,kBAAxB;MAAA,uBACE,qBAAC,YAAD;QACE,EAAE,EAAE,IAAAC,OAAA,EAAMtD,EAAN,EAAU,YAAV,CADN;QAEE,KAAK,EAAEoD,YAFT;QAGE,QAAQ,EAAE;UAAA,OAAML,eAAe,EAArB;QAAA,CAHZ;QAIE,OAAO,EAAE;UAAEQ,SAAS,EAAEnD,OAAO,CAACoD;QAArB,CAJX;QAKE,SAAS,EAAEpD,OAAO,CAAC8C,SALrB;QAME,aAAa,EAAEvC,WAAW,IAAI,CAACF,WANjC;QAOE,OAAO,EAAEA;MAPX;IADF,EADF;EAaD,CAjCiB,EAiCf,CACDe,kBADC,aACDA,kBADC,uBACDA,kBAAkB,CAAEc,MADnB,EAEDnB,kBAAkB,CAACmB,MAFlB,EAGD7B,WAHC,EAIDE,WAJC,EAKDP,OAAO,CAAC8C,SALP,EAMD9C,OAAO,CAACiD,kBANP,EAODjD,OAAO,CAACoD,SAPP,EAQDT,eARC,EASD/C,EATC,EAUDE,MAVC,CAjCe,CAAlB;EA8CA,oBACE,qBAAC,SAAD;IAAS,EAAE,EAAE,IAAAoD,OAAA,EAAMtD,EAAN,EAAU,YAAV,CAAb;IAAsC,SAAS,EAAE,IAAAyD,aAAA,EAAKxD,SAAL,EAAgBG,OAAO,CAACsD,IAAxB,CAAjD;IAAA,UACG9B,UAAU,CAACU,MAAX,GAAoB,CAApB,gBACC;MAAA,wBACE,qBAAC,SAAD;QACE,EAAE,EAAE,IAAAgB,OAAA,EAAMtD,EAAN,EAAU,QAAV,CADN;QAEE,OAAO,EAAE;UACP0D,IAAI,EAAEtD,OAAO,CAACuD;QADP,CAFX;QAKE,IAAI,EAAC,QALP;QAME,WAAW,EAAEzD,MAAM,CAAC0D,oBANtB;QAOE,KAAK,EAAErD,SAPT;QAQE,QAAQ,EAAE,kBAACsD,KAAD,EAAQC,GAAR;UAAA,OAAgBtD,YAAY,CAACsD,GAAD,CAA5B;QAAA;MARZ,EADF,eAWE,qBAAC,SAAD,KAXF,eAYE,qBAAC,QAAD;QAEE,EAAE,EAAE,IAAAR,OAAA,EAAMtD,EAAN,EAAU,MAAV,CAFN;QAGE,SAAS,EAAEI,OAAO,CAAC2D,IAHrB;QAIE,MAAM,EAAEnC,UAJV;QAKE,WAAW,MALb;QAME,WAAW,MANb;QAOE,aAAa,EAAE,KAPjB;QAQE,QAAQ,EAAEc,eARZ;QASE,UAAU,MATZ;QAUE,SAAS,MAVX;QAWE,WAAW;MAXb,GACOxB,WADP,CAZF;IAAA,EADD,GA4BCf;EA7BJ,EADF;AAkCD,CAtJD;;AAwJA,wCAAAJ,UAAU,CAACiE,SAAX,GAAuB;EACrBhE,EAAE,EAAEiE,kBAAA,CAAUC,MADO;EAErBjE,SAAS,EAAEgE,kBAAA,CAAUC,MAFA;EAGrBhE,MAAM,EAAE+D,kBAAA,CAAUE,KAAV,CAAgB;IACtBP,oBAAoB,EAAEK,kBAAA,CAAUC,MADV;IAEtBhB,SAAS,EAAEe,kBAAA,CAAUC,MAFC;IAGtBf,yBAAyB,EAAEc,kBAAA,CAAUC;EAHf,CAAhB,CAHa;EAQrB/D,YAAY,EAAE8D,kBAAA,CAAUG;AARH,CAAvB;eAWerE,U"}

package/dist/FilterGroup/RightPanel/styles.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@material-ui/core");
+var _styles = require("@mui/styles");
 
-var styles = (0, _core.makeStyles)(function (theme) {
+var styles = (0, _styles.makeStyles)(function (theme) {
   return {
     root: {
       "& ul$list": {

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["styles","makeStyles","theme","root","width","height","overflowY","margin","padding","search","marginBottom","hvSpacing","list","hiddenOption","display","selectAllContainer","position","zIndex","selectAll"],"sources":["../../../src/FilterGroup/RightPanel/styles.js"],"sourcesContent":["import { makeStyles } from \"@material-ui/core\";\n\nconst styles = makeStyles((theme) => ({\n  root: {\n    \"& ul$list\": {\n      width: \"calc(100% + 8px)\",\n      height: \"calc(100% - 70px)\",\n      overflowY: \"auto\",\n      margin: -4,\n      padding: 4,\n    },\n  },\n  search: {\n    marginBottom: theme.hvSpacing(\"xs\"),\n  },\n  list: {},\n  hiddenOption: {\n    display: \"none\",\n  },\n  selectAllContainer: {\n    // prevent the focus ring to be hidden by sibling hover background\n    \"&\": {\n      position: \"relative\",\n      zIndex: 0,\n    },\n    \"&:focus-within\": {\n      zIndex: 1,\n    },\n    // IE fallback code (using focus-within-polyfill)\n    \"&.focus-within\": {\n      zIndex: 1,\n    },\n  },\n  selectAll: {\n    width: \"100%\",\n  },\n}));\n\nexport default styles;\n"],"mappings":";;;;;;;AAAA;;AAEA,IAAMA,MAAM,GAAG,IAAAC,gBAAA,EAAW,UAACC,KAAD;EAAA,OAAY;IACpCC,IAAI,EAAE;MACJ,aAAa;QACXC,KAAK,EAAE,kBADI;QAEXC,MAAM,EAAE,mBAFG;QAGXC,SAAS,EAAE,MAHA;QAIXC,MAAM,EAAE,CAAC,CAJE;QAKXC,OAAO,EAAE;MALE;IADT,CAD8B;IAUpCC,MAAM,EAAE;MACNC,YAAY,EAAER,KAAK,CAACS,SAAN,CAAgB,IAAhB;IADR,CAV4B;IAapCC,IAAI,EAAE,EAb8B;IAcpCC,YAAY,EAAE;MACZC,OAAO,EAAE;IADG,CAdsB;IAiBpCC,kBAAkB,EAAE;MAClB;MACA,KAAK;QACHC,QAAQ,EAAE,UADP;QAEHC,MAAM,EAAE;MAFL,CAFa;MAMlB,kBAAkB;QAChBA,MAAM,EAAE;MADQ,CANA;MASlB;MACA,kBAAkB;QAChBA,MAAM,EAAE;MADQ;IAVA,CAjBgB;IA+BpCC,SAAS,EAAE;MACTd,KAAK,EAAE;IADE;EA/ByB,CAAZ;AAAA,CAAX,CAAf;eAoCeJ,M"}
+{"version":3,"file":"styles.js","names":["styles","makeStyles","theme","root","width","height","overflowY","margin","padding","search","marginBottom","hvSpacing","list","hiddenOption","display","selectAllContainer","position","zIndex","selectAll"],"sources":["../../../src/FilterGroup/RightPanel/styles.js"],"sourcesContent":["import { makeStyles } from \"@mui/styles\";\n\nconst styles = makeStyles((theme) => ({\n  root: {\n    \"& ul$list\": {\n      width: \"calc(100% + 8px)\",\n      height: \"calc(100% - 70px)\",\n      overflowY: \"auto\",\n      margin: -4,\n      padding: 4,\n    },\n  },\n  search: {\n    marginBottom: theme.hvSpacing(\"xs\"),\n  },\n  list: {},\n  hiddenOption: {\n    display: \"none\",\n  },\n  selectAllContainer: {\n    // prevent the focus ring to be hidden by sibling hover background\n    \"&\": {\n      position: \"relative\",\n      zIndex: 0,\n    },\n    \"&:focus-within\": {\n      zIndex: 1,\n    },\n    // IE fallback code (using focus-within-polyfill)\n    \"&.focus-within\": {\n      zIndex: 1,\n    },\n  },\n  selectAll: {\n    width: \"100%\",\n  },\n}));\n\nexport default styles;\n"],"mappings":";;;;;;;AAAA;;AAEA,IAAMA,MAAM,GAAG,IAAAC,kBAAA,EAAW,UAACC,KAAD;EAAA,OAAY;IACpCC,IAAI,EAAE;MACJ,aAAa;QACXC,KAAK,EAAE,kBADI;QAEXC,MAAM,EAAE,mBAFG;QAGXC,SAAS,EAAE,MAHA;QAIXC,MAAM,EAAE,CAAC,CAJE;QAKXC,OAAO,EAAE;MALE;IADT,CAD8B;IAUpCC,MAAM,EAAE;MACNC,YAAY,EAAER,KAAK,CAACS,SAAN,CAAgB,IAAhB;IADR,CAV4B;IAapCC,IAAI,EAAE,EAb8B;IAcpCC,YAAY,EAAE;MACZC,OAAO,EAAE;IADG,CAdsB;IAiBpCC,kBAAkB,EAAE;MAClB;MACA,KAAK;QACHC,QAAQ,EAAE,UADP;QAEHC,MAAM,EAAE;MAFL,CAFa;MAMlB,kBAAkB;QAChBA,MAAM,EAAE;MADQ,CANA;MASlB;MACA,kBAAkB;QAChBA,MAAM,EAAE;MADQ;IAVA,CAjBgB;IA+BpCC,SAAS,EAAE;MACTd,KAAK,EAAE;IADE;EA/ByB,CAAZ;AAAA,CAAX,CAAf;eAoCeJ,M"}

package/dist/FilterGroup/styles.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@material-ui/core");
+var _styles = require("@mui/styles");
 
-var styles = (0, _core.makeStyles)(function (theme) {
+var styles = (0, _styles.makeStyles)(function (theme) {
   return {
     dropdownPanel: {
       backgroundColor: theme.hv.palette.atmosphere.atmo1

package/dist/FilterGroup/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["styles","makeStyles","theme","dropdownPanel","backgroundColor","hv","palette","atmosphere","atmo1","actionBar","width","labelContainer","display","alignItems","label","paddingBottom"],"sources":["../../src/FilterGroup/styles.js"],"sourcesContent":["import { makeStyles } from \"@material-ui/core\";\n\nconst styles = makeStyles((theme) => ({\n  dropdownPanel: {\n    backgroundColor: theme.hv.palette.atmosphere.atmo1,\n  },\n  actionBar: {\n    width: \"100%\",\n  },\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    paddingBottom: \"6px\",\n    display: \"block\",\n  },\n}));\n\nexport default styles;\n"],"mappings":";;;;;;;AAAA;;AAEA,IAAMA,MAAM,GAAG,IAAAC,gBAAA,EAAW,UAACC,KAAD;EAAA,OAAY;IACpCC,aAAa,EAAE;MACbC,eAAe,EAAEF,KAAK,CAACG,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BC;IADhC,CADqB;IAIpCC,SAAS,EAAE;MACTC,KAAK,EAAE;IADE,CAJyB;IAOpCC,cAAc,EAAE;MACdC,OAAO,EAAE,MADK;MAEdC,UAAU,EAAE;IAFE,CAPoB;IAWpCC,KAAK,EAAE;MACLC,aAAa,EAAE,KADV;MAELH,OAAO,EAAE;IAFJ;EAX6B,CAAZ;AAAA,CAAX,CAAf;eAiBeZ,M"}
+{"version":3,"file":"styles.js","names":["styles","makeStyles","theme","dropdownPanel","backgroundColor","hv","palette","atmosphere","atmo1","actionBar","width","labelContainer","display","alignItems","label","paddingBottom"],"sources":["../../src/FilterGroup/styles.js"],"sourcesContent":["import { makeStyles } from \"@mui/styles\";\n\nconst styles = makeStyles((theme) => ({\n  dropdownPanel: {\n    backgroundColor: theme.hv.palette.atmosphere.atmo1,\n  },\n  actionBar: {\n    width: \"100%\",\n  },\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    paddingBottom: \"6px\",\n    display: \"block\",\n  },\n}));\n\nexport default styles;\n"],"mappings":";;;;;;;AAAA;;AAEA,IAAMA,MAAM,GAAG,IAAAC,kBAAA,EAAW,UAACC,KAAD;EAAA,OAAY;IACpCC,aAAa,EAAE;MACbC,eAAe,EAAEF,KAAK,CAACG,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BC;IADhC,CADqB;IAIpCC,SAAS,EAAE;MACTC,KAAK,EAAE;IADE,CAJyB;IAOpCC,cAAc,EAAE;MACdC,OAAO,EAAE,MADK;MAEdC,UAAU,EAAE;IAFE,CAPoB;IAWpCC,KAAK,EAAE;MACLC,aAAa,EAAE,KADV;MAELH,OAAO,EAAE;IAFJ;EAX6B,CAAZ;AAAA,CAAX,CAAf;eAiBeZ,M"}

package/dist/Focus/Focus.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { StandardProps } from "@material-ui/core";
+import { StandardProps } from "@mui/material";
 
 export type HvFocusStrategies = "listbox" | "menu" | "card" | "grid";
 

package/dist/Focus/Focus.js

@@ -47,7 +47,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
 
-var _core = require("@material-ui/core");
+var _styles = require("@mui/styles");
 
 var _utils = require("../utils");
 
@@ -55,7 +55,9 @@ var _ConditionalWrapper = _interopRequireDefault(require("../utils/ConditionalWr
 
 var _utils2 = require("./utils");
 
-var _styles = _interopRequireDefault(require("./styles"));
+var _styles2 = _interopRequireDefault(require("./styles"));
+
+var _jsxRuntime = require("react/jsx-runtime");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -426,26 +428,28 @@ var Focus = function Focus(props) {
   if (disabled) return children;
 
   var focusWrapper = function focusWrapper(childrenToWrap) {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: classes.externalReference
-    }, childrenToWrap, showFocus && /*#__PURE__*/_react.default.createElement("div", {
-      className: classes.falseFocus
-    }));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: classes.externalReference,
+      children: [childrenToWrap, showFocus && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: classes.falseFocus
+      })]
+    });
   };
 
-  return /*#__PURE__*/_react.default.createElement(_ConditionalWrapper.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
     condition: useFalseFocus,
-    wrapper: focusWrapper
-  }, /*#__PURE__*/_react.default.cloneElement(children, {
-    className: (0, _clsx.default)(children.props.className, classes.root, filterClass, selected && classes.selected, disabledClass && classes.disabled, focusDisabled && classes.focusDisabled),
-    ref: config,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    onMouseDown: onMouseDown,
-    onKeyDown: onKeyDown,
-    onKeyUp: onKeyUp,
-    selected: selected
-  }));
+    wrapper: focusWrapper,
+    children: /*#__PURE__*/_react.default.cloneElement(children, {
+      className: (0, _clsx.default)(children.props.className, classes.root, filterClass, selected && classes.selected, disabledClass && classes.disabled, focusDisabled && classes.focusDisabled),
+      ref: config,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onMouseDown: onMouseDown,
+      onKeyDown: onKeyDown,
+      onKeyUp: onKeyUp,
+      selected: selected
+    })
+  });
 };
 
 process.env.NODE_ENV !== "production" ? Focus.propTypes = {
@@ -556,7 +560,7 @@ process.env.NODE_ENV !== "production" ? Focus.propTypes = {
   navigationJump: _propTypes.default.number
 } : void 0;
 
-var _default = (0, _core.withStyles)(_styles.default, {
+var _default = (0, _styles.withStyles)(_styles2.default, {
   name: "HvFocus"
 })(Focus);