@povio/ui 3.4.0-rc.24 → 3.4.0-rc.26

package/dist/{uiConfig.context-DyCOXtaZ.d.ts → uiConfig.context-B27wINPD.d.ts}

@@ -1,17 +1,18 @@
-import { n as BottomSheetProps } from "./BottomSheet-BWKej2PR.js";
+import { t as BottomSheetProps } from "./BottomSheet-BZXBtOHF.js";
 import { r as ButtonProps } from "./Button-OxjPE7Hf.js";
 import { i as CheckboxProps } from "./Checkbox-Di3VlWJj.js";
 import { o as TextInputProps } from "./FormField-CpPQoyv_.js";
 import { i as NumberInputProps } from "./NumberInput-Cr_nD98h.js";
 import { r as RadioGroupProps } from "./RadioGroup-iry4UYlW.js";
-import { t as SelectBaseProps } from "./SelectBase-Ds3nqzVg.js";
+import { t as SelectBaseProps } from "./SelectBase-aSvWd7Cx.js";
 import { r as SliderProps } from "./Slider-CdZdFERe.js";
 import { r as ToggleProps } from "./Toggle-vHKDihtx.js";
 import { n as ActionModalProps } from "./ActionModal-C4lfhfPx.js";
 import { r as ToastPosition } from "./index-B8r_kiw4.js";
-import { i as ToastProps } from "./Toast-DDkev3SZ.js";
+import { r as ToastProps } from "./Toast-JL9yaI35.js";
 import { n as TagProps } from "./Tag-DkTx1S7H.js";
 import { r as DatePickerProps } from "./DatePicker-EJTAeVRc.js";
+import { i as DateRangeRelativeOption } from "./DateRangePicker-CMWUdyh1.js";
 import { i as CellTextProps, n as HeaderTextProps } from "./HeaderText-BrZaEuIn.js";
 import { PropsWithChildren, ReactElement } from "react";
 //#region src/hooks/useBreakpoint.d.ts
@@ -63,6 +64,8 @@ declare namespace UIConfig {
       todayIconButtonComponent?: DatePickerProps["todayIconButtonComponent"];
       allowPartialRange?: boolean;
       fireBlurOnChange?: boolean;
+      /** Additional choices shown by DateRangePicker in `relative` mode. */
+      dateRangeOptions?: DateRangeRelativeOption[];
     };
     actionModal: Pick<ActionModalProps, "titleTypography" | "descriptionTypography">;
     bottomSheet: Pick<BottomSheetProps, "closeDragThreshold" | "closeVelocityThreshold" | "hideThumb" | "headerTypography">;

package/dist/{uiConfig.context-SBtRegKv.js → uiConfig.context-B_wBkrQZ.js}

@@ -273,7 +273,8 @@ let UIConfig;
 			granularity: "day",
 			shouldUpdateDateOnMonthYearChange: false,
 			allowPartialRange: false,
-			fireBlurOnChange: false
+			fireBlurOnChange: false,
+			dateRangeOptions: []
 		},
 		actionModal: {
 			titleTypography: {

package/dist/{useBreakpoint-D0s71F97.js → useBreakpoint-YuMYUdpG.js}

@@ -1,4 +1,4 @@
-import { t as UIConfig } from "./uiConfig.context-SBtRegKv.js";
+import { t as UIConfig } from "./uiConfig.context-B_wBkrQZ.js";
 import { useSyncExternalStore } from "react";
 import { c } from "react/compiler-runtime";
 //#region src/hooks/useBreakpoint.ts

package/dist/{useFieldAccessibility-Bdt6GY7h.js → useFieldAccessibility-BsEP3ts2.js}

@@ -4,7 +4,7 @@ import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
 import { t as typographyDefinition } from "./typography.cva-BI0FyIqm.js";
 import { t as Loader } from "./Loader-C6YkWZOO.js";
 import { InlineIconButton } from "./components/inline-icon-button.js";
-import { r as InputClear } from "./TooltipWrapper-D8gfa-pC.js";
+import { r as InputClear } from "./TooltipWrapper-eCF5-eNP.js";
 import { a as inputSizeDefinition, r as inputContentWrapperDefinition } from "./input.cva-KYGD4Bdz.js";
 import { isValidElement, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{useFilter-BQRb0JpC.js → useFilter-DjR64hmy.js}

@@ -1,4 +1,4 @@
-import { R as $325a3faab7a68acd$export$a16aca283550c30d } from "./Dialog-DpLXaUXz.js";
+import { R as $325a3faab7a68acd$export$a16aca283550c30d } from "./Dialog-CXVxCqvL.js";
 import { useCallback, useMemo } from "react";
 //#region ../../node_modules/.bun/@react-aria+i18n@3.12.15+67f6792bdf102c28/node_modules/@react-aria/i18n/dist/useFilter.mjs
 function $bb77f239b46e8c72$export$3274cf84b703fff(options) {

package/dist/{useFormAutosave-CyuAM0Mh.js → useFormAutosave-DtYELduH.js}

@@ -1,9 +1,9 @@
-import { a as isEqual, o as ObjectUtils } from "./uiConfig.context-SBtRegKv.js";
+import { a as isEqual, o as ObjectUtils } from "./uiConfig.context-B_wBkrQZ.js";
 import { t as ZodArray } from "./schemas-BkfyFvBp.js";
 import { t as StringUtils } from "./string.utils-BPgv6QwA.js";
 import { t as ZodUtils } from "./zod.utils-Nz_Tbo_v.js";
 import { n as getDefaultInputComponentType } from "./dynamicInputs-D8j0ko24.js";
-import { t as InputItem } from "./InputItem-C_njDXaE.js";
+import { t as InputItem } from "./InputItem-DWuSzs16.js";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";

package/dist/{useStaticInputHandoff-pnEcfX_d.js → useStaticInputHandoff-ClwANfo-.js}

@@ -1,11 +1,11 @@
-import { t as UIConfig } from "./uiConfig.context-SBtRegKv.js";
+import { t as UIConfig } from "./uiConfig.context-B_wBkrQZ.js";
 import { r as FormFieldLabel, t as FormField } from "./FormField-ChDNTHr4.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
 import { t as typographyDefinition } from "./typography.cva-BI0FyIqm.js";
 import { t as Loader } from "./Loader-C6YkWZOO.js";
 import { InlineIconButton } from "./components/inline-icon-button.js";
-import { r as InputClear, t as TooltipWrapper } from "./TooltipWrapper-D8gfa-pC.js";
+import { r as InputClear, t as TooltipWrapper } from "./TooltipWrapper-eCF5-eNP.js";
 import { a as inputSizeDefinition, r as inputContentWrapperDefinition, t as inputBaseDefinition } from "./input.cva-KYGD4Bdz.js";
 import { isValidElement, useId, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/{useTableColumnConfig-BZ4H6gha.js → useTableColumnConfig-CR0gk7hI.js}

@@ -1,9 +1,9 @@
 import { t as createLucideIcon } from "./createLucideIcon-CskCrR9z.js";
-import { t as UIConfig } from "./uiConfig.context-SBtRegKv.js";
+import { t as UIConfig } from "./uiConfig.context-B_wBkrQZ.js";
 import { t as ChevronDown } from "./chevron-down-Ciz9yP9R.js";
 import { t as ChevronUp } from "./chevron-up-CHRnDSA3.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
-import { t as Checkbox } from "./Checkbox-B7f8NgnO.js";
+import { t as Checkbox } from "./Checkbox-Feyideqw.js";
 import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
 import { t as Typography } from "./Typography-AcUd9df8.js";
 import { t as Loader } from "./Loader-C6YkWZOO.js";
@@ -15,20 +15,16 @@ import { t as DateUtils } from "./date.utils-B8_QF9y6.js";
 import { f as ZodISODateTime, i as ZodEnum, l as ZodString, n as ZodBoolean, o as ZodNumber, s as ZodObject, t as ZodArray } from "./schemas-BkfyFvBp.js";
 import { t as StringUtils } from "./string.utils-BPgv6QwA.js";
 import { t as ZodUtils } from "./zod.utils-Nz_Tbo_v.js";
-import { t as Modal } from "./Modal-DdKOgTpG.js";
+import { t as Modal } from "./Modal-BrOOpTQ4.js";
 import { Pagination } from "./components/pagination.js";
-import { t as logger } from "./logger-BPhG2izn.js";
+import { t as logger } from "./logger-WPC6ostp.js";
 import { t as useTranslationMemo } from "./useTranslationMemo-CrZbeyBv.js";
 import { t as UIRouter } from "./router.context-VhvhlIvV.js";
 import { t as RoutingUtils } from "./routing.utils-UTQonIhB.js";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
-import { DndContext, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
-import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
-import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
 import { createPaginatedRowModel, createSortedRowModel, flexRender, stockFeatures, tableFeatures, useTable } from "@tanstack/react-table";
 import i18next from "i18next";
 /**
@@ -518,6 +514,10 @@ function useTableNav(options) {
 }
 //#endregion
 //#region src/components/table/Table.tsx
+const DndProvider = lazy(() => import("./TableDnd-CuHxANWh.js").then((module) => ({ default: module.DndProvider })));
+const SortableRows = lazy(() => import("./TableDnd-CuHxANWh.js").then((module) => ({ default: module.SortableRows })));
+const DraggableRow = lazy(() => import("./TableDnd-CuHxANWh.js").then((module) => ({ default: module.DraggableRow })));
+const DragHandle = lazy(() => import("./TableDnd-CuHxANWh.js").then((module) => ({ default: module.DragHandle })));
 const tableFeaturesConfig = tableFeatures({
 	...stockFeatures,
 	sortedRowModel: createSortedRowModel(),
@@ -536,49 +536,17 @@ const renderCell = (Comp, props) => {
 	return typeof rendered === "string" ? /* @__PURE__ */ jsx(CellText, { children: rendered }) : rendered;
 };
 const RowDragHandleCell = ({ rowId }) => {
-	const { attributes, listeners } = useSortable({ id: rowId });
-	return /* @__PURE__ */ jsx(InlineIconButton, {
-		...attributes,
-		...listeners,
-		className: "cursor-move p-1",
-		label: "Drag handle",
-		icon: GripVertical
-	});
-};
-const AutoDragHandleCell = ({ row }) => /* @__PURE__ */ jsx(RowDragHandleCell, { rowId: row.id });
-const DraggableRow = ({ row, showCellBorder, onRowClick, onDoubleClick, tableRowCva, tableDataCva, hasOnClick, ...props }) => {
-	const { transform, transition, setNodeRef, isDragging } = useSortable({ id: row.id });
-	const style = {
-		transform: CSS.Transform.toString(transform),
-		transition,
-		opacity: isDragging ? .8 : 1,
-		zIndex: isDragging ? 1 : 0,
-		position: "relative"
-	};
-	return /* @__PURE__ */ jsx("tr", {
-		ref: setNodeRef,
-		style,
-		"data-clickable": hasOnClick || row.getCanSelect() || void 0,
-		"data-selected": row.getIsSelected() || void 0,
-		className: clsx(tableRowCva(props)),
-		onClick: () => {
-			if (onRowClick) {
-				onRowClick(row.original);
-				return;
-			}
-			if (row.getCanSelect()) row.toggleSelected();
-		},
-		onDoubleClick: () => onDoubleClick?.(row.original),
-		children: row.getVisibleCells().map((cell, cellIndex) => {
-			const columnMeta = cell.column.columnDef.meta ?? {};
-			return /* @__PURE__ */ jsx("td", {
-				tabIndex: -1,
-				className: clsx(tableDataCva({ hasRightBorder: cellIndex > 0 && showCellBorder }), columnMeta.cellClass, columnMeta.width),
-				children: renderCell(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
-			}, cell.id);
+	return /* @__PURE__ */ jsx(DragHandle, {
+		id: rowId,
+		children: (dragProps) => /* @__PURE__ */ jsx(InlineIconButton, {
+			...dragProps,
+			className: "cursor-move p-1",
+			label: "Drag handle",
+			icon: GripVertical
 		})
 	});
 };
+const AutoDragHandleCell = ({ row }) => /* @__PURE__ */ jsx(RowDragHandleCell, { rowId: row.id });
 const Table$1 = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, className, sorting, setSorting, columnOrder, setColumnOrder, columnVisibility, setColumnVisibility, bulkSelectionActions: ActionHeader, enableDragDrop = false, onDragEnd, onReorder, getRowId, enableRowSelection, enableMultiRowSelection = false, defaultSelectedRows, onRowSelectionChange, ...props }) => {
 	const tableRowCva = UIOverrides.useCva("table.rowCva", tableRowDefinition);
 	const theadCva = UIOverrides.useCva("table.theadCva", theadDefinition);
@@ -659,7 +627,12 @@ const Table$1 = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, cl
 			if (onReorder) {
 				const oldIndex = items.findIndex((item_0) => getRowId(item_0) === active.id);
 				const newIndex = items.findIndex((item_1) => getRowId(item_1) === over.id);
-				if (oldIndex !== -1 && newIndex !== -1) onReorder(arrayMove(items, oldIndex, newIndex));
+				if (oldIndex !== -1 && newIndex !== -1) {
+					const reorderedItems = [...items];
+					const [movedItem] = reorderedItems.splice(oldIndex, 1);
+					reorderedItems.splice(newIndex, 0, movedItem);
+					onReorder(reorderedItems);
+				}
 			}
 			onDragEnd?.(event);
 		}
@@ -669,7 +642,6 @@ const Table$1 = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, cl
 		items,
 		getRowId
 	]);
-	const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
 	const selectedRows = table.getSelectedRowModel().rows;
 	const columnCount = table.getHeaderGroups()[0].headers.length;
 	const isAnyRowSelected = selectedRows.length > 0 && !!ActionHeader;
@@ -716,19 +688,29 @@ const Table$1 = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, cl
 		}), /* @__PURE__ */ jsx("tbody", {
 			ref,
 			className: "relative",
-			children: enableDragDrop ? /* @__PURE__ */ jsx(SortableContext, {
+			children: enableDragDrop ? /* @__PURE__ */ jsx(SortableRows, {
 				items: dataIds,
-				strategy: verticalListSortingStrategy,
 				children: table.getRowModel().rows.map((row_0) => /* @__PURE__ */ jsx(DraggableRow, {
-					row: row_0,
-					showCellBorder,
-					onRowClick,
-					onDoubleClick,
-					tableRowCva,
-					tableHeadDataCva,
-					tableDataCva,
-					hasOnClick,
-					...props
+					id: row_0.id,
+					className: clsx(tableRowCva({ ...props })),
+					isClickable: hasOnClick || row_0.getCanSelect(),
+					isSelected: row_0.getIsSelected(),
+					onClick: () => {
+						if (onRowClick) {
+							onRowClick(row_0.original);
+							return;
+						}
+						if (row_0.getCanSelect()) row_0.toggleSelected();
+					},
+					onDoubleClick: () => onDoubleClick?.(row_0.original),
+					children: row_0.getVisibleCells().map((cell, cellIndex) => {
+						const columnMeta_0 = cell.column.columnDef.meta ?? {};
+						return /* @__PURE__ */ jsx("td", {
+							tabIndex: -1,
+							className: clsx(tableDataCva({ hasRightBorder: cellIndex > 0 && showCellBorder }), columnMeta_0.cellClass, columnMeta_0.width),
+							children: renderCell(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
+						}, cell.id);
+					})
 				}, row_0.id))
 			}) : table.getRowModel().rows.map((row_1) => {
 				return /* @__PURE__ */ jsx("tr", {
@@ -743,24 +725,24 @@ const Table$1 = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, cl
 					onDoubleClick: () => onDoubleClick?.(row_1.original),
 					"data-clickable": hasOnClick || row_1.getCanSelect() || void 0,
 					"data-selected": row_1.getIsSelected() || void 0,
-					children: row_1.getVisibleCells().map((cell, cellIndex) => {
-						const columnMeta_0 = cell.column.columnDef.meta ?? {};
+					children: row_1.getVisibleCells().map((cell_0, cellIndex_0) => {
+						const columnMeta_1 = cell_0.column.columnDef.meta ?? {};
 						return /* @__PURE__ */ jsx("td", {
 							tabIndex: -1,
-							className: clsx(tableDataCva({ hasRightBorder: cellIndex > 0 && showCellBorder }), columnMeta_0.cellClass, columnMeta_0.width),
-							children: renderCell(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
-						}, cell.id);
+							className: clsx(tableDataCva({ hasRightBorder: cellIndex_0 > 0 && showCellBorder }), columnMeta_1.cellClass, columnMeta_1.width),
+							children: renderCell(cell_0.column.columnDef.cell, CustomCellContext(cell_0.getContext()))
+						}, cell_0.id);
 					})
 				}, row_1.id);
 			})
 		})]
 	});
-	if (enableDragDrop) return /* @__PURE__ */ jsx(DndContext, {
-		collisionDetection: closestCenter,
-		modifiers: [restrictToVerticalAxis],
-		onDragEnd: handleDragEnd,
-		sensors,
-		children: tableElement
+	if (enableDragDrop) return /* @__PURE__ */ jsx(Suspense, {
+		fallback: null,
+		children: /* @__PURE__ */ jsx(DndProvider, {
+			onDragEnd: handleDragEnd,
+			children: tableElement
+		})
 	});
 	return tableElement;
 };

package/dist/{useTableNav-BoQOVqZF.d.ts → useTableNav-CFHbvYvu.d.ts}

@@ -2,9 +2,9 @@ import { n as StyleMergeUtils, t as UIOverrides } from "./uiOverrides.context-Bd
 import { c as ZodObject, h as output, i as ZodEnum } from "./schemas-CAtYiHoz.js";
 import { t as FieldPath } from "./form.binding-DWlFTecs.js";
 import { ComponentType, Dispatch, KeyboardEvent, ReactNode, SetStateAction } from "react";
-import { DragEndEvent, UniqueIdentifier } from "@dnd-kit/core";
 import { CellContext, ColumnDef, ColumnMeta, ColumnOrderState, ColumnVisibilityState, OnChangeFn, PaginationState, Row, RowData, RowSelectionState, SortingState, StockFeatures, Table } from "@tanstack/react-table";
 import { TFunction } from "i18next";
+import { DragEndEvent, UniqueIdentifier } from "@dnd-kit/core";
 //#region src/components/table/ColumnConfig.d.ts
 type ColumnDef$4<TData extends RowData, TValue = unknown> = ColumnDef<StockFeatures, TData, TValue>;
 type VisibilityState$2 = ColumnVisibilityState;

package/dist/{useToast-gQ9gzrbt.d.ts → useToast-B55ZUvwy.d.ts}

@@ -1,5 +1,5 @@
 import { n as ToastOptions$1, r as ToastPosition, t as Id } from "./index-B8r_kiw4.js";
-import { i as ToastProps } from "./Toast-DDkev3SZ.js";
+import { r as ToastProps } from "./Toast-JL9yaI35.js";
 //#region src/components/status/Toast/useToast.d.ts
 interface ToastParams extends Omit<ToastProps, "color"> {
   position?: ToastPosition;

package/dist/utils/logger.js

@@ -1,2 +1,2 @@
-import { t as logger } from "../logger-BPhG2izn.js";
+import { t as logger } from "../logger-WPC6ostp.js";
 export { logger };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "3.4.0-rc.24",
+  "version": "3.4.0-rc.26",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/confirmation.context-C1-ZF9CW.js

@@ -1,80 +0,0 @@
-import "./i18n-C2TBJvnh.js";
-import { ActionModal } from "./components/action-modal.js";
-import { createContext, use, useCallback, useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useTranslation } from "react-i18next";
-//#region src/config/confirmation.context.tsx
-let Confirmation;
-(function(_Confirmation) {
-	const DEFAULT_STATE = {
-		heading: "",
-		description: "",
-		isOpen: false,
-		primaryAction: {
-			label: "",
-			onPress: () => {}
-		},
-		secondaryAction: {
-			label: "",
-			onPress: () => {}
-		}
-	};
-	const Context = createContext(null);
-	_Confirmation.Provider = ({ children }) => {
-		const [state, setState] = useState(DEFAULT_STATE);
-		const { t } = useTranslation("ui");
-		const onCancel = () => setState(DEFAULT_STATE);
-		const confirm = useCallback(async ({ heading, description, buttonSize, textAlign, modalClassName, cancelLabel = t(($) => $.ui.confirmation.cancel), confirmLabel = t(($_0) => $_0.ui.confirmation.confirm), confirmVariant, confirmColor, cancelVariant, cancelColor }) => {
-			return new Promise((resolve) => {
-				setState({
-					heading,
-					description,
-					buttonSize,
-					textAlign,
-					modalClassName,
-					primaryAction: {
-						label: confirmLabel,
-						onPress() {
-							setState({
-								...state,
-								isOpen: false,
-								heading: "",
-								description: ""
-							});
-							resolve(true);
-						},
-						variant: confirmVariant,
-						color: confirmColor
-					},
-					secondaryAction: {
-						label: cancelLabel,
-						onPress() {
-							onCancel();
-							resolve(false);
-						},
-						variant: cancelVariant,
-						color: cancelColor
-					},
-					isOpen: !state.isOpen
-				});
-			});
-		}, [state, t]);
-		const value = useMemo(() => ({ confirm }), [confirm]);
-		return /* @__PURE__ */ jsxs(Context.Provider, {
-			value,
-			children: [/* @__PURE__ */ jsx(ActionModal, {
-				...state,
-				onClose: state.secondaryAction?.onPress ?? onCancel,
-				primaryAction: state.primaryAction,
-				secondaryAction: state.secondaryAction
-			}), children]
-		});
-	};
-	_Confirmation.useConfirmation = () => {
-		const context = use(Context);
-		if (!context) throw new Error("Confirmation.useConfirmation must be used within a Confirmation.Provider");
-		return context;
-	};
-})(Confirmation || (Confirmation = {}));
-//#endregion
-export { Confirmation as t };