@konstructio/ui 0.1.2-alpha.119 → 0.1.2-alpha.120

package/dist/lib/components/VirtualizedTable/VirtualizedTable.types.d.ts

@@ -1,4 +1,4 @@
-import { ColumnDef as ColumnDefPrimitive, ExpandedState, OnChangeFn, RowData as RowDataPrimitive } from '@tanstack/react-table';
+import { ColumnDef as ColumnDefPrimitive, ColumnPinningState, ExpandedState, OnChangeFn, RowData as RowDataPrimitive } from '@tanstack/react-table';
 import { VariantProps } from 'class-variance-authority';
 import { ReactNode } from 'react';
 import { Props as ButtonProps } from '../Button/Button.types';
@@ -7,7 +7,9 @@ import { Props as CustomDateRangeFilterDropdownProps } from '../Filter/component
 import { TimePreset } from '../Filter/components/TimeFilterDropdown/TimeFilterDropdown.types';
 import { virtualizeTableVariants } from './VirtualizedTable.variants';
 import { Option } from './components/Filter/Filter.types';
+import { HideBelowBreakpoint } from './constants';
 import { UseQueryOptions } from '@tanstack/react-query';
+export type { ColumnPinningState, HideBelowBreakpoint };
 /** Base row data type from TanStack Table */
 export type RowData = RowDataPrimitive;
 export type ColumnDef<TData extends RowData> = ColumnDefPrimitive<TData, string>;
@@ -16,6 +18,8 @@ declare module '@tanstack/react-table' {
         className?: string | ((row: TData) => string);
         attributes?: Record<string, string | number | boolean>;
         headerClassName?: string;
+        /** Hides the column, header and cells, on viewports below this Tailwind breakpoint. */
+        hideBelow?: HideBelowBreakpoint;
     }
 }
 export interface RowMetadata {
@@ -182,6 +186,12 @@ export type Props<TData extends RowDataPrimitive> = VariantProps<typeof virtuali
      * container whose pagination bar tracks the table width.
      */
     classNameScrollContainer?: string;
+    /**
+     * Columns, by id, that stay put while the table scrolls sideways. Left-pinned
+     * columns render first and right-pinned ones last, whatever their position in
+     * `columns`. Needs a scroll container (`classNameScrollContainer`) to stick to.
+     */
+    columnPinning?: ColumnPinningState;
     getRowId?: (originalRow: TData, index: number) => string;
     fetchData?: (params: Record<string, string | number | string[] | number[] | undefined>, signal?: AbortSignal) => Promise<{
         data: TData[];
@@ -258,4 +268,3 @@ export type Props<TData extends RowDataPrimitive> = VariantProps<typeof virtuali
     renderExpandedRow?: never;
     keepExpandColumnVisible?: never;
 });
-export {};

package/dist/lib/components/VirtualizedTable/components/ScrollContainer/ScrollContainer.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { Props } from './ScrollContainer.types';
+/**
+ * The horizontal scroll container. It flags itself with `data-kvt-overflow`
+ * while the content is wider than the viewport, which is what the pinned
+ * column dividers key on. With pinned columns it also swaps the native
+ * scrollbar for a thin one that only spans the columns that actually move and
+ * stays visible, and fades the content on whichever side still has more to show.
+ */
+export declare const ScrollContainer: FC<Props>;

package/dist/lib/components/VirtualizedTable/components/ScrollContainer/ScrollContainer.types.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+export type Props = PropsWithChildren & {
+    className?: string;
+    /** Hides the native scrollbar and draws one under the scrolling columns only. */
+    hasPinnedColumns?: boolean;
+};

package/dist/lib/components/VirtualizedTable/components/VirtualizedTableContent/VirtualizedTableContent.d.ts

@@ -1,3 +1,3 @@
 import { JSX } from 'react';
 import { Props, RowData } from '../../VirtualizedTable.types';
-export declare const VirtualizedTableContent: <TData extends RowData>({ id, ariaLabel, columns, data, totalItems, className, classNameHeaderActiveArrows, classNameHeaderArrows, classNameHeaderTable, classNameTable, classNameWrapperTable, isLoading, emptyState, errorState, headerContent, classNameHeaderContent, classNameScrollContainer, getRowId, fetchData, queryOptions, showPagination: showPaginationProp, showTotalItems, showDropdownPagination, showDotPagination, showFormPagination, pageSizes, dropdownPaginationDirection, showFilter, showFilterInput, filterSearchPlaceholder, filters, multiSelectFilter, filterActions, showResetButton, resetButtonClassName, closeOnApply, enableHoverRow, classNameHoverRow, enableExpandedRow, expandedState, defaultExpanded, classNameExpandedRow, classNameExpandedCell, classNameExpandedContent, classNameExpandedHeader, classNameActiveExpandedRow, onExpandedChange, renderExpandedRow, keepExpandColumnVisible, }: Props<TData>) => JSX.Element;
+export declare const VirtualizedTableContent: <TData extends RowData>({ id, ariaLabel, columns, data, totalItems, className, classNameHeaderActiveArrows, classNameHeaderArrows, classNameHeaderTable, classNameTable, classNameWrapperTable, isLoading, emptyState, errorState, headerContent, classNameHeaderContent, classNameScrollContainer, columnPinning, getRowId, fetchData, queryOptions, showPagination: showPaginationProp, showTotalItems, showDropdownPagination, showDotPagination, showFormPagination, pageSizes, dropdownPaginationDirection, showFilter, showFilterInput, filterSearchPlaceholder, filters, multiSelectFilter, filterActions, showResetButton, resetButtonClassName, closeOnApply, enableHoverRow, classNameHoverRow, enableExpandedRow, expandedState, defaultExpanded, classNameExpandedRow, classNameExpandedCell, classNameExpandedContent, classNameExpandedHeader, classNameActiveExpandedRow, onExpandedChange, renderExpandedRow, keepExpandColumnVisible, }: Props<TData>) => JSX.Element;

package/dist/lib/components/VirtualizedTable/components/index.d.ts

@@ -6,5 +6,6 @@ export * from './ErrorState/ErrorState';
 export * from './Filter/Filter';
 export * from './Header/Header';
 export * from './Pagination/Pagination';
+export * from './ScrollContainer/ScrollContainer';
 export * from './TruncateText/TruncateText';
 export * from './WrapperBody/WrapperBody';

package/dist/lib/components/VirtualizedTable/constants/index.d.ts

@@ -1 +1,2 @@
 export * from './pagination';
+export * from './responsive';

package/dist/lib/components/VirtualizedTable/constants/responsive.d.ts

@@ -0,0 +1,2 @@
+export type HideBelowBreakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export declare const HIDE_BELOW_CLASS: Record<HideBelowBreakpoint, string>;

package/dist/lib/components/VirtualizedTable/contexts/table.context.d.ts

@@ -1,6 +1,7 @@
 import { ColumnSort, SortingState, Table } from '@tanstack/react-table';
 import { Dispatch, ReactNode, SetStateAction } from 'react';
 import { RowData } from '../VirtualizedTable.types';
+import { PinnedWidths } from '../utils';
 export type ContextType<TData extends RowData = RowData> = {
     sortedData: ColumnSort[];
     table: Table<TData>;
@@ -32,6 +33,9 @@ export type ContextType<TData extends RowData = RowData> = {
     isBorderOnAdjacentCell?: boolean;
     isExpandColumnVisible?: boolean;
     renderExpandedRow?: (data: RowData) => ReactNode;
+    /** Measured header widths of the pinned columns, keyed by column id. */
+    pinnedWidths: PinnedWidths;
+    getPinnedHeaderRef: (columnId: string) => (element: HTMLElement | null) => void;
     handlePage: (newPage: number) => void;
     onPageSize: (newPageSize: number) => void;
     onSorting: Dispatch<SetStateAction<SortingState>>;

package/dist/lib/components/VirtualizedTable/contexts/table.provider.d.ts

@@ -1,3 +1,3 @@
 import { RowData } from '../VirtualizedTable.types';
 import { Props } from './table.types';
-export declare const TableProvider: <TData extends RowData = RowData>({ children, classNameExpandedCell, classNameExpandedContent, classNameExpandedRow, classNameExpandedHeader, classNameActiveExpandedRow, classNameHoverRow, columns, data: defaultData, defaultExpanded, enableExpandedRow, enableHoverRow, expandedState, headerContent, id, isPaginationEnabled, queryOptions, totalItems, getRowId, fetchData, onExpandedChange, renderExpandedRow, keepExpandColumnVisible, }: Props<TData>) => import('react').JSX.Element;
+export declare const TableProvider: <TData extends RowData = RowData>({ children, classNameExpandedCell, classNameExpandedContent, classNameExpandedRow, classNameExpandedHeader, classNameActiveExpandedRow, classNameHoverRow, columns, data: defaultData, defaultExpanded, enableExpandedRow, enableHoverRow, expandedState, headerContent, id, isPaginationEnabled, queryOptions, totalItems, getRowId, fetchData, onExpandedChange, renderExpandedRow, keepExpandColumnVisible, columnPinning, }: Props<TData>) => import('react').JSX.Element;

package/dist/lib/components/VirtualizedTable/contexts/table.types.d.ts

@@ -1,4 +1,4 @@
-import { ColumnDef, ExpandedState, OnChangeFn } from '@tanstack/react-table';
+import { ColumnDef, ColumnPinningState, ExpandedState, OnChangeFn } from '@tanstack/react-table';
 import { PropsWithChildren, ReactNode } from 'react';
 import { RowData, Props as TableProps } from '../VirtualizedTable.types';
 export type Props<TData extends RowData = RowData> = PropsWithChildren & {
@@ -22,6 +22,7 @@ export type Props<TData extends RowData = RowData> = PropsWithChildren & {
     onExpandedChange?: OnChangeFn<ExpandedState>;
     renderExpandedRow?: (data: TData) => ReactNode;
     keepExpandColumnVisible?: boolean | Record<string, boolean>;
+    columnPinning?: ColumnPinningState;
     getRowId?: (originalRow: TData, index: number) => string;
     fetchData?: (params: Record<string, string | number | string[] | number[] | undefined>, signal?: AbortSignal) => Promise<{
         data: TData[];

package/dist/lib/components/VirtualizedTable/utils/index.d.ts

@@ -1,3 +1,4 @@
 export * from './get-table-id';
 export * from './load-content';
 export * from './pagination';
+export * from './pinned-columns';

package/dist/lib/components/VirtualizedTable/utils/pinned-columns/index.d.ts

@@ -0,0 +1 @@
+export * from './pinned-columns';

package/dist/lib/components/VirtualizedTable/utils/pinned-columns/pinned-columns.d.ts

@@ -0,0 +1,23 @@
+import { Column, Table } from '@tanstack/react-table';
+import { CSSProperties } from 'react';
+export type PinnedWidths = Record<string, number>;
+export type PinnedCellProps = {
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * Distance from the scroll container edge a pinned column sticks at: the
+ * widths of the pinned columns between it and that edge.
+ */
+export declare const getPinnedOffset: <TData>(table: Table<TData>, column: Column<TData, unknown>, widths: PinnedWidths) => number;
+/** Whether the column is the pinned one that touches the scrolling columns. */
+export declare const isPinnedBoundary: <TData>(table: Table<TData>, column: Column<TData, unknown>) => boolean;
+/**
+ * Sticky positioning for a pinned header or body cell. No z-index on purpose:
+ * sticky already paints over the static cells beside it, and a stacking
+ * context here would trap the tooltips rendered inside the cell.
+ *
+ * The divider between a pinned column and the scrolling ones only shows while
+ * the scroll container flags itself as overflowing (`data-kvt-overflow`).
+ */
+export declare const getPinnedCellProps: <TData>(table: Table<TData>, column: Column<TData, unknown>, widths: PinnedWidths) => PinnedCellProps;

package/dist/lib/components/index.d.ts

@@ -28,6 +28,8 @@ export * from './Input/Input';
 export * from './LineChart/LineChart';
 export * from './Loading/Loading';
 export * from './Modal/Modal';
+export * from './Sheet/Sheet';
+export type { Props as SheetProps, SheetPosition } from './Sheet/Sheet.types';
 export * from './OtpInput/OtpInput';
 export * from './PasswordRules/PasswordRules';
 export * from './MultiSelectDropdown/MultiSelectDropdown';
@@ -69,7 +71,7 @@ export * from './VirtualizedTable/hooks';
 export { preloadVirtualizedTable } from './VirtualizedTable/utils/load-content';
 export { sendExpandRowEvent, sendCollapseRowEvent, sendToggleRowEvent, sendResetFiltersEvent, sendRefreshEvent, VirtualizedTableEvent, } from './VirtualizedTable/events';
 export type { VirtualizedTableEventDetail, VirtualizedTableRefreshEventDetail, } from './VirtualizedTable/events';
-export type { ColumnDef, RowData, FilterConfig, ActionFilterConfig, BadgeMultiSelectFilterConfig, TextMultiSelectFilterConfig, DateFilterConfig, DateRangeFilterConfig, CustomDateRangeFilterConfig, TimeFilterConfig, } from './VirtualizedTable/VirtualizedTable.types';
+export type { ColumnDef, ColumnPinningState, HideBelowBreakpoint, RowData, FilterConfig, ActionFilterConfig, BadgeMultiSelectFilterConfig, TextMultiSelectFilterConfig, DateFilterConfig, DateRangeFilterConfig, CustomDateRangeFilterConfig, TimeFilterConfig, } from './VirtualizedTable/VirtualizedTable.types';
 export type { Step, StepperClassNames, StepperIcons, StepperProps, StepSize, StepStatus, StepVariant, } from './Stepper/Stepper.types';
 export { horizontalConnectorWrapperVariants, stepConnectorVariants, stepContentVariants, stepDescriptionVariants, stepIndicatorVariants, stepItemVariants, stepLabelVariants, stepListVariants, stepperVariants, stepVariants, } from './Stepper/Stepper.variants';
 /** @deprecated Use Counter instead */