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

package/src/components/Filters/Filters.tsx

@@ -1,9 +1,22 @@
 import clsx from 'clsx';
-import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
-import { Data } from '../../types/data';
+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 { FilterType, FilterValue, FilterValues } from './Filters.model';
-import classes from './Filters.scss';
+import type { FilterType, FilterValue, FilterValues } from './Filters.model';
+import classes from './Filters.module.scss';
 
 export interface FiltersProps<T extends Data> {
   options?: FilterType<T>[];
@@ -12,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 })[];
 };
@@ -26,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> = {};
 
@@ -114,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) {
@@ -144,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.module.scss

@@ -0,0 +1,84 @@
+@import '../../../../styles/common.scss';
+@import '../../Filter/Filter.module.scss';
+
+.container {
+  display: grid;
+
+  .dateTimeInputWrapper {
+    border: $input-inactive;
+
+    &:focus-within {
+      border: $input-active;
+    }
+  }
+  .dateTimeInput {
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 1fr min-content;
+
+    place-items: center;
+    border: 2px solid transparent;
+
+    &:focus-within {
+      border: none;
+    }
+
+    .inputValue {
+      &:focus {
+        border: none;
+      }
+
+      color: var(--input-color, $input-color);
+      padding: 0 12px;
+      border: none;
+      font-size: var(--label-font-size, $label-font-size);
+      outline: none;
+
+      height: 50px;
+      width: 100%;
+    }
+
+    .button {
+      svg {
+        height: 60%;
+      }
+
+      /* default icon colors */
+      svg * {
+        stroke: var(
+          --filter-context-button-color,
+          $filter-context-button-color
+        );
+      }
+
+      &:hover,
+      &:focus,
+      &:focus-visible {
+        background-color: var(
+          --filter-context-button-color,
+          $filter-context-button-color
+        );
+
+        svg * {
+          stroke: #ffffff;
+        }
+      }
+
+      &.hasError {
+        border: 3px solid
+          var(--input-invalid-border-color, $input-invalid-border-color);
+      }
+    }
+  }
+
+  small {
+    padding: 6px;
+    place-self: start;
+    color: var(--input-invalid-color, $input-invalid-color);
+  }
+}
+
+.picker {
+  overflow: visible;
+  z-index: 99999;
+}

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

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { DateTime } from 'luxon';
 import React, {
-  KeyboardEventHandler,
+  type KeyboardEventHandler,
   useEffect,
   useRef,
   useState,
@@ -14,8 +14,8 @@ import { Button, ButtonContext } from '../../../Buttons';
 import { DateTimePicker } from '../../../DateTime/DateTimePicker';
 import { IconName } from '../../../Icons';
 import { formatDate, formatDateTime } from '../../../Utils/Transformers';
-import { FilterValidationResult, FilterValue } from '../../Filters.model';
-import classes from './DateTimeFilter.scss';
+import type { FilterValidationResult, FilterValue } from '../../Filters.model';
+import classes from './DateTimeFilter.module.scss';
 
 export interface DateTimeFilterProps {
   value?: string;

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
-import { Option } from '../../Filters.model';
+import type { Option } from '../../Filters.model';
 import { OptionsFilter } from './OptionsFilter';
 
 const options: Option[] = [

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

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

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

@@ -1,12 +1,17 @@
 import clsx from 'clsx';
 import { debounce } from 'lodash';
-import React, { ChangeEvent, useCallback, useEffect, useState } from 'react';
-import { Option } from '../../Filters.model';
+import React, {
+  type ChangeEvent,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
+import type { Option } from '../../Filters.model';
 import {
-  OptionFilterProps,
+  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/SelectionTypes/SearcheableOptionsFilter/helpers.ts

@@ -1,5 +1,8 @@
-import { Data } from '../../../../types';
-import { FilterValue, SearcheableOptionsFilter } from '../../Filters.model';
+import type { Data } from '../../../../types';
+import type {
+  FilterValue,
+  SearcheableOptionsFilter,
+} from '../../Filters.model';
 
 export function renderSearcheableOptionsFilterValue<T extends Data>(
   value: FilterValue,

package/src/components/Filters/Validators/DateRangeFilterValidator.spec.ts

@@ -1,6 +1,6 @@
 import { DateTime, Settings } from 'luxon';
 import { describe, expect, it } from 'vitest';
-import { FilterValues } from '../Filters.model';
+import type { FilterValues } from '../Filters.model';
 import { createDateRangeFilterValidators } from './DateRangeFilterValidator';
 
 interface DateRangeFilterValidatorTestData {

package/src/components/Filters/Validators/DateRangeFilterValidator.ts

@@ -1,4 +1,4 @@
-import { FilterValidatorFunction } from '../Filters.model';
+import type { FilterValidatorFunction } from '../Filters.model';
 
 interface DateRangeFilterValidatorOptions {
   fromDateIndex: number;

package/src/components/Filters/Validators/NumberRangeFilterValidator.spec.ts

@@ -1,6 +1,6 @@
 import { Settings } from 'luxon';
 import { describe, expect, it } from 'vitest';
-import { FilterValues } from '../Filters.model';
+import type { FilterValues } from '../Filters.model';
 import { createNumberRangeFilterValidators } from './NumberRangeFilterValidator';
 
 interface NumberRangeFilterValidatorTestData {

package/src/components/Filters/Validators/NumberRangeFilterValidator.ts

@@ -1,4 +1,4 @@
-import { FilterValidatorFunction } from '../Filters.model';
+import type { FilterValidatorFunction } from '../Filters.model';
 
 interface NumberRangeFilterValidatorOptions {
   fromIndex: number;

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.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 { BooleanViewField } from './BooleanViewField';
 

package/src/components/FormElements/BooleanView/BooleanViewField.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import React from 'react';
-import { BaseFormElement } from '../Form.models';
+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.module.scss

@@ -0,0 +1,123 @@
+@import '../../../styles/common.scss';
+
+.container {
+  input {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    color: var(--input-color, $input-color);
+    border: 1px solid var(--input-border-color, $input-border-color);
+    width: max-content;
+    outline: none;
+    font-size: var(--label-font-size, $label-font-size);
+
+    background-repeat: no-repeat;
+    background-position-y: center;
+    background-position-x: 100%;
+
+    height: 30px;
+    width: 30px;
+
+    margin: 10px 0 10px 0;
+
+    transition: box-shadow 0.15s ease-in-out 0s,
+      background-color 0.15s ease-in-out 0s;
+
+    // transition: background-color 0.15s ease-in-out 0s;
+
+    &.hasConfirm {
+      border: 1px solid
+        var(--checkbox-warning-border-color, $checkbox-warning-border-color);
+    }
+
+    &.hasError {
+      border: 1px solid
+        var(--input-invalid-border-color, $input-invalid-border-color);
+    }
+
+    &:enabled {
+      cursor: pointer;
+    }
+
+    &:disabled {
+      background-color: var(
+        --input-disabled-background-color,
+        $input-disabled-background-color
+      );
+      color: var(--input-disabled-font-color, $input-disabled-font-color);
+      border: 1px solid
+        var(--input-disabled-border-color, $input-disabled-border-color);
+    }
+  }
+
+  input:hover:enabled {
+    border: 1px solid var(--input-hover-color, $input-hover-color);
+    box-shadow: 0 0 0 2px var(--input-hover-color, $input-hover-color);
+
+    &.hasConfirm {
+      border: 1px solid
+        var(
+          --checkbox-warning-hover-border-color,
+          $checkbox-warning-hover-border-color
+        );
+      box-shadow: 0 0 0 2px
+        var(
+          --checkbox-warning-hover-border-color,
+          $checkbox-warning-hover-border-color
+        );
+    }
+
+    &.hasError {
+      border: 1px solid
+        var(--input-invalid-border-color, $input-invalid-border-color);
+      box-shadow: 0 0 0 2px
+        var(--input-invalid-hover-color, $input-invalid-hover-color);
+    }
+  }
+
+  input:checked {
+    background-color: var(--input-hover-color, $input-hover-color);
+
+    &.hasConfirm {
+      background-color: var(
+        --checkbox-warning-checked-bg-color,
+        $checkbox-warning-checked-bg-color
+      );
+    }
+
+    &.hasError {
+      background-color: var(
+        --input-invalid-border-color,
+        $input-invalid-border-color
+      );
+    }
+
+    &:disabled {
+      background-color: var(
+        --input-disabled-background-color,
+        $input-disabled-background-color
+      );
+    }
+  }
+
+  input:checked:after {
+    content: '\2714';
+    font-size: 20px;
+    display: grid;
+    height: 100%;
+    justify-content: center;
+    align-content: center;
+    color: #ffffff;
+  }
+  input:checked:disabled:after {
+    color: var(--input-disabled-border-color, $input-disabled-border-color);
+  }
+
+  .confirmDialog {
+    @include confirmDialogFadeIn;
+  }
+
+  small {
+    padding-top: 0;
+  }
+}

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

@@ -3,7 +3,7 @@ import { fireEvent, render, waitFor } from '@testing-library/react';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { describe, expect, it, vi } from 'vitest';
-import { Checkbox, CheckboxProps } from './Checkbox';
+import { Checkbox, type CheckboxProps } from './Checkbox';
 
 describe('Checkbox', () => {
   it('renders the component without crashing', () => {

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

@@ -1,7 +1,7 @@
 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 { createGroups } from '../../../helpers/storybook';
 import { Checkbox } from './Checkbox';
 

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

@@ -2,12 +2,12 @@ import clsx from 'clsx';
 import React, { useRef, useState } from 'react';
 import {
   ConfirmDialog,
-  ConfirmationConfig,
-  ConfirmationMode,
+  type ConfirmationConfig,
+  type ConfirmationMode,
 } from '../../ConfirmDialog';
-import { BaseFormControl, BaseInputEvents } from '../Form.models';
+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/Checkbox/CheckboxField.tsx

@@ -1,7 +1,7 @@
 import { useField } from 'formik';
 import React from 'react';
 import { useFormikError } from '../useFormikError';
-import { Checkbox, CheckboxProps } from './Checkbox';
+import { Checkbox, type CheckboxProps } from './Checkbox';
 export const CheckboxField: React.FC<
   Omit<CheckboxProps, 'error' | 'onChange'>
 > = (props) => {

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

@@ -1,6 +1,6 @@
-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 { createGroups } from '../../../helpers/storybook';
 import { CustomTags } from './CustomTags';
 

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

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, {
-  ChangeEvent,
-  FormEvent,
+  type ChangeEvent,
+  type FormEvent,
   useEffect,
   useRef,
   useState,
@@ -11,9 +11,9 @@ import { noop } from '../../../helpers/utils';
 import { useDebounce } from '../../../hooks/useDebounce/useDebounce';
 import { Button, ButtonContext } from '../../Buttons';
 import { IconName } from '../../Icons';
-import { BaseFormControl, BaseInputEvents } from '../Form.models';
+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/CustomTags/CustomTagsField.tsx

@@ -1,7 +1,7 @@
 import { useField } from 'formik';
 import React from 'react';
 import { useFormikError } from '../useFormikError';
-import { CustomTags, CustomTagsProps } from './CustomTags';
+import { CustomTags, type CustomTagsProps } from './CustomTags';
 
 export const CustomTagsField: React.FC<
   Omit<CustomTagsProps, 'error' | 'onChange'>

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

@@ -67,8 +67,7 @@ describe('DateTimeTextField', () => {
 
   it(`defaults to an empty string if prop value Wis 'null'`, () => {
     const { container } = render(
-      // @ts-expect-error intentional null value
-      <DateTimeText name={'test-name'} value={null} />,
+      <DateTimeText name={'test-name'} value={null as unknown as string} />,
     );
 
     const input = container.querySelector('input') as HTMLInputElement;

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

@@ -1,7 +1,7 @@
 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 { createGroups } from '../../../helpers/storybook';
 import { DateTimeText } from './DateTimeText';