@konstructio/ui 0.1.2-alpha.101 → 0.1.2-alpha.104

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

@@ -1,9 +1,9 @@
 import { ColumnDef as ColumnDefPrimitive, ExpandedState, OnChangeFn, RowData as RowDataPrimitive } from '@tanstack/react-table';
 import { VariantProps } from 'class-variance-authority';
 import { ReactNode } from 'react';
-import { Props as ButtonProps } from '../../../components/Button/Button.types';
-import { DateRange, DateRangeWithTime } from '../../../components/DateRangePicker/DateRangePicker.types';
-import { TimePreset } from '../../../components/Filter/components/TimeFilterDropdown/TimeFilterDropdown.types';
+import { Props as ButtonProps } from '../Button/Button.types';
+import { DateRange, DateRangeWithTime } from '../DateRangePicker/DateRangePicker.types';
+import { TimePreset } from '../Filter/components/TimeFilterDropdown/TimeFilterDropdown.types';
 import { virtualizeTableVariants } from './VirtualizedTable.variants';
 import { Option } from './components/Filter/Filter.types';
 import { UseQueryOptions } from '@tanstack/react-query';
@@ -157,6 +157,24 @@ export type Props<TData extends RowDataPrimitive> = VariantProps<typeof virtuali
     isLoading?: boolean;
     /** Rendered in place of rows when the table has no data (and is not loading). */
     emptyState?: ReactNode;
+    /**
+     * Rendered in place of rows when the query failed and there are no rows to
+     * display. With React Query's default retry (3 attempts) it appears after
+     * retries are exhausted; pass `queryOptions={{ retry: false }}` to show it
+     * immediately. When both `errorState` and `emptyState` are set, `errorState`
+     * wins on error.
+     */
+    errorState?: ReactNode | ((error: Error) => ReactNode);
+    /** Rendered as a full-width band above the column headers, inside the table. */
+    headerContent?: ReactNode;
+    classNameHeaderContent?: string;
+    /**
+     * Classes for the div wrapping the table body + pagination bar (the filter
+     * row stays outside, fixed to the container width). Pass e.g.
+     * `'overflow-x-auto contain-inline-size'` to get a horizontal scroll
+     * container whose pagination bar tracks the table width.
+     */
+    classNameScrollContainer?: string;
     getRowId?: (originalRow: TData, index: number) => string;
     fetchData?: (params: Record<string, string | number | string[] | number[] | undefined>, signal?: AbortSignal) => Promise<{
         data: TData[];
@@ -170,6 +188,11 @@ export type Props<TData extends RowDataPrimitive> = VariantProps<typeof virtuali
     showFormPagination?: boolean;
     pageSizes?: number[] | string[];
     totalItems: number;
+    /**
+     * Direction of the page-size dropdown. 'auto' (default) opens downward
+     * and flips upward when there is no room below in the viewport.
+     */
+    dropdownPaginationDirection?: 'auto' | 'up' | 'down';
 } | {
     showPagination?: false | undefined;
     showTotalItems?: never;
@@ -178,6 +201,7 @@ export type Props<TData extends RowDataPrimitive> = VariantProps<typeof virtuali
     showFormPagination?: never;
     pageSizes?: never;
     totalItems?: never;
+    dropdownPaginationDirection?: never;
 }) & ({
     filterSearchPlaceholder?: string;
     /** @deprecated Use `filters` instead */

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

@@ -1,3 +1,3 @@
 import { RowData } from '../../VirtualizedTable.types';
 import { BodyProps } from './Body.types';
-export declare const Body: <TData extends RowData = RowData>({ isLoading, showPagination, emptyState, }: BodyProps<TData>) => import("react").JSX.Element;
+export declare const Body: <TData extends RowData = RowData>({ isLoading, showPagination, emptyState, errorState, }: BodyProps<TData>) => import("react").JSX.Element;

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

@@ -4,4 +4,5 @@ export type BodyProps<_TData extends RowData = RowData> = {
     isLoading?: boolean;
     showPagination?: boolean;
     emptyState?: ReactNode;
+    errorState?: ReactNode | ((error: Error) => ReactNode);
 };

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

@@ -1,3 +1,5 @@
 export type Props = {
     pageSizes?: number[] | string[];
+    isListPortal?: boolean;
+    direction?: 'auto' | 'up' | 'down';
 };

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

@@ -1,5 +1,5 @@
 import { ActionFilterConfig, FilterConfig, MultiSelectFilter } from '../../VirtualizedTable.types';
-export type { Option } from '../../../../../components/Filter/Filter.types';
+export type { Option } from '../../../Filter/Filter.types';
 /** @deprecated Use `ActionFilterConfig` with `type: 'action'` in the `filters` array instead */
 export type FilterAction = ActionFilterConfig;
 export type Props = {

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

@@ -1,3 +1,3 @@
 import { RowData } from '../../VirtualizedTable.types';
 import { Props } from './Header.types';
-export declare const Header: <TData extends RowData>({ className, classNameArrows, classNameActiveArrows, }: Props) => import("react").JSX.Element;
+export declare const Header: <TData extends RowData>({ className, classNameArrows, classNameActiveArrows, classNameHeaderContent, }: Props) => import("react").JSX.Element;

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

@@ -2,4 +2,5 @@ export type Props = {
     className?: string;
     classNameArrows?: string;
     classNameActiveArrows?: string;
+    classNameHeaderContent?: string;
 };

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

@@ -6,4 +6,6 @@ export type Props = {
     pageSizes?: number[] | string[];
     classNamePagination?: string;
     isLoading?: boolean;
+    isListPortal?: boolean;
+    dropdownPaginationDirection?: 'auto' | 'up' | 'down';
 };

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

@@ -1,5 +1,5 @@
 import { CellContext } from '@tanstack/react-table';
-import { Props as TooltipProps } from '../../../../../components/Tooltip/Tooltip.types';
+import { Props as TooltipProps } from '../../../Tooltip/Tooltip.types';
 import { RowData } from '../../VirtualizedTable.types';
 export type Props<TData extends RowData> = CellContext<TData, string> & Partial<Omit<TooltipProps, 'content' | 'children' | 'textClassName'>> & {
     value?: string;

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

@@ -7,6 +7,8 @@ export type ContextType<TData extends RowData = RowData> = {
     pageSize: number;
     tableFetching?: boolean;
     tableLoading?: boolean;
+    tableError?: Error | null;
+    headerContent?: ReactNode;
     totalItems?: number;
     termOfSearch?: string;
     page: number;

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, 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, }: Props<TData>) => import("react").JSX.Element;

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

@@ -4,6 +4,7 @@ import { RowData, Props as TableProps } from '../VirtualizedTable.types';
 export type Props<TData extends RowData = RowData> = PropsWithChildren & {
     id: string | string[] | number | number[];
     data: TData[];
+    headerContent?: ReactNode;
     columns: ColumnDef<TData, string>[];
     totalItems: number;
     queryOptions?: TableProps<TData>['queryOptions'];

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

@@ -0,0 +1,11 @@
+export declare enum VirtualizedTableEvent {
+    EXPAND_ROW = "@konstructio/VirtualizedTable/event-EXPAND_ROW",
+    COLLAPSE_ROW = "@konstructio/VirtualizedTable/event-COLLAPSE_ROW",
+    TOGGLE_ROW = "@konstructio/VirtualizedTable/event-TOGGLE_ROW",
+    RESET_FILTERS = "@konstructio/VirtualizedTable/event-RESET_FILTERS",
+    REFRESH = "@konstructio/VirtualizedTable/event-REFRESH"
+}
+export type VirtualizedTableEventDetail = {
+    tableId: string;
+    rowId?: string;
+};

package/dist/lib/components/VirtualizedTable/events/filters/filters.d.ts

@@ -0,0 +1 @@
+export declare const sendResetFiltersEvent: (tableId: string) => void;

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

@@ -1,14 +1,4 @@
-export declare enum VirtualizedTableEvent {
-    EXPAND_ROW = "@konstructio/VirtualizedTable/event-EXPAND_ROW",
-    COLLAPSE_ROW = "@konstructio/VirtualizedTable/event-COLLAPSE_ROW",
-    TOGGLE_ROW = "@konstructio/VirtualizedTable/event-TOGGLE_ROW",
-    RESET_FILTERS = "@konstructio/VirtualizedTable/event-RESET_FILTERS"
-}
-export type VirtualizedTableEventDetail = {
-    tableId: string;
-    rowId?: string;
-};
-export declare const sendExpandRowEvent: (tableId: string, rowId: string) => void;
-export declare const sendCollapseRowEvent: (tableId: string, rowId: string) => void;
-export declare const sendToggleRowEvent: (tableId: string, rowId: string) => void;
-export declare const sendResetFiltersEvent: (tableId: string) => void;
+export * from './events.types';
+export * from './filters/filters';
+export * from './refresh/refresh';
+export * from './row/row';

package/dist/lib/components/VirtualizedTable/events/refresh/refresh.d.ts

@@ -0,0 +1,2 @@
+export declare const sendRefreshEvent: (tableId?: string) => void;
+export * from './refresh.types';

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

@@ -0,0 +1,3 @@
+export type VirtualizedTableRefreshEventDetail = {
+    tableId?: string;
+};

package/dist/lib/components/VirtualizedTable/events/row/row.d.ts

@@ -0,0 +1,3 @@
+export declare const sendExpandRowEvent: (tableId: string, rowId: string) => void;
+export declare const sendCollapseRowEvent: (tableId: string, rowId: string) => void;
+export declare const sendToggleRowEvent: (tableId: string, rowId: string) => void;

package/dist/lib/components/VirtualizedTable/utils/get-table-id.d.ts

@@ -0,0 +1 @@
+export declare const getTableId: (id: string | string[] | number | number[]) => string;

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

@@ -1 +1,2 @@
+export * from './get-table-id';
 export * from './pagination';

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

@@ -45,8 +45,8 @@ export * from './Toast/Toast';
 export * from './Tooltip/Tooltip';
 export * from './Typography/Typography';
 export * from './VirtualizedTable/VirtualizedTable';
-export { sendExpandRowEvent, sendCollapseRowEvent, sendToggleRowEvent, sendResetFiltersEvent, VirtualizedTableEvent, } from './VirtualizedTable/events';
-export type { VirtualizedTableEventDetail } from './VirtualizedTable/events';
+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, 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';

package/dist/lib/contexts/theme.context.d.ts

@@ -1,4 +1,4 @@
-import { Theme } from '../../domain/theme';
+import { Theme } from '../domain/theme';
 export type ThemeContextType = {
     theme: Theme;
     setTheme: (theme: Theme) => void;

package/dist/lib/contexts/theme.hook.d.ts

@@ -1,4 +1,4 @@
-import { Theme } from '../../domain/theme';
+import { Theme } from '../domain/theme';
 type ThemeProps = {
     theme?: Theme;
     setTheme?: (theme: Theme) => void;

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

@@ -1,2 +1,3 @@
+export * from './useClickOutside';
 export * from './useMediaQuery';
 export * from './useToggle';

package/dist/lib/hooks/useClickOutside.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare const useClickOutside: (ref: RefObject<HTMLElement | null>, onClickOutside: () => void) => void;

package/dist/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.99",
+  "version": "0.1.2-alpha.103",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",
@@ -61,7 +61,7 @@
   },
   "homepage": "https://konstructio.github.io/konstruct-ui",
   "scripts": {
-    "build": "rimraf ./dist & tsc --p ./tsconfig.build.json && vite build && chmod +x scripts/copy.sh && ./scripts/copy.sh",
+    "build": "rimraf ./dist && tsc --p ./tsconfig.build.json && vite build && chmod +x scripts/copy.sh && ./scripts/copy.sh",
     "build:storybook": "storybook build -o storybook-static && cp -r public/* storybook-static",
     "check:prettier": "prettier lib --check --config ./.prettierrc",
     "check:types": "tsc -p tsconfig.json",
@@ -78,19 +78,21 @@
     "test:watch": "vitest dev"
   },
   "dependencies": {
-    "@radix-ui/react-alert-dialog": "^1.1.18",
-    "@radix-ui/react-checkbox": "^1.3.6",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-slider": "^1.4.2",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-switch": "^1.3.2",
-    "@radix-ui/react-tabs": "^1.1.16",
-    "@radix-ui/react-toast": "^1.2.18",
-    "@radix-ui/react-tooltip": "^1.2.11",
-    "@radix-ui/react-visually-hidden": "^1.2.4",
+    "@radix-ui/react-alert-dialog": "^1.1.23",
+    "@radix-ui/react-checkbox": "^1.3.11",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-popover": "^1.1.23",
+    "@radix-ui/react-slider": "^1.4.7",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@radix-ui/react-switch": "^1.3.7",
+    "@radix-ui/react-tabs": "^1.1.21",
+    "@radix-ui/react-toast": "^1.2.23",
+    "@radix-ui/react-tooltip": "^1.2.16",
+    "@radix-ui/react-visually-hidden": "^1.2.11",
     "@react-input/mask": "^2.0.4",
     "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.14.5",
+    "@tanstack/react-virtual": "^3.14.8",
     "chart.js": "^4.5.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -101,10 +103,10 @@
     "google-libphonenumber": "^3.2.44",
     "i18n-iso-countries": "^7.14.0",
     "js-cookie": "^3.0.8",
-    "lucide-react": "^1.23.0",
+    "lucide-react": "^1.27.0",
     "motion": "^12.42.2",
     "react-chartjs-2": "^5.3.1",
-    "react-day-picker": "^9.14.0",
+    "react-day-picker": "^10.0.1",
     "react-feather": "^2.0.10",
     "react-focus-lock": "^2.13.7",
     "react-remove-scroll": "^2.7.2",
@@ -145,12 +147,12 @@
   "devDependencies": {
     "@faker-js/faker": "^10.5.0",
     "@rollup/plugin-alias": "^6.0.0",
-    "@storybook/addon-docs": "^10.4.6",
-    "@storybook/addon-links": "^10.4.6",
-    "@storybook/react-vite": "^10.4.6",
-    "@tailwindcss/vite": "^4.3.2",
-    "@tanstack/react-query": "^5.101.2",
-    "@testing-library/jest-dom": "^6.9.1",
+    "@storybook/addon-docs": "^10.5.5",
+    "@storybook/addon-links": "^10.5.5",
+    "@storybook/react-vite": "^10.5.5",
+    "@tailwindcss/vite": "^4.3.3",
+    "@tanstack/react-query": "^5.101.4",
+    "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/google-libphonenumber": "^7.4.30",
@@ -159,35 +161,34 @@
     "@types/lodash": "^4.17.24",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.62.1",
-    "@typescript-eslint/parser": "^8.62.1",
+    "@typescript-eslint/eslint-plugin": "^8.65.0",
+    "@typescript-eslint/parser": "^8.65.0",
     "@vitejs/plugin-react": "^6.0.3",
-    "@vitest/coverage-v8": "^4.1.5",
-    "autoprefixer": "^10.5.2",
-    "eslint": "^9.39.4",
+    "@vitest/coverage-v8": "^4.1.10",
+    "autoprefixer": "^10.5.4",
+    "eslint": "^9.39.5",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.3",
-    "eslint-plugin-storybook": "^10.4.6",
+    "eslint-plugin-storybook": "^10.5.5",
     "eslint-plugin-vitest": "^0.5.4",
     "glob": "^13.0.6",
     "husky": "^9.1.7",
-    "jest-axe": "^10.0.0",
-    "jsdom": "^29.1.1",
+    "jest-axe": "^11.0.0",
+    "jsdom": "^30.0.0",
     "lodash": "^4.18.1",
-    "postcss": "^8.5.16",
-    "prettier": "^3.9.4",
+    "postcss": "^8.5.23",
+    "prettier": "^3.9.6",
     "rimraf": "^6.1.3",
-    "storybook": "^10.4.6",
-    "tailwindcss": "^4.2.4",
+    "storybook": "^10.5.5",
+    "tailwindcss": "^4.3.3",
     "ts-node": "^10.9.2",
     "typescript": "^6.0.3",
-    "vite": "^8.1.3",
-    "vite-plugin-dts": "^4.5.4",
+    "vite": "^8.1.5",
+    "vite-plugin-dts": "^5.0.3",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vite-plugin-svgr": "^5.2.0",
-    "vite-tsconfig-paths": "^6.1.1",
-    "vitest": "^4.1.5"
+    "vitest": "^4.1.10"
   },
   "overrides": {
     "storybook": "$storybook",