@ssa-ui-kit/core 2.33.0 → 3.1.0

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

@@ -1,4 +1,78 @@
 import { CommonProps } from '../../types/emotion';
+/**
+ * Table - Base table component for displaying tabular data
+ *
+ * A styled table element that serves as the foundation for displaying
+ * structured tabular data. Works in conjunction with TableHead, TableBody,
+ * TableRow, TableCell, and TableCellHeader components to create complete
+ * data tables with proper semantics and styling.
+ *
+ * Component structure:
+ * - Table (root container)
+ *   - TableHead (header section with column headers)
+ *     - TableRow
+ *       - TableCellHeader (header cells)
+ *   - TableBody (body section with data rows)
+ *     - TableRow (data rows)
+ *       - TableCell (data cells)
+ *
+ * @category Components
+ * @subcategory Data Display
+ *
+ * @example
+ * ```tsx
+ * // Basic table
+ * <Table>
+ *   <TableHead>
+ *     <TableRow>
+ *       <TableCellHeader>Name</TableCellHeader>
+ *       <TableCellHeader>Email</TableCellHeader>
+ *       <TableCellHeader>Role</TableCellHeader>
+ *     </TableRow>
+ *   </TableHead>
+ *   <TableBody>
+ *     {users.map(user => (
+ *       <TableRow key={user.id}>
+ *         <TableCell>{user.name}</TableCell>
+ *         <TableCell>{user.email}</TableCell>
+ *         <TableCell>{user.role}</TableCell>
+ *       </TableRow>
+ *     ))}
+ *   </TableBody>
+ * </Table>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Table with custom styling
+ * <Table css={{ border: '1px solid #ccc' }}>
+ *   <TableHead>
+ *     <TableRow>
+ *       <TableCellHeader>Column 1</TableCellHeader>
+ *       <TableCellHeader align="center">Column 2</TableCellHeader>
+ *     </TableRow>
+ *   </TableHead>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableCell>Data 1</TableCell>
+ *       <TableCell align="center">Data 2</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ * ```
+ *
+ * @see {@link TableHead} - Header section component
+ * @see {@link TableBody} - Body section component
+ * @see {@link TableRow} - Row component
+ * @see {@link TableCell} - Data cell component
+ * @see {@link TableCellHeader} - Header cell component
+ *
+ * @accessibility
+ * - Semantic HTML table element
+ * - Proper table structure for screen readers
+ * - Keyboard navigation support
+ * - ARIA attributes when needed
+ */
 declare const Table: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/dist/components/TableBody/TableBody.d.ts

@@ -1,4 +1,59 @@
 import { CommonProps } from '../../types/emotion';
+/**
+ * TableBody - Body section container for table data rows
+ *
+ * A styled tbody element that wraps table data rows. Provides styling
+ * for the table body section including hover effects on rows, rounded
+ * corners for the last row, and proper spacing. Used with TableRow and
+ * TableCell components.
+ *
+ * @category Components
+ * @subcategory Data Display
+ *
+ * @example
+ * ```tsx
+ * // Basic table body
+ * <Table>
+ *   <TableHead>
+ *     // header rows go here
+ *   </TableHead>
+ *   <TableBody>
+ *     {data.map(item => (
+ *       <TableRow key={item.id}>
+ *         <TableCell>{item.name}</TableCell>
+ *         <TableCell>{item.email}</TableCell>
+ *         <TableCell>{item.role}</TableCell>
+ *       </TableRow>
+ *     ))}
+ *   </TableBody>
+ * </Table>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Table body with disabled rows (aria-disabled is automatically set)
+ * <TableBody>
+ *   {items.map(item => (
+ *     <TableRow
+ *       key={item.id}
+ *       isDisabled={item.disabled}>
+ *       <TableCell>{item.name}</TableCell>
+ *     </TableRow>
+ *   ))}
+ * </TableBody>
+ * ```
+ *
+ * @see {@link Table} - Parent table component
+ * @see {@link TableRow} - Row component for data
+ * @see {@link TableCell} - Data cell component
+ * @see {@link TableHead} - Header section component
+ *
+ * @accessibility
+ * - Semantic HTML tbody element
+ * - Proper table structure for screen readers
+ * - Hover effects respect aria-disabled attribute
+ * - Supports ARIA attributes via CommonProps
+ */
 declare const TableBody: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/dist/components/TableCell/TableCell.d.ts

@@ -1,8 +1,60 @@
-import { CommonProps } from '../../types/emotion';
+import { TableCellProps } from './types';
+/**
+ * TableCell - Table data cell component
+ *
+ * A styled td element that represents a single data cell in a table row.
+ * Used within TableRow components in the TableBody section. Supports
+ * text alignment customization. For header cells, use TableCellHeader instead.
+ *
+ * @category Components
+ * @subcategory Data Display
+ *
+ * @example
+ * ```tsx
+ * // Basic table cell
+ * <TableRow>
+ *   <TableCell>John Doe</TableCell>
+ *   <TableCell>john@example.com</TableCell>
+ *   <TableCell>Admin</TableCell>
+ * </TableRow>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Table cell with center alignment
+ * <TableRow>
+ *   <TableCell>Name</TableCell>
+ *   <TableCell align="center">Status</TableCell>
+ *   <TableCell align="right">Price</TableCell>
+ * </TableRow>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Table cell with custom content
+ * <TableRow>
+ *   <TableCell>
+ *     <Badge color="success">Active</Badge>
+ *   </TableCell>
+ *   <TableCell>
+ *     <Button size="small">Edit</Button>
+ *   </TableCell>
+ * </TableRow>
+ * ```
+ *
+ * @see {@link Table} - Parent table component
+ * @see {@link TableRow} - Row component (use this in TableBody)
+ * @see {@link TableCellHeader} - Header cell component (use in TableHead)
+ * @see {@link TableHead} - Header section component
+ * @see {@link TableBody} - Body section component
+ *
+ * @accessibility
+ * - Semantic HTML td element
+ * - Proper table structure for screen readers
+ * - Supports ARIA attributes via CommonProps
+ */
 declare const TableCell: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & {
-    align?: string;
-} & CommonProps, import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
+} & TableCellProps, import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
 export default TableCell;

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

@@ -0,0 +1,33 @@
+import { HTMLAttributes } from 'react';
+import { CommonProps } from '../../types/emotion';
+/**
+ * Props for the TableCell component
+ *
+ * A styled table cell component that represents a single data cell in a table row.
+ * Supports text alignment customization.
+ *
+ * @example
+ * ```tsx
+ * // Basic table cell
+ * <TableCell>Data content</TableCell>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Table cell with center alignment
+ * <TableCell align="center">Centered</TableCell>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Table cell with right alignment
+ * <TableCell align="right">Right aligned</TableCell>
+ * ```
+ */
+export interface TableCellProps extends CommonProps, Omit<HTMLAttributes<HTMLTableCellElement>, 'align'> {
+    /**
+     * Text alignment for the cell content
+     * @default 'left'
+     */
+    align?: 'left' | 'center' | 'right' | 'justify';
+}

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

@@ -1,3 +1,64 @@
-import TableCell from '../TableCell/TableCell';
-declare const TableCellHeader: (props: React.ComponentProps<typeof TableCell>) => import("@emotion/react/jsx-runtime").JSX.Element;
+import React from 'react';
+import { TableCellHeaderProps } from './types';
+/**
+ * TableCellHeader - Table header cell component
+ *
+ * A wrapper component that renders TableCell as a semantic th element for
+ * table headers. Used within TableRow components in the TableHead section.
+ * Provides the same styling and props as TableCell but with proper semantic
+ * HTML for header cells.
+ *
+ * @category Components
+ * @subcategory Data Display
+ *
+ * @example
+ * ```tsx
+ * // Basic table header
+ * <TableHead>
+ *   <TableRow>
+ *     <TableCellHeader>Name</TableCellHeader>
+ *     <TableCellHeader>Email</TableCellHeader>
+ *     <TableCellHeader>Role</TableCellHeader>
+ *   </TableRow>
+ * </TableHead>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Table header with alignment
+ * <TableHead>
+ *   <TableRow>
+ *     <TableCellHeader>Product</TableCellHeader>
+ *     <TableCellHeader align="center">Quantity</TableCellHeader>
+ *     <TableCellHeader align="right">Price</TableCellHeader>
+ *   </TableRow>
+ * </TableHead>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Table header with custom content
+ * <TableHead>
+ *   <TableRow>
+ *     <TableCellHeader>
+ *       <Icon name="user" /> User
+ *     </TableCellHeader>
+ *     <TableCellHeader>Email</TableCellHeader>
+ *   </TableRow>
+ * </TableHead>
+ * ```
+ *
+ * @see {@link Table} - Parent table component
+ * @see {@link TableHead} - Header section component (use this component here)
+ * @see {@link TableRow} - Row component (use in TableHead)
+ * @see {@link TableCell} - Data cell component (use in TableBody)
+ * @see {@link TableBody} - Body section component
+ *
+ * @accessibility
+ * - Semantic HTML th element (renders as th)
+ * - Proper table header semantics for screen readers
+ * - Supports ARIA attributes via TableCellProps
+ * - Better accessibility than using TableCell in headers
+ */
+declare const TableCellHeader: ({ children, ...props }: React.PropsWithChildren<TableCellHeaderProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default TableCellHeader;

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

@@ -0,0 +1,28 @@
+import { TableCellProps } from '../TableCell/types';
+/**
+ * Props for the TableCellHeader component
+ *
+ * A wrapper component that renders TableCell as a th element for table headers.
+ * Inherits all props from TableCell but renders as a header cell semantically.
+ *
+ * @example
+ * ```tsx
+ * // Basic table cell header
+ * <TableRow>
+ *   <TableCellHeader>Name</TableCellHeader>
+ *   <TableCellHeader>Email</TableCellHeader>
+ *   <TableCellHeader>Role</TableCellHeader>
+ * </TableRow>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Table cell header with alignment
+ * <TableRow>
+ *   <TableCellHeader>Name</TableCellHeader>
+ *   <TableCellHeader align="center">Status</TableCellHeader>
+ *   <TableCellHeader align="right">Price</TableCellHeader>
+ * </TableRow>
+ * ```
+ */
+export type TableCellHeaderProps = TableCellProps;

package/dist/components/TableFilters/TableFilters.d.ts

@@ -1,2 +1,74 @@
 import { TableFiltersView } from './types';
+/**
+ * TableFilters - Filter component for table data with grouped checkboxes
+ *
+ * A comprehensive filter component that provides grouped checkbox filters in a
+ * popover with accordion-style collapsible groups. Supports draft state management
+ * with submit, reset, and clear actions. Displays notification badge with selected
+ * filter group count.
+ *
+ * Component structure:
+ * - TableFilters (main component)
+ *   - Popover (wrapper with trigger and content)
+ *     - TableFilterTriggerWithNotification (trigger button with badge)
+ *     - PopoverContent (filter content)
+ *       - AccordionGroup (collapsible filter groups)
+ *         - TableFiltersAccordion (individual filter group)
+ *           - TableFiltersAccordionContent
+ *             - TableFilterCheckbox (filter items)
+ *       - TableFiltersButtons (submit, cancel, clear actions)
+ *
+ * @category Components
+ * @subcategory Data Display
+ *
+ * @example
+ * ```tsx
+ * const filterConfig: TableFilterConfig = {
+ *   status: {
+ *     id: 'status',
+ *     title: 'Status',
+ *     isOpened: true,
+ *     ariaControls: 'status-controls',
+ *     items: {
+ *       active: {
+ *         key: 'active',
+ *         name: 'active',
+ *         content: { statePath: [], text: 'Active' },
+ *       },
+ *     },
+ *     selectedItems: [],
+ *   },
+ * };
+ *
+ * <TableFilters
+ *   checkboxData={filterConfig}
+ *   onSubmit={() => applyFilters()}
+ *   onReset={() => resetFilters()}
+ *   onClear={() => clearFilters()}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With checkbox toggle callback
+ * <TableFilters
+ *   checkboxData={filterConfig}
+ *   onCheckboxToggle={(groupName, itemName) => {
+ *     console.log(`Toggled ${itemName} in ${groupName}`);
+ *   }}
+ *   onSubmit={handleSubmit}
+ * />
+ * ```
+ *
+ * @see {@link AccordionGroup} - Used for collapsible filter groups
+ * @see {@link Popover} - Used for filter popover overlay
+ * @see {@link TableFilterConfig} - Configuration type for filter data
+ *
+ * @accessibility
+ * - ARIA attributes for accordion groups
+ * - Keyboard navigation support
+ * - Screen reader friendly
+ * - Proper focus management
+ * - Notification badge for selected filters
+ */
 export declare const TableFilters: ({ checkboxData, onReset, onSubmit, onClear, onCheckboxToggle, handleMoreButtonVisibleChange, }: TableFiltersView) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/TableFilters/hooks/useTableData.d.ts

@@ -2,7 +2,7 @@ import { BaseSyntheticEvent } from 'react';
 import { TableFilterConfig } from '../types';
 export interface UseTableDataParameters {
     initialState?: TableFilterConfig;
-    wrapperRef?: React.RefObject<HTMLElement>;
+    wrapperRef?: React.RefObject<HTMLElement | null>;
     updatedCheckboxData?: TableFilterConfig;
     handleCancel?: () => void;
     handleClear?: () => void;
@@ -15,8 +15,8 @@ export interface UseTableDataParameters {
 }
 export declare const useTableData: ({ initialState, wrapperRef, updatedCheckboxData, handleCancel, handleSubmit, handleClear, handleDropdownChange, }: UseTableDataParameters) => {
     checkboxData: TableFilterConfig;
-    wrapperRef: import("react").RefObject<HTMLElement> | undefined;
-    refsList: import("react").MutableRefObject<HTMLElement | null>[];
+    wrapperRef: import("react").RefObject<HTMLElement | null> | undefined;
+    refsList: import("react").RefObject<HTMLElement | null>[];
     setElementRef: (groupName: string, element: HTMLElement | null) => void;
     onCheckboxToggle: (groupName: string, name: string | number) => void;
     onDropdownChange: (groupName: string, name: string | number) => void;

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

@@ -1,30 +1,158 @@
+/**
+ * Checkbox data structure
+ * Maps filter group names to arrays of selected item names
+ */
 export type CheckboxData = Record<string, string[]>;
+/**
+ * Not changed data structure
+ * Tracks checkbox states that haven't been modified
+ */
 export type NotChangedData = Record<string, Record<string, boolean>>;
+/**
+ * Single filter item configuration
+ * Represents an individual checkbox option within a filter group
+ */
 export interface SingleItem {
+    /**
+     * Unique identifier for the item
+     */
     key: string;
+    /**
+     * Item name/identifier
+     */
     name: string;
+    /**
+     * Whether the item is disabled
+     * @default false
+     */
     isDisabled?: boolean;
+    /**
+     * Item content configuration
+     */
     content: {
+        /**
+         * State path for nested data structures
+         */
         statePath: string[];
+        /**
+         * Display text for the checkbox label
+         */
         text: string;
     };
 }
+/**
+ * Accordion group information
+ * Represents a filter group with collapsible accordion functionality
+ */
 export interface AccordionInfo {
+    /**
+     * Unique identifier for the accordion group
+     */
     id: string;
+    /**
+     * Group title displayed in accordion header
+     */
     title: string;
+    /**
+     * Whether the accordion is initially open
+     */
     isOpened: boolean;
+    /**
+     * ARIA controls attribute for accessibility
+     */
     ariaControls: string;
+    /**
+     * Whether the entire group is disabled
+     * @default false
+     */
     isDisabled?: boolean;
+    /**
+     * Filter items within this group
+     */
     items: Record<string, SingleItem>;
+    /**
+     * Currently selected items (committed state)
+     */
     selectedItems: string[];
+    /**
+     * Draft selected items (uncommitted changes)
+     * Used to track temporary selections before submit
+     */
     selectedItemsDraft?: string[];
 }
+/**
+ * Table filter configuration
+ * Maps filter group names to their accordion information
+ */
 export type TableFilterConfig = Record<string, AccordionInfo>;
+/**
+ * Props for the TableFilters component
+ *
+ * A comprehensive filter component for table data that provides grouped checkbox
+ * filters in a popover with accordion-style collapsible groups. Supports submit,
+ * reset, and clear actions with draft state management.
+ *
+ * @example
+ * ```tsx
+ * const filterConfig: TableFilterConfig = {
+ *   status: {
+ *     id: 'status',
+ *     title: 'Status',
+ *     isOpened: true,
+ *     ariaControls: 'status-controls',
+ *     items: {
+ *       active: {
+ *         key: 'active',
+ *         name: 'active',
+ *         content: { statePath: [], text: 'Active' },
+ *       },
+ *       inactive: {
+ *         key: 'inactive',
+ *         name: 'inactive',
+ *         content: { statePath: [], text: 'Inactive' },
+ *       },
+ *     },
+ *     selectedItems: [],
+ *   },
+ * };
+ *
+ * <TableFilters
+ *   checkboxData={filterConfig}
+ *   onSubmit={() => console.log('Filters applied')}
+ *   onReset={() => console.log('Filters reset')}
+ *   onClear={() => console.log('Filters cleared')}
+ * />
+ * ```
+ */
 export interface TableFiltersView {
+    /**
+     * Filter configuration data
+     * Maps group names to accordion information with checkbox items
+     */
+    checkboxData?: TableFilterConfig;
+    /**
+     * Callback when filters are submitted/applied
+     * Called when user clicks submit button
+     */
+    onSubmit?: () => void;
+    /**
+     * Callback when filters are reset
+     * Called when user clicks cancel button (resets to initial state)
+     */
     onReset?: () => void;
+    /**
+     * Callback when filters are cleared
+     * Called when user clicks clear button (removes all selections)
+     */
     onClear?: () => void;
-    onSubmit?: () => void;
+    /**
+     * Callback when a checkbox is toggled
+     * Provides group name and item name for the toggled checkbox
+     */
     onCheckboxToggle?: (groupName: string, name: string) => void;
+    /**
+     * Callback when filter button visibility changes
+     * Called when filter groups are added/removed to show/hide filter button
+     */
     handleMoreButtonVisibleChange?: (isVisible: boolean) => void;
-    checkboxData?: TableFilterConfig;
 }

package/dist/components/TableHead/TableHead.d.ts

@@ -1,4 +1,41 @@
 import { CommonProps } from '../../types/emotion';
+/**
+ * TableHead - Header section container for table columns
+ *
+ * A styled thead element that wraps table header rows. Provides styling
+ * for the table header section including bold font weight, border styling,
+ * and rounded corners. Used with TableRow and TableCellHeader components.
+ *
+ * @category Components
+ * @subcategory Data Display
+ *
+ * @example
+ * ```tsx
+ * // Basic table head
+ * <Table>
+ *   <TableHead>
+ *     <TableRow>
+ *       <TableCellHeader>Name</TableCellHeader>
+ *       <TableCellHeader>Email</TableCellHeader>
+ *       <TableCellHeader>Role</TableCellHeader>
+ *     </TableRow>
+ *   </TableHead>
+ *   <TableBody>
+ *     // data rows go here
+ *   </TableBody>
+ * </Table>
+ * ```
+ *
+ * @see {@link Table} - Parent table component
+ * @see {@link TableRow} - Row component for header
+ * @see {@link TableCellHeader} - Header cell component
+ * @see {@link TableBody} - Body section component
+ *
+ * @accessibility
+ * - Semantic HTML thead element
+ * - Proper table structure for screen readers
+ * - Supports ARIA attributes via CommonProps
+ */
 declare const TableHead: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/dist/components/TableRow/TableRow.d.ts

@@ -1,8 +1,3 @@
-import { CommonProps } from '../../types/emotion';
-declare const TableRow: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & CommonProps & {
-    isDisabled?: boolean;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {}>;
+import { TableRowProps } from './types';
+declare const TableRow: import("react").ForwardRefExoticComponent<TableRowProps & import("react").RefAttributes<HTMLTableRowElement>>;
 export default TableRow;

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

@@ -0,0 +1,34 @@
+import { HTMLAttributes } from 'react';
+import { CommonProps } from '../../types/emotion';
+/**
+ * Props for the TableRow component
+ *
+ * A styled table row component that represents a single row in a table.
+ * Supports disabled state for non-interactive rows.
+ *
+ * @example
+ * ```tsx
+ * // Basic table row
+ * <TableRow>
+ *   <TableCell>Data 1</TableCell>
+ *   <TableCell>Data 2</TableCell>
+ * </TableRow>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Disabled table row (aria-disabled is automatically set)
+ * <TableRow isDisabled>
+ *   <TableCell>Disabled Row</TableCell>
+ * </TableRow>
+ * ```
+ */
+export interface TableRowProps extends CommonProps, HTMLAttributes<HTMLTableRowElement> {
+    /**
+     * Whether the row is disabled
+     * Disabled rows have reduced opacity and no pointer cursor.
+     * Automatically sets aria-disabled attribute when true.
+     * @default false
+     */
+    isDisabled?: boolean;
+}