@cwellt_software/cwellt-reactjs-lib 1.5.0 → 1.5.1

package/dist/index.d.ts

@@ -338,6 +338,69 @@ declare function configureCwLoading(next: CwLoadingDefaults): void;
 /** Read the currently configured CwLoading defaults. */
 declare function getCwLoadingDefaults(): CwLoadingDefaults;
 
+type SkeletonVariant = 'text' | 'rect' | 'circle';
+interface CwSkeletonProps {
+    /** Shape of the placeholder. Default: 'text'. */
+    variant?: SkeletonVariant;
+    /** CSS length. Defaults: text and rect 100%; circle falls back to the height so it stays round. */
+    width?: string;
+    /** CSS length. Defaults: text 1em, rect 6rem, circle 2.5rem. */
+    height?: string;
+    /** Number of stacked placeholders. Default 1. When variant is 'text' and count > 1, the last line renders at 60% width for realism. */
+    count?: number;
+    /** Border-radius override. Defaults: text/rect var(--cw-border-radius), circle 50%. */
+    radius?: string;
+    /** Spacing between stacked placeholders when count > 1. CSS length. Default: var(--cw-spacing-tiny). */
+    gap?: string;
+}
+/**
+ * CwSkeleton - a shimmering placeholder that reserves the shape of content while it loads.
+ *
+ * Renders inline <span> elements so it can sit inside text-level contexts. Sizing flows
+ * through component-scoped custom properties; only the props the caller provides are set
+ * inline, so the CSS defaults per variant (and the 60% last-line rule) stay in charge.
+ *
+ * @example
+ * <CwSkeleton count={3} />
+ * <CwSkeleton variant="circle" />
+ * <CwSkeleton variant="rect" height="10rem" />
+ */
+declare function CwSkeleton({ variant, width, height, count, radius, gap }: CwSkeletonProps): React__default.JSX.Element;
+
+type ProgressColor = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+type ProgressSize = 'small' | 'regular' | 'large';
+interface CwProgressProps {
+    /** Progress percentage, 0-100 (clamped). Ignored when indeterminate. */
+    value?: number;
+    /** Sweeping animation for unmeasurable progress. Respects prefers-reduced-motion (static partial fill). */
+    indeterminate?: boolean;
+    /** Label beside (row layout) or above (column layout) the bar. */
+    label?: string;
+    /** Right-side value label. Defaults to the rounded percent when value is set and not indeterminate. */
+    rightLabel?: string;
+    /** Bar size. Default 'regular'. */
+    size?: ProgressSize;
+    /** Label placement relative to the bar. Default 'row'. */
+    layout?: 'row' | 'column';
+    /** Semantic color. Default 'primary'. */
+    color?: ProgressColor;
+    /** Tabular figures for the value label so digits do not jump while counting. */
+    monoValue?: boolean;
+    /** Larger, bolder value label. */
+    prominent?: boolean;
+}
+/**
+ * CwProgress - a determinate or indeterminate progress bar.
+ *
+ * Use it for measurable operations (imports, uploads, batch jobs). For short
+ * unmeasurable waits use CwLoading; for initial layout loads use CwSkeleton.
+ *
+ * @example
+ * <CwProgress value={62} label="Import" color="success" />
+ * <CwProgress indeterminate label="Uploading" />
+ */
+declare function CwProgress({ value, indeterminate, label, rightLabel, size, layout, color, monoValue, prominent }: CwProgressProps): React__default.JSX.Element;
+
 type TooltipPosition = "top" | "bottom" | "left" | "right";
 interface CwGenericTooltipProps {
     children: ReactNode;
@@ -619,8 +682,10 @@ interface CwCardProps {
     clickable?: boolean;
     /*** Click handler when clickable is true **/
     onClick?: () => void;
-    /*** Whether the card is in a loading state **/
+    /*** Whether the card is in a loading state - the content zone renders skeleton lines instead of children **/
     isLoading?: boolean;
+    /*** Number of skeleton text lines shown in the content while isLoading. Default 3 **/
+    skeletonLines?: number;
     /*** Whether the card is disabled **/
     disabled?: boolean;
     /*** Custom style object for additional inline styles **/
@@ -672,8 +737,10 @@ interface CwCardListProps<T> extends React__default.HTMLAttributes<HTMLDivElemen
     defaultCardWidth?: number;
     /** Gap between cards (in pixels) */
     cardGap?: number;
-    /** Loading state */
+    /** Loading state - renders ghost cards in the same layout instead of items */
     isLoading?: boolean;
+    /** Number of ghost cards shown while isLoading. Default 6 */
+    skeletonCards?: number;
     /** Optional custom empty state component */
     emptyState?: ReactNode;
     /** Available sort options */
@@ -683,7 +750,7 @@ interface CwCardListProps<T> extends React__default.HTMLAttributes<HTMLDivElemen
     /** Extracts a stable unique key from each item to avoid index-based reconciliation bugs */
     keyExtractor?: (item: T, index: number) => string | number;
 }
-declare function CwCardList<T>({ items, renderCard, pageSize, layout, defaultCardWidth, cardGap, isLoading, emptyState, sortOptions, defaultSortKey, keyExtractor, ...htmlProps }: CwCardListProps<T>): React__default.JSX.Element;
+declare function CwCardList<T>({ items, renderCard, pageSize, layout, defaultCardWidth, cardGap, isLoading, skeletonCards, emptyState, sortOptions, defaultSortKey, keyExtractor, ...htmlProps }: CwCardListProps<T>): React__default.JSX.Element;
 
 interface CwAccordionContainerProps {
     children?: any;
@@ -726,7 +793,10 @@ interface CwTableProps<T = any> {
     testId?: string;
     textNoData?: string;
     rowKey?: keyof T;
+    /** Renders skeleton placeholder rows in the body instead of data. The header stays real. */
     loading?: boolean;
+    /** Number of skeleton rows shown while loading. Default 5. */
+    skeletonRows?: number;
     scrollHeight?: number | string;
     stickyHeader?: boolean;
     pageLabel?: string;
@@ -805,7 +875,7 @@ interface CwTableProps<T = any> {
  *
  * @returns React component
  */
-declare function CwTable<T = any>({ columns, data, pagination, pageSizeOptions, expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, testId, textNoData, rowKey, loading, scrollHeight, stickyHeader, pageLabel, rowSelection }: Readonly<CwTableProps<T>>): React__default.JSX.Element;
+declare function CwTable<T = any>({ columns, data, pagination, pageSizeOptions, expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, testId, textNoData, rowKey, loading, skeletonRows, scrollHeight, stickyHeader, pageLabel, rowSelection }: Readonly<CwTableProps<T>>): React__default.JSX.Element;
 
 interface SortableColumn<T = any> {
     /** Header label */
@@ -841,8 +911,10 @@ interface CwSortableTableProps<T = any> {
      * }}
      */
     onReorder: (newData: T[]) => Promise<void>;
-    /** Show a loading skeleton instead of rows */
+    /** Renders skeleton placeholder rows in the body instead of data. The header stays real. */
     loading?: boolean;
+    /** Number of skeleton rows shown while loading. Default 5. */
+    skeletonRows?: number;
     /** Message shown when data is empty */
     textNoData?: string;
     /** CSS class for the outer container */
@@ -878,7 +950,7 @@ interface CwSortableTableProps<T = any> {
  * - Reorder is calculated in onDragEnd using lastValidDropIndex
  * - draggedItem is tracked in state, not via dataTransfer
  */
-declare function CwSortableTable<T = any>({ columns, data, rowKey, onReorder, loading, textNoData, className, tableClassName, maxHeight, showHandle, style, saveLabel, discardLabel, }: Readonly<CwSortableTableProps<T>>): React__default.JSX.Element;
+declare function CwSortableTable<T = any>({ columns, data, rowKey, onReorder, loading, skeletonRows, textNoData, className, tableClassName, maxHeight, showHandle, style, saveLabel, discardLabel, }: Readonly<CwSortableTableProps<T>>): React__default.JSX.Element;
 
 interface SortableTableDragState {
     /** Index of the row currently being dragged (-1 if none) */
@@ -955,7 +1027,10 @@ interface CwTableServerSideProps<T = any> {
     testId?: string;
     textNoData?: string;
     rowKey?: keyof T;
+    /** Renders skeleton placeholder rows in the body instead of data. The header stays real. */
     loading?: boolean;
+    /** Number of skeleton rows shown while loading. Default 5. */
+    skeletonRows?: number;
     scrollHeight?: number | string;
     stickyHeader?: boolean;
     rowSelection?: {
@@ -1019,7 +1094,7 @@ interface CwTableServerSideProps<T = any> {
  *
  * @returns React component
  */
-declare function CwTableServerSide<T = any>({ columns, data, totalItems, pagination, pageSizeOptions, pageLabel, expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, testId, textNoData, rowKey, loading, scrollHeight, stickyHeader, rowSelection, onChange, serverState, }: Readonly<CwTableServerSideProps<T>>): React__default.JSX.Element;
+declare function CwTableServerSide<T = any>({ columns, data, totalItems, pagination, pageSizeOptions, pageLabel, expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, testId, textNoData, rowKey, loading, skeletonRows, scrollHeight, stickyHeader, rowSelection, onChange, serverState, }: Readonly<CwTableServerSideProps<T>>): React__default.JSX.Element;
 
 interface Tab {
     key: string;
@@ -1041,6 +1116,13 @@ interface CwTabsProps {
     tabs: Tab[];
     tabsPosition?: 'top' | 'left';
     tabsListWidth?: string;
+    /**
+     * Height for the tab content panel (any CSS length, e.g. `calc(100vh - 10rem)`).
+     * Sets the internal `--tabs-height` so a scrollable child (e.g. a `CwTable` with
+     * `stickyHeader` + `scrollHeight`) gets a bounded scroll container without the
+     * call site declaring the CSS variable itself. Defaults to `75vh` when omitted.
+     */
+    contentHeight?: string;
 }
 /**
  * CwTabs component for displaying tabbed content.
@@ -1127,6 +1209,10 @@ interface CwMasterDetailProps {
     resizable?: boolean;
     /** Whether to show the search input */
     showSearch?: boolean;
+    /** Renders skeleton placeholders in the master list and detail panel instead of content. */
+    loading?: boolean;
+    /** Number of skeleton rows shown in the master list while loading. Default 5. */
+    skeletonRows?: number;
 }
 declare const CwMasterDetail: React__default.FC<CwMasterDetailProps>;
 
@@ -1147,6 +1233,10 @@ interface CwKeyValueListProps extends HTMLAttributes<HTMLDListElement>, CwGroupL
      * @deprecated use itemLayout.direction instead
      **/
     direction?: 'row' | 'column';
+    /** Renders skeleton placeholder rows instead of items. The whole list is one data load, so both dt and dd ghost. */
+    loading?: boolean;
+    /** Number of skeleton rows shown while loading. Default 4. */
+    skeletonRows?: number;
 }
 /**
  * A component for displaying key-value pairs in a definition list format
@@ -3989,5 +4079,5 @@ declare class OnClickContextMenu implements UiEvent {
     constructor(id: string, clickedMenu: string);
 }
 
-export { CblDragAndDrop$1 as CblDragAndDrop, CwAccordionContainer, CwAlign, CwAnchoredMenu, CwBtnApprove, CwBtnCancel, CwBtnDelete, CwBtnEdit, CwBtnSave, CwButton, CwButtonSplit, CwButtonSwitch, CwCard, CwCardList, CwCheck, CwCheckbox, CwCheckboxGroup, CwChip, CwColorPicker, CwConfirmationPopup, CwContextMenu, CwDatePicker, CwDatePickerTemporal, CwDateRangePicker, CwDateRangePickerTemporal, CwDateTimePicker, CwDateTimePickerCompact, CwDateTimePickerTemporal, CwDialog, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownFilter, CwExpandable, CwFileUploadMultiple, CwFindAirport, CwFindCrewmember, CwGenericTooltip, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, CwImageGallery, CwImageZoom, CwInput, CwInputColor, CwInputDateText, CwInputDatetime, CwInputImage, CwInputNumber, CwInputPhone, CwInputText, CwKeyValueList, CwLabel, CwLoading, CwMasterDetail, CwMessage, CwMessageManager, CwMessageType, CwModal, CwModalHover, CwModalReportFunctional, CwMultiFilter, CwMultiFilterTag, CwNavMenu, CwNote, CwOption, CwPopoverButton, CwRadioGroup, CwReportModal, CwScheduler, CwSearchAsync, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, CwSortableList, CwSortableTable, CwSuperScheduler, CwTable, CwTableGrouped, CwTableServerSide, CwTabs, CwTagSelector, CwTextArea, CwTime, CwTimePicker, CwToggle, CwTooltipManager, CwTooltipNew, CwTreeView, CwWeekdaySelector, DefaultRowHeader, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PRESET_LIBRARY_TEMPORAL, PinRowHeader, Resource, Scheduler, SchedulerEvent, SuperScheduler, TooltipConstraintContext, UiEvent, Weekdays, cblEvent, configureCwLoading, eventIsVisible, filterNavItems, filterVisibleEvents, getCwLoadingDefaults, getDefaultDivisions, getEventSizes, getPresetsByKeysTemporal, itemsToMultiFilterTags, sortNavItems, useCwMessage, useSortableList, useSortableTable, useTooltipConstraint };
-export type { BackgroundEventDm, CardChip, ChipColorScheme, ChipVariant, Column$1 as Column, ConfirmationPopupProps, CwAlignProps, CwButtonSplitAction, CwButtonSplitProps, CwButtonSwitchOption, CwButtonSwitchProps, CwCardListProps, CwCardProps, CwChipProps, CwDialogProps, CwDropdownOption, CwDropdownProps, CwExpandableProps, CwGroupLayoutProps, CwImageAreaMethods, CwImageAreaProps, CwInputDateTextProps, CwInputDatetimeProps, CwInputImageProps, CwInputNumberProps, CwInputPhoneProps, CwInputTextProps, CwInputTimeProps, CwKeyValueListProps, CwLabelProps, CwLayoutProps, CwLoadingDefaults, CwMasterDetailItem, CwMasterDetailProps, CwMessageProps, CwModalHoverProps, CwMultiFilterProps, CwMultiFilterTagProps, CwNavItem, CwNavMenuProps, CwNoteProps, CwPopoverButtonProps, CwRadioGroupProps, CwReportModalFunctionalProps, CwSearchAsyncOption, CwSearchAsyncProps, CwSelectListProps, CwSortableListProps, CwSortableTableProps, CwTableGroupedData, CwTableGroupedData_Group, CwTableGroupedData_Row, CwTableGroupedProps, CwTagSelectorOption, CwTagSelectorProps, CwTextAreaProps, CwTreeNode, DataItem, DateRangePresetTemporal, DateRangeValue, DateRangeValueTemporal, ICwMultiFilterTag, ImageItem, IndicatorRowDm, MenuOption, OnEvent, PinRowHeaderProps, RowHeaderDm, RowHeaderProps, SchedulerEventDm, SchedulerEventState, SchedulerRowProps, SchedulerState, ServerSideTableState, SortableColumn, SortableTableDragState, SuperSchedulerProps, Tab, UseSortableTableReturn, Weekday, ZoomImageItem, cblEventCompProps, resourceCompProps2 };
+export { CblDragAndDrop$1 as CblDragAndDrop, CwAccordionContainer, CwAlign, CwAnchoredMenu, CwBtnApprove, CwBtnCancel, CwBtnDelete, CwBtnEdit, CwBtnSave, CwButton, CwButtonSplit, CwButtonSwitch, CwCard, CwCardList, CwCheck, CwCheckbox, CwCheckboxGroup, CwChip, CwColorPicker, CwConfirmationPopup, CwContextMenu, CwDatePicker, CwDatePickerTemporal, CwDateRangePicker, CwDateRangePickerTemporal, CwDateTimePicker, CwDateTimePickerCompact, CwDateTimePickerTemporal, CwDialog, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownFilter, CwExpandable, CwFileUploadMultiple, CwFindAirport, CwFindCrewmember, CwGenericTooltip, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, CwImageGallery, CwImageZoom, CwInput, CwInputColor, CwInputDateText, CwInputDatetime, CwInputImage, CwInputNumber, CwInputPhone, CwInputText, CwKeyValueList, CwLabel, CwLoading, CwMasterDetail, CwMessage, CwMessageManager, CwMessageType, CwModal, CwModalHover, CwModalReportFunctional, CwMultiFilter, CwMultiFilterTag, CwNavMenu, CwNote, CwOption, CwPopoverButton, CwProgress, CwRadioGroup, CwReportModal, CwScheduler, CwSearchAsync, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, CwSkeleton, CwSortableList, CwSortableTable, CwSuperScheduler, CwTable, CwTableGrouped, CwTableServerSide, CwTabs, CwTagSelector, CwTextArea, CwTime, CwTimePicker, CwToggle, CwTooltipManager, CwTooltipNew, CwTreeView, CwWeekdaySelector, DefaultRowHeader, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PRESET_LIBRARY_TEMPORAL, PinRowHeader, Resource, Scheduler, SchedulerEvent, SuperScheduler, TooltipConstraintContext, UiEvent, Weekdays, cblEvent, configureCwLoading, eventIsVisible, filterNavItems, filterVisibleEvents, getCwLoadingDefaults, getDefaultDivisions, getEventSizes, getPresetsByKeysTemporal, itemsToMultiFilterTags, sortNavItems, useCwMessage, useSortableList, useSortableTable, useTooltipConstraint };
+export type { BackgroundEventDm, CardChip, ChipColorScheme, ChipVariant, Column$1 as Column, ConfirmationPopupProps, CwAlignProps, CwButtonSplitAction, CwButtonSplitProps, CwButtonSwitchOption, CwButtonSwitchProps, CwCardListProps, CwCardProps, CwChipProps, CwDialogProps, CwDropdownOption, CwDropdownProps, CwExpandableProps, CwGroupLayoutProps, CwImageAreaMethods, CwImageAreaProps, CwInputDateTextProps, CwInputDatetimeProps, CwInputImageProps, CwInputNumberProps, CwInputPhoneProps, CwInputTextProps, CwInputTimeProps, CwKeyValueListProps, CwLabelProps, CwLayoutProps, CwLoadingDefaults, CwMasterDetailItem, CwMasterDetailProps, CwMessageProps, CwModalHoverProps, CwMultiFilterProps, CwMultiFilterTagProps, CwNavItem, CwNavMenuProps, CwNoteProps, CwPopoverButtonProps, CwProgressProps, CwRadioGroupProps, CwReportModalFunctionalProps, CwSearchAsyncOption, CwSearchAsyncProps, CwSelectListProps, CwSkeletonProps, CwSortableListProps, CwSortableTableProps, CwTableGroupedData, CwTableGroupedData_Group, CwTableGroupedData_Row, CwTableGroupedProps, CwTagSelectorOption, CwTagSelectorProps, CwTextAreaProps, CwTreeNode, DataItem, DateRangePresetTemporal, DateRangeValue, DateRangeValueTemporal, ICwMultiFilterTag, ImageItem, IndicatorRowDm, MenuOption, OnEvent, PinRowHeaderProps, RowHeaderDm, RowHeaderProps, SchedulerEventDm, SchedulerEventState, SchedulerRowProps, SchedulerState, ServerSideTableState, SortableColumn, SortableTableDragState, SuperSchedulerProps, Tab, UseSortableTableReturn, Weekday, ZoomImageItem, cblEventCompProps, resourceCompProps2 };