draft-components 1.9.0 → 1.10.1

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

@@ -15,7 +15,7 @@ function StringSetFilterItem({ filter, isEditing, onEditStart, onEditCancel, onR
     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 { label, values, operators, operatorSelectAccessibleName, valueFormatter: formatValue = defaultValueFormatter, valuesFormatter: formatValues = defaultValuesFormatter, operatorFormatter: formatOperator = defaultOperatorFormatter, } = filter.config;
     const cancelEdit = () => {
         onEditCancel(filter);
     };
@@ -44,23 +44,16 @@ function StringSetFilterItem({ filter, isEditing, onEditStart, onEditCancel, onR
         }
         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] }));
+    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: formatValues(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.defaultValuesFormatter = defaultValuesFormatter;
 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) {
+function defaultValuesFormatter(values) {
     const list = values.map(defaultValueFormatter);
     if (list.length <= 1) {
         return list.toString();
@@ -73,5 +66,12 @@ function formatFilterValue(values) {
     }
     return list.slice(0, 2).join(', ') + `, and ${list.length - 2} more`;
 }
+function defaultOperatorFormatter(operator) {
+    const messages = {
+        [stringSetFilter.StringSetFilter.Operators.in]: 'is',
+        [stringSetFilter.StringSetFilter.Operators.notIn]: 'is not',
+    };
+    return messages[operator];
+}
 
 exports.StringSetFilterItem = StringSetFilterItem;

package/css/draft-components.css

@@ -3937,6 +3937,7 @@
 }
 
 .dc-filtered-search__filters {
+  z-index: var(--dc-overlay-z-index);
   display: flex;
   flex-grow: 1;
   flex-wrap: wrap;

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

@@ -13,7 +13,7 @@ function StringSetFilterItem({ filter, isEditing, onEditStart, onEditCancel, onR
     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 { label, values, operators, operatorSelectAccessibleName, valueFormatter: formatValue = defaultValueFormatter, valuesFormatter: formatValues = defaultValuesFormatter, operatorFormatter: formatOperator = defaultOperatorFormatter, } = filter.config;
     const cancelEdit = () => {
         onEditCancel(filter);
     };
@@ -42,23 +42,16 @@ function StringSetFilterItem({ filter, isEditing, onEditStart, onEditCancel, onR
         }
         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] }));
+    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: formatValues(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.defaultValuesFormatter = defaultValuesFormatter;
 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) {
+function defaultValuesFormatter(values) {
     const list = values.map(defaultValueFormatter);
     if (list.length <= 1) {
         return list.toString();
@@ -71,5 +64,12 @@ function formatFilterValue(values) {
     }
     return list.slice(0, 2).join(', ') + `, and ${list.length - 2} more`;
 }
+function defaultOperatorFormatter(operator) {
+    const messages = {
+        [StringSetFilter.Operators.in]: 'is',
+        [StringSetFilter.Operators.notIn]: 'is not',
+    };
+    return messages[operator];
+}
 
 export { StringSetFilterItem };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "1.9.0",
+  "version": "1.10.1",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {

package/types/components/filtered-search/index.d.ts

@@ -1,4 +1,4 @@
 export { FilteredSearch, type FilteredSearchProps, type FilteredSearchBaseProps, type FilteredSearchHTMLProps, } from './filtered-search';
 export { type Filter, type FilterConfig, } from './types';
-export { StringFilter, type StringFilterState, type StringFilterConfig, } from './model/string-filter';
-export { StringSetFilter, type StringSetFilterState, type StringSetFilterConfig, } from './model/string-set-filter';
+export { StringFilter, type StringFilterState, type StringFilterConfig, type StringFilterOperator, } from './model/string-filter';
+export { StringSetFilter, type StringSetFilterState, type StringSetFilterConfig, type StringSetFilterOperator, } from './model/string-set-filter';

package/types/components/filtered-search/model/string-set-filter.d.ts

@@ -12,6 +12,7 @@ export type StringSetFilterConfig = {
     label: string;
     values: string[];
     valueFormatter?: (value: string) => string;
+    valuesFormatter?: (values: string[]) => string;
     operatorSelectAccessibleName?: string;
     operators: StringSetFilterOperator[];
     operatorFormatter?: (operator: StringSetFilterOperator) => string;

package/types/components/filtered-search/string-set-filter-item.d.ts

@@ -10,6 +10,6 @@ export type StringSetFilterItemProps = {
 export declare function StringSetFilterItem({ filter, isEditing, onEditStart, onEditCancel, onRemove, onChange, }: StringSetFilterItemProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace StringSetFilterItem {
     var defaultValueFormatter: (value: string) => string;
+    var defaultValuesFormatter: (values: string[]) => string;
     var defaultOperatorFormatter: (operator: StringSetFilterOperator) => string;
-    var formatFilterValue: (values: string[]) => string;
 }