@axinom/mosaic-ui 0.72.0-rc.8 → 0.72.0

package/src/components/Explorer/helpers/useActions.ts

@@ -7,7 +7,6 @@ import type { ItemSelectEventArgs } from '../../List';
 import type { PageHeaderActionItemProps } from '../../PageHeader';
 import {
   type PageHeaderActionProps,
-  PageHeaderActionType,
   type PageHeaderJsActionProps,
   isPageHeaderNavigationAction,
 } from '../../PageHeader/PageHeaderAction';
@@ -22,8 +21,6 @@ interface UseActionsProps<T extends Data> {
   quickEditAction?: PageHeaderActionItemProps;
   bulkEditAction?: ExplorerBulkAction<T>;
   openBulkActionsOnStart: boolean | undefined;
-  filtersVisible: boolean;
-  hasFilters: boolean;
   resultCount: ResultCounts;
   activeFilterCount: number;
   itemSelection: ItemSelectEventArgs<T>;
@@ -34,7 +31,6 @@ interface UseActionsProps<T extends Data> {
   ) => void;
   onBulkActionsToggled: (expanded: boolean) => void;
   setIsBulkOpen: (value: React.SetStateAction<boolean>) => void;
-  toggleFiltersVisible: () => void;
   closeBulkEdit: () => void;
 }
 
@@ -52,10 +48,6 @@ export const useActions = <T extends Data>({
   openBulkActionsOnStart,
   resultCount,
   setIsBulkOpen,
-  hasFilters,
-  filtersVisible,
-  activeFilterCount,
-  toggleFiltersVisible,
   quickEditAction,
   bulkActions,
   closeBulkEdit,
@@ -115,23 +107,6 @@ export const useActions = <T extends Data>({
   const pageHeaderActions: PageHeaderActionItemProps[] = useMemo(() => {
     const headerActions: PageHeaderActionItemProps[] = [];
 
-    if (hasFilters) {
-      headerActions.push({ kind: 'spacer' });
-
-      headerActions.push({
-        label:
-          activeFilterCount > 0 ? `Filters (${activeFilterCount})` : 'Filters',
-        icon: IconName.Filters,
-        kind: 'action',
-        actionType: filtersVisible
-          ? PageHeaderActionType.Active
-          : PageHeaderActionType.Context,
-        onClick: async () => {
-          toggleFiltersVisible();
-        },
-      });
-    }
-
     if (bulkActionItems.length > 0) {
       headerActions.push({ kind: 'spacer' });
 
@@ -193,11 +168,8 @@ export const useActions = <T extends Data>({
     return headerActions;
   }, [
     actions,
-    activeFilterCount,
     bulkActionItems,
     closeBulkEdit,
-    filtersVisible,
-    hasFilters,
     itemSelection.items?.length,
     onBulkActionsToggled,
     openBulkActionsOnStart,
@@ -205,7 +177,6 @@ export const useActions = <T extends Data>({
     resultCount?.filtered,
     setIsBulkOpen,
     setStationMessage,
-    toggleFiltersVisible,
   ]);
 
   return {

package/src/components/Explorer/helpers/useFilters.spec.tsx

@@ -46,7 +46,7 @@ describe('useFilters', () => {
     expect(result.current.activeFilters).toEqual(defaultFilterValues);
   });
 
-  it('should toggle filter visibility', () => {
+  it('should expose collapseFilters and not throw when called', () => {
     const { result } = renderHook(() =>
       useFilters({
         stationKey,
@@ -57,29 +57,13 @@ describe('useFilters', () => {
       }),
     );
 
-    act(() => {
-      result.current.toggleFiltersVisible();
-    });
-
-    expect(result.current.filtersVisible).toBe(false);
-  });
+    expect(typeof result.current.collapseFilters).toBe('function');
 
-  it('should collapse filters', () => {
-    const { result } = renderHook(() =>
-      useFilters({
-        stationKey,
-        globalStateOptions,
-        filterOptions,
-        defaultFilterValues,
-        onFiltersChange,
+    expect(() =>
+      act(() => {
+        result.current.collapseFilters();
       }),
-    );
-
-    act(() => {
-      result.current.collapseFilters();
-    });
-
-    expect(result.current.filtersVisible).toBe(false);
+    ).not.toThrow();
   });
 
   it('should update filters and call onFiltersChange', () => {
@@ -95,7 +79,7 @@ describe('useFilters', () => {
     );
 
     act(() => {
-      result.current.Filters.props.children.props.onFiltersChange(newFilters);
+      result.current.Filters.props.onFiltersChange(newFilters);
     });
 
     expect(result.current.activeFilters).toEqual(newFilters);
@@ -115,7 +99,7 @@ describe('useFilters', () => {
     );
 
     act(() => {
-      result.current.Filters.props.children.props.onFiltersChange(newFilters);
+      result.current.Filters.props.onFiltersChange(newFilters);
     });
 
     expect(storeState).toHaveBeenCalledWith(stationKey, 'filters', newFilters);
@@ -134,7 +118,7 @@ describe('useFilters', () => {
     );
 
     act(() => {
-      result.current.Filters.props.children.props.onFiltersChange(emptyFilters);
+      result.current.Filters.props.onFiltersChange(emptyFilters);
     });
 
     expect(storeState).toHaveBeenCalledWith(stationKey, 'filters', undefined);

package/src/components/Explorer/helpers/useFilters.tsx

@@ -1,8 +1,7 @@
-import React, { useEffect, useState } from 'react';
-import { useExpand } from '../../../hooks';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import type { Data } from '../../../types';
 import type { FilterType, FilterValues } from '../../Filters';
-import { Filters } from '../../Filters/Filters';
+import { Filters, type FiltersHandle } from '../../Filters/Filters';
 import { getState, storeState } from '../../Utils/State/GlobalState';
 import type { ExplorerStateOptions } from '../Explorer.model';
 
@@ -17,8 +16,6 @@ interface UseFiltersProps<T extends Data> {
 interface UseFiltersReturnType<T extends Data> {
   readonly Filters: JSX.Element;
   readonly activeFilters: FilterValues<T>;
-  readonly filtersVisible: boolean;
-  readonly toggleFiltersVisible: () => void;
   readonly collapseFilters: () => void;
 }
 
@@ -29,7 +26,7 @@ export const useFilters = <T extends Data>({
   defaultFilterValues,
   onFiltersChange,
 }: UseFiltersProps<T>): UseFiltersReturnType<T> => {
-  const { isExpanded, toggleExpanded, collapse } = useExpand(true);
+  const filtersRef = useRef<FiltersHandle>(null);
   const [activeFilters, setActiveFilters] = useState<FilterValues<T>>(
     getState<FilterValues<T>>(stationKey, 'filters') ??
       defaultFilterValues ??
@@ -53,26 +50,25 @@ export const useFilters = <T extends Data>({
     stationKey,
   ]);
 
+  const collapseFilters = useCallback(() => {
+    filtersRef.current?.collapse();
+  }, []);
+
   const FilterComponent = (
-    <>
-      {isExpanded && (
-        <Filters<T>
-          options={filterOptions}
-          defaultValues={activeFilters}
-          onFiltersChange={(args) => {
-            onFiltersChange(args);
-            setActiveFilters(args);
-          }}
-        />
-      )}
-    </>
+    <Filters<T>
+      ref={filtersRef}
+      options={filterOptions}
+      defaultValues={activeFilters}
+      onFiltersChange={(args) => {
+        onFiltersChange(args);
+        setActiveFilters(args);
+      }}
+    />
   );
 
   return {
     Filters: FilterComponent,
     activeFilters,
-    filtersVisible: isExpanded,
-    toggleFiltersVisible: toggleExpanded,
-    collapseFilters: collapse,
+    collapseFilters,
   };
 };

package/src/components/FieldSelection/FieldSelection.tsx

@@ -6,7 +6,7 @@ import { Button, ButtonContext } from '../Buttons';
 import { Select } from '../FormElements';
 import type { SelectOption } from '../FormElements/Select/Select';
 import { IconName } from '../Icons';
-import classes from './FieldSelection.scss';
+import classes from './FieldSelection.module.scss';
 
 interface FieldSelectionProps {
   name?: string;

package/src/components/Filters/Filter/Filter.tsx

@@ -17,7 +17,7 @@ import { NumericTextFilter } from '../SelectionTypes/NumericTextFilter/NumericTe
 import { OptionsFilter } from '../SelectionTypes/OptionsFilter/OptionsFilter';
 import { SearcheableOptionsFilter } from '../SelectionTypes/SearcheableOptionsFilter/SearcheableOptionsFilter';
 import { renderSearcheableOptionsFilterValue } from '../SelectionTypes/SearcheableOptionsFilter/helpers';
-import classes from './Filter.scss';
+import classes from './Filter.module.scss';
 
 export interface FilterProps<T extends Data> {
   /** Focus on the element when the filter is opened. (default: true) */

package/src/components/Filters/Filters.module.scss

@@ -0,0 +1,59 @@
+@import '../../styles/common.scss';
+
+.container {
+  @include boxSizing;
+
+  height: 100%;
+  width: $filter-width;
+
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-auto-rows: min-content;
+  overflow-x: hidden;
+  overflow-y: auto;
+  gap: 5px;
+  padding: 5px;
+
+  transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  background-color: var(
+    --filter-controller-background-color,
+    $filter-controller-background-color
+  );
+}
+
+.header {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+
+  background-color: color-mix(
+    in srgb,
+    var(--filter-background-color, white) 50%,
+    transparent
+  );
+
+  .headerButton {
+    width: 40px;
+    height: 40px;
+
+    svg {
+      height: 100%;
+      * {
+        stroke: var(--mosaic-secondary);
+      }
+    }
+  }
+
+  .count {
+    text-align: left;
+    font-weight: bold;
+    white-space: nowrap;
+    color: var(--mosaic-neutral-1);
+  }
+}
+
+.collapsed {
+  width: 50px; // 40px button + container padding (5px each side, border-box)
+  overflow-y: hidden;
+}

package/src/components/Filters/Filters.tsx

@@ -1,14 +1,22 @@
 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.scss';
+import classes from './Filters.module.scss';
 
 export interface FiltersProps<T extends Data> {
   options?: FilterType<T>[];
@@ -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/SelectionTypes/DateTimeFilter/{DateTimeFilter.scss → DateTimeFilter.module.scss}

@@ -1,5 +1,5 @@
 @import '../../../../styles/common.scss';
-@import '../../Filter/Filter.scss';
+@import '../../Filter/Filter.module.scss';
 
 .container {
   display: grid;

package/src/components/Filters/SelectionTypes/DateTimeFilter/DateTimeFilter.tsx

@@ -15,7 +15,7 @@ import { DateTimePicker } from '../../../DateTime/DateTimePicker';
 import { IconName } from '../../../Icons';
 import { formatDate, formatDateTime } from '../../../Utils/Transformers';
 import type { FilterValidationResult, FilterValue } from '../../Filters.model';
-import classes from './DateTimeFilter.scss';
+import classes from './DateTimeFilter.module.scss';
 
 export interface DateTimeFilterProps {
   value?: string;

package/src/components/Filters/SelectionTypes/FreeTextFilter/FreeTextFilter.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React, { type KeyboardEventHandler, useRef, useState } from 'react';
 import { noop } from '../../../../helpers/utils';
 import type { FilterValidationResult, FilterValue } from '../../Filters.model';
-import classes from './FreeTextFilter.scss';
+import classes from './FreeTextFilter.module.scss';
 
 export interface FreeTextFilterProps {
   value?: FilterValue;

package/src/components/Filters/SelectionTypes/MultiOptionFilter/MultiOptionFilter.tsx

@@ -4,7 +4,7 @@ import { ButtonContext } from '../../../Buttons';
 import { TextButton } from '../../../Buttons/TextButton/TextButton';
 import { Checkbox } from '../../../FormElements';
 import type { Option } from '../../Filters.model';
-import classes from './MultiOptionFilter.scss';
+import classes from './MultiOptionFilter.module.scss';
 
 export interface MultiOptionFilterProps {
   value?: string;

package/src/components/Filters/SelectionTypes/NumericTextFilter/NumericTextFilter.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React, { type KeyboardEventHandler, useState } from 'react';
 import { noop } from '../../../../helpers/utils';
 import type { FilterValidationResult, FilterValue } from '../../Filters.model';
-import classes from './NumericTextFilter.scss';
+import classes from './NumericTextFilter.module.scss';
 
 export interface NumericTextFilterProps {
   value?: string | number;

package/src/components/Filters/SelectionTypes/OptionsFilter/OptionsFilter.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React from 'react';
 import type { Option } from '../../Filters.model';
-import classes from './OptionsFilter.scss';
+import classes from './OptionsFilter.module.scss';
 
 export interface OptionFilterProps {
   value?: string;

package/src/components/Filters/SelectionTypes/SearcheableOptionsFilter/SearcheableOptionsFilter.tsx

@@ -11,7 +11,7 @@ import {
   type OptionFilterProps,
   OptionsFilter,
 } from '../OptionsFilter/OptionsFilter';
-import classes from './SearcheableOptionsFilter.scss';
+import classes from './SearcheableOptionsFilter.module.scss';
 
 interface SearcheableOptionFilterProps
   extends Omit<OptionFilterProps, 'options'> {

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/FormElements/BooleanView/BooleanViewField.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 import type { BaseFormElement } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
-import classes from './BooleanViewField.scss';
+import classes from './BooleanViewField.module.scss';
 
 export interface BooleanViewFieldProps extends BaseFormElement {
   /** Value to be displayed */

package/src/components/FormElements/Checkbox/Checkbox.tsx

@@ -7,7 +7,7 @@ import {
 } from '../../ConfirmDialog';
 import type { BaseFormControl, BaseInputEvents } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
-import classes from './Checkbox.scss';
+import classes from './Checkbox.module.scss';
 
 export interface CheckboxProps
   extends BaseFormControl,

package/src/components/FormElements/CustomTags/CustomTags.tsx

@@ -13,7 +13,7 @@ import { Button, ButtonContext } from '../../Buttons';
 import { IconName } from '../../Icons';
 import type { BaseFormControl, BaseInputEvents } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
-import classes from './CustomTags.scss';
+import classes from './CustomTags.module.scss';
 
 interface SuggestionsHook {
   readonly suggestions: string[];

package/src/components/FormElements/DateTimeField/DateTimeText.tsx

@@ -11,7 +11,7 @@ import { IconName } from '../../Icons';
 import { formatDate, formatDateTime } from '../../Utils';
 import type { BaseFormControl } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
-import classes from './DateTimeText.scss';
+import classes from './DateTimeText.module.scss';
 
 export interface DateTimeTextProps extends BaseFormControl {
   /** Current value the form control has */

package/src/components/FormElements/Divider/Divider.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React from 'react';
-import classes from './Divider.scss';
+import classes from './Divider.module.scss';
 
 export interface DividerProps {
   className?: string;

package/src/components/FormElements/FileUploadControl/FileUploadControl.tsx

@@ -5,7 +5,7 @@ import { IconName, Icons } from '../../Icons';
 import { ProgressBar } from '../../ProgressBar';
 import type { BaseFormControl } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
-import classes from './FileUploadControl.scss';
+import classes from './FileUploadControl.module.scss';
 
 export interface FileUpload {
   file: File;

package/src/components/FormElements/FormElementContainer/FormElementContainer.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React, { type CSSProperties } from 'react';
 import { InfoTooltip } from '../../InfoTooltip';
 import type { BaseFormElement } from '../Form.models';
-import classes from './FormElementContainer.scss';
+import classes from './FormElementContainer.module.scss';
 
 export type FormElementContainerProps = BaseFormElement & {
   /** Optional error message to display */

package/src/components/FormElements/FormGroup/FormGroup.stories.tsx

@@ -1,5 +1,5 @@
 import { faker } from '@faker-js/faker';
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { createGroups } from '../../../helpers/storybook';
 import { FormGroup } from './FormGroup';
 

package/src/components/FormElements/FormGroup/FormGroup.tsx

@@ -4,7 +4,7 @@ import { useExpand } from '../../../hooks/useExpand/useExpand';
 import { Button, ButtonContext } from '../../Buttons';
 import { FormGrid } from '../../FormStation/FormGrid/FormGrid';
 import { IconName } from '../../Icons';
-import classes from './FormGroup.scss';
+import classes from './FormGroup.module.scss';
 
 export interface FormGroupProps {
   className?: string;

package/src/components/FormElements/FormGroupTitle/FormGroupTitle.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React from 'react';
-import classes from './FormGroupTitle.scss';
+import classes from './FormGroupTitle.module.scss';
 
 export interface FormGroupTitleProps {
   className?: string;

package/src/components/FormElements/FormikDebug/FormikDebug.tsx

@@ -1,6 +1,6 @@
 import { useFormikContext } from 'formik';
 import React from 'react';
-import classes from './FormikDebug.scss';
+import classes from './FormikDebug.module.scss';
 
 export const FormikDebug = (): JSX.Element => {
   const ctx = useFormikContext();

package/src/components/FormElements/Link/LinkField.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 import type { BaseFormElement } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
-import classes from './LinkField.scss';
+import classes from './LinkField.module.scss';
 
 export interface LinkFieldProps extends BaseFormElement {
   /** Value to be displayed */