draft-components 1.6.0 → 1.7.0

package/cjs/components/dialog/dialog.cjs

@@ -3,10 +3,10 @@
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
 const reactHelpers = require('../../lib/react-helpers.cjs');
-const useMountTransition = require('../../hooks/use-mount-transition.cjs');
 const useDisableBodyScroll = require('../../hooks/use-disable-body-scroll.cjs');
 const useEscKeyDown = require('../../hooks/use-esc-key-down.cjs');
 const useFocusTrap = require('../../hooks/use-focus-trap.cjs');
+const useMountTransition = require('../../hooks/use-mount-transition.cjs');
 const portal = require('../portal/portal.cjs');
 const dialogContext = require('./dialog-context.cjs');
 

package/cjs/components/filtered-search/filter-item.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const stringFilter = require('./model/string-filter.cjs');
+const stringSetFilter = require('./model/string-set-filter.cjs');
+const helpers = require('../../lib/helpers.cjs');
+require('react');
+const stringFilterItem = require('./string-filter-item.cjs');
+const stringSetFilterItem = require('./string-set-filter-item.cjs');
+
+function FilterItem({ filter, isEditing, onEditStart, onEditCancel, onRemove, onChange, }) {
+    const filterType = filter.type;
+    switch (filterType) {
+        case stringFilter.StringFilter.Type:
+            return (jsxRuntime.jsx(stringFilterItem.StringFilterItem, { filter: filter, isEditing: isEditing, onEditStart: onEditStart, onEditCancel: onEditCancel, onRemove: onRemove, onChange: onChange }));
+        case stringSetFilter.StringSetFilter.Type:
+            return (jsxRuntime.jsx(stringSetFilterItem.StringSetFilterItem, { filter: filter, isEditing: isEditing, onEditStart: onEditStart, onEditCancel: onEditCancel, onRemove: onRemove, onChange: onChange }));
+        default:
+            helpers.exhaustiveCheck(filterType, `Unable to render filter type ${filterType}.`);
+    }
+}
+
+exports.FilterItem = FilterItem;

package/cjs/components/filtered-search/filter-operator-select.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const select = require('../select/select.cjs');
+
+function FilterOperatorSelect({ accessibleName, className, label, values, value, onChange, formatValue, }) {
+    const shouldRenderSelect = values.length > 1;
+    const onValueChanged = (newValue) => {
+        onChange(newValue);
+    };
+    return (jsxRuntime.jsxs("div", { className: reactHelpers.classNames('dc-filter-operator-select', className), children: [jsxRuntime.jsx("span", { children: shouldRenderSelect
+                    ? label
+                    : `${label} ${formatValue(value)}` }), shouldRenderSelect && (jsxRuntime.jsx(select.Select, { size: "sm", "data-testid": "filter-operator-select", "aria-label": accessibleName, value: value, onChangeValue: onValueChanged, children: values.map((value) => (jsxRuntime.jsx("option", { value: value, children: formatValue(value) }, value))) }))] }));
+}
+
+exports.FilterOperatorSelect = FilterOperatorSelect;

package/cjs/components/filtered-search/filter-token.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const icons = require('./icons.cjs');
+const useTranslations = require('./use-translations.cjs');
+
+const FilterToken = react.forwardRef(function FilterToken({ className, isHighlighted, children, onClickLabel, onClickCloseButton, }, ref) {
+    const { removeFilterButton } = useTranslations.useTranslations();
+    return (jsxRuntime.jsxs("div", { ref: ref, "data-testid": "filter-token", className: reactHelpers.classNames(className, {
+            'dc-filter-token': true,
+            'dc-filter-token_highlighted': isHighlighted,
+        }), children: [jsxRuntime.jsx("button", { className: "dc-filter-token__label", onClick: onClickLabel, children: children }), jsxRuntime.jsx("button", { className: "dc-filter-token__button", type: "button", "aria-label": removeFilterButton, onClick: onClickCloseButton, children: jsxRuntime.jsx(icons.XMarkIcon, {}) })] }));
+});
+
+exports.FilterToken = FilterToken;

package/cjs/components/filtered-search/filter-value-list.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const selectionControl = require('../selection-control/selection-control.cjs');
+const checkbox = require('../checkbox/checkbox.cjs');
+
+function FilterValueList({ className, values, checkedValues, onChangeCheckedValues, formatValue, }) {
+    const onChange = (event) => {
+        const checkboxElement = event.currentTarget;
+        const value = checkboxElement.value;
+        const checked = checkboxElement.checked;
+        onChangeCheckedValues(checked
+            ? [...checkedValues, value]
+            : checkedValues.filter((prevValue) => prevValue !== value));
+    };
+    return (jsxRuntime.jsx("ul", { className: reactHelpers.classNames('dc-filter-value-list', className), children: values.map((value, index) => (jsxRuntime.jsx("li", { children: jsxRuntime.jsx(selectionControl.SelectionControl, { label: formatValue(value), children: jsxRuntime.jsx(checkbox.Checkbox, { autoFocus: index === 0, value: value, checked: checkedValues.includes(value), onChange: onChange }) }) }, value))) }));
+}
+
+exports.FilterValueList = FilterValueList;

package/cjs/components/filtered-search/filtered-search.cjs

@@ -0,0 +1,202 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const stringFilter = require('./model/string-filter.cjs');
+const stringSetFilter = require('./model/string-set-filter.cjs');
+const useTranslations = require('./use-translations.cjs');
+const useComboboxIds = require('./use-combobox-ids.cjs');
+require('../button/button.cjs');
+const iconButton = require('../button/icon-button.cjs');
+const filterItem = require('./filter-item.cjs');
+const icons = require('./icons.cjs');
+const keyboardKeys = require('../../lib/keyboard-keys.cjs');
+const helpers = require('../../lib/helpers.cjs');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+
+function FilteredSearch({ className, placeholder = 'Search and filter', applyButtonLabel = 'Apply', cancelButtonLabel = 'Cancel', clearButtonAccessibleName = 'Clear', removeFilterButtonAccessibleName = 'Remove filter', filtersConfig, filters, onChange, onMouseDown, ...props }) {
+    const containerRef = react.useRef(null);
+    const [query, setQuery] = react.useState('');
+    const [hasFocus, setHasFocus] = react.useState(false);
+    const [expanded, setExpanded] = react.useState(false);
+    const [selectedId, setSelectedId] = react.useState('');
+    const [activeField, setActiveField] = react.useState('');
+    const { textBoxId, listBoxId, getOptionId } = useComboboxIds.useComboboxIds();
+    const filtersConfigMap = react.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(jsxRuntime.jsx(filterItem.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(jsxRuntime.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.KeyboardKeys.ArrowDown) {
+            nextIdIndex = selectedIdIndex + 1;
+            isHandled = true;
+        }
+        else if (key === keyboardKeys.KeyboardKeys.ArrowUp) {
+            nextIdIndex = selectedIdIndex - 1;
+            isHandled = true;
+        }
+        else if (key === keyboardKeys.KeyboardKeys.Enter) {
+            const config = filtersConfigMap.get(selectedId);
+            if (config) {
+                addFilter(config);
+                isHandled = true;
+            }
+        }
+        else if (key === keyboardKeys.KeyboardKeys.Backspace) {
+            if (query === '' && filters.length > 0) {
+                onChange(filters.slice(0, -1));
+                isHandled = true;
+            }
+        }
+        else if (key === keyboardKeys.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 (jsxRuntime.jsx(useTranslations.TranslationsProvider, { applyButton: applyButtonLabel, cancelButton: cancelButtonLabel, removeFilterButton: removeFilterButtonAccessibleName, children: jsxRuntime.jsxs("div", { ref: containerRef, "data-testid": "combobox-container", className: reactHelpers.classNames(className, {
+                'dc-filtered-search': true,
+                'dc-filtered-search_has_focus': hasFocus,
+            }), onMouseDown: onContainerPressed, ...props, children: [jsxRuntime.jsx(icons.MagnifyingGlassIcon, { className: "dc-filtered-search__icon" }), jsxRuntime.jsxs("div", { className: "dc-filtered-search__filters", children: [renderedFilters, jsxRuntime.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 })] }), jsxRuntime.jsx(iconButton.IconButton, { className: "dc-filtered-search__clear-button", "aria-label": clearButtonAccessibleName, icon: jsxRuntime.jsx(icons.TrashIcon, {}), size: "sm", variant: "plain", appearance: "primary", onClick: onClearButtonPressed }), expanded && renderedOptions.length > 0 && (jsxRuntime.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.StringFilter.Type:
+            return new stringFilter.StringFilter(config, {
+                value: '',
+                operator: config.operators[0] || stringFilter.StringFilter.Operators.equal,
+            });
+        case stringSetFilter.StringSetFilter.Type:
+            return new stringSetFilter.StringSetFilter(config, {
+                value: [],
+                operator: config.operators[0] || stringSetFilter.StringSetFilter.Operators.in,
+            });
+        default:
+            helpers.exhaustiveCheck(filterType, `Unable to create a filter with ${filterType} type.`);
+    }
+}
+
+exports.FilteredSearch = FilteredSearch;

package/cjs/components/filtered-search/icons.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+
+function MagnifyingGlassIcon(props) {
+    return (jsxRuntime.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: jsxRuntime.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 (jsxRuntime.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: jsxRuntime.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 (jsxRuntime.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: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }));
+}
+function ArrowReturnRight(props) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: 16, height: 16, fill: "currentColor", ...props, children: jsxRuntime.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" }) }));
+}
+
+exports.ArrowReturnRight = ArrowReturnRight;
+exports.MagnifyingGlassIcon = MagnifyingGlassIcon;
+exports.TrashIcon = TrashIcon;
+exports.XMarkIcon = XMarkIcon;

package/cjs/components/filtered-search/model/abstract-filter.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+class AbstractFilter {
+}
+
+exports.AbstractFilter = AbstractFilter;

package/cjs/components/filtered-search/model/string-filter.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+const abstractFilter = require('./abstract-filter.cjs');
+
+const TYPE = 'STRING';
+const OPERATORS = {
+    equal: 'EQUAL',
+    notEqual: 'NOT_EQUAL',
+    contain: 'CONTAIN',
+    notContain: 'NOT_CONTAIN',
+};
+class StringFilter extends abstractFilter.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;
+
+exports.StringFilter = StringFilter;

package/cjs/components/filtered-search/model/string-set-filter.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+const abstractFilter = require('./abstract-filter.cjs');
+
+const TYPE = 'STRING_SET';
+const OPERATORS = {
+    in: 'IN',
+    notIn: 'NOT_IN',
+};
+class StringSetFilter extends abstractFilter.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;
+
+exports.StringSetFilter = StringSetFilter;

package/cjs/components/filtered-search/string-filter-input.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const icons = require('./icons.cjs');
+const textInput = require('../text-input/text-input.cjs');
+const caption = require('../caption/caption.cjs');
+const react = require('react');
+
+function StringFilterInput({ className, accessibleName, placeholder, error, value, onChangeValue, }) {
+    const id = react.useId();
+    const alertId = `${id}alert`;
+    const hasError = Boolean(error);
+    return (jsxRuntime.jsxs("div", { className: reactHelpers.classNames('dc-string-filter-input', className), children: [jsxRuntime.jsx(icons.ArrowReturnRight, {}), jsxRuntime.jsx(textInput.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 && (jsxRuntime.jsx(caption.Caption, { id: alertId, className: "dc-string-filter-input__error", appearance: "error", showIcon: true, role: "alert", children: error }))] }));
+}
+
+exports.StringFilterInput = StringFilterInput;

package/cjs/components/filtered-search/string-filter-item.cjs

@@ -0,0 +1,68 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const stringFilter = require('./model/string-filter.cjs');
+const react = require('react');
+const useTranslations = require('./use-translations.cjs');
+const popover = require('../popover/popover.cjs');
+const filterToken = require('./filter-token.cjs');
+const filterOperatorSelect = require('./filter-operator-select.cjs');
+const stringFilterInput = require('./string-filter-input.cjs');
+const button = require('../button/button.cjs');
+require('../button/icon-button.cjs');
+
+function StringFilterItem({ filter, isEditing, onEditStart, onEditCancel, onRemove, onChange, }) {
+    const translations = useTranslations.useTranslations();
+    const [filterOperator, setFilterOperator] = react.useState(filter.operator);
+    const [filterValue, setFilterValue] = react.useState(filter.value);
+    const [error, setError] = react.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 = (jsxRuntime.jsxs(filterToken.FilterToken, { isHighlighted: isEditing, onClickLabel: startEdit, onClickCloseButton: onClickCloseButton, children: [label, filter.value ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["\u00A0", jsxRuntime.jsx("span", { children: formatOperator(filter.operator) }), "\u00A0", jsxRuntime.jsx("b", { children: filter.value })] })) : null] }));
+    return (jsxRuntime.jsx(popover.Popover, { className: "dc-filter-popover", anchor: anchor, anchorGap: 2, transitionDurationMs: 0, isOpen: isEditing, onClose: cancelEdit, children: jsxRuntime.jsxs("form", { className: "dc-filter-form", onSubmit: onSubmit, children: [jsxRuntime.jsx(filterOperatorSelect.FilterOperatorSelect, { className: "dc-filter-form__operator", accessibleName: operatorSelectAccessibleName, label: label, values: operators, value: filterOperator, onChange: setFilterOperator, formatValue: formatOperator }), jsxRuntime.jsx(stringFilterInput.StringFilterInput, { placeholder: valueInputPlaceholder, accessibleName: valueInputAccessibleName, error: error, value: filterValue, onChangeValue: setFilterValue }), jsxRuntime.jsxs("div", { className: "dc-filter-form__buttons", children: [jsxRuntime.jsx(button.Button, { variant: "plain", type: "button", onClick: cancelEdit, children: translations.cancelButton }), jsxRuntime.jsx(button.Button, { appearance: "primary", type: "submit", disabled: !filterValue, children: translations.applyButton })] })] }) }));
+}
+StringFilterItem.defaultOperatorFormatter = defaultOperatorFormatter;
+function defaultOperatorFormatter(operator) {
+    const messages = {
+        [stringFilter.StringFilter.Operators.equal]: 'is',
+        [stringFilter.StringFilter.Operators.notEqual]: 'is not',
+        [stringFilter.StringFilter.Operators.contain]: 'contains',
+        [stringFilter.StringFilter.Operators.notContain]: "doesn't contain",
+    };
+    return messages[operator];
+}
+
+exports.StringFilterItem = StringFilterItem;

package/cjs/components/filtered-search/string-set-filter-item.cjs

@@ -0,0 +1,77 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const stringSetFilter = require('./model/string-set-filter.cjs');
+const react = require('react');
+const useTranslations = require('./use-translations.cjs');
+const popover = require('../popover/popover.cjs');
+const filterToken = require('./filter-token.cjs');
+const filterOperatorSelect = require('./filter-operator-select.cjs');
+const filterValueList = require('./filter-value-list.cjs');
+const button = require('../button/button.cjs');
+require('../button/icon-button.cjs');
+
+function StringSetFilterItem({ filter, isEditing, onEditStart, onEditCancel, onRemove, onChange, }) {
+    const translations = useTranslations.useTranslations();
+    const [filterOperator, setFilterOperator] = react.useState(filter.operator);
+    const [filterValue, setFilterValue] = react.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 = (jsxRuntime.jsxs(filterToken.FilterToken, { isHighlighted: isEditing, onClickLabel: startEdit, onClickCloseButton: onClickCloseButton, children: [label, filter.value.length > 0 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["\u00A0", jsxRuntime.jsx("span", { children: formatOperator(filter.operator) }), "\u00A0", jsxRuntime.jsx("b", { children: formatFilterValue(filter.value) })] })) : null] }));
+    return (jsxRuntime.jsx(popover.Popover, { className: "dc-filter-popover", anchor: anchor, anchorGap: 2, transitionDurationMs: 0, isOpen: isEditing, onClose: cancelEdit, children: jsxRuntime.jsxs("form", { className: "dc-filter-form", onSubmit: onSubmit, children: [jsxRuntime.jsx(filterOperatorSelect.FilterOperatorSelect, { className: "dc-filter-form__operator", accessibleName: operatorSelectAccessibleName, label: label, values: operators, value: filterOperator, onChange: setFilterOperator, formatValue: formatOperator }), jsxRuntime.jsx(filterValueList.FilterValueList, { className: "dc-filter-form__value-list", values: values, checkedValues: filterValue, onChangeCheckedValues: setFilterValue, formatValue: formatValue }), jsxRuntime.jsxs("div", { className: "dc-filter-form__buttons", children: [jsxRuntime.jsx(button.Button, { variant: "plain", type: "button", onClick: cancelEdit, children: translations.cancelButton }), jsxRuntime.jsx(button.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.StringSetFilter.Operators.in]: 'is',
+        [stringSetFilter.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`;
+}
+
+exports.StringSetFilterItem = StringSetFilterItem;

package/cjs/components/filtered-search/use-combobox-ids.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+const react = require('react');
+
+function useComboboxIds() {
+    const id = react.useId();
+    const textBoxId = `${id}textBox`;
+    const listBoxId = `${id}listBox`;
+    const getOptionId = react.useCallback((key) => `${id}option[${key}]`, [id]);
+    return {
+        textBoxId,
+        listBoxId,
+        getOptionId,
+    };
+}
+
+exports.useComboboxIds = useComboboxIds;

package/cjs/components/filtered-search/use-translations.cjs

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