draft-components 1.5.0 → 1.7.0

package/esm/components/filtered-search/filtered-search.js

@@ -0,0 +1,200 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useMemo } from 'react';
+import { StringFilter } from './model/string-filter.js';
+import { StringSetFilter } from './model/string-set-filter.js';
+import { TranslationsProvider } from './use-translations.js';
+import { useComboboxIds } from './use-combobox-ids.js';
+import '../button/button.js';
+import { IconButton } from '../button/icon-button.js';
+import { FilterItem } from './filter-item.js';
+import { MagnifyingGlassIcon, TrashIcon } from './icons.js';
+import { KeyboardKeys } from '../../lib/keyboard-keys.js';
+import { exhaustiveCheck } from '../../lib/helpers.js';
+import { classNames } from '../../lib/react-helpers.js';
+
+function FilteredSearch({ className, placeholder = 'Search and filter', applyButtonLabel = 'Apply', cancelButtonLabel = 'Cancel', clearButtonAccessibleName = 'Clear', removeFilterButtonAccessibleName = 'Remove filter', filtersConfig, filters, onChange, onMouseDown, ...props }) {
+    const containerRef = useRef(null);
+    const [query, setQuery] = useState('');
+    const [hasFocus, setHasFocus] = useState(false);
+    const [expanded, setExpanded] = useState(false);
+    const [selectedId, setSelectedId] = useState('');
+    const [activeField, setActiveField] = useState('');
+    const { textBoxId, listBoxId, getOptionId } = useComboboxIds();
+    const filtersConfigMap = useMemo(() => {
+        const map = new Map();
+        for (const config of filtersConfig) {
+            map.set(getOptionId(config.field), config);
+        }
+        return map;
+    }, [filtersConfig, getOptionId]);
+    const getTextBoxElement = () => {
+        const textBox = document.getElementById(textBoxId);
+        if (!(textBox instanceof HTMLInputElement)) {
+            throw new Error(`Unable to find input element with ID ${textBoxId}.`);
+        }
+        return textBox;
+    };
+    const addFilter = (config) => {
+        const filter = createFilter(config);
+        const textBoxElement = getTextBoxElement();
+        onChange([...filters, filter]);
+        textBoxElement.blur();
+        setQuery('');
+        setActiveField(filter.field);
+    };
+    const changeFilter = (changedFilter) => {
+        const newFilters = filters.map((filter) => (filter.field === changedFilter.field ? changedFilter : filter));
+        onChange(newFilters);
+    };
+    const removeFilter = (filterToRemove) => {
+        const newFilters = filters.filter((filter) => (filter.field !== filterToRemove.field));
+        onChange(newFilters);
+    };
+    const onFilterEditStarted = (filter) => {
+        setActiveField(filter.field);
+    };
+    const onFilterEditCanceled = (filter) => {
+        setActiveField('');
+        if (filter.isEmpty()) {
+            removeFilter(filter);
+            getTextBoxElement().focus();
+        }
+    };
+    const onFilterChanged = (filter) => {
+        changeFilter(filter);
+        setActiveField('');
+    };
+    const renderedFilters = [];
+    const fieldsWithAppliedFilters = new Set();
+    for (const filter of filters) {
+        const field = filter.field;
+        fieldsWithAppliedFilters.add(field);
+        renderedFilters.push(jsx(FilterItem, { filter: filter, isEditing: activeField === field, onEditStart: onFilterEditStarted, onEditCancel: onFilterEditCanceled, onChange: onFilterChanged, onRemove: removeFilter }, field));
+    }
+    const onOptionHovered = (event) => {
+        const listItemElement = event.currentTarget;
+        setSelectedId(listItemElement.id);
+    };
+    const onOptionPressed = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const listItemElement = event.currentTarget;
+        const config = filtersConfigMap.get(listItemElement.id);
+        if (config) {
+            addFilter(config);
+        }
+    };
+    const renderedOptions = [];
+    const search = query.toLowerCase();
+    for (const [id, config] of filtersConfigMap) {
+        if (fieldsWithAppliedFilters.has(config.field)) {
+            continue;
+        }
+        if (!config.label.toLowerCase().includes(search)) {
+            continue;
+        }
+        renderedOptions.push(jsx("li", { id: id, role: "option", "data-field": config.field, "aria-selected": selectedId === id, onMouseEnter: onOptionHovered, onMouseDown: onOptionPressed, children: config.label }, id));
+    }
+    const onInputFocused = () => {
+        setHasFocus(true);
+        setExpanded(true);
+    };
+    const onInputBlurred = () => {
+        setExpanded(false);
+        setHasFocus(false);
+        setQuery('');
+        setSelectedId('');
+    };
+    const onInputKeyPressed = (event) => {
+        const key = event.key;
+        const inputElement = event.currentTarget;
+        const optionIds = renderedOptions.map((opt) => opt.props.id);
+        const firstIndex = 0;
+        const lastIndex = optionIds.length - 1;
+        const selectedIdIndex = optionIds.findIndex((id) => id === selectedId);
+        let isHandled = false;
+        let nextIdIndex = selectedIdIndex;
+        if (key === KeyboardKeys.ArrowDown) {
+            nextIdIndex = selectedIdIndex + 1;
+            isHandled = true;
+        }
+        else if (key === KeyboardKeys.ArrowUp) {
+            nextIdIndex = selectedIdIndex - 1;
+            isHandled = true;
+        }
+        else if (key === KeyboardKeys.Enter) {
+            const config = filtersConfigMap.get(selectedId);
+            if (config) {
+                addFilter(config);
+                isHandled = true;
+            }
+        }
+        else if (key === KeyboardKeys.Backspace) {
+            if (query === '' && filters.length > 0) {
+                onChange(filters.slice(0, -1));
+                isHandled = true;
+            }
+        }
+        else if (key === KeyboardKeys.Escape) {
+            inputElement.blur();
+            isHandled = true;
+        }
+        if (nextIdIndex !== selectedIdIndex) {
+            if (nextIdIndex < firstIndex) {
+                nextIdIndex = lastIndex;
+            }
+            if (nextIdIndex > lastIndex) {
+                nextIdIndex = firstIndex;
+            }
+            setSelectedId(optionIds[nextIdIndex]);
+        }
+        else if (renderedOptions.length === 0) {
+            setSelectedId('');
+        }
+        if (isHandled) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
+    const onInputChanged = (event) => {
+        setQuery(event.target.value);
+    };
+    const onClearButtonPressed = (event) => {
+        event.stopPropagation();
+        onChange([]);
+    };
+    const onContainerPressed = (event) => {
+        if (event.currentTarget === event.target) {
+            const textBoxElement = getTextBoxElement();
+            textBoxElement.focus();
+            event.stopPropagation();
+            event.preventDefault();
+        }
+        if (typeof onMouseDown === 'function') {
+            onMouseDown(event);
+        }
+    };
+    return (jsx(TranslationsProvider, { applyButton: applyButtonLabel, cancelButton: cancelButtonLabel, removeFilterButton: removeFilterButtonAccessibleName, children: jsxs("div", { ref: containerRef, "data-testid": "combobox-container", className: classNames(className, {
+                'dc-filtered-search': true,
+                'dc-filtered-search_has_focus': hasFocus,
+            }), onMouseDown: onContainerPressed, ...props, children: [jsx(MagnifyingGlassIcon, { className: "dc-filtered-search__icon" }), jsxs("div", { className: "dc-filtered-search__filters", children: [renderedFilters, jsx("input", { className: "dc-filtered-search__input", id: textBoxId, placeholder: placeholder, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-expanded": expanded, "aria-controls": listBoxId, "aria-activedescendant": selectedId, value: query, onFocus: onInputFocused, onBlur: onInputBlurred, onKeyDown: onInputKeyPressed, onChange: onInputChanged })] }), jsx(IconButton, { className: "dc-filtered-search__clear-button", "aria-label": clearButtonAccessibleName, icon: jsx(TrashIcon, {}), size: "sm", variant: "plain", appearance: "primary", onClick: onClearButtonPressed }), expanded && renderedOptions.length > 0 && (jsx("ul", { className: "dc-filtered-search__list-box", id: listBoxId, role: "listbox", children: renderedOptions }))] }) }));
+}
+function createFilter(config) {
+    const filterType = config.type;
+    switch (filterType) {
+        case StringFilter.Type:
+            return new StringFilter(config, {
+                value: '',
+                operator: config.operators[0] || StringFilter.Operators.equal,
+            });
+        case StringSetFilter.Type:
+            return new StringSetFilter(config, {
+                value: [],
+                operator: config.operators[0] || StringSetFilter.Operators.in,
+            });
+        default:
+            exhaustiveCheck(filterType, `Unable to create a filter with ${filterType} type.`);
+    }
+}
+
+export { FilteredSearch };

package/esm/components/filtered-search/icons.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+
+function MagnifyingGlassIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 18, height: 18, fill: "none", stroke: "currentColor", strokeWidth: 1.5, ...props, children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" }) }));
+}
+function TrashIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 18, height: 18, fill: "none", stroke: "currentColor", strokeWidth: 1.5, ...props, children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" }) }));
+}
+function XMarkIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 16, height: 16, fill: "none", stroke: "currentColor", strokeWidth: 1.5, ...props, children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }));
+}
+function ArrowReturnRight(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: 16, height: 16, fill: "currentColor", ...props, children: jsx("path", { fillRule: "evenodd", d: "M1.5 1.5A.5.5 0 0 0 1 2v4.8a2.5 2.5 0 0 0 2.5 2.5h9.793l-3.347 3.346a.5.5 0 0 0 .708.708l4.2-4.2a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 8.3H3.5A1.5 1.5 0 0 1 2 6.8V2a.5.5 0 0 0-.5-.5z" }) }));
+}
+
+export { ArrowReturnRight, MagnifyingGlassIcon, TrashIcon, XMarkIcon };

package/esm/components/filtered-search/model/abstract-filter.js

@@ -0,0 +1,4 @@
+class AbstractFilter {
+}
+
+export { AbstractFilter };

package/esm/components/filtered-search/model/string-filter.js

@@ -0,0 +1,44 @@
+import { AbstractFilter } from './abstract-filter.js';
+
+const TYPE = 'STRING';
+const OPERATORS = {
+    equal: 'EQUAL',
+    notEqual: 'NOT_EQUAL',
+    contain: 'CONTAIN',
+    notContain: 'NOT_CONTAIN',
+};
+class StringFilter extends AbstractFilter {
+    constructor(config, state) {
+        super();
+        this.config = config;
+        this.state = state;
+    }
+    get type() {
+        return this.config.type;
+    }
+    get field() {
+        return this.config.field;
+    }
+    get label() {
+        return this.config.label;
+    }
+    get value() {
+        return this.state.value;
+    }
+    get operator() {
+        return this.state.operator;
+    }
+    setValue(value) {
+        return new StringFilter(this.config, { ...this.state, value });
+    }
+    setOperator(operator) {
+        return new StringFilter(this.config, { ...this.state, operator });
+    }
+    isEmpty() {
+        return this.value === '';
+    }
+}
+StringFilter.Type = TYPE;
+StringFilter.Operators = OPERATORS;
+
+export { StringFilter };

package/esm/components/filtered-search/model/string-set-filter.js

@@ -0,0 +1,42 @@
+import { AbstractFilter } from './abstract-filter.js';
+
+const TYPE = 'STRING_SET';
+const OPERATORS = {
+    in: 'IN',
+    notIn: 'NOT_IN',
+};
+class StringSetFilter extends AbstractFilter {
+    constructor(config, state) {
+        super();
+        this.config = config;
+        this.state = state;
+    }
+    get type() {
+        return this.config.type;
+    }
+    get field() {
+        return this.config.field;
+    }
+    get label() {
+        return this.config.label;
+    }
+    get value() {
+        return this.state.value;
+    }
+    get operator() {
+        return this.state.operator;
+    }
+    setValue(value) {
+        return new StringSetFilter(this.config, { ...this.state, value });
+    }
+    setOperator(operator) {
+        return new StringSetFilter(this.config, { ...this.state, operator });
+    }
+    isEmpty() {
+        return this.value.length === 0;
+    }
+}
+StringSetFilter.Type = TYPE;
+StringSetFilter.Operators = OPERATORS;
+
+export { StringSetFilter };

package/esm/components/filtered-search/string-filter-input.js

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+import { ArrowReturnRight } from './icons.js';
+import { TextInput } from '../text-input/text-input.js';
+import { Caption } from '../caption/caption.js';
+import { useId } from 'react';
+
+function StringFilterInput({ className, accessibleName, placeholder, error, value, onChangeValue, }) {
+    const id = useId();
+    const alertId = `${id}alert`;
+    const hasError = Boolean(error);
+    return (jsxs("div", { className: classNames('dc-string-filter-input', className), children: [jsx(ArrowReturnRight, {}), jsx(TextInput, { "data-testid": "string-filter-input", size: "sm", isBlock: true, "aria-label": accessibleName, "aria-describedby": hasError ? alertId : '', placeholder: placeholder, type: "text", required: true, autoFocus: true, value: value, hasError: hasError, onChangeValue: onChangeValue }), hasError && (jsx(Caption, { id: alertId, className: "dc-string-filter-input__error", appearance: "error", showIcon: true, role: "alert", children: error }))] }));
+}
+
+export { StringFilterInput };

package/esm/components/filtered-search/string-filter-item.js

@@ -0,0 +1,66 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { StringFilter } from './model/string-filter.js';
+import { useState } from 'react';
+import { useTranslations } from './use-translations.js';
+import { Popover } from '../popover/popover.js';
+import { FilterToken } from './filter-token.js';
+import { FilterOperatorSelect } from './filter-operator-select.js';
+import { StringFilterInput } from './string-filter-input.js';
+import { Button } from '../button/button.js';
+import '../button/icon-button.js';
+
+function StringFilterItem({ filter, isEditing, onEditStart, onEditCancel, onRemove, onChange, }) {
+    const translations = useTranslations();
+    const [filterOperator, setFilterOperator] = useState(filter.operator);
+    const [filterValue, setFilterValue] = useState(filter.value);
+    const [error, setError] = useState('');
+    const { label, operators, valueInputAccessibleName, valueInputPlaceholder, operatorSelectAccessibleName, valueValidator, operatorFormatter: formatOperator = defaultOperatorFormatter, } = filter.config;
+    const cancelEdit = () => {
+        onEditCancel(filter);
+    };
+    const startEdit = () => {
+        if (isEditing) {
+            cancelEdit();
+        }
+        else {
+            setFilterOperator(filter.operator);
+            setFilterValue(filter.value);
+            onEditStart(filter);
+        }
+    };
+    const onClickCloseButton = () => {
+        onRemove(filter);
+    };
+    const onSubmit = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (typeof valueValidator === 'function') {
+            const result = valueValidator(filterValue);
+            if (!result.valid) {
+                return setError(result.error);
+            }
+            setError('');
+        }
+        if (filterOperator !== filter.operator) {
+            filter = filter.setOperator(filterOperator);
+        }
+        if (filterValue !== filter.value) {
+            filter = filter.setValue(filterValue);
+        }
+        onChange(filter);
+    };
+    const anchor = (jsxs(FilterToken, { isHighlighted: isEditing, onClickLabel: startEdit, onClickCloseButton: onClickCloseButton, children: [label, filter.value ? (jsxs(Fragment, { children: ["\u00A0", jsx("span", { children: formatOperator(filter.operator) }), "\u00A0", jsx("b", { children: filter.value })] })) : null] }));
+    return (jsx(Popover, { className: "dc-filter-popover", anchor: anchor, anchorGap: 2, transitionDurationMs: 0, isOpen: isEditing, onClose: cancelEdit, children: jsxs("form", { className: "dc-filter-form", onSubmit: onSubmit, children: [jsx(FilterOperatorSelect, { className: "dc-filter-form__operator", accessibleName: operatorSelectAccessibleName, label: label, values: operators, value: filterOperator, onChange: setFilterOperator, formatValue: formatOperator }), jsx(StringFilterInput, { placeholder: valueInputPlaceholder, accessibleName: valueInputAccessibleName, error: error, value: filterValue, onChangeValue: setFilterValue }), jsxs("div", { className: "dc-filter-form__buttons", children: [jsx(Button, { variant: "plain", type: "button", onClick: cancelEdit, children: translations.cancelButton }), jsx(Button, { appearance: "primary", type: "submit", disabled: !filterValue, children: translations.applyButton })] })] }) }));
+}
+StringFilterItem.defaultOperatorFormatter = defaultOperatorFormatter;
+function defaultOperatorFormatter(operator) {
+    const messages = {
+        [StringFilter.Operators.equal]: 'is',
+        [StringFilter.Operators.notEqual]: 'is not',
+        [StringFilter.Operators.contain]: 'contains',
+        [StringFilter.Operators.notContain]: "doesn't contain",
+    };
+    return messages[operator];
+}
+
+export { StringFilterItem };

package/esm/components/filtered-search/string-set-filter-item.js

@@ -0,0 +1,75 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { StringSetFilter } from './model/string-set-filter.js';
+import { useState } from 'react';
+import { useTranslations } from './use-translations.js';
+import { Popover } from '../popover/popover.js';
+import { FilterToken } from './filter-token.js';
+import { FilterOperatorSelect } from './filter-operator-select.js';
+import { FilterValueList } from './filter-value-list.js';
+import { Button } from '../button/button.js';
+import '../button/icon-button.js';
+
+function StringSetFilterItem({ filter, isEditing, onEditStart, onEditCancel, onRemove, onChange, }) {
+    const translations = useTranslations();
+    const [filterOperator, setFilterOperator] = useState(filter.operator);
+    const [filterValue, setFilterValue] = useState(filter.value);
+    const { label, values, operators, operatorSelectAccessibleName, valueFormatter: formatValue = defaultValueFormatter, operatorFormatter: formatOperator = defaultOperatorFormatter, } = filter.config;
+    const cancelEdit = () => {
+        onEditCancel(filter);
+    };
+    const startEdit = () => {
+        if (isEditing) {
+            cancelEdit();
+        }
+        else {
+            setFilterOperator(filter.operator);
+            setFilterValue(filter.value);
+            onEditStart(filter);
+        }
+    };
+    const onClickCloseButton = () => {
+        onRemove(filter);
+    };
+    const onSubmit = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        let changedFilter = filter;
+        if (filterOperator !== filter.operator) {
+            changedFilter = changedFilter.setOperator(filterOperator);
+        }
+        if (filterValue !== filter.value) {
+            changedFilter = changedFilter.setValue(filterValue);
+        }
+        onChange(changedFilter);
+    };
+    const anchor = (jsxs(FilterToken, { isHighlighted: isEditing, onClickLabel: startEdit, onClickCloseButton: onClickCloseButton, children: [label, filter.value.length > 0 ? (jsxs(Fragment, { children: ["\u00A0", jsx("span", { children: formatOperator(filter.operator) }), "\u00A0", jsx("b", { children: formatFilterValue(filter.value) })] })) : null] }));
+    return (jsx(Popover, { className: "dc-filter-popover", anchor: anchor, anchorGap: 2, transitionDurationMs: 0, isOpen: isEditing, onClose: cancelEdit, children: jsxs("form", { className: "dc-filter-form", onSubmit: onSubmit, children: [jsx(FilterOperatorSelect, { className: "dc-filter-form__operator", accessibleName: operatorSelectAccessibleName, label: label, values: operators, value: filterOperator, onChange: setFilterOperator, formatValue: formatOperator }), jsx(FilterValueList, { className: "dc-filter-form__value-list", values: values, checkedValues: filterValue, onChangeCheckedValues: setFilterValue, formatValue: formatValue }), jsxs("div", { className: "dc-filter-form__buttons", children: [jsx(Button, { variant: "plain", type: "button", onClick: cancelEdit, children: translations.cancelButton }), jsx(Button, { appearance: "primary", type: "submit", disabled: filterValue.length < 1, children: translations.applyButton })] })] }) }));
+}
+StringSetFilterItem.defaultValueFormatter = defaultValueFormatter;
+StringSetFilterItem.defaultOperatorFormatter = defaultOperatorFormatter;
+StringSetFilterItem.formatFilterValue = formatFilterValue;
+function defaultValueFormatter(value) {
+    return value[0].toUpperCase() + value.slice(1);
+}
+function defaultOperatorFormatter(operator) {
+    const messages = {
+        [StringSetFilter.Operators.in]: 'is',
+        [StringSetFilter.Operators.notIn]: 'is not',
+    };
+    return messages[operator];
+}
+function formatFilterValue(values) {
+    const list = values.map(defaultValueFormatter);
+    if (list.length <= 1) {
+        return list.toString();
+    }
+    if (list.length <= 2) {
+        return list.join(' or ');
+    }
+    if (list.length <= 3) {
+        return list.slice(0, -1).join(', ') + ', or ' + list.slice(-1);
+    }
+    return list.slice(0, 2).join(', ') + `, and ${list.length - 2} more`;
+}
+
+export { StringSetFilterItem };

package/esm/components/filtered-search/use-combobox-ids.js

@@ -0,0 +1,15 @@
+import { useId, useCallback } from 'react';
+
+function useComboboxIds() {
+    const id = useId();
+    const textBoxId = `${id}textBox`;
+    const listBoxId = `${id}listBox`;
+    const getOptionId = useCallback((key) => `${id}option[${key}]`, [id]);
+    return {
+        textBoxId,
+        listBoxId,
+        getOptionId,
+    };
+}
+
+export { useComboboxIds };

package/esm/components/filtered-search/use-translations.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useMemo } from 'react';
+
+const Context = createContext(null);
+function useTranslations() {
+    const ctx = useContext(Context);
+    if (ctx == null) {
+        throw new Error('useTranslations must be used within TranslationsProvider');
+    }
+    return ctx;
+}
+function TranslationsProvider({ applyButton, cancelButton, removeFilterButton, children, }) {
+    const translations = useMemo(() => ({
+        applyButton,
+        cancelButton,
+        removeFilterButton,
+    }), [applyButton, cancelButton, removeFilterButton]);
+    return (jsx(Context.Provider, { value: translations, children: children }));
+}
+
+export { TranslationsProvider, useTranslations };

package/esm/components/index.js

@@ -22,6 +22,9 @@ export { EmptyState } from './empty-state/empty-state.js';
 export { FilePicker } from './file-picker/file-picker.js';
 export { FilterButtons } from './filter-buttons/filter-buttons.js';
 export { FilterButton } from './filter-buttons/filter-button.js';
+export { StringFilter } from './filtered-search/model/string-filter.js';
+export { StringSetFilter } from './filtered-search/model/string-set-filter.js';
+export { FilteredSearch } from './filtered-search/filtered-search.js';
 export { FormField } from './form-field/form-field.js';
 export { Label } from './label/label.js';
 export { Menu } from './menu/menu.js';
@@ -38,6 +41,9 @@ export { Radio } from './radio/radio.js';
 export { SegmentedControl } from './segmented-control/segmented-control.js';
 export { Select } from './select/select.js';
 export { SelectionControl } from './selection-control/selection-control.js';
+export { SlideOver } from './slide-over/slide-over.js';
+export { SlideOverHeader } from './slide-over/slide-over-header.js';
+export { SlideOverBody } from './slide-over/slide-over-body.js';
 export { Slider } from './slider/slider.js';
 export { SliderTickMarks } from './slider/slider-tick-marks.js';
 export { Spinner } from './spinner/spinner.js';

package/esm/components/popover/popover.js

@@ -7,14 +7,13 @@ import { useFocusTrap } from '../../hooks/use-focus-trap.js';
 import { usePageClick } from './use-page-click.js';
 import { Positioner } from '../positioner/positioner.js';
 
-const Popover = forwardRef(function Popover({ shouldTrapFocus = true, shouldFocusAnchorAfterEscPress = true, placement = 'bottom', alignment = 'start', anchorGap, viewportGap, anchor, className, children, onOpen, onClose, ...props }, ref) {
+const Popover = forwardRef(function Popover({ shouldTrapFocus = true, shouldFocusAnchorAfterEscPress = true, transitionDurationMs = 100, placement = 'bottom', alignment = 'start', anchorGap, viewportGap, anchor, className, children, onOpen, onClose, ...props }, ref) {
     const [defaultIsOpen, setDefaultIsOpen] = useState(props.defaultIsOpen ?? false);
     const anchorRef = useRef(null);
     const contentRef = useRef(null);
     const isOpen = props.isOpen ?? defaultIsOpen;
-    const durationMs = 100;
     const { isMounted, className: transitionClass } = useMountTransition({
-        durationMs,
+        durationMs: transitionDurationMs,
         isShown: isOpen,
         enterFrom: 'dc-popover_closed',
         enterTo: 'dc-popover_opened',
@@ -84,7 +83,7 @@ const Popover = forwardRef(function Popover({ shouldTrapFocus = true, shouldFocu
             delete props.defaultIsOpen;
             delete props.isOpen;
             return (jsx("div", { ref: portalRef, style: {
-                    '--dc-popover-transition-duration': `${durationMs}ms`,
+                    '--dc-popover-transition-duration': `${transitionDurationMs}ms`,
                     ...portalStyle,
                 }, className: classNames('dc-popover', transitionClass), children: jsx("div", { ...props, ref: contentRef, className: classNames('dc-popover-modal', className), children: children }) }));
         }

package/esm/components/slide-over/slide-over-body.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+
+function SlideOverBody({ className, ...props }) {
+    return (jsx("div", { className: classNames('dc-slide-over-body', className), ...props }));
+}
+
+export { SlideOverBody };

package/esm/components/slide-over/slide-over-context.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useMemo } from 'react';
+
+const Context = createContext(null);
+function useSlideOverContext() {
+    const ctx = useContext(Context);
+    if (!ctx) {
+        throw new Error('useSlideOverContext must be used within SlideOverContextProvider');
+    }
+    return ctx;
+}
+function SlideOverContextProvider({ titleId, descriptionId, closePanel, children, }) {
+    const ctx = useMemo(() => ({
+        titleId,
+        descriptionId,
+        closePanel,
+    }), [titleId, descriptionId, closePanel]);
+    return (jsx(Context.Provider, { value: ctx, children: children }));
+}
+
+export { SlideOverContextProvider, useSlideOverContext };

package/esm/components/slide-over/slide-over-header.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+import '../button/button.js';
+import { IconButton } from '../button/icon-button.js';
+import { useSlideOverContext } from './slide-over-context.js';
+
+function SlideOverHeader({ className, htmlTitle, title, description, closeButtonAccessibleName, onClickCloseButton, ...props }) {
+    const { titleId, descriptionId, closePanel } = useSlideOverContext();
+    const onCloseButtonClicked = (ev) => {
+        closePanel('close-button');
+        onClickCloseButton?.(ev);
+    };
+    return (jsxs("div", { className: classNames('dc-slide-over-header', className), title: htmlTitle, ...props, children: [jsxs("div", { className: "dc-slide-over-header__title", children: [jsx("h2", { id: titleId, children: title }), jsx(IconButton, { icon: jsx(XMarkIcon, {}), "aria-label": closeButtonAccessibleName, variant: "tinted", size: "xs", onClick: onCloseButtonClicked })] }), description ? (jsx("div", { id: descriptionId, className: "dc-slide-over-header__description", children: description })) : null] }));
+}
+function XMarkIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 20, height: 20, fill: "none", stroke: "currentColor", strokeWidth: 1.5, ...props, children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }));
+}
+
+export { SlideOverHeader };