@scmlatam/web-ui 0.2.38 → 0.2.39

package/dist/src/components/rb.d.ts

@@ -8,8 +8,8 @@ export { FormField, FormGrid, FormShell } from '../rb-components/form';
 export type { FormFieldProps, FormFieldSpan, FormGridColumnGap, FormGridProps, FormGridRowGap, FormShellProps, FormShellSize, } from '../rb-components/form';
 export { RbList, RbListItem } from '../rb-components/list';
 export type { RbListItemProps, RbListProps, RbListSize, RbListVariant, } from '../rb-components/list';
-export { PillsTabs, PillsTabs as RbPillsTabs, } from '../rb-components/navigation';
-export type { PillsTabItem, PillsTabsProps } from '../rb-components/navigation';
+export { PillsTabs, PillsTabs as RbPillsTabs, TabPanel, TabPanel as RbTabPanel, } from '../rb-components/navigation';
+export type { PillsTabItem, PillsTabsProps, TabPanelItem, TabPanelProps, } from '../rb-components/navigation';
 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';
 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';
 export { RbTable, RbExcelTable, RbTableToolbar, RbToolbarActionButton, RbToolbarActions, RbToolbarDateRangeField, RbToolbarMultiSelectField, RbToolbarSearchField, RbToolbarSelectField, formatRbExcelDate, formatRbExcelTime, getRbExcelValueAtPath, isRbExcelEmptyValue, isValidRbExcelDate, isValidRbExcelNumber, isValidRbExcelTime, parseRbExcelValue, setRbExcelValueAtPath, } from '../rb-components/table';
@@ -17,8 +17,8 @@ export type { RbExcelCellContext, RbExcelCreateRowContext, RbExcelEditorContext,
 export { DashboardShell, ShellContent } from '../rb-components/shell';
 export { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, } from '../rb-components/sidebar';
 export { TopBar, TopBarUserMenu } from '../rb-components/topbar';
-export { TreePanel, findNodeById, flattenTree, getExpandableNodeIds, getNodeSelectionState, getSelectableDescendantIds, getSelectableSubtreeIds, hasNodeChildren, isNodeSelectable, isNodeSelectionMutable, normalizeHierarchicalSelection, toggleExpandedNode, toggleNodeSelection, } from '../rb-components/tree-panel';
-export type { GetSelectableSubtreeOptions, TreePanelExpandedChangeDetails, TreePanelIdCollection, TreePanelNode, TreePanelNodeId, TreePanelProps, TreePanelRenderNodeParams, TreePanelSelectionChangeDetails, TreePanelSelectionState, } from '../rb-components/tree-panel';
+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';
+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';
 export { getRbImageUrl, rbImages } from '../rb-components/images';
 export type { RbImageName } from '../rb-components/images';
 export { Timeline } from '../rb-components/timeline';

package/dist/src/pages/home/rb/components/VirtualTreePlayground.d.ts

@@ -0,0 +1 @@
+export declare function VirtualTreePlayground(): import("react").JSX.Element;

package/dist/src/pages/home/rb/data/virtualTreeData.d.ts

@@ -0,0 +1,6 @@
+import { VirtualTreeNode } from '../../../../rb-components/tree-panel';
+export interface VirtualTreeDemoValue {
+    code: string;
+    category: "subcompany" | "area" | "work_position";
+}
+export declare const VIRTUAL_TREE_DEMO_ITEMS: VirtualTreeNode<VirtualTreeDemoValue>[];

package/dist/src/pages/home/rb/sections/TabPanelSection.d.ts

@@ -0,0 +1 @@
+export declare function TabPanelSection(): import("react").JSX.Element;

package/dist/src/rb-components/navigation/TabPanel.d.ts

@@ -0,0 +1,49 @@
+import { default as React } from 'react';
+/**
+ * ----------------------------------------------------------------------------
+ * TAB PANEL
+ * ----------------------------------------------------------------------------
+ *
+ * Tarjeta blanca con pestañas tipo píldora sueltas (fondo gris claro y la
+ * pestaña activa en base-dark) y un botón opcional para cerrar el panel.
+ *
+ * Objetivo:
+ * - No depende de MUI.
+ * - No decide qué contenido renderizar debajo de las pestañas.
+ * - Solo renderiza las pestañas, notifica el tab activo con onChange y
+ *   expone onClose para el botón de cierre.
+ *
+ * Uso:
+ *
+ * const [tab, setTab] = useState("auditoria");
+ *
+ * <TabPanel
+ *   value={tab}
+ *   onChange={setTab}
+ *   onClose={() => setOpen(false)}
+ *   items={[
+ *     { value: "totales", label: "Totales" },
+ *     { value: "auditoria", label: "Auditoria" },
+ *     { value: "acumulaciones", label: "Acumulaciones" },
+ *   ]}
+ * >
+ *   Contenido del tab activo.
+ * </TabPanel>
+ */
+export type TabPanelItem<Value extends string = string> = {
+    value: Value;
+    label: React.ReactNode;
+    disabled?: boolean;
+};
+export type TabPanelProps<Value extends string = string> = {
+    value: Value;
+    items: TabPanelItem<Value>[];
+    onChange: (value: Value) => void;
+    onClose?: () => void;
+    closeLabel?: string;
+    ariaLabel?: string;
+    className?: string;
+    children?: React.ReactNode;
+};
+export declare function TabPanel<Value extends string = string>({ value, items, onChange, onClose, closeLabel, ariaLabel, className, children, }: TabPanelProps<Value>): React.JSX.Element;
+export default TabPanel;

package/dist/src/rb-components/navigation/index.d.ts

@@ -1,3 +1,6 @@
 export { PillsTabs } from './PillsTabs';
 export { PillsTabs as RbPillsTabs } from './PillsTabs';
 export type { PillsTabItem, PillsTabsProps } from './PillsTabs';
+export { TabPanel } from './TabPanel';
+export { TabPanel as RbTabPanel } from './TabPanel';
+export type { TabPanelItem, TabPanelProps } from './TabPanel';

package/dist/src/rb-components/table/types.d.ts

@@ -100,6 +100,14 @@ export type RbTableColumn<Row extends RbTableBaseRow = RbTableBaseRow> = {
      */
     maxWidth?: number;
     align?: RbTableAlign;
+    /**
+     * Cuando es true, el contenido de `render` ocupa todo el ancho y alto
+     * disponibles de la celda y define su propia alineación (por ejemplo,
+     * mediante flex/justify o text-align dentro del propio render).
+     *
+     * En ese caso la celda ignora `align` y no aplica el truncado con tooltip.
+     */
+    fullWidthRender?: boolean;
     render?: (row: Row, index: number) => React.ReactNode;
     renderHeader?: () => React.ReactNode;
     truncate?: boolean;
@@ -128,6 +136,10 @@ export type RbLegacyGridColumn<Row extends RbTableBaseRow = RbTableBaseRow> = {
     flex?: number;
     align?: RbTableAlign;
     headerAlign?: RbTableAlign;
+    /**
+     * Ver RbTableColumn.fullWidthRender.
+     */
+    fullWidthRender?: boolean;
     sortable?: boolean;
     filterable?: boolean;
     headerClassName?: string;

package/dist/src/rb-components/tree-panel/VirtualTree.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { VirtualTreeApiRef, VirtualTreeProps } from './virtualTree.types';
+export declare const VirtualTree: <TValue = unknown>(props: VirtualTreeProps<TValue> & React.RefAttributes<VirtualTreeApiRef<TValue>>) => React.ReactElement;

package/dist/src/rb-components/tree-panel/index.d.ts

@@ -1,4 +1,9 @@
 export { default as TreePanel } from './TreePanel';
+export { VirtualTree } from './VirtualTree';
+export { useVirtualTreeState } from './useVirtualTreeState';
 export type { TreePanelExpandedChangeDetails, TreePanelIdCollection, TreePanelNode, TreePanelNodeId, TreePanelProps, TreePanelRenderNodeParams, TreePanelSelectionChangeDetails, TreePanelSelectionState, } from './treePanel.types';
 export { findNodeById, flattenTree, getExpandableNodeIds, getNodeSelectionState, getSelectableDescendantIds, getSelectableSubtreeIds, hasNodeChildren, isNodeSelectable, isNodeSelectionMutable, normalizeHierarchicalSelection, toggleExpandedNode, toggleNodeSelection, } from './treePanel.utils';
-export type { GetSelectableSubtreeOptions, } from './treePanel.utils';
+export type { GetSelectableSubtreeOptions } from './treePanel.utils';
+export type { VirtualTreeApiRef, VirtualTreeExpandedChangeDetails, VirtualTreeFlatItem, VirtualTreeIdCollection, VirtualTreeNode, VirtualTreeNodeId, VirtualTreeNodeType, VirtualTreeProps, VirtualTreeSelectionChangeDetails, VirtualTreeSelectionMode, } from './virtualTree.types';
+export { buildVirtualTreeIndex, filterVirtualTreeItems, getVirtualTreeAncestorIds, getVisibleVirtualTreeItems, normalizeVirtualTreeSearch, normalizeVirtualTreeSelection, toggleVirtualTreeSelection, } from './virtualTree.utils';
+export type { VirtualTreeIndex } from './virtualTree.utils';

package/dist/src/rb-components/tree-panel/useVirtualTreeState.d.ts

@@ -0,0 +1,27 @@
+import { VirtualTreeIdCollection, VirtualTreeNode, VirtualTreeNodeId, VirtualTreeProps, VirtualTreeSelectionMode } from './virtualTree.types';
+interface UseVirtualTreeStateOptions<TValue> {
+    items: readonly VirtualTreeNode<TValue>[];
+    selectionMode: VirtualTreeSelectionMode;
+    selectedIds?: VirtualTreeIdCollection;
+    defaultSelectedIds?: VirtualTreeIdCollection;
+    onSelectionChange?: VirtualTreeProps<TValue>["onSelectionChange"];
+    expandedIds?: VirtualTreeIdCollection;
+    defaultExpandedIds?: VirtualTreeIdCollection;
+    defaultExpandAll?: boolean;
+    onExpandedChange?: VirtualTreeProps<TValue>["onExpandedChange"];
+}
+export declare function useVirtualTreeState<TValue>({ items, selectionMode, selectedIds, defaultSelectedIds, onSelectionChange, expandedIds, defaultExpandedIds, defaultExpandAll, onExpandedChange, }: UseVirtualTreeStateOptions<TValue>): {
+    index: import('./virtualTree.utils').VirtualTreeIndex<TValue>;
+    visibleItems: import('./virtualTree.types').VirtualTreeFlatItem<TValue>[];
+    expandedSet: Set<VirtualTreeNodeId>;
+    selectedSet: Set<VirtualTreeNodeId>;
+    selectedIds: VirtualTreeNodeId[];
+    toggleExpansion: (nodeId: VirtualTreeNodeId) => void;
+    setItemExpansion: (nodeId: VirtualTreeNodeId, expanded: boolean) => void;
+    expandItems: (nodeIds: readonly VirtualTreeNodeId[]) => void;
+    expandAll: () => void;
+    collapseAll: () => void;
+    expandAncestors: (nodeId: VirtualTreeNodeId) => void;
+    toggleSelection: (nodeId: VirtualTreeNodeId) => void;
+};
+export {};

package/dist/src/rb-components/tree-panel/virtualTree.types.d.ts

@@ -0,0 +1,70 @@
+import { default as React } from 'react';
+export type VirtualTreeNodeId = string | number;
+export type VirtualTreeNodeType = "subcompany" | "area" | "work_position";
+export type VirtualTreeSelectionMode = "single" | "multiple";
+export type VirtualTreeIdCollection = readonly VirtualTreeNodeId[] | ReadonlySet<VirtualTreeNodeId>;
+export interface VirtualTreeNode<TValue = unknown> {
+    id: VirtualTreeNodeId;
+    label: string;
+    type: VirtualTreeNodeType;
+    children?: readonly VirtualTreeNode<TValue>[];
+    value?: TValue;
+    disabled?: boolean;
+    className?: string;
+}
+export interface VirtualTreeFlatItem<TValue = unknown> {
+    id: VirtualTreeNodeId;
+    node: VirtualTreeNode<TValue>;
+    parentId: VirtualTreeNodeId | null;
+    depth: number;
+    hasChildren: boolean;
+}
+export interface VirtualTreeSelectionChangeDetails<TValue = unknown> {
+    nodeId: VirtualTreeNodeId;
+    node: VirtualTreeNode<TValue> | null;
+}
+export interface VirtualTreeExpandedChangeDetails<TValue = unknown> {
+    nodeId: VirtualTreeNodeId;
+    node: VirtualTreeNode<TValue> | null;
+}
+export interface VirtualTreeApiRef<TValue = unknown> {
+    expandAll: () => void;
+    collapseAll: () => void;
+    setItemExpansion: (itemId: VirtualTreeNodeId, expanded: boolean) => void;
+    focusItem: (itemId: VirtualTreeNodeId) => void;
+    getItem: (itemId: VirtualTreeNodeId) => VirtualTreeNode<TValue> | undefined;
+    scrollToItem: (itemId: VirtualTreeNodeId) => void;
+}
+export interface VirtualTreeProps<TValue = unknown> {
+    title: React.ReactNode;
+    ariaLabel?: string;
+    items?: readonly VirtualTreeNode<TValue>[];
+    selectionMode?: VirtualTreeSelectionMode;
+    selectedIds?: VirtualTreeIdCollection;
+    defaultSelectedIds?: VirtualTreeIdCollection;
+    onSelectionChange?: (selectedIds: VirtualTreeNodeId[], details: VirtualTreeSelectionChangeDetails<TValue>) => void;
+    expandedIds?: VirtualTreeIdCollection;
+    defaultExpandedIds?: VirtualTreeIdCollection;
+    defaultExpandAll?: boolean;
+    onExpandedChange?: (expandedIds: VirtualTreeNodeId[], details: VirtualTreeExpandedChangeDetails<TValue>) => void;
+    selectionDisabled?: boolean;
+    filterTypeLabel?: string;
+    searchLabel?: string;
+    searchPlaceholder?: string;
+    clearSearchLabel?: string;
+    subcompanyLabel?: string;
+    areaLabel?: string;
+    workPositionLabel?: string;
+    emptyText?: React.ReactNode;
+    noResultsText?: React.ReactNode;
+    expandLabel?: string;
+    collapseLabel?: string;
+    height?: number;
+    rowHeight?: number;
+    overscanCount?: number;
+    loading?: boolean;
+    loadingLabel?: string;
+    className?: string;
+    headerClassName?: string;
+    bodyClassName?: string;
+}

package/dist/src/rb-components/tree-panel/virtualTree.utils.d.ts

@@ -0,0 +1,17 @@
+import { VirtualTreeFlatItem, VirtualTreeIdCollection, VirtualTreeNode, VirtualTreeNodeId, VirtualTreeNodeType, VirtualTreeSelectionMode } from './virtualTree.types';
+export interface VirtualTreeIndex<TValue = unknown> {
+    allItems: VirtualTreeFlatItem<TValue>[];
+    itemsById: Map<VirtualTreeNodeId, VirtualTreeFlatItem<TValue>>;
+    expandableIds: Set<VirtualTreeNodeId>;
+    rootIds: VirtualTreeNodeId[];
+}
+export declare function toVirtualTreeIdArray(value?: VirtualTreeIdCollection): VirtualTreeNodeId[];
+export declare function buildVirtualTreeIndex<TValue>(items: readonly VirtualTreeNode<TValue>[]): VirtualTreeIndex<TValue>;
+export declare function getVirtualTreeAncestorIds<TValue>(index: VirtualTreeIndex<TValue>, nodeId: VirtualTreeNodeId): VirtualTreeNodeId[];
+export declare function getVisibleVirtualTreeItems<TValue>(index: VirtualTreeIndex<TValue>, expandedIds: ReadonlySet<VirtualTreeNodeId>): VirtualTreeFlatItem<TValue>[];
+export declare function normalizeVirtualTreeSearch(value: string): string;
+export declare function filterVirtualTreeItems<TValue>(index: VirtualTreeIndex<TValue>, filterType: VirtualTreeNodeType, query: string): VirtualTreeFlatItem<TValue>[];
+export declare function getVirtualTreeBranchIds<TValue>(items: readonly VirtualTreeFlatItem<TValue>[]): Set<VirtualTreeNodeId>;
+export declare function getVisibleFilteredVirtualTreeItems<TValue>(index: VirtualTreeIndex<TValue>, items: readonly VirtualTreeFlatItem<TValue>[], expandedIds: ReadonlySet<VirtualTreeNodeId>): VirtualTreeFlatItem<TValue>[];
+export declare function normalizeVirtualTreeSelection<TValue>(index: VirtualTreeIndex<TValue>, selectedIds: VirtualTreeIdCollection | undefined, mode: VirtualTreeSelectionMode): VirtualTreeNodeId[];
+export declare function toggleVirtualTreeSelection<TValue>(index: VirtualTreeIndex<TValue>, selectedIds: VirtualTreeIdCollection | undefined, nodeId: VirtualTreeNodeId, mode: VirtualTreeSelectionMode): VirtualTreeNodeId[];

package/dist/src/rb-components/tree-panel/virtualTree.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/rb-components/ui/primitives/AutoCustomCompleteField.d.ts

@@ -42,6 +42,22 @@ export interface AutoCompleteSearchConfig {
      * values. El componente no vuelve a filtrarlas.
      */
     mode?: AutoCompleteSearchMode;
+    /**
+     * Si se define, permite crear una opción nueva
+     * directamente desde el texto de búsqueda, sin
+     * necesidad de un botón externo.
+     *
+     * Se muestra como un ítem adicional dentro del
+     * listado cuando el texto ingresado no coincide
+     * exactamente con ninguna opción existente.
+     */
+    onCreateOption?: (value: string) => void;
+    /**
+     * Personaliza la etiqueta del ítem de creación.
+     *
+     * Por defecto: `Crear "<value>"`.
+     */
+    createOptionLabel?: (value: string) => string;
 }
 interface CustomAutoCompleteBaseProps {
     id?: string;
@@ -54,6 +70,11 @@ interface CustomAutoCompleteBaseProps {
     helperText?: ReactNode;
     emptyText?: ReactNode;
     clearLabel?: string;
+    /**
+     * Controla la visibilidad del botón para limpiar
+     * los elementos seleccionados.
+     */
+    showClearButton?: boolean;
     /**
      * Habilita el buscador dentro del listado.
      */

package/dist/src/rb-components/ui/primitives/date-fields/CustomDatePicker.d.ts

@@ -16,6 +16,8 @@ export interface CustomDatePickerProps {
     placeholder?: string;
     captionLayout?: "label" | "dropdown";
     locale?: DatePickerLocale | null;
+    minDate?: Dayjs | Date;
+    maxDate?: Dayjs | Date;
     /**
      * Activa el estado visual y accesible de error.
      */
@@ -26,5 +28,5 @@ export interface CustomDatePickerProps {
      */
     helperText?: React.ReactNode;
 }
-declare const CustomDatePicker: ({ label, initialValue, value, setValue, disabled, white, fullWidth, placeholder, captionLayout, error, helperText, locale, }: CustomDatePickerProps) => React.JSX.Element;
+declare const CustomDatePicker: ({ label, initialValue, value, setValue, disabled, white, fullWidth, placeholder, captionLayout, error, helperText, locale, minDate: minDateProp, maxDate: maxDateProp, }: CustomDatePickerProps) => React.JSX.Element;
 export { CustomDatePicker };