@scmlatam/web-ui 0.2.29 → 0.2.31
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.
- package/dist/src/components/rb.d.ts +2 -2
- package/dist/src/pages/home/rb/sections/TimelineSection.d.ts +1 -0
- package/dist/src/rb-components/index.d.ts +1 -0
- package/dist/src/rb-components/timeline/Timeline.d.ts +4 -0
- package/dist/src/rb-components/timeline/index.d.ts +2 -0
- package/dist/src/rb-components/timeline/timeline.types.d.ts +65 -0
- package/dist/src/rb-components/ui/index.d.ts +2 -2
- package/dist/src/rb-components/ui/primitives/date-fields/CustomIndefiniteDatePicker.d.ts +17 -0
- package/dist/src/rb-components/ui/primitives/date-fields/index.d.ts +2 -0
- package/dist/src/rb-components/ui/primitives/date-fields/useDatePopover.d.ts +2 -0
- package/dist/web-ui.js +3334 -3170
- package/dist/web-ui.umd.cjs +62 -62
- package/package.json +1 -1
|
@@ -10,8 +10,8 @@ export { RbList, RbListItem } from '../rb-components/list';
|
|
|
10
10
|
export type { RbListItemProps, RbListProps, RbListSize, RbListVariant, } from '../rb-components/list';
|
|
11
11
|
export { PillsTabs, PillsTabs as RbPillsTabs, } from '../rb-components/navigation';
|
|
12
12
|
export type { PillsTabItem, PillsTabsProps } from '../rb-components/navigation';
|
|
13
|
-
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, 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, 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';
|
|
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';
|
|
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';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function TimelineSection(): import("react").JSX.Element;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { TimelineProps } from './timeline.types';
|
|
3
|
+
export declare function Timeline({ segments, startBoundary, endBoundary, colors, formatDate, segmentTooltip, boundaryTooltip, onSegmentClick, onBoundaryClick, className, }: TimelineProps): React.JSX.Element | null;
|
|
4
|
+
export default Timeline;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { Dayjs } from 'dayjs';
|
|
2
|
+
import { default as React } from 'react';
|
|
3
|
+
export type TimelineSegmentId = string | number;
|
|
4
|
+
export interface TimelineSegment {
|
|
5
|
+
id: TimelineSegmentId;
|
|
6
|
+
startDate: Dayjs;
|
|
7
|
+
endDate: Dayjs;
|
|
8
|
+
label?: React.ReactNode;
|
|
9
|
+
/**
|
|
10
|
+
* Color explícito del segmento. Si no se define, se toma del
|
|
11
|
+
* `colors` de `TimelineProps` en el orden de aparición del `id`.
|
|
12
|
+
*/
|
|
13
|
+
color?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Tooltip por segmento. Cuando se define, sustituye al `segmentTooltip`
|
|
16
|
+
* global de `TimelineProps` para este segmento.
|
|
17
|
+
*/
|
|
18
|
+
tooltip?: React.ReactNode;
|
|
19
|
+
}
|
|
20
|
+
export interface TimelineBoundary {
|
|
21
|
+
/**
|
|
22
|
+
* Etiqueta mostrada bajo el punto extremo. Si se omite, se usa la fecha
|
|
23
|
+
* del segmento adyacente formateada con `formatDate`.
|
|
24
|
+
*/
|
|
25
|
+
label?: React.ReactNode;
|
|
26
|
+
color?: string;
|
|
27
|
+
tooltip?: React.ReactNode;
|
|
28
|
+
}
|
|
29
|
+
export interface TimelineBoundaryClickArgs {
|
|
30
|
+
/** Índice del punto (0 = inicio, `segments.length` = fin). */
|
|
31
|
+
index: number;
|
|
32
|
+
/** Segmento previo al punto (undefined si es el punto inicial). */
|
|
33
|
+
previousSegment?: TimelineSegment;
|
|
34
|
+
/** Segmento posterior al punto (undefined si es el punto final). */
|
|
35
|
+
nextSegment?: TimelineSegment;
|
|
36
|
+
anchorEl: HTMLElement;
|
|
37
|
+
}
|
|
38
|
+
export interface TimelineSegmentClickArgs {
|
|
39
|
+
segment: TimelineSegment;
|
|
40
|
+
index: number;
|
|
41
|
+
anchorEl: HTMLElement;
|
|
42
|
+
}
|
|
43
|
+
export interface TimelineProps {
|
|
44
|
+
segments: TimelineSegment[];
|
|
45
|
+
/** Personaliza el punto/etiqueta inicial (por defecto usa la fecha inicial del primer segmento). */
|
|
46
|
+
startBoundary?: TimelineBoundary;
|
|
47
|
+
/** Personaliza el punto/etiqueta final (por defecto usa la fecha final del último segmento). */
|
|
48
|
+
endBoundary?: TimelineBoundary;
|
|
49
|
+
/**
|
|
50
|
+
* Paleta usada para colorear segmentos que no definan `color`. Se asigna
|
|
51
|
+
* por `id` respetando el orden de aparición.
|
|
52
|
+
*/
|
|
53
|
+
colors?: string[];
|
|
54
|
+
/** Formateador de fechas (por defecto `DD/MM/YYYY`). */
|
|
55
|
+
formatDate?: (date: Dayjs) => string;
|
|
56
|
+
/** Tooltip global aplicado a segmentos que no definan su propio `tooltip`. */
|
|
57
|
+
segmentTooltip?: (segment: TimelineSegment, index: number) => React.ReactNode;
|
|
58
|
+
/** Tooltip global aplicado a puntos intermedios. */
|
|
59
|
+
boundaryTooltip?: (args: TimelineBoundaryClickArgs) => React.ReactNode;
|
|
60
|
+
/** Handler opcional para clic en la etiqueta de un segmento. */
|
|
61
|
+
onSegmentClick?: (args: TimelineSegmentClickArgs) => void;
|
|
62
|
+
/** Handler opcional para clic en un punto intermedio (no se dispara en los extremos). */
|
|
63
|
+
onBoundaryClick?: (args: TimelineBoundaryClickArgs) => void;
|
|
64
|
+
className?: string;
|
|
65
|
+
}
|
|
@@ -14,8 +14,8 @@ 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, CustomTimefield, CustomDateRangefield, CustomDateRangePicker, CustomDateRangeCalendar, } from './primitives/date-fields';
|
|
18
|
-
export type { CustomDatefieldProps, CustomDatePickerProps, CustomTimefieldProps, CustomDateRangefieldProps, CustomDateRangePickerProps, CustomDateRangeCalendarProps, } from './primitives/date-fields';
|
|
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';
|
|
19
19
|
export { RbInlineChipField, CalendarChipIcon, ClockChipIcon, } from './primitives/RbInlineChipField';
|
|
20
20
|
export type { RbInlineChipFieldProps, RbInlineChipFieldAction, } from './primitives/RbInlineChipField';
|
|
21
21
|
export { RbContextMenu } from './primitives/RbContextMenu';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { Dayjs } from 'dayjs';
|
|
3
|
+
export interface CustomIndefiniteDatePickerProps {
|
|
4
|
+
label: string;
|
|
5
|
+
value: Dayjs | null;
|
|
6
|
+
setValue: (newValue: Dayjs | null) => void;
|
|
7
|
+
indefinite: boolean;
|
|
8
|
+
onIndefiniteChange: (indefinite: boolean) => void;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
white?: boolean;
|
|
11
|
+
fullWidth?: boolean;
|
|
12
|
+
placeholder?: string;
|
|
13
|
+
indefiniteLabel?: string;
|
|
14
|
+
yearPicker?: "dropdown" | "grid";
|
|
15
|
+
}
|
|
16
|
+
declare const CustomIndefiniteDatePicker: ({ label, value, setValue, indefinite, onIndefiniteChange, disabled, white, fullWidth, placeholder, indefiniteLabel, yearPicker, }: CustomIndefiniteDatePickerProps) => React.JSX.Element;
|
|
17
|
+
export { CustomIndefiniteDatePicker };
|
|
@@ -2,6 +2,8 @@ export { CustomDatefield } from './CustomDatefield';
|
|
|
2
2
|
export type { CustomDatefieldProps } from './CustomDatefield';
|
|
3
3
|
export { CustomDatePicker } from './CustomDatePicker';
|
|
4
4
|
export type { CustomDatePickerProps } from './CustomDatePicker';
|
|
5
|
+
export { CustomIndefiniteDatePicker } from './CustomIndefiniteDatePicker';
|
|
6
|
+
export type { CustomIndefiniteDatePickerProps } from './CustomIndefiniteDatePicker';
|
|
5
7
|
export { CustomTimefield } from './CustomTimefield';
|
|
6
8
|
export type { CustomTimefieldProps } from './CustomTimefield';
|
|
7
9
|
export { CustomDateRangefield } from './CustomDateRangefield';
|
|
@@ -21,5 +21,7 @@ export declare function useDatePopover(options?: UseDatePopoverOptions): {
|
|
|
21
21
|
floatingStyle: React.CSSProperties;
|
|
22
22
|
triggerRef: React.RefObject<HTMLButtonElement | null>;
|
|
23
23
|
panelRef: React.RefObject<HTMLDivElement | null>;
|
|
24
|
+
anchorVars: React.CSSProperties;
|
|
25
|
+
contentRef: React.RefObject<HTMLDivElement | null>;
|
|
24
26
|
};
|
|
25
27
|
export {};
|