draft-components 1.7.0 → 1.8.0

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

@@ -14,7 +14,7 @@ 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({ className, placeholder = 'Search and filter', applyButtonLabel = 'Apply', cancelButtonLabel = 'Cancel', clearButtonAccessibleName = 'Clear', removeFilterButtonAccessibleName = 'Remove filter', filtersConfig, filters, onChangeFilters, onMouseDown, ...props }) {
     const containerRef = react.useRef(null);
     const [query, setQuery] = react.useState('');
     const [hasFocus, setHasFocus] = react.useState(false);
@@ -39,18 +39,18 @@ function FilteredSearch({ className, placeholder = 'Search and filter', applyBut
     const addFilter = (config) => {
         const filter = createFilter(config);
         const textBoxElement = getTextBoxElement();
-        onChange([...filters, filter]);
+        onChangeFilters([...filters, filter]);
         textBoxElement.blur();
         setQuery('');
         setActiveField(filter.field);
     };
     const changeFilter = (changedFilter) => {
         const newFilters = filters.map((filter) => (filter.field === changedFilter.field ? changedFilter : filter));
-        onChange(newFilters);
+        onChangeFilters(newFilters);
     };
     const removeFilter = (filterToRemove) => {
         const newFilters = filters.filter((filter) => (filter.field !== filterToRemove.field));
-        onChange(newFilters);
+        onChangeFilters(newFilters);
     };
     const onFilterEditStarted = (filter) => {
         setActiveField(filter.field);
@@ -133,7 +133,7 @@ function FilteredSearch({ className, placeholder = 'Search and filter', applyBut
         }
         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 +163,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/css/draft-components.css

@@ -3925,12 +3925,17 @@
 }
 
 .dc-filtered-search__clear-button {
+  flex-shrink: 0;
   margin-top: 1px;
   margin-right: 1px;
   white-space: nowrap;
   border-radius: calc(var(--dc-filtered-search-border-radius) - 1px);
 }
 
+.dc-filtered-search__clear-button:focus::after {
+  border-radius: inherit;
+}
+
 .dc-filtered-search__filters {
   display: flex;
   flex-grow: 1;

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

@@ -12,7 +12,7 @@ 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({ className, placeholder = 'Search and filter', applyButtonLabel = 'Apply', cancelButtonLabel = 'Cancel', clearButtonAccessibleName = 'Clear', removeFilterButtonAccessibleName = 'Remove filter', filtersConfig, filters, onChangeFilters, onMouseDown, ...props }) {
     const containerRef = useRef(null);
     const [query, setQuery] = useState('');
     const [hasFocus, setHasFocus] = useState(false);
@@ -37,18 +37,18 @@ function FilteredSearch({ className, placeholder = 'Search and filter', applyBut
     const addFilter = (config) => {
         const filter = createFilter(config);
         const textBoxElement = getTextBoxElement();
-        onChange([...filters, filter]);
+        onChangeFilters([...filters, filter]);
         textBoxElement.blur();
         setQuery('');
         setActiveField(filter.field);
     };
     const changeFilter = (changedFilter) => {
         const newFilters = filters.map((filter) => (filter.field === changedFilter.field ? changedFilter : filter));
-        onChange(newFilters);
+        onChangeFilters(newFilters);
     };
     const removeFilter = (filterToRemove) => {
         const newFilters = filters.filter((filter) => (filter.field !== filterToRemove.field));
-        onChange(newFilters);
+        onChangeFilters(newFilters);
     };
     const onFilterEditStarted = (filter) => {
         setActiveField(filter.field);
@@ -131,7 +131,7 @@ function FilteredSearch({ className, placeholder = 'Search and filter', applyBut
         }
         else if (key === KeyboardKeys.Backspace) {
             if (query === '' && filters.length > 0) {
-                onChange(filters.slice(0, -1));
+                onChangeFilters(filters.slice(0, -1));
                 isHandled = true;
             }
         }
@@ -161,7 +161,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.0",
+  "version": "1.8.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",
@@ -56,50 +56,50 @@
     "react-dom": ">= 18"
   },
   "devDependencies": {
-    "@alexzimakov/eslint-config": "1.5.0",
-    "@babel/core": "7.22.5",
-    "@babel/preset-env": "7.22.5",
+    "@alexzimakov/eslint-config": "1.6.0",
+    "@babel/core": "7.22.9",
+    "@babel/preset-env": "7.22.9",
     "@babel/preset-react": "7.22.5",
     "@babel/preset-typescript": "7.22.5",
     "@heroicons/react": "2.0.18",
-    "@rollup/plugin-typescript": "11.1.1",
-    "@storybook/addon-actions": "7.0.23",
-    "@storybook/addon-essentials": "7.0.23",
-    "@storybook/addon-links": "7.0.23",
-    "@storybook/react": "7.0.23",
-    "@storybook/react-vite": "7.0.23",
+    "@rollup/plugin-typescript": "11.1.2",
+    "@storybook/addon-actions": "7.1.1",
+    "@storybook/addon-essentials": "7.1.1",
+    "@storybook/addon-links": "7.1.1",
+    "@storybook/react": "7.1.1",
+    "@storybook/react-vite": "7.1.1",
     "@testing-library/dom": "9.3.1",
-    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
-    "@types/jest": "29.5.2",
-    "@types/node": "18.16.18",
-    "@types/react": "18.2.13",
-    "@types/react-dom": "18.2.6",
-    "@typescript-eslint/eslint-plugin": "5.60.0",
-    "@typescript-eslint/parser": "5.60.0",
+    "@types/jest": "29.5.3",
+    "@types/node": "18.17.0",
+    "@types/react": "18.2.16",
+    "@types/react-dom": "18.2.7",
+    "@typescript-eslint/eslint-plugin": "6.2.0",
+    "@typescript-eslint/parser": "6.2.0",
     "autoprefixer": "10.4.14",
-    "eslint": "8.43.0",
+    "eslint": "8.45.0",
     "eslint-plugin-jsx-a11y": "6.7.1",
-    "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-react": "7.33.0",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-storybook": "0.6.12",
+    "eslint-plugin-storybook": "0.6.13",
     "eslint-plugin-testing-library": "5.11.0",
     "husky": "8.0.3",
-    "jest": "29.5.0",
-    "jest-environment-jsdom": "29.5.0",
-    "lint-staged": "13.2.2",
-    "postcss": "8.4.24",
+    "jest": "29.6.1",
+    "jest-environment-jsdom": "29.6.1",
+    "lint-staged": "13.2.3",
+    "postcss": "8.4.27",
     "postcss-import": "15.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "rollup": "3.25.1",
-    "storybook": "7.0.23",
-    "stylelint": "15.8.0",
-    "stylelint-config-standard": "33.0.0",
+    "rollup": "3.26.3",
+    "storybook": "7.1.1",
+    "stylelint": "15.10.2",
+    "stylelint-config-standard": "34.0.0",
     "stylelint-order": "6.0.3",
-    "typescript": "5.1.3",
-    "vite": "4.3.9"
+    "typescript": "5.1.6",
+    "vite": "4.4.7"
   },
   "lint-staged": {
     "*.ts?(x)": "npm run lint",

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({ className, placeholder, applyButtonLabel, cancelButtonLabel, clearButtonAccessibleName, removeFilterButtonAccessibleName, filtersConfig, filters, 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";