@ssa-ui-kit/core 3.16.4 → 3.19.0

package/dist/components/Breadcrumbs/BreadcrumbMenu.d.ts

@@ -0,0 +1,12 @@
+import { BreadcrumbSibling } from './types';
+export interface BreadcrumbMenuProps {
+    /** Element that opens the menu on hover/click. Must forward a ref. */
+    trigger: React.ReactElement;
+    /** Navigable options shown inside the menu. */
+    items: BreadcrumbSibling[];
+}
+/**
+ * A hover/click popover listing navigable routes. Shared by the collapsed `…`
+ * crumb and, in the route-aware mode, by crumbs that expose sibling routes.
+ */
+export declare const BreadcrumbMenu: ({ trigger, items }: BreadcrumbMenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,23 @@
+import { BreadcrumbsProps } from './types';
+/**
+ * Breadcrumbs — navigational trail of the current page's location.
+ *
+ * Accepts a list of `{ label, to }` items and renders them as react-router
+ * links separated by a chevron, with the current (last) crumb shown as a
+ * non-navigable, emphasised label. When the trail is longer than `maxItems`
+ * it collapses to `first … last`, with the hidden crumbs available from the
+ * `…` menu.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumbs
+ *   maxItems={4}
+ *   items={[
+ *     { label: 'Home', to: '/' },
+ *     { label: 'People', to: '/people' },
+ *     { label: 'Jane Doe' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const Breadcrumbs: ({ items, maxItems, separator, ariaLabel, className, css, }: BreadcrumbsProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;

package/dist/components/Breadcrumbs/index.d.ts

@@ -0,0 +1,5 @@
+export { Breadcrumbs } from './Breadcrumbs';
+export { BreadcrumbMenu } from './BreadcrumbMenu';
+export { useBreadcrumbs, deriveBreadcrumbs } from './useBreadcrumbs';
+export type { BreadcrumbsProps, BreadcrumbItem, BreadcrumbSibling, } from './types';
+export type { UseBreadcrumbsOptions, BreadcrumbRouteHandle, BreadcrumbMatchContext, } from './useBreadcrumbs';

package/dist/components/Breadcrumbs/styles.d.ts

@@ -0,0 +1,9 @@
+export declare const nav: import("@emotion/react").SerializedStyles;
+export declare const list: import("@emotion/react").SerializedStyles;
+export declare const item: import("@emotion/react").SerializedStyles;
+export declare const separator: import("@emotion/react").SerializedStyles;
+export declare const crumbLink: import("@emotion/react").SerializedStyles;
+export declare const crumbText: import("@emotion/react").SerializedStyles;
+export declare const crumbCurrent: import("@emotion/react").SerializedStyles;
+export declare const menu: import("@emotion/react").SerializedStyles;
+export declare const menuItem: import("@emotion/react").SerializedStyles;

package/dist/components/Breadcrumbs/types.d.ts

@@ -0,0 +1,57 @@
+import { Interpolation, Theme } from '@emotion/react';
+import { To } from 'react-router-dom';
+import { CommonProps } from '../../types/emotion';
+/**
+ * A sibling route option shown in a breadcrumb's hover menu.
+ *
+ * Reserved for the route-aware mode (Mode 2): when a crumb carries `siblings`,
+ * the crumb becomes a hover target that reveals these alternative routes.
+ */
+export interface BreadcrumbSibling {
+    label: React.ReactNode;
+    to: To;
+}
+/**
+ * A single breadcrumb entry.
+ *
+ * In the "dummy" mode you build these by hand. In the future route-aware mode
+ * the same shape is produced from the router matches, so the presentational
+ * `Breadcrumbs` component never needs to know which mode produced it.
+ */
+export interface BreadcrumbItem {
+    /** Visible label for the crumb. */
+    label: React.ReactNode;
+    /**
+     * react-router destination. Omit for a non-navigable crumb (e.g. the current
+     * page). When present, the crumb navigates via react-router.
+     */
+    to?: To;
+    /**
+     * Force the "current page" styling (blue, semibold, non-link). When not set,
+     * the last item in the list is treated as current automatically.
+     */
+    isCurrent?: boolean;
+    /** Optional click handler, fired in addition to navigation. */
+    onClick?: () => void;
+    /**
+     * Sibling routes for this crumb. When provided, the crumb reveals a hover
+     * menu offering these alternatives. Populated by the route-aware mode.
+     */
+    siblings?: BreadcrumbSibling[];
+}
+export interface BreadcrumbsProps extends CommonProps {
+    /** Ordered list of crumbs, root first, current page last. */
+    items: BreadcrumbItem[];
+    /**
+     * Collapse the trail into `first … last` once the number of items exceeds
+     * this value. The collapsed middle crumbs are revealed from the `…` menu.
+     * When omitted, the full trail is always shown.
+     */
+    maxItems?: number;
+    /** Custom separator between crumbs. Defaults to a right chevron. */
+    separator?: React.ReactNode;
+    /** Accessible label for the wrapping `nav`. */
+    ariaLabel?: string;
+    /** Custom Emotion styles applied to the wrapping `nav`. */
+    css?: Interpolation<Theme>;
+}

package/dist/components/Breadcrumbs/useBreadcrumbs.d.ts

@@ -0,0 +1,54 @@
+import { RouteObject } from 'react-router-dom';
+import { BreadcrumbItem } from './types';
+/** Context passed to a route's `crumb` resolver function. */
+export interface BreadcrumbMatchContext {
+    params: Record<string, string | undefined>;
+    pathname: string;
+}
+/**
+ * Shape read from a route's `handle` to build its crumb. Attach this to routes
+ * in your `createBrowserRouter` config:
+ *
+ * ```ts
+ * { path: 'people', handle: { crumb: 'People' } as BreadcrumbRouteHandle }
+ * ```
+ */
+export interface BreadcrumbRouteHandle {
+    /** Static label, or a resolver receiving the matched params/pathname. */
+    crumb?: React.ReactNode | ((ctx: BreadcrumbMatchContext) => React.ReactNode);
+    /** Fallback label used when `crumb` is absent (e.g. a page title). */
+    title?: React.ReactNode;
+    /** Explicitly exclude this route from the trail even if it has a title. */
+    hideCrumb?: boolean;
+}
+export interface UseBreadcrumbsOptions {
+    /** The route tree — the same array passed to `createBrowserRouter`. */
+    routes: RouteObject[];
+    /** Path to resolve against. Defaults to the current location. */
+    pathname?: string;
+    /** Attach sibling routes for the hover menu. Defaults to `true`. */
+    includeSiblings?: boolean;
+    /**
+     * Last-resort label resolver, called when a matched route has no
+     * `handle.crumb`/`handle.title`. Return `null`/`undefined` to skip the crumb.
+     */
+    getLabel?: (route: RouteObject, ctx: BreadcrumbMatchContext) => React.ReactNode;
+}
+/**
+ * Pure derivation of breadcrumb items from a route tree and a pathname.
+ * Extracted from the hook so it can be unit-tested without a router.
+ */
+export declare const deriveBreadcrumbs: (routes: RouteObject[], pathname: string, { includeSiblings, getLabel }?: Partial<UseBreadcrumbsOptions>) => BreadcrumbItem[];
+/**
+ * Route-aware breadcrumb builder. Reads the current location, matches it
+ * against your route tree, and returns `BreadcrumbItem[]` ready for
+ * `<Breadcrumbs>`. Labels come from each route's `handle.crumb`/`handle.title`;
+ * sibling routes (other children of a crumb's parent) power the hover menu.
+ *
+ * @example
+ * ```tsx
+ * const items = useBreadcrumbs({ routes });
+ * return <Breadcrumbs items={items} maxItems={4} />;
+ * ```
+ */
+export declare const useBreadcrumbs: ({ routes, pathname, includeSiblings, getLabel, }: UseBreadcrumbsOptions) => BreadcrumbItem[];

package/dist/components/Breadcrumbs/utils.d.ts

@@ -0,0 +1,17 @@
+import { BreadcrumbItem } from './types';
+/** A rendered slot in the trail: either a real crumb or the collapsed `…`. */
+export type BreadcrumbEntry = {
+    type: 'item';
+    item: BreadcrumbItem;
+    index: number;
+} | {
+    type: 'ellipsis';
+    items: BreadcrumbItem[];
+};
+/**
+ * Collapse the trail to `first … last` when it exceeds `maxItems`, per design.
+ * The hidden middle crumbs are returned on the ellipsis entry so they can be
+ * offered from its menu. When `maxItems` is falsy or not exceeded, every item
+ * is returned as-is.
+ */
+export declare const collapseItems: (items: BreadcrumbItem[], maxItems?: number) => BreadcrumbEntry[];

package/dist/components/DatePicker/styles.d.ts

@@ -8,7 +8,7 @@
  * - **`both`** — a standalone selection (or a one-cell range), fully rounded
  */
 export type RangeEdge = 'start' | 'end' | 'both';
-export declare const getCellRadius: (rangeEdge: RangeEdge | undefined, isHighlighted: boolean) => "6px" | "6px 0 0 6px" | "0 6px 6px 0" | "0";
+export declare const getCellRadius: (rangeEdge: RangeEdge | undefined, isHighlighted: boolean) => "6px" | "0" | "6px 0 0 6px" | "0 6px 6px 0";
 /**
  * Works out which edge of a highlighted range a selected cell sits on.
  *

package/dist/components/FileAttachment/FileAttachment.d.ts

@@ -0,0 +1,36 @@
+import { FileAttachmentProps } from './types';
+/**
+ * FileAttachment - Read-only row displaying a single attached/uploading file
+ *
+ * @example
+ * ```tsx
+ * <FileAttachment
+ *   file={{ name: 'Report.pdf', size: 20 * 1024 * 1024 }}
+ *   progress={50}
+ *   onRemove={() => handleRemove(file)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Progress bar look instead of the default percentage text
+ * <FileAttachment
+ *   file={{ name: 'Report.pdf', size: 20 * 1024 * 1024 }}
+ *   progress={50}
+ *   progressDisplay="bar"
+ *   onRemove={() => handleRemove(file)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Omitting `progress` entirely shows just the file size, no progress copy —
+ * // e.g. a file that's been selected but whose upload hasn't started yet.
+ * <FileAttachment
+ *   file={{ name: 'Report.pdf', size: 20 * 1024 * 1024 }}
+ *   onRemove={() => handleRemove(file)}
+ * />
+ * ```
+ */
+declare const FileAttachment: ({ file, size, progress, progressDisplay, uploadingText, uploadedText, showDescription, icon, isDisabled, onRemove, className, css: cssProp, }: FileAttachmentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default FileAttachment;

package/dist/components/FileAttachment/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useFilePreviewUrl } from './useFilePreviewUrl';

package/dist/components/FileAttachment/hooks/useFilePreviewUrl.d.ts

@@ -0,0 +1,2 @@
+/** Creates an object URL for a local File/Blob and revokes it on unmount or when `content` changes, avoiding a memory leak. */
+export declare const useFilePreviewUrl: (content?: File | Blob) => string | undefined;

package/dist/components/FileAttachment/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './FileAttachment';
+export type * from './types';

package/dist/components/FileAttachment/styles.d.ts

@@ -0,0 +1,22 @@
+import { Theme } from '@emotion/react';
+export declare const iconSizeBySize: {
+    large: number;
+    small: number;
+};
+/** Placeholder glyph is inset ~20% on each side of its box in the design (40px box -> 24px glyph). */
+export declare const placeholderIconSizeBySize: {
+    large: number;
+    small: number;
+};
+export declare const container: (theme: Theme, size: "large" | "small") => import("@emotion/react").SerializedStyles;
+export declare const disabledContainer: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const iconWrapper: (size: "large" | "small") => import("@emotion/react").SerializedStyles;
+export declare const placeholderWrapper: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const previewImage: import("@emotion/react").SerializedStyles;
+export declare const textColumn: import("@emotion/react").SerializedStyles;
+export declare const title: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const description: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const dot: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const progressTrack: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const progressFill: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const deleteButton: (theme: Theme) => import("@emotion/react").SerializedStyles;

package/dist/components/FileAttachment/types.d.ts

@@ -0,0 +1,24 @@
+import { Interpolation, Theme } from '@emotion/react';
+import { IconProps } from '../Icon/types';
+export interface FileAttachmentFile {
+    name: string;
+    size: number;
+    /** Local file/blob not yet uploaded — used to render an image preview via an object URL. Ignored for non-image file names. */
+    content?: File | Blob;
+    /** URL of an already-uploaded image, e.g. returned by the backend. Ignored for non-image file names. Takes precedence over `content`. */
+    previewUrl?: string;
+}
+export interface FileAttachmentProps {
+    file: FileAttachmentFile;
+    size?: 'large' | 'small';
+    progress?: number;
+    progressDisplay?: 'text' | 'bar';
+    uploadingText?: string;
+    uploadedText?: string;
+    showDescription?: boolean;
+    icon?: IconProps['name'];
+    isDisabled?: boolean;
+    onRemove?: () => void;
+    className?: string;
+    css?: Interpolation<Theme>;
+}

package/dist/components/FileAttachment/utils.d.ts

@@ -0,0 +1,6 @@
+import { IconProps } from '../Icon/types';
+export declare const formatBytes: (bytes: number) => string;
+/** Returns the file-type icon for a known extension, or `null` when the design's grey Placeholder look should be used instead. */
+export declare const getFileTypeIcon: (fileName: string) => IconProps["name"] | null;
+/** Gates image-preview rendering strictly on the file name's extension, so a pdf/php/etc. is never rendered via `<img>` even if preview data is (incorrectly) supplied for it. */
+export declare const isImageFile: (fileName: string) => boolean;

package/dist/components/FileUpload/FileUpload.d.ts

@@ -4,7 +4,8 @@ import { FileUploadProps } from './types';
  *
  * Supports single and multi-file selection with built-in validation for
  * file formats and size. In multi-file mode, selected files are listed
- * below the input with individual remove controls.
+ * below the input with individual remove controls. Single-file mode can opt
+ * into the same list treatment via `showFileAttachment`.
  *
  * @example
  * ```tsx
@@ -32,6 +33,36 @@ import { FileUploadProps } from './types';
  *   onChange={setFiles}
  * />
  * ```
+ *
+ * @example
+ * ```tsx
+ * // Multi-file with per-file upload progress, driven by the consumer's own
+ * // upload requests — FileUpload only handles local selection, so it has no
+ * // progress data of its own.
+ * <FileUpload
+ *   isMultiFile
+ *   value={files}
+ *   onChange={setFiles}
+ *   uploadProgress={[
+ *     { name: 'report.pdf', progress: 50 },
+ *     { name: 'photo.png', progress: 100 },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Single file, shown as a FileAttachment card below the input (icon,
+ * // size, delete button, image preview) instead of inline text next to the
+ * // button. `uploadProgress` here can just be a single number, since there's
+ * // only ever one file.
+ * <FileUpload
+ *   showFileAttachment
+ *   value={file}
+ *   onChange={(files) => setFile(files[0])}
+ *   uploadProgress={70}
+ * />
+ * ```
  */
-declare const FileUpload: ({ label, placeholder, helperText, actionText, error, disabled, css, className, allowedFormats, maxFileSize, isMultiFile, maxFiles, withDropArea, uploadedSectionTitle, value, onChange, onFileRejected, }: FileUploadProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const FileUpload: ({ label, placeholder, helperText, actionText, error, disabled, css, className, allowedFormats, maxFileSize, isMultiFile, maxFiles, withDropArea, uploadedSectionTitle, uploadProgress, showFileAttachment, value, onChange, onFileRejected, }: FileUploadProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default FileUpload;

package/dist/components/FileUpload/index.d.ts

@@ -1,3 +1,2 @@
 export { default } from './FileUpload';
-export { default as FileUploadItem } from './FileUploadItem';
-export type { FileUploadProps, FileRejectionReason } from './types';
+export type { FileUploadProps, FileRejectionReason, FileUploadProgress, FileUploadProgressEntry, } from './types';

package/dist/components/FileUpload/styles.d.ts

@@ -16,9 +16,3 @@ export declare const dropAreaAction: (theme: Theme) => import("@emotion/react").
 export declare const dropAreaClearButton: (theme: Theme) => import("@emotion/react").SerializedStyles;
 export declare const filesList: import("@emotion/react").SerializedStyles;
 export declare const filesListTitle: (theme: Theme) => import("@emotion/react").SerializedStyles;
-export declare const fileItem: (theme: Theme) => import("@emotion/react").SerializedStyles;
-export declare const fileIconWrapper: import("@emotion/react").SerializedStyles;
-export declare const fileInfo: import("@emotion/react").SerializedStyles;
-export declare const fileName: (theme: Theme) => import("@emotion/react").SerializedStyles;
-export declare const fileSize: (theme: Theme) => import("@emotion/react").SerializedStyles;
-export declare const deleteButton: (theme: Theme) => import("@emotion/react").SerializedStyles;

package/dist/components/FileUpload/types.d.ts

@@ -1,5 +1,11 @@
 import { Interpolation, Theme } from '@emotion/react';
 export type FileRejectionReason = 'size' | 'format';
+export interface FileUploadProgressEntry {
+    name: string;
+    progress: number;
+}
+/** A single percentage applies to every listed file uniformly; a list matches per-file by `name` — files with no matching entry show no progress. */
+export type FileUploadProgress = number | FileUploadProgressEntry[];
 export interface FileUploadProps {
     label?: string;
     placeholder?: string;
@@ -14,6 +20,10 @@ export interface FileUploadProps {
     maxFiles?: number;
     withDropArea?: boolean;
     uploadedSectionTitle?: string;
+    /** Upload progress for files in the multi-file list (`isMultiFile`). FileUpload only handles local selection, not the network upload itself — pass this in as the consumer's own upload reports progress. Files with no corresponding progress show just their size. */
+    uploadProgress?: FileUploadProgress;
+    /** Single-file mode only (`!isMultiFile`, ignored when `withDropArea` is set — its own selected-file view already covers this): show the selected file as a `FileAttachment` card below the input, instead of inline text next to the button. The input row then always shows `placeholder`, matching how multi-file mode behaves. */
+    showFileAttachment?: boolean;
     className?: string;
     value?: File | File[];
     onChange?: (files: File[]) => void;

package/dist/components/index.d.ts

@@ -2,6 +2,7 @@ export { default as Button } from './Button';
 export type * from './Button/types';
 export * from './ButtonGroup';
 export * from './IconButton';
+export * from './Breadcrumbs';
 export { default as Checkbox } from './Checkbox';
 export * from './Checkbox';
 export type * from './Checkbox/types';
@@ -41,8 +42,9 @@ export * from './ColorPicker';
 export * from './SearchBox';
 export type * from './SearchBox/types';
 export { default as FileUpload } from './FileUpload';
-export { FileUploadItem } from './FileUpload';
 export type * from './FileUpload/types';
+export { default as FileAttachment } from './FileAttachment';
+export type * from './FileAttachment/types';
 export * from './Field';
 export { default as Form } from './Form';
 export { default as FormAction } from './FormAction';