@axinom/mosaic-ui 0.72.0-rc.9 → 0.72.1

package/src/components/Filters/Filters.tsx

@@ -1,11 +1,19 @@
 import clsx from 'clsx';
 import React, {
+  type ForwardedRef,
+  forwardRef,
   type PropsWithChildren,
+  useCallback,
   useEffect,
+  useImperativeHandle,
   useRef,
   useState,
 } from 'react';
+import { useExpand } from '../../hooks';
 import type { Data } from '../../types/data';
+import { Badge } from '../Badge';
+import { Button, ButtonContext } from '../Buttons';
+import { IconName } from '../Icons';
 import { Filter } from './Filter/Filter';
 import type { FilterType, FilterValue, FilterValues } from './Filters.model';
 import classes from './Filters.module.scss';
@@ -17,6 +25,19 @@ export interface FiltersProps<T extends Data> {
   className?: string;
 }
 
+/**
+ * Imperative handle exposed to consumers of the {@link Filters} component
+ * through a ref, allowing them to control the component programmatically.
+ */
+export interface FiltersHandle {
+  /** Collapses the currently expanded filter, if any. */
+  collapse: () => void;
+  /** Toggles the expanded state of the filter. */
+  toggleExpanded: () => void;
+  /** Returns whether any filter is currently expanded. */
+  isExpanded: boolean;
+}
+
 type CompositeFilters<T extends Data> = {
   [K in keyof T]?: (FilterType<T> & { index: number })[];
 };
@@ -31,18 +52,33 @@ type CompositeFilters<T extends Data> = {
  * @example
  *   <Filter filters={[freeTextFilter, optionsFilter, customFilter]} onFiltersChange={callBackFn} />
  */
-export const Filters = <T extends Data>({
-  defaultValues: defaultFilters = {},
-  options,
-  onFiltersChange,
-  className = '',
-}: PropsWithChildren<FiltersProps<T>>): JSX.Element => {
+const FiltersComponent = <T extends Data>(
+  {
+    defaultValues: defaultFilters = {},
+    options,
+    onFiltersChange,
+    className = '',
+  }: PropsWithChildren<FiltersProps<T>>,
+  ref: ForwardedRef<FiltersHandle>,
+): JSX.Element | null => {
+  const { collapse, toggleExpanded, isExpanded } = useExpand(true);
   const activeFilters = useRef<FilterValues<T>>(defaultFilters);
   const [compositeFilters, setCompositeFilters] = useState<CompositeFilters<T>>(
     {},
   );
   const [activeFilterIndex, setActiveFilterIndex] = useState<number>(-1);
 
+  // Expose imperative controls to the component rendering <Filters />.
+  useImperativeHandle(
+    ref,
+    () => ({
+      collapse,
+      toggleExpanded,
+      isExpanded,
+    }),
+    [collapse, toggleExpanded, isExpanded],
+  );
+
   useEffect(() => {
     const compositeFiltersUpdate: CompositeFilters<T> = {};
 
@@ -119,6 +155,13 @@ export const Filters = <T extends Data>({
     setActiveFilterIndex(idx);
   };
 
+  // Reset all active filters and emit the empty set. `hasValue` in each Filter is
+  // derived from its `value`, so re-rendering with empty values hides every chip.
+  const clearAllFilters = useCallback(() => {
+    activeFilters.current = {};
+    onFiltersChange?.({});
+  }, [onFiltersChange]);
+
   const renderFilter = (filter: FilterType<T>, index: number): JSX.Element => {
     let value = activeFilters.current[filter.property];
     if (Object.keys(compositeFilters).indexOf(String(filter.property)) > -1) {
@@ -149,18 +192,67 @@ export const Filters = <T extends Data>({
     );
   };
 
+  const filterCount = Object.keys(activeFilters.current).length;
+
+  // Nothing to filter by - don't render the filter panel at all.
+  if (!options?.length) {
+    return null;
+  }
+
   return (
     <div
       className={clsx(
-        { [classes.container]: options },
+        classes.container,
+        { [classes.collapsed]: !isExpanded },
         'filter-container',
         className,
       )}
       data-test-id="filters"
     >
-      {options?.map((filter: FilterType<T>, index: number) =>
-        renderFilter(filter, index),
-      )}
+      <div className={classes.header}>
+        <Badge
+          content={!isExpanded && filterCount > 0 ? filterCount : undefined}
+          position="bottom-right"
+          overlap={false}
+          dataTestId="filters-count-badge"
+          max={9}
+        >
+          <Button
+            icon={IconName.Filters}
+            className={classes.headerButton}
+            buttonContext={ButtonContext.None}
+            onButtonClicked={toggleExpanded}
+            dataTestId="filters-toggle"
+          />
+        </Badge>
+        {isExpanded && (
+          <>
+            <span className={classes.count} data-test-id="filters-count">
+              {filterCount > 0 ? `Filters (${filterCount})` : 'Filters'}
+            </span>
+            {filterCount > 0 && (
+              <Button
+                icon={IconName.RemoveAllFilters}
+                className={classes.headerButton}
+                buttonContext={ButtonContext.None}
+                onButtonClicked={clearAllFilters}
+                dataTestId="filters-clear-all"
+              />
+            )}
+          </>
+        )}
+      </div>
+      {isExpanded &&
+        options?.map((filter: FilterType<T>, index: number) =>
+          renderFilter(filter, index),
+        )}
     </div>
   );
 };
+
+// `forwardRef` does not preserve the generic `T`, so the wrapped component is
+// re-typed to keep the generic call signature while accepting a `ref`.
+export const Filters = forwardRef(FiltersComponent) as <T extends Data>(
+  props: PropsWithChildren<FiltersProps<T>> &
+    React.RefAttributes<FiltersHandle>,
+) => JSX.Element | null;

package/src/components/Filters/index.ts

@@ -1,3 +1,4 @@
 export { Filters } from './Filters';
+export type { FiltersHandle, FiltersProps } from './Filters';
 export * from './Filters.model';
 export * from './Validators';

package/src/components/Icons/Icons.models.ts

@@ -47,6 +47,7 @@ export enum IconName {
   QuickEdit,
   QuickEditStation,
   RemoveFilter,
+  RemoveAllFilters,
   Replace,
   Retry,
   Save,

package/src/components/Icons/Icons.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import classes from '../../../.storybook/static/css/icons.module.scss';
-import { SvgElement, SvgElementProps } from '../VisualElements/SvgElement';
+import { SvgElement, type SvgElementProps } from '../VisualElements/SvgElement';
 import { Icons } from './Icons';
 import { IconName } from './Icons.models';
 

package/src/components/Icons/Icons.tsx

@@ -410,6 +410,15 @@ const RemoveFilterIcon: React.FC<SvgElementProps> = (props) => (
   </SvgElement>
 );
 
+const RemoveAllFiltersIcon: React.FC<SvgElementProps> = (props) => (
+  <SvgElement {...props}>
+    <path
+      {...DEFAULT_PATH_PROPS}
+      d="M11.6,10.9h20.7l-8.2,8.7v9.9l-4.7,3.7v-13.4s-7.8-8.9-7.8-8.9ZM33.3,24.2l4.4,4.4-4.4-4.4ZM33.3,24.2l-4.4-4.4,4.4,4.4-4.4,4.4,4.4-4.4ZM33.3,24.2l4.4-4.4-4.4,4.4ZM21,6.5H2.1l12.8,15.2v10.4"
+    />
+  </SvgElement>
+);
+
 const ReplaceIcon: React.FC<SvgElementProps> = (props) => (
   <SvgElement {...props}>
     <path
@@ -610,6 +619,7 @@ export const Icons: React.FC<IconsProps> = ({ icon, className, ...props }) => {
     [IconName.QuickEdit]: QuickEditIcon,
     [IconName.QuickEditStation]: QuickEditStationIcon,
     [IconName.RemoveFilter]: RemoveFilterIcon,
+    [IconName.RemoveAllFilters]: RemoveAllFiltersIcon,
     [IconName.Replace]: ReplaceIcon,
     [IconName.Retry]: RetryIcon,
     [IconName.Save]: SaveIcon,

package/src/components/index.ts

@@ -1,6 +1,7 @@
 /** Export all components to be included into the node package here */
 export * from './Accordion';
 export * from './Actions';
+export * from './Badge';
 export * from './Buttons';
 export * from './DynamicDataList';
 export * from './EmptyStation';