@ssa-ui-kit/core 3.25.1 → 3.26.1

package/dist/components/Icon/icons/iconsList.d.ts

@@ -1 +1 @@
-export declare const iconsList: ("visible" | "reset" | "warning" | "h1" | "h2" | "h3" | "bold" | "archive" | "document" | "link" | "list" | "menu" | "search" | "arrow-down" | "arrow-up" | "clipboard-assessment" | "attention" | "award" | "ban-user" | "bench" | "bin" | "calendar" | "calendar-schedule" | "carrot-down" | "carrot-left" | "carrot-right" | "carrot-up" | "card-text" | "case" | "certification" | "certification-expiring" | "camera" | "change" | "chart" | "check" | "check-circle" | "check-circle-inverted" | "children" | "circle" | "circular" | "clock" | "cogwheel" | "comments" | "briefcase" | "building" | "compensation" | "confirm-email" | "contacts" | "copy" | "copy-link" | "cross" | "delete" | "diamond-ring" | "diet" | "documents" | "edit" | "education" | "email" | "employee" | "employee-profile" | "employee-terminated" | "employee-blackboard" | "excel-download" | "export" | "file-mark" | "file-pdf" | "file-word" | "filter" | "filter-funnel" | "follow-link" | "fte" | "clipboard-form" | "geography" | "gender" | "gift" | "home" | "import" | "information" | "inventory" | "invisible" | "language" | "lock" | "log-in" | "log-out" | "maximize" | "measurements" | "message" | "minus" | "minus-circle" | "minus-circle-inverted" | "more" | "more-vertical" | "notification" | "office-chair" | "open-book" | "pages" | "party" | "plus" | "plus-circle" | "plus-circle-inverted" | "probation-period" | "profiles-changes" | "radio-on" | "clipboard-report" | "clipboard-result" | "robot" | "roles" | "seniority" | "settings" | "setting-clock" | "signature" | "sleep" | "staff-growth-coefficient" | "staff-turnover-coefficient" | "stats" | "clipboard-summary" | "team" | "clipboard-star" | "time-tracking" | "timeline" | "tennis-ball" | "trainings" | "unarchive" | "union" | "union-circle" | "unlock" | "url" | "user" | "panelLeft" | "panelRight" | "emailOutlined" | "lockOutlined" | "addFolder" | "moveFolder" | "attention-circle" | "zoom" | "zoom-in" | "zoom-out" | "pan" | "box-select" | "lasso-select" | "autoscale" | "reset-axes" | "star" | "preview" | "dashboard" | "phone" | "tablet" | "desktop" | "more-info" | "filter-list" | "history" | "overtime" | "save-2" | "folder" | "salary-reports" | "assessment-stages" | "comments-on-achievements" | "code-review-comments" | "support" | "leave" | "vacation" | "sick-leave" | "day-off" | "arrow-sort" | "dragndrop" | "send" | "save" | "today" | "busket" | "copy-link-2" | "upload" | "picture" | "warning-2" | "info" | "sort-up" | "sort-down" | "italic" | "strikethrough" | "underline" | "markup" | "numbered-list" | "bulleted-list" | "uppercase" | "dash" | "brackets" | "undo" | "redo" | "new-line" | "quotation" | "close-circle-outline" | "close-square-outline" | "close-circle-filled" | "close-square-filled" | "plus-square-outline" | "plus-square-filled" | "minus-square-outline" | "minus-square-filled" | "tick-square-outline" | "tick-square-filled" | "warning-circle-outline" | "warning-square-outline" | "warning-circle-filled" | "warning-square-filled" | "info-square-outline" | "info-square-filled" | "info-circle-filled" | "more-circle-outline" | "more-square-outline" | "more-circle-filled" | "more-square-filled" | "client-feedback" | "expertise" | "responsibilities" | "mobile" | "delivery-address" | "delivery-address-2" | "pdp" | "versions" | "experience" | "projects" | "cooperation-model" | "billable" | "non-billable" | "recruitment-team" | "clear" | "columns")[];
+export declare const iconsList: ("visible" | "reset" | "warning" | "h1" | "h2" | "h3" | "bold" | "archive" | "document" | "link" | "list" | "menu" | "search" | "arrow-down" | "arrow-up" | "clipboard-assessment" | "attention" | "award" | "ban-user" | "bench" | "bin" | "calendar" | "calendar-schedule" | "carrot-down" | "carrot-left" | "carrot-right" | "carrot-up" | "card-text" | "case" | "certification" | "certification-expiring" | "camera" | "change" | "chart" | "check" | "check-circle" | "check-circle-inverted" | "children" | "circle" | "circular" | "clock" | "cogwheel" | "comments" | "briefcase" | "building" | "compensation" | "confirm-email" | "contacts" | "copy" | "copy-link" | "cross" | "delete" | "diamond-ring" | "diet" | "documents" | "edit" | "education" | "email" | "employee" | "employee-profile" | "employee-terminated" | "employee-blackboard" | "excel-download" | "export" | "file-mark" | "file-pdf" | "file-word" | "filter" | "filter-funnel" | "follow-link" | "fte" | "clipboard-form" | "geography" | "gender" | "gift" | "home" | "import" | "information" | "inventory" | "invisible" | "language" | "lock" | "log-in" | "log-out" | "maximize" | "measurements" | "message" | "minus" | "minus-circle" | "minus-circle-inverted" | "more" | "more-vertical" | "notification" | "office-chair" | "open-book" | "pages" | "party" | "plus" | "plus-circle" | "plus-circle-inverted" | "probation-period" | "profiles-changes" | "radio-on" | "clipboard-report" | "clipboard-result" | "robot" | "roles" | "seniority" | "settings" | "setting-clock" | "signature" | "sleep" | "staff-growth-coefficient" | "staff-turnover-coefficient" | "stats" | "clipboard-summary" | "team" | "clipboard-star" | "time-tracking" | "timeline" | "tennis-ball" | "trainings" | "unarchive" | "union" | "union-circle" | "unlock" | "url" | "user" | "panelLeft" | "panelRight" | "emailOutlined" | "lockOutlined" | "addFolder" | "moveFolder" | "attention-circle" | "zoom" | "zoom-in" | "zoom-out" | "pan" | "box-select" | "lasso-select" | "autoscale" | "reset-axes" | "star" | "preview" | "dashboard" | "phone" | "tablet" | "desktop" | "more-info" | "filter-list" | "history" | "overtime" | "save-2" | "folder" | "salary-reports" | "assessment-stages" | "comments-on-achievements" | "code-review-comments" | "support" | "leave" | "vacation" | "sick-leave" | "day-off" | "arrow-sort" | "dragndrop" | "send" | "save" | "today" | "busket" | "copy-link-2" | "upload" | "picture" | "warning-2" | "info" | "sort-up" | "sort-down" | "italic" | "strikethrough" | "underline" | "markup" | "numbered-list" | "bulleted-list" | "uppercase" | "dash" | "brackets" | "undo" | "redo" | "new-line" | "quotation" | "close-circle-outline" | "close-square-outline" | "close-circle-filled" | "close-square-filled" | "plus-square-outline" | "plus-square-filled" | "minus-square-outline" | "minus-square-filled" | "tick-square-outline" | "tick-square-filled" | "warning-circle-outline" | "warning-square-outline" | "warning-circle-filled" | "warning-square-filled" | "info-square-outline" | "info-square-filled" | "info-circle-filled" | "more-circle-outline" | "more-square-outline" | "more-circle-filled" | "more-square-filled" | "client-feedback" | "expertise" | "responsibilities" | "mobile" | "delivery-address" | "delivery-address-2" | "pdp" | "versions" | "experience" | "projects" | "cooperation-model" | "billable" | "non-billable" | "recruitment-team" | "clear" | "columns" | "womens-day" | "womens-day-2" | "easter" | "halloween" | "christmas-hat" | "christmas-stocking" | "christmas-tree" | "constitution-day" | "labour-day" | "religious-holidays" | "peace-day" | "memorial-day" | "army-holidays" | "kings-day")[];

package/dist/components/Label/Label.d.ts

@@ -1,3 +1,13 @@
 import { LabelProps } from './types';
-declare const Label: ({ children, htmlFor, className, disabled, isDisabled, onMouseEnter, onMouseLeave, }: LabelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * Builds the default badge id for a label's `htmlFor`, so a field can point
+ * its control's `aria-describedby` at the badge.
+ *
+ * @example
+ * ```tsx
+ * <input id="email" aria-describedby={getLabelBadgeId('email')} />
+ * ```
+ */
+export declare const getLabelBadgeId: (htmlFor: string) => string;
+declare const Label: ({ children, htmlFor, id, badge, className, disabled, isDisabled, onMouseEnter, onMouseLeave, }: LabelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Label;

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

@@ -1 +1,2 @@
 export { default } from './Label';
+export { getLabelBadgeId } from './Label';

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

@@ -1,8 +1,43 @@
-import { MouseEventHandler } from 'react';
+import { MouseEventHandler, ReactNode } from 'react';
 import { CommonProps } from '../../types/emotion';
+import { ChipProps } from '../Chip/types';
+/**
+ * A small status pill shown to the right of a field label — "mapped",
+ * "default", "not present in the CV". Rendered as an outlined Chip.
+ *
+ * The badge sits next to the `<label>` element, not inside it, so it does
+ * not become part of the field's accessible name. Point the control's
+ * `aria-describedby` at its `id` to have it announced as a description —
+ * the kit's fields with a `labelBadge` prop do this for you.
+ *
+ * @example
+ * ```tsx
+ * const badge: LabelBadge = { text: 'mapped', color: 'primary' };
+ * const custom: LabelBadge = { text: 'not present in the CV', color: '#ff8a00' };
+ * ```
+ */
+export interface LabelBadge {
+    /** Badge text */
+    text: ReactNode;
+    /**
+     * A Chip color: `primary`, `success`, `warning`… , any theme color key
+     * (e.g. `'purple'`) or a CSS color (e.g. `'#ff8a00'`).
+     * @default 'default'
+     */
+    color?: ChipProps['color'];
+    /**
+     * `id` of the badge element, for the control's `aria-describedby`
+     * @default `${htmlFor}-badge`, or a generated id without `htmlFor`
+     */
+    id?: string;
+}
 export interface LabelProps extends CommonProps {
     htmlFor?: string;
+    /** `id` of the `<label>` element, e.g. for a control's `aria-labelledby` */
+    id?: string;
     children: React.ReactNode;
+    /** Status badge shown to the right of the label text */
+    badge?: LabelBadge;
     /** Renders the label in its muted, disabled state. */
     disabled?: boolean;
     /**

package/dist/components/TextField/TextField.d.ts

@@ -75,5 +75,5 @@ import { TextFieldProps } from './types';
  * - ARIA attributes via React Hook Form (when register is provided)
  * - Error messages announced to screen readers
  */
-declare const TextField: ({ multirow, name, label, errors, helperText, success, disabled, maxLength, ...props }: TextFieldProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const TextField: ({ multirow, name, label, labelBadge, errors, helperText, success, disabled, maxLength, ...props }: TextFieldProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default TextField;

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

@@ -1,5 +1,6 @@
 import type { UseFormReturn, FieldError } from 'react-hook-form';
 import { InputProps } from '../Input/types';
+import { LabelBadge } from '../Label/types';
 /**
  * Props for the TextField component
  *
@@ -55,6 +56,12 @@ export interface TextFieldProps extends InputProps, Partial<Pick<UseFormReturn,
      * Label text displayed above the input field
      */
     label?: string;
+    /**
+     * Status badge to the right of the label, e.g.
+     * `{ text: 'mapped', color: 'primary' }`. Announced as the field's
+     * description. Needs a `label`.
+     */
+    labelBadge?: LabelBadge;
     /**
      * React Hook Form field error object
      * Used to display validation error messages

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

@@ -111,6 +111,10 @@ export interface TextareaProps extends Partial<Pick<UseFormReturn, 'register'>>
      * Defaults to `formElement-${name}` when not provided.
      */
     id?: string;
+    /**
+     * Ids of the elements describing the textarea — a label badge, helper text
+     */
+    'aria-describedby'?: string;
     /**
      * Paste event handler
      * Fired when content is pasted into the textarea

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

@@ -11,6 +11,7 @@ export declare const TypeaheadContext: React.Context<{
     isMultiple: boolean | undefined;
     singleLine: boolean;
     typeaheadId: string;
+    labelId: string | undefined;
     triggerRef: React.RefObject<HTMLDivElement | null>;
     className: string | undefined;
     startIcon: React.ReactNode;

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

@@ -172,4 +172,4 @@ import { TypeaheadProps } from './types';
  *
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
  */
-export declare const Typeahead: ({ name, label, value, defaultValue, selectedItems, defaultSelectedItems, isOpen, disabled, isDisabled, isMultiple, singleLine, children, className, startIcon, endIcon, error, success, helperText, validationSchema, placeholder, startIconClassName, endIconClassName, popoverClassName, optionsClassName, wrapperClassName, filterOptions, autoSelect, allowCustomValues, width, onChange, onEmptyChange, onClearAll, onRemoveSelectedClick, renderOption, }: TypeaheadProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Typeahead: ({ name, label, labelBadge, value, defaultValue, selectedItems, defaultSelectedItems, isOpen, disabled, isDisabled, isMultiple, singleLine, children, className, startIcon, endIcon, error, success, helperText, validationSchema, placeholder, startIconClassName, endIconClassName, popoverClassName, optionsClassName, wrapperClassName, filterOptions, autoSelect, allowCustomValues, width, onChange, onEmptyChange, onClearAll, onRemoveSelectedClick, renderOption, }: TypeaheadProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,6 @@
 import { CommonProps } from '../../types/emotion';
 import { FieldError } from 'react-hook-form';
+import { LabelBadge } from '../Label/types';
 /**
  * Allowed value types for Typeahead options
  */
@@ -139,6 +140,12 @@ export interface TypeaheadProps {
      * Label text displayed above the input
      */
     label?: string;
+    /**
+     * Status badge to the right of the label, e.g.
+     * `{ text: 'mapped', color: 'primary' }`. Announced as the input's
+     * description. Needs a `label`.
+     */
+    labelBadge?: LabelBadge;
     /**
      * Helper text displayed below the input
      */
@@ -214,7 +221,7 @@ export interface TypeaheadProps {
  * Props used by the useTypeahead hook
  * Internal type that picks specific props from TypeaheadProps
  */
-export type UseTypeaheadProps = Pick<TypeaheadProps, 'selectedItems' | 'defaultSelectedItems' | 'isDisabled' | 'children' | 'isMultiple' | 'singleLine' | 'onChange' | 'onClearAll' | 'onRemoveSelectedClick' | 'onEmptyChange' | 'renderOption' | 'isOpen' | 'className' | 'startIcon' | 'endIcon' | 'startIconClassName' | 'endIconClassName' | 'name' | 'validationSchema' | 'error' | 'success' | 'placeholder' | 'filterOptions' | 'autoSelect' | 'allowCustomValues'>;
+export type UseTypeaheadProps = Pick<TypeaheadProps, 'selectedItems' | 'defaultSelectedItems' | 'isDisabled' | 'children' | 'isMultiple' | 'singleLine' | 'onChange' | 'onClearAll' | 'onRemoveSelectedClick' | 'onEmptyChange' | 'renderOption' | 'isOpen' | 'className' | 'startIcon' | 'endIcon' | 'startIconClassName' | 'endIconClassName' | 'name' | 'validationSchema' | 'error' | 'success' | 'placeholder' | 'filterOptions' | 'autoSelect' | 'allowCustomValues' | 'label'>;
 /**
  * Props for TypeaheadOptions container component
  */

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

@@ -7,7 +7,7 @@ type HandleChangeParams = {
     shouldClose?: boolean;
     resetInput?: boolean;
 };
-export declare const useTypeahead: ({ name, isOpen: isInitOpen, selectedItems: providedSelectedItems, defaultSelectedItems, isDisabled, isMultiple, singleLine, children, className, startIcon, endIcon, startIconClassName, endIconClassName, validationSchema, error, success, placeholder, filterOptions, autoSelect, allowCustomValues, onChange, onClearAll, onRemoveSelectedClick, onEmptyChange, renderOption, }: UseTypeaheadProps) => {
+export declare const useTypeahead: ({ name, isOpen: isInitOpen, selectedItems: providedSelectedItems, defaultSelectedItems, isDisabled, isMultiple, singleLine, children, className, startIcon, endIcon, startIconClassName, endIconClassName, validationSchema, error, success, placeholder, filterOptions, autoSelect, allowCustomValues, onChange, onClearAll, onRemoveSelectedClick, onEmptyChange, renderOption, label, }: UseTypeaheadProps) => {
     isOpen: boolean;
     isDisabled: boolean | undefined;
     optionsWithKey: Record<string | number, TypeaheadOptionProps>;
@@ -17,6 +17,7 @@ export declare const useTypeahead: ({ name, isOpen: isInitOpen, selectedItems: p
     isMultiple: boolean | undefined;
     singleLine: boolean;
     typeaheadId: string;
+    labelId: string | undefined;
     triggerRef: React.RefObject<HTMLDivElement | null>;
     className: string | undefined;
     startIcon: React.ReactNode;

package/dist/components/index.d.ts

@@ -93,6 +93,7 @@ export type * from './Chip/types';
 export { default as Avatar } from './Avatar';
 export * from './Avatar/types';
 export { default as Label } from './Label';
+export { getLabelBadgeId } from './Label';
 export type * from './Label/types';
 export { default as Indicator } from './Indicator';
 export type * from './Indicator/types';
@@ -121,6 +122,8 @@ export * from './NavBar';
 export * from './CollapsibleNavBar';
 export * from './Header';
 export type * from './Header/types';
+export * from './Footer';
+export type * from './Footer/types';
 export * from './TreeView';
 export { default as Tab } from './Tab';
 export { default as TabBar } from './TabBar';