@scmlatam/web-ui 0.2.38 → 0.2.42

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 (42) hide show
  1. package/dist/src/components/rb.d.ts +7 -7
  2. package/dist/src/pages/Fechas.d.ts +3 -0
  3. package/dist/src/pages/home/rb/components/VirtualTreePlayground.d.ts +1 -0
  4. package/dist/src/pages/home/rb/data/virtualTreeData.d.ts +6 -0
  5. package/dist/src/pages/home/rb/sections/TabPanelSection.d.ts +1 -0
  6. package/dist/src/rb-components/form/FormShell.d.ts +2 -1
  7. package/dist/src/rb-components/navigation/TabPanel.d.ts +49 -0
  8. package/dist/src/rb-components/navigation/index.d.ts +3 -0
  9. package/dist/src/rb-components/table/RbTable.d.ts +1 -1
  10. package/dist/src/rb-components/table/types.d.ts +19 -0
  11. package/dist/src/rb-components/timeline/Timeline.d.ts +1 -1
  12. package/dist/src/rb-components/timeline/index.d.ts +1 -1
  13. package/dist/src/rb-components/timeline/timeline.types.d.ts +17 -0
  14. package/dist/src/rb-components/timeline/timelineLayout.d.ts +4 -0
  15. package/dist/src/rb-components/tree-panel/VirtualTree.d.ts +3 -0
  16. package/dist/src/rb-components/tree-panel/index.d.ts +6 -1
  17. package/dist/src/rb-components/tree-panel/useVirtualTreeState.d.ts +27 -0
  18. package/dist/src/rb-components/tree-panel/virtualTree.types.d.ts +69 -0
  19. package/dist/src/rb-components/tree-panel/virtualTree.utils.d.ts +17 -0
  20. package/dist/src/rb-components/tree-panel/virtualTree.utils.test.d.ts +1 -0
  21. package/dist/src/rb-components/ui/index.d.ts +4 -2
  22. package/dist/src/rb-components/ui/overlays/Tooltip.d.ts +2 -1
  23. package/dist/src/rb-components/ui/primitives/AutoCustomCompleteField.d.ts +22 -0
  24. package/dist/src/rb-components/ui/primitives/Calendario.d.ts +60 -0
  25. package/dist/src/rb-components/ui/primitives/Input.d.ts +1 -0
  26. package/dist/src/rb-components/ui/primitives/date-fields/CustomDateControl.d.ts +41 -0
  27. package/dist/src/rb-components/ui/primitives/date-fields/CustomDatePicker.d.ts +4 -1
  28. package/dist/src/rb-components/ui/primitives/date-fields/CustomDateRangePicker.d.ts +5 -13
  29. package/dist/src/rb-components/ui/primitives/date-fields/CustomDateRangefield.d.ts +2 -1
  30. package/dist/src/rb-components/ui/primitives/date-fields/CustomDatefield.d.ts +4 -1
  31. package/dist/src/rb-components/ui/primitives/date-fields/CustomIndefiniteDatePicker/CustomDatePicker.d.ts +4 -1
  32. package/dist/src/rb-components/ui/primitives/date-fields/CustomIndefiniteDatePicker/YearGrid.d.ts +2 -1
  33. package/dist/src/rb-components/ui/primitives/date-fields/CustomTimefield.d.ts +2 -1
  34. package/dist/src/rb-components/ui/primitives/date-fields/DateFieldTrigger.d.ts +4 -0
  35. package/dist/src/rb-components/ui/primitives/date-fields/DateInputTrigger.d.ts +2 -0
  36. package/dist/src/rb-components/ui/primitives/date-fields/TimeFieldTrigger.d.ts +1 -0
  37. package/dist/src/rb-components/ui/primitives/date-fields/dateUtils.d.ts +6 -0
  38. package/dist/src/rb-components/ui/primitives/date-fields/index.d.ts +2 -0
  39. package/dist/src/rb-components/ui/primitives/date-fields/useDatePopover.d.ts +1 -0
  40. package/dist/web-ui.js +9740 -9099
  41. package/dist/web-ui.umd.cjs +80 -84
  42. package/package.json +1 -1
@@ -8,18 +8,18 @@ export { FormField, FormGrid, FormShell } from '../rb-components/form';
8
8
  export type { FormFieldProps, FormFieldSpan, FormGridColumnGap, FormGridProps, FormGridRowGap, FormShellProps, FormShellSize, } from '../rb-components/form';
9
9
  export { RbList, RbListItem } from '../rb-components/list';
10
10
  export type { RbListItemProps, RbListProps, RbListSize, RbListVariant, } from '../rb-components/list';
11
- export { PillsTabs, PillsTabs as RbPillsTabs, } from '../rb-components/navigation';
12
- export type { PillsTabItem, PillsTabsProps } from '../rb-components/navigation';
13
- export { Button as RBButton, Input, AutoCustomCompleteField, CustomDatefield, CustomDatePicker, CustomTimefield, CustomDateRangefield, CustomDateRangePicker, CustomDateRangeCalendar, CustomIndefiniteDatePicker, RbInlineChipField, CalendarChipIcon, ClockChipIcon, Card, CardHeader, CardTitle, CardContent, CardFooter, IconButton as RbIconButton, Tooltip, Portal, ConfirmDialog, RbContextMenu, Checkbox, Radio, RbStepper, cn, } from '../rb-components/ui';
14
- export type { AutoValueItem, ButtonProps as RBButtonProps, InputProps, CustomAutoCompleteFieldProps, CustomDatefieldProps, CustomDatePickerProps, CustomTimefieldProps, CustomDateRangefieldProps, CustomDateRangePickerProps, CustomDateRangeCalendarProps, CustomIndefiniteDatePickerProps, RbInlineChipFieldProps, RbInlineChipFieldAction, RbContextMenuAlign, RbContextMenuItem, RbContextMenuPosition, RbContextMenuProps, RbContextMenuVariant, CardProps, IconButtonProps as RbIconButtonProps, CheckboxProps, CheckboxSize, RadioProps, RbStepperProps, RbStepperStep, PortalProps, TooltipProps, ConfirmDialogProps, ConfirmDialogInitialFocus, ConfirmDialogIconType, } from '../rb-components/ui';
11
+ export { PillsTabs, PillsTabs as RbPillsTabs, TabPanel, TabPanel as RbTabPanel, } from '../rb-components/navigation';
12
+ export type { PillsTabItem, PillsTabsProps, TabPanelItem, TabPanelProps, } from '../rb-components/navigation';
13
+ export { Button as RBButton, Input, AutoCustomCompleteField, CustomDatefield, CustomDatePicker, CustomTimefield, CustomDateRangefield, CustomDateRangePicker, CustomDateRangeCalendar, CustomIndefiniteDatePicker, CustomDateControl, RbInlineChipField, CalendarChipIcon, ClockChipIcon, Card, CardHeader, CardTitle, CardContent, CardFooter, IconButton as RbIconButton, Tooltip, Portal, ConfirmDialog, RbContextMenu, Checkbox, Radio, RbStepper, cn, } from '../rb-components/ui';
14
+ export type { AutoValueItem, ButtonProps as RBButtonProps, InputProps, CustomAutoCompleteFieldProps, CustomDatefieldProps, CustomDatePickerProps, CustomTimefieldProps, CustomDateRangefieldProps, CustomDateRangePickerProps, CustomDateRangeCalendarProps, CustomIndefiniteDatePickerProps, CustomDateControlProps, RbInlineChipFieldProps, RbInlineChipFieldAction, RbContextMenuAlign, RbContextMenuItem, RbContextMenuPosition, RbContextMenuProps, RbContextMenuVariant, CardProps, IconButtonProps as RbIconButtonProps, CheckboxProps, CheckboxSize, RadioProps, RbStepperProps, RbStepperStep, PortalProps, TooltipProps, ConfirmDialogProps, ConfirmDialogInitialFocus, ConfirmDialogIconType, } from '../rb-components/ui';
15
15
  export { RbTable, RbExcelTable, RbTableToolbar, RbToolbarActionButton, RbToolbarActions, RbToolbarDateRangeField, RbToolbarMultiSelectField, RbToolbarSearchField, RbToolbarSelectField, formatRbExcelDate, formatRbExcelTime, getRbExcelValueAtPath, isRbExcelEmptyValue, isValidRbExcelDate, isValidRbExcelNumber, isValidRbExcelTime, parseRbExcelValue, setRbExcelValueAtPath, } from '../rb-components/table';
16
16
  export type { RbExcelCellContext, RbExcelCreateRowContext, RbExcelEditorContext, RbExcelFieldType, RbExcelImportContext, RbExcelParseContext, RbExcelRenderContext, RbExcelRowsChangeMeta, RbExcelRowsChangeSource, RbExcelTableActions, RbExcelTableColumn, RbExcelTableLabels, RbExcelTableProps, RbExcelTableRef, RbExcelValidationError, RbExcelValidationErrorInput, RbExcelValidationErrorSource, RbExcelValidationResult, RbExcelValueSource, RbTableColumn, RbTableRowId, RbTableProps, RbTableCellParams, RbTableRowParams, RbTableInitialState, RbTablePinnedColumns, RbTableBaseRow, RbTableSize, RbTableDensity, RbTableAlign, RbTableCellContextMenuParams, RbTableCellContextMenuPosition, RbTablePaginationMode, RbTablePaginationModel, RbRowSelectionModel, RbRowsPerPageOption, RbToolbarActionsProps, RbToolbarDateRangeFieldProps, RbToolbarDateRangeValue, RbAnyTableColumn, RbLegacyGridColumn, } from '../rb-components/table';
17
17
  export { DashboardShell, ShellContent } from '../rb-components/shell';
18
18
  export { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, } from '../rb-components/sidebar';
19
19
  export { TopBar, TopBarUserMenu } from '../rb-components/topbar';
20
- export { TreePanel, findNodeById, flattenTree, getExpandableNodeIds, getNodeSelectionState, getSelectableDescendantIds, getSelectableSubtreeIds, hasNodeChildren, isNodeSelectable, isNodeSelectionMutable, normalizeHierarchicalSelection, toggleExpandedNode, toggleNodeSelection, } from '../rb-components/tree-panel';
21
- export type { GetSelectableSubtreeOptions, TreePanelExpandedChangeDetails, TreePanelIdCollection, TreePanelNode, TreePanelNodeId, TreePanelProps, TreePanelRenderNodeParams, TreePanelSelectionChangeDetails, TreePanelSelectionState, } from '../rb-components/tree-panel';
20
+ export { TreePanel, VirtualTree, findNodeById, flattenTree, getExpandableNodeIds, getNodeSelectionState, getSelectableDescendantIds, getSelectableSubtreeIds, hasNodeChildren, isNodeSelectable, isNodeSelectionMutable, normalizeHierarchicalSelection, toggleExpandedNode, toggleNodeSelection, buildVirtualTreeIndex, filterVirtualTreeItems, getVirtualTreeAncestorIds, getVisibleVirtualTreeItems, normalizeVirtualTreeSearch, normalizeVirtualTreeSelection, toggleVirtualTreeSelection, useVirtualTreeState, } from '../rb-components/tree-panel';
21
+ export type { GetSelectableSubtreeOptions, TreePanelExpandedChangeDetails, TreePanelIdCollection, TreePanelNode, TreePanelNodeId, TreePanelProps, TreePanelRenderNodeParams, TreePanelSelectionChangeDetails, TreePanelSelectionState, VirtualTreeApiRef, VirtualTreeExpandedChangeDetails, VirtualTreeFlatItem, VirtualTreeIdCollection, VirtualTreeIndex, VirtualTreeNode, VirtualTreeNodeId, VirtualTreeNodeType, VirtualTreeProps, VirtualTreeSelectionChangeDetails, VirtualTreeSelectionMode, } from '../rb-components/tree-panel';
22
22
  export { getRbImageUrl, rbImages } from '../rb-components/images';
23
23
  export type { RbImageName } from '../rb-components/images';
24
24
  export { Timeline } from '../rb-components/timeline';
25
- export type { TimelineProps, TimelineSegment, TimelineBoundary, TimelineBoundaryClickArgs, TimelineSegmentClickArgs, TimelineBoundaryChangeArgs, TimelineSegmentId, } from '../rb-components/timeline';
25
+ export type { TimelineProps, TimelineCompactRange, TimelineSegment, TimelineBoundary, TimelineBoundaryClickArgs, TimelineSegmentClickArgs, TimelineBoundaryChangeArgs, TimelineSegmentId, } from '../rb-components/timeline';
@@ -0,0 +1,3 @@
1
+ import { PageProps } from '../components/core/types/types';
2
+ declare const Fechas: ({ location, navigate }: PageProps) => import("react").JSX.Element;
3
+ export { Fechas };
@@ -0,0 +1 @@
1
+ export declare function VirtualTreePlayground(): import("react").JSX.Element;
@@ -0,0 +1,6 @@
1
+ import { VirtualTreeNode } from '../../../../rb-components/tree-panel';
2
+ export interface VirtualTreeDemoValue {
3
+ code: string;
4
+ category: "subcompany" | "area" | "work_position";
5
+ }
6
+ export declare const VIRTUAL_TREE_DEMO_ITEMS: VirtualTreeNode<VirtualTreeDemoValue>[];
@@ -0,0 +1 @@
1
+ export declare function TabPanelSection(): import("react").JSX.Element;
@@ -33,6 +33,7 @@ export interface FormShellProps {
33
33
  headerClassName?: string;
34
34
  bodyClassName?: string;
35
35
  footerClassName?: string;
36
+ marginY?: number;
36
37
  }
37
- export declare function FormShell({ open, title, ariaLabel, alert, children, footer, onClose, loading, loadingLabel, closeLabel, size, draggable, closeOnEscape, closeOnBackdrop, className, headerClassName, bodyClassName, footerClassName, }: FormShellProps): React.JSX.Element | null;
38
+ export declare function FormShell({ open, title, ariaLabel, alert, children, footer, onClose, loading, loadingLabel, closeLabel, size, draggable, closeOnEscape, closeOnBackdrop, className, headerClassName, bodyClassName, footerClassName, marginY, }: FormShellProps): React.JSX.Element | null;
38
39
  export default FormShell;
@@ -0,0 +1,49 @@
1
+ import { default as React } from 'react';
2
+ /**
3
+ * ----------------------------------------------------------------------------
4
+ * TAB PANEL
5
+ * ----------------------------------------------------------------------------
6
+ *
7
+ * Tarjeta blanca con pestañas tipo píldora sueltas (fondo gris claro y la
8
+ * pestaña activa en base-dark) y un botón opcional para cerrar el panel.
9
+ *
10
+ * Objetivo:
11
+ * - No depende de MUI.
12
+ * - No decide qué contenido renderizar debajo de las pestañas.
13
+ * - Solo renderiza las pestañas, notifica el tab activo con onChange y
14
+ * expone onClose para el botón de cierre.
15
+ *
16
+ * Uso:
17
+ *
18
+ * const [tab, setTab] = useState("auditoria");
19
+ *
20
+ * <TabPanel
21
+ * value={tab}
22
+ * onChange={setTab}
23
+ * onClose={() => setOpen(false)}
24
+ * items={[
25
+ * { value: "totales", label: "Totales" },
26
+ * { value: "auditoria", label: "Auditoria" },
27
+ * { value: "acumulaciones", label: "Acumulaciones" },
28
+ * ]}
29
+ * >
30
+ * Contenido del tab activo.
31
+ * </TabPanel>
32
+ */
33
+ export type TabPanelItem<Value extends string = string> = {
34
+ value: Value;
35
+ label: React.ReactNode;
36
+ disabled?: boolean;
37
+ };
38
+ export type TabPanelProps<Value extends string = string> = {
39
+ value: Value;
40
+ items: TabPanelItem<Value>[];
41
+ onChange: (value: Value) => void;
42
+ onClose?: () => void;
43
+ closeLabel?: string;
44
+ ariaLabel?: string;
45
+ className?: string;
46
+ children?: React.ReactNode;
47
+ };
48
+ export declare function TabPanel<Value extends string = string>({ value, items, onChange, onClose, closeLabel, ariaLabel, className, children, }: TabPanelProps<Value>): React.JSX.Element;
49
+ export default TabPanel;
@@ -1,3 +1,6 @@
1
1
  export { PillsTabs } from './PillsTabs';
2
2
  export { PillsTabs as RbPillsTabs } from './PillsTabs';
3
3
  export type { PillsTabItem, PillsTabsProps } from './PillsTabs';
4
+ export { TabPanel } from './TabPanel';
5
+ export { TabPanel as RbTabPanel } from './TabPanel';
6
+ export type { TabPanelItem, TabPanelProps } from './TabPanel';
@@ -1,3 +1,3 @@
1
1
  import { default as React } from 'react';
2
2
  import { RbTableBaseRow, RbTableProps } from './types';
3
- 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, paginationMode, paginationModel, setPaginationModel, onPaginationModelChange, rowCount, defaultRowsPerPage, rowsPerPageOptions, resultsLabel, viewAllLabel, prevAriaLabel, nextAriaLabel, footer, footerActions, hideFooter, }: RbTableProps<Row>): React.JSX.Element;
3
+ 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, maxHeight, onRowClick, onCellContextMenu, rowClassName, getCellClassName, getRowClassName, checkboxSelection, rowSelectionModel, setRowSelectionModel, onRowSelectionModelChange, isRowSelectable, disableRowSelectionOnClick, pinnedColumns, initialState, paginate, paginationMode, paginationModel, setPaginationModel, onPaginationModelChange, rowCount, defaultRowsPerPage, rowsPerPageOptions, resultsLabel, viewAllLabel, prevAriaLabel, nextAriaLabel, footer, footerActions, hideFooter, }: RbTableProps<Row>): React.JSX.Element;
@@ -100,6 +100,14 @@ export type RbTableColumn<Row extends RbTableBaseRow = RbTableBaseRow> = {
100
100
  */
101
101
  maxWidth?: number;
102
102
  align?: RbTableAlign;
103
+ /**
104
+ * Cuando es true, el contenido de `render` ocupa todo el ancho y alto
105
+ * disponibles de la celda y define su propia alineación (por ejemplo,
106
+ * mediante flex/justify o text-align dentro del propio render).
107
+ *
108
+ * En ese caso la celda ignora `align` y no aplica el truncado con tooltip.
109
+ */
110
+ fullWidthRender?: boolean;
103
111
  render?: (row: Row, index: number) => React.ReactNode;
104
112
  renderHeader?: () => React.ReactNode;
105
113
  truncate?: boolean;
@@ -128,6 +136,10 @@ export type RbLegacyGridColumn<Row extends RbTableBaseRow = RbTableBaseRow> = {
128
136
  flex?: number;
129
137
  align?: RbTableAlign;
130
138
  headerAlign?: RbTableAlign;
139
+ /**
140
+ * Ver RbTableColumn.fullWidthRender.
141
+ */
142
+ fullWidthRender?: boolean;
131
143
  sortable?: boolean;
132
144
  filterable?: boolean;
133
145
  headerClassName?: string;
@@ -202,6 +214,13 @@ export type RbTableProps<Row extends RbTableBaseRow = RbTableBaseRow> = {
202
214
  size?: RbTableSize;
203
215
  fill?: boolean;
204
216
  density?: RbTableDensity;
217
+ /**
218
+ * Altura máxima del body de la tabla. Acepta el mismo formato que el ancho
219
+ * de columnas: number => px, o cualquier string CSS válido ("20rem", "50vh", etc).
220
+ * Si no se define, se usa el valor por defecto asociado a 'size'.
221
+ * Se ignora cuando 'fill' está activo.
222
+ */
223
+ maxHeight?: number | string;
205
224
  onRowClick?: (row: Row, index: number) => void;
206
225
  /**
207
226
  * Se ejecuta al hacer clic derecho sobre una celda.
@@ -1,3 +1,3 @@
1
1
  import { TimelineProps } from './timeline.types';
2
- export declare function Timeline({ segments, startBoundary, endBoundary, colors, formatDate, segmentTooltip, boundaryTooltip, onSegmentClick, onBoundaryClick, allowGaps, scale, editableBoundaries, exclusiveEnd, indefiniteDate, indefiniteLabel, onBoundaryDateChange, className, }: TimelineProps): import("react").JSX.Element | null;
2
+ export declare function Timeline({ segments, mode, external_labels, legend, compactRange, tooltips, startBoundary, endBoundary, colors, formatDate, segmentTooltip, boundaryTooltip, onSegmentClick, onBoundaryClick, allowGaps, scale, editableBoundaries, exclusiveEnd, indefiniteDate, indefiniteLabel, onBoundaryDateChange, className, }: TimelineProps): import("react").JSX.Element | null;
3
3
  export default Timeline;
@@ -1,2 +1,2 @@
1
1
  export { Timeline, default } from './Timeline';
2
- export type { TimelineBoundary, TimelineBoundaryClickArgs, TimelineProps, TimelineSegment, TimelineSegmentClickArgs, TimelineSegmentId, TimelineBoundaryChangeArgs, } from './timeline.types';
2
+ export type { TimelineBoundary, TimelineBoundaryClickArgs, TimelineCompactRange, TimelineProps, TimelineSegment, TimelineSegmentClickArgs, TimelineSegmentId, TimelineBoundaryChangeArgs, } from './timeline.types';
@@ -27,6 +27,10 @@ export interface TimelineBoundary {
27
27
  color?: string;
28
28
  tooltip?: React.ReactNode;
29
29
  }
30
+ export interface TimelineCompactRange {
31
+ startDate: Dayjs;
32
+ endDate: Dayjs;
33
+ }
30
34
  export interface TimelineBoundaryClickArgs {
31
35
  /** Índice del punto (0 = inicio, `segments.length` = fin). */
32
36
  index: number;
@@ -43,6 +47,19 @@ export interface TimelineSegmentClickArgs {
43
47
  }
44
48
  export interface TimelineProps {
45
49
  segments: TimelineSegment[];
50
+ /** Vista del timeline. `simple` conserva la vista con dots y etiquetas. */
51
+ mode?: "simple" | "compact";
52
+ /** Etiquetas externas para los extremos de la vista compacta. */
53
+ external_labels?: {
54
+ fecha_inicio?: React.ReactNode;
55
+ fecha_fin?: React.ReactNode;
56
+ };
57
+ /** Muestra la leyenda de segmentos en la vista compacta. */
58
+ legend?: boolean;
59
+ /** Dominio temporal usado por la vista compacta para posicionar los segmentos. */
60
+ compactRange?: TimelineCompactRange;
61
+ /** Activa los tooltips de rango en la vista compacta. */
62
+ tooltips?: boolean;
46
63
  /** Personaliza el punto/etiqueta inicial (por defecto usa la fecha inicial del primer segmento). */
47
64
  startBoundary?: TimelineBoundary;
48
65
  /** Personaliza el punto/etiqueta final (por defecto usa la fecha final del último segmento). */
@@ -4,6 +4,10 @@ export interface BuildSlotsOptions {
4
4
  /** Reparte el ancho según la duración real de cada tramo. */
5
5
  proportional?: boolean;
6
6
  indefiniteDate?: Dayjs;
7
+ domain?: {
8
+ startDate: Dayjs;
9
+ endDate: Dayjs;
10
+ };
7
11
  }
8
12
  export declare function buildSlots(segments: TimelineSegment[], allowGaps: boolean, options?: BuildSlotsOptions): TimelineSlot[];
9
13
  export declare function buildBoundaries(segments: TimelineSegment[], segmentSlots: TimelineSlot[], allowGaps: boolean): ResolvedBoundary[];
@@ -0,0 +1,3 @@
1
+ import { default as React } from 'react';
2
+ import { VirtualTreeApiRef, VirtualTreeProps } from './virtualTree.types';
3
+ export declare const VirtualTree: <TValue = unknown>(props: VirtualTreeProps<TValue> & React.RefAttributes<VirtualTreeApiRef<TValue>>) => React.ReactElement;
@@ -1,4 +1,9 @@
1
1
  export { default as TreePanel } from './TreePanel';
2
+ export { VirtualTree } from './VirtualTree';
3
+ export { useVirtualTreeState } from './useVirtualTreeState';
2
4
  export type { TreePanelExpandedChangeDetails, TreePanelIdCollection, TreePanelNode, TreePanelNodeId, TreePanelProps, TreePanelRenderNodeParams, TreePanelSelectionChangeDetails, TreePanelSelectionState, } from './treePanel.types';
3
5
  export { findNodeById, flattenTree, getExpandableNodeIds, getNodeSelectionState, getSelectableDescendantIds, getSelectableSubtreeIds, hasNodeChildren, isNodeSelectable, isNodeSelectionMutable, normalizeHierarchicalSelection, toggleExpandedNode, toggleNodeSelection, } from './treePanel.utils';
4
- export type { GetSelectableSubtreeOptions, } from './treePanel.utils';
6
+ export type { GetSelectableSubtreeOptions } from './treePanel.utils';
7
+ export type { VirtualTreeApiRef, VirtualTreeExpandedChangeDetails, VirtualTreeFlatItem, VirtualTreeIdCollection, VirtualTreeNode, VirtualTreeNodeId, VirtualTreeNodeType, VirtualTreeProps, VirtualTreeSelectionChangeDetails, VirtualTreeSelectionMode, } from './virtualTree.types';
8
+ export { buildVirtualTreeIndex, filterVirtualTreeItems, getVirtualTreeAncestorIds, getVisibleVirtualTreeItems, normalizeVirtualTreeSearch, normalizeVirtualTreeSelection, toggleVirtualTreeSelection, } from './virtualTree.utils';
9
+ export type { VirtualTreeIndex } from './virtualTree.utils';
@@ -0,0 +1,27 @@
1
+ import { VirtualTreeIdCollection, VirtualTreeNode, VirtualTreeNodeId, VirtualTreeProps, VirtualTreeSelectionMode } from './virtualTree.types';
2
+ interface UseVirtualTreeStateOptions<TValue> {
3
+ items: readonly VirtualTreeNode<TValue>[];
4
+ selectionMode: VirtualTreeSelectionMode;
5
+ selectedIds?: VirtualTreeIdCollection;
6
+ defaultSelectedIds?: VirtualTreeIdCollection;
7
+ onSelectionChange?: VirtualTreeProps<TValue>["onSelectionChange"];
8
+ expandedIds?: VirtualTreeIdCollection;
9
+ defaultExpandedIds?: VirtualTreeIdCollection;
10
+ defaultExpandAll?: boolean;
11
+ onExpandedChange?: VirtualTreeProps<TValue>["onExpandedChange"];
12
+ }
13
+ export declare function useVirtualTreeState<TValue>({ items, selectionMode, selectedIds, defaultSelectedIds, onSelectionChange, expandedIds, defaultExpandedIds, defaultExpandAll, onExpandedChange, }: UseVirtualTreeStateOptions<TValue>): {
14
+ index: import('./virtualTree.utils').VirtualTreeIndex<TValue>;
15
+ visibleItems: import('./virtualTree.types').VirtualTreeFlatItem<TValue>[];
16
+ expandedSet: Set<VirtualTreeNodeId>;
17
+ selectedSet: Set<VirtualTreeNodeId>;
18
+ selectedIds: VirtualTreeNodeId[];
19
+ toggleExpansion: (nodeId: VirtualTreeNodeId) => void;
20
+ setItemExpansion: (nodeId: VirtualTreeNodeId, expanded: boolean) => void;
21
+ expandItems: (nodeIds: readonly VirtualTreeNodeId[]) => void;
22
+ expandAll: () => void;
23
+ collapseAll: () => void;
24
+ expandAncestors: (nodeId: VirtualTreeNodeId) => void;
25
+ toggleSelection: (nodeId: VirtualTreeNodeId) => void;
26
+ };
27
+ export {};
@@ -0,0 +1,69 @@
1
+ import { default as React } from 'react';
2
+ export type VirtualTreeNodeId = string | number;
3
+ export type VirtualTreeNodeType = "subcompany" | "area" | "work_position";
4
+ export type VirtualTreeSelectionMode = "single" | "multiple";
5
+ export type VirtualTreeIdCollection = readonly VirtualTreeNodeId[] | ReadonlySet<VirtualTreeNodeId>;
6
+ export interface VirtualTreeNode<TValue = unknown> {
7
+ id: VirtualTreeNodeId;
8
+ label: string;
9
+ type: VirtualTreeNodeType;
10
+ children?: readonly VirtualTreeNode<TValue>[];
11
+ value?: TValue;
12
+ disabled?: boolean;
13
+ className?: string;
14
+ }
15
+ export interface VirtualTreeFlatItem<TValue = unknown> {
16
+ id: VirtualTreeNodeId;
17
+ node: VirtualTreeNode<TValue>;
18
+ parentId: VirtualTreeNodeId | null;
19
+ depth: number;
20
+ hasChildren: boolean;
21
+ }
22
+ export interface VirtualTreeSelectionChangeDetails<TValue = unknown> {
23
+ nodeId: VirtualTreeNodeId;
24
+ node: VirtualTreeNode<TValue> | null;
25
+ }
26
+ export interface VirtualTreeExpandedChangeDetails<TValue = unknown> {
27
+ nodeId: VirtualTreeNodeId;
28
+ node: VirtualTreeNode<TValue> | null;
29
+ }
30
+ export interface VirtualTreeApiRef<TValue = unknown> {
31
+ expandAll: () => void;
32
+ collapseAll: () => void;
33
+ setItemExpansion: (itemId: VirtualTreeNodeId, expanded: boolean) => void;
34
+ focusItem: (itemId: VirtualTreeNodeId) => void;
35
+ getItem: (itemId: VirtualTreeNodeId) => VirtualTreeNode<TValue> | undefined;
36
+ scrollToItem: (itemId: VirtualTreeNodeId) => void;
37
+ }
38
+ export interface VirtualTreeProps<TValue = unknown> {
39
+ ariaLabel?: string;
40
+ items?: readonly VirtualTreeNode<TValue>[];
41
+ selectionMode?: VirtualTreeSelectionMode;
42
+ selectedIds?: VirtualTreeIdCollection;
43
+ defaultSelectedIds?: VirtualTreeIdCollection;
44
+ onSelectionChange?: (selectedIds: VirtualTreeNodeId[], details: VirtualTreeSelectionChangeDetails<TValue>) => void;
45
+ expandedIds?: VirtualTreeIdCollection;
46
+ defaultExpandedIds?: VirtualTreeIdCollection;
47
+ defaultExpandAll?: boolean;
48
+ onExpandedChange?: (expandedIds: VirtualTreeNodeId[], details: VirtualTreeExpandedChangeDetails<TValue>) => void;
49
+ selectionDisabled?: boolean;
50
+ filterTypeLabel?: string;
51
+ searchLabel?: string;
52
+ searchPlaceholder?: string;
53
+ clearSearchLabel?: string;
54
+ subcompanyLabel?: string;
55
+ areaLabel?: string;
56
+ workPositionLabel?: string;
57
+ emptyText?: React.ReactNode;
58
+ noResultsText?: React.ReactNode;
59
+ expandLabel?: string;
60
+ collapseLabel?: string;
61
+ height?: number;
62
+ rowHeight?: number;
63
+ overscanCount?: number;
64
+ loading?: boolean;
65
+ loadingLabel?: string;
66
+ className?: string;
67
+ headerClassName?: string;
68
+ bodyClassName?: string;
69
+ }
@@ -0,0 +1,17 @@
1
+ import { VirtualTreeFlatItem, VirtualTreeIdCollection, VirtualTreeNode, VirtualTreeNodeId, VirtualTreeNodeType, VirtualTreeSelectionMode } from './virtualTree.types';
2
+ export interface VirtualTreeIndex<TValue = unknown> {
3
+ allItems: VirtualTreeFlatItem<TValue>[];
4
+ itemsById: Map<VirtualTreeNodeId, VirtualTreeFlatItem<TValue>>;
5
+ expandableIds: Set<VirtualTreeNodeId>;
6
+ rootIds: VirtualTreeNodeId[];
7
+ }
8
+ export declare function toVirtualTreeIdArray(value?: VirtualTreeIdCollection): VirtualTreeNodeId[];
9
+ export declare function buildVirtualTreeIndex<TValue>(items: readonly VirtualTreeNode<TValue>[]): VirtualTreeIndex<TValue>;
10
+ export declare function getVirtualTreeAncestorIds<TValue>(index: VirtualTreeIndex<TValue>, nodeId: VirtualTreeNodeId): VirtualTreeNodeId[];
11
+ export declare function getVisibleVirtualTreeItems<TValue>(index: VirtualTreeIndex<TValue>, expandedIds: ReadonlySet<VirtualTreeNodeId>): VirtualTreeFlatItem<TValue>[];
12
+ export declare function normalizeVirtualTreeSearch(value: string): string;
13
+ export declare function filterVirtualTreeItems<TValue>(index: VirtualTreeIndex<TValue>, filterType: VirtualTreeNodeType, query: string): VirtualTreeFlatItem<TValue>[];
14
+ export declare function getVirtualTreeBranchIds<TValue>(items: readonly VirtualTreeFlatItem<TValue>[]): Set<VirtualTreeNodeId>;
15
+ export declare function getVisibleFilteredVirtualTreeItems<TValue>(index: VirtualTreeIndex<TValue>, items: readonly VirtualTreeFlatItem<TValue>[], expandedIds: ReadonlySet<VirtualTreeNodeId>): VirtualTreeFlatItem<TValue>[];
16
+ export declare function normalizeVirtualTreeSelection<TValue>(index: VirtualTreeIndex<TValue>, selectedIds: VirtualTreeIdCollection | undefined, mode: VirtualTreeSelectionMode): VirtualTreeNodeId[];
17
+ export declare function toggleVirtualTreeSelection<TValue>(index: VirtualTreeIndex<TValue>, selectedIds: VirtualTreeIdCollection | undefined, nodeId: VirtualTreeNodeId, mode: VirtualTreeSelectionMode): VirtualTreeNodeId[];
@@ -14,8 +14,10 @@ export { Button } from './primitives/Button';
14
14
  export type { ButtonProps } from './primitives/Button';
15
15
  export { AutoCustomCompleteField } from './primitives/AutoCustomCompleteField';
16
16
  export type { AutoValueItem, CustomAutoCompleteFieldProps, } from './primitives/AutoCustomCompleteField';
17
- export { CustomDatefield, CustomDatePicker, CustomIndefiniteDatePicker, CustomTimefield, CustomDateRangefield, CustomDateRangePicker, CustomDateRangeCalendar, } from './primitives/date-fields';
18
- export type { CustomDatefieldProps, CustomDatePickerProps, CustomIndefiniteDatePickerProps, CustomTimefieldProps, CustomDateRangefieldProps, CustomDateRangePickerProps, CustomDateRangeCalendarProps, } from './primitives/date-fields';
17
+ export { CustomDatefield, CustomDatePicker, CustomIndefiniteDatePicker, CustomTimefield, CustomDateRangefield, CustomDateRangePicker, CustomDateRangeCalendar, CustomDateControl, } from './primitives/date-fields';
18
+ export type { CustomDatefieldProps, CustomDatePickerProps, CustomIndefiniteDatePickerProps, CustomTimefieldProps, CustomDateRangefieldProps, CustomDateRangePickerProps, CustomDateRangeCalendarProps, CustomDateControlProps, } from './primitives/date-fields';
19
+ export { Calendario } from './primitives/Calendario';
20
+ export type { CalendarioProps, CalendarioSingleProps, CalendarioRangeProps, CalendarioRange, CalendarioMonths, } from './primitives/Calendario';
19
21
  export { RbInlineChipField, CalendarChipIcon, ClockChipIcon, } from './primitives/RbInlineChipField';
20
22
  export type { RbInlineChipFieldProps, RbInlineChipFieldAction, } from './primitives/RbInlineChipField';
21
23
  export { RbContextMenu } from './primitives/RbContextMenu';
@@ -6,9 +6,10 @@ export interface TooltipProps {
6
6
  placement?: TooltipPlacement;
7
7
  multiline?: boolean;
8
8
  disabled?: boolean;
9
+ triggerClassName?: string;
9
10
  className?: string;
10
11
  openDelay?: number;
11
12
  closeDelay?: number;
12
13
  }
13
- export default function Tooltip({ content, children, placement, multiline, disabled, className, openDelay, closeDelay, }: TooltipProps): React.JSX.Element;
14
+ export default function Tooltip({ content, children, placement, multiline, disabled, triggerClassName, className, openDelay, closeDelay, }: TooltipProps): React.JSX.Element;
14
15
  export {};
@@ -42,6 +42,22 @@ export interface AutoCompleteSearchConfig {
42
42
  * values. El componente no vuelve a filtrarlas.
43
43
  */
44
44
  mode?: AutoCompleteSearchMode;
45
+ /**
46
+ * Si se define, permite crear una opción nueva
47
+ * directamente desde el texto de búsqueda, sin
48
+ * necesidad de un botón externo.
49
+ *
50
+ * Se muestra como un ítem adicional dentro del
51
+ * listado cuando el texto ingresado no coincide
52
+ * exactamente con ninguna opción existente.
53
+ */
54
+ onCreateOption?: (value: string) => void;
55
+ /**
56
+ * Personaliza la etiqueta del ítem de creación.
57
+ *
58
+ * Por defecto: `Crear "<value>"`.
59
+ */
60
+ createOptionLabel?: (value: string) => string;
45
61
  }
46
62
  interface CustomAutoCompleteBaseProps {
47
63
  id?: string;
@@ -50,10 +66,16 @@ interface CustomAutoCompleteBaseProps {
50
66
  values: AutoValueItem[];
51
67
  white: boolean;
52
68
  disabled?: boolean;
69
+ required?: boolean;
53
70
  error?: boolean;
54
71
  helperText?: ReactNode;
55
72
  emptyText?: ReactNode;
56
73
  clearLabel?: string;
74
+ /**
75
+ * Controla la visibilidad del botón para limpiar
76
+ * los elementos seleccionados.
77
+ */
78
+ showClearButton?: boolean;
57
79
  /**
58
80
  * Habilita el buscador dentro del listado.
59
81
  */
@@ -0,0 +1,60 @@
1
+ import { default as React } from 'react';
2
+ import { Dayjs } from 'dayjs';
3
+ declare const CALENDARIO_LOCALES: {
4
+ readonly en: import('react-day-picker').DayPickerLocale;
5
+ readonly es: import('react-day-picker').DayPickerLocale;
6
+ };
7
+ type CalendarioLocale = keyof typeof CALENDARIO_LOCALES;
8
+ export type CalendarioMonths = 1 | 2 | 3;
9
+ export type CalendarioRange = [Dayjs | null, Dayjs | null];
10
+ interface CalendarioBaseProps {
11
+ label: string;
12
+ disabled: boolean;
13
+ white: boolean;
14
+ fullWidth: boolean;
15
+ placeholder?: string;
16
+ captionLayout?: "label" | "dropdown";
17
+ locale?: CalendarioLocale | null;
18
+ minDate?: Dayjs | Date;
19
+ maxDate?: Dayjs | Date;
20
+ calendarWhite?: boolean;
21
+ /**
22
+ * Cantidad de meses visibles en el panel:
23
+ * 1 simple, 2 doble, 3 triple.
24
+ */
25
+ months?: CalendarioMonths;
26
+ /**
27
+ * Centra los calendarios y la cabecera
28
+ * dentro del panel.
29
+ */
30
+ centerCalendars?: boolean;
31
+ /**
32
+ * Muestra el valor del trigger en formato corto
33
+ * (DD/MM/YY), útil en espacios reducidos.
34
+ */
35
+ compact?: boolean;
36
+ /**
37
+ * Activa el estado visual y accesible de error.
38
+ */
39
+ error?: boolean;
40
+ /**
41
+ * Texto de ayuda o validación mostrado
42
+ * bajo el campo.
43
+ */
44
+ helperText?: React.ReactNode;
45
+ }
46
+ export interface CalendarioSingleProps extends CalendarioBaseProps {
47
+ selectionMode?: "single";
48
+ initialValue: Dayjs | null;
49
+ value: Dayjs | null;
50
+ setValue: (newValue: Dayjs | null) => void;
51
+ }
52
+ export interface CalendarioRangeProps extends CalendarioBaseProps {
53
+ selectionMode: "range";
54
+ initialValue: CalendarioRange;
55
+ value: CalendarioRange;
56
+ setValue: (newValue: CalendarioRange) => void;
57
+ }
58
+ export type CalendarioProps = CalendarioSingleProps | CalendarioRangeProps;
59
+ declare const Calendario: (props: CalendarioProps) => React.JSX.Element;
60
+ export { Calendario };
@@ -4,6 +4,7 @@ export type BaseInputProps = {
4
4
  containerClassName?: string;
5
5
  label?: React.ReactNode;
6
6
  labelVariant?: InputLabelVariant;
7
+ white?: boolean;
7
8
  hint?: React.ReactNode;
8
9
  helperText?: React.ReactNode;
9
10
  error?: boolean;
@@ -0,0 +1,41 @@
1
+ import { Dayjs } from 'dayjs';
2
+ import { CustomDatePickerProps } from './CustomDatePicker';
3
+ import { CustomDatePickerProps as CustomFieldDatePickerProps } from './CustomIndefiniteDatePicker/CustomDatePicker';
4
+ import { CustomIndefiniteDatePickerProps } from './CustomIndefiniteDatePicker/CustomIndefiniteDatePicker';
5
+ type DateControlVariant = "input" | "field";
6
+ type DateControlBaseProps = {
7
+ label: string;
8
+ initialValue?: Dayjs | null;
9
+ value: Dayjs | null;
10
+ setValue: (newValue: Dayjs | null) => void;
11
+ disabled?: boolean;
12
+ required?: boolean;
13
+ white?: boolean;
14
+ fullWidth?: boolean;
15
+ placeholder?: string;
16
+ minDate?: Dayjs | Date;
17
+ maxDate?: Dayjs | Date;
18
+ error?: boolean;
19
+ helperText?: React.ReactNode;
20
+ };
21
+ type DateControlPickerProps = Omit<CustomDatePickerProps, "label" | "initialValue" | "value" | "setValue" | "disabled" | "required" | "white" | "fullWidth" | "placeholder" | "error" | "helperText">;
22
+ type DateControlIndefiniteProps = Omit<CustomIndefiniteDatePickerProps, "label" | "value" | "setValue" | "disabled" | "required" | "white" | "fullWidth" | "placeholder" | "error" | "helperText" | "indefinite" | "onIndefiniteChange">;
23
+ type DateControlFieldProps = Omit<CustomFieldDatePickerProps, "label" | "value" | "setValue" | "disabled" | "required" | "white" | "fullWidth" | "placeholder" | "error" | "helperText">;
24
+ export interface CustomDateControlProps extends DateControlBaseProps {
25
+ /** Visualizacion editable tipo input o visualizacion compacta tipo field. */
26
+ variant?: DateControlVariant;
27
+ /** Usa el selector de fecha y hora de CustomDatefield. */
28
+ withTime?: boolean;
29
+ /** Activa la visualizacion y comportamiento de fecha indefinida. */
30
+ indefinite?: boolean;
31
+ /** Handler requerido cuando se muestra la opcion indefinida. */
32
+ onIndefiniteChange?: (indefinite: boolean) => void;
33
+ /** Props especificas del CustomDatePicker editable. */
34
+ pickerProps?: DateControlPickerProps;
35
+ /** Props especificas de la visualizacion compacta tipo field. */
36
+ fieldProps?: DateControlFieldProps;
37
+ /** Props especificas de CustomIndefiniteDatePicker. */
38
+ indefiniteProps?: DateControlIndefiniteProps;
39
+ }
40
+ declare const CustomDateControl: ({ label, initialValue, value, setValue, disabled, required, white, fullWidth, placeholder, minDate, maxDate, error, helperText, variant, withTime, indefinite, onIndefiniteChange, pickerProps, fieldProps, indefiniteProps, }: CustomDateControlProps) => import("react").JSX.Element;
41
+ export { CustomDateControl };
@@ -11,11 +11,14 @@ export interface CustomDatePickerProps {
11
11
  value: Dayjs | null;
12
12
  setValue: (newValue: Dayjs | null) => void;
13
13
  disabled: boolean;
14
+ required?: boolean;
14
15
  white: boolean;
15
16
  fullWidth: boolean;
16
17
  placeholder?: string;
17
18
  captionLayout?: "label" | "dropdown";
18
19
  locale?: DatePickerLocale | null;
20
+ minDate?: Dayjs | Date;
21
+ maxDate?: Dayjs | Date;
19
22
  /**
20
23
  * Activa el estado visual y accesible de error.
21
24
  */
@@ -26,5 +29,5 @@ export interface CustomDatePickerProps {
26
29
  */
27
30
  helperText?: React.ReactNode;
28
31
  }
29
- declare const CustomDatePicker: ({ label, initialValue, value, setValue, disabled, white, fullWidth, placeholder, captionLayout, error, helperText, locale, }: CustomDatePickerProps) => React.JSX.Element;
32
+ declare const CustomDatePicker: ({ label, initialValue, value, setValue, disabled, required, white, fullWidth, placeholder, captionLayout, error, helperText, locale, minDate: minDateProp, maxDate: maxDateProp, }: CustomDatePickerProps) => React.JSX.Element;
30
33
  export { CustomDatePicker };
@@ -2,20 +2,12 @@ import { default as React } from 'react';
2
2
  import { Dayjs } from 'dayjs';
3
3
  export interface CustomDateRangePickerProps {
4
4
  label: string;
5
- initialValue: [
6
- Dayjs | null,
7
- Dayjs | null
8
- ];
9
- value: [
10
- Dayjs | null,
11
- Dayjs | null
12
- ];
13
- setValue: (newValue: [
14
- Dayjs | null,
15
- Dayjs | null
16
- ]) => void;
5
+ initialValue: [Dayjs | null, Dayjs | null];
6
+ value: [Dayjs | null, Dayjs | null];
7
+ setValue: (newValue: [Dayjs | null, Dayjs | null]) => void;
17
8
  calendars: 1 | 2 | 3;
18
9
  disabled: boolean;
10
+ required?: boolean;
19
11
  white: boolean;
20
12
  fullWidth: boolean;
21
13
  /**
@@ -24,5 +16,5 @@ export interface CustomDateRangePickerProps {
24
16
  */
25
17
  compact?: boolean;
26
18
  }
27
- declare const CustomDateRangePicker: ({ label, initialValue, value, setValue, calendars, disabled, white, fullWidth, compact, }: CustomDateRangePickerProps) => React.JSX.Element;
19
+ declare const CustomDateRangePicker: ({ label, initialValue, value, setValue, calendars, disabled, required, white, fullWidth, compact, }: CustomDateRangePickerProps) => React.JSX.Element;
28
20
  export { CustomDateRangePicker };
@@ -5,6 +5,7 @@ export interface CustomDateRangefieldProps {
5
5
  value: [Dayjs | null, Dayjs | null];
6
6
  setValue: (newValue: [Dayjs | null, Dayjs | null]) => void;
7
7
  disabled: boolean;
8
+ required?: boolean;
8
9
  }
9
- declare const CustomDateRangefield: ({ label, value, setValue, disabled, }: CustomDateRangefieldProps) => React.JSX.Element;
10
+ declare const CustomDateRangefield: ({ label, value, setValue, disabled, required, }: CustomDateRangefieldProps) => React.JSX.Element;
10
11
  export { CustomDateRangefield };
@@ -6,8 +6,11 @@ export interface CustomDatefieldProps {
6
6
  value: Dayjs | null;
7
7
  setValue: (newValue: Dayjs | null) => void;
8
8
  disabled: boolean;
9
+ required?: boolean;
9
10
  white: boolean;
10
11
  fullWidth: boolean;
12
+ minDate?: Dayjs | Date;
13
+ maxDate?: Dayjs | Date;
11
14
  }
12
- declare const CustomDatefield: ({ label, initialValue, value, setValue, disabled, white, fullWidth, }: CustomDatefieldProps) => React.JSX.Element;
15
+ declare const CustomDatefield: ({ label, initialValue, value, setValue, disabled, required, white, fullWidth, minDate, maxDate, }: CustomDatefieldProps) => React.JSX.Element;
13
16
  export { CustomDatefield };