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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.72.0-rc.8",
+  "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.8",
+    "@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",
@@ -78,10 +78,8 @@
     "@storybook/addon-a11y": "10.4.2",
     "@storybook/addon-docs": "^10.4.2",
     "@storybook/addon-links": "^10.4.2",
-    "@storybook/addon-webpack5-compiler-babel": "^4.0.1",
-    "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^10.4.2",
-    "@storybook/react-webpack5": "^10.4.2",
+    "@storybook/react-vite": "^10.4.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
@@ -90,9 +88,7 @@
     "@types/react-calendar": "^3.1.2",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-transition-group": "^4.2.3",
-    "babel-loader": "^8.3.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.5.1",
     "formik": "^2.1.4",
     "jsdom": "^25.0.0",
     "prettier": "^2.8.8",
@@ -108,15 +104,14 @@
     "rollup-plugin-typescript2": "^0.29.0",
     "rollup-plugin-visualizer": "^5.8.3",
     "sass": "^1.57.1",
-    "sass-loader": "^12.3.0",
     "storybook": "^10.4.2",
-    "style-loader": "^3.3.1",
     "typescript": "^5.9.3",
     "typescript-plugin-css-modules": "^5.0.2",
+    "vite": "^6",
     "vitest": "^4.0.18"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0a85ef817bcc450722ab887be98fc4ea335e017e"
+  "gitHead": "083814ceecc8fa2672930b9ffbf21b544a8b89c8"
 }

package/src/components/Accordion/Accordion.tsx

@@ -8,7 +8,7 @@ import React, {
 import { useExpand } from '../../hooks/useExpand/useExpand';
 import { Button, ButtonContext } from '../Buttons';
 import { IconName } from '../Icons';
-import classes from './Accordion.scss';
+import classes from './Accordion.module.scss';
 import {
   AccordionItem,
   type AccordionItemProps,

package/src/components/Accordion/AccordionItem/AccordionItem.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 import { Button, ButtonContext } from '../../Buttons';
 import { IconName } from '../../Icons';
-import classes from './AccordionItem.scss';
+import classes from './AccordionItem.module.scss';
 
 export interface AccordionItemProps {
   header: JSX.Element;

package/src/components/Actions/Action/Action.tsx

@@ -12,7 +12,7 @@ import type {
   ContextActionData,
   NavigationActionData,
 } from '../Actions.models';
-import classes from './Action.scss';
+import classes from './Action.module.scss';
 
 export interface ActionProps {
   /** Action to perform */

package/src/components/Actions/Actions.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { useBusy } from '../../hooks/useBusy/useBusy';
 import { Action } from './Action/Action';
 import type { ActionData, ContextActionData } from './Actions.models';
-import classes from './Actions.scss';
+import classes from './Actions.module.scss';
 
 export interface ActionsProps {
   /** Array of Actions to be rendered */

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/Buttons/Button/Button.tsx

@@ -9,7 +9,7 @@ import type {
   ContextButtonProps,
   NavigationButtonProps,
 } from './Button.model';
-import classes from './Button.scss';
+import classes from './Button.module.scss';
 
 const ButtonElement: React.ForwardRefRenderFunction<
   HTMLButtonElement | HTMLAnchorElement,

package/src/components/Buttons/CompositeButton/CompositeButton.tsx

@@ -9,7 +9,7 @@ import type {
   CompositeJsButtonProps,
   CompositeNavigationButtonProps,
 } from './CompositeButton.model';
-import classes from './CompositeButton.scss';
+import classes from './CompositeButton.module.scss';
 
 /**
  * Button which can render an text together with an icon.

package/src/components/Buttons/TextButton/TextButton.tsx

@@ -8,7 +8,7 @@ import type {
   TextContextButtonProps,
   TextNavigationButtonProps,
 } from './TextButton.model';
-import classes from './TextButton.scss';
+import classes from './TextButton.module.scss';
 
 /**
  * Button which can render a text string.

package/src/components/ConfirmDialog/ConfirmDialog.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
-import classes from '../../../.storybook/static/css/confirm-dialog.scss';
+import classes from '../../../.storybook/static/css/confirm-dialog.module.scss';
 import { useExpand } from '../../hooks/useExpand/useExpand';
 import { Icons } from '../Icons/Icons';
 import { IconName } from '../Icons/Icons.models';

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -8,7 +8,7 @@ import type {
   ConfirmationMode,
   ConfirmationPlacement,
 } from './ConfirmDialog.models';
-import classes from './ConfirmDialog.scss';
+import classes from './ConfirmDialog.module.scss';
 
 // Popper needs useState not useRef to know when the state of the component changes. More info here: https://www.youtube.com/watch?v=cIUfTktVZRM
 interface useConfirmationDelayProps {

package/src/components/DateTime/DatePicker/DatePicker.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import Calendar from 'react-calendar';
 import { noop } from '../../../helpers/utils';
 import { IconName, Icons } from '../../Icons';
-import classes from './DatePicker.scss';
+import classes from './DatePicker.module.scss';
 
 export interface DatePickerProps {
   /** Current Value */

package/src/components/DateTime/DateTimePicker.tsx

@@ -3,7 +3,7 @@ import { DateTime } from 'luxon';
 import React, { useState } from 'react';
 import { noop } from '../../helpers/utils';
 import { DatePicker } from './DatePicker/DatePicker';
-import classes from './DateTimePicker.scss';
+import classes from './DateTimePicker.module.scss';
 import { TimePicker } from './TimePicker/TimePicker';
 
 export interface DateTimePickerProps {

package/src/components/DateTime/TimePicker/ScrollColumn/ScrollColumn.tsx

@@ -8,7 +8,7 @@ import React, {
 } from 'react';
 import { noop } from '../../../../helpers/utils';
 import { IconName, Icons } from '../../../Icons';
-import classes from './ScrollColumn.scss';
+import classes from './ScrollColumn.module.scss';
 
 export interface ScrollColumnProps<T> {
   /** Array of options to  select from */

package/src/components/DateTime/TimePicker/TimePicker.tsx

@@ -2,7 +2,7 @@ import type { DateTime } from 'luxon';
 import React, { useState } from 'react';
 import { noop } from '../../../helpers/utils';
 import { ScrollColumn } from './ScrollColumn/ScrollColumn';
-import classes from './TimePicker.scss';
+import classes from './TimePicker.module.scss';
 
 export interface TimePickerProps {
   /** Current value  */

package/src/components/DynamicDataList/DynamicDataList.tsx

@@ -14,7 +14,7 @@ import { uuid } from '../../utils/GenerateId';
 import type { ActionData } from '../Actions';
 import type { ObjectSchemaDefinition } from '../FormStation';
 import type { DynamicListColumn } from './DynamicDataList.model';
-import classes from './DynamicDataList.scss';
+import classes from './DynamicDataList.module.scss';
 import {
   DynamicListDataEntry,
   DynamicListDataEntryMode,

package/src/components/DynamicDataList/DynamicListDataEntry/DynamicListDataEntry.tsx

@@ -14,7 +14,7 @@ import { Button, ButtonContext } from '../../Buttons';
 import type { ObjectSchemaDefinition } from '../../FormStation';
 import { IconName, Icons } from '../../Icons';
 import type { DynamicListColumn } from '../DynamicDataList.model';
-import classes from './DynamicListDataEntry.scss';
+import classes from './DynamicListDataEntry.module.scss';
 
 export enum DynamicListDataEntryMode {
   Add,

package/src/components/DynamicDataList/DynamicListDataEntry/Renderers/createInputRenderer/createInputRenderer.tsx

@@ -2,7 +2,7 @@ import React, { type ChangeEvent } from 'react';
 import type { DynamicListDataEntryRenderer } from '../../../../DynamicDataList/DynamicDataList.model';
 import { SingleLineText } from '../../../../FormElements';
 import type { CreateInputRendererConfig } from '../renderers.model';
-import classes from './createInputRenderer.scss';
+import classes from './createInputRenderer.module.scss';
 
 /**
  * Creates a simple component that can be used as an input field

package/src/components/DynamicDataList/DynamicListDataEntry/Renderers/createSelectRenderer/createSelectRenderer.tsx

@@ -2,7 +2,7 @@ import React, { type ChangeEvent } from 'react';
 import type { DynamicListDataEntryRenderer } from '../../../../DynamicDataList/DynamicDataList.model';
 import { Select } from '../../../../FormElements';
 import type { CreateSelectRendererConfig } from '../renderers.model';
-import classes from './createSelectRenderer.scss';
+import classes from './createSelectRenderer.module.scss';
 
 /**
  * Creates a simple component that can be used as an input field

package/src/components/DynamicDataList/DynamicListHeader/DynamicListHeader.tsx

@@ -3,7 +3,7 @@ import React, { type PropsWithChildren } from 'react';
 import { useResize } from '../../../hooks/useResize/useResize';
 import type { Data } from '../../../types/data';
 import type { DynamicListColumn } from '../DynamicDataList.model';
-import classes from './DynamicListHeader.scss';
+import classes from './DynamicListHeader.module.scss';
 
 // TODO: Remove this data type, generic should actually be column type
 export interface DynamicListHeaderProps<T extends Data> {

package/src/components/DynamicDataList/DynamicListRow/DynamicListRow.tsx

@@ -9,7 +9,7 @@ import { Button, ButtonContext } from '../../Buttons';
 import { IconName, Icons } from '../../Icons';
 import { InlineMenu } from '../../InlineMenu';
 import type { DynamicListColumn } from '../DynamicDataList.model';
-import classes from './DynamicListRow.scss';
+import classes from './DynamicListRow.module.scss';
 
 export interface DynamicListRowProps<T extends Data> {
   /** The column definition */

package/src/components/EmptyStation/EmptyStation.tsx

@@ -3,7 +3,7 @@ import React, { type PropsWithChildren } from 'react';
 import { MessageBar, type MessageBarProps } from '../MessageBar';
 import { PageHeader, type PageHeaderProps } from '../PageHeader';
 import type { StationError } from '../models';
-import classes from './EmptyStation.scss';
+import classes from './EmptyStation.module.scss';
 
 export type EmptyStationProps = PageHeaderProps & {
   /** If set, creates a MessageBar component with an 'error' type message */

package/src/components/Explorer/BulkEdit/helpers/FieldWrapper.tsx

@@ -4,7 +4,7 @@ import type { Data } from '../../../../types';
 import { Button, ButtonContext } from '../../../Buttons';
 import { IconName } from '../../../Icons';
 import type { BulkEditFieldConfig } from '../BulkEdit.model';
-import classes from './FieldWrapper.scss';
+import classes from './FieldWrapper.module.scss';
 
 interface FieldWrapperProps {
   name: string;

package/src/components/Explorer/Explorer.tsx

@@ -36,7 +36,7 @@ import type {
   QuickEditConfig,
   QuickEditRegistration,
 } from './Explorer.model';
-import classes from './Explorer.scss';
+import classes from './Explorer.module.scss';
 import { useQuickEdit } from './QuickEdit/useQuickEdit';
 import { useActions } from './helpers/useActions';
 import { useDataProvider } from './helpers/useDataProvider';
@@ -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>