@commercetools-uikit/filters 19.15.0 → 19.16.0

package/dist/declarations/src/filter-menu/filter-menu.d.ts

@@ -20,6 +20,10 @@ export type TFilterMenuProps = {
      * the input in which the user can select which operator should be used for this filter
      */
     renderOperatorsInput?: () => ReactNode;
+    /**
+     * formatted message to display the selected operator value
+     */
+    operatorLabel?: ReactNode;
     /**
      * the values applied to this filter by the user
      */
@@ -35,7 +39,7 @@ export type TFilterMenuProps = {
     /**
      * controls whether `x` in Trigger Button is displayed - required if `isPersistent` is `false`
      */
-    onRemoveRequest?: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
+    onRemoveRequest?: (event?: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
     /**
      * optional button that allows the user to apply selected filter values
      */
@@ -54,5 +58,6 @@ export type TFilterMenuProps = {
     defaultOpen?: boolean;
 };
 export declare const menuStyles: import("@emotion/react").SerializedStyles;
+export declare const menuBodyStyle: import("@emotion/react").SerializedStyles;
 declare function FilterMenu(props: TFilterMenuProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default FilterMenu;

package/dist/declarations/src/filter-menu/index.d.ts

@@ -0,0 +1 @@
+export { default, type TAppliedFilterValue, menuStyles, menuBodyStyle, } from "./filter-menu.js";

package/dist/declarations/src/filters.d.ts

@@ -1,7 +1,5 @@
-import { ReactElement, ReactNode } from 'react';
-import { type TAppliedFilterValue } from "./filter-menu/filter-menu.js";
-import { type TPrimaryButtonProps } from '@commercetools-uikit/primary-button';
-import { type TSelectInputProps } from '@commercetools-uikit/select-input';
+import { type ReactNode, type MouseEvent, type KeyboardEvent } from 'react';
+import { type TAppliedFilterValue } from "./filter-menu/index.js";
 type TAppliedFilter = {
     /**
      * unique identifier for the filter
@@ -12,7 +10,19 @@ type TAppliedFilter = {
      */
     values: TAppliedFilterValue[];
 };
-type TFilterConfiguration = {
+export type TFilterConfiguration = {
+    /**
+     * unique identifier for the filter
+     */
+    key: string;
+    /**
+     * formatted message to display the filter name
+     */
+    label: ReactNode;
+    /**
+     * formatted message to display the selected operator value
+     */
+    operatorLabel?: ReactNode;
     /**
      * configuration object for the filter menu.
      */
@@ -24,19 +34,19 @@ type TFilterConfiguration = {
         /**
          * the input in which the user can select which operator should be used for this filter
          */
-        renderOperatorsInput?: () => ReactElement<TSelectInputProps>;
+        renderOperatorsInput?: () => ReactNode;
         /**
          * optional button that allows the user to apply selected filter values
          */
-        renderApplyButton?: () => ReactElement<TPrimaryButtonProps>;
+        renderApplyButton?: () => ReactNode;
         /**
          * controls whether `clear` button in Menu Body Footer is displayed
          */
-        onClearRequest: Function;
+        onClearRequest: (event?: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
         /**
          * controls whether `sort` button in Menu Body Header is displayed
          */
-        onSortRequest?: Function;
+        onSortRequest?: (event?: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
     };
     /**
      * optional key to group filters together.
@@ -47,17 +57,9 @@ type TFilterConfiguration = {
      */
     isPersistent?: boolean;
     /**
-     * whether or not the filter is disabled
+     * indicates whether the filter is disabled
      */
     isDisabled?: boolean;
-    /**
-     * unique identifier for the filter
-     */
-    key: string;
-    /**
-     * formatted message to display the filter name
-     */
-    label: ReactNode;
 };
 type TFilterGroupConfiguration = {
     /**
@@ -76,26 +78,32 @@ export type TFiltersProps = {
     appliedFilters: TAppliedFilter[];
     /**
      * configuration for the available filters.
+     *
      */
     filters: TFilterConfiguration[];
     /**
      * optional configuration for filter groups.
+     *
      */
     filterGroups?: TFilterGroupConfiguration[];
     /**
-     * controls the `clear all` (added filters) button from the menu list
+     * controls the `clear all` (added filters) button from the menu list, meant to clear the parent application's filter state
      */
-    onClearAllRequest: () => void;
+    onClearAllRequest: (event?: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
     /**
-     * optional callback trigger to add a new filter.
+     * optional callback when the add filter button is clicked
      */
-    onAddFilterRequest?: Function;
+    onAddFilterRequest?: (event?: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
     /**
      * function to render a search input, selectable from applicable UI Kit components.
      */
-    renderSearchComponent: () => ReactNode;
+    renderSearchComponent: ReactNode;
+    /**
+     * controls whether the filters list is initially open
+     */
+    defaultOpen?: boolean;
 };
-declare function Filters(props: TFiltersProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Filters({ appliedFilters, filters, filterGroups, onClearAllRequest, onAddFilterRequest, renderSearchComponent, defaultOpen, }: TFiltersProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare namespace Filters {
     var displayName: string;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/filters",
   "description": "The `Filters` component displays filter controls.",
-  "version": "19.15.0",
+  "version": "19.16.0",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,16 +21,15 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/collapsible-motion": "workspace:^",
-    "@commercetools-uikit/design-system": "workspace:^",
-    "@commercetools-uikit/dropdown-menu": "workspace:^",
-    "@commercetools-uikit/flat-button": "workspace:^",
-    "@commercetools-uikit/icon-button": "workspace:^",
-    "@commercetools-uikit/icons": "workspace:^",
-    "@commercetools-uikit/secondary-icon-button": "workspace:^",
-    "@commercetools-uikit/select-input": "workspace:^",
-    "@commercetools-uikit/spacings": "workspace:^",
-    "@commercetools-uikit/utils": "workspace:^",
+    "@commercetools-uikit/collapsible-motion": "19.16.0",
+    "@commercetools-uikit/design-system": "19.16.0",
+    "@commercetools-uikit/flat-button": "19.16.0",
+    "@commercetools-uikit/icon-button": "19.16.0",
+    "@commercetools-uikit/icons": "19.16.0",
+    "@commercetools-uikit/secondary-icon-button": "19.16.0",
+    "@commercetools-uikit/select-input": "19.16.0",
+    "@commercetools-uikit/spacings": "19.16.0",
+    "@commercetools-uikit/utils": "19.16.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@radix-ui/react-popover": "^1.1.2",
@@ -38,6 +37,10 @@
     "react-intl": "^6.3.2"
   },
   "devDependencies": {
+    "@commercetools-uikit/primary-button": "workspace:^",
+    "@commercetools-uikit/radio-input": "workspace:^",
+    "@commercetools-uikit/search-text-input": "workspace:^",
+    "@commercetools-uikit/text-input": "workspace:^",
     "react": "17.0.2"
   },
   "peerDependencies": {