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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.72.0-rc.9",
+  "version": "0.72.0",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -41,7 +41,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.34-rc.9",
+    "@axinom/mosaic-core": "^0.4.34",
     "@faker-js/faker": "^7.4.0",
     "@geoffcox/react-splitter": "^2.1.2",
     "@mui/base": "5.0.0-beta.40",
@@ -113,5 +113,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fa207d07891e9586e44cd9c701a0ee94a90a9cbf"
+  "gitHead": "083814ceecc8fa2672930b9ffbf21b544a8b89c8"
 }

package/src/components/Badge/Badge.model.ts

@@ -0,0 +1,46 @@
+/**
+ * The corner of the wrapped component that the badge attaches to.
+ */
+export type BadgePosition =
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right';
+
+export interface BadgeProps {
+  /**
+   * The value shown inside the badge, typically a notification counter.
+   * When `null`, `undefined` or an empty string, the badge is not rendered
+   * (only the children are shown).
+   */
+  content?: string | number;
+  /**
+   * The corner of the wrapped component the badge attaches to.
+   *
+   * @default 'top-right'
+   */
+  position?: BadgePosition;
+  /**
+   * When `true`, the badge sits on the corner and half-overflows outside the
+   * bounds of the wrapped component (typical for notification counters). When
+   * `false`, the badge sits flush inside the corner.
+   *
+   * @default true
+   */
+  overlap?: boolean;
+  /**
+   * Caps a numeric `content`. When the number is greater than `max`, `${max}+`
+   * is displayed (e.g. `max={99}` renders `99+` for `100`). Ignored when
+   * `content` is a string.
+   */
+  max?: number;
+  /**
+   * The element the badge attaches to. The badge is positioned relative to
+   * this content.
+   */
+  children?: React.ReactNode;
+  /** Value for the `data-test-id` attribute on the badge element. */
+  dataTestId?: string;
+  /** CSS Class name for additional styles. */
+  className?: string;
+}

package/src/components/Badge/Badge.scss

@@ -0,0 +1,62 @@
+@import '../../styles/common.scss';
+
+.container {
+  @include boxSizing;
+
+  position: relative;
+  display: inline-flex;
+}
+
+.badge {
+  position: absolute;
+  z-index: 1;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  height: 18px;
+  min-width: 18px;
+  padding: 0 6px;
+  border-radius: 9px;
+
+  background-color: var(--mosaic-primary);
+  color: #fff;
+
+  font-size: 11px;
+  white-space: nowrap;
+  pointer-events: none;
+
+  &.topRight {
+    top: 0;
+    right: 0;
+  }
+  &.topLeft {
+    top: 0;
+    left: 0;
+  }
+  &.bottomRight {
+    right: 0;
+    bottom: 0;
+  }
+  &.bottomLeft {
+    bottom: 0;
+    left: 0;
+  }
+
+  // Sit ON the corner, half-overflowing the parent bounds (notification style).
+  &.overlap {
+    &.topRight {
+      transform: translate(50%, -50%);
+    }
+    &.topLeft {
+      transform: translate(-50%, -50%);
+    }
+    &.bottomRight {
+      transform: translate(50%, 50%);
+    }
+    &.bottomLeft {
+      transform: translate(-50%, 50%);
+    }
+  }
+}

package/src/components/Badge/Badge.spec.tsx

@@ -0,0 +1,40 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import { Badge } from './Badge';
+
+describe('Badge', () => {
+  it('renders the component without crashing', () => {
+    const { container } = render(<Badge content={5}>child</Badge>);
+    expect(container.querySelector('.badge-container')).toBeInTheDocument();
+  });
+
+  it('renders the children', () => {
+    const { getByText } = render(
+      <Badge content={5}>
+        <span>icon</span>
+      </Badge>,
+    );
+    expect(getByText('icon')).toBeInTheDocument();
+  });
+
+  it('displays the content', () => {
+    const { container } = render(<Badge content={5} />);
+    expect(container.querySelector('.badge')?.textContent).toBe('5');
+  });
+
+  it('caps numeric content with max', () => {
+    const { container } = render(<Badge content={1000} max={99} />);
+    expect(container.querySelector('.badge')?.textContent).toBe('99+');
+  });
+
+  it('does not render the badge when content is empty', () => {
+    const { container } = render(<Badge content="">child</Badge>);
+    expect(container.querySelector('.badge')).not.toBeInTheDocument();
+  });
+
+  it('applies the position class', () => {
+    const { container } = render(<Badge content={1} position="bottom-left" />);
+    expect(container.querySelector('.bottomLeft')).toBeInTheDocument();
+  });
+});

package/src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,43 @@
+import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { Badge } from './Badge';
+
+const SampleBox: React.FC = () => (
+  <div
+    style={{
+      width: 64,
+      height: 64,
+      borderRadius: 8,
+      backgroundColor: '#e0e0e0',
+    }}
+  />
+);
+
+const meta: Meta<typeof Badge> = {
+  title: 'Other Components/Badge',
+  component: Badge,
+  decorators: [
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    (Story) => (
+      <div style={{ padding: 40 }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    content: 5,
+    position: 'top-right',
+    children: <SampleBox />,
+  },
+};
+export default meta;
+
+export const Default: StoryObj<typeof Badge> = {};
+
+export const MultiDigitCapped: StoryObj<typeof Badge> = {
+  args: { content: 1000, max: 99 },
+};
+
+export const BottomLeftFlush: StoryObj<typeof Badge> = {
+  args: { position: 'bottom-left', overlap: false },
+};

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,59 @@
+import clsx from 'clsx';
+import React from 'react';
+import type { BadgePosition, BadgeProps } from './Badge.model';
+import classes from './Badge.scss';
+
+const positionClasses: Record<BadgePosition, string> = {
+  'top-left': classes.topLeft,
+  'top-right': classes.topRight,
+  'bottom-left': classes.bottomLeft,
+  'bottom-right': classes.bottomRight,
+};
+
+/**
+ * A small badge that attaches to a corner of the element it wraps, typically
+ * used to display a notification counter.
+ *
+ * @example
+ *   <Badge content={5} position="top-right">
+ *     <Icons icon={IconName.Bell} />
+ *   </Badge>
+ */
+export const Badge: React.FC<BadgeProps> = ({
+  content,
+  position = 'top-right',
+  overlap = true,
+  max,
+  children,
+  dataTestId,
+  className = '',
+}) => {
+  const displayContent =
+    typeof content === 'number' && typeof max === 'number' && content > max
+      ? `${max}+`
+      : content;
+
+  const hasContent =
+    displayContent !== undefined &&
+    displayContent !== null &&
+    displayContent !== '';
+
+  return (
+    <span className={clsx(classes.container, 'badge-container', className)}>
+      {children}
+      {hasContent && (
+        <span
+          className={clsx(
+            classes.badge,
+            positionClasses[position],
+            overlap && classes.overlap,
+            'badge',
+          )}
+          data-test-id={dataTestId ?? 'badge'}
+        >
+          {displayContent}
+        </span>
+      )}
+    </span>
+  );
+};

package/src/components/Badge/index.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgePosition, BadgeProps } from './Badge.model';

package/src/components/Explorer/Explorer.tsx

@@ -262,13 +262,7 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     listRef.current?.resetSelection();
   }, []);
 
-  const {
-    activeFilters,
-    Filters,
-    filtersVisible,
-    toggleFiltersVisible,
-    collapseFilters,
-  } = useFilters<T>({
+  const { activeFilters, Filters, collapseFilters } = useFilters<T>({
     stationKey,
     globalStateOptions,
     filterOptions,
@@ -416,8 +410,6 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     quickEditAction,
     bulkEditAction,
     openBulkActionsOnStart,
-    filtersVisible,
-    hasFilters: filterOptions !== undefined,
     resultCount,
     activeFilterCount: Object.keys(activeFilters).length,
     itemSelection,
@@ -426,7 +418,6 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     setStationMessage,
     onBulkActionsToggled,
     setIsBulkOpen,
-    toggleFiltersVisible,
     closeBulkEdit,
   });
 
@@ -461,51 +452,45 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
         />
         {StationMessage}
         {Filters}
-        <div
-          className={clsx({
-            [classes.filtersHidden]: !filtersVisible,
-          })}
-        >
-          <List<T>
-            ref={listRef}
-            columns={columns}
-            data={data}
-            isLoading={isLoading}
-            isError={Boolean(stationMessage?.type === 'error')}
-            handleRetry={false}
-            minimumWidth={minimumWidth}
-            columnGap={columnGap}
-            rowGap={rowGap}
-            headerRowHeight={headerRowHeight}
-            listRowHeight={listRowHeight}
-            listRowActionSize={listRowActionSize}
-            headerRowActionSize={headerRowActionSize}
-            horizontalTextAlign={horizontalTextAlign}
-            verticalTextAlign={verticalTextAlign}
-            textWrap={textWrap}
-            keyProperty={keyProperty}
-            showActionButton={
-              Boolean(generateItemLink) ||
-              Boolean(onItemClicked) ||
-              listSelectionMode !== ListSelectMode.None
-            } // or hard code to `true`?
-            selectionMode={listSelectionMode}
-            enableSelectAll={enableSelectAll}
-            enableSelectAllDeselect={enableSelectAll && !hasMoreData}
-            loadingTriggerOffset={loadingTriggerOffset}
-            defaultSortOrder={sortOrder}
-            generateItemLink={!isQuickEditMode ? generateItemLink : undefined}
-            onItemClicked={onItemClickedHandler}
-            onItemSelected={itemSelectedHandler}
-            onRequestMoreData={onRequestMoreData}
-            onSortChanged={(sortData: SortData<T>) => {
-              listRef.current?.resetSelection();
-              onSortChanged(sortData);
-              setSortOrder(sortData);
-            }}
-            inlineMenuActions={inlineMenuActions && inlineMenuActionsHandler}
-          />
-        </div>
+        <List<T>
+          ref={listRef}
+          columns={columns}
+          data={data}
+          isLoading={isLoading}
+          isError={Boolean(stationMessage?.type === 'error')}
+          handleRetry={false}
+          minimumWidth={minimumWidth}
+          columnGap={columnGap}
+          rowGap={rowGap}
+          headerRowHeight={headerRowHeight}
+          listRowHeight={listRowHeight}
+          listRowActionSize={listRowActionSize}
+          headerRowActionSize={headerRowActionSize}
+          horizontalTextAlign={horizontalTextAlign}
+          verticalTextAlign={verticalTextAlign}
+          textWrap={textWrap}
+          keyProperty={keyProperty}
+          showActionButton={
+            Boolean(generateItemLink) ||
+            Boolean(onItemClicked) ||
+            listSelectionMode !== ListSelectMode.None
+          } // or hard code to `true`?
+          selectionMode={listSelectionMode}
+          enableSelectAll={enableSelectAll}
+          enableSelectAllDeselect={enableSelectAll && !hasMoreData}
+          loadingTriggerOffset={loadingTriggerOffset}
+          defaultSortOrder={sortOrder}
+          generateItemLink={!isQuickEditMode ? generateItemLink : undefined}
+          onItemClicked={onItemClickedHandler}
+          onItemSelected={itemSelectedHandler}
+          onRequestMoreData={onRequestMoreData}
+          onSortChanged={(sortData: SortData<T>) => {
+            listRef.current?.resetSelection();
+            onSortChanged(sortData);
+            setSortOrder(sortData);
+          }}
+          inlineMenuActions={inlineMenuActions && inlineMenuActionsHandler}
+        />
       </div>
       {isQuickEditMode && (
         <QuickEditContextProvider>{quickEditStation}</QuickEditContextProvider>

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/Filters/Filters.module.scss

@@ -9,12 +9,51 @@
   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;
+}