draft-components 1.7.1 → 1.9.0

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

@@ -14,14 +14,22 @@ 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 }) {
+function FilteredSearch({ filters: appliedFilters, className, placeholder = 'Search and filter', applyButtonLabel = 'Apply', cancelButtonLabel = 'Cancel', clearButtonAccessibleName = 'Clear', removeFilterButtonAccessibleName = 'Remove filter', filtersConfig, onChangeFilters, onMouseDown, ...props }) {
     const containerRef = react.useRef(null);
+    const [newFilter, setNewFilter] = react.useState(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();
+    let filters;
+    if (newFilter) {
+        filters = [...appliedFilters, newFilter];
+    }
+    else {
+        filters = appliedFilters;
+    }
     const filtersConfigMap = react.useMemo(() => {
         const map = new Map();
         for (const config of filtersConfig) {
@@ -36,21 +44,17 @@ function FilteredSearch({ className, placeholder = 'Search and filter', applyBut
         }
         return textBox;
     };
-    const addFilter = (config) => {
-        const filter = createFilter(config);
-        const textBoxElement = getTextBoxElement();
-        onChange([...filters, filter]);
-        textBoxElement.blur();
-        setQuery('');
-        setActiveField(filter.field);
+    const addFilter = (filter) => {
+        const newFilters = [...appliedFilters, filter];
+        onChangeFilters(newFilters);
     };
-    const changeFilter = (changedFilter) => {
-        const newFilters = filters.map((filter) => (filter.field === changedFilter.field ? changedFilter : filter));
-        onChange(newFilters);
+    const updateFilter = (updatedFilter) => {
+        const newFilters = appliedFilters.map((filter) => (filter.field === updatedFilter.field ? updatedFilter : filter));
+        onChangeFilters(newFilters);
     };
-    const removeFilter = (filterToRemove) => {
-        const newFilters = filters.filter((filter) => (filter.field !== filterToRemove.field));
-        onChange(newFilters);
+    const removeFilter = (removedFilter) => {
+        const newFilters = appliedFilters.filter((filter) => (filter.field !== removedFilter.field));
+        onChangeFilters(newFilters);
     };
     const onFilterEditStarted = (filter) => {
         setActiveField(filter.field);
@@ -58,12 +62,23 @@ function FilteredSearch({ className, placeholder = 'Search and filter', applyBut
     const onFilterEditCanceled = (filter) => {
         setActiveField('');
         if (filter.isEmpty()) {
-            removeFilter(filter);
+            if (newFilter && filter.field === newFilter.field) {
+                setNewFilter(null);
+            }
+            else {
+                removeFilter(filter);
+            }
             getTextBoxElement().focus();
         }
     };
     const onFilterChanged = (filter) => {
-        changeFilter(filter);
+        if (newFilter && filter.field === newFilter.field) {
+            addFilter(filter);
+            setNewFilter(null);
+        }
+        else {
+            updateFilter(filter);
+        }
         setActiveField('');
     };
     const renderedFilters = [];
@@ -73,6 +88,14 @@ function FilteredSearch({ className, placeholder = 'Search and filter', applyBut
         fieldsWithAppliedFilters.add(field);
         renderedFilters.push(jsxRuntime.jsx(filterItem.FilterItem, { filter: filter, isEditing: activeField === field, onEditStart: onFilterEditStarted, onEditCancel: onFilterEditCanceled, onChange: onFilterChanged, onRemove: removeFilter }, field));
     }
+    const onOptionSelected = (config) => {
+        const filter = createFilter(config);
+        const textBoxElement = getTextBoxElement();
+        setQuery('');
+        setNewFilter(filter);
+        setActiveField(filter.field);
+        textBoxElement.blur();
+    };
     const onOptionHovered = (event) => {
         const listItemElement = event.currentTarget;
         setSelectedId(listItemElement.id);
@@ -83,7 +106,7 @@ function FilteredSearch({ className, placeholder = 'Search and filter', applyBut
         const listItemElement = event.currentTarget;
         const config = filtersConfigMap.get(listItemElement.id);
         if (config) {
-            addFilter(config);
+            onOptionSelected(config);
         }
     };
     const renderedOptions = [];
@@ -127,13 +150,13 @@ function FilteredSearch({ className, placeholder = 'Search and filter', applyBut
         else if (key === keyboardKeys.KeyboardKeys.Enter) {
             const config = filtersConfigMap.get(selectedId);
             if (config) {
-                addFilter(config);
+                onOptionSelected(config);
                 isHandled = true;
             }
         }
         else if (key === keyboardKeys.KeyboardKeys.Backspace) {
             if (query === '' && filters.length > 0) {
-                onChange(filters.slice(0, -1));
+                onChangeFilters(filters.slice(0, -1));
                 isHandled = true;
             }
         }
@@ -163,7 +186,7 @@ function FilteredSearch({ className, placeholder = 'Search and filter', applyBut
     };
     const onClearButtonPressed = (event) => {
         event.stopPropagation();
-        onChange([]);
+        onChangeFilters([]);
     };
     const onContainerPressed = (event) => {
         if (event.currentTarget === event.target) {

package/cjs/components/index.cjs

@@ -24,9 +24,9 @@ const emptyState = require('./empty-state/empty-state.cjs');
 const filePicker = require('./file-picker/file-picker.cjs');
 const filterButtons = require('./filter-buttons/filter-buttons.cjs');
 const filterButton = require('./filter-buttons/filter-button.cjs');
+const filteredSearch = require('./filtered-search/filtered-search.cjs');
 const stringFilter = require('./filtered-search/model/string-filter.cjs');
 const stringSetFilter = require('./filtered-search/model/string-set-filter.cjs');
-const filteredSearch = require('./filtered-search/filtered-search.cjs');
 const formField = require('./form-field/form-field.cjs');
 const label = require('./label/label.cjs');
 const menu = require('./menu/menu.cjs');
@@ -95,9 +95,9 @@ exports.EmptyState = emptyState.EmptyState;
 exports.FilePicker = filePicker.FilePicker;
 exports.FilterButtons = filterButtons.FilterButtons;
 exports.FilterButton = filterButton.FilterButton;
+exports.FilteredSearch = filteredSearch.FilteredSearch;
 exports.StringFilter = stringFilter.StringFilter;
 exports.StringSetFilter = stringSetFilter.StringSetFilter;
-exports.FilteredSearch = filteredSearch.FilteredSearch;
 exports.FormField = formField.FormField;
 exports.Label = label.Label;
 exports.Menu = menu.Menu;

package/cjs/index.cjs

@@ -31,9 +31,9 @@ const emptyState = require('./components/empty-state/empty-state.cjs');
 const filePicker = require('./components/file-picker/file-picker.cjs');
 const filterButtons = require('./components/filter-buttons/filter-buttons.cjs');
 const filterButton = require('./components/filter-buttons/filter-button.cjs');
+const filteredSearch = require('./components/filtered-search/filtered-search.cjs');
 const stringFilter = require('./components/filtered-search/model/string-filter.cjs');
 const stringSetFilter = require('./components/filtered-search/model/string-set-filter.cjs');
-const filteredSearch = require('./components/filtered-search/filtered-search.cjs');
 const formField = require('./components/form-field/form-field.cjs');
 const label = require('./components/label/label.cjs');
 const menu = require('./components/menu/menu.cjs');
@@ -115,9 +115,9 @@ exports.EmptyState = emptyState.EmptyState;
 exports.FilePicker = filePicker.FilePicker;
 exports.FilterButtons = filterButtons.FilterButtons;
 exports.FilterButton = filterButton.FilterButton;
+exports.FilteredSearch = filteredSearch.FilteredSearch;
 exports.StringFilter = stringFilter.StringFilter;
 exports.StringSetFilter = stringSetFilter.StringSetFilter;
-exports.FilteredSearch = filteredSearch.FilteredSearch;
 exports.FormField = formField.FormField;
 exports.Label = label.Label;
 exports.Menu = menu.Menu;

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

@@ -12,14 +12,22 @@ 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 }) {
+function FilteredSearch({ filters: appliedFilters, className, placeholder = 'Search and filter', applyButtonLabel = 'Apply', cancelButtonLabel = 'Cancel', clearButtonAccessibleName = 'Clear', removeFilterButtonAccessibleName = 'Remove filter', filtersConfig, onChangeFilters, onMouseDown, ...props }) {
     const containerRef = useRef(null);
+    const [newFilter, setNewFilter] = useState(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();
+    let filters;
+    if (newFilter) {
+        filters = [...appliedFilters, newFilter];
+    }
+    else {
+        filters = appliedFilters;
+    }
     const filtersConfigMap = useMemo(() => {
         const map = new Map();
         for (const config of filtersConfig) {
@@ -34,21 +42,17 @@ function FilteredSearch({ className, placeholder = 'Search and filter', applyBut
         }
         return textBox;
     };
-    const addFilter = (config) => {
-        const filter = createFilter(config);
-        const textBoxElement = getTextBoxElement();
-        onChange([...filters, filter]);
-        textBoxElement.blur();
-        setQuery('');
-        setActiveField(filter.field);
+    const addFilter = (filter) => {
+        const newFilters = [...appliedFilters, filter];
+        onChangeFilters(newFilters);
     };
-    const changeFilter = (changedFilter) => {
-        const newFilters = filters.map((filter) => (filter.field === changedFilter.field ? changedFilter : filter));
-        onChange(newFilters);
+    const updateFilter = (updatedFilter) => {
+        const newFilters = appliedFilters.map((filter) => (filter.field === updatedFilter.field ? updatedFilter : filter));
+        onChangeFilters(newFilters);
     };
-    const removeFilter = (filterToRemove) => {
-        const newFilters = filters.filter((filter) => (filter.field !== filterToRemove.field));
-        onChange(newFilters);
+    const removeFilter = (removedFilter) => {
+        const newFilters = appliedFilters.filter((filter) => (filter.field !== removedFilter.field));
+        onChangeFilters(newFilters);
     };
     const onFilterEditStarted = (filter) => {
         setActiveField(filter.field);
@@ -56,12 +60,23 @@ function FilteredSearch({ className, placeholder = 'Search and filter', applyBut
     const onFilterEditCanceled = (filter) => {
         setActiveField('');
         if (filter.isEmpty()) {
-            removeFilter(filter);
+            if (newFilter && filter.field === newFilter.field) {
+                setNewFilter(null);
+            }
+            else {
+                removeFilter(filter);
+            }
             getTextBoxElement().focus();
         }
     };
     const onFilterChanged = (filter) => {
-        changeFilter(filter);
+        if (newFilter && filter.field === newFilter.field) {
+            addFilter(filter);
+            setNewFilter(null);
+        }
+        else {
+            updateFilter(filter);
+        }
         setActiveField('');
     };
     const renderedFilters = [];
@@ -71,6 +86,14 @@ function FilteredSearch({ className, placeholder = 'Search and filter', applyBut
         fieldsWithAppliedFilters.add(field);
         renderedFilters.push(jsx(FilterItem, { filter: filter, isEditing: activeField === field, onEditStart: onFilterEditStarted, onEditCancel: onFilterEditCanceled, onChange: onFilterChanged, onRemove: removeFilter }, field));
     }
+    const onOptionSelected = (config) => {
+        const filter = createFilter(config);
+        const textBoxElement = getTextBoxElement();
+        setQuery('');
+        setNewFilter(filter);
+        setActiveField(filter.field);
+        textBoxElement.blur();
+    };
     const onOptionHovered = (event) => {
         const listItemElement = event.currentTarget;
         setSelectedId(listItemElement.id);
@@ -81,7 +104,7 @@ function FilteredSearch({ className, placeholder = 'Search and filter', applyBut
         const listItemElement = event.currentTarget;
         const config = filtersConfigMap.get(listItemElement.id);
         if (config) {
-            addFilter(config);
+            onOptionSelected(config);
         }
     };
     const renderedOptions = [];
@@ -125,13 +148,13 @@ function FilteredSearch({ className, placeholder = 'Search and filter', applyBut
         else if (key === KeyboardKeys.Enter) {
             const config = filtersConfigMap.get(selectedId);
             if (config) {
-                addFilter(config);
+                onOptionSelected(config);
                 isHandled = true;
             }
         }
         else if (key === KeyboardKeys.Backspace) {
             if (query === '' && filters.length > 0) {
-                onChange(filters.slice(0, -1));
+                onChangeFilters(filters.slice(0, -1));
                 isHandled = true;
             }
         }
@@ -161,7 +184,7 @@ function FilteredSearch({ className, placeholder = 'Search and filter', applyBut
     };
     const onClearButtonPressed = (event) => {
         event.stopPropagation();
-        onChange([]);
+        onChangeFilters([]);
     };
     const onContainerPressed = (event) => {
         if (event.currentTarget === event.target) {

package/esm/components/index.js

@@ -22,9 +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 { FilteredSearch } from './filtered-search/filtered-search.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';

package/esm/index.js

@@ -29,9 +29,9 @@ export { EmptyState } from './components/empty-state/empty-state.js';
 export { FilePicker } from './components/file-picker/file-picker.js';
 export { FilterButtons } from './components/filter-buttons/filter-buttons.js';
 export { FilterButton } from './components/filter-buttons/filter-button.js';
+export { FilteredSearch } from './components/filtered-search/filtered-search.js';
 export { StringFilter } from './components/filtered-search/model/string-filter.js';
 export { StringSetFilter } from './components/filtered-search/model/string-set-filter.js';
-export { FilteredSearch } from './components/filtered-search/filtered-search.js';
 export { FormField } from './components/form-field/form-field.js';
 export { Label } from './components/label/label.js';
 export { Menu } from './components/menu/menu.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "1.7.1",
+  "version": "1.9.0",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {
@@ -29,8 +29,8 @@
     "coverage": "npm run test -- --coverage --no-cache",
     "lint": "eslint '**/*.{js,ts,tsx}'",
     "lint-styles": "stylelint 'src/**/*.css'",
-    "check-types": "tsc --noEmit",
-    "prebuild": "npm run test && npm run lint && npm run lint-styles",
+    "check-types": "tsc --project 'tsconfig.json' --noEmit",
+    "prebuild": "npm run check-types && npm run test && npm run lint && npm run lint-styles",
     "build": "node scripts/build.js",
     "build-storybook": "storybook build",
     "preversion": "npm run build",

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

@@ -10,6 +10,6 @@ export type FilteredSearchProps = FilteredSearchBaseProps & {
     removeFilterButtonAccessibleName?: string;
     filtersConfig: FilterConfig[];
     filters: Filter[];
-    onChange: (filters: Filter[]) => void;
+    onChangeFilters: (filters: Filter[]) => void;
 };
-export declare function FilteredSearch({ className, placeholder, applyButtonLabel, cancelButtonLabel, clearButtonAccessibleName, removeFilterButtonAccessibleName, filtersConfig, filters, onChange, onMouseDown, ...props }: FilteredSearchProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilteredSearch({ filters: appliedFilters, className, placeholder, applyButtonLabel, cancelButtonLabel, clearButtonAccessibleName, removeFilterButtonAccessibleName, filtersConfig, onChangeFilters, onMouseDown, ...props }: FilteredSearchProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-export { StringFilter } from './model/string-filter';
-export { StringSetFilter } from './model/string-set-filter';
 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';

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

@@ -1,6 +1,6 @@
 import { AbstractFilter } from './abstract-filter';
 import { ValidationResult } from './validation-result';
-declare const TYPE = "STRING";
+declare const TYPE: "STRING";
 declare const OPERATORS: {
     readonly equal: "EQUAL";
     readonly notEqual: "NOT_EQUAL";
@@ -25,7 +25,7 @@ export type StringFilterState = {
     operator: StringFilterOperator;
 };
 export declare class StringFilter extends AbstractFilter {
-    static readonly Type = "STRING";
+    static readonly Type: "STRING";
     static readonly Operators: {
         readonly equal: "EQUAL";
         readonly notEqual: "NOT_EQUAL";

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

@@ -1,5 +1,5 @@
 import { AbstractFilter } from './abstract-filter';
-declare const TYPE = "STRING_SET";
+declare const TYPE: "STRING_SET";
 declare const OPERATORS: {
     readonly in: "IN";
     readonly notIn: "NOT_IN";
@@ -21,7 +21,7 @@ export type StringSetFilterState = {
     operator: StringSetFilterOperator;
 };
 export declare class StringSetFilter extends AbstractFilter {
-    static readonly Type = "STRING_SET";
+    static readonly Type: "STRING_SET";
     static readonly Operators: {
         readonly in: "IN";
         readonly notIn: "NOT_IN";