@scmlatam/web-ui 0.2.9 → 0.2.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/images/feedbackSuggestion.svg +8 -0
  2. package/dist/src/components/main.d.ts +2 -2
  3. package/dist/src/components/rb.d.ts +13 -0
  4. package/dist/src/rb-components/auth/components/AuthPasswordInput.d.ts +2 -1
  5. package/dist/src/rb-components/feedback/index.d.ts +2 -0
  6. package/dist/src/rb-components/feedback/message-alert/MessageAlert.d.ts +20 -0
  7. package/dist/src/rb-components/feedback/message-alert/index.d.ts +2 -0
  8. package/dist/src/rb-components/shell/Breadcrumbs.d.ts +30 -6
  9. package/dist/src/rb-components/table/RbTable.d.ts +2 -8
  10. package/dist/src/rb-components/table/index.d.ts +7 -6
  11. package/dist/src/rb-components/table/table.helpers.d.ts +6 -23
  12. package/dist/src/rb-components/table/types.d.ts +48 -108
  13. package/dist/src/rb-components/ui/index.d.ts +2 -0
  14. package/dist/src/rb-components/ui/primitives/RbContextMenu.d.ts +40 -0
  15. package/dist/src/rb-components/ui/primitives/RbInlineChipField.d.ts +9 -2
  16. package/dist/src/stories/rb/RbAutoCustomCompleteField.stories.d.ts +13 -0
  17. package/dist/src/stories/rb/RbCard.stories.d.ts +14 -0
  18. package/dist/src/stories/rb/RbIconButton.stories.d.ts +24 -0
  19. package/dist/src/stories/rb/RbToolbar.stories.d.ts +11 -0
  20. package/dist/src/stories/rb/RbTooltip.stories.d.ts +14 -0
  21. package/dist/web-ui.js +5147 -3808
  22. package/dist/web-ui.umd.cjs +54 -45
  23. package/package.json +3 -3
  24. package/dist/fonts/ArticulatCF-Bold.woff2 +0 -0
  25. package/dist/fonts/ArticulatCF-DemiBold.woff2 +0 -0
  26. package/dist/fonts/ArticulatCF-ExtraBold.woff2 +0 -0
  27. package/dist/fonts/ArticulatCF-Light.woff2 +0 -0
  28. package/dist/fonts/ArticulatCF-Medium.woff2 +0 -0
  29. package/dist/fonts/ArticulatCF-Normal.woff2 +0 -0
@@ -0,0 +1,8 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <mask id="mask0_530_3382" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
3
+ <rect width="24" height="24" fill="#D9D9D9"/>
4
+ </mask>
5
+ <g mask="url(#mask0_530_3382)">
6
+ <path d="M12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM9 19C8.71667 19 8.47917 18.9042 8.2875 18.7125C8.09583 18.5208 8 18.2833 8 18C8 17.7167 8.09583 17.4792 8.2875 17.2875C8.47917 17.0958 8.71667 17 9 17H15C15.2833 17 15.5208 17.0958 15.7125 17.2875C15.9042 17.4792 16 17.7167 16 18C16 18.2833 15.9042 18.5208 15.7125 18.7125C15.5208 18.9042 15.2833 19 15 19H9ZM8.25 16C7.1 15.3167 6.1875 14.4 5.5125 13.25C4.8375 12.1 4.5 10.85 4.5 9.5C4.5 7.41667 5.22917 5.64583 6.6875 4.1875C8.14583 2.72917 9.91667 2 12 2C14.0833 2 15.8542 2.72917 17.3125 4.1875C18.7708 5.64583 19.5 7.41667 19.5 9.5C19.5 10.85 19.1625 12.1 18.4875 13.25C17.8125 14.4 16.9 15.3167 15.75 16H8.25Z" fill="#9D11F2"/>
7
+ </g>
8
+ </svg>
@@ -17,6 +17,6 @@ export type { ValueItem } from './form/select/types/types';
17
17
  export type { CustomTreeItem } from './form/types/types';
18
18
  export type { Row, Option, OptionGroup, TableProps, ITableContext, PaginationModel, TableProviderProps, ContextMenu, ContextMenuProps, } from './table/types/types';
19
19
  export { initializeAuth, observeSSO, chekingSSOMS } from '../auth';
20
- export { CustomTimefield } from './form/datefield/simple/Timefield';
20
+ export { CustomTimefield as LegacyCustomTimefield } from './form/datefield/simple/Timefield';
21
21
  export { CustomSelect } from './form/select/Select';
22
- export * from '../rb-components/ui';
22
+ export * from './rb';
@@ -0,0 +1,13 @@
1
+ export { MessageAlert } from '../rb-components/feedback';
2
+ export type { MessageAlertAction, MessageAlertProps, MessageAlertType, } from '../rb-components/feedback';
3
+ export { SystemAlert } from '../rb-components/feedback/system-alert';
4
+ export { useSystemAlert as useRbSystemAlert } from '../rb-components/feedback/system-alert';
5
+ export type { SystemAlertKey, SystemAlertSeverity, } from '../rb-components/feedback/system-alert';
6
+ export { FormShell } from '../rb-components/form';
7
+ export type { FormShellProps } from '../rb-components/form';
8
+ export { PillsTabs, PillsTabs as RbPillsTabs, } from '../rb-components/navigation';
9
+ export type { PillsTabItem, PillsTabsProps } from '../rb-components/navigation';
10
+ export { Button as RBButton, Input, AutoCustomCompleteField, CustomDatefield, CustomDatePicker, CustomTimefield, CustomDateRangefield, CustomDateRangePicker, CustomDateRangeCalendar, RbInlineChipField, CalendarChipIcon, ClockChipIcon, Card, CardHeader, CardTitle, CardContent, CardFooter, IconButton as RbIconButton, Tooltip, Portal, RbContextMenu, } from '../rb-components/ui';
11
+ export type { ButtonProps as RBButtonProps, InputProps, RbInlineChipFieldProps, RbInlineChipFieldAction, RbContextMenuAlign, RbContextMenuItem, RbContextMenuPosition, RbContextMenuProps, RbContextMenuVariant, CardProps, IconButtonProps as RbIconButtonProps, TooltipProps, } from '../rb-components/ui';
12
+ export { RbTable, RbTableToolbar, RbToolbarActionButton, RbToolbarDateRangeField, RbToolbarMultiSelectField, RbToolbarSearchField, RbToolbarSelectField, } from '../rb-components/table';
13
+ export type { RbTableColumn, RbTableRowId, RbTableProps, RbTableCellParams, RbTableRowParams, RbTableInitialState, RbTablePinnedColumns, RbTableBaseRow, RbTableSize, RbTableDensity, RbTableAlign, RbTableCellContextMenuParams, RbTableCellContextMenuPosition, RbRowSelectionModel, RbRowsPerPageOption, RbAnyTableColumn, RbLegacyGridColumn, } from '../rb-components/table';
@@ -1,3 +1,4 @@
1
+ import { KeyboardEventHandler } from 'react';
1
2
  interface AuthPasswordInputProps {
2
3
  value: string;
3
4
  onChange: (value: string) => void;
@@ -5,7 +6,7 @@ interface AuthPasswordInputProps {
5
6
  placeholder: string;
6
7
  disabled?: boolean;
7
8
  autoComplete?: string;
8
- onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
9
+ onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
9
10
  }
10
11
  export declare function AuthPasswordInput({ value, onChange, label, placeholder, disabled, autoComplete, onKeyDown, }: AuthPasswordInputProps): import("react/jsx-runtime").JSX.Element;
11
12
  export {};
@@ -0,0 +1,2 @@
1
+ export * from './system-alert';
2
+ export * from './message-alert';
@@ -0,0 +1,20 @@
1
+ import { ReactNode } from 'react';
2
+ export type MessageAlertType = "alert" | "error" | "warning" | "success" | "suggestion" | "info";
3
+ export interface MessageAlertAction {
4
+ label: ReactNode;
5
+ onClick: () => void;
6
+ disabled?: boolean;
7
+ }
8
+ export interface MessageAlertProps {
9
+ type?: MessageAlertType;
10
+ title?: ReactNode;
11
+ children?: ReactNode;
12
+ message?: ReactNode;
13
+ onClose?: () => void;
14
+ closeLabel?: string;
15
+ actions?: MessageAlertAction[];
16
+ hideIcon?: boolean;
17
+ className?: string;
18
+ }
19
+ export declare function MessageAlert({ type, title, children, message, onClose, closeLabel, actions, hideIcon, className, }: MessageAlertProps): import("react/jsx-runtime").JSX.Element;
20
+ export default MessageAlert;
@@ -0,0 +1,2 @@
1
+ export { MessageAlert } from './MessageAlert';
2
+ export type { MessageAlertAction, MessageAlertProps, MessageAlertType, } from './MessageAlert';
@@ -1,9 +1,33 @@
1
+ import { ReactNode } from 'react';
2
+ export type BreadcrumbItem = {
3
+ label: ReactNode;
4
+ to?: string;
5
+ };
1
6
  interface BreadcrumbsProps {
2
- items: {
3
- label: string;
4
- to?: string;
5
- }[];
6
- separator: string;
7
+ items?: BreadcrumbItem[];
8
+ separator?: ReactNode;
9
+ className?: string;
10
+ /**
11
+ * Query params que sí son parte de navegación.
12
+ * Todo lo que no esté aquí se ignora para los breadcrumbs.
13
+ *
14
+ * Ejemplo:
15
+ * ?module=workers&view=detail&status=active&page=2
16
+ *
17
+ * Breadcrumbs mostrará solo:
18
+ * Home / Workers / Detail
19
+ */
20
+ queryKeys?: string[];
21
+ includeHome?: boolean;
22
+ homeLabel?: ReactNode;
23
+ homeTo?: string;
24
+ /**
25
+ * Opcional, por si después quieren traducir o personalizar labels.
26
+ */
27
+ labelFormatter?: (data: {
28
+ key: string;
29
+ value: string;
30
+ }) => ReactNode;
7
31
  }
8
- export default function Breadcrumbs({ items, separator, }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
32
+ export default function Breadcrumbs({ items, separator, className, queryKeys, includeHome, homeLabel, homeTo, labelFormatter, }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element | null;
9
33
  export {};
@@ -1,8 +1,2 @@
1
- import { RbTableProps } from './types';
2
- /**
3
- * ----------------------------------------------------------------------------
4
- * RB TABLE
5
- * ----------------------------------------------------------------------------
6
- */
7
- export declare function RbTable<Row = any>({ columns, rows, loading, getRowKey, title, description, toolbarLeft, toolbarRight, showToolbar, toolbarClassName, emptyText, emptyState, className, rootClassName, bodyClassName, size, fill, density, onRowClick, rowClassName, getCellClassName, getRowClassName, checkboxSelection, rowSelectionModel, setRowSelectionModel, onRowSelectionModelChange, isRowSelectable, disableRowSelectionOnClick, pinnedColumns, initialState, paginate, defaultRowsPerPage, rowsPerPageOptions, resultsLabel, viewAllLabel, prevAriaLabel, nextAriaLabel, footer, footerActions, hideFooter, }: RbTableProps<Row>): import("react/jsx-runtime").JSX.Element;
8
- export default RbTable;
1
+ import { RbTableBaseRow, RbTableProps } from './types';
2
+ export declare function RbTable<Row extends RbTableBaseRow = RbTableBaseRow>({ columns, rows, loading, getRowKey, title, description, toolbarLeft, toolbarRight, showToolbar, toolbarClassName, emptyText, emptyState, className, rootClassName, bodyClassName, size, fill, density, onRowClick, onCellContextMenu, rowClassName, getCellClassName, getRowClassName, checkboxSelection, rowSelectionModel, setRowSelectionModel, onRowSelectionModelChange, isRowSelectable, disableRowSelectionOnClick, pinnedColumns, initialState, paginate, defaultRowsPerPage, rowsPerPageOptions, resultsLabel, viewAllLabel, prevAriaLabel, nextAriaLabel, footer, footerActions, hideFooter, }: RbTableProps<Row>): import("react/jsx-runtime").JSX.Element;
@@ -1,8 +1,9 @@
1
1
  export { RbTable } from './RbTable';
2
- export { RbTable as Table } from './RbTable';
3
- export { default } from './RbTable';
4
2
  export { RbTableToolbar } from './RbTableToolbar';
5
- export type { RbTableToolbarProps } from './RbTableToolbar';
6
- export * from './toolbar';
7
- export type { RbAnyTableColumn, RbLegacyGridColumn, RbRowSelectionModel, RbRowsPerPageOption, RbTableAlign, RbTableCellParams, RbTableColumn, RbTableDensity, RbTableInitialState, RbTablePinnedColumns, RbTableProps, RbTableRowId, RbTableRowParams, RbTableSize, } from './types';
8
- export { cx, getAlignClass, getCellValue, getCssGridWidth, getDefaultRowId, getSelectionArray, getStickyWidth, isLegacyGridColumn, isSelected, normalizeTableColumns, resolvePinnedColumns, toggleSelection, } from './table.helpers';
3
+ export { RbToolbarActionButton } from './toolbar/RbToolbarActionButton';
4
+ export { RbToolbarDateRangeField } from './toolbar/RbToolbarDateRangeField';
5
+ export { RbToolbarMultiSelectField } from './toolbar/RbToolbarMultiSelectField';
6
+ export { RbToolbarSearchField } from './toolbar/RbToolbarSearchField';
7
+ export { RbToolbarSelectField } from './toolbar/RbToolbarSelectField';
8
+ export type { RbToolbarDateRangeValue, RbToolbarDateRangeFieldProps, } from './toolbar/RbToolbarDateRangeField';
9
+ export type { RbAnyTableColumn, RbLegacyGridColumn, RbRowSelectionModel, RbRowsPerPageOption, RbTableAlign, RbTableBaseRow, RbTableCellParams, RbTableColumn, RbTableDensity, RbTableInitialState, RbTablePinnedColumns, RbTableProps, RbTableRowId, RbTableRowParams, RbTableSize, RbTableCellContextMenuParams, RbTableCellContextMenuPosition, } from './types';
@@ -1,36 +1,19 @@
1
- import { RbAnyTableColumn, RbLegacyGridColumn, RbRowSelectionModel, RbTableColumn, RbTablePinnedColumns, RbTableRowId } from './types';
1
+ import { RbAnyTableColumn, RbTableBaseRow, RbLegacyGridColumn, RbRowSelectionModel, RbTableColumn, RbTablePinnedColumns, RbTableRowId } from './types';
2
2
  /**
3
3
  * ----------------------------------------------------------------------------
4
4
  * RB TABLE - HELPERS
5
5
  * ----------------------------------------------------------------------------
6
- *
7
- * Estos helpers existen para que la tabla pueda recibir columnas nuevas RB o
8
- * columnas antiguas tipo DataGrid/GridColDef.
9
- *
10
- * La idea es que la migración sea progresiva:
11
- *
12
- * - Proyectos nuevos: usar estructura RB.
13
- * - Proyectos antiguos: pueden partir reutilizando sus columnas legacy.
14
6
  */
15
7
  export declare function cx(...classes: Array<string | false | null | undefined>): string;
16
- export declare function isLegacyGridColumn<Row = any>(column: RbAnyTableColumn<Row>): column is RbLegacyGridColumn<Row>;
17
- export declare function normalizeTableColumns<Row = any>(columns?: RbAnyTableColumn<Row>[]): RbTableColumn<Row>[];
18
- export declare function getLegacyColumnWidth<Row = any>(column: RbLegacyGridColumn<Row>): string | number;
19
- export declare function getDefaultRowId<Row = any>(row: Row, index: number): RbTableRowId;
20
- export declare function getCellValue<Row = any>(row: Row, key: string): any;
8
+ export declare function isLegacyGridColumn<Row extends RbTableBaseRow = RbTableBaseRow>(column: RbAnyTableColumn<Row>): column is RbLegacyGridColumn<Row>;
9
+ export declare function normalizeTableColumns<Row extends RbTableBaseRow = RbTableBaseRow>(columns?: RbAnyTableColumn<Row>[]): RbTableColumn<Row>[];
10
+ export declare function getLegacyColumnWidth<Row extends RbTableBaseRow = RbTableBaseRow>(column: RbLegacyGridColumn<Row>): string | number;
11
+ export declare function getDefaultRowId<Row extends RbTableBaseRow = RbTableBaseRow>(row: Row, index?: number): RbTableRowId;
12
+ export declare function getCellValue<Row extends RbTableBaseRow = RbTableBaseRow>(row: Row, key: string): any;
21
13
  export declare function getSelectionArray(model?: RbRowSelectionModel): RbTableRowId[];
22
14
  export declare function isSelected(id: RbTableRowId, model?: RbRowSelectionModel): boolean;
23
15
  export declare function toggleSelection(id: RbTableRowId, model?: RbRowSelectionModel): RbTableRowId[];
24
16
  export declare function resolvePinnedColumns(pinnedColumns?: RbTablePinnedColumns, initialStatePinnedColumns?: RbTablePinnedColumns): RbTablePinnedColumns;
25
17
  export declare function getCssGridWidth(width?: number | string): string;
26
- /**
27
- * Para sticky columns necesitamos offsets en px.
28
- *
29
- * Si una columna sticky usa "1fr", no existe un ancho real calculable desde JS
30
- * sin medir el DOM. Para esta primera versión usamos un fallback razonable.
31
- *
32
- * Recomendación:
33
- * - pinned columns importantes deberían tener width numérico o px.
34
- */
35
18
  export declare function getStickyWidth(width?: number | string): number;
36
19
  export declare function getAlignClass(align?: string): "text-center justify-center" | "text-right justify-end" | "text-left justify-start";
@@ -31,6 +31,15 @@ import { default as React } from 'react';
31
31
  * La tabla normaliza internamente ambas estructuras.
32
32
  */
33
33
  export type RbTableRowId = string | number;
34
+ /**
35
+ * Todas las filas de RbTable deben traer un id estable en la data.
36
+ * Ese id no se muestra automáticamente como columna; solo se usa como key
37
+ * interna y como valor retornado al seleccionar checkboxes.
38
+ */
39
+ export type RbTableBaseRow = {
40
+ id: RbTableRowId;
41
+ [key: string]: any;
42
+ };
34
43
  export type RbTableDensity = "compact" | "comfortable";
35
44
  export type RbTableSize = "s" | "m" | "l";
36
45
  export type RbTableAlign = "left" | "center" | "right";
@@ -41,15 +50,28 @@ export type RbTablePinnedColumns = {
41
50
  export type RbTableInitialState = {
42
51
  pinnedColumns?: RbTablePinnedColumns;
43
52
  };
53
+ export type RbTableCellContextMenuPosition = {
54
+ x: number;
55
+ y: number;
56
+ };
57
+ export type RbTableCellContextMenuParams<Row extends RbTableBaseRow = RbTableBaseRow> = RbTableCellParams<Row> & {
58
+ column: RbTableColumn<Row>;
59
+ position: RbTableCellContextMenuPosition;
60
+ };
44
61
  /**
45
62
  * Estructura recomendada para columnas nuevas.
46
63
  */
47
- export type RbTableColumn<Row = any> = {
64
+ export type RbTableColumn<Row extends RbTableBaseRow = RbTableBaseRow> = {
48
65
  /**
49
66
  * Identificador de la columna.
50
67
  * En columnas nuevas usamos `key`.
51
68
  */
52
69
  key: string;
70
+ /**
71
+ * Permite ocultar la columna al consumir la tabla.
72
+ * Por defecto es true. Si se define show: false, la columna no se renderiza.
73
+ */
74
+ show?: boolean;
53
75
  /**
54
76
  * Contenido del header.
55
77
  */
@@ -68,38 +90,21 @@ export type RbTableColumn<Row = any> = {
68
90
  */
69
91
  width?: number | string;
70
92
  /**
71
- * Alineación horizontal.
72
- *
73
- * Nota:
74
- * En la primera versión visual de RbTable se fuerza izquierda para textos.
75
- * El checkbox se mantiene centrado.
93
+ * Ancho mínimo de columna. Útil para mantener lectura y activar scroll
94
+ * horizontal cuando hay muchas columnas.
76
95
  */
77
- align?: RbTableAlign;
96
+ minWidth?: number | string;
97
+ minWidthPx?: number;
78
98
  /**
79
- * Render custom de celda.
99
+ * Compatibilidad con columnas legacy tipo DataGrid.
80
100
  */
101
+ maxWidth?: number;
102
+ align?: RbTableAlign;
81
103
  render?: (row: Row, index: number) => React.ReactNode;
82
- /**
83
- * Render custom de header.
84
- */
85
104
  renderHeader?: () => React.ReactNode;
86
- /**
87
- * Si es false, permite salto de línea.
88
- * Por defecto se trunca en una línea.
89
- */
90
105
  truncate?: boolean;
91
- /**
92
- * Clases extra para header.
93
- */
94
106
  headerClassName?: string;
95
- /**
96
- * Clases extra para celda.
97
- */
98
107
  cellClassName?: string | ((row: Row, index: number) => string | undefined);
99
- /**
100
- * Props aceptadas para compatibilidad/documentación.
101
- * No todas tienen comportamiento avanzado todavía.
102
- */
103
108
  sortable?: boolean;
104
109
  filterable?: boolean;
105
110
  disabled?: boolean;
@@ -108,8 +113,13 @@ export type RbTableColumn<Row = any> = {
108
113
  * Estructura parecida a GridColDef para facilitar migración.
109
114
  * No importamos tipos de MUI para no arrastrar dependencia.
110
115
  */
111
- export type RbLegacyGridColumn<Row = any> = {
116
+ export type RbLegacyGridColumn<Row extends RbTableBaseRow = RbTableBaseRow> = {
112
117
  field: string;
118
+ /**
119
+ * Permite ocultar columnas legacy antes de renderizar.
120
+ * Por defecto es true.
121
+ */
122
+ show?: boolean;
113
123
  headerName?: React.ReactNode;
114
124
  header?: React.ReactNode;
115
125
  width?: number;
@@ -125,25 +135,20 @@ export type RbLegacyGridColumn<Row = any> = {
125
135
  renderCell?: (params: RbTableCellParams<Row>) => React.ReactNode;
126
136
  valueGetter?: (params: RbTableCellParams<Row>) => React.ReactNode;
127
137
  };
128
- export type RbAnyTableColumn<Row = any> = RbTableColumn<Row> | RbLegacyGridColumn<Row>;
129
- export type RbTableCellParams<Row = any> = {
138
+ export type RbAnyTableColumn<Row extends RbTableBaseRow = RbTableBaseRow> = RbTableColumn<Row> | RbLegacyGridColumn<Row>;
139
+ export type RbTableCellParams<Row extends RbTableBaseRow = RbTableBaseRow> = {
130
140
  row: Row;
131
141
  id: RbTableRowId;
132
142
  field: string;
133
143
  value: any;
134
144
  index: number;
135
145
  };
136
- export type RbTableRowParams<Row = any> = {
146
+ export type RbTableRowParams<Row extends RbTableBaseRow = RbTableBaseRow> = {
137
147
  row: Row;
138
148
  id: RbTableRowId;
139
149
  index: number;
140
150
  };
141
- export type RbRowSelectionModel = RbTableRowId[] | Set<RbTableRowId>
142
- /**
143
- * Compatibilidad con versiones nuevas de MUI donde el selection model puede
144
- * venir como objeto con ids.
145
- */
146
- | {
151
+ export type RbRowSelectionModel = RbTableRowId[] | Set<RbTableRowId> | {
147
152
  ids?: Set<RbTableRowId> | RbTableRowId[];
148
153
  type?: "include" | "exclude";
149
154
  };
@@ -151,107 +156,49 @@ export type RbRowsPerPageOption = number | {
151
156
  value: number;
152
157
  label: string;
153
158
  };
154
- export type RbTableProps<Row = any> = {
155
- /**
156
- * Columnas. Puede recibir columnas RB nuevas o columnas legacy tipo GridColDef.
157
- */
159
+ export type RbTableProps<Row extends RbTableBaseRow = RbTableBaseRow> = {
158
160
  columns?: RbAnyTableColumn<Row>[];
159
- /**
160
- * Data de la tabla.
161
- */
162
161
  rows?: Row[];
163
- /**
164
- * Estado loading.
165
- */
166
162
  loading?: boolean;
167
163
  /**
168
164
  * Permite definir la key de cada fila.
169
- * Si no se pasa, intenta usar row.id y si no existe usa el índice.
170
- */
171
- getRowKey?: (row: Row, index: number) => RbTableRowId;
172
- /**
173
- * Header/toolbar nuevo.
165
+ * Por defecto usa row.id.
174
166
  *
175
- * Por defecto, si existe title/description/toolbarLeft/toolbarRight,
176
- * se muestra una toolbar oscura arriba de la tabla.
177
- *
178
- * Si no quieres mostrar esa franja, usa:
179
- *
180
- * showToolbar={false}
167
+ * Importante: cada row debe traer id obligatorio en la data.
168
+ * Ese id no se muestra automáticamente en la tabla.
181
169
  */
170
+ getRowKey?: (row: Row, index: number) => RbTableRowId;
182
171
  title?: React.ReactNode;
183
172
  description?: React.ReactNode;
184
173
  toolbarLeft?: React.ReactNode;
185
174
  toolbarRight?: React.ReactNode;
186
175
  showToolbar?: boolean;
187
176
  toolbarClassName?: string;
188
- /**
189
- * Empty state.
190
- */
191
177
  emptyText?: React.ReactNode;
192
178
  emptyState?: React.ReactNode;
193
- /**
194
- * Estilos generales.
195
- */
196
179
  className?: string;
197
180
  rootClassName?: string;
198
181
  bodyClassName?: string;
199
- /**
200
- * Tamaño visual.
201
- */
202
182
  size?: RbTableSize;
203
- /**
204
- * Si true, ocupa todo el alto disponible del padre.
205
- */
206
183
  fill?: boolean;
207
- /**
208
- * Densidad visual.
209
- */
210
184
  density?: RbTableDensity;
211
- /**
212
- * Click en fila.
213
- */
214
185
  onRowClick?: (row: Row, index: number) => void;
215
186
  /**
216
- * Clase custom para fila.
187
+ * Se ejecuta al hacer clic derecho sobre una celda.
188
+ * Entrega la fila, id, columna, field, value y coordenadas del puntero.
217
189
  */
190
+ onCellContextMenu?: (params: RbTableCellContextMenuParams<Row>) => void;
218
191
  rowClassName?: string | ((params: RbTableRowParams<Row>) => string | undefined);
219
- /**
220
- * Clase custom para celda, compatible con la prop actual usada en DataGrid.
221
- */
222
192
  getCellClassName?: (params: RbTableCellParams<Row>) => string | undefined;
223
- /**
224
- * Clase custom para fila, equivalente a getRowClassName de DataGrid.
225
- */
226
193
  getRowClassName?: (params: RbTableRowParams<Row>) => string | undefined;
227
- /**
228
- * Selección.
229
- */
230
194
  checkboxSelection?: boolean;
231
195
  rowSelectionModel?: RbRowSelectionModel;
232
196
  setRowSelectionModel?: (value: RbTableRowId[]) => void;
233
197
  onRowSelectionModelChange?: (value: RbTableRowId[]) => void;
234
- /**
235
- * Controla si una fila puede seleccionarse.
236
- */
237
198
  isRowSelectable?: (params: RbTableRowParams<Row>) => boolean;
238
- /**
239
- * Evita que el click en fila seleccione.
240
- * Se deja por compatibilidad con DataGrid.
241
- */
242
199
  disableRowSelectionOnClick?: boolean;
243
- /**
244
- * Pinned columns.
245
- *
246
- * Se soporta:
247
- * - pinnedColumns={{ left: ["__check__", "fullname"], right: ["actions"] }}
248
- * - initialState={{ pinnedColumns: { left: ["__check__"] } }}
249
- */
250
200
  pinnedColumns?: RbTablePinnedColumns;
251
201
  initialState?: RbTableInitialState;
252
- /**
253
- * Paginación interna simple.
254
- */
255
202
  paginate?: boolean;
256
203
  defaultRowsPerPage?: number;
257
204
  rowsPerPageOptions?: RbRowsPerPageOption[];
@@ -259,15 +206,8 @@ export type RbTableProps<Row = any> = {
259
206
  viewAllLabel?: string;
260
207
  prevAriaLabel?: string;
261
208
  nextAriaLabel?: string;
262
- /**
263
- * Footer custom.
264
- */
265
209
  footer?: React.ReactNode;
266
210
  footerActions?: React.ReactNode;
267
- /**
268
- * Props legacy aceptadas para que la migración no explote.
269
- * En esta tabla nueva no todas tienen efecto todavía.
270
- */
271
211
  apiRef?: unknown;
272
212
  headerFilters?: boolean;
273
213
  hideFooter?: boolean;
@@ -23,6 +23,8 @@ export { CustomDatefield, CustomDatePicker, CustomTimefield, CustomDateRangefiel
23
23
  export type { CustomDatefieldProps, CustomDatePickerProps, CustomTimefieldProps, CustomDateRangefieldProps, CustomDateRangePickerProps, CustomDateRangeCalendarProps, } from './primitives/date-fields';
24
24
  export { RbInlineChipField, CalendarChipIcon, ClockChipIcon, } from './primitives/RbInlineChipField';
25
25
  export type { RbInlineChipFieldProps, RbInlineChipFieldAction, } from './primitives/RbInlineChipField';
26
+ export { RbContextMenu } from './primitives/RbContextMenu';
27
+ export type { RbContextMenuAlign, RbContextMenuItem, RbContextMenuPosition, RbContextMenuProps, RbContextMenuVariant, } from './primitives/RbContextMenu';
26
28
  export { Card, CardHeader, CardTitle, CardContent, CardFooter, } from './primitives/Card';
27
29
  export type { CardProps } from './primitives/Card';
28
30
  export { IconButton } from './primitives/IconButton';
@@ -0,0 +1,40 @@
1
+ import { default as React } from 'react';
2
+ export type RbContextMenuVariant = "light" | "dark";
3
+ export type RbContextMenuAlign = "start" | "end";
4
+ export type RbContextMenuPosition = {
5
+ x: number;
6
+ y: number;
7
+ align?: RbContextMenuAlign;
8
+ };
9
+ export type RbContextMenuItem = {
10
+ id?: React.Key;
11
+ label: React.ReactNode;
12
+ icon?: React.ReactNode;
13
+ helper?: React.ReactNode;
14
+ onClick?: () => void;
15
+ disabled?: boolean;
16
+ danger?: boolean;
17
+ dividerBefore?: boolean;
18
+ dividerAfter?: boolean;
19
+ closeOnSelect?: boolean;
20
+ className?: string;
21
+ };
22
+ export type RbContextMenuProps = {
23
+ open: boolean;
24
+ position?: RbContextMenuPosition | null;
25
+ x?: number | null;
26
+ y?: number | null;
27
+ align?: RbContextMenuAlign;
28
+ items?: RbContextMenuItem[];
29
+ variant?: RbContextMenuVariant;
30
+ ariaLabel?: string;
31
+ emptyText?: React.ReactNode;
32
+ className?: string;
33
+ itemClassName?: string;
34
+ closeOnClickOutside?: boolean;
35
+ closeOnScroll?: boolean;
36
+ closeOnResize?: boolean;
37
+ onClose: () => void;
38
+ };
39
+ export declare function RbContextMenu({ open, position, x, y, align, items, variant, ariaLabel, emptyText, className, itemClassName, closeOnClickOutside, closeOnScroll, closeOnResize, onClose, }: RbContextMenuProps): import("react/jsx-runtime").JSX.Element | null;
40
+ export default RbContextMenu;
@@ -1,12 +1,18 @@
1
1
  import { default as React } from 'react';
2
+ import { RbContextMenuVariant } from './RbContextMenu';
2
3
  type RbInlineChipFieldType = "text" | "date" | "time" | "datetime-local";
3
4
  type RbInlineChipFieldVariant = "default" | "success" | "warning" | "error" | "info" | "neutral";
4
5
  type DateSeparator = "-" | "/";
5
6
  export type RbInlineChipFieldAction = {
6
7
  label: React.ReactNode;
8
+ icon?: React.ReactNode;
9
+ helper?: React.ReactNode;
7
10
  onClick: () => void;
8
11
  danger?: boolean;
9
12
  disabled?: boolean;
13
+ dividerBefore?: boolean;
14
+ dividerAfter?: boolean;
15
+ closeOnSelect?: boolean;
10
16
  };
11
17
  export type RbInlineChipFieldProps = {
12
18
  value?: string | null;
@@ -24,12 +30,13 @@ export type RbInlineChipFieldProps = {
24
30
  * Ícono custom.
25
31
  * Si hay variant success/warning/error/info, se usa el ícono de estado.
26
32
  * Si no hay estado, puede mostrarse este ícono custom.
27
- * Si no hay nada, se mantiene el espacio vacío.
33
+ * Si no hay nada, no se reserva espacio.
28
34
  */
29
35
  icon?: React.ReactNode;
30
36
  showIcon?: boolean;
31
37
  actions?: RbInlineChipFieldAction[];
32
38
  showMenu?: boolean;
39
+ menuVariant?: RbContextMenuVariant;
33
40
  onChange?: (value: string) => void;
34
41
  onClick?: () => void;
35
42
  className?: string;
@@ -38,5 +45,5 @@ export type RbInlineChipFieldProps = {
38
45
  };
39
46
  export declare function CalendarChipIcon(): import("react/jsx-runtime").JSX.Element;
40
47
  export declare function ClockChipIcon(): import("react/jsx-runtime").JSX.Element;
41
- export declare function RbInlineChipField({ value, placeholder, type, variant, dateSeparator, editable, disabled, icon, showIcon, actions, showMenu, onChange, onClick, className, inputClassName, ariaLabel, }: RbInlineChipFieldProps): import("react/jsx-runtime").JSX.Element;
48
+ export declare function RbInlineChipField({ value, placeholder, type, variant, dateSeparator, editable, disabled, icon, showIcon, actions, showMenu, menuVariant, onChange, onClick, className, inputClassName, ariaLabel, }: RbInlineChipFieldProps): import("react/jsx-runtime").JSX.Element;
42
49
  export default RbInlineChipField;
@@ -0,0 +1,13 @@
1
+ import { StoryObj } from '@storybook/react-vite';
2
+ declare const meta: {
3
+ title: string;
4
+ component: ({ label, placeholder, values, value, setValue, white, }: import('../../rb-components').CustomAutoCompleteFieldProps) => import("react/jsx-runtime").JSX.Element;
5
+ tags: string[];
6
+ parameters: {
7
+ layout: string;
8
+ };
9
+ };
10
+ export default meta;
11
+ type Story = StoryObj<typeof meta>;
12
+ export declare const Dark: Story;
13
+ export declare const Light: Story;
@@ -0,0 +1,14 @@
1
+ import { StoryObj } from '@storybook/react-vite';
2
+ import { Card } from '../../rb-components/ui';
3
+ declare const meta: {
4
+ title: string;
5
+ component: typeof Card;
6
+ tags: string[];
7
+ parameters: {
8
+ layout: string;
9
+ };
10
+ };
11
+ export default meta;
12
+ type Story = StoryObj<typeof meta>;
13
+ export declare const Basica: Story;
14
+ export declare const VarianteDefault: Story;
@@ -0,0 +1,24 @@
1
+ import { StoryObj } from '@storybook/react-vite';
2
+ declare const meta: {
3
+ title: string;
4
+ component: import('react').ForwardRefExoticComponent<import('../../rb-components').IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
5
+ tags: string[];
6
+ parameters: {
7
+ layout: string;
8
+ };
9
+ args: {
10
+ size: "m";
11
+ active: false;
12
+ children: import("react/jsx-runtime").JSX.Element;
13
+ };
14
+ argTypes: {
15
+ size: {
16
+ control: "radio";
17
+ options: string[];
18
+ };
19
+ };
20
+ };
21
+ export default meta;
22
+ type Story = StoryObj<typeof meta>;
23
+ export declare const Playground: Story;
24
+ export declare const Activo: Story;
@@ -0,0 +1,11 @@
1
+ import { StoryObj } from '@storybook/react-vite';
2
+ declare const meta: {
3
+ title: string;
4
+ tags: string[];
5
+ parameters: {
6
+ layout: string;
7
+ };
8
+ };
9
+ export default meta;
10
+ type Story = StoryObj<typeof meta>;
11
+ export declare const Playground: Story;
@@ -0,0 +1,14 @@
1
+ import { StoryObj } from '@storybook/react-vite';
2
+ import { Tooltip } from '../../rb-components/ui';
3
+ declare const meta: {
4
+ title: string;
5
+ component: typeof Tooltip;
6
+ tags: string[];
7
+ parameters: {
8
+ layout: string;
9
+ };
10
+ };
11
+ export default meta;
12
+ type Story = StoryObj<typeof meta>;
13
+ export declare const Basico: Story;
14
+ export declare const Multilinea: Story;