@axinom/mosaic-ui 0.71.0 → 0.72.0-rc.10

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

@@ -1,7 +1,7 @@
-import { Data } from '../../../types/data';
-import { FilterValue, FilterValues } from '../../Filters';
-import { SortData } from '../../List';
-import { ExplorerDataProvider } from '../Explorer.model';
+import type { Data } from '../../../types/data';
+import type { FilterValue, FilterValues } from '../../Filters';
+import type { SortData } from '../../List';
+import type { ExplorerDataProvider } from '../Explorer.model';
 
 type FilterFunction<T extends Data> = (
   value: unknown,

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

@@ -1,20 +1,19 @@
 import { useMemo } from 'react';
 import { showNotification } from '../../../initialize';
-import { Data } from '../../../types';
+import type { Data } from '../../../types';
 import { ErrorTypeToStationError } from '../../../utils/ErrorTypeToStationError';
 import { IconName } from '../../Icons';
-import { ItemSelectEventArgs } from '../../List';
-import { PageHeaderActionItemProps } from '../../PageHeader';
+import type { ItemSelectEventArgs } from '../../List';
+import type { PageHeaderActionItemProps } from '../../PageHeader';
 import {
-  PageHeaderActionProps,
-  PageHeaderActionType,
-  PageHeaderJsActionProps,
+  type PageHeaderActionProps,
+  type PageHeaderJsActionProps,
   isPageHeaderNavigationAction,
 } from '../../PageHeader/PageHeaderAction';
-import { ErrorType } from '../../models';
-import { ExplorerBulkAction, ItemSelection } from '../Explorer.model';
-import { ResultCounts } from './useDataProvider';
-import { StationMessage } from './useStationMessage';
+import type { ErrorType } from '../../models';
+import type { ExplorerBulkAction, ItemSelection } from '../Explorer.model';
+import type { ResultCounts } from './useDataProvider';
+import type { StationMessage } from './useStationMessage';
 
 interface UseActionsProps<T extends Data> {
   actions?: PageHeaderActionProps[];
@@ -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/useDataProvider.tsx

@@ -8,16 +8,16 @@ import {
   useState,
 } from 'react';
 import { useUpdatingRef } from '../../../hooks/useUpdatingRef/useUpdatingRef';
-import { Data } from '../../../types/data';
+import type { Data } from '../../../types/data';
 import { ErrorTypeToStationError } from '../../../utils/ErrorTypeToStationError';
-import { FilterValues } from '../../Filters/Filters.model';
-import { SortData } from '../../List/List.model';
-import { ErrorType } from '../../models';
-import {
+import type { FilterValues } from '../../Filters/Filters.model';
+import type { SortData } from '../../List/List.model';
+import type { ErrorType } from '../../models';
+import type {
   ExplorerDataProvider,
   ExplorerDataProviderConnection,
 } from '../Explorer.model';
-import { StationMessage } from './useStationMessage';
+import type { StationMessage } from './useStationMessage';
 
 interface DataProviderReturnType<T> {
   readonly data: T[];

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

@@ -1,8 +1,8 @@
 import { act, renderHook } from '@testing-library/react-hooks';
 import type { Mock } from 'vitest';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { Data } from '../../../types';
-import { FilterType, FilterValues } from '../../Filters';
+import type { Data } from '../../../types';
+import type { FilterType, FilterValues } from '../../Filters';
 import { getState, storeState } from '../../Utils/State/GlobalState';
 import { useFilters } from './useFilters';
 
@@ -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,10 +1,9 @@
-import React, { useEffect, useState } from 'react';
-import { useExpand } from '../../../hooks';
-import { Data } from '../../../types';
-import { FilterType, FilterValues } from '../../Filters';
-import { Filters } from '../../Filters/Filters';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import type { Data } from '../../../types';
+import type { FilterType, FilterValues } from '../../Filters';
+import { Filters, type FiltersHandle } from '../../Filters/Filters';
 import { getState, storeState } from '../../Utils/State/GlobalState';
-import { ExplorerStateOptions } from '../Explorer.model';
+import type { ExplorerStateOptions } from '../Explorer.model';
 
 interface UseFiltersProps<T extends Data> {
   stationKey: string;
@@ -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/Explorer/helpers/useStationMessage.spec.tsx

@@ -2,7 +2,7 @@ import { render } from '@testing-library/react';
 import { act, renderHook } from '@testing-library/react-hooks';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { MessageBar } from '../../MessageBar/MessageBar';
-import { StationMessage, useStationMessage } from './useStationMessage';
+import { type StationMessage, useStationMessage } from './useStationMessage';
 
 vi.mock('../../MessageBar/MessageBar', () => ({
   MessageBar: vi.fn(() => null),

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { MessageBar, MessageBarProps } from '../../MessageBar/MessageBar';
+import { MessageBar, type MessageBarProps } from '../../MessageBar/MessageBar';
 
 export interface StationMessage {
   type: MessageBarProps['type'];

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

@@ -1,7 +1,10 @@
 import { renderHook } from '@testing-library/react-hooks';
 import { describe, expect, it } from 'vitest';
-import { ItemSelectEventArgs, ListSelectMode } from '../../List/List.model';
-import { ResultCounts } from './useDataProvider';
+import {
+  type ItemSelectEventArgs,
+  ListSelectMode,
+} from '../../List/List.model';
+import type { ResultCounts } from './useDataProvider';
 import { useSubtitle } from './useSubtitle';
 
 describe('useSubtitle', () => {

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

@@ -1,6 +1,9 @@
-import { Data } from '../../../types';
-import { ItemSelectEventArgs, ListSelectMode } from '../../List/List.model';
-import { ResultCounts } from './useDataProvider';
+import type { Data } from '../../../types';
+import {
+  type ItemSelectEventArgs,
+  ListSelectMode,
+} from '../../List/List.model';
+import type { ResultCounts } from './useDataProvider';
 
 /**
  * Sets PageHeader subtitle

package/src/components/Explorer/index.ts

@@ -1,37 +1,39 @@
 export {
-  BulkEditConfig,
   BulkEditContext,
-  BulkEditContextType,
   BulkEditEnumType,
-  BulkEditFieldConfig,
-  BulkEditFieldConfigMap,
   BulkEditFormFieldsConfigConverter,
   defaultComponentMap,
   generateBulkEditMutation,
 } from './BulkEdit';
-export { Explorer, ExplorerProps } from './Explorer';
-export {
+export type {
+  BulkEditConfig,
+  BulkEditContextType,
+  BulkEditFieldConfig,
+  BulkEditFieldConfigMap,
+} from './BulkEdit';
+export { Explorer, type ExplorerProps } from './Explorer';
+export type {
   ExplorerBulkAction,
   ExplorerDataProvider,
   ExplorerDataProviderConnection,
   ItemSelection,
   PageIdentifier,
 } from './Explorer.model';
+export {
+  createInMemoryDataProvider,
+  findAnywhereInString,
+  findAnywhereInStringCaseInsensitive,
+  findExact,
+} from './helpers/InMemoryDataProvider';
 export {
   NavigationExplorer,
-  NavigationExplorerProps,
+  type NavigationExplorerProps,
 } from './NavigationExplorer/NavigationExplorer';
 export {
   QuickEditContext,
-  QuickEditContextType,
+  type QuickEditContextType,
 } from './QuickEdit/QuickEditContext';
 export {
   SelectionExplorer,
-  SelectionExplorerProps,
+  type SelectionExplorerProps,
 } from './SelectionExplorer/SelectionExplorer';
-export {
-  createInMemoryDataProvider,
-  findAnywhereInString,
-  findAnywhereInStringCaseInsensitive,
-  findExact,
-} from './helpers/InMemoryDataProvider';

package/src/components/FieldSelection/FieldSelection.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Field, Formik } from 'formik';
 import React from 'react';
 import { noop } from '../../helpers/utils';

package/src/components/FieldSelection/FieldSelection.tsx

@@ -4,9 +4,9 @@ import { noop } from '../../helpers/utils';
 import { Accordion, AccordionItem } from '../Accordion';
 import { Button, ButtonContext } from '../Buttons';
 import { Select } from '../FormElements';
-import { SelectOption } from '../FormElements/Select/Select';
+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.spec.tsx

@@ -2,12 +2,12 @@ import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import {
-  CustomFilterProps,
-  FilterType,
+  type CustomFilterProps,
+  type FilterType,
   FilterTypes,
-  SelectedValueRenderer,
+  type SelectedValueRenderer,
 } from '../Filters.model';
-import { Filter, FilterProps } from './Filter';
+import { Filter, type FilterProps } from './Filter';
 
 interface FilterTestData {
   createdAt: string;

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

@@ -1,11 +1,15 @@
 import clsx from 'clsx';
-import React, { PropsWithChildren, ReactNode, useState } from 'react';
+import React, { type PropsWithChildren, type ReactNode, useState } from 'react';
 import { assertNever } from '../../../helpers/utils';
-import { Data } from '../../../types/data';
+import type { Data } from '../../../types/data';
 import { Button, ButtonContext } from '../../Buttons';
 import { IconName } from '../../Icons';
 import { formatDate, formatDateTime } from '../../Utils/Transformers/DateTime';
-import { FilterType, FilterTypes, FilterValue } from '../Filters.model';
+import {
+  type FilterType,
+  FilterTypes,
+  type FilterValue,
+} from '../Filters.model';
 import { DateTimeFilter } from '../SelectionTypes/DateTimeFilter/DateTimeFilter';
 import { FreeTextFilter } from '../SelectionTypes/FreeTextFilter/FreeTextFilter';
 import { MultiOptionsFilter } from '../SelectionTypes/MultiOptionFilter/MultiOptionFilter';
@@ -13,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.model.ts

@@ -1,4 +1,4 @@
-import { Data } from '../../types/data';
+import type { Data } from '../../types/data';
 
 export enum FilterTypes {
   FreeText,

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.spec.tsx

@@ -2,7 +2,11 @@ import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { Filters } from './Filters';
-import { FilterType, FilterTypes, FilterValues } from './Filters.model';
+import {
+  type FilterType,
+  FilterTypes,
+  type FilterValues,
+} from './Filters.model';
 
 interface TestFilterData {
   createdAt: string;

package/src/components/Filters/Filters.stories.tsx

@@ -1,17 +1,17 @@
 import { faker } from '@faker-js/faker';
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
+import { action } from 'storybook/actions';
 import { generateItemArray } from '../../helpers/storybook';
 import { TextButton } from '../Buttons/TextButton/TextButton';
 import { Checkbox } from '../FormElements';
 import { Filters } from './Filters';
 import {
-  CustomFilterProps,
-  FilterType,
+  type CustomFilterProps,
+  type FilterType,
   FilterTypes,
-  FilterValues,
-  Option,
+  type FilterValues,
+  type Option,
 } from './Filters.model';
 import { createDateRangeFilterValidators } from './Validators/DateRangeFilterValidator';