sera-components 1.6.2 → 1.6.8

package/dist/misc/index.d.ts

@@ -3,3 +3,4 @@ export * from './language';
 export * from './transition';
 export * from './menu';
 export * from './locale';
+export * from './row';

package/dist/misc/row.d.ts

@@ -0,0 +1,54 @@
+import { default as React } from 'react';
+import { MantineSpacing } from '@mantine/core';
+/**
+ * Props for the SeraRow component.
+ */
+export interface SeraRowProps {
+    /** The content of the row */
+    children: React.ReactNode;
+    /** Gap between items, uses Mantine spacing theme */
+    gap?: MantineSpacing;
+    /** Vertical alignment of items (align-items CSS property) */
+    align?: React.CSSProperties["alignItems"];
+    /** Optional class name */
+    className?: string;
+    /** Optional inline styles */
+    style?: React.CSSProperties;
+}
+/**
+ * A flexible row layout component that wraps items with support for gaps and alignment.
+ *
+ * @example
+ * ```tsx
+ * <SeraRow gap="md" align="center">
+ *   <SeraCol>Item 1</SeraCol>
+ *   <SeraCol>Item 2</SeraCol>
+ * </SeraRow>
+ * ```
+ */
+export declare const SeraRow: ({ children, gap, align, className, style, }: SeraRowProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Props for the SeraCol component.
+ */
+export interface SeraColProps {
+    /** The content of the column */
+    children: React.ReactNode;
+    /** Fixed span width out of 12 columns (e.g., 6/12 = 50%). Takes precedence over grow. */
+    span?: number;
+    /** Flex grow factor. 0 means no grow (fit content). Default is 1 if both span and grow are not specified. */
+    grow?: number;
+    /** Optional class name */
+    className?: string;
+    /** Optional inline styles */
+    style?: React.CSSProperties;
+}
+/**
+ * A column component for flexible layouts supporting both fixed grid spans and flex grow.
+ *
+ * @example
+ * ```tsx
+ * <SeraCol span={6}>Fixed 50% width</SeraCol>
+ * <SeraCol grow={1}>Flexible width</SeraCol>
+ * ```
+ */
+export declare const SeraCol: ({ children, span, grow, className, style, }: SeraColProps) => import("react/jsx-runtime").JSX.Element;

package/dist/table/embedded-table.d.ts

@@ -8,6 +8,10 @@ export interface SeraEmbeddedTableProps<R> {
     columns: SeraColumn<R>[];
     data: R[];
     actions?: SeraActionConfig<number>;
+    /** Whether to show striped rows, defaults to true */
+    striped?: boolean;
+    /** Whether to show selection checkboxes. Defaults to true if edit/delete actions exist, otherwise false. */
+    selectable?: boolean;
 }
 export declare const DEFAULT_PAGINATION_POSITIONS: Set<"topRight" | "bottomLeft" | "bottomRight">;
 export declare const SeraEmbeddedTable: <R>(props: SeraEmbeddedTableProps<R>) => import("react/jsx-runtime").JSX.Element;

package/dist/table/make-columns.d.ts

@@ -9,6 +9,26 @@ export interface SeraColumn<R> {
     title: React.ReactNode;
     accessorFn: (record: R) => any;
     render: (record: R) => React.ReactNode;
+    /**
+     * Optional function to determine row spanning behavior for this column.
+     * @param record - The current row's data
+     * @param rowIndex - The index of the current row in the visible data
+     * @returns
+     *   - undefined or 1: normal cell (no spanning)
+     *   - 0: skip this cell (it's covered by a rowSpan from a cell above)
+     *   - >1: this cell spans that many rows
+     */
+    rowSpan?: (record: R, rowIndex: number) => number | undefined;
+    /**
+     * Optional function to determine column spanning behavior for this column.
+     * @param record - The current row's data
+     * @param rowIndex - The index of the current row in the visible data
+     * @returns
+     *   - undefined or 1: normal cell (no spanning)
+     *   - 0: skip this cell (it's covered by a colSpan from a cell to the left)
+     *   - >1: this cell spans that many columns
+     */
+    colSpan?: (record: R, rowIndex: number) => number | undefined;
 }
 /**
  * Creates a table column configuration for displaying entity properties in a data table.

package/dist/table/table-action.d.ts

@@ -14,3 +14,4 @@ export declare const SeraTableAction: <ID extends string | number>({ actions, re
     selectedRowKeys: ID[];
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const hasAction: <ID extends string | number>(actions?: SeraActionConfig<ID>) => boolean;
+export declare const hasSelectAction: <ID extends string | number>(actions?: SeraActionConfig<ID>) => boolean;

package/dist/table/table-content.d.ts

@@ -6,4 +6,6 @@ export declare const SeraTableContent: <R>(props: {
     bordered?: boolean;
     hasTopSection?: boolean;
     hasBottomSection?: boolean;
+    /** Whether to show striped rows, defaults to true */
+    striped?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
 export * from './utils';
 export * from './trie';
 export * from './property-utils';
+export * from './test-id';

package/dist/utils/test-id.d.ts

@@ -0,0 +1,72 @@
+import { DataProperty, NestedProperty, ObjectProperty } from 'sera-db';
+/**
+ * Context to control test ID generation.
+ * Set to true to enable data-testid attributes on components.
+ *
+ * @example
+ * ```tsx
+ * // In your app entry point
+ * import { TestIdProvider } from "sera-components";
+ *
+ * function App() {
+ *   // Enable test IDs only in development/test mode
+ *   const enableTestIds = import.meta.env.DEV || import.meta.env.MODE === "test";
+ *
+ *   return (
+ *     <TestIdProvider value={enableTestIds}>
+ *       <YourApp />
+ *     </TestIdProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare const TestIdContext: import('react').Context<boolean>;
+/**
+ * Provider component for enabling/disabling test IDs globally.
+ *
+ * @example
+ * ```tsx
+ * <TestIdProvider value={true}>
+ *   <App />
+ * </TestIdProvider>
+ * ```
+ */
+export declare const TestIdProvider: import('react').Provider<boolean>;
+/**
+ * Hook that returns test ID props when test IDs are enabled via TestIdContext.
+ * Returns an object with data-testid attribute when enabled, or an empty object when disabled.
+ *
+ * @param name - The test ID name to use
+ * @returns An object containing the data-testid attribute or an empty object
+ *
+ * @example
+ * ```tsx
+ * function MyInput({ name }: { name: string }) {
+ *   const testId = useTestId(`input:${name}`);
+ *   return <input {...testId} />;
+ * }
+ * ```
+ */
+export declare function useTestId(name: string): {
+    "data-testid"?: string;
+};
+/**
+ * Non-hook utility for getting test ID props.
+ * Use this when you can't use hooks (e.g., in render functions or callbacks).
+ *
+ * @param name - The test ID name to use
+ * @param enabled - Whether test IDs are enabled
+ * @returns An object containing the data-testid attribute or an empty object
+ */
+export declare function getTestIdProps(name: string, enabled: boolean): {
+    "data-testid"?: string;
+};
+/**
+ * Hook that returns a test ID string for a given property.
+ *
+ * @param property - The property object, which can be a DataProperty, ObjectProperty, or NestedProperty
+ * @param postfix - An optional postfix string to append to the test ID (defaults to empty string)
+ */
+export declare function usePropertyTestId(property: DataProperty | ObjectProperty | NestedProperty, postfix?: string): {
+    "data-testid"?: string;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sera-components",
   "private": false,
-  "version": "1.6.2",
+  "version": "1.6.8",
   "type": "module",
   "files": [
     "dist"