@ssa-ui-kit/core 3.24.1 → 3.25.1

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

@@ -0,0 +1,104 @@
+import { HTMLAttributes, ReactElement, ReactNode } from 'react';
+import type { MapIconsType } from '../Icon/types';
+/**
+ * Header size. Sets the bar height — 64px, 84px or 92px — and the logo box.
+ */
+export type HeaderSize = 'small' | 'medium' | 'large';
+/**
+ * Header color scheme: white bar, or the dark graphite gradient.
+ */
+export type HeaderTheme = 'light' | 'dark';
+/**
+ * One entry of the Header navigation.
+ *
+ * A leaf item with a `path` renders as a router link. An item with `children`
+ * is a group: on desktop it opens a dropdown (hover with a mouse, tap on touch
+ * screens), in the mobile menu it expands in place. Groups nest two levels
+ * deep at most — the third level is not rendered.
+ *
+ * @example
+ * ```tsx
+ * const items: HeaderNavItem[] = [
+ *   { id: 'home', label: 'Home', path: '/' },
+ *   {
+ *     id: 'people',
+ *     label: 'People',
+ *     children: [
+ *       { id: 'employees', label: 'Employees', path: '/people/employees' },
+ *       { id: 'vacancies', label: 'Vacancies', path: '/people/vacancies' },
+ *     ],
+ *   },
+ * ];
+ * ```
+ */
+export interface HeaderNavItem {
+    /** Unique key of the item within its level */
+    id: string;
+    /** Visible label */
+    label: ReactNode;
+    /**
+     * Leading icon — a kit icon name, or an element rendered as-is. A string is
+     * always read as an icon name; wrap anything else (an emoji, text) in an
+     * element. Shown in the mobile menu and before the label on desktop.
+     */
+    icon?: keyof MapIconsType | ReactElement;
+    /**
+     * Route the item links to. Ignored on group items (those with `children`),
+     * which only open their submenu; a group is highlighted when any of its
+     * descendants matches the current location.
+     */
+    path?: string;
+    /** Renders the item greyed out and not interactive */
+    disabled?: boolean;
+    /** Submenu items; makes this item a group */
+    children?: HeaderNavItem[];
+}
+/**
+ * Props for the Header component.
+ *
+ * @example
+ * ```tsx
+ * <Header
+ *   logo={<img src="/logo.svg" alt="Acme" />}
+ *   items={items}
+ *   rightSide={<UserProfile {...profile} />}
+ * />
+ * ```
+ */
+export interface HeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /**
+     * Project logo, placed in a box of fixed height. Leave it out and the box
+     * stays empty, so the layout does not shift between apps with and without
+     * a logo.
+     */
+    logo?: ReactNode;
+    /** Navigation items. Rendered centred; scrolls sideways when it overflows. */
+    items?: HeaderNavItem[];
+    /**
+     * Right-hand content — user profile, notifications, log out, whatever the
+     * app needs. Rendered as-is on every screen size.
+     */
+    rightSide?: ReactNode;
+    /**
+     * Color scheme of the bar and its menus. Named after the kit's other
+     * light/dark components (TreeView, CollapsibleNavBar) — not the Emotion
+     * theme.
+     * @default 'light'
+     */
+    theme?: HeaderTheme;
+    /**
+     * Bar height and logo size
+     * @default 'small'
+     */
+    size?: HeaderSize;
+    /**
+     * Accessible name of the navigation landmark
+     * @default 'Main'
+     */
+    navLabel?: string;
+    /**
+     * Accessible name of the burger button shown below 900px
+     * @default 'Open menu'
+     */
+    menuButtonLabel?: string;
+}

package/dist/components/MultipleDropdown/MultipleDropdown.d.ts

@@ -68,7 +68,10 @@ import { DropdownProps } from './types';
  *
  * @accessibility
  * - ARIA attributes set according to WAI-ARIA combobox pattern
- * - Keyboard navigation (Arrow keys, Enter, Escape)
+ * - Focus stays on the toggle, which points at the highlighted option with
+ *   `aria-activedescendant`
+ * - Arrow keys, Home and End move the highlight; Enter or Space toggles it
+ *   (picks and closes in single-select mode); Escape and Tab close
  * - Click outside to close
  * - Screen reader friendly with aria-expanded and aria-controls
  *

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

@@ -119,4 +119,12 @@ export interface DropdownContextType<T extends DropdownOptionProps> {
      * Max height (px) of the options list
      */
     maxHeight?: number;
+    /**
+     * Highlighted option, driven by the toggle's keyboard and the pointer
+     */
+    activeValue?: string | number | null;
+    /**
+     * Updates the highlighted option
+     */
+    setActiveValue?: (value: string | number | null) => void;
 }

package/dist/components/MultipleDropdownOptions/MultipleDropdownOptions.d.ts

@@ -1,3 +1,30 @@
 import { DropdownItemsListProps } from './types';
+/**
+ * MultipleDropdownOptions - Options menu container for MultipleDropdown
+ *
+ * Renders the `DropdownOption` children as a `ContextMenu` under the
+ * MultipleDropdown toggle: a checkbox per row in multi-select mode, a check
+ * mark on the selected row otherwise. Focus stays on the toggle; the
+ * highlighted option is driven from there and announced through
+ * `aria-activedescendant`.
+ *
+ * @category Form Controls
+ * @subcategory Selection
+ *
+ * @example
+ * ```tsx
+ * // Rendered by MultipleDropdown from its DropdownOption children
+ * <MultipleDropdown label="Fruits" onChange={handleChange}>
+ *   <DropdownOption value="apple">Apple</DropdownOption>
+ *   <DropdownOption value="banana">Banana</DropdownOption>
+ * </MultipleDropdown>
+ * ```
+ *
+ * @see {@link MultipleDropdown} - Parent component
+ *
+ * @accessibility
+ * - Uses role="listbox" (multi-selectable in multi-select mode) with role="option" rows
+ * - Arrow keys, Home, End, Enter, Space and Escape on the toggle
+ */
 declare const MultipleDropdownOptions: ({ "aria-labelledby": ariaLabelledbyNative, ariaLabelledby, id, children, }: DropdownItemsListProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default MultipleDropdownOptions;

package/dist/components/Table/ColumnFreezeMenu.d.ts

@@ -27,6 +27,8 @@ import { ColumnFreezeMenuProps } from './types';
  *
  * @accessibility
  * - The trigger is a labelled button, reachable by keyboard even while hidden
+ * - Opening moves focus into the menu (`role="menu"`): arrows, Home, End and
+ *   type-to-find move the highlight, Enter or Space picks, Escape closes
  * - Clicks inside the menu do not reach the header cell, so they never sort
  */
 export declare const ColumnFreezeMenu: ({ columnId }: ColumnFreezeMenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Typeahead/Typeahead.context.d.ts

@@ -24,8 +24,16 @@ export declare const TypeaheadContext: React.Context<{
     status: "error" | "success" | "basic";
     error: import("react-hook-form").FieldError | import("react-hook-form").Merge<import("react-hook-form").FieldError, import("react-hook-form").FieldErrorsImpl<any>> | undefined;
     placeholder: string | null | undefined;
-    options: (React.ReactElement<any, string | React.JSXElementConstructor<any>> | null)[];
+    listId: string;
+    menuItems: import("..").ContextMenuItem<import("./types").TypeaheadValue>[];
+    activeValue: import("./types").TypeaheadValue | null;
+    setActiveValue: React.Dispatch<React.SetStateAction<import("./types").TypeaheadValue | null>>;
+    inputAriaProps: {
+        'aria-controls': string | undefined;
+        'aria-activedescendant': string | undefined;
+    };
     customOptionValue: string | null;
+    handleOptionAction: (value: import("./types").TypeaheadValue) => void;
     handleChange: ({ value, shouldClose, resetInput, }: {
         value?: string | number;
         shouldClose?: boolean;

package/dist/components/Typeahead/components/TypeaheadOptions.d.ts

@@ -1,2 +1,14 @@
 import { TypeaheadItemsListProps } from '../types';
-export declare const TypeaheadOptions: ({ noItemsMessage, children, }: TypeaheadItemsListProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * TypeaheadOptions - The Typeahead's option list: a `ContextMenu` driven from
+ * the Typeahead's input. The options themselves come from the `TypeaheadOption`
+ * children of `Typeahead`, filtered by the typed text. Rendered by
+ * `Typeahead` itself; reads everything from the Typeahead context.
+ *
+ * @example
+ * ```tsx
+ * // Inside a Typeahead's popup
+ * <TypeaheadOptions noItemsMessage="Nobody matches" />
+ * ```
+ */
+export declare const TypeaheadOptions: ({ noItemsMessage, className, }: TypeaheadItemsListProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -75,3 +75,8 @@ export declare const TypeaheadTrigger: import("@emotion/styled").StyledComponent
     isOpen: boolean;
     status: ReturnType<typeof useTypeahead>["status"];
 }, {}, {}>;
+/** A user-typed value that is not one of the options. */
+export declare const CustomValueLabel: import("@emotion/styled").StyledComponent<{
+    theme?: Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

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

@@ -219,6 +219,12 @@ export type UseTypeaheadProps = Pick<TypeaheadProps, 'selectedItems' | 'defaultS
  * Props for TypeaheadOptions container component
  */
 export interface TypeaheadItemsListProps extends CommonProps {
+    /**
+     * Ignored: the options come from the `TypeaheadOption` children of
+     * `Typeahead`, through context.
+     *
+     * @deprecated Has no effect. Removed in the next major release.
+     */
     children?: React.ReactNode;
     noItemsMessage?: string;
 }

package/dist/components/Typeahead/useTypeahead.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { OpenChangeReason } from '@floating-ui/react';
+import { ContextMenuItem } from '../ContextMenu';
 import { TypeaheadOptionProps, TypeaheadValue, UseTypeaheadProps } from './types';
 type HandleChangeParams = {
     value?: string | number;
@@ -29,8 +30,16 @@ export declare const useTypeahead: ({ name, isOpen: isInitOpen, selectedItems: p
     status: "error" | "success" | "basic";
     error: import("react-hook-form").FieldError | import("react-hook-form").Merge<import("react-hook-form").FieldError, import("react-hook-form").FieldErrorsImpl<any>> | undefined;
     placeholder: string | null | undefined;
-    options: (React.ReactElement<any, string | React.JSXElementConstructor<any>> | null)[];
+    listId: string;
+    menuItems: ContextMenuItem<TypeaheadValue>[];
+    activeValue: TypeaheadValue | null;
+    setActiveValue: React.Dispatch<React.SetStateAction<TypeaheadValue | null>>;
+    inputAriaProps: {
+        'aria-controls': string | undefined;
+        'aria-activedescendant': string | undefined;
+    };
     customOptionValue: string | null;
+    handleOptionAction: (value: TypeaheadValue) => void;
     handleChange: ({ value, shouldClose, resetInput, }: HandleChangeParams) => void;
     useFormResult: import("react-hook-form").UseFormReturn<import("react-hook-form").FieldValues, any, import("react-hook-form").FieldValues>;
     register: import("react-hook-form").UseFormRegister<import("react-hook-form").FieldValues>;

package/dist/components/index.d.ts

@@ -2,6 +2,8 @@ export { default as Button } from './Button';
 export type * from './Button/types';
 export * from './ButtonGroup';
 export * from './IconButton';
+export * from './FloatingActionButton';
+export type * from './FloatingActionButton/types';
 export * from './Breadcrumbs';
 export { default as Checkbox } from './Checkbox';
 export * from './Checkbox';
@@ -23,6 +25,8 @@ export { default as Radio } from './Radio';
 export type { RadioProps } from './Radio/types';
 export { default as RadioGroup } from './RadioGroup';
 export type * from './RadioGroup/types';
+export * from './ContextMenu';
+export type * from './ContextMenu/types';
 export { default as Dropdown } from './Dropdown';
 export type * from './Dropdown/types';
 export { default as DropdownArrow } from './DropdownArrow';
@@ -115,6 +119,8 @@ export type * from './ResponsiveImage/types';
 export { default as NavBar } from './NavBar';
 export * from './NavBar';
 export * from './CollapsibleNavBar';
+export * from './Header';
+export type * from './Header/types';
 export * from './TreeView';
 export { default as Tab } from './Tab';
 export { default as TabBar } from './TabBar';