@up42/up-components 9.1.0 → 9.2.1

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import { Fade, Slide, Grow, createTheme, SvgIcon, Alert as Alert$1, AlertTitle, capitalize as capitalize$1, Box, Snackbar, CssBaseline, CircularProgress, Avatar as Avatar$1, Grid, Container, Checkbox as Checkbox$1, FormLabel as FormLabel$1, FormControl, FormGroup, FormControlLabel, FormHelperText, InputAdornment, IconButton, Button as Button$1, Radio as Radio$1, RadioGroup, Switch as Switch$1, Select as Select$1, MenuItem, TextField, Slider as Slider$1, Link as Link$1, Tab as Tab$1, Tabs as Tabs$1, Divider as Divider$1, Card, CardContent, Modal, Tooltip, Popover as Popover$1, Chip, Autocomplete, Typography as Typography$1, Stack, Badge as Badge$1, Menu, styled, Dialog, alpha } from '@mui/material';
+import { Fade, Slide, Grow, createTheme, SvgIcon, Alert as Alert$1, AlertTitle, capitalize as capitalize$1, Box, Snackbar, CssBaseline, CircularProgress, Avatar as Avatar$1, Grid, Container, Checkbox as Checkbox$1, FormLabel as FormLabel$1, FormControl, FormGroup, FormControlLabel, FormHelperText, InputAdornment, IconButton, Button as Button$1, Radio as Radio$1, RadioGroup, Switch as Switch$1, Select as Select$1, MenuItem, TextField, Slider as Slider$1, Link as Link$1, Tab as Tab$1, Tabs as Tabs$1, Divider as Divider$1, Card, CardContent, Modal, Tooltip, Popover as Popover$1, Chip, Autocomplete, Typography as Typography$1, Stack, Badge as Badge$1, alpha, Menu, styled, Dialog } from '@mui/material';
 export * from '@mui/material';
 import { ThemeProvider } from '@mui/material/styles';
 import * as React from 'react';
@@ -27,6 +27,7 @@ import MuiTablePagination$1 from '@mui/material/TablePagination';
 import MuiTableSortLabel from '@mui/material/TableSortLabel';
 import MuiTableFooter$1 from '@mui/material/TableFooter';
 import { useSearchParams, useNavigate } from 'react-router';
+import { isSchema } from 'yup';
 
 var color$2 = {
 	gray0: "#FFFFFF",
@@ -6909,6 +6910,14 @@ const BasePopover = ({ open, onClose, anchorEl, header, children, footerInfo, pr
         e.stopPropagation();
         primaryButton?.onClick?.(e).then(handleClose);
     };
+    const handleSecondaryButtonClick = (e) => {
+        e.stopPropagation();
+        if (secondaryButton?.onClick) {
+            void Promise.resolve(secondaryButton.onClick(e));
+            return;
+        }
+        handleClose();
+    };
     const handleClose = () => {
         onClose?.();
         setPopoverAnchorEl(null);
@@ -6983,7 +6992,7 @@ const BasePopover = ({ open, onClose, anchorEl, header, children, footerInfo, pr
                         } },
                         footerInfo && footerInfo,
                         React__default.createElement(Box, { sx: { display: 'flex', gap: tokens.size.spacing.scale8, marginLeft: 'auto' } },
-                            secondaryButton && (React__default.createElement(Button, { variant: "outlined", size: "slim", ...secondaryButton, onClick: handleClose }, secondaryButton.label)),
+                            secondaryButton && (React__default.createElement(Button, { variant: "outlined", size: "slim", ...secondaryButton, onClick: handleSecondaryButtonClick }, secondaryButton.label)),
                             primaryButton && (React__default.createElement(Button, { variant: "contained", size: "slim", ...primaryButton, onClick: handlePrimaryButtonClick, ...(primaryButton.startIcon && { startIcon: React__default.createElement(Icon, { name: primaryButton.startIcon }) }) }, primaryButton.label)))))),
                 children))));
 };
@@ -7737,6 +7746,7 @@ const FeatureCardHeader = ({ header, subheader, checkboxProps, imageProps }) =>
                 width: tokens.size.spacing.scale48,
                 height: tokens.size.spacing.scale48,
                 borderRadius: tokens.shape.border.radius4,
+                border: `${tokens.shape.border.width1} solid ${alpha(tokens.color.gray900, 0.1)}`,
                 backgroundColor: tokens.color.gray50,
                 display: 'flex',
                 alignItems: 'center',
@@ -12049,22 +12059,39 @@ const DEFAULT_MARK_VALUES = [0, 2.5, 10, 30];
  * Hook for GSD (Ground Sampling Distance) range slider with logarithmic scale.
  * Handles conversion between linear slider values and logarithmic GSD values.
  */
-function useGsdSlider({ minValue, maxValue, onChange, markValues = DEFAULT_MARK_VALUES }) {
-    const minGsd = markValues.length > 0 ? Math.min(...markValues) : DEFAULT_MARK_VALUES[0];
-    const maxGsd = markValues.length > 0 ? Math.max(...markValues) : DEFAULT_MARK_VALUES[DEFAULT_MARK_VALUES.length - 1];
-    const sliderValue = useMemo(() => [getSliderValueFromGsd(minValue, minGsd, maxGsd), getSliderValueFromGsd(maxValue, minGsd, maxGsd)], [minValue, maxValue, minGsd, maxGsd]);
-    const marks = useMemo(() => markValues.map((mark) => ({
-        value: getSliderValueFromGsd(mark, minGsd, maxGsd),
-        label: `${mark} m`,
-    })), [markValues, minGsd, maxGsd]);
+function useGsdSlider({ minValue: minValueProp, maxValue: maxValueProp, markValues: markValuesProp = DEFAULT_MARK_VALUES, onChange, }) {
+    const hasMarks = markValuesProp.length > 0;
+    // If there are marks, use the prop mark values, otherwise use the default mark values
+    const markValues = hasMarks ? markValuesProp : DEFAULT_MARK_VALUES;
+    const minMarkValue = Math.min(...markValues);
+    const maxMarkValue = Math.max(...markValues);
+    // If there are marks, use the min and max mark values, otherwise use undefined
+    const minGsd = hasMarks ? minMarkValue : undefined;
+    const maxGsd = hasMarks ? maxMarkValue : undefined;
+    // If the min or max value is not provided, use the min and max mark values
+    const minSliderValue = minValueProp ?? minMarkValue;
+    const maxSliderValue = maxValueProp ?? maxMarkValue;
+    // Get the slider value from the min and max slider values
+    const sliderValue = useMemo(() => [
+        getSliderValueFromGsd(minSliderValue, minMarkValue, maxMarkValue),
+        getSliderValueFromGsd(maxSliderValue, minMarkValue, maxMarkValue),
+    ], [minSliderValue, maxSliderValue, minMarkValue, maxMarkValue]);
+    const marks = useMemo(() => {
+        if (!hasMarks)
+            return [];
+        return markValuesProp.map((mark) => ({
+            value: getSliderValueFromGsd(mark, minMarkValue, maxMarkValue),
+            label: `${mark} m`,
+        }));
+    }, [hasMarks, markValuesProp, minMarkValue, maxMarkValue]);
     const handleSliderChange = (_event, newValue) => {
         if (newValue === undefined)
             return;
         const values = Array.isArray(newValue) ? newValue : [newValue, newValue];
-        const [min, max] = values.map((v) => getGsdFromSliderValue(v, minGsd, maxGsd));
+        const [min, max] = values.map((v) => getGsdFromSliderValue(v, minMarkValue, maxMarkValue));
         onChange(min, max);
     };
-    const scale = (n) => getGsdFromSliderValue(n, minGsd, maxGsd);
+    const scale = (n) => getGsdFromSliderValue(n, minMarkValue, maxMarkValue);
     return {
         sliderValue,
         marks,
@@ -12195,4 +12222,234 @@ function useUrlParams(options = {}) {
     };
 }
 
-export { ActionToolbar, Alert, Avatar, Badge, Banner, Button, Checkbox, CodeBlock, CodeInline, CodeSnippet, ContactBox, ControlButton, CopyButton, DataGrid, DateTime, Divider, DocumentationPopover, EditTagsButton, EmptyState, FeatureCard, FeatureCardHeader, FeatureCardHeaderActions, FeatureFlagCheckbox, FilterPopover, FindUsersButton, FormAutocomplete, FormCheckbox, FormDatePicker, FormDateRangePicker, FormDateRangePickerList, FormDateTimePicker, FormInput, FormRadio, FormSelect, FormSlider, FormSwitch, GridContainer, GridItem, Icon, Illustration, InfoCard, InfoModal, InfoPopover, Input, LearnMoreButton, Link, Loading, Logo, NotFound, PageContainer, PageHeader, PageHeaderV2, Popover, Radio, RoleBanner, Select, Slider, StatusLight, Switch, Tab, TabGroup, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, Tabs, Tag, TagsList, ToggleButton, Typography, UpComponentsProvider, analytics, capitalize, copyToClipboard, formatDate, formatFileSize, formatNumber, generateQueryKey, objectToSearchParams, searchParamsToObject, theme, tokens, useAlert, useCursorPagination, useDebounce, useGsdSlider, useQueryParams, useRemotePagination, useToggle, useUrlParams, valueToString };
+/** Parse a comma-separated string into an array of strings. */
+function parseCommaSeparatedParam(value) {
+    if (value === '') {
+        return [];
+    }
+    const segments = value.split(',');
+    const trimmedNonEmpty = segments.map((segment) => segment.trim()).filter(Boolean);
+    return trimmedNonEmpty;
+}
+/** Get the default value for a Yup field. */
+function getDefaultValueForYupField(fieldDefinition) {
+    const isYupSchema = isSchema(fieldDefinition);
+    if (!isYupSchema) {
+        return undefined;
+    }
+    const yupField = fieldDefinition;
+    return yupField.getDefault();
+}
+/** Get the default values for a schema (`.default()` on each field). */
+function getDefaultValues(schema) {
+    const objectSchema = schema;
+    const { fields } = objectSchema;
+    const defaultEntries = Object.keys(fields).map((fieldKey) => {
+        const defaultForField = getDefaultValueForYupField(fields[fieldKey]);
+        return [fieldKey, defaultForField];
+    });
+    const defaults = Object.fromEntries(defaultEntries);
+    const castOptions = { stripUnknown: true };
+    return schema.cast(defaults, castOptions);
+}
+/** Check if a field is an array and the value is a string. */
+function isArrayFieldWithStringFromUrl(fieldDefinition, paramValue) {
+    const isYupSchema = isSchema(fieldDefinition);
+    if (!isYupSchema || fieldDefinition.type !== 'array') {
+        return false;
+    }
+    const valueIsString = typeof paramValue === 'string';
+    return valueIsString;
+}
+/** Get the URL parameter name for a field. */
+function urlParamNameForField(fieldKey, urlKeyMap) {
+    const mappedName = urlKeyMap?.[fieldKey];
+    if (mappedName === undefined) {
+        return fieldKey;
+    }
+    return mappedName;
+}
+/** Build a raw record of URL parameters from a schema and URL parameters. */
+function buildRawParamsFromUrl(schema, urlParams, urlKeyMap) {
+    const objectSchema = schema;
+    const { fields } = objectSchema;
+    const presentFieldEntries = Object.keys(fields)
+        .map((fieldKey) => {
+        const searchParamKey = urlParamNameForField(fieldKey, urlKeyMap);
+        const paramValue = urlParams[searchParamKey];
+        if (paramValue === undefined) {
+            return null;
+        }
+        const fieldDefinition = fields[fieldKey];
+        const shouldSplitCommaSeparatedString = isArrayFieldWithStringFromUrl(fieldDefinition, paramValue);
+        if (shouldSplitCommaSeparatedString) {
+            const stringFromQuery = paramValue;
+            const parsedList = parseCommaSeparatedParam(stringFromQuery);
+            return [fieldKey, parsedList];
+        }
+        return [fieldKey, paramValue];
+    })
+        .filter((entry) => entry !== null);
+    return Object.fromEntries(presentFieldEntries);
+}
+/** Validate a raw record of URL parameters against a schema. */
+function validateRawAgainstSchema(schema, raw) {
+    const castOptions = { stripUnknown: true };
+    try {
+        const castedSchema = schema.cast(raw, castOptions);
+        return schema.validateSync(castedSchema, castOptions);
+    }
+    catch {
+        return null;
+    }
+}
+/** Parse URL params into a validated filter object using the schema and optional URL key map. */
+function parseFromUrl(schema, urlParams, urlKeyMap) {
+    const raw = buildRawParamsFromUrl(schema, urlParams, urlKeyMap);
+    const validated = validateRawAgainstSchema(schema, raw);
+    // If the validation failed, return the default values
+    if (validated === null) {
+        return getDefaultValues(schema);
+    }
+    return validated;
+}
+/** Check if two arrays of filter values are equal. */
+function arrayFilterValuesEqual(left, right) {
+    const { length: leftLength } = left;
+    const { length: rightLength } = right;
+    if (leftLength !== rightLength) {
+        return false;
+    }
+    return left.every((leftItem, index) => {
+        const rightItem = right[index];
+        return sameFilterValue(leftItem, rightItem);
+    });
+}
+/** Check if two plain record of filter values are equal. */
+function plainRecordFilterValuesEqual(leftRecord, rightRecord) {
+    const keySet = new Set([...Object.keys(leftRecord), ...Object.keys(rightRecord)]);
+    const allKeys = [...keySet];
+    return allKeys.every((key) => {
+        const leftValue = leftRecord[key];
+        const rightValue = rightRecord[key];
+        return sameFilterValue(leftValue, rightValue);
+    });
+}
+/** Deep value equality for filter field values (primitives, arrays, plain objects, Date). */
+function sameFilterValue(left, right) {
+    // Check if the values are the same object
+    if (Object.is(left, right)) {
+        return true;
+    }
+    // Check if the values are null or undefined
+    const leftIsNullish = left == null;
+    const rightIsNullish = right == null;
+    if (leftIsNullish || rightIsNullish) {
+        const bothNullish = leftIsNullish && rightIsNullish;
+        return bothNullish;
+    }
+    // Check if the values are arrays
+    const leftIsArray = Array.isArray(left);
+    const rightIsArray = Array.isArray(right);
+    const bothAreArrays = leftIsArray && rightIsArray;
+    if (bothAreArrays) {
+        return arrayFilterValuesEqual(left, right);
+    }
+    // Check if the values are dates
+    const leftIsDate = left instanceof Date;
+    const rightIsDate = right instanceof Date;
+    const bothAreDates = leftIsDate && rightIsDate;
+    if (bothAreDates) {
+        const leftTime = left.getTime();
+        const rightTime = right.getTime();
+        return leftTime === rightTime;
+    }
+    // Check if the values are objects
+    const leftIsObject = typeof left === 'object';
+    const rightIsObject = typeof right === 'object';
+    const bothAreObjects = leftIsObject && rightIsObject;
+    if (!bothAreObjects) {
+        return false;
+    }
+    // Check if the values are plain records
+    const leftRecord = left;
+    const rightRecord = right;
+    return plainRecordFilterValuesEqual(leftRecord, rightRecord);
+}
+/**
+ * True when `draft` and `applied` match on every key in `schema`.
+ * Unrelated URL search params do not appear on these snapshots, so this stays accurate when other code adds params.
+ */
+function areFilterSnapshotsEqual(schema, draft, applied) {
+    const objectSchema = schema;
+    const { fields } = objectSchema;
+    const schemaFieldKeys = Object.keys(fields);
+    return schemaFieldKeys.every((fieldKey) => {
+        const filterKey = fieldKey;
+        const draftValue = draft[filterKey];
+        const appliedValue = applied[filterKey];
+        return sameFilterValue(draftValue, appliedValue);
+    });
+}
+
+/**
+ * Draft vs applied filter state: the UI edits `filters` (draft); `apply` writes to the URL via {@link useUrlParams}.
+ * Applied filters are always derived from the current search string and validated with Yup.
+ *
+ * When the query string changes, the draft syncs from the URL only if **schema-defined** filter values changed.
+ * Extra params from other features do not reset the draft or affect **`isDirty`** by themselves.
+ */
+function useFilterState(schema, options = {}) {
+    const { urlKeyMap } = options;
+    const { setParams, stringParams } = useUrlParams();
+    const defaults = useMemo(() => getDefaultValues(schema), [schema]);
+    const appliedFilters = useMemo(() => {
+        const raw = searchParamsToObject(new URLSearchParams(stringParams));
+        return parseFromUrl(schema, raw, urlKeyMap);
+    }, [schema, stringParams, urlKeyMap]);
+    const [draft, setDraft] = useState(() => parseFromUrl(schema, searchParamsToObject(new URLSearchParams(stringParams)), urlKeyMap));
+    const draftRef = useRef(draft);
+    draftRef.current = draft;
+    const prevAppliedRef = useRef(null);
+    useEffect(() => {
+        const prevApplied = prevAppliedRef.current;
+        if (prevApplied !== null && areFilterSnapshotsEqual(schema, prevApplied, appliedFilters)) {
+            prevAppliedRef.current = appliedFilters;
+            return;
+        }
+        prevAppliedRef.current = appliedFilters;
+        draftRef.current = appliedFilters;
+        setDraft(appliedFilters);
+    }, [appliedFilters, schema]);
+    const setFilter = useCallback((key, value) => {
+        const next = { ...draftRef.current, [key]: value };
+        draftRef.current = next;
+        setDraft(next);
+    }, []);
+    const apply = useCallback(() => {
+        const rawParams = searchParamsToObject(new URLSearchParams(stringParams));
+        const nextParams = { ...rawParams };
+        Object.keys(schema.fields).map((fieldKey) => {
+            const mappedUrlKey = urlKeyMap?.[fieldKey];
+            const urlKey = mappedUrlKey ?? fieldKey;
+            const fieldValue = draftRef.current[fieldKey];
+            nextParams[urlKey] = fieldValue;
+        });
+        setParams(nextParams);
+    }, [schema, setParams, stringParams, urlKeyMap]);
+    const reset = useCallback(() => {
+        draftRef.current = defaults;
+        setDraft(defaults);
+    }, [defaults]);
+    const isDirty = useMemo(() => !areFilterSnapshotsEqual(schema, draft, appliedFilters), [schema, draft, appliedFilters]);
+    return {
+        filters: draft,
+        setFilter,
+        apply,
+        reset,
+        isDirty,
+        defaults,
+    };
+}
+
+export { ActionToolbar, Alert, Avatar, Badge, Banner, Button, Checkbox, CodeBlock, CodeInline, CodeSnippet, ContactBox, ControlButton, CopyButton, DataGrid, DateTime, Divider, DocumentationPopover, EditTagsButton, EmptyState, FeatureCard, FeatureCardHeader, FeatureCardHeaderActions, FeatureFlagCheckbox, FilterPopover, FindUsersButton, FormAutocomplete, FormCheckbox, FormDatePicker, FormDateRangePicker, FormDateRangePickerList, FormDateTimePicker, FormInput, FormRadio, FormSelect, FormSlider, FormSwitch, GridContainer, GridItem, Icon, Illustration, InfoCard, InfoModal, InfoPopover, Input, LearnMoreButton, Link, Loading, Logo, NotFound, PageContainer, PageHeader, PageHeaderV2, Popover, Radio, RoleBanner, Select, Slider, StatusLight, Switch, Tab, TabGroup, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, Tabs, Tag, TagsList, ToggleButton, Typography, UpComponentsProvider, analytics, areFilterSnapshotsEqual, capitalize, copyToClipboard, formatDate, formatFileSize, formatNumber, generateQueryKey, objectToSearchParams, searchParamsToObject, theme, tokens, useAlert, useCursorPagination, useDebounce, useFilterState, useGsdSlider, useQueryParams, useRemotePagination, useToggle, useUrlParams, valueToString };

package/dist/index.d.ts

@@ -23,6 +23,7 @@ import { TableFooterProps as TableFooterProps$1 } from '@mui/material/TableFoote
 import { DataGridPremiumProps } from '@mui/x-data-grid-premium';
 export { GRID_DETAIL_PANEL_TOGGLE_COL_DEF, GRID_DETAIL_PANEL_TOGGLE_FIELD, GridCell, GridCellModes, GridCellModesModel, GridCellParams, GridColDef, GridColumnHeaderParams, GridEditCellProps, GridEditInputCell, GridFooter, GridInitialState, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPreProcessEditCellProps, GridRenderCellParams, GridRenderEditCellParams, GridRow, GridRowCount, GridRowId, GridRowParams, GridRowSelectionModel, GridRowsProp, GridSelectedRowCount, GridSortModel, GridTreeNodeWithRender, gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector, gridRowsLookupSelector, useGridApiContext, useGridApiRef, useGridSelector } from '@mui/x-data-grid-premium';
 import { ToggleButtonProps as ToggleButtonProps$1 } from '@mui/material/ToggleButton';
+import { AnyObjectSchema, InferType } from 'yup';
 
 interface UpComponentsProviderProps extends Omit<ThemeProviderProps, 'theme'> {
     licenseKey: string;
@@ -4696,7 +4697,8 @@ type PopoverProps = Omit<PopoverProps$1, 'content' | 'open' | 'onClose'> & {
      */
     primaryButton?: PopoverButtonProps;
     /**
-     * Secondary button props (optional)
+     * Secondary button props (optional).
+     * If `onClick` is omitted, clicking the button only closes the popover. If `onClick` is set, it runs and the popover stays open unless you call `onClose`.
      */
     secondaryButton?: PopoverButtonProps;
     /**
@@ -11826,18 +11828,21 @@ declare const useDebounce: <T>(value: T, delay?: number) => T;
 type UseGsdSliderProps = {
     /**
      * Minimum GSD value (meters). Controlled by parent.
+     * When omitted, the range thumb uses the axis minimum (lowest mark used for the logarithm).
      */
-    minValue: number;
+    minValue?: number;
     /**
      * Maximum GSD value (meters). Controlled by parent.
+     * When omitted, the range thumb uses the axis maximum (highest mark used for the logarithm).
      */
-    maxValue: number;
+    maxValue?: number;
     /**
      * Callback when the range changes.
      */
     onChange: (minValue: number, maxValue: number) => void;
     /**
      * GSD values for the slider marks.
+     * Pass an empty array if you want no marks and `minGsd` / `maxGsd` returned as `undefined` (axis still uses the default scale internally).
      * @default [0, 2.5, 10, 30]
      */
     markValues?: number[];
@@ -11846,7 +11851,7 @@ type UseGsdSliderProps = {
  * Hook for GSD (Ground Sampling Distance) range slider with logarithmic scale.
  * Handles conversion between linear slider values and logarithmic GSD values.
  */
-declare function useGsdSlider({ minValue, maxValue, onChange, markValues }: UseGsdSliderProps): {
+declare function useGsdSlider({ minValue: minValueProp, maxValue: maxValueProp, markValues: markValuesProp, onChange, }: UseGsdSliderProps): {
     sliderValue: [number, number];
     marks: {
         value: number;
@@ -11854,8 +11859,8 @@ declare function useGsdSlider({ minValue, maxValue, onChange, markValues }: UseG
     }[];
     handleSliderChange: (_event: unknown, newValue?: number | number[]) => void;
     scale: (n: number) => number;
-    minGsd: number;
-    maxGsd: number;
+    minGsd: number | undefined;
+    maxGsd: number | undefined;
 };
 
 type CreateAlertProps = {
@@ -11963,5 +11968,32 @@ declare function valueToString(value: unknown): string;
  */
 declare function objectToSearchParams<T extends ParamsObject = ParamsObject>(object: T): string;
 
-export { ActionToolbar, Alert, Avatar, Badge, Banner, Button, Checkbox, CodeBlock, CodeInline, CodeSnippet, ContactBox, ControlButton, CopyButton, DataGrid, DateTime, Divider, DocumentationPopover, EditTagsButton, EmptyState, FeatureCard, FeatureCardHeader, FeatureCardHeaderActions, FeatureFlagCheckbox, FilterPopover, FindUsersButton, FormAutocomplete, FormCheckbox, FormDatePicker, FormDateRangePicker, FormDateRangePickerList, FormDateTimePicker, FormInput, FormRadio, FormSelect, FormSlider, FormSwitch, GridContainer, GridItem, Icon, Illustration, InfoCard, InfoModal, InfoPopover, Input, LearnMoreButton, Link, Loading, Logo, NotFound, PageContainer, PageHeader, PageHeaderV2, Popover, Radio, RoleBanner, Select, Slider, StatusLight, Switch, Tab, TabGroup, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, Tabs, Tag, TagsList, ToggleButton, Typography, UpComponentsProvider, analytics, capitalize, copyToClipboard, formatDate, formatFileSize, formatNumber, generateQueryKey, objectToSearchParams, searchParamsToObject, theme, useAlert, useCursorPagination, useDebounce, useGsdSlider, useQueryParams, useRemotePagination, useToggle, useUrlParams, valueToString };
-export type { ActionToolbarProps, AlertProps, AnalyticsConfig, AvatarProps, BadgeProps, BannerProps, ButtonProps, CheckboxProps, CodeBlockProps, CodeInlineProps, CodeSnippetItemProps, CodeSnippetProps, ContactBoxProps, ControlButtonProps, CopyButtonProps, CreateAlertProps, CreateSnackbarProps, CursorPaginatedResponse, DateRange, DateTimeProps, DividerProps, DocumentationPopoverProps, EditTagsButtonProps, EmptyStateProps, FeatureCardHeaderActionsProps, FeatureCardHeaderProps, FeatureCardProps, FeatureFlagCheckboxProps, FilterPopoverProps, FindUsersButtonProps, FormAutocompleteMapper, FormAutocompleteProps, FormCheckboxProps, FormDatePickerDateType, FormDatePickerProps, FormDateRangePickerListProps, FormDateRangePickerProps, FormDateTimePickerProps, FormInputProps, FormRadioProps, FormSelectProps, FormSliderProps, FormSwitchProps, GridContainerProps, GridItemProps, IconAction, IconProps$1 as IconProps, IllustrationProps, InfoCardProps, InfoModalProps, InfoPopoverProps, InputProps, LearnMoreButtonProps, LinkProps, LoadingProps, LogoProps, MenuAction, NotFoundProps, PageContainerProps, PageHeaderProps, PageHeaderV2Props, PaginatedResponse, ParamsObject, PopoverProps, RadioProps, RemoveParamRules, RoleBannerProps, SearchParamObject, SelectProps, SliderProps$1 as SliderProps, StatusLightProps, SwitchProps, TabGroupProps, TabProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TableSortLabelProps, TabsProps, TagItem, TagProps, TagsListProps, ToggleButtonProps, TypographyProps, UseGsdSliderProps, UseToggleResult };
+/** Maps internal filter keys to URL search-param names. */
+type UrlKeyMap<FilterSchema extends AnyObjectSchema> = Partial<Record<keyof InferType<FilterSchema>, string>>;
+/**
+ * True when `draft` and `applied` match on every key in `schema`.
+ * Unrelated URL search params do not appear on these snapshots, so this stays accurate when other code adds params.
+ */
+declare function areFilterSnapshotsEqual<FilterSchema extends AnyObjectSchema>(schema: FilterSchema, draft: InferType<FilterSchema>, applied: InferType<FilterSchema>): boolean;
+
+type UseFilterStateOptions<FilterSchema extends AnyObjectSchema> = {
+    urlKeyMap?: UrlKeyMap<FilterSchema>;
+};
+/**
+ * Draft vs applied filter state: the UI edits `filters` (draft); `apply` writes to the URL via {@link useUrlParams}.
+ * Applied filters are always derived from the current search string and validated with Yup.
+ *
+ * When the query string changes, the draft syncs from the URL only if **schema-defined** filter values changed.
+ * Extra params from other features do not reset the draft or affect **`isDirty`** by themselves.
+ */
+declare function useFilterState<FilterSchema extends AnyObjectSchema>(schema: FilterSchema, options?: UseFilterStateOptions<FilterSchema>): {
+    readonly filters: InferType<FilterSchema>;
+    readonly setFilter: <K extends keyof InferType<FilterSchema>>(key: K, value: InferType<FilterSchema>[K]) => void;
+    readonly apply: () => void;
+    readonly reset: () => void;
+    readonly isDirty: boolean;
+    readonly defaults: InferType<FilterSchema>;
+};
+
+export { ActionToolbar, Alert, Avatar, Badge, Banner, Button, Checkbox, CodeBlock, CodeInline, CodeSnippet, ContactBox, ControlButton, CopyButton, DataGrid, DateTime, Divider, DocumentationPopover, EditTagsButton, EmptyState, FeatureCard, FeatureCardHeader, FeatureCardHeaderActions, FeatureFlagCheckbox, FilterPopover, FindUsersButton, FormAutocomplete, FormCheckbox, FormDatePicker, FormDateRangePicker, FormDateRangePickerList, FormDateTimePicker, FormInput, FormRadio, FormSelect, FormSlider, FormSwitch, GridContainer, GridItem, Icon, Illustration, InfoCard, InfoModal, InfoPopover, Input, LearnMoreButton, Link, Loading, Logo, NotFound, PageContainer, PageHeader, PageHeaderV2, Popover, Radio, RoleBanner, Select, Slider, StatusLight, Switch, Tab, TabGroup, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, Tabs, Tag, TagsList, ToggleButton, Typography, UpComponentsProvider, analytics, areFilterSnapshotsEqual, capitalize, copyToClipboard, formatDate, formatFileSize, formatNumber, generateQueryKey, objectToSearchParams, searchParamsToObject, theme, useAlert, useCursorPagination, useDebounce, useFilterState, useGsdSlider, useQueryParams, useRemotePagination, useToggle, useUrlParams, valueToString };
+export type { ActionToolbarProps, AlertProps, AnalyticsConfig, AvatarProps, BadgeProps, BannerProps, ButtonProps, CheckboxProps, CodeBlockProps, CodeInlineProps, CodeSnippetItemProps, CodeSnippetProps, ContactBoxProps, ControlButtonProps, CopyButtonProps, CreateAlertProps, CreateSnackbarProps, CursorPaginatedResponse, DateRange, DateTimeProps, DividerProps, DocumentationPopoverProps, EditTagsButtonProps, EmptyStateProps, FeatureCardHeaderActionsProps, FeatureCardHeaderProps, FeatureCardProps, FeatureFlagCheckboxProps, FilterPopoverProps, FindUsersButtonProps, FormAutocompleteMapper, FormAutocompleteProps, FormCheckboxProps, FormDatePickerDateType, FormDatePickerProps, FormDateRangePickerListProps, FormDateRangePickerProps, FormDateTimePickerProps, FormInputProps, FormRadioProps, FormSelectProps, FormSliderProps, FormSwitchProps, GridContainerProps, GridItemProps, IconAction, IconProps$1 as IconProps, IllustrationProps, InfoCardProps, InfoModalProps, InfoPopoverProps, InputProps, LearnMoreButtonProps, LinkProps, LoadingProps, LogoProps, MenuAction, NotFoundProps, PageContainerProps, PageHeaderProps, PageHeaderV2Props, PaginatedResponse, ParamsObject, PopoverProps, RadioProps, RemoveParamRules, RoleBannerProps, SearchParamObject, SelectProps, SliderProps$1 as SliderProps, StatusLightProps, SwitchProps, TabGroupProps, TabProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TableSortLabelProps, TabsProps, TagItem, TagProps, TagsListProps, ToggleButtonProps, TypographyProps, UrlKeyMap, UseFilterStateOptions, UseGsdSliderProps, UseToggleResult };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@up42/up-components",
-  "version": "9.1.0",
+  "version": "9.2.1",
   "description": "UP42 Component Library",
   "author": "Axel Fuhrmann axel.fuhrmann@up42.com",
   "license": "ISC",
@@ -81,6 +81,7 @@
     "lint-staged": "^12.3.1",
     "prettier": "^2.5.1",
     "react": "^18.3.1",
+    "remark-gfm": "^4.0.1",
     "rimraf": "^6.1.2",
     "rollup": "^4.59.0",
     "rollup-plugin-dts": "^6.1.0",
@@ -90,7 +91,8 @@
     "typescript": "^4.5.4",
     "vite": "^7.1.12",
     "vite-plugin-svgr": "^4.2.0",
-    "vitest": "^3.2.4"
+    "vitest": "^3.2.4",
+    "yup": "^0.32.9"
   },
   "peerDependencies": {
     "@emotion/react": "^11.7.1",
@@ -101,7 +103,8 @@
     "dayjs": "^1.11.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router": "^7.12.0"
+    "react-router": "^7.12.0",
+    "yup": "^0.32.9"
   },
   "lint-staged": {
     "*.{js,tsx,ts}": "eslint --cache --fix",