@getsoren/design-system 4.65.0 → 4.67.0

package/dist/src/components/DataDisplay/Icons/RefreshIcon.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from '@mui/material/SvgIcon';
+declare const RefreshIcon: (props: SvgIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default RefreshIcon;

package/dist/src/components/DataDisplay/Icons/StorefrontIcon.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from '@mui/material/SvgIcon';
+declare const StorefrontIcon: (props: SvgIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default StorefrontIcon;

package/dist/src/components/DataDisplay/LogoAvatar/LogoAvatar.d.ts

@@ -0,0 +1,15 @@
+import { SxProps, Theme } from '@mui/material';
+import { ReactNode } from 'react';
+export interface LogoAvatarProps {
+    src?: string | null;
+    alt?: string;
+    size?: number;
+    fallbackIcon?: ReactNode;
+    sx?: SxProps<Theme>;
+}
+/**
+ * Rounded square avatar for an entity logo (supplier, agency, brand…). Falls back to a storefront
+ * icon when the logo is missing or broken; pass `fallbackIcon` for other entity kinds.
+ */
+declare const LogoAvatar: ({ src, alt, size, sx, fallbackIcon }: LogoAvatarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default LogoAvatar;

package/dist/src/components/DataDisplay/NumberBadge/NumberBadge.d.ts

@@ -0,0 +1,17 @@
+import { SxProps, Theme } from '@mui/material';
+import { ReactNode } from 'react';
+export interface NumberBadgeProps {
+    children: ReactNode;
+    /** Palette key driving the fill (`<color>.main`) and the text (`<color>.contrastText`) */
+    color?: "primary" | "secondary" | "error" | "info" | "success" | "warning";
+    /** Injected by MapView from the marker `size` when used as a marker IconComponent */
+    width?: number;
+    height?: number;
+    sx?: SxProps<Theme>;
+}
+/**
+ * Standalone numbered disc badge. Made to identify the same item across two surfaces —
+ * e.g. a card in a list and its marker on a map — at a glance.
+ */
+declare const NumberBadge: ({ children, color, width, height, sx }: NumberBadgeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default NumberBadge;

package/dist/src/components/Feedback/Dialog/DialogCloseIcon/DialogCloseIcon.d.ts

@@ -1,7 +1,12 @@
+import { SxProps, Theme } from '@mui/material';
 import { MouseEvent } from 'react';
 export interface DialogCloseProps {
     onClick?: (e: MouseEvent) => void;
     position?: "absolute" | "relative";
+    sx?: SxProps<Theme>;
 }
-declare const DialogCloseIcon: ({ onClick, position }: DialogCloseProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * Dialog close button: permanent grey outline, icon and hairline reinforced on hover.
+ */
+declare const DialogCloseIcon: ({ onClick, position, sx }: DialogCloseProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default DialogCloseIcon;

package/dist/src/components/Feedback/Dialog/DialogForm/DialogForm.d.ts

@@ -0,0 +1,11 @@
+import { BoxProps } from '@mui/material';
+export type DialogFormProps = Omit<BoxProps<"form">, "component">;
+/**
+ * Form wrapper for a Dialog's children: restores the Paper's flex column that a plain <form>
+ * breaks. Without it the whole paper scrolls (title and close button included) instead of the
+ * DialogContent, and the actions bar leaves the viewport.
+ * Use it whenever a form element must sit between the Dialog and its DialogContent/DialogActions
+ * (e.g. form libraries owning the submit).
+ */
+declare const DialogForm: ({ sx, ...props }: DialogFormProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default DialogForm;

package/dist/src/components/Feedback/ErrorState/ErrorState.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+export interface ErrorStateProps {
+    /** Shows the brand logo above the message (full-page crash screens) */
+    fullPage?: boolean;
+    /** Reload/retry callback — the host app owns the navigation strategy */
+    onReload?: () => void;
+    title?: ReactNode;
+    description?: ReactNode;
+    actionLabel?: ReactNode;
+}
+/**
+ * Error screen counterpart of EmptyState: headline, hairline divider and a reload action.
+ * Router-agnostic — the reload behaviour comes from `onReload`.
+ */
+declare const ErrorState: ({ fullPage, onReload, title, description, actionLabel }: ErrorStateProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default ErrorState;

package/dist/src/components/Inputs/ApiAutocomplete/ApiAutocomplete.d.ts

@@ -0,0 +1,90 @@
+import { AutocompleteChangeReason, AutocompleteProps, AutocompleteRenderGroupParams, AutocompleteRenderOptionState, PopperProps, SxProps, TextFieldProps } from '@mui/material';
+import { HTMLAttributes, JSXElementConstructor, KeyboardEvent, ReactNode, Ref, SyntheticEvent } from 'react';
+interface ActionEndOption {
+    label?: ReactNode;
+    onClick?: () => void;
+    value?: unknown;
+    isActionEndOption?: boolean;
+}
+export interface ApiAutocompleteProps<Value, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false> {
+    /**
+     * Action added in and of options
+     */
+    actionEndOption?: ActionEndOption;
+    /** Replaces the default dropdown caret (e.g. a switcher's up/down chevrons). */
+    popupIcon?: ReactNode;
+    limitTags?: number;
+    defaultValue?: Value;
+    value?: Multiple extends true ? Value[] | null : Value | null;
+    label?: string;
+    placeholder?: string;
+    name?: string;
+    keyOptionLabel: string | string[];
+    noOptionsText?: ReactNode;
+    getOptionLabel?: (option: Value) => string;
+    renderOption?: (props: HTMLAttributes<HTMLLIElement>, option: Value & ActionEndOption, state: AutocompleteRenderOptionState) => ReactNode;
+    searchKey?: string;
+    required?: boolean;
+    queryParams?: Record<string, unknown>;
+    queryParamsOnFocus?: Record<string, unknown>;
+    queryOptions?: Record<string, unknown>;
+    helperMessage?: string | false;
+    disabled?: boolean;
+    disableClearable?: DisableClearable;
+    width?: number | string;
+    sx?: SxProps;
+    error?: boolean;
+    openOnFocus?: boolean;
+    autoHighlight?: boolean;
+    getOptionKey?: (option: Value) => string;
+    size?: AutocompleteProps<Value, false, false, false>["size"];
+    renderInput?: AutocompleteProps<Value, false, false, false>["renderInput"];
+    InputProps?: TextFieldProps["InputProps"];
+    setSelectedValue?: (value: Multiple extends true ? Value[] | null : Value | null) => void;
+    shrink?: boolean;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    variant?: "standard" | "outlined" | "filled";
+    endAdornment?: ReactNode;
+    /** Hide the circular loader shown in the input while fetching; the listbox loading state is unaffected. */
+    disableInputLoader?: boolean;
+    fetchOnFocus?: boolean;
+    filterOptions?: (options: Value[], state: {
+        inputValue: string;
+    }) => Value[];
+    groupBy?: (option: Value) => string;
+    slotProps?: AutocompleteProps<Value, false, false, false>["slotProps"];
+    inputSlotProps?: TextFieldProps["slotProps"];
+    disableCloseOnSelect?: boolean;
+    PopperComponent?: JSXElementConstructor<PopperProps>;
+    ListboxProps?: AutocompleteProps<Value, false, false, false>["ListboxProps"];
+    renderGroup?: (params: AutocompleteRenderGroupParams) => ReactNode;
+    filterSelectedOptions?: boolean;
+    inputRef?: Ref<HTMLInputElement>;
+    multiple?: Multiple;
+    open?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    blurOnSelect?: "touch" | "mouse" | true | false;
+    autoFocus?: boolean;
+    onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;
+    onNoResults?: (search: string) => void;
+    /** Resolves the option `image` field to a displayable URL (e.g. a CDN path adapter). Identity by default. */
+    getOptionImageSrc?: (imagePath: string) => string | undefined;
+    onChange?(event: SyntheticEvent, value: Value | Value[] | null, reason: AutocompleteChangeReason): void;
+    /**
+     * Injected query hook. Structurally typed so any data layer fits (react-query hooks match as-is)
+     * without making the library depend on one.
+     */
+    useQuery(params?: Record<string, unknown>, options?: {
+        query: {
+            enabled: boolean;
+        };
+    }): {
+        data?: Value[];
+        isFetching: boolean;
+        refetch: (refetchOptions?: Record<string, unknown>) => Promise<unknown>;
+    };
+}
+declare const ApiAutocomplete: <Value extends Record<string | symbol, any>>({ actionEndOption, popupIcon, blurOnSelect, label, placeholder, name, slotProps, disableClearable, setSelectedValue, useQuery, noOptionsText, renderOption, getOptionLabel: getOptionLabelProp, keyOptionLabel, queryParams, openOnFocus, autoHighlight, queryParamsOnFocus, queryOptions, required, helperMessage, error, disabled, defaultValue, onFocus, onBlur, onChange, sx, renderInput, variant, InputProps, size, shrink, getOptionKey, width, limitTags, groupBy, disableCloseOnSelect, renderGroup, value, PopperComponent, ListboxProps, multiple, filterSelectedOptions, autoFocus, onKeyDown, onNoResults, endAdornment, inputSlotProps, inputRef, open, onOpen, onClose, searchKey, disableInputLoader, fetchOnFocus, filterOptions, getOptionImageSrc, }: ApiAutocompleteProps<Value>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default ApiAutocomplete;

package/dist/src/components/Layout/PageHeader/PageHeader.d.ts

@@ -0,0 +1,24 @@
+import { Breakpoint, SxProps } from '@mui/material';
+import { PropsWithChildren, ReactNode } from 'react';
+export type ResponsiveStyleValue<T> = T | Array<T | null> | {
+    [key: string]: T | null;
+};
+export interface PageHeaderProps extends PropsWithChildren {
+    title?: ReactNode;
+    children?: ReactNode;
+    maxWidth?: Breakpoint | false;
+    sx?: SxProps;
+    RightContent?: ReactNode;
+    LeftContent?: ReactNode;
+    marginBottom?: number;
+    disableDivider?: boolean;
+    direction?: ResponsiveStyleValue<"row" | "row-reverse" | "column" | "column-reverse">;
+    alignItems?: ResponsiveStyleValue<"flex-start" | "center" | "flex-end" | "stretch" | "baseline">;
+}
+/**
+ * Page header block: title, optional side slots and filters as children.
+ * The title block's vertical padding is asymmetric on purpose: a page title belongs to the content
+ * below it, so it sits closer to that content than to the app bar above.
+ */
+declare const PageHeader: ({ title, children, sx, RightContent, LeftContent, disableDivider, alignItems, direction, marginBottom, maxWidth, }: PageHeaderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default PageHeader;

package/dist/src/config/theme.d.ts

@@ -15,6 +15,9 @@ declare module "@mui/material/Button" {
     interface ButtonPropsColorOverrides {
         contrast: true;
     }
+    interface ButtonPropsSizeOverrides {
+        xSmall: true;
+    }
     interface ButtonPropsVariantOverrides {
         dashed: true;
         "dashed-rounded": true;
@@ -38,6 +41,16 @@ declare module "@mui/material/Dialog" {
         backgroundColor?: "primary" | "secondary" | string;
     }
 }
+declare module "@mui/material/DialogActions" {
+    interface DialogActionsProps {
+        /**
+         * "sticky": the buttons stay reachable when the dialog scrolls (engages only on overflow, so
+         * short dialogs render as before). "sticky-flat": same without the hairline, for small
+         * confirmation dialogs where the line separates nothing.
+         */
+        variant?: "sticky" | "sticky-flat";
+    }
+}
 declare module "@mui/material/FormControlLabel" {
     interface FormControlLabelProps {
         variant?: "card";

package/dist/src/locales/en.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
+    anErrorOccurred: string;
     apply: string;
     clear: string;
     clickToUpload: string;
@@ -11,9 +12,12 @@ declare const _default: {
     files: string;
     month: string;
     noResult: string;
+    oops: string;
     open: string;
     openFullPage: string;
     openFullScreen: string;
+    orDragAndDrop: string;
+    reload: string;
     reset: string;
     selectAll: string;
     today: string;

package/dist/src/locales/fr.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
+    anErrorOccurred: string;
     apply: string;
     clear: string;
     clickToUpload: string;
@@ -11,9 +12,12 @@ declare const _default: {
     files: string;
     month: string;
     noResult: string;
+    oops: string;
     open: string;
     openFullPage: string;
     openFullScreen: string;
+    orDragAndDrop: string;
+    reload: string;
     reset: string;
     selectAll: string;
     today: string;

package/dist/src/main.d.ts

@@ -33,6 +33,11 @@ export * from './components/DataDisplay/ListItemCard';
 export { default as ListItemCard } from './components/DataDisplay/ListItemCard';
 export * from './components/DataDisplay/Logo';
 export { default as Logo } from './components/DataDisplay/Logo';
+export type { LogoAvatarProps } from './components/DataDisplay/LogoAvatar/LogoAvatar';
+export * from './components/DataDisplay/LogoAvatar/LogoAvatar';
+export { default as LogoAvatar } from './components/DataDisplay/LogoAvatar/LogoAvatar';
+export * from './components/DataDisplay/NumberBadge/NumberBadge';
+export { default as NumberBadge } from './components/DataDisplay/NumberBadge/NumberBadge';
 export { default as PlanningTimeline } from './components/DataDisplay/PlanningTimeline/PlanningTimeline';
 export * from './components/DataDisplay/PlanningTimeline/types';
 export * from './components/DataDisplay/StatusIcon';
@@ -43,16 +48,22 @@ export * from './components/DataDisplay/TypographySkeleton';
 export { default as TypographySkeleton } from './components/DataDisplay/TypographySkeleton';
 export * from './components/Feedback/Dialog/DialogCloseIcon';
 export { default as DialogCloseIcon } from './components/Feedback/Dialog/DialogCloseIcon';
+export * from './components/Feedback/Dialog/DialogForm/DialogForm';
+export { default as DialogForm } from './components/Feedback/Dialog/DialogForm/DialogForm';
 export * from './components/Feedback/Dialog/DialogPopper';
 export { default as DialogPopper } from './components/Feedback/Dialog/DialogPopper';
 export * from './components/Feedback/Dialog/DialogValidation/DialogValidation';
 export { default as DialogValidation } from './components/Feedback/Dialog/DialogValidation/DialogValidation';
 export type { EmptyStateProps } from './components/Feedback/EmptyState/EmptyState';
 export { default as EmptyState } from './components/Feedback/EmptyState/EmptyState';
+export * from './components/Feedback/ErrorState/ErrorState';
+export { default as ErrorState } from './components/Feedback/ErrorState/ErrorState';
 export * from './components/Feedback/Lightbox';
 export { default as Lightbox } from './components/Feedback/Lightbox';
 export * from './components/Inputs/ActionAppBar';
 export { default as ActionAppBar } from './components/Inputs/ActionAppBar';
+export * from './components/Inputs/ApiAutocomplete/ApiAutocomplete';
+export { default as ApiAutocomplete } from './components/Inputs/ApiAutocomplete/ApiAutocomplete';
 export * from './components/Inputs/AutocompleteFilter';
 export { default as AutocompleteFilter } from './components/Inputs/AutocompleteFilter';
 export type { ButtonProps } from './components/Inputs/Button';
@@ -75,6 +86,8 @@ export * from './components/Layout/Backoffice';
 export { default as Backoffice } from './components/Layout/Backoffice';
 export { default as CollapsingHeader } from './components/Layout/CollapsingHeader/CollapsingHeader';
 export * from './components/Layout/CollapsingHeader/types';
+export * from './components/Layout/PageHeader/PageHeader';
+export { default as PageHeader } from './components/Layout/PageHeader/PageHeader';
 export * from './components/Navigation/NavigationMenu/NavigationMenu';
 export { default as NavigationMenu } from './components/Navigation/NavigationMenu/NavigationMenu';
 export * from './components/Navigation/TabPanel';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@getsoren/design-system",
   "description": "Design System React library",
   "sideEffects": false,
-  "version": "4.65.0",
+  "version": "4.67.0",
   "license": "ISC",
   "type": "module",
   "types": "./dist/src/main.d.ts",