@coveord/plasma-mantine 59.4.0 → 59.4.1

package/dist/cjs/components/Facet/Facet.d.ts

@@ -1,7 +1,7 @@
 import { BoxProps, Factory, StylesApiProps } from '@mantine/core';
 import { FunctionComponent, ReactNode } from 'react';
 import { FacetData, FacetItem, FacetItemComponent } from './FacetTypes.js';
-export type FacetStylesNames = 'facet' | 'facetItem' | 'facetItems' | 'facetHeader' | 'searchInput' | 'hiddenSearch' | 'facetBody' | 'facetTitle' | 'facetSearch' | 'facetControl' | 'separator' | 'separatorLabel';
+export type FacetStylesNames = 'facet' | 'facetItem' | 'facetItems' | 'facetHeader' | 'searchInput' | 'hiddenSearch' | 'facetBody' | 'facetTitleRow' | 'facetTitle' | 'facetRemoveButton' | 'facetSearch' | 'facetControl' | 'separator' | 'separatorLabel';
 export interface FacetProps extends BoxProps, StylesApiProps<FacetFactory> {
     className?: string;
     /**
@@ -14,12 +14,22 @@ export interface FacetProps extends BoxProps, StylesApiProps<FacetFactory> {
      * @param values the selected items
      */
     onChange?: (values: string[]) => void;
+    /**
+     * Function called when the remove icon is clicked.
+     */
+    onRemove?: () => void;
     /**
      * Initial items selection
      *
      * @default []
      */
     initialSelection?: string[];
+    /**
+     * Determines if the facet is removable
+     *
+     * @default false
+     */
+    removable?: boolean;
     /**
      * Determined items selection
      *

package/dist/cjs/components/Facet/Facet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Facet.d.ts","sourceRoot":"","sources":["../../../../src/components/Facet/Facet.tsx"],"names":[],"mappings":"AACA,OAAO,EAEH,QAAQ,EAIR,OAAO,EACP,cAAc,EAMjB,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAC,iBAAiB,EAAgB,SAAS,EAAY,MAAM,OAAO,CAAC;AAM5E,OAAO,EAAC,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAEzE,MAAM,MAAM,gBAAgB,GACtB,OAAO,GACP,WAAW,GACX,YAAY,GACZ,aAAa,GACb,aAAa,GACb,cAAc,GACd,WAAW,GACX,YAAY,GACZ,aAAa,GACb,cAAc,GACd,WAAW,GACX,gBAAgB,CAAC;AAEvB,MAAM,WAAW,UAAW,SAAQ,QAAQ,EAAE,cAAc,CAAC,YAAY,CAAC;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAChB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB;;;;OAIG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/C;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC;IACrD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;OAIG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,iBAAiB,CAAC,GAAG,CAAC,CAAC;IACvC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC;IAC/B,KAAK,EAAE,UAAU,CAAC;IAClB,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,gBAAgB,CAAC;CACjC,CAAC,CAAC;AAYH,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,CA+J9C,CAAC"}
+{"version":3,"file":"Facet.d.ts","sourceRoot":"","sources":["../../../../src/components/Facet/Facet.tsx"],"names":[],"mappings":"AACA,OAAO,EAEH,QAAQ,EAKR,OAAO,EAEP,cAAc,EAMjB,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAC,iBAAiB,EAAgB,SAAS,EAAY,MAAM,OAAO,CAAC;AAK5E,OAAO,EAAC,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAEzE,MAAM,MAAM,gBAAgB,GACtB,OAAO,GACP,WAAW,GACX,YAAY,GACZ,aAAa,GACb,aAAa,GACb,cAAc,GACd,WAAW,GACX,eAAe,GACf,YAAY,GACZ,mBAAmB,GACnB,aAAa,GACb,cAAc,GACd,WAAW,GACX,gBAAgB,CAAC;AAEvB,MAAM,WAAW,UAAW,SAAQ,QAAQ,EAAE,cAAc,CAAC,YAAY,CAAC;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAChB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB;;;;OAIG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/C;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC;IACrD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;OAIG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,iBAAiB,CAAC,GAAG,CAAC,CAAC;IACvC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC;IAC/B,KAAK,EAAE,UAAU,CAAC;IAClB,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,gBAAgB,CAAC;CACjC,CAAC,CAAC;AAaH,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,CA2K9C,CAAC"}

package/dist/cjs/components/Facet/Facet.js

@@ -22,7 +22,6 @@ var _hooks = require("@mantine/hooks");
 var _clsx = require("clsx");
 var _react = require("react");
 var _groupOptions = require("../../utils/groupOptions.js");
-var _ActionIcon = require("../ActionIcon/ActionIcon.js");
 var _DefaultFacetItem = require("./DefaultFacetItem.js");
 var _Facetmodulecss = /*#__PURE__*/ _interop_require_default._(require("./Facet.module.css"));
 var _FacetScrollArea = require("./FacetScrollArea.js");
@@ -33,15 +32,18 @@ var defaultProps = {
     height: 200,
     limit: Infinity,
     itemComponent: _DefaultFacetItem.DefaultFacetItem,
-    listComponent: _FacetScrollArea.FacetScrollArea
+    listComponent: _FacetScrollArea.FacetScrollArea,
+    removable: false
 };
 var Facet = (0, _core.factory)(function(_props, ref) {
     var props = (0, _core.useProps)('Facet', defaultProps, _props);
-    var className = props.className, data = props.data, onChange = props.onChange, _props_initialSelection = props.initialSelection, initialSelection = _props_initialSelection === void 0 ? [] : _props_initialSelection, selection = props.selection, ItemComponent = props.itemComponent, ListComponent = props.listComponent, itemCountFormatter = props.itemCountFormatter, searchPlaceholder = props.searchPlaceholder, query = props.query, _props_hideSearch = props.hideSearch, hideSearch = _props_hideSearch === void 0 ? data.length <= 7 : _props_hideSearch, onSearch = props.onSearch, _props_filter = props.filter, filter = _props_filter === void 0 ? defaultFilter : _props_filter, nothingFound = props.nothingFound, placeholder = props.placeholder, title = props.title, height = props.height, radius = props.radius, __staticSelector = props.__staticSelector, classNames = props.classNames, styles = props.styles, limit = props.limit, unstyled = props.unstyled, others = _object_without_properties._(props, [
+    var className = props.className, data = props.data, onChange = props.onChange, onRemove = props.onRemove, _props_initialSelection = props.initialSelection, initialSelection = _props_initialSelection === void 0 ? [] : _props_initialSelection, removable = props.removable, selection = props.selection, ItemComponent = props.itemComponent, ListComponent = props.listComponent, itemCountFormatter = props.itemCountFormatter, searchPlaceholder = props.searchPlaceholder, query = props.query, _props_hideSearch = props.hideSearch, hideSearch = _props_hideSearch === void 0 ? data.length <= 7 : _props_hideSearch, onSearch = props.onSearch, _props_filter = props.filter, filter = _props_filter === void 0 ? defaultFilter : _props_filter, nothingFound = props.nothingFound, placeholder = props.placeholder, title = props.title, height = props.height, radius = props.radius, __staticSelector = props.__staticSelector, classNames = props.classNames, styles = props.styles, limit = props.limit, unstyled = props.unstyled, others = _object_without_properties._(props, [
         "className",
         "data",
         "onChange",
+        "onRemove",
         "initialSelection",
+        "removable",
         "selection",
         "itemComponent",
         "listComponent",
@@ -150,10 +152,23 @@ var Facet = (0, _core.factory)(function(_props, ref) {
                     children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Box, {
                         className: _Facetmodulecss.default.facetHeader,
                         children: [
-                            title ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Title, {
-                                order: 5,
-                                children: title
-                            }) : null,
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
+                                wrap: "nowrap",
+                                justify: "space-between",
+                                className: _Facetmodulecss.default.facetTitleRow,
+                                children: [
+                                    title ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Title, {
+                                        order: 5,
+                                        className: _Facetmodulecss.default.facetTitle,
+                                        children: title
+                                    }) : null,
+                                    removable ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.CloseButton, {
+                                        onClick: onRemove,
+                                        className: _Facetmodulecss.default.facetRemoveButton,
+                                        "aria-label": "remove facet"
+                                    }) : null
+                                ]
+                            }),
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.TextInput, {
                                 unstyled: unstyled,
                                 value: search,
@@ -165,16 +180,12 @@ var Facet = (0, _core.factory)(function(_props, ref) {
                                 "aria-hidden": hideSearch,
                                 tabIndex: hideSearch ? -1 : undefined,
                                 className: (0, _clsx.clsx)(_Facetmodulecss.default.facetSearch, _define_property._({}, _Facetmodulecss.default.hiddenSearch, hideSearch)),
-                                rightSection: search ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_ActionIcon.ActionIcon.Quaternary, {
+                                rightSection: search ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.CloseButton, {
                                     "aria-label": "clear search",
-                                    color: "gray",
                                     onClick: function onClick() {
                                         handleSearch('');
-                                    },
-                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.CrossSize16Px, {
-                                        height: 16
-                                    })
-                                }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.FilterSize16Px, {
+                                    }
+                                }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.IconSearch, {
                                     height: 16
                                 })
                             })

package/dist/cjs/components/Facet/Facet.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Facet/Facet.tsx"],"sourcesContent":["import {CrossSize16Px, FilterSize16Px} from '@coveord/plasma-react-icons';\nimport {\n    Box,\n    BoxProps,\n    Combobox,\n    Divider,\n    factory,\n    Factory,\n    StylesApiProps,\n    Text,\n    TextInput,\n    Title,\n    useCombobox,\n    useProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport {clsx} from 'clsx';\nimport {FunctionComponent, ReactElement, ReactNode, useEffect} from 'react';\nimport {groupOptions} from '../../utils/groupOptions.js';\nimport {ActionIcon} from '../ActionIcon/ActionIcon.js';\nimport {DefaultFacetItem} from './DefaultFacetItem.js';\nimport classes from './Facet.module.css';\nimport {FacetScrollArea} from './FacetScrollArea.js';\nimport {FacetData, FacetItem, FacetItemComponent} from './FacetTypes.js';\n\nexport type FacetStylesNames =\n    | 'facet'\n    | 'facetItem'\n    | 'facetItems'\n    | 'facetHeader'\n    | 'searchInput'\n    | 'hiddenSearch'\n    | 'facetBody'\n    | 'facetTitle'\n    | 'facetSearch'\n    | 'facetControl'\n    | 'separator'\n    | 'separatorLabel';\n\nexport interface FacetProps extends BoxProps, StylesApiProps<FacetFactory> {\n    className?: string;\n    /**\n     * The data to render in the component\n     */\n    data: FacetData;\n    /**\n     * Function called when an item is selected or unselected\n     *\n     * @param values the selected items\n     */\n    onChange?: (values: string[]) => void;\n    /**\n     * Initial items selection\n     *\n     * @default []\n     */\n    initialSelection?: string[];\n    /**\n     * Determined items selection\n     *\n     * @default []\n     */\n    selection?: string[];\n    /**\n     * Custom item component\n     *\n     * @default a checkbox with the label of the item\n     */\n    itemComponent?: FacetItemComponent;\n    /**\n     * Function to format the facet item count\n     *\n     * @param count\n     * @default (count) => count.toString()\n     */\n    itemCountFormatter?: (value: number) => string;\n    /**\n     * Search input placeholder\n     */\n    searchPlaceholder?: string;\n    /**\n     * Called when the search query changes\n     *\n     * @param value the search query\n     */\n    onSearch?: (value: string) => void;\n    /**\n     * Function to filter search results\n     *\n     * @param query value of the search input\n     * @param item the current item\n     *\n     * @default function that compare the query with the label and value, case-insensitive\n     */\n    filter?: (query: string, item: FacetItem) => boolean;\n    /**\n     * Value of the search input\n     */\n    query?: string;\n    /**\n     * Nothing found message\n     *\n     * @default No matching items\n     */\n    nothingFound?: ReactNode;\n    /**\n     * Displayed when a list is empty and there is no search query\n     *\n     * @default No items\n     */\n    placeholder?: ReactNode;\n    /**\n     * Facet title\n     */\n    title?: ReactNode;\n    /**\n     * Maximum height, only used when there is more than 7 values\n     *\n     * @default 200\n     */\n    height?: number | 'auto';\n    /**\n     * Predefined border-radius value from theme.radius or number for border-radius in px\n     *\n     * @default md\n     */\n    radius?: number | string;\n    /**\n     * Change list component, can be used to add custom scrollbars\n     */\n    listComponent?: FunctionComponent<any>;\n    /**\n     * Limit amount of items showed at a time\n     *\n     * @default Infinity\n     */\n    limit?: number;\n    /**\n     * Control the displaying of the search input.\n     *\n     * @default data.length <= 7\n     */\n    hideSearch?: boolean;\n    __staticSelector?: string;\n}\n\nexport type FacetFactory = Factory<{\n    props: FacetProps;\n    ref: HTMLDivElement;\n    stylesNames: FacetStylesNames;\n}>;\n\nconst defaultProps: Partial<FacetProps> = {\n    searchPlaceholder: 'Search',\n    nothingFound: 'No matching items',\n    placeholder: 'No items',\n    height: 200,\n    limit: Infinity,\n    itemComponent: DefaultFacetItem,\n    listComponent: FacetScrollArea,\n};\n\nexport const Facet: FunctionComponent<FacetProps> = factory<FacetFactory>((_props, ref) => {\n    const props = useProps('Facet', defaultProps, _props);\n    const {\n        className,\n        data,\n        onChange,\n        initialSelection = [],\n        selection,\n        itemComponent: ItemComponent,\n        listComponent: ListComponent,\n        itemCountFormatter,\n        searchPlaceholder,\n        query,\n        hideSearch = data.length <= 7,\n        onSearch,\n        filter = defaultFilter,\n        nothingFound,\n        placeholder,\n        title,\n        height,\n        radius,\n        __staticSelector,\n        classNames,\n        styles,\n        limit,\n        unstyled,\n        ...others\n    } = props;\n    const combobox = useCombobox();\n    const [search, handleSearch] = useUncontrolled({\n        value: query,\n        defaultValue: '',\n        finalValue: '',\n        onChange: onSearch,\n    });\n\n    const [_selection, handleSelection] = useUncontrolled({\n        value: selection,\n        defaultValue: initialSelection,\n        finalValue: [],\n        onChange,\n    });\n\n    const unGroupedItems: ReactElement[] = [];\n    const groupedItems: ReactElement[] = [];\n    const filteredData = data.filter((item) => filter(search, item)).slice(0, limit);\n\n    const sortedData: FacetData = groupOptions({data: filteredData});\n\n    const handleValueSelect = (val: string) =>\n        handleSelection(_selection.includes(val) ? _selection.filter((v) => v !== val) : [..._selection, val]);\n\n    let groupName: string = null;\n\n    useEffect(() => {\n        combobox.openDropdown();\n    }, []);\n\n    sortedData.forEach((item) => {\n        const isSelected = _selection.includes(item.value);\n        const itemComponent = (\n            <Combobox.Option\n                aria-selected={isSelected ? true : false}\n                value={item.value}\n                key={item.value}\n                onMouseEnter={() => combobox.resetSelectedOption()}\n                className={clsx(classes.facetItem)}\n            >\n                <ItemComponent data={item} selected={isSelected} countFormatter={itemCountFormatter} />\n            </Combobox.Option>\n        );\n\n        if (!item.group) {\n            unGroupedItems.push(itemComponent);\n        } else {\n            if (groupName !== item.group) {\n                groupName = item.group;\n                groupedItems.push(\n                    <div className={classes.separator} key={groupName}>\n                        <Divider classNames={{label: classes.separatorLabel}} label={groupName} />\n                    </div>,\n                );\n            }\n            groupedItems.push(itemComponent);\n        }\n    });\n\n    if (groupedItems.length > 0 && unGroupedItems.length > 0) {\n        unGroupedItems.unshift(\n            <div className={classes.separator} key=\"ungrouped-separator\">\n                <Divider unstyled={unstyled} classNames={{label: classes.separatorLabel}} />\n            </div>,\n        );\n    }\n\n    return (\n        <Box className={clsx(classes.facet, className)} {...others} ref={ref}>\n            <Combobox store={combobox} onOptionSubmit={handleValueSelect}>\n                <Combobox.EventsTarget>\n                    <Box className={classes.facetHeader}>\n                        {title ? <Title order={5}>{title}</Title> : null}\n\n                        <TextInput\n                            unstyled={unstyled}\n                            value={search}\n                            onChange={(event) => {\n                                handleSearch(event.currentTarget.value);\n                                combobox.updateSelectedOptionIndex();\n                            }}\n                            placeholder={searchPlaceholder}\n                            aria-hidden={hideSearch}\n                            tabIndex={hideSearch ? -1 : undefined}\n                            className={clsx(classes.facetSearch, {[classes.hiddenSearch]: hideSearch})}\n                            rightSection={\n                                search ? (\n                                    <ActionIcon.Quaternary\n                                        aria-label=\"clear search\"\n                                        color=\"gray\"\n                                        onClick={() => {\n                                            handleSearch('');\n                                        }}\n                                    >\n                                        <CrossSize16Px height={16} />\n                                    </ActionIcon.Quaternary>\n                                ) : (\n                                    <FilterSize16Px height={16} />\n                                )\n                            }\n                        />\n                    </Box>\n                </Combobox.EventsTarget>\n                <div className={classes.facetBody}>\n                    <Combobox.EventsTarget>\n                        <ListComponent\n                            className={classes.facetItems}\n                            mah={height}\n                            style={{overflow: 'auto', position: 'relative'}}\n                            tabIndex={hideSearch ? 0 : undefined}\n                        >\n                            <Combobox.Options aria-multiselectable=\"true\">\n                                {groupedItems.length > 0 || unGroupedItems.length > 0 ? (\n                                    <>\n                                        {groupedItems}\n                                        {unGroupedItems}\n                                    </>\n                                ) : (\n                                    <Combobox.Empty>\n                                        <Text c=\"dimmed\" unstyled={unstyled} size=\"sm\" ta=\"center\" my=\"sm\">\n                                            {!search && placeholder ? placeholder : nothingFound}\n                                        </Text>\n                                    </Combobox.Empty>\n                                )}\n                            </Combobox.Options>\n                        </ListComponent>\n                    </Combobox.EventsTarget>\n                </div>\n            </Combobox>\n        </Box>\n    );\n});\n\nFacet.displayName = 'Facet';\n\nconst defaultFilter = (query: string, item: FacetItem) =>\n    item.label.toLowerCase().trim().includes(query.toLowerCase().trim()) ||\n    item.value.toLowerCase().trim().includes(query.toLowerCase().trim());\n"],"names":["Facet","defaultProps","searchPlaceholder","nothingFound","placeholder","height","limit","Infinity","itemComponent","DefaultFacetItem","listComponent","FacetScrollArea","factory","_props","ref","props","useProps","className","data","onChange","initialSelection","selection","ItemComponent","ListComponent","itemCountFormatter","query","hideSearch","length","onSearch","filter","defaultFilter","title","radius","__staticSelector","classNames","styles","unstyled","others","combobox","useCombobox","useUncontrolled","value","defaultValue","finalValue","search","handleSearch","_selection","handleSelection","unGroupedItems","groupedItems","filteredData","item","slice","sortedData","groupOptions","handleValueSelect","val","includes","v","groupName","useEffect","openDropdown","forEach","isSelected","Combobox","Option","aria-selected","onMouseEnter","resetSelectedOption","clsx","classes","facetItem","selected","countFormatter","group","push","div","separator","Divider","label","separatorLabel","unshift","Box","facet","store","onOptionSubmit","EventsTarget","facetHeader","Title","order","TextInput","event","currentTarget","updateSelectedOptionIndex","aria-hidden","tabIndex","undefined","facetSearch","hiddenSearch","rightSection","ActionIcon","Quaternary","aria-label","color","onClick","CrossSize16Px","FilterSize16Px","facetBody","facetItems","mah","style","overflow","position","Options","aria-multiselectable","Empty","Text","c","size","ta","my","displayName","toLowerCase","trim"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Facet/Facet.tsx"],"sourcesContent":["import {IconSearch} from '@coveord/plasma-react-icons';\nimport {\n    Box,\n    BoxProps,\n    CloseButton,\n    Combobox,\n    Divider,\n    factory,\n    Factory,\n    Group,\n    StylesApiProps,\n    Text,\n    TextInput,\n    Title,\n    useCombobox,\n    useProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport {clsx} from 'clsx';\nimport {FunctionComponent, ReactElement, ReactNode, useEffect} from 'react';\nimport {groupOptions} from '../../utils/groupOptions.js';\nimport {DefaultFacetItem} from './DefaultFacetItem.js';\nimport classes from './Facet.module.css';\nimport {FacetScrollArea} from './FacetScrollArea.js';\nimport {FacetData, FacetItem, FacetItemComponent} from './FacetTypes.js';\n\nexport type FacetStylesNames =\n    | 'facet'\n    | 'facetItem'\n    | 'facetItems'\n    | 'facetHeader'\n    | 'searchInput'\n    | 'hiddenSearch'\n    | 'facetBody'\n    | 'facetTitleRow'\n    | 'facetTitle'\n    | 'facetRemoveButton'\n    | 'facetSearch'\n    | 'facetControl'\n    | 'separator'\n    | 'separatorLabel';\n\nexport interface FacetProps extends BoxProps, StylesApiProps<FacetFactory> {\n    className?: string;\n    /**\n     * The data to render in the component\n     */\n    data: FacetData;\n    /**\n     * Function called when an item is selected or unselected\n     *\n     * @param values the selected items\n     */\n    onChange?: (values: string[]) => void;\n    /**\n     * Function called when the remove icon is clicked.\n     */\n    onRemove?: () => void;\n    /**\n     * Initial items selection\n     *\n     * @default []\n     */\n    initialSelection?: string[];\n    /**\n     * Determines if the facet is removable\n     *\n     * @default false\n     */\n    removable?: boolean;\n    /**\n     * Determined items selection\n     *\n     * @default []\n     */\n    selection?: string[];\n    /**\n     * Custom item component\n     *\n     * @default a checkbox with the label of the item\n     */\n    itemComponent?: FacetItemComponent;\n    /**\n     * Function to format the facet item count\n     *\n     * @param count\n     * @default (count) => count.toString()\n     */\n    itemCountFormatter?: (value: number) => string;\n    /**\n     * Search input placeholder\n     */\n    searchPlaceholder?: string;\n    /**\n     * Called when the search query changes\n     *\n     * @param value the search query\n     */\n    onSearch?: (value: string) => void;\n    /**\n     * Function to filter search results\n     *\n     * @param query value of the search input\n     * @param item the current item\n     *\n     * @default function that compare the query with the label and value, case-insensitive\n     */\n    filter?: (query: string, item: FacetItem) => boolean;\n    /**\n     * Value of the search input\n     */\n    query?: string;\n    /**\n     * Nothing found message\n     *\n     * @default No matching items\n     */\n    nothingFound?: ReactNode;\n    /**\n     * Displayed when a list is empty and there is no search query\n     *\n     * @default No items\n     */\n    placeholder?: ReactNode;\n    /**\n     * Facet title\n     */\n    title?: ReactNode;\n    /**\n     * Maximum height, only used when there is more than 7 values\n     *\n     * @default 200\n     */\n    height?: number | 'auto';\n    /**\n     * Predefined border-radius value from theme.radius or number for border-radius in px\n     *\n     * @default md\n     */\n    radius?: number | string;\n    /**\n     * Change list component, can be used to add custom scrollbars\n     */\n    listComponent?: FunctionComponent<any>;\n    /**\n     * Limit amount of items showed at a time\n     *\n     * @default Infinity\n     */\n    limit?: number;\n    /**\n     * Control the displaying of the search input.\n     *\n     * @default data.length <= 7\n     */\n    hideSearch?: boolean;\n    __staticSelector?: string;\n}\n\nexport type FacetFactory = Factory<{\n    props: FacetProps;\n    ref: HTMLDivElement;\n    stylesNames: FacetStylesNames;\n}>;\n\nconst defaultProps: Partial<FacetProps> = {\n    searchPlaceholder: 'Search',\n    nothingFound: 'No matching items',\n    placeholder: 'No items',\n    height: 200,\n    limit: Infinity,\n    itemComponent: DefaultFacetItem,\n    listComponent: FacetScrollArea,\n    removable: false,\n};\n\nexport const Facet: FunctionComponent<FacetProps> = factory<FacetFactory>((_props, ref) => {\n    const props = useProps('Facet', defaultProps, _props);\n    const {\n        className,\n        data,\n        onChange,\n        onRemove,\n        initialSelection = [],\n        removable,\n        selection,\n        itemComponent: ItemComponent,\n        listComponent: ListComponent,\n        itemCountFormatter,\n        searchPlaceholder,\n        query,\n        hideSearch = data.length <= 7,\n        onSearch,\n        filter = defaultFilter,\n        nothingFound,\n        placeholder,\n        title,\n        height,\n        radius,\n        __staticSelector,\n        classNames,\n        styles,\n        limit,\n        unstyled,\n        ...others\n    } = props;\n    const combobox = useCombobox();\n    const [search, handleSearch] = useUncontrolled({\n        value: query,\n        defaultValue: '',\n        finalValue: '',\n        onChange: onSearch,\n    });\n\n    const [_selection, handleSelection] = useUncontrolled({\n        value: selection,\n        defaultValue: initialSelection,\n        finalValue: [],\n        onChange,\n    });\n\n    const unGroupedItems: ReactElement[] = [];\n    const groupedItems: ReactElement[] = [];\n    const filteredData = data.filter((item) => filter(search, item)).slice(0, limit);\n\n    const sortedData: FacetData = groupOptions({data: filteredData});\n\n    const handleValueSelect = (val: string) =>\n        handleSelection(_selection.includes(val) ? _selection.filter((v) => v !== val) : [..._selection, val]);\n\n    let groupName: string = null;\n\n    useEffect(() => {\n        combobox.openDropdown();\n    }, []);\n\n    sortedData.forEach((item) => {\n        const isSelected = _selection.includes(item.value);\n        const itemComponent = (\n            <Combobox.Option\n                aria-selected={isSelected ? true : false}\n                value={item.value}\n                key={item.value}\n                onMouseEnter={() => combobox.resetSelectedOption()}\n                className={clsx(classes.facetItem)}\n            >\n                <ItemComponent data={item} selected={isSelected} countFormatter={itemCountFormatter} />\n            </Combobox.Option>\n        );\n\n        if (!item.group) {\n            unGroupedItems.push(itemComponent);\n        } else {\n            if (groupName !== item.group) {\n                groupName = item.group;\n                groupedItems.push(\n                    <div className={classes.separator} key={groupName}>\n                        <Divider classNames={{label: classes.separatorLabel}} label={groupName} />\n                    </div>,\n                );\n            }\n            groupedItems.push(itemComponent);\n        }\n    });\n\n    if (groupedItems.length > 0 && unGroupedItems.length > 0) {\n        unGroupedItems.unshift(\n            <div className={classes.separator} key=\"ungrouped-separator\">\n                <Divider unstyled={unstyled} classNames={{label: classes.separatorLabel}} />\n            </div>,\n        );\n    }\n\n    return (\n        <Box className={clsx(classes.facet, className)} {...others} ref={ref}>\n            <Combobox store={combobox} onOptionSubmit={handleValueSelect}>\n                <Combobox.EventsTarget>\n                    <Box className={classes.facetHeader}>\n                        <Group wrap=\"nowrap\" justify=\"space-between\" className={classes.facetTitleRow}>\n                            {title ? (\n                                <Title order={5} className={classes.facetTitle}>\n                                    {title}\n                                </Title>\n                            ) : null}\n                            {removable ? (\n                                <CloseButton\n                                    onClick={onRemove}\n                                    className={classes.facetRemoveButton}\n                                    aria-label=\"remove facet\"\n                                />\n                            ) : null}\n                        </Group>\n\n                        <TextInput\n                            unstyled={unstyled}\n                            value={search}\n                            onChange={(event) => {\n                                handleSearch(event.currentTarget.value);\n                                combobox.updateSelectedOptionIndex();\n                            }}\n                            placeholder={searchPlaceholder}\n                            aria-hidden={hideSearch}\n                            tabIndex={hideSearch ? -1 : undefined}\n                            className={clsx(classes.facetSearch, {[classes.hiddenSearch]: hideSearch})}\n                            rightSection={\n                                search ? (\n                                    <CloseButton\n                                        aria-label=\"clear search\"\n                                        onClick={() => {\n                                            handleSearch('');\n                                        }}\n                                    />\n                                ) : (\n                                    <IconSearch height={16} />\n                                )\n                            }\n                        />\n                    </Box>\n                </Combobox.EventsTarget>\n                <div className={classes.facetBody}>\n                    <Combobox.EventsTarget>\n                        <ListComponent\n                            className={classes.facetItems}\n                            mah={height}\n                            style={{overflow: 'auto', position: 'relative'}}\n                            tabIndex={hideSearch ? 0 : undefined}\n                        >\n                            <Combobox.Options aria-multiselectable=\"true\">\n                                {groupedItems.length > 0 || unGroupedItems.length > 0 ? (\n                                    <>\n                                        {groupedItems}\n                                        {unGroupedItems}\n                                    </>\n                                ) : (\n                                    <Combobox.Empty>\n                                        <Text c=\"dimmed\" unstyled={unstyled} size=\"sm\" ta=\"center\" my=\"sm\">\n                                            {!search && placeholder ? placeholder : nothingFound}\n                                        </Text>\n                                    </Combobox.Empty>\n                                )}\n                            </Combobox.Options>\n                        </ListComponent>\n                    </Combobox.EventsTarget>\n                </div>\n            </Combobox>\n        </Box>\n    );\n});\n\nFacet.displayName = 'Facet';\n\nconst defaultFilter = (query: string, item: FacetItem) =>\n    item.label.toLowerCase().trim().includes(query.toLowerCase().trim()) ||\n    item.value.toLowerCase().trim().includes(query.toLowerCase().trim());\n"],"names":["Facet","defaultProps","searchPlaceholder","nothingFound","placeholder","height","limit","Infinity","itemComponent","DefaultFacetItem","listComponent","FacetScrollArea","removable","factory","_props","ref","props","useProps","className","data","onChange","onRemove","initialSelection","selection","ItemComponent","ListComponent","itemCountFormatter","query","hideSearch","length","onSearch","filter","defaultFilter","title","radius","__staticSelector","classNames","styles","unstyled","others","combobox","useCombobox","useUncontrolled","value","defaultValue","finalValue","search","handleSearch","_selection","handleSelection","unGroupedItems","groupedItems","filteredData","item","slice","sortedData","groupOptions","handleValueSelect","val","includes","v","groupName","useEffect","openDropdown","forEach","isSelected","Combobox","Option","aria-selected","onMouseEnter","resetSelectedOption","clsx","classes","facetItem","selected","countFormatter","group","push","div","separator","Divider","label","separatorLabel","unshift","Box","facet","store","onOptionSubmit","EventsTarget","facetHeader","Group","wrap","justify","facetTitleRow","Title","order","facetTitle","CloseButton","onClick","facetRemoveButton","aria-label","TextInput","event","currentTarget","updateSelectedOptionIndex","aria-hidden","tabIndex","undefined","facetSearch","hiddenSearch","rightSection","IconSearch","facetBody","facetItems","mah","style","overflow","position","Options","aria-multiselectable","Empty","Text","c","size","ta","my","displayName","toLowerCase","trim"],"mappings":"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"}

package/dist/cjs/components/Facet/Facet.module.css

@@ -56,8 +56,21 @@
     flex: 1;
 }
 
+.facetTitleRow {
+    width: 100%;
+    min-width: 0;
+}
+
 .facetTitle {
+    flex: 1;
+    min-width: 0;
     margin-bottom: 0;
+    overflow-wrap: anywhere;
+}
+
+.facetRemoveButton {
+    flex-shrink: 0;
+    margin-left: auto;
 }
 
 .facetSearch {

package/dist/esm/components/Facet/Facet.d.ts

@@ -1,7 +1,7 @@
 import { BoxProps, Factory, StylesApiProps } from '@mantine/core';
 import { FunctionComponent, ReactNode } from 'react';
 import { FacetData, FacetItem, FacetItemComponent } from './FacetTypes.js';
-export type FacetStylesNames = 'facet' | 'facetItem' | 'facetItems' | 'facetHeader' | 'searchInput' | 'hiddenSearch' | 'facetBody' | 'facetTitle' | 'facetSearch' | 'facetControl' | 'separator' | 'separatorLabel';
+export type FacetStylesNames = 'facet' | 'facetItem' | 'facetItems' | 'facetHeader' | 'searchInput' | 'hiddenSearch' | 'facetBody' | 'facetTitleRow' | 'facetTitle' | 'facetRemoveButton' | 'facetSearch' | 'facetControl' | 'separator' | 'separatorLabel';
 export interface FacetProps extends BoxProps, StylesApiProps<FacetFactory> {
     className?: string;
     /**
@@ -14,12 +14,22 @@ export interface FacetProps extends BoxProps, StylesApiProps<FacetFactory> {
      * @param values the selected items
      */
     onChange?: (values: string[]) => void;
+    /**
+     * Function called when the remove icon is clicked.
+     */
+    onRemove?: () => void;
     /**
      * Initial items selection
      *
      * @default []
      */
     initialSelection?: string[];
+    /**
+     * Determines if the facet is removable
+     *
+     * @default false
+     */
+    removable?: boolean;
     /**
      * Determined items selection
      *

package/dist/esm/components/Facet/Facet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Facet.d.ts","sourceRoot":"","sources":["../../../../src/components/Facet/Facet.tsx"],"names":[],"mappings":"AACA,OAAO,EAEH,QAAQ,EAIR,OAAO,EACP,cAAc,EAMjB,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAC,iBAAiB,EAAgB,SAAS,EAAY,MAAM,OAAO,CAAC;AAM5E,OAAO,EAAC,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAEzE,MAAM,MAAM,gBAAgB,GACtB,OAAO,GACP,WAAW,GACX,YAAY,GACZ,aAAa,GACb,aAAa,GACb,cAAc,GACd,WAAW,GACX,YAAY,GACZ,aAAa,GACb,cAAc,GACd,WAAW,GACX,gBAAgB,CAAC;AAEvB,MAAM,WAAW,UAAW,SAAQ,QAAQ,EAAE,cAAc,CAAC,YAAY,CAAC;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAChB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB;;;;OAIG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/C;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC;IACrD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;OAIG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,iBAAiB,CAAC,GAAG,CAAC,CAAC;IACvC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC;IAC/B,KAAK,EAAE,UAAU,CAAC;IAClB,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,gBAAgB,CAAC;CACjC,CAAC,CAAC;AAYH,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,CA+J9C,CAAC"}
+{"version":3,"file":"Facet.d.ts","sourceRoot":"","sources":["../../../../src/components/Facet/Facet.tsx"],"names":[],"mappings":"AACA,OAAO,EAEH,QAAQ,EAKR,OAAO,EAEP,cAAc,EAMjB,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAC,iBAAiB,EAAgB,SAAS,EAAY,MAAM,OAAO,CAAC;AAK5E,OAAO,EAAC,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAEzE,MAAM,MAAM,gBAAgB,GACtB,OAAO,GACP,WAAW,GACX,YAAY,GACZ,aAAa,GACb,aAAa,GACb,cAAc,GACd,WAAW,GACX,eAAe,GACf,YAAY,GACZ,mBAAmB,GACnB,aAAa,GACb,cAAc,GACd,WAAW,GACX,gBAAgB,CAAC;AAEvB,MAAM,WAAW,UAAW,SAAQ,QAAQ,EAAE,cAAc,CAAC,YAAY,CAAC;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAChB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB;;;;OAIG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/C;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC;IACrD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;OAIG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,iBAAiB,CAAC,GAAG,CAAC,CAAC;IACvC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC;IAC/B,KAAK,EAAE,UAAU,CAAC;IAClB,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,gBAAgB,CAAC;CACjC,CAAC,CAAC;AAaH,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,CA2K9C,CAAC"}

package/dist/esm/components/Facet/Facet.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { CrossSize16Px, FilterSize16Px } from '@coveord/plasma-react-icons';
-import { Box, Combobox, Divider, factory, Text, TextInput, Title, useCombobox, useProps } from '@mantine/core';
+import { IconSearch } from '@coveord/plasma-react-icons';
+import { Box, CloseButton, Combobox, Divider, factory, Group, Text, TextInput, Title, useCombobox, useProps } from '@mantine/core';
 import { useUncontrolled } from '@mantine/hooks';
 import { clsx } from 'clsx';
 import { useEffect } from 'react';
 import { groupOptions } from '../../utils/groupOptions.js';
-import { ActionIcon } from '../ActionIcon/ActionIcon.js';
 import { DefaultFacetItem } from './DefaultFacetItem.js';
 import classes from './Facet.module.css';
 import { FacetScrollArea } from './FacetScrollArea.js';
@@ -16,11 +15,12 @@ const defaultProps = {
     height: 200,
     limit: Infinity,
     itemComponent: DefaultFacetItem,
-    listComponent: FacetScrollArea
+    listComponent: FacetScrollArea,
+    removable: false
 };
 export const Facet = factory((_props, ref)=>{
     const props = useProps('Facet', defaultProps, _props);
-    const { className, data, onChange, initialSelection = [], selection, itemComponent: ItemComponent, listComponent: ListComponent, itemCountFormatter, searchPlaceholder, query, hideSearch = data.length <= 7, onSearch, filter = defaultFilter, nothingFound, placeholder, title, height, radius, __staticSelector, classNames, styles, limit, unstyled, ...others } = props;
+    const { className, data, onChange, onRemove, initialSelection = [], removable, selection, itemComponent: ItemComponent, listComponent: ListComponent, itemCountFormatter, searchPlaceholder, query, hideSearch = data.length <= 7, onSearch, filter = defaultFilter, nothingFound, placeholder, title, height, radius, __staticSelector, classNames, styles, limit, unstyled, ...others } = props;
     const combobox = useCombobox();
     const [search, handleSearch] = useUncontrolled({
         value: query,
@@ -102,10 +102,23 @@ export const Facet = factory((_props, ref)=>{
                     children: /*#__PURE__*/ _jsxs(Box, {
                         className: classes.facetHeader,
                         children: [
-                            title ? /*#__PURE__*/ _jsx(Title, {
-                                order: 5,
-                                children: title
-                            }) : null,
+                            /*#__PURE__*/ _jsxs(Group, {
+                                wrap: "nowrap",
+                                justify: "space-between",
+                                className: classes.facetTitleRow,
+                                children: [
+                                    title ? /*#__PURE__*/ _jsx(Title, {
+                                        order: 5,
+                                        className: classes.facetTitle,
+                                        children: title
+                                    }) : null,
+                                    removable ? /*#__PURE__*/ _jsx(CloseButton, {
+                                        onClick: onRemove,
+                                        className: classes.facetRemoveButton,
+                                        "aria-label": "remove facet"
+                                    }) : null
+                                ]
+                            }),
                             /*#__PURE__*/ _jsx(TextInput, {
                                 unstyled: unstyled,
                                 value: search,
@@ -119,16 +132,12 @@ export const Facet = factory((_props, ref)=>{
                                 className: clsx(classes.facetSearch, {
                                     [classes.hiddenSearch]: hideSearch
                                 }),
-                                rightSection: search ? /*#__PURE__*/ _jsx(ActionIcon.Quaternary, {
+                                rightSection: search ? /*#__PURE__*/ _jsx(CloseButton, {
                                     "aria-label": "clear search",
-                                    color: "gray",
                                     onClick: ()=>{
                                         handleSearch('');
-                                    },
-                                    children: /*#__PURE__*/ _jsx(CrossSize16Px, {
-                                        height: 16
-                                    })
-                                }) : /*#__PURE__*/ _jsx(FilterSize16Px, {
+                                    }
+                                }) : /*#__PURE__*/ _jsx(IconSearch, {
                                     height: 16
                                 })
                             })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Facet/Facet.tsx"],"sourcesContent":["import {CrossSize16Px, FilterSize16Px} from '@coveord/plasma-react-icons';\nimport {\n    Box,\n    BoxProps,\n    Combobox,\n    Divider,\n    factory,\n    Factory,\n    StylesApiProps,\n    Text,\n    TextInput,\n    Title,\n    useCombobox,\n    useProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport {clsx} from 'clsx';\nimport {FunctionComponent, ReactElement, ReactNode, useEffect} from 'react';\nimport {groupOptions} from '../../utils/groupOptions.js';\nimport {ActionIcon} from '../ActionIcon/ActionIcon.js';\nimport {DefaultFacetItem} from './DefaultFacetItem.js';\nimport classes from './Facet.module.css';\nimport {FacetScrollArea} from './FacetScrollArea.js';\nimport {FacetData, FacetItem, FacetItemComponent} from './FacetTypes.js';\n\nexport type FacetStylesNames =\n    | 'facet'\n    | 'facetItem'\n    | 'facetItems'\n    | 'facetHeader'\n    | 'searchInput'\n    | 'hiddenSearch'\n    | 'facetBody'\n    | 'facetTitle'\n    | 'facetSearch'\n    | 'facetControl'\n    | 'separator'\n    | 'separatorLabel';\n\nexport interface FacetProps extends BoxProps, StylesApiProps<FacetFactory> {\n    className?: string;\n    /**\n     * The data to render in the component\n     */\n    data: FacetData;\n    /**\n     * Function called when an item is selected or unselected\n     *\n     * @param values the selected items\n     */\n    onChange?: (values: string[]) => void;\n    /**\n     * Initial items selection\n     *\n     * @default []\n     */\n    initialSelection?: string[];\n    /**\n     * Determined items selection\n     *\n     * @default []\n     */\n    selection?: string[];\n    /**\n     * Custom item component\n     *\n     * @default a checkbox with the label of the item\n     */\n    itemComponent?: FacetItemComponent;\n    /**\n     * Function to format the facet item count\n     *\n     * @param count\n     * @default (count) => count.toString()\n     */\n    itemCountFormatter?: (value: number) => string;\n    /**\n     * Search input placeholder\n     */\n    searchPlaceholder?: string;\n    /**\n     * Called when the search query changes\n     *\n     * @param value the search query\n     */\n    onSearch?: (value: string) => void;\n    /**\n     * Function to filter search results\n     *\n     * @param query value of the search input\n     * @param item the current item\n     *\n     * @default function that compare the query with the label and value, case-insensitive\n     */\n    filter?: (query: string, item: FacetItem) => boolean;\n    /**\n     * Value of the search input\n     */\n    query?: string;\n    /**\n     * Nothing found message\n     *\n     * @default No matching items\n     */\n    nothingFound?: ReactNode;\n    /**\n     * Displayed when a list is empty and there is no search query\n     *\n     * @default No items\n     */\n    placeholder?: ReactNode;\n    /**\n     * Facet title\n     */\n    title?: ReactNode;\n    /**\n     * Maximum height, only used when there is more than 7 values\n     *\n     * @default 200\n     */\n    height?: number | 'auto';\n    /**\n     * Predefined border-radius value from theme.radius or number for border-radius in px\n     *\n     * @default md\n     */\n    radius?: number | string;\n    /**\n     * Change list component, can be used to add custom scrollbars\n     */\n    listComponent?: FunctionComponent<any>;\n    /**\n     * Limit amount of items showed at a time\n     *\n     * @default Infinity\n     */\n    limit?: number;\n    /**\n     * Control the displaying of the search input.\n     *\n     * @default data.length <= 7\n     */\n    hideSearch?: boolean;\n    __staticSelector?: string;\n}\n\nexport type FacetFactory = Factory<{\n    props: FacetProps;\n    ref: HTMLDivElement;\n    stylesNames: FacetStylesNames;\n}>;\n\nconst defaultProps: Partial<FacetProps> = {\n    searchPlaceholder: 'Search',\n    nothingFound: 'No matching items',\n    placeholder: 'No items',\n    height: 200,\n    limit: Infinity,\n    itemComponent: DefaultFacetItem,\n    listComponent: FacetScrollArea,\n};\n\nexport const Facet: FunctionComponent<FacetProps> = factory<FacetFactory>((_props, ref) => {\n    const props = useProps('Facet', defaultProps, _props);\n    const {\n        className,\n        data,\n        onChange,\n        initialSelection = [],\n        selection,\n        itemComponent: ItemComponent,\n        listComponent: ListComponent,\n        itemCountFormatter,\n        searchPlaceholder,\n        query,\n        hideSearch = data.length <= 7,\n        onSearch,\n        filter = defaultFilter,\n        nothingFound,\n        placeholder,\n        title,\n        height,\n        radius,\n        __staticSelector,\n        classNames,\n        styles,\n        limit,\n        unstyled,\n        ...others\n    } = props;\n    const combobox = useCombobox();\n    const [search, handleSearch] = useUncontrolled({\n        value: query,\n        defaultValue: '',\n        finalValue: '',\n        onChange: onSearch,\n    });\n\n    const [_selection, handleSelection] = useUncontrolled({\n        value: selection,\n        defaultValue: initialSelection,\n        finalValue: [],\n        onChange,\n    });\n\n    const unGroupedItems: ReactElement[] = [];\n    const groupedItems: ReactElement[] = [];\n    const filteredData = data.filter((item) => filter(search, item)).slice(0, limit);\n\n    const sortedData: FacetData = groupOptions({data: filteredData});\n\n    const handleValueSelect = (val: string) =>\n        handleSelection(_selection.includes(val) ? _selection.filter((v) => v !== val) : [..._selection, val]);\n\n    let groupName: string = null;\n\n    useEffect(() => {\n        combobox.openDropdown();\n    }, []);\n\n    sortedData.forEach((item) => {\n        const isSelected = _selection.includes(item.value);\n        const itemComponent = (\n            <Combobox.Option\n                aria-selected={isSelected ? true : false}\n                value={item.value}\n                key={item.value}\n                onMouseEnter={() => combobox.resetSelectedOption()}\n                className={clsx(classes.facetItem)}\n            >\n                <ItemComponent data={item} selected={isSelected} countFormatter={itemCountFormatter} />\n            </Combobox.Option>\n        );\n\n        if (!item.group) {\n            unGroupedItems.push(itemComponent);\n        } else {\n            if (groupName !== item.group) {\n                groupName = item.group;\n                groupedItems.push(\n                    <div className={classes.separator} key={groupName}>\n                        <Divider classNames={{label: classes.separatorLabel}} label={groupName} />\n                    </div>,\n                );\n            }\n            groupedItems.push(itemComponent);\n        }\n    });\n\n    if (groupedItems.length > 0 && unGroupedItems.length > 0) {\n        unGroupedItems.unshift(\n            <div className={classes.separator} key=\"ungrouped-separator\">\n                <Divider unstyled={unstyled} classNames={{label: classes.separatorLabel}} />\n            </div>,\n        );\n    }\n\n    return (\n        <Box className={clsx(classes.facet, className)} {...others} ref={ref}>\n            <Combobox store={combobox} onOptionSubmit={handleValueSelect}>\n                <Combobox.EventsTarget>\n                    <Box className={classes.facetHeader}>\n                        {title ? <Title order={5}>{title}</Title> : null}\n\n                        <TextInput\n                            unstyled={unstyled}\n                            value={search}\n                            onChange={(event) => {\n                                handleSearch(event.currentTarget.value);\n                                combobox.updateSelectedOptionIndex();\n                            }}\n                            placeholder={searchPlaceholder}\n                            aria-hidden={hideSearch}\n                            tabIndex={hideSearch ? -1 : undefined}\n                            className={clsx(classes.facetSearch, {[classes.hiddenSearch]: hideSearch})}\n                            rightSection={\n                                search ? (\n                                    <ActionIcon.Quaternary\n                                        aria-label=\"clear search\"\n                                        color=\"gray\"\n                                        onClick={() => {\n                                            handleSearch('');\n                                        }}\n                                    >\n                                        <CrossSize16Px height={16} />\n                                    </ActionIcon.Quaternary>\n                                ) : (\n                                    <FilterSize16Px height={16} />\n                                )\n                            }\n                        />\n                    </Box>\n                </Combobox.EventsTarget>\n                <div className={classes.facetBody}>\n                    <Combobox.EventsTarget>\n                        <ListComponent\n                            className={classes.facetItems}\n                            mah={height}\n                            style={{overflow: 'auto', position: 'relative'}}\n                            tabIndex={hideSearch ? 0 : undefined}\n                        >\n                            <Combobox.Options aria-multiselectable=\"true\">\n                                {groupedItems.length > 0 || unGroupedItems.length > 0 ? (\n                                    <>\n                                        {groupedItems}\n                                        {unGroupedItems}\n                                    </>\n                                ) : (\n                                    <Combobox.Empty>\n                                        <Text c=\"dimmed\" unstyled={unstyled} size=\"sm\" ta=\"center\" my=\"sm\">\n                                            {!search && placeholder ? placeholder : nothingFound}\n                                        </Text>\n                                    </Combobox.Empty>\n                                )}\n                            </Combobox.Options>\n                        </ListComponent>\n                    </Combobox.EventsTarget>\n                </div>\n            </Combobox>\n        </Box>\n    );\n});\n\nFacet.displayName = 'Facet';\n\nconst defaultFilter = (query: string, item: FacetItem) =>\n    item.label.toLowerCase().trim().includes(query.toLowerCase().trim()) ||\n    item.value.toLowerCase().trim().includes(query.toLowerCase().trim());\n"],"names":["CrossSize16Px","FilterSize16Px","Box","Combobox","Divider","factory","Text","TextInput","Title","useCombobox","useProps","useUncontrolled","clsx","useEffect","groupOptions","ActionIcon","DefaultFacetItem","classes","FacetScrollArea","defaultProps","searchPlaceholder","nothingFound","placeholder","height","limit","Infinity","itemComponent","listComponent","Facet","_props","ref","props","className","data","onChange","initialSelection","selection","ItemComponent","ListComponent","itemCountFormatter","query","hideSearch","length","onSearch","filter","defaultFilter","title","radius","__staticSelector","classNames","styles","unstyled","others","combobox","search","handleSearch","value","defaultValue","finalValue","_selection","handleSelection","unGroupedItems","groupedItems","filteredData","item","slice","sortedData","handleValueSelect","val","includes","v","groupName","openDropdown","forEach","isSelected","Option","aria-selected","onMouseEnter","resetSelectedOption","facetItem","selected","countFormatter","group","push","div","separator","label","separatorLabel","unshift","facet","store","onOptionSubmit","EventsTarget","facetHeader","order","event","currentTarget","updateSelectedOptionIndex","aria-hidden","tabIndex","undefined","facetSearch","hiddenSearch","rightSection","Quaternary","aria-label","color","onClick","facetBody","facetItems","mah","style","overflow","position","Options","aria-multiselectable","Empty","c","size","ta","my","displayName","toLowerCase","trim"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Facet/Facet.tsx"],"sourcesContent":["import {IconSearch} from '@coveord/plasma-react-icons';\nimport {\n    Box,\n    BoxProps,\n    CloseButton,\n    Combobox,\n    Divider,\n    factory,\n    Factory,\n    Group,\n    StylesApiProps,\n    Text,\n    TextInput,\n    Title,\n    useCombobox,\n    useProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport {clsx} from 'clsx';\nimport {FunctionComponent, ReactElement, ReactNode, useEffect} from 'react';\nimport {groupOptions} from '../../utils/groupOptions.js';\nimport {DefaultFacetItem} from './DefaultFacetItem.js';\nimport classes from './Facet.module.css';\nimport {FacetScrollArea} from './FacetScrollArea.js';\nimport {FacetData, FacetItem, FacetItemComponent} from './FacetTypes.js';\n\nexport type FacetStylesNames =\n    | 'facet'\n    | 'facetItem'\n    | 'facetItems'\n    | 'facetHeader'\n    | 'searchInput'\n    | 'hiddenSearch'\n    | 'facetBody'\n    | 'facetTitleRow'\n    | 'facetTitle'\n    | 'facetRemoveButton'\n    | 'facetSearch'\n    | 'facetControl'\n    | 'separator'\n    | 'separatorLabel';\n\nexport interface FacetProps extends BoxProps, StylesApiProps<FacetFactory> {\n    className?: string;\n    /**\n     * The data to render in the component\n     */\n    data: FacetData;\n    /**\n     * Function called when an item is selected or unselected\n     *\n     * @param values the selected items\n     */\n    onChange?: (values: string[]) => void;\n    /**\n     * Function called when the remove icon is clicked.\n     */\n    onRemove?: () => void;\n    /**\n     * Initial items selection\n     *\n     * @default []\n     */\n    initialSelection?: string[];\n    /**\n     * Determines if the facet is removable\n     *\n     * @default false\n     */\n    removable?: boolean;\n    /**\n     * Determined items selection\n     *\n     * @default []\n     */\n    selection?: string[];\n    /**\n     * Custom item component\n     *\n     * @default a checkbox with the label of the item\n     */\n    itemComponent?: FacetItemComponent;\n    /**\n     * Function to format the facet item count\n     *\n     * @param count\n     * @default (count) => count.toString()\n     */\n    itemCountFormatter?: (value: number) => string;\n    /**\n     * Search input placeholder\n     */\n    searchPlaceholder?: string;\n    /**\n     * Called when the search query changes\n     *\n     * @param value the search query\n     */\n    onSearch?: (value: string) => void;\n    /**\n     * Function to filter search results\n     *\n     * @param query value of the search input\n     * @param item the current item\n     *\n     * @default function that compare the query with the label and value, case-insensitive\n     */\n    filter?: (query: string, item: FacetItem) => boolean;\n    /**\n     * Value of the search input\n     */\n    query?: string;\n    /**\n     * Nothing found message\n     *\n     * @default No matching items\n     */\n    nothingFound?: ReactNode;\n    /**\n     * Displayed when a list is empty and there is no search query\n     *\n     * @default No items\n     */\n    placeholder?: ReactNode;\n    /**\n     * Facet title\n     */\n    title?: ReactNode;\n    /**\n     * Maximum height, only used when there is more than 7 values\n     *\n     * @default 200\n     */\n    height?: number | 'auto';\n    /**\n     * Predefined border-radius value from theme.radius or number for border-radius in px\n     *\n     * @default md\n     */\n    radius?: number | string;\n    /**\n     * Change list component, can be used to add custom scrollbars\n     */\n    listComponent?: FunctionComponent<any>;\n    /**\n     * Limit amount of items showed at a time\n     *\n     * @default Infinity\n     */\n    limit?: number;\n    /**\n     * Control the displaying of the search input.\n     *\n     * @default data.length <= 7\n     */\n    hideSearch?: boolean;\n    __staticSelector?: string;\n}\n\nexport type FacetFactory = Factory<{\n    props: FacetProps;\n    ref: HTMLDivElement;\n    stylesNames: FacetStylesNames;\n}>;\n\nconst defaultProps: Partial<FacetProps> = {\n    searchPlaceholder: 'Search',\n    nothingFound: 'No matching items',\n    placeholder: 'No items',\n    height: 200,\n    limit: Infinity,\n    itemComponent: DefaultFacetItem,\n    listComponent: FacetScrollArea,\n    removable: false,\n};\n\nexport const Facet: FunctionComponent<FacetProps> = factory<FacetFactory>((_props, ref) => {\n    const props = useProps('Facet', defaultProps, _props);\n    const {\n        className,\n        data,\n        onChange,\n        onRemove,\n        initialSelection = [],\n        removable,\n        selection,\n        itemComponent: ItemComponent,\n        listComponent: ListComponent,\n        itemCountFormatter,\n        searchPlaceholder,\n        query,\n        hideSearch = data.length <= 7,\n        onSearch,\n        filter = defaultFilter,\n        nothingFound,\n        placeholder,\n        title,\n        height,\n        radius,\n        __staticSelector,\n        classNames,\n        styles,\n        limit,\n        unstyled,\n        ...others\n    } = props;\n    const combobox = useCombobox();\n    const [search, handleSearch] = useUncontrolled({\n        value: query,\n        defaultValue: '',\n        finalValue: '',\n        onChange: onSearch,\n    });\n\n    const [_selection, handleSelection] = useUncontrolled({\n        value: selection,\n        defaultValue: initialSelection,\n        finalValue: [],\n        onChange,\n    });\n\n    const unGroupedItems: ReactElement[] = [];\n    const groupedItems: ReactElement[] = [];\n    const filteredData = data.filter((item) => filter(search, item)).slice(0, limit);\n\n    const sortedData: FacetData = groupOptions({data: filteredData});\n\n    const handleValueSelect = (val: string) =>\n        handleSelection(_selection.includes(val) ? _selection.filter((v) => v !== val) : [..._selection, val]);\n\n    let groupName: string = null;\n\n    useEffect(() => {\n        combobox.openDropdown();\n    }, []);\n\n    sortedData.forEach((item) => {\n        const isSelected = _selection.includes(item.value);\n        const itemComponent = (\n            <Combobox.Option\n                aria-selected={isSelected ? true : false}\n                value={item.value}\n                key={item.value}\n                onMouseEnter={() => combobox.resetSelectedOption()}\n                className={clsx(classes.facetItem)}\n            >\n                <ItemComponent data={item} selected={isSelected} countFormatter={itemCountFormatter} />\n            </Combobox.Option>\n        );\n\n        if (!item.group) {\n            unGroupedItems.push(itemComponent);\n        } else {\n            if (groupName !== item.group) {\n                groupName = item.group;\n                groupedItems.push(\n                    <div className={classes.separator} key={groupName}>\n                        <Divider classNames={{label: classes.separatorLabel}} label={groupName} />\n                    </div>,\n                );\n            }\n            groupedItems.push(itemComponent);\n        }\n    });\n\n    if (groupedItems.length > 0 && unGroupedItems.length > 0) {\n        unGroupedItems.unshift(\n            <div className={classes.separator} key=\"ungrouped-separator\">\n                <Divider unstyled={unstyled} classNames={{label: classes.separatorLabel}} />\n            </div>,\n        );\n    }\n\n    return (\n        <Box className={clsx(classes.facet, className)} {...others} ref={ref}>\n            <Combobox store={combobox} onOptionSubmit={handleValueSelect}>\n                <Combobox.EventsTarget>\n                    <Box className={classes.facetHeader}>\n                        <Group wrap=\"nowrap\" justify=\"space-between\" className={classes.facetTitleRow}>\n                            {title ? (\n                                <Title order={5} className={classes.facetTitle}>\n                                    {title}\n                                </Title>\n                            ) : null}\n                            {removable ? (\n                                <CloseButton\n                                    onClick={onRemove}\n                                    className={classes.facetRemoveButton}\n                                    aria-label=\"remove facet\"\n                                />\n                            ) : null}\n                        </Group>\n\n                        <TextInput\n                            unstyled={unstyled}\n                            value={search}\n                            onChange={(event) => {\n                                handleSearch(event.currentTarget.value);\n                                combobox.updateSelectedOptionIndex();\n                            }}\n                            placeholder={searchPlaceholder}\n                            aria-hidden={hideSearch}\n                            tabIndex={hideSearch ? -1 : undefined}\n                            className={clsx(classes.facetSearch, {[classes.hiddenSearch]: hideSearch})}\n                            rightSection={\n                                search ? (\n                                    <CloseButton\n                                        aria-label=\"clear search\"\n                                        onClick={() => {\n                                            handleSearch('');\n                                        }}\n                                    />\n                                ) : (\n                                    <IconSearch height={16} />\n                                )\n                            }\n                        />\n                    </Box>\n                </Combobox.EventsTarget>\n                <div className={classes.facetBody}>\n                    <Combobox.EventsTarget>\n                        <ListComponent\n                            className={classes.facetItems}\n                            mah={height}\n                            style={{overflow: 'auto', position: 'relative'}}\n                            tabIndex={hideSearch ? 0 : undefined}\n                        >\n                            <Combobox.Options aria-multiselectable=\"true\">\n                                {groupedItems.length > 0 || unGroupedItems.length > 0 ? (\n                                    <>\n                                        {groupedItems}\n                                        {unGroupedItems}\n                                    </>\n                                ) : (\n                                    <Combobox.Empty>\n                                        <Text c=\"dimmed\" unstyled={unstyled} size=\"sm\" ta=\"center\" my=\"sm\">\n                                            {!search && placeholder ? placeholder : nothingFound}\n                                        </Text>\n                                    </Combobox.Empty>\n                                )}\n                            </Combobox.Options>\n                        </ListComponent>\n                    </Combobox.EventsTarget>\n                </div>\n            </Combobox>\n        </Box>\n    );\n});\n\nFacet.displayName = 'Facet';\n\nconst defaultFilter = (query: string, item: FacetItem) =>\n    item.label.toLowerCase().trim().includes(query.toLowerCase().trim()) ||\n    item.value.toLowerCase().trim().includes(query.toLowerCase().trim());\n"],"names":["IconSearch","Box","CloseButton","Combobox","Divider","factory","Group","Text","TextInput","Title","useCombobox","useProps","useUncontrolled","clsx","useEffect","groupOptions","DefaultFacetItem","classes","FacetScrollArea","defaultProps","searchPlaceholder","nothingFound","placeholder","height","limit","Infinity","itemComponent","listComponent","removable","Facet","_props","ref","props","className","data","onChange","onRemove","initialSelection","selection","ItemComponent","ListComponent","itemCountFormatter","query","hideSearch","length","onSearch","filter","defaultFilter","title","radius","__staticSelector","classNames","styles","unstyled","others","combobox","search","handleSearch","value","defaultValue","finalValue","_selection","handleSelection","unGroupedItems","groupedItems","filteredData","item","slice","sortedData","handleValueSelect","val","includes","v","groupName","openDropdown","forEach","isSelected","Option","aria-selected","onMouseEnter","resetSelectedOption","facetItem","selected","countFormatter","group","push","div","separator","label","separatorLabel","unshift","facet","store","onOptionSubmit","EventsTarget","facetHeader","wrap","justify","facetTitleRow","order","facetTitle","onClick","facetRemoveButton","aria-label","event","currentTarget","updateSelectedOptionIndex","aria-hidden","tabIndex","undefined","facetSearch","hiddenSearch","rightSection","facetBody","facetItems","mah","style","overflow","position","Options","aria-multiselectable","Empty","c","size","ta","my","displayName","toLowerCase","trim"],"mappings":"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"}

package/dist/esm/components/Facet/Facet.module.css

@@ -56,8 +56,21 @@
     flex: 1;
 }
 
+.facetTitleRow {
+    width: 100%;
+    min-width: 0;
+}
+
 .facetTitle {
+    flex: 1;
+    min-width: 0;
     margin-bottom: 0;
+    overflow-wrap: anywhere;
+}
+
+.facetRemoveButton {
+    flex-shrink: 0;
+    margin-left: auto;
 }
 
 .facetSearch {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "59.4.0",
+  "version": "59.4.1",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -81,8 +81,8 @@
     "fast-deep-equal": "3.1.3",
     "lodash.defaultsdeep": "4.6.1",
     "monaco-editor": "0.55.1",
-    "@coveord/plasma-react-icons": "59.1.2",
-    "@coveord/plasma-tokens": "59.1.2"
+    "@coveord/plasma-tokens": "59.4.1",
+    "@coveord/plasma-react-icons": "59.4.1"
   },
   "devDependencies": {
     "@mantine/carousel": "8.3.18",
@@ -94,7 +94,7 @@
     "@mantine/modals": "8.3.18",
     "@mantine/notifications": "8.3.18",
     "@swc/cli": "0.8.1",
-    "@swc/core": "1.15.26",
+    "@swc/core": "1.15.32",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.2",
@@ -108,8 +108,8 @@
     "embla-carousel-react": "8.6.0",
     "eslint-plugin-testing-library": "7.16.2",
     "eslint-plugin-vitest-globals": "1.6.1",
-    "jsdom": "29.0.2",
-    "postcss": "8.5.10",
+    "jsdom": "29.1.0",
+    "postcss": "8.5.12",
     "postcss-preset-mantine": "^1.11.0",
     "postcss-simple-vars": "^7.0.1",
     "publint": "0.3.18",
@@ -118,7 +118,7 @@
     "rimraf": "6.1.3",
     "tslib": "2.8.1",
     "typescript": "5.9.3",
-    "vitest": "4.1.4"
+    "vitest": "4.1.5"
   },
   "peerDependencies": {
     "@mantine/carousel": "^8.0.2",

package/src/components/Facet/Facet.module.css

@@ -56,8 +56,21 @@
     flex: 1;
 }
 
+.facetTitleRow {
+    width: 100%;
+    min-width: 0;
+}
+
 .facetTitle {
+    flex: 1;
+    min-width: 0;
     margin-bottom: 0;
+    overflow-wrap: anywhere;
+}
+
+.facetRemoveButton {
+    flex-shrink: 0;
+    margin-left: auto;
 }
 
 .facetSearch {