@reltio/components 1.4.2188 → 1.4.2189

package/AdvancedSearchFabButton/AdvancedSearchFabButton.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 type Props = {
     tooltipTitle?: string;
+    dataReltioId?: string;
     onClick: () => void;
 };
 export declare const AdvancedSearchFabButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;

package/AdvancedSearchFabButton/AdvancedSearchFabButton.js

@@ -29,8 +29,8 @@ import { withTooltip } from '../HOCs/withTooltip';
 import styles from './AdvancedSearchFabButton.module.css';
 var FabButtonWithTooltip = withTooltip(Fab);
 export var AdvancedSearchFabButton = forwardRef(function (_a, ref) {
-    var tooltipTitle = _a.tooltipTitle, onClick = _a.onClick, otherProps = __rest(_a, ["tooltipTitle", "onClick"]);
-    return (React.createElement(FabButtonWithTooltip, __assign({ tooltipTitle: tooltipTitle || i18n.text('Open advanced search'), tooltipPlacement: "bottom-end", variant: "extended", classes: { root: styles.buttonRoot, extended: styles.buttonExtended }, onClick: onClick, "data-reltio-id": "reltio-advanced-search-fab-button", ref: ref }, otherProps),
+    var tooltipTitle = _a.tooltipTitle, dataReltioId = _a.dataReltioId, onClick = _a.onClick, otherProps = __rest(_a, ["tooltipTitle", "dataReltioId", "onClick"]);
+    return (React.createElement(FabButtonWithTooltip, __assign({ tooltipTitle: tooltipTitle || i18n.text('Open advanced search'), tooltipPlacement: "bottom-end", variant: "extended", classes: { root: styles.buttonRoot, extended: styles.buttonExtended }, onClick: onClick, "data-reltio-id": dataReltioId || 'reltio-advanced-search-fab-button', ref: ref }, otherProps),
         React.createElement(TuneIcon, { color: "primary", className: styles.menuIcon }),
         React.createElement("span", { className: styles.buttonLabel }, i18n.text('Advanced search')),
         React.createElement(RightArrowIcon, { color: "action", className: styles.goToActionIcon })));

package/AttributesFiltersButton/AttributesFiltersButton.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { PopoverOrigin } from '@mui/material/Popover';
 import { SearchFilter } from '@reltio/mdm-sdk';
 import { AttributeSelectionInfo, AttributeSelectorItemsGroup, AttributesFilterComponentsClasses, AttributesTypesGroup } from '../types';
 type Props = {
@@ -16,6 +17,7 @@ type Props = {
     onTogglePopup?: (open: boolean) => void;
     isFiltersApplied?: boolean;
     dataReltioId?: string;
+    FilterButton?: React.ElementType;
     ButtonIcon?: React.ElementType;
     onFilterAttributeChange?: (attrSelectInfo: AttributeSelectionInfo) => void;
     onClear?: () => void;
@@ -23,6 +25,7 @@ type Props = {
     onApply?: () => void;
     popoverAnchorRef?: React.MutableRefObject<HTMLDivElement>;
     title?: string;
+    anchorOrigin?: PopoverOrigin;
 };
-declare const _default: React.MemoExoticComponent<({ filters: filtersProp, classes, attributesTypesGroups, attributesTypesGroupFilter, onChange, components, children, onTogglePopup, isFiltersApplied: isFiltersAppliedProp, dataReltioId, onFilterAttributeChange, onCancel, onClear, onApply, ButtonIcon, popoverAnchorRef, title }: Props) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ filters: filtersProp, classes, attributesTypesGroups, attributesTypesGroupFilter, onChange, components, children, onTogglePopup, isFiltersApplied: isFiltersAppliedProp, dataReltioId, onFilterAttributeChange, onCancel, onClear, onApply, FilterButton, ButtonIcon, popoverAnchorRef, title, anchorOrigin }: Props) => React.JSX.Element>;
 export default _default;

package/AttributesFiltersButton/AttributesFiltersButton.js

@@ -12,7 +12,7 @@ import { ActionButtons } from './components/ActionButtons/';
 import { useStyles } from './styles';
 var AttributesFiltersButton = function (_a) {
     var _b;
-    var filtersProp = _a.filters, classes = _a.classes, attributesTypesGroups = _a.attributesTypesGroups, attributesTypesGroupFilter = _a.attributesTypesGroupFilter, onChange = _a.onChange, components = _a.components, children = _a.children, onTogglePopup = _a.onTogglePopup, isFiltersAppliedProp = _a.isFiltersApplied, dataReltioId = _a.dataReltioId, onFilterAttributeChange = _a.onFilterAttributeChange, onCancel = _a.onCancel, onClear = _a.onClear, onApply = _a.onApply, _c = _a.ButtonIcon, ButtonIcon = _c === void 0 ? FilterIcon : _c, popoverAnchorRef = _a.popoverAnchorRef, title = _a.title;
+    var filtersProp = _a.filters, classes = _a.classes, attributesTypesGroups = _a.attributesTypesGroups, attributesTypesGroupFilter = _a.attributesTypesGroupFilter, onChange = _a.onChange, components = _a.components, children = _a.children, onTogglePopup = _a.onTogglePopup, isFiltersAppliedProp = _a.isFiltersApplied, dataReltioId = _a.dataReltioId, onFilterAttributeChange = _a.onFilterAttributeChange, onCancel = _a.onCancel, onClear = _a.onClear, onApply = _a.onApply, FilterButton = _a.FilterButton, _c = _a.ButtonIcon, ButtonIcon = _c === void 0 ? FilterIcon : _c, popoverAnchorRef = _a.popoverAnchorRef, title = _a.title, anchorOrigin = _a.anchorOrigin;
     var styles = useStyles();
     var buttonRef = useRef();
     var _d = useState(false), isOpen = _d[0], setIsOpen = _d[1];
@@ -46,12 +46,12 @@ var AttributesFiltersButton = function (_a) {
         setFilters([]);
     }, [onClear]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { "data-reltio-id": dataReltioId, ref: buttonRef, color: buttonColor, classes: {
+        FilterButton ? (React.createElement(FilterButton, { onClick: togglePopup, ref: buttonRef, dataReltioId: dataReltioId })) : (React.createElement(Button, { "data-reltio-id": dataReltioId, ref: buttonRef, color: buttonColor, classes: {
                 root: classNames(styles.triggerButton, classes === null || classes === void 0 ? void 0 : classes.triggerButton),
                 textPrimary: styles.changedFiltersIndicator
             }, onClick: togglePopup },
-            React.createElement(ButtonIcon, { color: buttonColor })),
-        React.createElement(Popover, { open: isOpen, classes: { paper: classNames(styles.popupContent, classes === null || classes === void 0 ? void 0 : classes.filterPopup) }, anchorEl: (_b = popoverAnchorRef === null || popoverAnchorRef === void 0 ? void 0 : popoverAnchorRef.current) !== null && _b !== void 0 ? _b : buttonRef.current, onClose: togglePopup, anchorOrigin: {
+            React.createElement(ButtonIcon, { color: buttonColor }))),
+        React.createElement(Popover, { open: isOpen, classes: { paper: classNames(styles.popupContent, classes === null || classes === void 0 ? void 0 : classes.filterPopup) }, anchorEl: (_b = popoverAnchorRef === null || popoverAnchorRef === void 0 ? void 0 : popoverAnchorRef.current) !== null && _b !== void 0 ? _b : buttonRef.current, onClose: togglePopup, anchorOrigin: anchorOrigin !== null && anchorOrigin !== void 0 ? anchorOrigin : {
                 vertical: 'bottom',
                 horizontal: (popoverAnchorRef === null || popoverAnchorRef === void 0 ? void 0 : popoverAnchorRef.current) ? 'left' : 'right'
             }, transformOrigin: {

package/Drawer/Drawer.d.ts

@@ -1,8 +1,3 @@
 import React from 'react';
 import { DrawerProps } from '@mui/material/Drawer';
-type Props = DrawerProps;
-export declare const Drawer: {
-    ({ open, children, ...otherProps }: Props): React.JSX.Element;
-    displayName: string;
-};
-export {};
+export declare const Drawer: React.ForwardRefExoticComponent<Omit<DrawerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/Drawer/Drawer.js

@@ -20,10 +20,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, forwardRef } from 'react';
 import MUIDrawer from '@mui/material/Drawer';
 import { useTheme } from '@mui/material/styles';
-export var Drawer = function (_a) {
+export var Drawer = forwardRef(function (_a, ref) {
     var _b = _a.open, open = _b === void 0 ? true : _b, children = _a.children, otherProps = __rest(_a, ["open", "children"]);
     var _c = useState(open), drawerContentsVisible = _c[0], setDrawerContentVisible = _c[1];
     var hideDelay = useTheme().transitions.duration.leavingScreen;
@@ -42,6 +42,6 @@ export var Drawer = function (_a) {
             }
         }
     }, [open, hideDelay, drawerContentsVisible]);
-    return (React.createElement(MUIDrawer, __assign({ open: open }, otherProps), drawerContentsVisible && children));
-};
+    return (React.createElement(MUIDrawer, __assign({ open: open }, otherProps, { ref: ref }), drawerContentsVisible && children));
+});
 Drawer.displayName = 'Drawer';

package/FacetGroup/FacetGroup.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 type Props = {
     children?: React.ReactNode;
     title?: string;
+    dataReltioId?: string;
 };
-export declare const FacetGroup: ({ children, title }: Props) => React.JSX.Element;
+export declare const FacetGroup: ({ children, title, dataReltioId }: Props) => React.JSX.Element;
 export {};

package/FacetGroup/FacetGroup.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { FacetGroupTitle } from '../FacetGroupTitle';
 import styles from './FacetGroup.module.css';
 export var FacetGroup = function (_a) {
-    var children = _a.children, _b = _a.title, title = _b === void 0 ? '' : _b;
-    return (React.createElement("div", { className: styles.facetGroupContainer },
+    var children = _a.children, _b = _a.title, title = _b === void 0 ? '' : _b, dataReltioId = _a.dataReltioId;
+    return (React.createElement("div", { className: styles.facetGroupContainer, "data-reltio-id": dataReltioId },
         React.createElement(FacetGroupTitle, { title: title }),
         children));
 };

package/FacetsSelector/helpers.d.ts

@@ -9,8 +9,5 @@ declare const isSelectedFacet: ({ facet, selectedFacetsFieldNames }: {
     facet: any;
     selectedFacetsFieldNames: any;
 }) => boolean;
-declare const constructPopoverOrigin: (verticalOrigin: PopoverOrigin["vertical"], horizontalOrigin?: PopoverOrigin["horizontal"]) => {
-    vertical: number | "bottom" | "top" | "center";
-    horizontal: number | "left" | "right" | "center";
-};
+declare const constructPopoverOrigin: (verticalOrigin: PopoverOrigin["vertical"], horizontalOrigin?: PopoverOrigin["horizontal"]) => PopoverOrigin;
 export { adjustVerticalPopupLayout, filterItemsInGroups, isSelectedFacet, constructPopoverOrigin };

package/QuickFiltersDrawer/QuickFiltersDrawer.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 type Props = {
     children: React.ReactNode;
-    isOpen?: boolean;
+    showDrawer?: boolean;
 };
-export declare const QuickFiltersDrawer: ({ children, isOpen, ...otherProps }: Props) => React.JSX.Element;
+export declare const QuickFiltersDrawer: ({ children, showDrawer, ...otherProps }: Props) => React.JSX.Element;
 export {};

package/QuickFiltersDrawer/QuickFiltersDrawer.js

@@ -20,14 +20,30 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import React, { useState } from 'react';
+import classnames from 'classnames';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import Collapse from '@mui/material/Collapse';
+import Fade from '@mui/material/Fade';
 import { Drawer } from '../Drawer';
+import { SmallIconButton } from '../SmallIconButton';
 import styles from './QuickFiltersDrawer.module.css';
 export var QuickFiltersDrawer = function (_a) {
-    var children = _a.children, _b = _a.isOpen, isOpen = _b === void 0 ? true : _b, otherProps = __rest(_a, ["children", "isOpen"]);
-    return (React.createElement(Drawer, __assign({ variant: 'persistent', anchor: 'left', open: isOpen, classes: {
-            root: styles.drawer,
-            paper: styles.drawerPaper,
-            docked: styles.docked
-        } }, otherProps), children));
+    var _b, _c;
+    var children = _a.children, _d = _a.showDrawer, showDrawer = _d === void 0 ? true : _d, otherProps = __rest(_a, ["children", "showDrawer"]);
+    var _e = useState(true), isExpanded = _e[0], setIsExpanded = _e[1];
+    var handleToggleDrawer = function () {
+        setIsExpanded(!isExpanded);
+    };
+    return (React.createElement("div", { className: classnames(styles.drawerContainer, (_b = {}, _b[styles.drawerCollapsed] = !isExpanded, _b)) },
+        React.createElement(Collapse, { in: isExpanded, orientation: "horizontal", timeout: isExpanded ? 200 : 400, unmountOnExit: true },
+            React.createElement(Fade, { in: isExpanded, timeout: isExpanded ? 400 : 200 },
+                React.createElement(Drawer, __assign({ variant: 'persistent', anchor: 'left', open: showDrawer, classes: {
+                        root: styles.drawer,
+                        paper: styles.drawerPaper,
+                        docked: styles.docked
+                    } }, otherProps), children))),
+        showDrawer && (React.createElement("div", { className: styles.drawerTrigger },
+            React.createElement("div", { className: styles.drawerTriggerIconWrapper },
+                React.createElement(SmallIconButton, { className: styles.drawerTriggerIcon, iconClassName: classnames((_c = {}, _c[styles.drawerCollapsedIcon] = !isExpanded, _c)), icon: ChevronLeftIcon, size: "M", onClick: handleToggleDrawer }))))));
 };

package/QuickFiltersDrawer/QuickFiltersDrawer.module.css.js

@@ -1,9 +1,9 @@
-const styles = {"drawer":"QuickFiltersDrawer-drawer--NXZwq","docked":"QuickFiltersDrawer-docked--xMI4g","drawerPaper":"QuickFiltersDrawer-drawerPaper--OkbOT"};
+const styles = {"drawerContainer":"QuickFiltersDrawer-drawerContainer--MqIvN","drawerTriggerIconWrapper":"QuickFiltersDrawer-drawerTriggerIconWrapper--9ziQU","drawer":"QuickFiltersDrawer-drawer--NXZwq","docked":"QuickFiltersDrawer-docked--xMI4g","drawerPaper":"QuickFiltersDrawer-drawerPaper--OkbOT","drawerTrigger":"QuickFiltersDrawer-drawerTrigger--2O2ev","drawerCollapsed":"QuickFiltersDrawer-drawerCollapsed--VoNFo","drawerTriggerIcon":"QuickFiltersDrawer-drawerTriggerIcon--sc8lb","drawerCollapsedIcon":"QuickFiltersDrawer-drawerCollapsedIcon--o7My2"};
 if (typeof document !== 'undefined') {
     const head = document.head || document.getElementsByTagName('head')[0]
     const style = document.createElement('style');
     style.type = 'text/css'
-    style.innerHTML = `.QuickFiltersDrawer-drawer--NXZwq{flex:0 0 288px!important}.QuickFiltersDrawer-docked--xMI4g{flex:0 0 288px}.QuickFiltersDrawer-drawerPaper--OkbOT{border-right:1px solid rgba(0,0,0,.33);display:flex;flex-direction:column;position:relative;width:288px}`;
+    style.innerHTML = `.QuickFiltersDrawer-drawerContainer--MqIvN{background-color:#fff;display:flex;flex-direction:row}.QuickFiltersDrawer-drawerContainer--MqIvN:hover .QuickFiltersDrawer-drawerTriggerIconWrapper--9ziQU{display:block}.QuickFiltersDrawer-drawer--NXZwq{flex:0 0 288px!important;height:100%}.QuickFiltersDrawer-docked--xMI4g{flex:0 0 288px}.QuickFiltersDrawer-drawerPaper--OkbOT{border-right:1px solid rgba(0,0,0,.33);display:flex;flex-direction:column;position:relative;width:288px}.QuickFiltersDrawer-drawerTrigger--2O2ev{background-color:#fff;position:relative}.QuickFiltersDrawer-drawerCollapsed--VoNFo .QuickFiltersDrawer-drawerTrigger--2O2ev{border-right:1px solid rgba(0,0,0,.12);width:28px}.QuickFiltersDrawer-drawerCollapsed--VoNFo .QuickFiltersDrawer-drawerTriggerIconWrapper--9ziQU{display:block;left:auto;right:-15px}.QuickFiltersDrawer-drawerTriggerIconWrapper--9ziQU{background-color:#fff;display:none;left:-15px;position:absolute;top:18px;z-index:var(--mui-zIndex-drawer)}.QuickFiltersDrawer-drawerTriggerIcon--sc8lb{border:1px solid rgba(0,0,0,.12)}.QuickFiltersDrawer-drawerTriggerIcon--sc8lb:hover{background-color:var(--mui-palette-action-hover)}.QuickFiltersDrawer-drawerCollapsedIcon--o7My2{transform:rotate(180deg)}`;
     head.appendChild(style);
 }
 export default styles;

package/cjs/AdvancedSearchFabButton/AdvancedSearchFabButton.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 type Props = {
     tooltipTitle?: string;
+    dataReltioId?: string;
     onClick: () => void;
 };
 export declare const AdvancedSearchFabButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;

package/cjs/AdvancedSearchFabButton/AdvancedSearchFabButton.js

@@ -58,8 +58,8 @@ var withTooltip_1 = require("../HOCs/withTooltip");
 var AdvancedSearchFabButton_module_css_1 = __importDefault(require("./AdvancedSearchFabButton.module.css"));
 var FabButtonWithTooltip = (0, withTooltip_1.withTooltip)(Fab_1.default);
 exports.AdvancedSearchFabButton = (0, react_1.forwardRef)(function (_a, ref) {
-    var tooltipTitle = _a.tooltipTitle, onClick = _a.onClick, otherProps = __rest(_a, ["tooltipTitle", "onClick"]);
-    return (react_1.default.createElement(FabButtonWithTooltip, __assign({ tooltipTitle: tooltipTitle || ui_i18n_1.default.text('Open advanced search'), tooltipPlacement: "bottom-end", variant: "extended", classes: { root: AdvancedSearchFabButton_module_css_1.default.buttonRoot, extended: AdvancedSearchFabButton_module_css_1.default.buttonExtended }, onClick: onClick, "data-reltio-id": "reltio-advanced-search-fab-button", ref: ref }, otherProps),
+    var tooltipTitle = _a.tooltipTitle, dataReltioId = _a.dataReltioId, onClick = _a.onClick, otherProps = __rest(_a, ["tooltipTitle", "dataReltioId", "onClick"]);
+    return (react_1.default.createElement(FabButtonWithTooltip, __assign({ tooltipTitle: tooltipTitle || ui_i18n_1.default.text('Open advanced search'), tooltipPlacement: "bottom-end", variant: "extended", classes: { root: AdvancedSearchFabButton_module_css_1.default.buttonRoot, extended: AdvancedSearchFabButton_module_css_1.default.buttonExtended }, onClick: onClick, "data-reltio-id": dataReltioId || 'reltio-advanced-search-fab-button', ref: ref }, otherProps),
         react_1.default.createElement(Tune_1.default, { color: "primary", className: AdvancedSearchFabButton_module_css_1.default.menuIcon }),
         react_1.default.createElement("span", { className: AdvancedSearchFabButton_module_css_1.default.buttonLabel }, ui_i18n_1.default.text('Advanced search')),
         react_1.default.createElement(ChevronRight_1.default, { color: "action", className: AdvancedSearchFabButton_module_css_1.default.goToActionIcon })));

package/cjs/AttributesFiltersButton/AttributesFiltersButton.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { PopoverOrigin } from '@mui/material/Popover';
 import { SearchFilter } from '@reltio/mdm-sdk';
 import { AttributeSelectionInfo, AttributeSelectorItemsGroup, AttributesFilterComponentsClasses, AttributesTypesGroup } from '../types';
 type Props = {
@@ -16,6 +17,7 @@ type Props = {
     onTogglePopup?: (open: boolean) => void;
     isFiltersApplied?: boolean;
     dataReltioId?: string;
+    FilterButton?: React.ElementType;
     ButtonIcon?: React.ElementType;
     onFilterAttributeChange?: (attrSelectInfo: AttributeSelectionInfo) => void;
     onClear?: () => void;
@@ -23,6 +25,7 @@ type Props = {
     onApply?: () => void;
     popoverAnchorRef?: React.MutableRefObject<HTMLDivElement>;
     title?: string;
+    anchorOrigin?: PopoverOrigin;
 };
-declare const _default: React.MemoExoticComponent<({ filters: filtersProp, classes, attributesTypesGroups, attributesTypesGroupFilter, onChange, components, children, onTogglePopup, isFiltersApplied: isFiltersAppliedProp, dataReltioId, onFilterAttributeChange, onCancel, onClear, onApply, ButtonIcon, popoverAnchorRef, title }: Props) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ filters: filtersProp, classes, attributesTypesGroups, attributesTypesGroupFilter, onChange, components, children, onTogglePopup, isFiltersApplied: isFiltersAppliedProp, dataReltioId, onFilterAttributeChange, onCancel, onClear, onApply, FilterButton, ButtonIcon, popoverAnchorRef, title, anchorOrigin }: Props) => React.JSX.Element>;
 export default _default;

package/cjs/AttributesFiltersButton/AttributesFiltersButton.js

@@ -40,7 +40,7 @@ var ActionButtons_1 = require("./components/ActionButtons/");
 var styles_1 = require("./styles");
 var AttributesFiltersButton = function (_a) {
     var _b;
-    var filtersProp = _a.filters, classes = _a.classes, attributesTypesGroups = _a.attributesTypesGroups, attributesTypesGroupFilter = _a.attributesTypesGroupFilter, onChange = _a.onChange, components = _a.components, children = _a.children, onTogglePopup = _a.onTogglePopup, isFiltersAppliedProp = _a.isFiltersApplied, dataReltioId = _a.dataReltioId, onFilterAttributeChange = _a.onFilterAttributeChange, onCancel = _a.onCancel, onClear = _a.onClear, onApply = _a.onApply, _c = _a.ButtonIcon, ButtonIcon = _c === void 0 ? FilterList_1.default : _c, popoverAnchorRef = _a.popoverAnchorRef, title = _a.title;
+    var filtersProp = _a.filters, classes = _a.classes, attributesTypesGroups = _a.attributesTypesGroups, attributesTypesGroupFilter = _a.attributesTypesGroupFilter, onChange = _a.onChange, components = _a.components, children = _a.children, onTogglePopup = _a.onTogglePopup, isFiltersAppliedProp = _a.isFiltersApplied, dataReltioId = _a.dataReltioId, onFilterAttributeChange = _a.onFilterAttributeChange, onCancel = _a.onCancel, onClear = _a.onClear, onApply = _a.onApply, FilterButton = _a.FilterButton, _c = _a.ButtonIcon, ButtonIcon = _c === void 0 ? FilterList_1.default : _c, popoverAnchorRef = _a.popoverAnchorRef, title = _a.title, anchorOrigin = _a.anchorOrigin;
     var styles = (0, styles_1.useStyles)();
     var buttonRef = (0, react_1.useRef)();
     var _d = (0, react_1.useState)(false), isOpen = _d[0], setIsOpen = _d[1];
@@ -74,12 +74,12 @@ var AttributesFiltersButton = function (_a) {
         setFilters([]);
     }, [onClear]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Button_1.default, { "data-reltio-id": dataReltioId, ref: buttonRef, color: buttonColor, classes: {
+        FilterButton ? (react_1.default.createElement(FilterButton, { onClick: togglePopup, ref: buttonRef, dataReltioId: dataReltioId })) : (react_1.default.createElement(Button_1.default, { "data-reltio-id": dataReltioId, ref: buttonRef, color: buttonColor, classes: {
                 root: (0, classnames_1.default)(styles.triggerButton, classes === null || classes === void 0 ? void 0 : classes.triggerButton),
                 textPrimary: styles.changedFiltersIndicator
             }, onClick: togglePopup },
-            react_1.default.createElement(ButtonIcon, { color: buttonColor })),
-        react_1.default.createElement(Popover_1.default, { open: isOpen, classes: { paper: (0, classnames_1.default)(styles.popupContent, classes === null || classes === void 0 ? void 0 : classes.filterPopup) }, anchorEl: (_b = popoverAnchorRef === null || popoverAnchorRef === void 0 ? void 0 : popoverAnchorRef.current) !== null && _b !== void 0 ? _b : buttonRef.current, onClose: togglePopup, anchorOrigin: {
+            react_1.default.createElement(ButtonIcon, { color: buttonColor }))),
+        react_1.default.createElement(Popover_1.default, { open: isOpen, classes: { paper: (0, classnames_1.default)(styles.popupContent, classes === null || classes === void 0 ? void 0 : classes.filterPopup) }, anchorEl: (_b = popoverAnchorRef === null || popoverAnchorRef === void 0 ? void 0 : popoverAnchorRef.current) !== null && _b !== void 0 ? _b : buttonRef.current, onClose: togglePopup, anchorOrigin: anchorOrigin !== null && anchorOrigin !== void 0 ? anchorOrigin : {
                 vertical: 'bottom',
                 horizontal: (popoverAnchorRef === null || popoverAnchorRef === void 0 ? void 0 : popoverAnchorRef.current) ? 'left' : 'right'
             }, transformOrigin: {

package/cjs/Drawer/Drawer.d.ts

@@ -1,8 +1,3 @@
 import React from 'react';
 import { DrawerProps } from '@mui/material/Drawer';
-type Props = DrawerProps;
-export declare const Drawer: {
-    ({ open, children, ...otherProps }: Props): React.JSX.Element;
-    displayName: string;
-};
-export {};
+export declare const Drawer: React.ForwardRefExoticComponent<Omit<DrawerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/cjs/Drawer/Drawer.js

@@ -52,7 +52,7 @@ exports.Drawer = void 0;
 var react_1 = __importStar(require("react"));
 var Drawer_1 = __importDefault(require("@mui/material/Drawer"));
 var styles_1 = require("@mui/material/styles");
-var Drawer = function (_a) {
+exports.Drawer = (0, react_1.forwardRef)(function (_a, ref) {
     var _b = _a.open, open = _b === void 0 ? true : _b, children = _a.children, otherProps = __rest(_a, ["open", "children"]);
     var _c = (0, react_1.useState)(open), drawerContentsVisible = _c[0], setDrawerContentVisible = _c[1];
     var hideDelay = (0, styles_1.useTheme)().transitions.duration.leavingScreen;
@@ -71,7 +71,6 @@ var Drawer = function (_a) {
             }
         }
     }, [open, hideDelay, drawerContentsVisible]);
-    return (react_1.default.createElement(Drawer_1.default, __assign({ open: open }, otherProps), drawerContentsVisible && children));
-};
-exports.Drawer = Drawer;
+    return (react_1.default.createElement(Drawer_1.default, __assign({ open: open }, otherProps, { ref: ref }), drawerContentsVisible && children));
+});
 exports.Drawer.displayName = 'Drawer';

package/cjs/FacetGroup/FacetGroup.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 type Props = {
     children?: React.ReactNode;
     title?: string;
+    dataReltioId?: string;
 };
-export declare const FacetGroup: ({ children, title }: Props) => React.JSX.Element;
+export declare const FacetGroup: ({ children, title, dataReltioId }: Props) => React.JSX.Element;
 export {};

package/cjs/FacetGroup/FacetGroup.js

@@ -8,8 +8,8 @@ var react_1 = __importDefault(require("react"));
 var FacetGroupTitle_1 = require("../FacetGroupTitle");
 var FacetGroup_module_css_1 = __importDefault(require("./FacetGroup.module.css"));
 var FacetGroup = function (_a) {
-    var children = _a.children, _b = _a.title, title = _b === void 0 ? '' : _b;
-    return (react_1.default.createElement("div", { className: FacetGroup_module_css_1.default.facetGroupContainer },
+    var children = _a.children, _b = _a.title, title = _b === void 0 ? '' : _b, dataReltioId = _a.dataReltioId;
+    return (react_1.default.createElement("div", { className: FacetGroup_module_css_1.default.facetGroupContainer, "data-reltio-id": dataReltioId },
         react_1.default.createElement(FacetGroupTitle_1.FacetGroupTitle, { title: title }),
         children));
 };

package/cjs/FacetsSelector/helpers.d.ts

@@ -9,8 +9,5 @@ declare const isSelectedFacet: ({ facet, selectedFacetsFieldNames }: {
     facet: any;
     selectedFacetsFieldNames: any;
 }) => boolean;
-declare const constructPopoverOrigin: (verticalOrigin: PopoverOrigin["vertical"], horizontalOrigin?: PopoverOrigin["horizontal"]) => {
-    vertical: number | "bottom" | "top" | "center";
-    horizontal: number | "left" | "right" | "center";
-};
+declare const constructPopoverOrigin: (verticalOrigin: PopoverOrigin["vertical"], horizontalOrigin?: PopoverOrigin["horizontal"]) => PopoverOrigin;
 export { adjustVerticalPopupLayout, filterItemsInGroups, isSelectedFacet, constructPopoverOrigin };

package/cjs/QuickFiltersDrawer/QuickFiltersDrawer.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 type Props = {
     children: React.ReactNode;
-    isOpen?: boolean;
+    showDrawer?: boolean;
 };
-export declare const QuickFiltersDrawer: ({ children, isOpen, ...otherProps }: Props) => React.JSX.Element;
+export declare const QuickFiltersDrawer: ({ children, showDrawer, ...otherProps }: Props) => React.JSX.Element;
 export {};

package/cjs/QuickFiltersDrawer/QuickFiltersDrawer.js

@@ -10,6 +10,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -26,15 +49,31 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.QuickFiltersDrawer = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var ChevronLeft_1 = __importDefault(require("@mui/icons-material/ChevronLeft"));
+var Collapse_1 = __importDefault(require("@mui/material/Collapse"));
+var Fade_1 = __importDefault(require("@mui/material/Fade"));
 var Drawer_1 = require("../Drawer");
+var SmallIconButton_1 = require("../SmallIconButton");
 var QuickFiltersDrawer_module_css_1 = __importDefault(require("./QuickFiltersDrawer.module.css"));
 var QuickFiltersDrawer = function (_a) {
-    var children = _a.children, _b = _a.isOpen, isOpen = _b === void 0 ? true : _b, otherProps = __rest(_a, ["children", "isOpen"]);
-    return (react_1.default.createElement(Drawer_1.Drawer, __assign({ variant: 'persistent', anchor: 'left', open: isOpen, classes: {
-            root: QuickFiltersDrawer_module_css_1.default.drawer,
-            paper: QuickFiltersDrawer_module_css_1.default.drawerPaper,
-            docked: QuickFiltersDrawer_module_css_1.default.docked
-        } }, otherProps), children));
+    var _b, _c;
+    var children = _a.children, _d = _a.showDrawer, showDrawer = _d === void 0 ? true : _d, otherProps = __rest(_a, ["children", "showDrawer"]);
+    var _e = (0, react_1.useState)(true), isExpanded = _e[0], setIsExpanded = _e[1];
+    var handleToggleDrawer = function () {
+        setIsExpanded(!isExpanded);
+    };
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(QuickFiltersDrawer_module_css_1.default.drawerContainer, (_b = {}, _b[QuickFiltersDrawer_module_css_1.default.drawerCollapsed] = !isExpanded, _b)) },
+        react_1.default.createElement(Collapse_1.default, { in: isExpanded, orientation: "horizontal", timeout: isExpanded ? 200 : 400, unmountOnExit: true },
+            react_1.default.createElement(Fade_1.default, { in: isExpanded, timeout: isExpanded ? 400 : 200 },
+                react_1.default.createElement(Drawer_1.Drawer, __assign({ variant: 'persistent', anchor: 'left', open: showDrawer, classes: {
+                        root: QuickFiltersDrawer_module_css_1.default.drawer,
+                        paper: QuickFiltersDrawer_module_css_1.default.drawerPaper,
+                        docked: QuickFiltersDrawer_module_css_1.default.docked
+                    } }, otherProps), children))),
+        showDrawer && (react_1.default.createElement("div", { className: QuickFiltersDrawer_module_css_1.default.drawerTrigger },
+            react_1.default.createElement("div", { className: QuickFiltersDrawer_module_css_1.default.drawerTriggerIconWrapper },
+                react_1.default.createElement(SmallIconButton_1.SmallIconButton, { className: QuickFiltersDrawer_module_css_1.default.drawerTriggerIcon, iconClassName: (0, classnames_1.default)((_c = {}, _c[QuickFiltersDrawer_module_css_1.default.drawerCollapsedIcon] = !isExpanded, _c)), icon: ChevronLeft_1.default, size: "M", onClick: handleToggleDrawer }))))));
 };
 exports.QuickFiltersDrawer = QuickFiltersDrawer;

package/cjs/QuickFiltersDrawer/QuickFiltersDrawer.module.css.js

@@ -1,9 +1,9 @@
-const styles = {"drawer":"QuickFiltersDrawer-drawer--NXZwq","docked":"QuickFiltersDrawer-docked--xMI4g","drawerPaper":"QuickFiltersDrawer-drawerPaper--OkbOT"};
+const styles = {"drawerContainer":"QuickFiltersDrawer-drawerContainer--MqIvN","drawerTriggerIconWrapper":"QuickFiltersDrawer-drawerTriggerIconWrapper--9ziQU","drawer":"QuickFiltersDrawer-drawer--NXZwq","docked":"QuickFiltersDrawer-docked--xMI4g","drawerPaper":"QuickFiltersDrawer-drawerPaper--OkbOT","drawerTrigger":"QuickFiltersDrawer-drawerTrigger--2O2ev","drawerCollapsed":"QuickFiltersDrawer-drawerCollapsed--VoNFo","drawerTriggerIcon":"QuickFiltersDrawer-drawerTriggerIcon--sc8lb","drawerCollapsedIcon":"QuickFiltersDrawer-drawerCollapsedIcon--o7My2"};
 if (typeof document !== 'undefined') {
     const head = document.head || document.getElementsByTagName('head')[0]
     const style = document.createElement('style');
     style.type = 'text/css'
-    style.innerHTML = `.QuickFiltersDrawer-drawer--NXZwq{flex:0 0 288px!important}.QuickFiltersDrawer-docked--xMI4g{flex:0 0 288px}.QuickFiltersDrawer-drawerPaper--OkbOT{border-right:1px solid rgba(0,0,0,.33);display:flex;flex-direction:column;position:relative;width:288px}`;
+    style.innerHTML = `.QuickFiltersDrawer-drawerContainer--MqIvN{background-color:#fff;display:flex;flex-direction:row}.QuickFiltersDrawer-drawerContainer--MqIvN:hover .QuickFiltersDrawer-drawerTriggerIconWrapper--9ziQU{display:block}.QuickFiltersDrawer-drawer--NXZwq{flex:0 0 288px!important;height:100%}.QuickFiltersDrawer-docked--xMI4g{flex:0 0 288px}.QuickFiltersDrawer-drawerPaper--OkbOT{border-right:1px solid rgba(0,0,0,.33);display:flex;flex-direction:column;position:relative;width:288px}.QuickFiltersDrawer-drawerTrigger--2O2ev{background-color:#fff;position:relative}.QuickFiltersDrawer-drawerCollapsed--VoNFo .QuickFiltersDrawer-drawerTrigger--2O2ev{border-right:1px solid rgba(0,0,0,.12);width:28px}.QuickFiltersDrawer-drawerCollapsed--VoNFo .QuickFiltersDrawer-drawerTriggerIconWrapper--9ziQU{display:block;left:auto;right:-15px}.QuickFiltersDrawer-drawerTriggerIconWrapper--9ziQU{background-color:#fff;display:none;left:-15px;position:absolute;top:18px;z-index:var(--mui-zIndex-drawer)}.QuickFiltersDrawer-drawerTriggerIcon--sc8lb{border:1px solid rgba(0,0,0,.12)}.QuickFiltersDrawer-drawerTriggerIcon--sc8lb:hover{background-color:var(--mui-palette-action-hover)}.QuickFiltersDrawer-drawerCollapsedIcon--o7My2{transform:rotate(180deg)}`;
     head.appendChild(style);
 }
 module.exports = styles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.2188",
+  "version": "1.4.2189",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./index.js",