@ssa-ui-kit/core 3.25.0 → 3.25.1

package/dist/components/FiltersMultiSelect/components/FiltersMultiSelectOptions.d.ts

@@ -1,4 +1,31 @@
 import React, { type HTMLAttributes } from 'react';
-export declare const FiltersMultiSelectOptions: ({ children, ...props }: {
+/**
+ * FiltersMultiSelectOptions - The options list of a `FiltersMultiSelect`.
+ *
+ * Renders its `FiltersMultiSelectOption` children as an include / exclude
+ * `ContextMenu`: + and − on each row (one check-circle on group rows), Enter
+ * in the search input cycles the highlighted row. Shows the
+ * `FiltersMultiSelect` `emptyNode` when it has no options.
+ *
+ * @category Form Controls
+ * @subcategory Selection
+ *
+ * @example
+ * ```tsx
+ * <FiltersMultiSelect store={store}>
+ *   <FiltersMultiSelectOptions>
+ *     {filters.map((filter) => (
+ *       <FiltersMultiSelectOption key={filter.id} filter={filter}>
+ *         {filter.label}
+ *       </FiltersMultiSelectOption>
+ *     ))}
+ *   </FiltersMultiSelectOptions>
+ * </FiltersMultiSelect>
+ * ```
+ *
+ * @see {@link FiltersMultiSelect} - Parent component
+ * @see {@link FiltersMultiSelectOption} - One filter row
+ */
+export declare const FiltersMultiSelectOptions: ({ children, onMouseDown, ...props }: {
     children: React.ReactNode;
-} & HTMLAttributes<HTMLDivElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+} & Omit<HTMLAttributes<HTMLUListElement>, "onChange" | "defaultValue" | "children">) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ContextMenuIncludeExcludeEntry, ContextMenuIncludeExcludeType, ContextMenuItem } from '../ContextMenu';
+import { Filter, SelectedFilter, UseFiltersMultiSelectStore } from './useFiltersMultiSelect';
+/** A ContextMenu row together with the filter it stands for. */
+export type FilterMenuItem = ContextMenuItem<string> & {
+    filter: Filter;
+};
+/** Reads `FiltersMultiSelectOption` children into ContextMenu items. */
+export declare const toFilterMenuItems: (children: React.ReactNode) => FilterMenuItem[];
+/** The store's selection in ContextMenu's `includeExclude` shape. */
+export declare const toMenuSelection: (selectedFilters: SelectedFilter[]) => ContextMenuIncludeExcludeEntry<string>[];
+/** The store's current type for a filter, in ContextMenu's terms. */
+export declare const getMenuType: (store: UseFiltersMultiSelectStore, id: string) => ContextMenuIncludeExcludeType | undefined;
+/** Selects `filter` as `type`, or unselects it when `type` is undefined. */
+export declare const setFilterType: (store: UseFiltersMultiSelectStore, { id, label }: Filter, type: ContextMenuIncludeExcludeType | undefined) => void;

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

@@ -11,10 +11,10 @@ import { HeaderProps } from './types';
  * further. Following a link closes them.
  *
  * ### Layout
- * From 900px the navigation is centred between the logo and the right side,
- * and scrolls sideways when it does not fit. Below 900px it moves into a
- * drawer opened by a burger button, the logo is centred and `rightSide`
- * stays as it is.
+ * The layout follows the Header's own width, not the window's. From 900px
+ * the navigation is centred between the logo and the right side, and scrolls
+ * sideways when it does not fit. Below 900px it moves into a drawer opened
+ * by a burger button, the logo is centred and `rightSide` stays as it is.
  *
  * ### Selected state
  * The design sets the selected item in bold. The kit marks it by color

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

@@ -10,9 +10,10 @@ interface HeaderMobileMenuProps {
     navLabel: string;
 }
 /**
- * The navigation below 900px: a full-width drawer holding a `TreeView`, the
- * same engine as CollapsibleNavBar's menu. The tree owns expansion and opens
- * the group holding the current page; this module owns the routing.
+ * The navigation below 900px: a 400px drawer (full width on phones) holding
+ * a `TreeView`, the same engine as CollapsibleNavBar's menu. The tree owns
+ * expansion and opens the group holding the current page; this module owns
+ * the routing.
  */
 export declare const HeaderMobileMenu: ({ store, items, headerTheme, palette, pathname, navLabel, }: HeaderMobileMenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,6 +5,8 @@ export declare const SIZES: Record<HeaderSize, {
     logo: number;
 }>;
 export declare const MENU_WIDTH = 164;
+/** From this header width up the bar shows the nav; below it, the burger. */
+export declare const DESKTOP_MIN_WIDTH = 900;
 /** Design: dropdowns sit 6px below their trigger and flyouts 6px aside. */
 export declare const MENU_OFFSET = 6;
 export declare const resolvePalette: (theme: Theme, headerTheme: HeaderTheme) => {
@@ -33,10 +35,16 @@ export declare const resolvePalette: (theme: Theme, headerTheme: HeaderTheme) =>
     drawerBackground: `rgb${string}` | "transparent";
 };
 export type HeaderPalette = ReturnType<typeof resolvePalette>;
-export declare const root: (theme: Theme, palette: HeaderPalette, size: HeaderSize) => import("@emotion/react").SerializedStyles;
+/**
+ * The query container. It is the `header` itself, so consumer styles such
+ * as `position: sticky` land on the outermost element; the layout that
+ * the query switches lives on the bar inside.
+ */
+export declare const container: (palette: HeaderPalette) => import("@emotion/react").SerializedStyles;
+export declare const bar: (size: HeaderSize) => import("@emotion/react").SerializedStyles;
 export declare const burger: (theme: Theme, palette: HeaderPalette) => import("@emotion/react").SerializedStyles;
 /** Holds the burger's column when there is no menu, so the logo stays centred. */
-export declare const burgerPlaceholder: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const burgerPlaceholder: import("@emotion/react").SerializedStyles;
 /**
  * Fixed height from the size; width follows the logo so wordmarks fit, but
  * never drops below a square, so an empty box still holds its place.
@@ -46,7 +54,7 @@ export declare const logo: (size: HeaderSize) => import("@emotion/react").Serial
  * The scroll container. Dropdowns are portalled, so the overflow here does
  * not clip them.
  */
-export declare const nav: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const nav: import("@emotion/react").SerializedStyles;
 /** `margin: auto` centres the list while it fits and lets it scroll after. */
 export declare const navList: import("@emotion/react").SerializedStyles;
 export declare const rightSide: import("@emotion/react").SerializedStyles;
@@ -59,5 +67,8 @@ export declare const navItem: (theme: Theme, palette: HeaderPalette, active: boo
 export declare const menu: (theme: Theme, palette: HeaderPalette) => import("@emotion/react").SerializedStyles;
 export declare const menuItem: (theme: Theme, palette: HeaderPalette, active: boolean) => import("@emotion/react").SerializedStyles;
 export declare const drawerContent: (palette: HeaderPalette) => import("@emotion/react").SerializedStyles;
-/** Chevron of a mobile group row; flips while the group is open. */
+/**
+ * Chevron of a mobile group row; flips while the group is open. Pushed to the
+ * row's end so every chevron shares one vertical line.
+ */
 export declare const mobileToggle: (expanded: boolean) => import("@emotion/react").SerializedStyles;

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

@@ -25,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';