@ssa-ui-kit/core 3.3.0 → 3.5.0

package/dist/components/Charts/BarGaugeChart/types.d.ts

@@ -21,7 +21,7 @@ export interface GaugeBarProps {
     max?: number;
 }
 export interface BarGaugeChartProps {
-    title?: string;
+    title?: React.ReactNode;
     widgetCardProps?: WidgetCardProps;
     bars?: GaugeBarProps[];
     features?: BarGaugeChartFeature[];

package/dist/components/Charts/BarLineComplexChart/constants.d.ts

@@ -1,16 +1 @@
 export declare const FONT_FAMILY = "Manrope, sans-serif";
-export declare const TITLE_PADDING_LEFT: {
-    mobile: number;
-    md: number;
-    other: number;
-};
-export declare const TITLE_PADDING_TOP: {
-    mobile: number;
-    md: number;
-    other: number;
-};
-export declare const TITLE_FONT_SIZE: {
-    mobile: number;
-    md: number;
-    other: number;
-};

package/dist/components/Charts/BarLineComplexChart/types.d.ts

@@ -15,7 +15,7 @@ export interface BarLineComplexChartProps extends Omit<PlotParams, 'layout'> {
     lineShape?: Plotly.ScatterLine['shape'];
     width?: string;
     height?: string;
-    title?: string;
+    title?: React.ReactNode;
     maxVisibleBars?: number;
     maxVisibleLines?: number;
     container?: Element | DocumentFragment;

package/dist/components/Charts/BigNumberChart/BigNumberChart.d.ts

@@ -6,7 +6,7 @@ type Datum = LineSeries['data'][number];
 export interface BigNumberChartProps {
     data: Datum[];
     interactive?: boolean;
-    title?: string;
+    title?: React.ReactNode;
     widgetCardProps?: WidgetCardProps;
     trendLineProps?: Omit<TrendLineProps, 'data' | 'height' | 'width'>;
     features?: BigNumberChartFeatures[];

package/dist/components/Charts/CandlestickChart/CandlestickChart.d.ts

@@ -5,7 +5,7 @@ export type CandlestickChartFeatures = 'header' | 'fullscreenMode';
 export interface CandlestickChartProps extends Partial<Omit<PlotParams, 'data' | 'style'>> {
     data: CandlestickChartData;
     style?: CandlestickStyle;
-    title?: string;
+    title?: React.ReactNode;
     features?: CandlestickChartFeatures[];
     widgetCardProps?: WidgetCardProps;
 }

package/dist/components/Charts/GaugeChart/GaugeChart.d.ts

@@ -5,7 +5,7 @@ export interface GaugeChartProps extends Pick<GaugeChartLabelsProps, 'maxLabel'
     minValue: number;
     maxValue: number;
     value: number;
-    title?: string;
+    title?: React.ReactNode;
     segments?: {
         value: number;
         id?: string;

package/dist/components/Charts/RadarChart/RadarChart.d.ts

@@ -4,7 +4,7 @@ declare const ResponsiveRadar: <D extends Record<string, unknown>>(props: import
 export type RadarChartFeatures = 'header' | 'fullscreenMode';
 type ResponsiveRadarProps<D extends Record<string, unknown>> = ComponentProps<typeof ResponsiveRadar<D>>;
 export interface RadarChartProps<D extends Record<string, unknown>> extends Omit<ResponsiveRadarProps<D>, 'legends'> {
-    title?: string;
+    title?: React.ReactNode;
     legends?: Partial<NonNullable<ResponsiveRadarProps<D>['legends']>[number]>[];
     features?: RadarChartFeatures[];
     widgetCardProps?: WidgetCardProps;

package/dist/components/Charts/TreeMapChart/TreeMapChart.d.ts

@@ -10,7 +10,7 @@ export type TreeMapChartFeature = 'header' | 'fullscreenMode';
 type NivoTreeMapChartProps = React.ComponentProps<typeof ResponsiveTreeMap<TreeNode>>;
 export interface TreeMapChartProps extends Omit<NivoTreeMapChartProps, 'data'> {
     data: TreeNode;
-    title?: string;
+    title?: React.ReactNode;
     fullScreen?: boolean;
     features?: TreeMapChartFeature[];
     widgetCardProps?: WidgetCardProps;

package/dist/components/Dropdown/Dropdown.d.ts

@@ -5,8 +5,13 @@ import { DropdownProps } from './types';
  *
  * A flexible dropdown component that allows users to select one option from
  * a list of choices. Uses a compound component pattern with DropdownOption
- * children. Provides keyboard navigation, accessibility features, and click-outside
- * to close functionality.
+ * children. Provides keyboard navigation, accessibility features, click-outside
+ * to close functionality, and automatic viewport-aware placement of the options list.
+ *
+ * On every open the component measures available space below the toggle button
+ * and flips the list upward when there is not enough room, preventing the list
+ * from being clipped by the viewport edge. This behavior can be overridden via
+ * dropdownProps.dropdownPosition.
  *
  * Component structure:
  * - Dropdown (root container with context)
@@ -57,14 +62,15 @@ import { DropdownProps } from './types';
  *
  * @example
  * ```tsx
- * // With custom props for sub-components
+ * // With custom props for sub-components and forced upward placement
  * <Dropdown
  *   selectedItem={selected}
  *   onChange={handleChange}
  *   dropdownProps={{
  *     base: { id: 'my-dropdown' },
  *     toggleButton: { 'data-testid': 'dropdown-toggle' },
- *     toggleButtonArrow: { className: 'custom-arrow' }
+ *     toggleButtonArrow: { className: 'custom-arrow' },
+ *     dropdownPosition: DropdownPositions.top,
  *   }}
  * >
  *   {options.map(opt => (

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

@@ -3,6 +3,11 @@ import { Interpolation, Theme } from '@emotion/react';
 import { DropdownOptionProps } from '../DropdownOptions';
 import { CommonProps } from '../../types/emotion';
 import { IconProps } from '../Icon/types';
+export declare enum DropdownPositions {
+    top = "top",
+    bottom = "bottom",
+    auto = "auto"
+}
 /**
  * Props that are controlled by Dropdown component
  * These props cannot be passed via dropdownProps.toggleButton
@@ -13,7 +18,8 @@ export type ControlledButtonProps = 'onClick' | 'onFocus' | 'disabled' | 'type'
  *
  * A select-like dropdown component that allows users to choose one option from
  * a list. Uses compound component pattern with DropdownOption children.
- * Provides keyboard navigation, accessibility, and customizable styling.
+ * Provides keyboard navigation, accessibility, customizable styling, and
+ * automatic viewport-aware placement of the options list.
  *
  * @example
  * ```tsx
@@ -34,6 +40,18 @@ export type ControlledButtonProps = 'onClick' | 'onFocus' | 'disabled' | 'type'
  *   ))}
  * </Dropdown>
  * ```
+ *
+ * @example
+ * ```tsx
+ * // Force the list to always open upward (e.g. component near the bottom of the page)
+ * <Dropdown
+ *   selectedItem={selected}
+ *   onChange={handleChange}
+ *   dropdownProps={{ dropdownPosition: DropdownPositions.top }}
+ * >
+ *   ...
+ * </Dropdown>
+ * ```
  */
 export interface DropdownProps<P extends DropdownOptionProps> extends CommonProps {
     /**
@@ -109,6 +127,15 @@ export interface DropdownProps<P extends DropdownOptionProps> extends CommonProp
         };
         /** Props for the arrow icon SVG element */
         toggleButtonArrow?: Omit<IconProps, 'name' | 'size'>;
+        /**
+         * Controls the opening direction of the options list.
+         * - DropdownPositions.auto: opens downward by default; flips upward automatically when
+         *   there is insufficient space below the toggle in the viewport
+         * - DropdownPositions.top: always opens upward
+         * - DropdownPositions.bottom: always opens downward
+         * @default DropdownPositions.auto
+         */
+        dropdownPosition?: DropdownPositions;
     };
 }
 /**
@@ -130,4 +157,14 @@ export interface DropdownContextType {
      * Max height (px) of the options list
      */
     maxHeight?: number;
+    /**
+     * Ref attached to the options list element
+     * Used by Dropdown to measure actual list height for placement calculation
+     */
+    listRef?: React.RefObject<HTMLUListElement | null>;
+    /**
+     * Resolved placement of the options list
+     * Computed by Dropdown based on dropdownPosition prop and available viewport space
+     */
+    placement?: 'top' | 'bottom';
 }

package/dist/components/DropdownOptions/DropdownOptions.d.ts

@@ -5,6 +5,11 @@ import { DropdownItemsListProps } from './types';
  * Renders the scrollable list of options that appears when the dropdown is open.
  * Provides proper ARIA attributes for accessibility and keyboard navigation.
  *
+ * Placement (opening upward or downward) is driven entirely by the parent
+ * Dropdown via context — this component does not calculate position itself.
+ * A ref is attached to the list element so Dropdown can measure its actual
+ * rendered height when determining the correct placement on each open.
+ *
  * @category Form Controls
  * @subcategory Selection
  *

package/dist/components/Pagination/components/RowsPerPageDropdown/RowsPerPageDropdown.d.ts

@@ -40,4 +40,4 @@ import { RowsPerPageDropdownProps } from './types';
  * - Keyboard navigation support
  * - Screen reader friendly
  */
-export declare const RowsPerPageDropdown: ({ selectedItem, rowsPerPageList, rowsPerPageText, ...rest }: RowsPerPageDropdownProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const RowsPerPageDropdown: ({ selectedItem, rowsPerPageList, rowsPerPageText, dropdownPosition, ...rest }: RowsPerPageDropdownProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Pagination/components/RowsPerPageDropdown/types.d.ts

@@ -1,4 +1,5 @@
 import { CommonProps } from '../../../../types/emotion';
+import { DropdownPositions } from '../../../index';
 /**
  * Props for the RowsPerPageDropdown component
  *
@@ -45,4 +46,13 @@ export interface RowsPerPageDropdownProps extends CommonProps {
         id: number;
         value: number;
     }>;
+    /**
+     * Controls the opening direction of the options list.
+     * - DropdownPositions.auto: opens downward by default; flips upward automatically when
+     *   there is insufficient space below the toggle in the viewport
+     * - DropdownPositions.top: always opens upward
+     * - DropdownPositions.bottom: always opens downward
+     * @default DropdownPositions.auto
+     */
+    dropdownPosition?: DropdownPositions;
 }

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

@@ -87,8 +87,11 @@ export interface PaginationProps extends CommonProps {
      */
     isPageFromCountVisible?: boolean;
     /**
-     * Props for the rows per page dropdown
-     * Only used when isRowPerPageVisible is true
+     * Props for the rows per page dropdown.
+     * Only used when isRowPerPageVisible is true.
+     * Use rowPerPageProps.dropdownPosition to control the opening direction
+     * ('auto' | 'top' | 'bottom'). Defaults to 'auto', which flips the list
+     * upward automatically when there is insufficient space below the toggle.
      */
     rowPerPageProps?: RowsPerPageDropdownProps;
     /**