@ssa-ui-kit/core 3.22.0 → 3.23.0

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

@@ -25,4 +25,21 @@ import { TableCellProps } from '../TableCell/types';
  * </TableRow>
  * ```
  */
-export type TableCellHeaderProps = TableCellProps;
+export interface TableCellHeaderProps extends TableCellProps {
+    /**
+     * Whether this column can be resized inside a `Table` with
+     * `resizableColumns`. Set it to `false` to pin a column — an actions or
+     * checkbox column, typically — at a width the user cannot change.
+     *
+     * In the default `fit` mode this also removes the handle from the column to
+     * its *left*, because that handle resizes by trading width with this one and
+     * would otherwise move a column the user was told they could not move. In
+     * `expand` mode nothing pays for a resize, so only this column's own handle
+     * goes.
+     *
+     * Ignored outside a resizable table.
+     *
+     * @default true
+     */
+    resizable?: boolean;
+}

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

@@ -161,7 +161,7 @@ type UseInteractions = ReturnType<typeof useInteractions>;
 interface RefObject<T> {
     current: T;
 }
-export type UseTooltip = (props?: UseTooltipArgs) => Required<Pick<TooltipProps, 'color' | 'hasBorder' | 'hasShadow'>> & Pick<TooltipProps, 'size' | 'hasArrow' | 'arrowProps'> & {
+export type UseTooltip = (props?: UseTooltipArgs) => Required<Pick<TooltipProps, 'color' | 'hasBorder' | 'hasShadow'>> & Pick<TooltipProps, 'size' | 'hasArrow' | 'arrowProps' | 'enableClick'> & {
     arrowRef: RefObject<null>;
     isOpen: boolean;
     setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -170,7 +170,7 @@ export type TooltipContextType = (UseFloatingReturn & ReturnType<typeof useInter
     arrowRef: React.Ref<SVGSVGElement>;
     isOpen: boolean;
     setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-} & Required<Pick<TooltipProps, 'color' | 'hasBorder' | 'hasShadow'>> & Pick<TooltipProps, 'size' | 'hasArrow' | 'arrowProps'>) | null;
+} & Required<Pick<TooltipProps, 'color' | 'hasBorder' | 'hasShadow'>> & Pick<TooltipProps, 'size' | 'hasArrow' | 'arrowProps' | 'enableClick'>) | null;
 export type TooltipArrowProps = Omit<React.ComponentProps<typeof FloatingArrow>, 'context'>;
 /**
  * Props for TooltipContent component

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

@@ -9,6 +9,7 @@ export declare const TypeaheadContext: React.Context<{
     inputRef: React.RefObject<HTMLInputElement | null>;
     firstSuggestion: string;
     isMultiple: boolean | undefined;
+    singleLine: boolean;
     typeaheadId: string;
     triggerRef: React.RefObject<HTMLDivElement | null>;
     className: string | undefined;

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, 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, 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/singleLine.d.ts

@@ -0,0 +1,52 @@
+import { RefObject } from 'react';
+/** Gap between the trigger's flex children, matches `S.TypeaheadTrigger`. */
+export declare const SINGLE_LINE_GAP = 8;
+/**
+ * Room always left for the search input, so typing never pushes chips around.
+ * Matches the input group's `min-width` while the popup is open.
+ */
+export declare const SINGLE_LINE_INPUT_MIN_WIDTH = 50;
+/**
+ * Width reserved for the hidden-items Counter before it has been rendered.
+ * Matches its small size, which is a 24px circle up to two digits.
+ */
+export declare const SINGLE_LINE_COUNTER_WIDTH = 24;
+/**
+ * Same timing and size as the Dropdown option tooltips (#669): long enough not
+ * to fire while the pointer is travelling across, capped so a long label does
+ * not produce an unreadably wide tooltip.
+ */
+export declare const LABEL_TOOLTIP_DELAY = 1000;
+export declare const LABEL_TOOLTIP_MAX_WIDTH = 320;
+/**
+ * Only a primitive is safe to repeat inside a tooltip. Rendering the same
+ * element twice mounts two independent copies of it, so labels made of
+ * components get no tooltip.
+ */
+export declare const asText: (value: unknown) => string | number | undefined;
+/**
+ * How many chips, taken in order, fit into `available` pixels, reserving room
+ * for the hidden-items counter whenever at least one chip is left out.
+ *
+ * Never returns less than 1 while there are chips: a single chip that is too
+ * wide on its own is shown truncated rather than replaced by a bare counter.
+ */
+export declare const getVisibleCount: (chipWidths: number[], available: number, gap?: number, counterWidth?: number) => number;
+/**
+ * Measures how many selected chips fit on the trigger's single line.
+ *
+ * The line width is read as row + gap + input group: the input group grows to
+ * fill whatever the row leaves, so their sum is the line regardless of icons or
+ * paddings on the trigger. Chips beyond the current count are rendered out of
+ * flow (but laid out), so their natural widths are always measurable.
+ *
+ * Returns `Infinity` until the first real measurement, so an element that is
+ * not laid out (hidden, or jsdom) shows every chip instead of collapsing to one.
+ */
+export declare const useVisibleCount: ({ enabled, rowRef, inputGroupRef, selectedCount, deps, }: {
+    enabled: boolean;
+    rowRef: RefObject<HTMLElement | null>;
+    inputGroupRef: RefObject<HTMLElement | null>;
+    selectedCount: number;
+    deps: unknown[];
+}) => number;

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

@@ -18,6 +18,9 @@ export declare const TypeaheadItem: import("@emotion/styled").StyledComponent<{
 } & {
     isDisabled?: boolean;
     isCustomValue?: boolean;
+    singleLine?: boolean;
+    isOutOfFlow?: boolean;
+    canShrink?: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TypeaheadItemAvatar: import("@emotion/styled").StyledComponent<{
     theme?: Theme;
@@ -29,7 +32,22 @@ export declare const TypeaheadItemLabel: import("@emotion/styled").StyledCompone
 } & {
     isDisabled?: boolean;
     isCustomValue?: boolean;
+    singleLine?: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TypeaheadSelectedRow: import("@emotion/styled").StyledComponent<{
+    theme?: Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TypeaheadSelectedCounter: import("@emotion/styled").StyledComponent<{
+    theme?: Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TypeaheadCounterCircle: {
+    readonly boxSizing: "border-box";
+    readonly width: "auto";
+    readonly minWidth: 24;
+    readonly padding: "0 4px";
+};
 export declare const TypeaheadItemCross: import("@emotion/styled").StyledComponent<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: Theme;
 } & {
@@ -49,6 +67,7 @@ export declare const TypeaheadInputsGroupWrapper: import("@emotion/styled").Styl
     theme?: Theme;
 } & {
     isOpen: boolean;
+    singleLine?: boolean;
 }, {}, {}>;
 export declare const TypeaheadTrigger: import("@emotion/styled").StyledComponent<Omit<import("react").HTMLProps<HTMLElement> & import("..").ButtonProps & import("../Popover").PopoverTriggerProps, "ref"> & import("react").RefAttributes<HTMLElement> & {
     theme?: Theme;

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

@@ -60,6 +60,15 @@ export interface TypeaheadProps {
      * @default false
      */
     isMultiple?: boolean;
+    /**
+     * Keep the multiple-selection trigger on a single line.
+     * Shows as many selected items as fit, then a `+N` counter for the rest,
+     * instead of wrapping onto new lines. Selected items are truncated with an
+     * ellipsis and show their full label in a tooltip.
+     * Has no effect unless `isMultiple` is set.
+     * @default false
+     */
+    singleLine?: boolean;
     /**
      * Whether the component is disabled
      * Disabled typeahead cannot be interacted with
@@ -205,7 +214,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' | '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'>;
 /**
  * Props for TypeaheadOptions container component
  */

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

@@ -6,7 +6,7 @@ type HandleChangeParams = {
     shouldClose?: boolean;
     resetInput?: boolean;
 };
-export declare const useTypeahead: ({ name, isOpen: isInitOpen, selectedItems: providedSelectedItems, defaultSelectedItems, isDisabled, isMultiple, 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, }: UseTypeaheadProps) => {
     isOpen: boolean;
     isDisabled: boolean | undefined;
     optionsWithKey: Record<string | number, TypeaheadOptionProps>;
@@ -14,6 +14,7 @@ export declare const useTypeahead: ({ name, isOpen: isInitOpen, selectedItems: p
     inputRef: React.RefObject<HTMLInputElement | null>;
     firstSuggestion: string;
     isMultiple: boolean | undefined;
+    singleLine: boolean;
     typeaheadId: string;
     triggerRef: React.RefObject<HTMLDivElement | null>;
     className: string | undefined;

package/dist/components/index.d.ts

@@ -57,6 +57,8 @@ export * from './Filters';
 export * from './FiltersMultiSelect';
 export * as JsonSchema from './JsonSchemaForm';
 export { default as Table } from './Table';
+export { ColumnResizeHandle, useColumnResize, useColumnResizeContext, } from './Table';
+export type { ColumnResizeApi, ColumnResizeHandleProps, ColumnResizeMode, ColumnResizeOptions, ResizeHandleProps, TableProps, UseColumnResizeOptions, } from './Table';
 export { default as TableBody } from './TableBody';
 export { default as TableCell } from './TableCell';
 export { default as TableCellHeader } from './TableCellHeader';
@@ -101,6 +103,8 @@ export { default as ProgressLegendItem } from './ProgressLegendItem';
 export { default as ProgressVertical } from './ProgressVertical';
 export * from './Charts';
 export * from './ImageItem';
+export * from './Carousel';
+export type * from './Carousel/types';
 export { default as ResponsiveImage } from './ResponsiveImage';
 export * from './ResponsiveImage';
 export type * from './ResponsiveImage/types';